Course 1:Lession 8


#1
The lesson "Wrap With a Div" is very confusing and making me frusterated.

Can anybody hep?


#2

In this exercise, you are being asked to wrap the Travel, Host and Trust code that you wrote in exercises 6 an 7 in two divs.

That shouldn't sound mysterious because you have already done something very similar already, twice.

Remember, in exercise 3 when you wrapped your two lists in the nav and container divs?
Remember, in exercise 5 when you wrapped your h1 and p elements in the jumbotron and container divs?

This exercise is just like that except that you are wrapping your Travel, Host and Trust code in a learn-more and a container div.

Let me know if there is any part of that that you would like to ask more about or tell about the doubts that you are having.


#3

I'm still very confused, do you mind sending a photo?


#4

What are you confused about exactly? If you post your code I can have a look.


:green_heart: How to post code in this forum.


#5

I don't know how to, sorry, I'm new. The forum I read about "How To Post Code" didn't help.


#6

You might as well learn to copy and paste now because you are going to need it A LOT now that you've started coding.

  1. Select all of your code and copy it.
  2. In this forum type three back ticks on an empty line
  3. On the line after your backticks, paste your code
  4. On the line after the last line of your code, type three more backticks.

#7

<ul>
  <li>Dezi</li>
 <li>Browse</li>
 </ul>
  <ul>
  <li>Sign Up></li>
  <li>Log In</li>
  <li>Help</li>
  </ul>



Travel

From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.

See how to travel on Airnb



Find a place to stay


Rent from people in over 34,000 cities and 192 countries.




Host


Renting out your unused space could pay your bills and fund your next vacation.



Learn more about hosting.



Trust and Safety


From Verified ID to our worldwide customer support team, we've got your back.



Learn more about trust at Airnb




:grin:Whenever I copy and paste my code onto the reply box it turns out like this


#8

That's what happens when you don't put the "fences" around your code -- the three backticks.


#9

I'm reallly sorry but, what do you mean by backticks?


#10

This is from that topic I posted earlier. Can you see that key on your keyboard? It looks sort of like a quotation mark but it leans the other way.


#11

<div class= "nav">
<div class= "container">
  
	<ul>
	  <li>Dezi</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= "jumbotron">


<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 Airnb</a>

</div>
</div>

<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>


<div>
<h3>Host</h3>
<p>Renting out your unused space could pay your bills and 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 more about trust at Airnb</a></p>
</div>
</div>
</div>

#12

Great -- even if we don't get this exercise sorted tonight -- you've learned a new trick -- code formatting in this forum! :smile:

You have things just a little bit mixed up there. You may want to try looking back over a couple of the previous exercises to make sure that you get things in the expected order.

Keeping your matching open/close tags at the same indent level will help you see what you are building.

Here is the overall plan that you are aiming for:

<!DOCTYPE html>
<html>
  <body>

    <div class="nav">
      <div class="container">
      ... your nav code goes in here
      </div>
    </div>

    <div class="jumbotron">
      <div class="container">
      ... your jumbotron code goes in here
      </div>
    </div>
    
    <div class="learn-more">
      <div class="container">
        ... your learn-more code goes in here
      </div>
    </div>

  </body>
</html>

#13

<div class= "nav">
<div class= "container">
  
	<ul>
	  <li>Dezi</li>
	 <li>Browse</li>
	 </ul>
	  <ul>
	  <li>Sign Up></li>
	  <li>Log In</li>
	  <li>Help</li>
	  </ul>	  
</div>

<div class= "jumbotron">
<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 Airnb</a>
<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>

Here is what I have but, it's still saying its wrong.


#14

You have to be precise when coding. Let's look at some things.

<div class= "nav">
<div class= "container">
  
	<ul>
	  <li>Dezi</li>
	 <li>Browse</li>
	 </ul>
	  <ul>
	  <li>Sign Up></li>
	  <li>Log In</li>
	  <li>Help</li>
	  </ul>	  
</div>

There is no closing tag for the nav div.

And then let's look here:

<div class= "jumbotron">
<div class="Learn More">
<div class="container">

What happened to the rest of your jumbotron code? You need to form the jumbotron like this:

    <div class="jumbotron">
      <div class="container">
      ... your jumbotron code goes in here
      </div>
    </div>

When you get down the learn-more div, you have this:

class="Learn More"

but the exercise is expecting this:

class="learn-more"
`
Sort that much out and then we can look for your Host and Trust content.