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 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
[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] 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)
Single Serving
Scoring Rubric Task List
10 tasks,
10 points
each; with 4 extra credit tasksEssentials
20 points
<head>
element [to ensure special characters display properly])<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
title
element<title>Easy Fish Tacos Recipe</title>
description
meta tag<meta name="description" content="Get the feeling of authentic handmade fish tacos at home with ease!">
<link rel="canonical" href="https://www.spendwithpennies.com/fish-tacos-recipe-onion-slaw/>
https://username.github.io/repo/
)<meta name="author" content="Firstname Lastname">
class
,id
, and file/folder names should not include spaces, instead use a hyphen-
or an underscore_
instead of a space).<section id="ingredients-for-sauce">
not<section id="Ingredients for Sauce">
;main.css
notMain.CSS
h1
–h6
,section
,p
, etc.) and semantic text-level elements (strong
,em
,time
, etc.) for contentImage & Text
10 points
alt
attribute on theimg
element to provide a short description, alternate text, of the visual content displayed in each imageDesign
30 points
#greenisgood
Validation
20 points
Resolve all errors; warnings are ok. (But try to resolve warnings if possible)
Git Organized
20 points
index.html
(root-level document)css
(a folder containing an external stylesheet)main.css
img
(a folder containing images)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
Extra Credit
40 points
Save for Web (Legacy)…
illustrations as a PNG (.png
) using the presetPNG-8 128 Dithered
(less colors) orPNG-24
(more colors) and photographs as a JPG (.jpg
) using the presetJPEG High
Save As…
>SVG
(.svg
) formatsrc
(to embed the.png
) andsrcset
(to embed the.svg
) attributes for providing fallback and future-friendly image formats<img src="img/artwork.png" srcset="img/artwork.svg" alt="A short description of what I should be seeing here.">
250 KB
or less