search

marisaratte / recipe-html-css

0 stars 0 forks source link

Scoring Rubric #1

Open jgagne opened 7 years ago

jgagne commented 7 years ago

HTML & CSS Recipe To-Dos

20 to-dos, 5 points each; 5 extra credit to-dos

Essential

Code

35 points

Design

40 points

Test

15 points

Git

10 points

Extra Extra

25 points

jgagne commented 7 years ago

Nest your headings inside of each section:

Before

<h3> Ingredients:</h3>
  <section class="ingredients" id="ingredients">
<h3>Directions</h3>
  <section class="directions" id="directions">

After

<section class="ingredients" id="ingredients">
    <h3> Ingredients:</h3>
<section class="directions" id="directions">
    <h3>Directions</h3>
jgagne commented 7 years ago

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.

Lastly, <br> elements don't belong mixed in, if you want to add spacing, talk to the <dd> elements and use CSS to add margin-bottom instead.

Before

<h4>
  <dl>
    <dt>Prep time</dt>
    <dd><time datetime="10m" itemprop="prepTime"> 10 mins</time></dd>
    <br> 
    <dt>Cook time</dt>
    <dd><time datetime="15m" itemprop="totalTime"> 15 mins</time></dd>
    <br> Ready in 25 mins 
  </h4>
</dl>

After

<dl> 
  <dt>Prep time</dt>
  <dd><time datetime="10m" itemprop="prepTime">10 mins</time></dd>
  <dt>Cook time</dt>
  <dd><time datetime="15m" itemprop="totalTime">15 mins</time></dd>
  <dd><em>Ready in 25 mins</em></dd>
</dl>
jgagne commented 7 years ago

Add an text alternative by adding an alt attribute and value to the <img> element:

Before 

<img src="http://rasamalaysia.com/wp-content/uploads/2014/08/sweet-sour-chicken-thumb.jpg" width="389">

After 

<img alt="Sweet & Sour Chicken" src="http://rasamalaysia.com/wp-content/uploads/2014/08/sweet-sour-chicken-thumb.jpg" width="389">
jgagne commented 7 years ago

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 either the <body> or <article> start tags.

For example

<article id="top" itemscope itemtype="http://schema.org/Recipe">
jgagne commented 7 years ago

The only CSS issue found is the use of max-height on the img selector; just use height.

Before

img {
  max-width: 100%;
  max-height: auto;
}

After

img {
  max-width: 100%;
  height: auto;
}
jgagne commented 7 years ago

Minor detail — give the navigation some spacing before the image. Add margin-bottom to the <nav>.

jgagne commented 7 years ago

Consider making an img folder and adding your image to that folder, then update the path to the image in your index.html (rather than linking to image from another website).

For example

<img alt="Sweet & Sour Chicken" src="img/sweet-sour-chicken-thumb.jpg" width="389">
jgagne commented 7 years ago

Please, add a description and url to your repo:

cexewbq