Open jgagne opened 7 years ago
Use lowercase for CSS.
For example
.About a
should be .about a
.
Consider removing the default from the <body>
element for full-bleed background-color
.
For Example
body {
margin: 0;
}
Resolve HTML issues (easy fixes): https://validator.w3.org/nu/?doc=https%3A%2F%2Fmarisaratte.github.io%2Fwomens-march%2Findex.html
<meta charset="usf-8">
, utf-8
instead of usf-8
alt
attribute with a short alternative text value. More on alternative textAdd your website url
to your repo:
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