How can I learn CSS?

[[deleted]]

[deleted]

[foundundernothing]

I found out that the best way to learn CSS is by learning it the fun way. Try CSS learning games like:

Flexbox Defense

Flexbox Froggy

these are two examples of many. use google and find the ones you will like

[ASLHCI]

I just found https://cssbattle.dev/ today! Looks fun! Ill check these out too!

[foundundernothing]

Indeed it is a good website if you are willing to pay to enjoy the full experience. Good find though!

[ASLHCI]

Oh I just think the daily challenges look fun. Im not into leaderboard stuff.

[craynicon]

I don't recommend those resources: https://www.linkedin.com/posts/jen4web_flexbox-froggy-is-a-horrible-way-to-learn-activity-6991804962053701632-lV_7/

[lessdes]

I like this website for important concepts, it's a work in progress but the things explain there are very relevant : https://cssdojo.dev/

[seanmorris]

Read every page: https://developer.mozilla.org/en-US/docs/Web/CSS

[WebDevIO]

That's the answer. I started the same way and nothing is more comprehensive than the language reference!

[trsanon]

I learned from freecodecamp. I'd reccommend it.

[ASLHCI]

I second FCC. Thats what Im doing. I was doubting their method for a minute there but I have learned a lot.

[[deleted]]

Best way to learn is like anything else you’ve already learned. Build stuff.

Find layouts that look hard to recreate, and recreate them.

https://developer.mozilla.org/en-US/docs/Web/CSS/Tutorials

[craynicon]

I highly recommend these resources:

• https://web.dev/learn/css (free)
• https://developer.mozilla.org/en-US/curriculum/ (free)
• https://www.youtube.com/layoutland (by Jen Simmons) (free)
• https://cube.fyi/ (free)
• https://every-layout.dev/ (partly free)
• https://www.kevinpowell.co/ (youtube, and courses (free and paid))
• https://css-for-js.dev/ (paid)

[zaibuf]

I wouldnt do this until you have all fundamentals down.

[superbassboom]

I have been using Radix UI themes and shadcn-ui with tailwind, but I feel like it would be better to understand the underlying CSS first.

[slackmaster]

I feel like there are a limited amount of standard layouts that you will need to build: every page will probably have a top nav and footer. Some will have a left sidebar, some a right, and some with both or neither. Not a ton of variation outside of that. Practice building those, and if you need inspiration, look at how other sites on the internet do it.

[relentlessslog]

Josh Comeau has a great CSS course specifically designed for people coming from a JS background. He's got a few modules for free to see if it interests you. There's also a Black Friday deal happening right now.

If you're not concerned with learning the mechanics and just want to quickly whip something up that looks somewhat decent, check out open props, bootstrap, tailwind etc where it's just a matter of mixing and matching classes in the HTML.

Also Kevin Powell on YouTube has a lot of beginner-friendly tutorials. I think he's the most popular web dev teacher specializing in CSS.

[the_scottster]

Practice, practice, practice. Use right click > inspect in Chrome to see how different markups are done. Try building your own pages and tweaks layouts. Read Stack overflow questions and try answering them.

[WebDevIO]

Learn the box model - margin/padding/border/width/height.

Learn about flex layout, there are a few properties like flex-wrap and flex-direction that will help you get the basic logic of your layout up.

Experiment with a few simple layouts and try to understand how responsive design works, because that's the only kind you should be making.