I’m trying to learn the best order of the CSS parts. What do you recommend? Learn about Flexbox and then Grid? Or is it some other best order to learn. Thanks a lot!
For the basics I think the way things are presented in the freeCodeCamp curriculum is fine. Otherwise, I personally don’t think there is an order to learn those things. Take flexbox and grid for example—they are different things that (I personally think) you have to learn if you plan to be good at CSS, so there isn’t really an “order” (see this article).
At least for the two things that you mentioned, and If you must put an arbitrary order to them, then I would suggest learning flexbox first because it has more utility in simpler websites, which may not even need a grid. I personally think that the best way to learn CSS is by doing—close website layouts, take part in Daily CSS Images Challenge or simply make an effort to make your freeCodeCamp projects look nice on desktop, tablets and mobile.
3 Likes
I recommend Shay Howe’s tutorials even if you’ve done the CSS challenges on FCC. The tutorials also go through HTML, however.
1 Like
you can use solo learn
At this point in time flexbox is a more commonly used than Grid. For example, Bootstrap 4 actually uses flexbox for its grid system, not Grid.
Flexbox also has better browser support at this time, but lately Grid is getting to a good point as well.
I would also learn more traditional layout techniques like floats, clearfixes, and position relative/absolute. These are still really useful for a lot of use cases.
For me, my grasp of CSS improved most when I got away from using frameworks and started writing all my styles from scratch. Other than that its just practise and reading docs.
1 Like
CSS is one of those very few things that can be learned module by module, in pretty much a totally random order from multiple informal sources and will still result in great learning experience.
My advice would be to go in an approximate release date kind of way, as CSS modules are built on the shoulders of what came before them.
So master your box model first, then your floats (that you can get away without nowadays, but they are still the right tool for some things) then maybe some fun with box-shadow and text-shadow (you can do amazing tricks with them), fonts and icon fonts, learn “advanced” units like em/rem and viewport-based units, transforms, transitions, animations, maybe filters, then go into pre-processors (probably SASS), then media queries, flexbox, grid, and even custom properties (variables) while you’re at it.
A great, simple, structured approach is W3School’s CSS tutorials.
A much funnier way is just browsing youtube for CSS tricks. And try to practice / develop your own tricks or exotic implementations at CodePen. That’s also a great way to build a sort of portfolio without even trying.
1 Like
While that’s undeniably truth, currently all major browsers support Grid (Edge, Firefox, Chrome, Safari, and even Chrome mobile and Samsung internet).
Only downers are UC browser and Opera Mini, but being mobile browsers, you’d probably feed them a much simple block layout anyway.
Which leaves us with only IE being the troublemaker… as always (still, same is the case for flexbox due to a staggering amount of bugs). But we could always give the guy with a fallback by using @supports feature queries on our grid implementation (the grid specification is actually really, really smart when dealing with floats, inline-block, flexbox and even display:table fallbacks), or better yet, just serve the grid CSS to everyone and detect the (lack of) support for grid with CSS to serve a graceful degradation stylesheet for the damn IE.
1 Like
there is an app called solo learn available on playstore as well as in itunes…
1 Like
W3Schools and CodeAcademy is the best resource for learning CSS Online with live code practices.
1 Like
Step 1. Learn basic principles of CSS: selectors, the cascade, the box-model, layout. Think, Yay, this is easy!
Step 2. Start building webpages
Step 3: Practice swearing at the monitor every time CSS does something weird or surprising, i.e. all the time.
Step 4: Think seriously about becoming a back end programmer, lighthouse keeper, or marine biologist.
Step 5: Discover Chrome Dev Tools. Reduce swearing to once or twice an hour.
Step 6: Learn about responsive web design.
Step 7: Reprogram hard drive with a baseball bat.
Step 8: Become lighthouse keeper.
4 Likes
hey I have tried many resources, but i think the one I learned more from was CSS: The Missing Manual. The book has 18 tutorials and you practice a long your read. Have a look if it interests you:
2 Likes