Sensible Structure: Things to notice

codepen: https://codepen.io/joe_bacal/pen/wqowma

In this project we're combining the different skills we have learned over the last three classes. There are a few things we looked at in detail today.

Using semantic elements

It is easier to code and better for screen readers if we use semantic elements when we can. So instead of wrapping our menu in a <div> we wrap it in a <nav> element, and our "articles" in an <article>.

Linking to a spot on the page:

<!-- in our menu we link to the #{id} -->
<li><a href="#dogs">Dogs</a></li>

<!-- we give the article an id without the # symbol -->
<article id="dogs"> ... </article>

Floating left and right

To get things to line up next to one another weset widths and then float. We also have to set the enclosing element to clear:both.

article {
  clear:both;
}

.animal {
  width:30%;
  float:left;
}

.animal img {
  width:100%;
}

.description {
  width:70%;
  float:right;
}

Javascript - converting answers to lowercase before testing

We took whatever the person taking the quiz types in and converted it to lower case to make answers like yEs or YEs or Yes all count as "yes".

var dogsAnswer = prompt('Do dogs make good pets?').toLowerCase();