Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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

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.