Scoring Rubric

[jgagne]

HTML & CSS Recipe To-Dos

20 to-dos, 5 points each; 5 extra credit to-dos

Essential

Code

35 points

• [x] Use of lowercase alphabet for all markup, style, and file and folder names (also class, id, and file and folder names should not have spaces, instead use a hyphen - or an underscore _ in place of a space). For example, <section id="more-recipes"> not <section id="More Recipes">; main.css not Main.CSS
• [x] Use of semantic section and grouping elements (header, nav, section, etc.) and semantic text-level elements (strong, em, time, etc.) See HTML5 Doctor’s HTML5 Element Index
• [x] Use of CSS box model properties padding, border, and margin for spacing and rule elements
• [x] Use of an external style sheet via the link element
• [x] Use rel="canonical" to cite original source of recipe
• [x] Use of a meaningful title and meta description
  • Easy Ramen Recipe!
  • Get the feeling of authentic handmade ramen at home with ease!
• [x] Use of Recipe Microdata (structured data for search engines)

Design

40 points

• [x] Use of web safe fonts, see CSS font stacks for fallback replacements
• [x] Use of web safe colors, please use short-hex values (e.g. #f03 not #ff0033)
• [x] Use of a cohesive color palette for uniting typography, borders, background colors, and imagery
• [x] Use of typographic characters for fractions ½ , degrees (fahrenheit) ℉, arrows ⤴, etc.
• [x] Use of nav to navigation to page sections (fragments) #ingredients, #directions, etc.
• [x] Small screen, mobile first, single-column layout
• [x] Use of media queries @media for wide-to-wider screens, desktop and laptop, layout
• [x] Use of inline-block or float based columns for wide-to-wider max-width: 60em; layout

Test

15 points

• [x] Test Microdata using the Structured Data Testing Tool
• [x] Validate HTML (no warnings or errors)
• [x] Validate CSS

Git

10 points

• [x] Repo should contain only essential files:
  • index.html
  • css (folder containing an external style sheet)
  • For example: main.css or screen.css and print.css
  • img (folder containing images)
  • For example: jiffy-cornbread.jpg
  • versions (folder [no spaces] containing tests, experiments, work in progress, etc.)
  • For example: recipe-test-1.html
  • refs (folder containing images (screen-shots) and/or comps used as style references)
  • For example: style-idea-1.jpg
  • Or include a list of references in the README.md; for example https://github.com/mmuench55/quiche-recipe
  • README.md
  • Update this file with a proper heading (title) and paragraph (description)
  • Markdown basic and dingus
• [ ] Add a description and url to your GitHub repo (e.g. A tasty HTML & CSS recipe. https://username.github.io/repo → https://jgagne.github.io/id-sp17-recipe/)

Extra Extra

25 points

• [x] Use of original artwork (photography, illustration, etc.) and inclusion of credit byline
  • Credit byline example: <figcaption><small class="photo-credit">Photo by Ayanah Proulx</small></figcaption>
• [x] Test color contrast ratio of your webpage meets WCAG guidelines via Color Contrast Checker #useful or Color Safe #forlateruse
• [ ] Test document outline for heading and section rank, HTML5 Outliner, and update any Untitled Section to display a proper heading (h1–h6) See also heading and section rank
• [ ] Add a print style sheet
• [ ] Save images for web, using Photoshop’s Export > Save for Web (Legacy)… feature by exporting images at a width of 960px using the JPEG High Preset, and then use ImageOptim to save a few more KB. (Ideal file size per non-retina image should be under 200 KB.)

[jgagne]

• Microdata, structured data, validation: 2 errors. https://search.google.com/structured-data/testing-tool#url=https%3A%2F%2Fjuliabujalski.github.io%2Fid-sp17-recipe%2F
• HTML validation: 2 errors. https://validator.w3.org/nu/?doc=https%3A%2F%2Fjuliabujalski.github.io%2Fid-sp17-recipe%2F

[jgagne]

• FoldersFinal Recipe and Recipe Test should be lowercase and without spaces. (e.g. recipe-test, recipe-test-final, etc.)

[jgagne]

Include generic font-family fallback… font-family: "Goudy Old Style", Baskerville, serif;

body {
  width: 70%;
  max-width: 60em;
  min-width: 20em;
  margin: auto;
  padding: 0 1em 0 1em;
  color: #300;
  font-family: "Goudy Old Style", Baskerville; 
}

[jgagne]

Use em not cm for screen media. You may use cm or in for print media.

/* Header styling */
header {
  display: block;
  width: 50%;
  text-align: center;
  margin: auto;
  padding: 0 2cm .5cm 2cm;
}

[jgagne]

Please, give your navigation links some horizontal spacing (a bit of a gap to separate).

[jgagne]

p.s. Give those blue links another color or style (please).

[jgagne]

Extra extra: Lowercase filenames (maybe rename? [e.g. holy-cow-step-1.jpg]) https://github.com/juliabujalski/id-sp17-recipe/tree/master/img

[jgagne]

Everything looks great. Consider one last item:

• Add a description and url to your GitHub repo (e.g. A tasty HTML & CSS recipe. https://username.github.io/repo → https://jgagne.github.io/id-sp17-recipe/)