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
james white
78,399 PointsCss Framework Basics Build an Orbit Content slider Challenge
Link to Challenge (3 parts):
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