Recipe To-Dos

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

Essential

35 points

[ ] 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"> instead of <section id="More Recipes">; main.css instead of Main.CSS
[ ] Use of semantic section (header, nav, section, etc.) and semantic text-level elements (strong, em, time, etc.)
- See HTML5 Doctor’s HTML5 Element Index
[ ] Use of semantic grouping elements ol,ul, or dl for organizing lists instead of a table
[ ] Use of CSS box model properties padding, border, and margin for spacing and rule elements
[ ] Use of an external stylesheet via the link element
- For example: <link rel="stylesheet" href="css/main.css">
[ ] Use of rel="canonical" to cite original source of content
- For example: <link rel="canonical" href="https://mooshujenne.com/czech-goulash-cesky-gulas/">
[ ] Use of a meaningful title and meta description
- For example: <title>Easy Ramen Recipe!</title>
- For example: <meta name="description" content="Get the feeling of authentic handmade ramen at home with ease!">

35 points

[ ] 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
[ ] Use of a cohesive color palette for uniting typography, borders, background colors, and imagery
[ ] Use of typographic characters for fractions ½ , degrees (fahrenheit) ℉, arrows ⤴, etc.
[ ] Use of nav to navigation to page sections (fragments) #ingredients, #directions, etc.
[ ] Small screen, mobile first, single-column layout
[ ] Use of float based columns and media queries @media or Bootstrap (Grid system) for responsive layout — small-to-wide-to-wider screens

20 points

[ ] Validate HTML (no errors; warnings are ok, but try to resolve)
- Use CSS instead of <center> or align="center" and other obsolete and deprecated elements and attributes
[ ] Validate CSS (no errors; warnings are ok, but try to resolve)
- Only validate main.css (exclude bootstrap.css)

10 points

[ ] Repo should contain only essential files:
- index.html
- css (folder containing an external stylesheet)
- For example: main.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
- 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
- Example description: A tasty HTML & CSS recipe.
- Example url: https://jgagne.github.io/html-css-recipe/

25 points

[ ] Use of original artwork (photography, illustration, etc.) with 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
[ ] 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.)
[ ] Use of a web font for headings using the @font-face rule to progressively enhance the existing web safe CSS font stack
[ ] Use of smooth-scroll JavaScript, for navigation links, to add smooth page scrolling