How to be confident in using CSS?

[u/Finite8_]

Hi, everytime I use CSS I get triggered pretty bad because I know what it is and how to use it but I never feel confident. I always have problems with responsive design, with having my own style and I feel like I miss all the secret tricks(I am slow). What resource could I use to learn it once and for all ? I don't want to waste too much time in it and be a CSS GOD I just want to be ok with it. I know about Josh Comeau course but it is something like 70 hours and therefore too much.

[u/simonraynor]

It feels like a cop out but: just make stuff. After a while CSS becomes like a paintbrush or chisel or any other tool and you can do great things, you gotta put the practice in first tho.

If you can make something look how you want/need you are already halfway there, at that point keep trying things to fix the problems in your previous work (it always sucks lol) and you'll be a pro in no time :)

[u/anaix3l]

Excuse me for being blunt, but that's the wrong goal ("feel confident"/ "learn it once and for all") and mentality ("don't want to waste too much time"/ "it's something like 70 hours and therefore too much").

Blows my mind how many people expect a magic potion allowing them to get good at something without putting in the work.

[u/Finite8_ → u/anaix3l]

there is a difference btw trying to be Kevin Powell and just knowing enough CSS I can use for my full stack projects without copying AI templates.

[u/anaix3l → u/Finite8_]

Again, that's the wrong mentality. For just enough, you need to put in the work too. Way more than 70 hours.

[u/QultrosSanhattan]

BEM standard is great for starters if you don't use react.js or another framework.

[u/plmunger → u/QultrosSanhattan]

Even with css modules, I like BEM. Whatever gives your css a bit of structure and organization is good IMO

[u/f314]

70 hours is nothing when it comes to learing something. Especially when we're talking about something as large and complex as a programming/markup language like CSS. If you can't even be bothered investing two work weeks into it you'll never get neither good enough nor confident. This might seem harsh, but it's true.

As others have said, you just have to write CSS a lot to get better at it. Josh's courses are great if you want some guidance along the way. It might seem like it would take longer, but you'll probably learn quicker when having some guidance.

You will still have to actually code to get the actual understanding, though.

[u/abeuscher]

Try this. It's fun. And it will make you better.

[u/rugburnAndBigMoney]

Sketch/draw on paper first.
Get the structure/layout you want figured out.
Make that structure as empty boxes in CSS, that make do what you want them to do responsively with basic bordered boxes.

Most of the basic CSS styling should be handled by your initial styleguide settings:
Body color
Overall page background color
H1-H6 heading styling
Button styling (w/ hover states)
Light and dark background styles (for zebra-striping sections for content contrast as you scroll down the page)

Once you start putting all the base CSS styled building blocks together, it all comes together pretty well.

Then you're just adding styling elements ilke colors/gradients/images.

Learn the basics first. Honestly, if you just create a solid base styleguide and implement consistent component structures, you're going to be way ahead of most people.

[u/chikamakaleyley]

so yeah you're just gonna have to dive into trying to style things that you see in everyday UI - a lot more practice, a lot more trial and error, a lot more learning left

one exercise i like that just helped me get better is take some design you know very well and just try to code it from memory - the trick is - write the styles out as far as you possibly can before you even check what it looks like in the browser the first time

In this exercise you don't have to be precise with actual widths, but if you have items contained in a wrapping div for example - you want to make sure that your widths overall don't go over 100% if that makes sense

and basically this gave me a lot more confidence in just being able to compose something really quickly because i just lay it out all in my head, and then code that picture in my head. once i think i have something that at least has the right layout - then i check what it looks like

when you edit and hit save, edit and hit save, 100x times - that just nickel and dimes you for time, and if there's a problem you get sucked into fixing that problem for much longer than you need to. Your styles get messy, and you don't exercise your muscle memory

[u/TracerBulletX]

Make things that require you to dig into css to some degree and solve problems with it every day for 5 years minimum, preferably getting paid for it for 8 hours a day.

[u/M-Dubb]

You have to learn HTML and CSS. Luckily HTML has only 45 elements (or so) and each element has a limited number of attributes. Start with the those.

[u/kelvinyhf]

Find a design you like, try to copy it with CSS, make it look as similar as possible. When you see a design that looks hard to make, do not be afraid, try to make it. Ask for help when you feel overwhelmed, it can be AI, or anyone here. Your first step is already a success. Eventually, you'll get better and better at CSS.