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 CSS Layout Basics Page Layout with the Float Property Footer Layout with Floats

David Cirlanaru
David Cirlanaru
6,869 Points

I kind of got lost.

I've no idea how to complete this last task from the footer layout with floats and overall I feel kind of overwhelmed at this point. I am trying to create a website of my own so maybe I can assimilate this huge amount of information easier, but I get stuck really fast and I get demoralized while looking for solutions to the problem. DO you guys have some tips on how to handle this situation? Thank you.

style.css
/* Complete the challenge by writing CSS below */
.footer-nav {
  float: left; 

}
.footer-nav li {

    float:left;

}

.logo {
  float: right; 
}
.copyright {

} 



.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
index.html
<!DOCTYPE html>
<html>
<head>
    <title>Getting Started with CSS Layout</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
    <body>
    <div class="container">
        <footer class="clearfix">
            <img class="logo" src="city-logo.svg" alt="logo">
            <ul class="footer-nav">
                <li><a href="#">Ice cream</a></li>
                <li><a href="#">Donuts</a></li>
                <li><a href="#">Tea</a></li>
                <li><a href="#">Coffee</a></li>
            </ul>
            <p class="copyright">&copy;2015 The Best City.</p>
        </footer>
    </div>
    </body>
</html>

5 Answers

Hi David,

I agree with Paul about the breaks and about the other places of online learning.

I started in Codecademy. They let you type code over and over, good for practice. At Freecodecamp I had to find the mistakes in the code as well. Both offered free lessons and gave me lots of basic knowledge. But Treehouse is a better match for me. I really enjoy the lessons here.

And I've taken a free course called "Learning how to Learn" at Coursera. They'll tell you all about breaks and ways to make sure your brain is able to remember the stuff you just learned. That course made a real difference for me.

And about float: try Smashing Magazine. If you search float in the topics you'll find some great articles.

David Cirlanaru
David Cirlanaru
6,869 Points

Thank you johannaho, I'll check out that coursera video you just mentioned. I appreciate your help.

Jamie Lynn
Jamie Lynn
13,003 Points

Don't forget Udacity. They have a free course on Html and Css that's supposed to be good. I want to take it after I finish my Front End Dev track here. Learning from multiple sources, like Paul and Johannaho mentioned is always good including books, but I love Treehouse because they help keep me on one learning track. Don't try to learn everything at once or you will get burned out or lose focus! I'm bad at finishing things and staying focused, so I need a learning track. With so much to learn, you have to prioritize what you need most and finish things one at a time at your own pace.

Also, CSS is hard for me. Floats tear me up! I forgot a lot of basic CSS and I think that's normal. Don't memorize it, that's what references and documentation is for. Having a basic understanding and knowing where to find answers is more important. And, yes, I have to watch videos again and again too.

Having a good reference or some old projects on hand to look back at just to remember all the css tricks we learned is a must. Save your workspaces or copy your code to your computer and organize them, so you have them all in one place. Then when you run into an issue you can find the old project and just copy and paste, then modifiy.

Bookmark sites like css-tricks.com, Mozilla Developer Network or others that have diy quick references and articles. Use Chrome or Mozilla in-browser developer tools to look at other webpages and their styles.

And Paul is right! There's better ways to do this like flex-box or Grid. There's Bootstrap, which has really good documentation and makes this easy. There's tools and frameworks that were created to make this easier. Keep on learning and you will find tools that help you out big time. Understanding basics are important and are key to understanding later technologies(don't skip them), but in real life you would get overwhelmed if you had to use floats for every project you did and if you had to remember everything without being able to look it up! I know css is tedious( css challenges always stress me out ), but easier methods and frameworks will make it easier down the road.

Hi David

You need to select the .copyright class and clear both. Try this.

.copyright {
  clear: both;
}

Also, don't worry about struggling with floats, I still do. There are better ways of laying out your page such as Flexbox and Grid which you will learn soon

Hope I helped, happy coding.

Paul

David Cirlanaru
David Cirlanaru
6,869 Points

Thank you Paul. Still , I find it pretty hard to put all this information in use, while there is still a lot more to come. Do you mind sharing how you managed to get past those moments when it's just too much to handle/memorize?

Hey

For me I just take a break, go outside for 5 mins, make a coffee..whatever. I also re-watch the videos. I'm currently on my third time round the JavaScript track, you get a lot more A-HA moments the second/third time round.

Also, have you tried supplementing your knowledge from other places, freecodecamp, stackoverflow and pick up as many books as you can. Helps to get a different perspective/teaching style sometimes.

Keep at it.

Paul

David Cirlanaru
David Cirlanaru
6,869 Points

Thank you for the pieces of advice. I appreciate it.

David Cirlanaru
David Cirlanaru
6,869 Points

Thank you Jamie. I appreciate your answer. I finished the bootstrap course recently and everything got a lot easier as you mentioned. There is still a lot to learn and it gets me down sometimes. Still, I'll try to take my time and keep pushing for more. Thank you again and happy coding. :)

Jamie Lynn
Jamie Lynn
13,003 Points

The amount of things to learn is overwhelming. I feel the same many times. As long as we keep on going and never give up on our dreams and projects. I'm glad you made it to the bootstrap course. I love bootstrap! It makes things easier and it always looks good. Happy Coding!