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
• [ ] 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
• [x] 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.
• [ ] Use of nav to navigation to page sections (fragments) #about, #referemces, etc.
• [x] Small screen, mobile first, single-column layout
• [ ] 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
• [ ] 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]

Rename index.web.html to index.html.

[jgagne]

Resolve HTML issues: https://validator.w3.org/nu/?doc=https%3A%2F%2Fsjgregory97.github.io%2Fcruelty-free-site%2Findex.web.html

Minor Issues

Before

<section>
  <nav>
    <ul class="menu">
      <li> <a href="#hist"> <b>History</b> </a> </li>
      <li> <a href="#camp"> <b>Campaigns</b> </a></li>
      <li> <a href="#test"> <b>Tests </b></a> </li>
      <li> <a href="#alt"> <b>Alternatives</b> </a> </li>
      <li><a href="#prod"> <b>Products </b> </a> </li>
      <li> <a href="#even"> <b>Events</b> </a> </li>
      <li> <a href="#crit"> <b>Criticisms</b> </a> </li>
    </ul>
    <hr>
    <ul>
      <li> <a href="#also"> See Also </a></li>
      <li> <a href="#ref"> References </a> </li>
    </ul>
</section>
</nav>

Note: Improper nesting of tags. However, the easier way thing to do is just remove the <section> element, since the <nav> element is already a sectioning element.

After

<nav>
  <ul class="menu">
    <li> <a href="#hist"> <b>History</b> </a> </li>
    <li> <a href="#camp"> <b>Campaigns</b> </a></li>
    <li> <a href="#test"> <b>Tests </b></a> </li>
    <li> <a href="#alt"> <b>Alternatives</b> </a> </li>
    <li><a href="#prod"> <b>Products </b> </a> </li>
    <li> <a href="#even"> <b>Events</b> </a> </li>
    <li> <a href="#crit"> <b>Criticisms</b> </a> </li>
  </ul>
  <hr>
  <ul>
    <li> <a href="#also"> See Also </a></li>
    <li> <a href="#ref"> References </a> </li>
  </ul>
</nav>

Before

<p >
The term cruelty-free was first used in this way by Lady Dowding who persuaded manufacturers of fake furs to use the label Beauty Without Cruelty and went on to found the charity Beauty Without Cruelty in 1959.<a href="#three">[3] </a>The term was popularised in the USA in the 1970s by Marcia Pearson who founded the group Fashion With Compassion
</p> </h2>

Note: You have a few stray tags. For example, remove </h2>. Be sure to validate for details.

After

<p>
The term cruelty-free was first used in this way by Lady Dowding who persuaded manufacturers of fake furs to use the label Beauty Without Cruelty and went on to found the charity Beauty Without Cruelty in 1959.<a href="#three">[3] </a>The term was popularised in the USA in the 1970s by Marcia Pearson who founded the group Fashion With Compassion
</p>

Before

<h4>
  <nav>
<div class=back_to_top>
  <a href ="#top"> <strong> Back to top ↑</strong> </a>  </div></nav>
</h4>

Notes

• Again watch out for stray tags and spacing in the formatting of your html. For example, <a href ="#top"> should be <a href="#top"> without the space after href
• Also, quote all attribute values. For example <div class=back_to_top> should be <div class="back_to_top">
• Lastly, I like the idea of reusing the <nav> element here, but consider using the <nav> element for primary navigation only

After

<div class="back_to_top">
  <a href="#top"><strong>Back to top ↑</strong></a>
</div>

[jgagne]

Resolve CSS issues: http://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fsjgregory97.github.io%2Fcruelty-free-site%2Findex.web.html%23two&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

Minor Issues

• display: inline;, display: inline-block;, or display: block;
• float: left;, float: right;, or float: none;
• Remove unused @media (min-width: 48em)

[jgagne]

Add a meta description and include <link rel="canonical" href="…"> (add url) to cite the original source of content.

[jgagne]

Add a description and url to your GitHub repo:

[jgagne]

Add comps folder with included comp for reference.

[jgagne]

Style links, <a> tags, other than the default color (blue).