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

How to learn CSS layout after CSS? There are so many different layout techniques, which should I learn and use?

I am confused on which layout methods to use. I am completely overwhelmed with all the techniques. I understand and have become good with the properties but how do I decide on which layout method to use? I mean do I use floats, flexbox or grids? Treehouse does not cover building real layouts just small example sites with basic html and css.

3 Answers

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

At the end of the CSS Layout course (I believe) or, the CSS Flexbox layout course, you will see the teacher do an overview about the different types of CSS layouts discussing their advantages and disadvantages briefly.

To answer your question though, you should learn as many as you can. Such as floats, inline and inline-block display modes, flexbox, positioning, and grid layout. The reasons why is so that you can understand how each layout method works and incorporate the suitable method in a project. As you work on your projects, you will determine which kind of layout method would be best for a particular part of your design. The more you learn as a developer, the better. You may also be asked relative questions at job interviews as well to verify your knowledge.

Having a good understanding of the history of CSS layout is beneficial as well, as you can see how the language has changed and bettered over time.

Furthermore, floats were not intended for CSS layout. Floats were intended for print design, whereas they are used commonly to wrap text around an image. Floats for layout are outdated, and not only that, but they require more lines of code and extra markup in your HTML due to the need to clearing them as they take content out of the natural flow of the page.

CSS Flexbox layout, however, is more updated and is a major go-to for layout due to its major perks it comes along with it. Flexbox eliminates the need to add extra markup to your HTML, take out the pesky math calculations needed for setting width and margins for spaces between columns, etc (like you would need with floats and inline displays). Allows you to align elements horizontally and vertically, re-arrange the order of elements without the need to edit the source doe and so on.

Don't feel overwhelmed. Remember, web development has come a long way since you have started to learn it. Think about how much worse it must have been for developers who started learning from the beginning and trying to layout content without the beauty of these choices we have today.

So forth, you should practice till you have each layout method hands down so you can see for yourself what required more of an effort to work with, and which solved your problems the most efficiently.

Remember, you can use any CSS layout method in combinations with each other as well. Not just one.

Good luck!

CSS is taught horribly on this platform in my opinion. You build a basic 3 column layout with almost no content. The idea that you are going to leave this course and understand how to build anything even remotely complex is just not realistic.

That is what is so upsetting to me you spend so much time learning the basics with no direction to actually build anything with real value. You come as a complete beginner and you leave as a complete beginner here.

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

That's where the techdegree comes in. The programme is designed to guide you with a curriculum on competing 9 realistic projects that you can then use to add to your very own portfolio and showcase it to employers etc.

If you are like me, where you feel that you can't learn alone and can't be creative to make projects on the things you learn here, then the techdegree may suit you better. If you can afford it.

That is what is great about the programme, you are forced to create projects and are graded for each with reviews on your code. You also have a very friendly active slack community full of teacher support and students who are chatty and can answer any questions you have.