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 Build an Orbit Content slider Challenge

Link to Challenge (3 parts):

http://teamtreehouse.com/library/framework-basics/prototyping-with-foundation/build-an-orbit-content-slider

Challenge Task 1 of 3

First, give the div on line 14 the data attribute that generates all the HTML for the Orbit component.

Challenge Task 2 of 3

Next, give the p element on line 18 Foundation's class for grouping buttons.

Challenge Task 3 of 3

Finally, we want to change the 'Hire Me!' button's background color to green. Give it Foundation's class for creating green buttons.

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

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

Help on this challenge is both scattered and incomplete so I'm going to take pity on those struggling to get through at least this challenge.

While I was researching this challenge I came across this Treehouse forum post:

https://teamtreehouse.com/forum/where-is-zepto

..where the 'mod' Dustin Matlock said:

...it looks like ZURB decided to drop Zepto.js for speed, and other reasons, now favoring jQuery 2...it's possible more updated versions will be released in the future. Please understand, these things: frameworks, JavaScript libraries, etc., all tend to change rather quickly these days.

It seems when major / functionally different changes are made to a framework, development / design tool, etc., teacher's notes which included the current state of the course, might be helpful to students.

It is somewhat of a daunting task to keep up with, though, I'm sure..

I'm thinking:

Not as daunting to students who might be tempted to look with askance at a course that brings together so much cutting edge web coding that it's likely to be (at least partially) obsolete even before they complete the course.

So, to speed students thru this challenge before total obsolescence hits, here's some code that might be helpful:

<!DOCTYPE html>
<html>
  <head>
    <title>My Website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/normalize.css" rel="stylesheet" media="screen">
    <link href="css/foundation.min.css" rel="stylesheet" media="screen">
    <link href="css/my-styles.css" rel="stylesheet" media="screen">
  </head>
  <body>

    <!-- Content Slider -->
    <div class="row">
      <div class="large-12 columns" data-orbit>  
        <div>
          <h1>I am a Front-end Designer</h1>
          <p class="lead">I design beautiful user interfaces, then bring them to life with HTML, CSS, and JavaScript.</p>
           <p class="radius button-group">
            <a class="button" href="#">See my work</a>
            <a class="button success">Hire me!</a>
          </p> 
        </div>
        <div>
          <h1>I Also Write About the Web</h1>
          <p class="lead">I love teaching others about all the latest web in technology.</p>
          <p><a class="button radius" href="#">Read my posts</a>   
        </div>
        <div>
          <h1>Photography is My Favorite Hobby</h1>
          <p class="lead">I love photographing nature, people, and everyday things.</p>
          <p><a class="button radius" href="#">See my work</a></p> 
        </div>
      </div>
    </div><!-- End Content Slider -->

    <script>
      document.write('<script src=' +
      ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
      '.js><\/script>')
    </script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>  
  </body>
</html>

Some related Treehouse forum thread links (not all properly meta-tagged):

https://teamtreehouse.com/forum/navigation-in-foundation-5-no-working

https://teamtreehouse.com/forum/framework-basics-code-challenge-group-buttons

https://teamtreehouse.com/forum/give-the-button-foundations-class-for-creating-a-green-button-we-defined-a-new-color-for-it-in-our-custom-build-2

https://teamtreehouse.com/forum/orbit-doesnt-work-anymore

https://teamtreehouse.com/forum/orbit-slider-deprecated