Use of <meta name="viewport" content="width=device-width, initial-scale=1"> for mobile-friendly layout.
Use of the <link> element for an external style sheet for all styles; avoid use of an embedded style sheet (<style>…</style>) and any inline style (style="…").
<link rel="stylesheet" href="css/main.css">
Use of the <link> element for canonical content (for search engines to index the original source of content to avoid duplicate content).
[x] 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 (-) in place of any space).
For example: Use <section id="sauce-preparation"> in place of <section id="Sauce Preparation">, main.css in place of Main.CSS, etc.
[x] Avoid use of obsolete elements, misuse of previously (pre-HTML5) presentational elements, or use of elements that are counter to responsive web design.
Such as use of the <center> element for centering content, use CSS instead (text-align or margin properties).
Such as use of the <br> for a line break, use the <p> element instead to group text into paragraphs and avoid a manual line break with the <br> element altogether to improve responsive text-based content.
[x] Use of proper typographical characters for fractions, punctuation, symbols, etc. (Use human-readable characters only, not the code/entity; for example: Use ½, instead of 1/2 [faux fraction] or ½ [code/entity]).
[x] Use of accessible colors contrast ratios with a cohesive color palette throughout the page for typography, borders, background colors, links, and imagery.
[x] Resize and optimize images to the size they appear in the browser at your max-width layout (and at a maximum, double the width for retina and super retina displays).
In Photoshop: save bitmap (raster) images using Photoshop, export Save for Web (Legacy)… photographs as a JPG (.jpg) using the preset JPEG High or JPEG Medium (depending on quality and file size) and illustrations as a PNG (.png) using the preset PNG-8 128 Dithered (less colors [max 256]) or PNG-24 (more colors [millions]).
In Squoosh: Use MozJPEG to optimize JPGs and use OptiPNG to optimize PNGs. (You may resize an image in Squoosh as well.)
In ImageOptim: Enable all image optimizations options via ImageOptim > Preferences… > Enable (left sidebar in General settings).
Note: Aim for an optimized file size around 150 KB and below (max 200 KB).
Validation
15 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)
[x] Color Contrast Accessibility Validator (All color combinations should pass: Congratulations! No automated color contrast issues found on the webpage tested.)
Git Organized
10 points
Remember to use lowercase naming…
[x] Repo should contain only essential files:
index.html
css (folder containing an external stylesheet)
For example: main.css
img (folder containing images)
For example: yummy-cakes.jpg
README.md
Update with a proper heading (title) and paragraph (description) using Markdown.
[x] Add a description and URL to the About section of your GitHub repo.
Extra Credit
15 points
[x] Use of consistent text size and spacing (font-size, line-height, and margin) for paragraphs and lists to create a seamless reading experience from one text grouping to the next.
How-To
Rubric Task List
20 tasks (
5 points
each) with 3 extra credit tasks.Meta
5 points
lang="en-us"
to define the language of the document content.<meta charset="utf-8">
as the first meta tag in<head>
element to define proper character encoding.<meta name="viewport" content="width=device-width, initial-scale=1">
for mobile-friendly layout.<link>
element for an external style sheet for all styles; avoid use of an embedded style sheet (<style>
…</style>
) and any inline style (style="…"
).<link rel="stylesheet" href="css/main.css">
<link>
element for canonical content (for search engines to index the original source of content to avoid duplicate content).<link rel="canonical" href="https://www.bonappetit.com/recipe/basic-crepes">
.<title>
element to describe the document content in a concise and meaningful way.<title>
: The Document Title element<meta name="author" content="Name Surname">
to define the author of the webpage or site.For example:
Markup & Style
45 points
class
,id
, and file/folder names should not include spaces, instead use a hyphen (-
) in place of any space).<section id="sauce-preparation">
in place of<section id="Sauce Preparation">
,main.css
in place ofMain.CSS
, etc.<center>
element for centering content, use CSS instead (text-align
ormargin
properties).<hr>
element for a horizontal rule, use CSS instead (border
property).<br>
for a line break, use the<p>
element instead to group text into paragraphs and avoid a manual line break with the<br>
element altogether to improve responsive text-based content.<br>
: The Line Break elementheader
,nav
,section
, etc.) and semantic text-level elements (strong
,em
,time
, etc.).<dl>
, ordered<ol>
, and unordered<ul>
lists for defining a set of terms, instructions, navigational links, etc.½
, instead of1/2
[faux fraction] or½
[code/entity]).padding
,border
, andmargin
) styles.:hover
and:focus
.)Layout
5 points
For example:
Images
20 points
See Decoding & Loading Images demo.
iframe
element for animated GIFs; use theimg
element instead for embedded images (static and animated).<img>
element for embedding images with the following attributes:alt
defines meaningful alternative text (alt text).src
defines the source of the embedded content.width
andheight
defines the intrinsic width and height of an image.decoding
defines whether to decode the image in parallel or along with the rest of the page content.loading
defines the priority of an image depending on where it’s located within a page.max-width
layout (and at a maximum, double the width for retina and super retina displays).Save for Web (Legacy)…
photographs as a JPG (.jpg
) using the presetJPEG High
orJPEG Medium
(depending on quality and file size) and illustrations as a PNG (.png
) using the presetPNG-8 128 Dithered
(less colors [max 256]) orPNG-24
(more colors [millions]).MozJPEG
to optimize JPGs and useOptiPNG
to optimize PNGs. (You may resize an image in Squoosh as well.)ImageOptim
>Preferences…
>Enable
(left sidebar in General settings).150 KB
and below (max200 KB
).Validation
15 points
Git Organized
10 points
Remember to use lowercase naming…
index.html
css
(folder containing an external stylesheet)main.css
img
(folder containing images)yummy-cakes.jpg
README.md
Extra Credit
15 points
font-size
,line-height
, andmargin
) for paragraphs and lists to create a seamless reading experience from one text grouping to the next.::before
,::after
, and::marker
) to add visual progressive enhancements.For example: