Open jgagne opened 7 years ago
This is minor, but even folders should not have spaces; use a hyphen. Please change previous recipes
to previous-recipes
.
A few CSS errors; see if you can resolve them: http://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Freneecontino.github.io%2Fid-sp17-recipe%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en
You also have an embedded/internal CSS in your index.html
. Remove <style>…</style
in your head element. Your external stylesheet main.css
should be doing all the heavy lifting. In short, you have double the CSS; use the external stylesheet exclusively. Create a css
folder and add main.css
.
Consider how the vertical pipes work on a small screen. Maybe instead of being set vertically, they are horizontal pipes instead? Also, resolve the in-between width, between small and wide.
I'd bold the text of your main heading Salted Pomegranate Chocolate Fudge. Also, consider keeping "Chocolate Fudge" together, don't let them wrap. Try something like this…
html
<h1>Salted Pomegranate <span class="nowrap">Chocolate Fudge</span></h1>
css
.nowrap {
white-space: nowrap;
}
HTML & CSS Recipe To-Dos
20 to-dos, 5 points each; 5 extra credit to-dos
Essential
Code
35 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 recipetitle
and metadescription
Design
40 points
#f03
not#ff0033
)nav
to navigation to page sections (fragments)#ingredients
,#directions
, etc.@media
for wide-to-wider screens, desktop and laptop, layoutinline-block
orfloat
based columns for wide-to-widermax-width: 60em;
layoutTest
15 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
25 points
<figcaption><small class="photo-credit">Photo by Ayanah Proulx</small></figcaption>
#useful
or Color Safe#forlateruse
h1
–h6
) See also heading and section rankExport > 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
.)