Open jgagne opened 7 years ago
Resolve HTML issues: https://validator.w3.org/nu/?doc=https%3A%2F%2Freneecontino.github.io%2Fid-sp17-gbrwebsite%2F
Before
<nav>
<details open>
<summary><strong>Content</strong></summary>
</nav>
<ol>
<li><a href="index.html">Home</a></li>
<li><a href="geology.html">Geology and geography</a></li>
<li><a href="ecology.html">Ecology</a></li>
<li><a href="tourism.html">Tourism</a></li>
</ol>
Atter
<nav>
<details open>
<summary><strong>Content</strong></summary>
<ol>
<li><a href="index.html">Home</a></li>
<li><a href="geology.html">Geology and geography</a></li>
<li><a href="ecology.html">Ecology</a></li>
<li><a href="tourism.html">Tourism</a></li>
</ol>
</details>
</nav>
Before
<p><h4>The Great Barrier…</h4></p>
Headings are headings and paragraphs are paragraphs, not both.
After
<p>The Great Barrier…</p>
Update <title>Navigation Demo</title>
, add a meta
description, and reference the original source material by including <link rel="canonical" href="…">
(add url).
Add a comps
folder with included comp for reference.
Resolve CSS issues: http://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Freneecontino.github.io%2Fid-sp17-gbrwebsite%2Fecology.html&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en
Slack me if you need help.
Single-Serving Wiki To-Dos
20 to-dos, 5 points each; plus 4 extra credit to-dos
Essential
Code
30 points
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
notMain.CSS
header
,nav
,section
, etc.) and semantic text-level elements (strong
,em
,time
, etc.) See HTML5 Doctor’s HTML5 Element Indexpadding
,border
, andmargin
for spacing and rule elementslink
elementrel="canonical"
tocite
original source of contenttitle
and metadescription
Design
45 points
woff
/woff2
web fonts and web safe fonts, see CSS font stacks for fallback replacements#9c9c9c
,rgb(153, 153, 153)
,rgba(0, 0, 0, .75)
, etc.). See Color picker toolnav
to navigation to page sections (fragments)#about
,#referemces
, etc.@media
for wide-to-wider screens, desktop and laptop, layoutinline-block
orfloat
based columns for wide-to-widermax-width: 60em;
layoutOptimization
5 points
Export > Save for Web (Legacy)…
feature by exporting images at a width of960px
using theJPEG High Preset
, and then use ImageOptim to save a few more KB. (Ideal file size per non-retina image should be under200 KB
.)Test
10 points
Git
10 points
index.html
css
(folder containing an external style sheet)main.css
orscreen.css
andprint.css
img
(folder containing images)jiffy-cornbread.jpg
versions
(folder [no spaces] containing tests, experiments, work in progress, etc.)recipe-test-1.html
refs
(folder containing images (screen-shots) and/or comps used as style references)style-idea-1.jpg
README.md
; for example https://github.com/mmuench55/quiche-recipeREADME.md
https://username.github.io/repo
→ https://jgagne.github.io/id-sp17-recipe/)Extra Extra
20 points
#useful
or Color Safe#forlateruse
h1
–h6
) See also heading and section rank