5., 6. & 7. Some best practices to avoid errors


#1

Tips and advice while you are learning to control your divs:

  • use a bit of whitespace* to help you see what you are building
  • type your closing tag at the same time that you type your opening tag
  • use short comments to help you keep track of your closing tags
  • keep your matching open/close pairs of tags lined up

example:

<div class="row"> <!-- start row -->

    <div class="col-md-4"> <!-- start 1st column -->

        <div class="thumbnail">
            ... first thumbnail code here
        </div>
        <div class="thumbnail">
            ... second thumbnail code here
        </div>

    </div> <!-- close 1st column -->

* whitespace means space made using the spacebar, the tab key or the enter/return key

If you need it: How to post code in this forum.


Error Message: Add a <div class="thumbnail">..</div>
7. Any Ideas why this does not work?
Neighborhood Guides: Images 2
7/14 Issue. Add a<div class=thumbnail">..</div>
Neighborhood guides image 2 "Oops, try again. Set the src attribute of your thumbnail image to be "http://goo.gl/Av1pac"
Images 2
Help
Neighborhood Guide Images 2 HELP
Neighborhood Guides Images 2
Neighborhood Guides: Images 2 problem
7. Neighborhood Guides: Images 2
I am stuck at 92%
Having a little difficulty with : 7. Neighborhood Guides: Images 2
Common Mistakes neighborhood guides Grid(5) , Thumbnails(7) "Make a bootstrap website"
Make a Website: Bootstrap lesson
#7 Neighborhood Guides Image 2 error
5. Neighborhood Guides:Grid Help!
7. Neighborhood Guides: Image 2 WHAT IS WRONG WITH THIS
Image 2 Issues
7.Neighbourhood Guides
Neighborhood Guides: Image 2 STUCK!
#2

Oops, try again. Add a <div class=“thumbnail”>..</div>
#3

these lesson do not clearly tell you what you are supposed to do, there was no mention of closing tags for the col-md-4 or the "start row" line of code. I now put closing tags in and it tells me "Oops, try again. Set the src attribute of your thumbnail image to be "http://goo.gl/Av1pac". which from what I can tell, I already have done this. I am so frustrated by this


#4

<div class="row">

    <div class="col-md-4">
         <div class="thumbnail">
            <img src="http://goo.gl/0sX3jq" >
    </div>
        <div class="thumbnail">
            <img src="http://goo.gl/an2HXY" >
</div>
    <div class="col-md-4">
        <div class="thumbnail">
            <img src="http://goo.gl/Av1pac">
            </div>
</div>
        <div class="thumbnail">
            <img src="http://goo.gl/vw43v1">
            </div>
</div>
        <div class="col-md-4">
            <div class="thumbnail">
                <img src="http://goo.gl/0kd7UO">
                </div>
</div>
</div>
</div>

#5

If you follow my advice, at least while you are just starting out, you might find this less frustrating. As your pages grow in complexity you are going to have many more elements to manage.

The way your code is formatted, I can see that it would be hard to tell which are the matching pairs of open/close tags. If I work my way down, I can see that your first column is missing its closing tag. Your second column begins before the first one is closed.

That error message is not very clear, the code checker is not very smart. It is counting your divs and looking for that image file in the second column but since the first column didn't get closed it can't cope.

About that bit, almost all HTML elements have both an opening and a closing tag. When you start a new element, you might as well type both tags right away.

Please ask anything that you have doubts about.


Neighborhood Guides: Grid
#6

This one had me stuck for a while, and I'm not a complete noob either, I was absolutely zipping through things and then hit a wall for about 30 minutes.

The reason I think crazeeelegs was especially frustrated was the same reason I was until just now:

For some reason the previous module allowed me to push through my code without closing the div tag.

Which led me to believe that my missing tag was somewhere later on, for me between lines 52-66, instead of earlier.

This seems like a very situational bug. Can anyone confirm this? I'm pretty messy myself, maybe I'm not seeing it, but here's a screenshot of the previous module pushing through as "Way to go!" with missing tag(s):

https://goo.gl/GjI5UQ


#7

That is one lazy code checker there. Not only are you missing the closing tag on your first column, you have three thumbnails in it instead of two and your second and third column and your row are all missing their closing tags too.

I think you would have had all those closing tags to get by exercise 5, maybe not?

I don't know what sort of timeframe there is for reviewing issues like this. I can shift this over to the "Problems" category or leave it here to help people running in to this.


#8

You're a lifesaver! It's the checker's mistake, needs to double check closing tags for all the columns even the previous one. Goodluck to all us in learning a new skill!


#9

Yep, you're totally right @albionsrefuge... are people passing lessons with erroneous code, or is this an isolated thing?

Makes me a little worried that I've been getting off easier than I should -- especially in JavaScript, which is totally new to me.


#10

I don't know the answer to that. A lot of people are here talking about their errors so some are being caught but I can't tell how many didn't get errors when they should have.

If your finished page ends up looking like this, then you did it right!


#11

Yeah! It did the same thing- Oops!!!!


Can't get pass 92% Neighborhood Guides: Images 2
#12

hey, having a problem getting the neighborhood guide and everything below to display in 3 columns. not sure how to fix it can you take a look at my code?

!DOCTYPE html>
<html>
  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="main.css">
    
  </head>

  <body>
    <div class="nav">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
          </div>
          <div class="col-md-4">
          </div>
          <div class="col-md-">
          </div>
        </div>
    </div>
        <ul class="pull-left">
          <li><a href="#">Name</a></li>
          <li><a href="#">Browse</a></li>
        </ul>
        <ul class="pull-right">
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Help</a></li>
        </ul>
      </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>
        <a href="#">Learn More</a>
      </div>
    </div> 
    <div class="neighborhood-guides">
      <div class="container">
        <h2>Neighgorhood Guides.</h2>
        <p>Not sure where to stoy? We've created neighborhood guides for cities all around the world.</P> 
        </div>
        <div class="nav">
       <div class="container"> 
        <div class="row">
          <div class="col-md-4">
 <div class="thumbnail">
      <img src="http://goo.gl/0sX3jq" >
    </div>

    <div class="thumbnail">
      <img src="http://goo.gl/an2HXY" >
    </div>
  </div>

          </div>
          <div class="col-md-4">
    <div class="thumbnail">
      <img src="http://goo.gl/Av1pac" >
    </div>
    <div class="thumbnail">
      <img src="http://goo.gl/vw43v1">
    </div>
  </div>


          <div class="col-md-4">
 <div class="thumbnail">
      <img src="http://goo.gl/0Kd7UO" >
    </div>
        </div>
      </div>
    </div>
    <div class="learn-more">
	  <div class="container">
		<div>
	      <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>
			<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>
	  </div>
	</div>
  </body>
</html>indent preformatted text by 4 spaces

#13

That's a great question. I have been struggling with my code for a while now. I was given advice to go back a couple of exercises since my code was apparently "so messed up" but when I do it still lets me progress until I get to the part where I continue to get stuck.


#14

I would be happy to have a look at your code from the previous exercises. It might shed some light on how people are getting stuck.

If you would like to do this, please start with showing me all of your exercise 5 code. How to post code in this forum.


#15

Sure. I'm getting stuck at 7. Here is my completed exercise 5.

<!DOCTYPE html>
<html>

  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="main.css">
    
  </head>

  <body>
    <div class="nav">
      <div class="container">
        <ul class=pull-left>
          <li><a href="#">Name</a></li>
          <li><a href="#">Browse</a></li>
        </ul>
        <ul class=pull-right>
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Help</a></li>
        </ul>
      </div>
    </div>

    <div class="jumbotron"> 
    </div>
     <div class="neighborhood-guides">
    <div class="container">
    <h2>Neighborhood Guides</h2>
    <p>Not sure where to stay? We've created neighborhood guides for cities all around the world.</p>
    
    <div class="row">
     <div class="col-md-4">
    </div>
    
    <div class="col-md-4">
    </div>
    
    <div class="col-md-4">
    </div>
    
      </div>
      <div class="container">
      </div>
        <h1>Find a place to stay.</h1>
        <p>Rent from people in over 34,000 cities and 192 countries.</p>
        <a href="#">Learn More</a>
      </div>
    </div> 

    <div class="learn-more">
	  <div class="container">
		<div class="row">
	      <div class="col-md-4">
			<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 class="col-md-4">
			<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 class="col-md-4">
			<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>
  </body>
</html>

#16

Thanks! I tested your code here and it does get a pass - but that is the fault of a bad/lazy code checker. That code should not have received a pass. I'll report and maybe it will get onto someone's to-do list.

Here is how your code makes the web page look:

The problem with the code is that the new neighborhood-guides div has been tangled up inside the jumbotron section.

It should be like this:

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

Once you sort that out, your page should look like this:


#17

A post was split to a new topic: In main.css, inside the .jumbotron h1 selector, set font-family to 'Shift'


#21

I seem to have gotten stuck, but I can't find where the error is. Any ideas?

    <!DOCTYPE html>
    <html>
    <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css"  rel="stylesheet">
    
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="main.css">
    
    </head>

    <body>
    <div class="nav">
    <div class="container">
    <ul class="pull-left">
    <li><a href="#">Name</a></li>
    <li><a href="#">Browse</a></li>
    </ul>
    <ul class="pull-right">
    <li><a href="#">Sign Up</a></li>
    <li><a href="#">Log In</a></li>
    <li><a href="#">Help</a></li>
    </ul>
    </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>
    <a href="#">Learn More</a>
    </div>
    </div> 
    <div class="neighborhood-guides">
    <div class="container">
    <h2>Neighborhood Guides</h2>
    <p>Not sure where to stay? We've created neighborhood guides for cities all around the world.      </p>
    <div class="row">
    <div class="col-md-4">
    <div class="thumbnail">
    <img src="http://goo.gl/0sX3jq">
    </div>
    <div class="thumbnail">
    <img src="http://goo.gl/an2HXY">
    <div class="col-md-4">
    <div class="thumbnail">
    <img src="http://goo.gl/Av1pac">
    </div>
    </div>
    <div class="thumbnail">
    <img src="http://goo.gl/vw43v1">
    </div>
    <div class="col-md-4">
    <div class="thumbnail">
    <img src="http://goo.gl/0Kd7UO">
    </div>
    </div>
    <div class="learn-more">
    <div class="container">
    <div class="row">
    <div class="col-md-4">
    <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 class="col-md-4">
    <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 class="col-md-4">
    <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>
    </body>
    </html>

#22

I have applied the tips from the initial post in this topic to your own code. I haven't changed anything else except added spacing, lined up your matching open/close tags and added comments to your </div> tags.

The idea with those tips is that they should make it easier to find where you are missing or have extra divs. It looks like there might be five missing </div> tags.

Have a look, see if you can spot the <div> tags that don't have matching </div> tags.

Also look for misplaced </div> tags, places where you've closed a div element too soon. There is one instance of that.

<div class="neighborhood-guides">
    <div class="container">
        <h2>Neighborhood Guides</h2>
        <p>Not sure where to stay? We've created neighborhood guides for cities all around the world.</p>

        <div class="row">

        <div class="col-md-4"> <!-- column 1 -->
            <div class="thumbnail">
               <img src="http://goo.gl/0sX3jq">
            </div> <!-- closes thumbnail -->
            <div class="thumbnail">
                <img src="http://goo.gl/an2HXY">


        <div class="col-md-4"> <!-- column 2 -->
            <div class="thumbnail">
               <img src="http://goo.gl/Av1pac">
            </div> <!-- closes thumbnail -->
        </div> <!-- closes column 2 -->

            <div class="thumbnail">
                <img src="http://goo.gl/vw43v1">
            </div> <!-- closes thumbnail -->

        <div class="col-md-4"> <!-- column 3 -->
            <div class="thumbnail">
                <img src="http://goo.gl/0Kd7UO">
            </div> <!-- closes thumbnail -->
        </div> <!-- closes column 3 -->

#25

2 posts were split to a new topic: 78. Neighborhood Guides: Images 2 -- it looks okay to me, but I still get the message "Add a


Add a <div class="thumbnail">..</div>, what am I doing wrong
7. Neighborhood Guides: Images 2