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

General Discussion

Posted by Shaun Kelly
Shaun Kelly
35,560 Points

Could someone help me code my website? (Bootstrap Carousel)

Below is the code i already have. The two paragraphs i have should be on separate slides. I also need the arrows that i have in the bottom bar to work accordingly. I am struggling to figure this out! Any help would be appreciated. Thanks.

<!DOCTYPE HTML>
<html>
  <head>
    <title>Shaun Kelly | Web Design &amp; Developer</title>
    <link href="css/style.css" rel="stylesheet" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
    <link href="http://fonts.googleapis.com/css?family=Lato:100,300,300italic,400,400italic,900,900italic" rel="stylesheet" type="text/css">
    <link href="css/bootstrap.min.css" rel= "stylesheet">
  </head>
  <body>
    <div id="topBar">
      <h1>SHAUN KELLY - WEB DESIGN &amp; DEVELOPER</h1>
    </div>

    <div id="myCarousel" class="carousel slide">

      <ol class = "carousel-indicators">
        <li data-target="myCarousel" data-slide-to ="0" class ="active"></li>
        <li data-target="myCarousel" data-slide-to ="1"></li>
        <li data-target="myCarousel" data-slide-to ="2"></li>
      </ol>

      <div class = "carousel-inner">
        <div class = "item active">

          <h1>Welcome,</h1>
          <p>Im Shaun, a self taught web design &amp; developer based in Birmingham, West Midlands. Thanks for taking the time to check out my portfolio! Feel free to browse through my work and explore my vision of simplicity. I am currently seeking employment as a Junior Web Design/Developer.</p>

        </div>

        <div class = "item">

          <h1>Skills</h1>
          <p>HTML, CSS, PHP, JQUERY</p>

        </div>

      </div>
    </div>

    <div id="bottomBar">

      <a href="#" class="arrow-prev"><img src="img/arrow-prev.png"></a>
      <h1>NAVIGATE</h1>
      <a href="#" class="arrow-next"><img src="img/arrow-next.png"></a>

    </div>

    <script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <script src= "js/bootstrap.js"></script>

  </body>
</html>

html, body {
    margin: 0;
    background-color: #fff;
}

#topBar {
position: fixed;
top: 0;
width: 100%;
height: 90px;
border-bottom: solid #e6e6e6 1px;
background-color: #fff;
}

#topBar h1 {
    padding-left: 30px;
    color: #A4a4a4;
    font-family: "oswald";
    font-size: 25px;
}


#bottomBar {
position: fixed;
bottom: 0;
width: 100%;
height: 70px;
border-top: solid #e6e6e6 1px;
text-align: center;
background-color: #fff;
display: inline;
padding-top: 30px;
}

#bottomBar h1 {
    font-family: "Oswald";
    font-size: 22px;
    color: #A4A4A4;
    display: inline;
    padding-left: 15px;
    padding-right: 15px;
}

#myCarousel {
    margin-top: 90px;
    margin-bottom: 70px;
    padding: 10px 30px;
    font-family: "Oswald";
}

#slide1 p {
    max-width: 600px;
    color: #898989;
    font-size: 22px;
}
ivomiranda
ivomiranda
30,286 Points

You should use code in documentation as a starting point. It's too much code to see like this. I recommend 2 things: 1) Next time you have a specific doubt about HTML / CSS / JS please set your example in a website where we can see the result (like http://jsfiddle.net/) or in workspaces (dunno if you can share the link but I think you can) 2) Use w3 validator (google it) to check if you don't have anything broken in your HTML

1 Answer

Zack Taylor
Zack Taylor
9,021 Points
Zack Taylor
Zack Taylor
9,021 Points

Go to the bootstrap website or use github to find a working example (demo) of how the Carousel works. Then look through your code and match it up. If all else fails. Download the carousel code and copy and paste it into your existing html file and then work around that. Just learn from your mistakes and try and figure it out if you can. This problem could come up in the future.