I first started learning CSS because a lot of my clients really wanting websites redesigned versus the regular SEO and eCommerce consulting we usually offered in my small business. Neither my partner nor myself liked seeing money sitting on the table so we decided to see if we could pick it up. Several websites later and a lot of hard work I've picked up a few helpful tips.
When I first started I crash coursed/remembered HTML from high school and then jumped into CSS and started working. It was such an unpleasant experience that I wanted to share a few quick thoughts that if I had known ahead of time would have saved me a ton of pain and misery.
Take the time to really understand what modern HTML can do:
I foolishly decided to skip anything more than an HTML brush up and jumped right into CSS. In doing so I totally missed out on all of the great new tools and features that HTML now offers. I spent hours trying to jerry-rig things together without realizing that it was my foundation of HTML that was messed up, Not necessarily my CSS. I went back and relearned HTML (a quick study well worth the time) and it made everything so much simpler.-
Make sure you understand what CSS classes and Id's are used for:
This is more embarrassing to me than almost anything I've done coding wise yet. I spent more than two months literally doing all of my coding without a single class. I couldn't figure them out to save my life and so I didn't use them at all. As a result building even a simple site was agonizing because I used a single element and then a CSS tag for every single part of each page. This process involved a lot of copy and pasting from my own code and a bunch of messy, ugly code.I was very frustrated and started to hate all things web and at the time felt learning C language was easier. One day, I was staring at a class on stack overflow trying to figure out how to reverse it and use the code without the class when it suddenly clicked to me. I'm still not quite sure what connected the dots but suddenly classes and Id's made sense and it felt like my whole world had changed.
I'm not sure how useful this is to others but the aha! moment for me was this. Somehow my brain connected a CSS Class to a regular programming variable. I saw that a class was designed to "hold" information for reuse and that by logical use of classes, for example for my site wide navbar, or site wide paragraph styling, I could save myself tons and tons of code and time. I stood up from my chair and laughed about 5 minutes from embarrassment and shock once this really simple concept clicked in my head. As a result I went from loathing all things website related to suddenly enjoying web development and even CSS in the span of a moment.
If you're not familiar with these classes and id's yet I would really encourage you to take a moment and learn them well. They are cornerstones in web development and are just amazing. I'm not sure if the variable connection that worked for me would work for everyone but I would be loathe in recommending anyone do any serious web coding work without classes now. (For all the pro's out there, don't judge me too harshly, I bet you've forgotten more dumb mistakes than all of my knowledge put together at this point in my career.)
Step away from coding a bit if you get stuck:
I think this is generally a good rule for computer work but I found that it especially made working with CSS more enjoyable. I love solving problems and in learning other languages I don't typically get very frustrated when things don't work. CSS on the other hand sometimes feels like some evil Esoteric language instead of an extremely useful design tool. I've gotten more value out of getting up and doing a few burpees or a few dishes or something similar more with CSS than almost anything else. It greatly mitigate the stress and frustration and often helps me solve the problem more quickly than just struggling through.
The TL'DR version is really simple, make sure you really know your foundations and take a breather when you get frustrated.
Hope this helps someone who's learning CSS and please learn how to use a class. I can't imagine how embarrassing the lack of class understanding would have been if I ever work in a typical company or with a pro developer :) .
Oldest comments (5)
Thanks for a nice post. As a junior front-end developer, I'm under the same experience as yours. I learnt CSS quickly just within a couple of weeks, then jumped immediately into JavaScript for the current job. But after half-year, it turned out that I myself cannot do the responsive layout for my side-project, I must come back with CSS fundamentals, read and practice slowly many basics.
I was totally in the same boat. It was a good lesson though, learn foundations before anything else. should be obvious but for me I got to excited and if I wasn't so stubborn I might have given up on web dev, which know I enjoy enough to do when i'm bored.
I love your note about CSS classes and "connecting the dots". It's incredibly common for textbooks, teachers, and even tutorials aimed at beginners to lay out all the dots, but fail to actually connect them. It can take a lot of time staring at things before the light goes on. Kudos on working through that.
Appreciate the Kudos, That was one of those coding is the greatest thing in the world moments!!! Quickly squished by the beauty of flexbox's and Grid layouts. :P
One thing that took me a while to learn is that difficult problems in CSS are often from bad HTML structure, ie. either the wrong element was used or another element is needed to group things together. Happy learning!