Recipe Grading Rubric

[sthalnir]

HTML & CSS Recipe To-Dos

18 to-dos, 5 points each, with 4 extra credit to-dos

Essential

Code

30 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 stylesheet via the link element
• [ ] Use rel="canonical" to cite original source of recipe
• [x] Use of a meaningful title and meta description
  • <title>Easy Ramen Recipe!</title>
  • <meta name="description" content="Get the feeling of authentic handmade ramen at home with ease!">

Design

40 points

• [x] Use of web safe fonts, see CSS font stacks for fallback replacements
• [ ] Use of web safe colors, please use short-hex values
  • For example: #ff0033 becomes #f03
  • See also Web Safe Color Chart
• [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 float based columns for wide-to-wider max-width: 60em; layout breakpoint

Test

20 points

• [x] Validate HTML (no errors; warnings are ok, but try to resolve)
• [x] Validate CSS (no errors; warnings are ok, but try to resolve)

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
  • comps (folder containing images (screen-shots) and/or comps used as style references)
  • For example: style-idea-1.pdf
  • 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
• [x] Add a description and url to your GitHub repo
  • Example description: A tasty HTML & CSS recipe.
  • Example url: https://jgagne.github.io/html-css-recipe/

Extra Extra

20 points

• [x] Use of original artwork (photography, illustration, etc.) and inclusion of credit byline
  • Credit byline example: <figcaption><small class="photo-credit">Photo by Jane Doe</small></figcaption>
• [ ] Test color contrast ratio of your webpage meets WCAG guidelines via Accessible Colors `#useful
• [ ] 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
• [ ] 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.)

[sthalnir]

This is my evaluation of how I think I did on my recipe page

[jgagne]

Looking great!

• Check off "Validate CSS" — Congratulations! No Error Found.
• Run your image(s) through ImageOptim, re-upload, and check off Extra Extra: Save for web

That'll give you a score of 18 out of 18!