How-To

Rubric Task List

20 tasks (5 points each) with 3 extra credit tasks.

Meta

5 points

[x] Use of accessible, responsible, and mobile-friendly metadata:
- Use of lang="en-us" to define the language of the document content.
- Use of <meta charset="utf-8"> as the first meta tag in <head> element to define proper character encoding.
- See Character encodings for beginners
- 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).
- <link rel="canonical" href="https://www.bonappetit.com/recipe/basic-crepes"> .
- Use of the <title> element to describe the document content in a concise and meaningful way.
- See <title>: The Document Title element
- Use of <meta name="author" content="Name Surname"> to define the author of the webpage or site.

For example:

<!doctype html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/main.css">
  <title>Short, Descriptive Title</title>
  <link rel="canonical" href="original-sources-of-content.com">
  <meta name="author" content="Name Surname">
</head>
<body>

<!-- Content -->

</body>
</html>

Markup & Style

45 points

[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).
- See Centering in CSS
- Such as use of the <hr> element for a horizontal rule, use CSS instead (border property).
- See The small & hr elements
- 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.
- See <br>: The Line Break element
[x] Use of semantic section (header, nav, section, etc.) and semantic text-level elements (strong, em, time, etc.).
- See HTML5 Doctor’s HTML5 Element Index
[x] Use of description <dl>, ordered <ol>, and unordered <ul> lists for defining a set of terms, instructions, navigational links, etc.
- See Semantic Structure: Regions, Headings, and Lists
- See also Creating Lists
[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] Use of basic typographic and box model layout (focusing on padding, border, and margin) styles.
[x] Use of web safe fonts
- See CSS font stacks for fallback replacements.
[x] Use CSS to style all links beyond the default blue/purple colors. (Also consider the style of link interactive states :hover and :focus.)
- See How to Style Links in CSS

Layout

5 points

[x] Use of a mobile first, single-column layout for small screens with a max-width and centered layout for wider screens.

For example:

body {
  max-width: 48rem; /* Max-width layout for wider screens */
  padding: 0 1rem;
  margin: 0 auto;
}

Images

20 points

See Decoding & Loading Images demo.

[x] Avoid use of the iframe element for animated GIFs; use the img element instead for embedded images (static and animated).
[x] Use of the <img> element for embedding images with the following attributes:
- Required: alt defines meaningful alternative text (alt text).
- See When writing alt text, ask yourself this question
- Required: src defines the source of the embedded content.
- Required: width and height defines the intrinsic width and height of an image.
- See Setting Height and Width on Images is Important Again
- Optional: decoding defines whether to decode the image in parallel or along with the rest of the page content.
- See Synchronous / Asynchronous Image Decode using〈img decoding〉Attribute
- Optional: loading defines the priority of an image depending on where it’s located within a page.
- See Browser-level image lazy-loading for the web

[x] Use of responsive images CSS markup.

For example:

img {
width: auto;
max-width: 100%;
height: auto;
}

[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

[ ] 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.
- See Styling lists
[x] Use of CSS generated content (pseudo-elements such as ::before, ::after, and ::marker) to add visual progressive enhancements.
- See CSS Generated Content and Visual Enhancements With Pseudo-Elements
[x] Use of original artwork (photography, illustration, etc.) with inclusion of credit byline.

For example:

<figure>
  <img alt="A plate of freshly baked chocolate chip cookies." src="img/chocolate-chip-cookies.jpg" width="1280" height="720" decoding="async">
  <figcaption class="image-credit">Photo by Name Surname</figcaption>
</figure>

kaylajordan11 / Cookies

How-To: Rubric Task List #1

How-To

Rubric Task List

Meta

Markup & Style

Layout

Images

Validation

Git Organized

Extra Credit