Lesson 8 Wrap With Div


#1

Hi guys. I'm a complete novice when it comes to any type of coding. I've successfully worked through the first 7 lessons but this one has me stumped. It wants me to wrap the 3 pieces of supporting content in divs, but I cannot figure out where these need to be inserted.

My code is below:

<!DOCTYPE html>
<html>
<body>
<div class="nav">
<div class="container">
<ul>
<li>Tom</li>
<li>Browse</li>
</ul>
<ul>
<li>Sign Up</li>
<li>Log In</li>
<li>Help</li>
</ul>
</div>
<div>
<h3>Host</h3>
<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
<p> <a href="#">Learn more about hosting</a>
</p>
</div>
<div>
<h3>Trust and Safety</h3>
<p>From Verified ID to our worldwide customer support team, we've got your back.</p>
<p> <a href="#">Learn about trust at Airbnb</a>
</p>
</div>
<div class="jumbotron">
<div class="container">
<h1>Find a place to stay.</h1>
<p> Rent from people in over 34,000 cities and 192 countries.</p>
</div>
<h3>Travel</h3>
<p> <a href="#">See how to travel on Airbnb</a>
</p>
</body>
</html>

The course gave me a pass for all previous lessons so hopefully what I have edited above so far makes sense.

Any pointers would be great, i'm not fully comprehending the whole div thing so any Guide For Dummies style advice would be appreciated.

Cheers


#2

@code2themoon,

You have to keep a close track of the opening and closing div's
and maybe to learn the basics of HTML & CSS try
https://www.codecademy.com/learn/web

<!DOCTYPE html>
<html>
  <body>
     <div class="nav">
        <div class="container">
          <ul>
             <li>Tom</li>
             <li>Browse</li>
          </ul>
          <ul>
             <li>Sign Up</li>
             <li>Log In</li>
             <li>Help</li>
          </ul>
       </div> <!-- closing container -->
     </div> <!-- closing nav  made the div to a closing div -->
  <div> <!-- add opening div -->
     <h3>Host</h3>
     <p>Renting out your unused space could pay your bills or fund your next vacation.</p>
     <p> <a href="#">Learn more about hosting</a></p>
  </div>
  <div>
     <h3>Trust and Safety</h3>
     <p>From Verified ID to our worldwide customer support team, we've got your back.</p>
     <p> <a href="#">Learn about trust at Airbnb</a></p>
  </div>
  <div class="jumbotron">
     <div class="container">
        <h1>Find a place to stay.</h1>
        <p> Rent from people in over 34,000 cities and 192 countries.</p>
     </div> <!-- closing the container ????? -->
     <div> <!-- added a div ??? -->
        <h3>Travel</h3>
        <p> <a href="#">See how to travel on Airbnb</a></p>
     </div> <!-- added a closing div -->
  </div> <!-- closing the container div -->
 </body>
</html>

#4

@code2themoon

			<!DOCTYPE html>
			<html>
				<body>
					<div class="nav">
						<div class="container">
							<ul>
								 <li>George</li>
								 <li>Browse</li>
							</ul>
							<ul>
								<li>Sign Up</li>
								<li>Log In</li>
								<li>Help</li>
							</ul>
						</div>
				 </div>
				 <div class="learn-more">
					<div class="container">
						<div>
							<h3>Host</h3>
							<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
							<p><a href="#">Learn more about hosting</a></p>
						</div>
					</div>
				</div>
				<div class="learn-more">
					<div class="container">
						<div>
							<h3>Trust and Safety</h3>
							<p>From Verified ID to our worldwide customer support team, we've got your back.</p>
							<p><a href="#">Learn about trust at Airbnb</a></p>
						</div>
					</div>
				</div>
				<div class="learn-more">
					<div class="container">
						<div> 
							<h3>Travel</h3>
							<p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
							<p><a href="#">See how to travel on Airbnb</a></p>
						</div> 
					</div>
				</div>
				<div class="jumbotron">
					<div class="container">
						<h1>Find a place to stay.</h1>
						<p>Rent from people in over 34,000 cities and 192 countries.</p>
					</div> 
				</div>
			</body>
			</html>