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
William Bussey
Courses Plus Student 2,454 PointsI suck at CSS Layouts
I'm growing frustrated with my learning. I can't seem to get web design down. I suck. I'm better at programming. For some reason I can't get simple website layouts to work. I like flexbox. That looks like the future of css.
I feel like the videos I've been watching have been too fragmented. There are way too many techniques to learn for css layouts. Treehouse seems to cover all of them. That's my problem. I can't figure out witch one i'm supposed to use. I used Nicks course and he did it a whole different way than the other courses. "Mobile First". I designed my personal site based on that course.
Now I'm re-watching css layouts course, and looking at flexbox. Those videos seem to be misleading. It covers flexbox, but doesn't explain why we still need the other css file. "style.css". There is no connection made between the two. I've tried to dissect these project files to make that connection.
1). Why can't I just make a layout with pure flexbox? Why does flexbox still need to be put in media queries?
2). When I try to write my own code, the site just comes out looking awful. I'm not sure if these videos are up-to-date. The last time i checked flexbox was at full support now. So what is the correct syntax to use?
3). Am I the only one with this problem?
3 Answers
Shawn Flanigan
Courses Plus Student 15,815 PointsDon't beat yourself up, William. I think everybody struggles with CSS layouts (I know I do!), which is why experienced, knowledgeable web designers/developers can make a good living.
There's really not one right answer to the layout problem. While FlexBox is widely supported by modern browsers, you'd be surprised at how many people use terribly outdated browsers. Probably within the next few years it will be safe to base your sites on a FlexBox framework, but in the meantime you'll need to use something like Modernizr to account for the huge number of people using IE9 and earlier. In my experience, most templates and WordPress themes seem to use floated divs (I have yet to see a theme built on FlexBox).
As for the Mobile First approach...I'm sure there are other opinions out there, but if you think your site will ever be accessed by users on mobile phones and tablets, mobile first is definitely the way to go. Once you get into the habit of developing sites this way, it's not difficult to implement and your user experience will benefit greatly.
Keep studying!
Neal Gist
8,438 Points1.) Flexbox's cross browser support is still limited. Depending on your circumstances, you may be better off going with something else like a traditional responsive layout? Flex support: http://www.w3schools.com/cssref/css3_pr_flex.asp
2.) Be sure to use a browser that can support flex! I found this site helpful as well for learning flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
3.) Don't give up!
William Bussey
Courses Plus Student 2,454 PointsThank you guys for your feedback. I'm going to keep at it.