Open jgagne opened 7 years ago
Move and nest stray <meta>
tag into the <head>
element (also remove unused <style
element.
Before
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta name="description" content="Recipe from Allrecipes.com">
<link rel="stylesheet" href="css/main.css">
<style>
</style>
<title>Maple Salmon Recipe</title>
</head>
After
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<meta name="viewport" content="width=device-width">
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta name="description" content="Recipe from Allrecipes.com">
<link rel="stylesheet" href="css/main.css">
<title>Maple Salmon Recipe</title>
</head>
Resolve use of <section>
element. A <section>
should begin with a heading (<h1>
–<h6>
), if not, it's best to use a different element. (Also, lowercase all markup.)
**Before***
<Section>
<img src="http://images.media-allrecipes.com/userphotos/560x315/862371.jpg" alt="salmon">
</section>
After
<figure>
<img src="http://images.media-allrecipes.com/userphotos/560x315/862371.jpg" alt="salmon">
</figure>
Resolve nesting issue. You open with <h4>
, so close with an </h4>
on the outside rather than closing on the inside of the </dl>
.
Also, consider this: Remove the <h4>
and just use the <dl>
element. You're marking up a description list, so the heading around it is unnecessary.
Before
<dl>
<h4>
<dt><b>Total Time:</b></dt>
<dd><time datetime="60m" itemprop="totalTime" content="PT7M">1 hr</time></dd>
</dl>
</h4>
After
<dl>
<dt><b>Total Time:</b></dt>
<dd><time datetime="60m" itemprop="totalTime" content="PT7M">1 hr</time></dd>
</dl>
For your HTML Microdata to validate properly you need to include what type of page content it is by adding: itemscope itemtype="http://schema.org/Recipe"
to the <body>
start tag.
For example
<body itemscope itemtype="http://schema.org/Recipe">
CSS issues to resolve…
Hexadecimal values for background-color
are either six or three characters long, you have four characters.
section{
background-color: #0000;
padding: 10px;
}
Lowercase all markup. For example, Text-align
should be text-align
. See below…
h1{Text-align: center;
font-size:39px; margin:1px
}
h3{Text-align: left;
border: 1px dotted;
}
Also, remove unnecessary start and end <style></style>
tags.
Please, add a description and url to your repo:
Another easy one, use rel="canonical"
to cite original source of recipe (nest within the <head>
element.)
For example
<!-- preferred url for search engines (original source) -->
<link rel="canonical" href="http://www.foodnetwork.com/recipes/alton-brown/guacamole-recipe.html">
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
.)