Project How To Part 2

We are on the second part of our project. We are going to take four weeks to complete it.

This week is all about the structure. We are writing the HTML. If you can plan out the look of your page before starting this step, it will help you in the future! If you know you want all the headings to look the same, then use the same HTML tag or the same class for each one. Use DIV around clear sections of your page. I suggest putting every image in an “image container,” a div with the class image container. It will help us manipulate the image in the future.

Here’s my code if that helps!

<!DOCTYPE html> <html lang="en" dir="ltr'> <head> <meta charset="utf-8"> <title>How To</title> <link href="./resources/css/style.css" rel="stylesheet" type="text/css"/> </head> <body> <h1>How To</h1> <h4>Recipes and More</h4> <nav> <a href="#breakfast">Breakfast</a> <a href="#dinner">Dinner</a> <a> href= "#dessert">Dessert</a> <a href="#bread">Bread</a> <a href="#soup">Soup</a> </nav> <h2 id="bread">Breads</h2> <div class="recipe"> <<h3>White Bread</h3> <div class="image-container"> <img src="./resources/images/bread.jpg"/> </div> <h4 class="ingredients">Ingredients</h4>

Coding example

coding example

Notice how I put a comment at the end of a DIV. Doing that will save you a lot of headaches! Label what it’s closing. Label sections on the page if it’s not clear some other way, or just label it anyway. Organization will help make things easier.

You can watch this lesson here.