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
SAMUEL LAWRENCE
Courses Plus Student 8,447 PointsLayout resources
Hi guys, does anyone know any really good resource for practicing layout? After the Treehouse CSS layout course I'm still having difficulty with layout. I've watched it twice. My issue is mostly with the header and also with floated elements in the body or main content area of the site.
Thanks guys.
1 Answer
Dane Parchment
Treehouse Moderator 11,077 PointsHonestly the best place to practice is actually in your favorite IDE or text editor. Just code up some layouts to see how they work.
Try making 2 column layouts, 3 column layouts, a gallery (Multiple small boxes side by side), grid layouts, media objects, etc. Look at other websites and see if you can replicate their layouts.
I don't know what you have currently learned in CSS as well, but I also suggest that you no longer try to layout websites using floats. It is both archaic and hacky as floats were never meant to layout objects, but instead to wrap text around elements. Instead you should practice learning the Flexbox and CSS Grid layouts that CSS now supports. I am pretty sure that Team Treehouse even provides a series on both.
Matt Ward
2,256 PointsMatt Ward
2,256 PointsHi Dane,
I am also struggling with layout so I appreciate the advice. I am wanting to start freelancing and whilst flexbox does look much better than floats, is it not a problem that flexbox isn't supported by a lot of IE browsers. I know IE is archaic but lots of businesses still use it and a lot of the older people where I work have old computers and they love their outdated IE browsers. Also CSS grid layouts are currently only supported by 75% of users, surely that is too low to use it as standard for clients websites? i can just imagine them saying "my friend keith says it doesn't load properly on his computer" and having all sorts of grief! I'd be interested to hear your thoughts on this :)
Thanks,
Matt
SAMUEL LAWRENCE
Courses Plus Student 8,447 PointsSAMUEL LAWRENCE
Courses Plus Student 8,447 PointsHi Dane Parchment I hear you man. I do. And as a matter of fact, that's exactly what I was doing. I look at the layout of a magazine and then tried to create it in HTML and CSS. I also looked at other simple layouts and tried to do it.
But as Matt Ward just said below, these are many of my same concerns. Furthermore I understand we have to think towards the future, while many of these methods aren't yet fully supported by all browsers, we should work in mind of them soon being so.
However for me it's about understanding the foundation of laying out web pages. I would like to understand to some degree the foundation before moving on to newer techniques. Ideally these new techniques are based off the old. And if I can't even grasp the old, what am I gonna do when I get stuck on the new, because believe me, I will get stuck.
Secondly the laying out columns part the instructor said using inline-block was better than floats. But I haven't even gotten to that yet. I can't even get through the header. cause using inline-block on the header elements like picture logo etc, causes a weird behavior when the browser resizes, where the elements don't stay on their own line, but wrap around other elements. So he actually said that floating the header elements was actually better and you can use inline on the body elements.
That's where I'm stuck. Hope you can help. thanks