Skip to content

Latest commit

 

History

History
90 lines (64 loc) · 5.11 KB

development-strategy.md

File metadata and controls

90 lines (64 loc) · 5.11 KB
Raw

Self-Evaluation Criteria

Build two full integrations. As often is with CSS, this is an exercise in precision and accuracy (and a zest of dementia, because... CSS).

For each interface :

  1. 2
  2. 19
  3. 6 Create a standard html page based on this template (replace [filename] with the filename of the mockup image you are building):
  • Create a standard style.css stylesheet and link it to the html page
  • Add the relevant HTML and CSS code so that the end result looks as similar as possible to the provided mockup images.
  • Commit (and push) per feature or part (set a timer to remind you if you need to)

Git

  • I have created the repository
  • I commit regularly (3 or more times per interface) and with useful commit messages
  • I push to the repository often (at least twice a day)
  • I provide a README, briefly describing the project

Example of good commit messages:

  • Add interface 1 HTML structure
  • Add basic styling for interface 1
  • Fix CSS centering problem
  • ...

HTML

  • My HTML code is valid (check with an online validator)
  • My HTML code is semantic, for example:
    • I use the correct header tag (<h2>, <h3>, ...) to mark titles and subtitles (but not just to make text bigger)
    • I use a <table> tag only to display tabular data
    • I use a <ul>/<ol> tag only to display lists
    • I use layout tags (<header>, <main>, <nav>, <aside>, <footer>) only for page-wide sections
  • My HTML code is well indented (if necessary I use an automatic formatter such as Prettier)
  • My HTML is accessible (every <img> has a well written and descriptive alt attribute)

CSS

  • My CSS is well organized and indented (use an automatic formatter such as Prettier)
  • If required by the instructions, my CSS has relevant media queries to make the interface responsive (I test it on mobile, tablet and desktop width)
  • My classes are named in a meaningful way
    • Note: there are 1000 ways to name your classes, you will not be judged on the specific name you choose, but we can see if you chose something random vs. something that makes sense :)
  • My CSS produces consistent results on Chrome and Firefox

Overall result

  • My end result visually matches the provided mockup to the best of HTML/CSS possibilities
  • I use a font whose category matches the font in the provided mockup (where category means serif, sans-serif or monospace)
    • Extra points if you can actually find a similar font, for example on Google Fonts
  • I use colors that match the colors found in the provided mockup (using a color picker if necessary)
    • I use correct colors for fonts
    • I use correct colors for backgrounds
    • I use correct colors for borders
  • I accurately reproduce the overall dimensions of the widget, the dimensions of the inner elements, the spacing (horizontal and vertical) between the inner elements
  • I align the elements and the text as they appear in the provided mockup (left-, center-, right-aligned, and top-, middle-, bottom-aligned)
  • I size the fonts as closely as possible to the provided mockup
  • I style the fonts with the appropriate weight (normal or bold) and style (regular or italic) as per the provided mockup

Deploy

  • My work is deployed and viewable by anyone with a public URL
  • Each of my interface is a separate page linked to my README file

Done ?

  • Are you sure? Review the criteria

Tips

Remember when iPhones came out with the slogan "There is an app for everything"?. Well, there is also a browser extension for everything.

Distances and colors

For this challenge you will need to measure distances on screen, and colors. This is an extension that does both:

Alternatively, you can install separate extensions for measuring distances and picking colors (you can find a lot of them on the respective stores).

Or yet another alternative: you can open the image with an image editing application such as Photoshop, Affinity Photo, or an online alternative such as https://www.photopea.com/.

Fonts

You can try to find a similar font to use by looking at https://fonts.google.com/, or by using the Font Indentifier tool by Font Squirrel (https://www.fontsquirrel.com/matcherator). This is optional and not required.