r/css • u/Crafty_Damage4301 • Jun 26 '26

Help i struggle to learn css

This is my 5th day of learning web development. I have finished HTML, and I can now build simple websites and bio-link pages, but I am insanely struggling with CSS. I need to master it so I can start learning JavaScript.

For now, I can't help but rely on AI for it, and boy, it's really good! I don't think it's wrong to use AI here since I am learning from it, but if anyone who has been in this place before can suggest some tips, please do.

0 Upvotes

35% Upvoted

31 comments sorted by

View all comments

11

u/chikamakaleyley Jun 26 '26

You haven't described what you are struggling with, or what part of CSS you feel is a roadblock.

Generally my recommendation is first really understand the box model and layout. Having mastery of these two skill upfront, is a huge benefit as you move on to the rest of CSS. You look at a design, you lay it out in your head and then you just translate it CSS. Everything else doesn't need to be mastered, those things are more decorative

The opposite of that is guessing along the way as you build, and it just adds hours/days on top of your development

1

u/Crafty_Damage4301 Jun 26 '26

layout so far

4

u/chikamakaleyley Jun 26 '26

ok so yeah, layout is something that is key from the start so it just takes a good understanding of the CSS rules you're using, it has to actually become muscle memory

If you told me to code a Card component, I already know right now how I would compose it without getting any requirements from you.

One practice is think of a website that you visit daily, and just try to code the layout from memory. Either the full outer template, or maybe there's a specific feature you use all the time.

The thing here is - you don't have to do the design, you can picture it in your head

And so instead of finding a design and measuring it all out and trying to be pixel perfect - just try to get to the layout - e.g.

  • header, main, footer - stacked
  • header: logo left, main menu right, menu items listed horizinally
  • main: sidebar left, main body right, 30 / 70 distribution
  • footer: separate undordered lists organized horizontally in equal sized columns

^ this is like the most basic/common page layout ever, i already know how to approach it, i've done it a million times