Single Serving

Scoring Rubric Task List

10 tasks, 10 points each; with 4 extra credit tasks

Essentials

20 points

[x] Use of essential metadata
- Use of the HTML5 character encoding meta tag (this should be the first meta tag inside your <head> element [to ensure special characters display properly])
- For example: <meta charset="utf-8">
  - See The Road to HTML 5: character encoding
- Use of a mobile-friendly, viewport meta tag
- For example: <meta name="viewport" content="width=device-width, initial-scale=1">
- Use of an external stylesheet
  - For example: <link rel="stylesheet" href="css/main.css">
- Use of a meaningful title element
- <title>Easy Fish Tacos Recipe</title>
- Use of a meaningful description meta tag
- For example: <meta name="description" content="Get the feeling of authentic handmade fish tacos at home with ease!">
- Use of canonical link to reference original or preferred content source
- For example: <link rel="canonical" href="https://www.spendwithpennies.com/fish-tacos-recipe-onion-slaw/>
- Note: If the original content source is your own, include the url of your webpage (https://username.github.io/repo/)
- Use of an author meta tag
- For example: <meta name="author" content="Firstname Lastname">
[x] Use of essential markup best practices
- Use of lowercase alphabet for all markup, style, and file/folder names (also class, id, and file/folder names should not include spaces, instead use a hyphen - or an underscore _ instead of a space).
- For example: <section id="ingredients-for-sauce"> not <section id="Ingredients for Sauce">; main.css not Main.CSS
- Use of semantic section and grouping elements (h1–h6 , section, p, etc.) and semantic text-level elements (strong, em, time, etc.) for content
- See HTML5 Doctor’s HTML5 Element Index
- See also If you’ve ever had doubts about how to mark up subheadings

Image & Text

10 points

[x] Use of the alt attribute on the img element to provide a short description, alternate text, of the visual content displayed in each image

Design

30 points

[x] Use of a cohesive and accessible color palette for typography, borders, background colors, and imagery
- Use of Accessible Colors — test the color contrast ratio of your webpage meets the Web Content Accessibility Guidelines (WCAG) 2.1.
- If it fails — make it pass #greenisgood
[x] Use of custom web fonts or web safe fonts (with the proper generic font family fallback)
- See How to use Google Fonts in your next web design project
- See Web safe fonts
- See also CSS font stacks for fallbacks
[x] Use of Bootstrap (Grid system) for responsive layout — mobile first, single-column layout (for small screens) to multi-column layout (for wide-to-wider screens)

Validation

20 points

Resolve all errors; warnings are ok. (But try to resolve warnings if possible)

[x] Validate HTML (You may get an error when using Google Web Fonts — it’s an ok/tolerable error)
[x] Validate CSS

Git Organized

20 points

[x] Repo should contain only essential files/folders:
- index.html (root-level document)
- css (a folder containing an external stylesheet)
- For example: main.css
- img (a folder containing images)
- For example: fish-tacos.jpg
- wip ([or by any other name, but please keep it short or abbreviated] a folder containing tests, work in progress, etc.)
- README.md
- Update this file with a heading (title) and paragraph (description)
- Markdown basic and dingus
  - See Mastering Markdown
[x] Add a description and url to your GitHub repo
- For example: https://github.com/jgagne/recipe-markup/
- A tasty HTML & CSS recipe. https://jgagne.github.io/recipe-markup/

Extra Credit

40 points

[x] Use of original artwork (photography, illustration, etc.) or sourced artwork from the existing article or found with inclusion of credit byline somewhere
[x] Save images for the web as a PNG, SVG (or both), or JPG
- Save bitmap (raster) images using Photoshop, export Save for Web (Legacy)… illustrations as a PNG (.png) using the preset PNG-8 128 Dithered (less colors) or PNG-24 (more colors) and photographs as a JPG (.jpg) using the preset JPEG High
- Save vector images, illustration and typography-based artwork, using Illustrator, Save As… > SVG (.svg) format
- When using SVG use the src (to embed the .png) and srcset (to embed the .svg) attributes for providing fallback and future-friendly image formats
  - For example: <img src="img/artwork.png" srcset="img/artwork.svg" alt="A short description of what I should be seeing here.">
[x] Optimization images using ImageOptim or similar software for Windows and/or SVGOMG! for SVGs
- Each image should, ideally, weigh in at 250 KB or less
[x] Ready, set, test your website for performance, accessibility, use of best practices, and search engine optimization (and try to score 90 or above in each category)

LaurenRoderigues / Jet-Set-Go

Scoring Rubric Task List #1

Single Serving

Scoring Rubric Task List

Essentials

Image & Text

Design

Validation

Git Organized

Extra Credit