Learn

Now that we know about HTML element nesting and parent/child relationships, let’s see another way these concepts are applied on a real-life webpage.

Div elements divide your page by enclosing other elements. These enclosed groups of elements can then be organized, moved and styled independently from one another.

Div elements are often used with the class attribute. Here’s an example:

<div class="main">
 ...
</div>

Note: The ... indicates where other HTML elements would normally be enclosed by the div.

Below, we will use divs to divide our page into three separate parts.

Instructions

First, we will enclose all the elements between <body>…</body> in a div element with a class attribute of “container”.

<div class="container">
...
</div>

All the HTML elements you added in previous exercises should be inside the opening <div class="container">:

the navbar h2
the navbar ul
the company heading h1
the tagline h3
the paragraph
the video

Make sure the closing </div> tag is at least one line below the closing </video> tag.

Run your code. Notice that the elements have shifted in the web browser. We will fix this effect later on.

Next, we will enclose the navbar h2 and ul in another div and give it a class attribute of “nav”. You can use the code below as a guide:

<div class="nav">
  <h2>Ollie</h2>
  <ul>
    <li>sign up</li>
    <li>search bikes</li>
    <li>reserve a bike</li>
    <li>about us</li>
  </ul>
</div>

Run your code.

Notice that the navbar section now has a yellow background.

Finally, enclose the company h1, the h3, paragraph and video elements inside a third div with the class attribute of “main”.

Feel free to use the code below as a guide:

<div class="main">
  <h1>Ollie Bike Sharing</h1>
  <h3>Share Your Pedals with the World.</h3>
  <p>Easy-to-use, free bike sharing now available in 27 cities.</p>
  <video width="320px" height="240" controls>
    <source src="https://content.codecademy.com/projects/make-a-website/lesson-1/ollie.mp4" type="video/mp4">
  </video>
</div>

There will now be a total of three divs on the page: the div with the “container” class contains the divs with the “nav” and “main” classes.

Run your code.

The file main.css contains CSS styling for the “container”, “nav” and “main” classes, which enabled page elements to change. If you’re curious, explore main.css for fun. We will learn how CSS works later in the course.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?