Project Feedback

[gsquibbs]

@chrisvfritz Can you take a look at this? It's hosted here and meets the following criteria:

• [x] Include the CSS and JS for Bootstrap 3 (not 4) in the page (including the "jQuery" dependency)
• [x] Use the container class to center your page content
• [x] Use a navbar class to display the name of your site and a list of at least 3 links (to past projects, or anything else) at the top of your page
• [x] Split your main content into 2 columns on large (lg) and medium (md) sized screens, but collapse them on top of each other on small (sm) and extra small (xs) screens
• [x] Use a thumbnail class on an at least one image in your page

[KatieMFritz]

First off - do you know about http://www.oldtowngrace.com/? 😄

Second - this is my new favorite store even though you don't sell anything. Cats ARE always a good option. 🐱

Okay, now down to business.

Great job with writing valid HTML, not pushing with any console errors, and using descriptive commit messages! ✨ Your indentation and spacing are also great, and your use of columns is :fire:.

Two things to change:

JavaScript goes at the end of the body element

So, you might not have done this lesson yet (the risk of choose your own adventure), but from page 2 of the lesson:

Unlike style and link, which are used for CSS, the script element usually goes at the end of the body element, right before the closing </body> tag:

While there's some debate over this, it is the traditional place. Move all your js files (your script elements) to the bottom of body.

---

Bootstrap Navbar

I see that you used div class="navbar", but Bootstrap gets WAY cooler than that and we want you to try it out for this lesson.

Check out how the navbar on this page looks compared to your navbar. It's way fancier, right? That's because it's not just using nav class="navbar"; it's using a whole bunch of Bootstrap-specific markup (HTML). Start from that page, look at the Bootstrap docs (there's a link on that page), and see if you can make your navbar look more like the typical Bootstrap navbar. 👍:+1:

---

After you’ve made your changes and pushed them to GitHub and your hosted site, give it a once-over to make sure it looks right, then comment back here and I’ll take another look.

Thanks! :rocket:

[gsquibbs]

Okay so I made the changes for the most part, but for some reason I CANNOT figure out how to get the items in my dropdown menu to be centered underneath the actual menu. I've been scouring Google trying to figure out it and I can't quite get it, any suggestions?

[KatieMFritz]

Oh, interesting! I see what you're trying to do. 👍 I'm not sure if it's possible without writing your own CSS, which is outside the scope of this lesson.

Here's a proposal for you. Try implementing a more traditional Bootstrap navbar at the top of your page, like this:

You don't have to use all the elements included there, but we definitely want you to include your project name and three links. You can just change it on your index.html and leave the other pages as is. The reason I'd like you to use this version of the Bootstrap navbar is because it's pretty commonly used as a base for projects, from quick little prototypes to large corporate sites (see some examples) . You're likely to use it again in the future, so now's a great time to get the basics down.

Once you've done that, if you're still curious, we can work together on that centered menu button idea and get it working.

Whaddya think? 😁

Other notes:

• Great job moving the script elements to the end. 💥
• Somewhere in your index.html, the indentation got off, leaving you with this at the very end:

  </div>
  </body>
  </html>

  See if you can find where it happened and get all those divs to line up. If you haven't already turned on the indentation settings recommended on this page of the valid HTML lesson, I highly recommend looking into that - it makes it way easier! ✈️

• Looks like there are some extra, unused files in your project (bootstrap.css, bootstrap.js, and style.css). It's good to get rid of extra stuff before committing/sharing your work, so you don't confuse other developers. 🙂

[gsquibbs]

I implemented a navbar more similar to the one shown above and got rid of the excess files! :)

[KatieMFritz]

Awesome! 🔥 🛍 ✨ 😸

:shipit:

For future reference, you might be interested in the Bootstrap Jumbotron class. Here's an example of one way you could use it on this page:

To make it full width, you would put it outside of <div class="container">. For this example, I kept it inside.