Help! I Suck at CSS

So, when it comes to “regular programming” (JavaScript, Python, etc.), I feel like I do a pretty good job. However, something like CSS, despite having practiced with it for around 4 years, I just can’t get a handle on. It feels so counter-intuitive to me and it never does what I want it to do.

I read guides on sites like CSS-Tricks, and I try to follow their advice, but the result still isn’t correct. It’s like you try to solve one issue, but then it ends up creating three more.

I just don’t get it. I feel like I understand the basics, but my projects still end up not looking very good/amateurish. I sometimes wonder if web development really is for me and if I should try a different route instead (something more technical that doesn’t involve this sort of visual element).

Maybe if I took some sort of crash course, I could improve? I think freeCodeCamp teaches a lot of good stuff for other elements of the site, but I just don’t think the guides on CSS are enough.

2 Likes

The key to understanding CSS is the "Box Model"
CSS isn’t a programming language per se, but a markup language for “styling” elements on a page.

You put content inside the box (text or graphics), and you can then change the appearance/style of that box and the content inside that box. These different boxes can then site on top of one another, or sit side-by-side. Or overlap one another.

The different CSS properties are there for you to control the placement and style of these boxes.

https://www.w3schools.com/css/css_boxmodel.asp

I mean, I DO understand that, but despite that, I still can’t get elements to behave the way I want them. It’s like my boxes end up either too big or too small, and despite messing around with padding, margin, making the box-sizing have a border-box, etc., it still doesn’t turn out the way I want it to.

It just all still feels very counter-intuitive to me

I think one thing that’s helped me personally is reading well-written CSS, especially frameworks like Bootstrap or Milligram. Also if you haven’t already, check out SASS/SCSS - those definitely help to organize things a little bit.

That said, I definitely sympathize - you definitely get a lot of bizarre behaviors in CSS, especially with positioning and sizing.

@mels065 what I found super helpful to figure CSS out better is to work on the site/ project im working on using a chrome browser and using the developer tools.

Once I have a basic of what I want in the html figured out, I open my codepen in a seperate tab. Right click and select inspect element. Then you can see your html, plus the CSS. You can edit the CSS directly there in the tools, jsut to play around. You will still have to copy any changes over to your codepen html and css. But I found it really helpful. Especially because it shows you the dimensions of the element plus its margins and padding.

Try it out, maybe it will help :slight_smile:

  • Nao

@mels065 You’re right, CSS isn’t very logic based but I think taking a thorough course on the topic will help you out a bit. I’ve been leaning css on a site called Treehouse and it’s quite good. Here’s the link to their CSS content if you want to check it out: https://teamtreehouse.com/library/topic:css

Your not alone, I can do the JS coding just fine usually but good god I suck at making things look ‘good’. I think I understand the CSS Syntax but Im just really bad at “imagining” things and making them look good.

Yes css is difficult/tedious to work with sometimes for sure. I’ve still got a ways to go but some things that I find helpful…

Taking a step back and looking at my html. Am I fighting overly complicated or poorly structured html?

Constantly looking for ways to simplify my styles and clean up my previously written crappy css that is getting in the way. .scss will help you to stay organised.

Learning a grid is worthwhile, choose one and use it for a couple of projects.

Using flexbox for positioning can make little things a less head-bashy

This is a fun way to quickly brush up on selectors

https://autoprefixer.github.io/ is useful too