Scoring Rubric

[jgagne]

Single-Serving Wiki To-Dos

20 to-dos, 5 points each; plus 4 extra credit to-dos

Essential

Code

30 points

• [x] 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"> not <section id="More Recipes">; main.css not Main.CSS
• [x] Use of semantic section and grouping elements (header, nav, section, etc.) and semantic text-level elements (strong, em, time, etc.) See HTML5 Doctor’s HTML5 Element Index
• [x] Use of CSS box model properties padding, border, and margin for spacing and rule elements
• [x] Use of an external style sheet via the link element
• [ ] Use rel="canonical" to cite original source of content
• [x] Use of a meaningful title and meta description

Design

45 points

• [ ] Use of combination of free woff/woff2 web fonts and web safe fonts, see CSS font stacks for fallback replacements
• [x] Use of hexadecimal, rgb, and/or rgba values for text and background colors (e.g. #9c9c9c, rgb(153, 153, 153), rgba(0, 0, 0, .75), etc.). See Color picker tool
• [ ] Use of a cohesive color palette for uniting typography, borders, background colors, and imagery
• [x] Use of typographic characters for fractions ½ , degrees (fahrenheit) ℉, arrows ⤴, etc.
• [x] Use of nav to navigation to page sections (fragments) #about, #referemces, etc.
• [x] Small screen, mobile first, single-column layout
• [x] Use of media queries @media for wide-to-wider screens, desktop and laptop, layout
• [ ] Use of inline-block or float based columns for wide-to-wider max-width: 60em; layout
• [ ] Final HTML & CSS layout is a 75—100% match of the type, color, and layout presented in your high fidelity comp(s)

Optimization

5 points

• [ ] 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.)

Test

10 points

• [ ] Validate HTML (no warnings or errors)
• [ ] Validate CSS

Git

10 points

• [x] Repo should contain only essential files:
  • index.html
  • css (folder containing an external style sheet)
  • For example: main.css or screen.css and print.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
  • refs (folder containing images (screen-shots) and/or comps used as style references)
  • For example: style-idea-1.jpg
  • Or include a list of references in the README.md; for example https://github.com/mmuench55/quiche-recipe
  • README.md
  • Update this file with a proper heading (title) and paragraph (description)
  • Markdown basic and dingus
• [x] Add a description and url to your GitHub repo (e.g. A tasty HTML & CSS recipe. https://username.github.io/repo → https://jgagne.github.io/id-sp17-recipe/)

Extra Extra

20 points

• [ ] Test color contrast ratio of your webpage meets WCAG guidelines via Color Contrast Checker #useful or Color Safe #forlateruse
• [ ] Test document outline for heading and section rank, HTML5 Outliner, and update any Untitled Section to display a proper heading (h1–h6) See also heading and section rank
• [ ] Add a print style sheet
• [ ] Add Smooth Scroll, a lightweight script to animate scrolling to anchor links, to your page

[jgagne]

Resolve HTML issues: https://validator.w3.org/nu/?doc=https%3A%2F%2Faveryh22.github.io%2Fid-sp17-wiki%2Findex.html

Minor Issues

Before

<h2>Features</h2>
<summary> <b>Contents</b></summary>
<nav>
<ul>
<li><a href="#stars">Stars</a></li>
<li><a href="#deepspaceobjects">Deep-Space Objects</a></li>
<li><a href="#meteorshower">Meteor Shower</a></li>
<li><a href="#history">History and Mythology</a></li>
<li><a href="#visualizations">Visualizations</a></li>
</ul>
</nav>

Note: The <summary element can only be used within the <details> element. Remove. Now, next your <h2> inside the <nav> as that section's heading.

Atter

<nav>
<h2>Features</h2>
<ul>
<li><a href="#stars">Stars</a></li>
<li><a href="#deepspaceobjects">Deep-Space Objects</a></li>
<li><a href="#meteorshower">Meteor Shower</a></li>
<li><a href="#history">History and Mythology</a></li>
<li><a href="#visualizations">Visualizations</a></li>
</ul>
</nav>

Minor Issues

Before

<section id="#top">

After

Remove <section id="#top">. Instead add id to instead, but remove# before top.

<body id="top">

Before

<main class="max-width">
  <hr>
  <h1>About…</h1>

Note: Remove <hr> and …, but most importantly remove the <hr> (it's unnecessary). If you want a horizontal rule use a CSS border (border-top: …;).

After

<main class="max-width">
  <h1>About</h1>

[jgagne]

Style navigation and "Back to Top!" links.

[jgagne]

Resolve CSS issues: http://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Faveryh22.github.io%2Fid-sp17-wiki%2Findex.html&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

Remove <style> tag. Remove comments made with ! or properly comment out with /* this is markup for a proper comment in CSS */.

[jgagne]

Clean-up repo, remove raw and backgrounds-images folders. Please, add comps folder and include a comp for this website. Thanks!

[jgagne]

Include <link rel="canonical" href="…"> (add url) to cite original source of content.