Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by james white
james white
78,399 Points

Css Framework Basics Building the top bar challenge

Challenge Link http://teamtreehouse.com/library/framework-basics/build-a-website-with-foundation-2/building-the-top-bar

Challenge Task 1 of 5

Let's start by giving the nav element Foundation's class for creating a top bar.

Challenge Task 2 of 5

Next, give the div a class that will contain the top bar to the width of the grid.

Challenge Task 3 of 5

Give the p element Foundation's class for floating elements right.

Challenge Task 4 of 5

Add the class that will hide the paragraph on small devices

Challenge Task 5 of 5

Finally, give the div a class that will keep the top bar fixed to the top of the page.

I really can't believe they labelled this course "beginner"..

It should be 'intermediate' or 'advanced' because it brings together so much information.

But for the beginners out there..don't get discouraged and give up.

You'll learn a lot if you get all the way through..

Help on this particular challenge is both scattered and incomplete so I'm going to take pity on those struggling to get through at least this challenge (I can't believe this is a FIVE part challenge - that's way to many parts for one challenge).

Here's some (hopefully helpful) code

<!DOCTYPE html>
<html>

<head>
  <title>Ribbit - A Treehouse Project</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/normalize.css" >
  <link rel="stylesheet" href="css/foundation.min.css">
  <link rel="stylesheet" href="css/my-styles.css" >
</head>
<body>

  <!-- Top Bar -->
  <div class="fixed contain-to-grid">
    <nav class="top-bar">
      <a class="main-logo" href="#">Ribbit</a>
      <p class="right hide-for-small">A Treehouse Project</p>
    </nav>
  </div><!-- Top Bar -->


</body>
</html>

2 Answers

Joshua Paulson
Joshua Paulson
37,085 Points
Joshua Paulson
Joshua Paulson
37,085 Points

Yeah this code challenge was weird but definitely not impossible. Guil did a video on how to customize foundation, followed by a code challenge that had nothing to do with customizing foundation. Just through me off a bit, I had to go back to the prototyping with Foundation videos and look at the documentation on the Zurb site several times.

JASON RASHIDNIA
JASON RASHIDNIA
3,197 Points
JASON RASHIDNIA
JASON RASHIDNIA
3,197 Points

If you look at the foundation documentation "hide-for-small" would be considered wrong. It's documented as "hide-for-small-only". I kept getting the answer wrong until I searched for this forum post. How hair rippingly gay.