Recently, a friend who used to do some web design years ago approached me with some questions about getting back into front-end coding. She doesn’t have a programming background and, from what I understand, her experience in coding is limited to old-style HTML using tables and very little CSS.
She says she finds all the stuff associated with front-end development to be quite overwhelming. Well, she’s not the only one. I think we all feel frustrated at the amount of reading and research that’s needed to keep up with things in the industry.
I tried to give her some advice on what to do and what to learn now, so I thought I would summarize my own personal suggestions here for any beginners looking to learn CSS from scratch. I was going to send this to her directly, but I thought it would make for a nice blog post that I could point beginners to in the future.
These aren’t necessarily in order of importance, but I tried to put the easiest and more important stuff near the top.
- Read SitePoint’s CSS3 Anthology by Rachel Andrew; very good learning curve and easy for beginners
- If you need HTML basics too, Jon Duckett’s book seems to be a popular and beautiful choice
- Go through CSS-Tricks’ archives, in reverse chronological order
- Go through Smashing Magazine’s CSS articles; if you start with the oldest ones, start here
- Try and learn the concepts (the “whys”), not just the quick-and-dirty code (the “hows”); e.g. learn block vs. inline and other CSS basics
- Learn about the cascade and specificity and how to avoid specificity wars
- Just build stuff, even if it’s just simple things; form an idea and then carry it out, just for fun
- While reading a beginner’s book, don’t download the code or copy and paste it; type it all out by hand and if it doesn’t work, figure out why
- Go through Thierry Koblentz’s CSS 101 or Shay Howe’s A Practical Guide to HTML & CSS
- If you have a basic background in HTML4 or XHTML, learn the new HTML5 stuff; the first half of my book might be a good starting point
- Go through an HTML5 template like HTML5 Reset or my Easy HTML5 Template and try to learn some things from the source (HTML5 Boilerplate might be too much for a beginner)
- Understand how to deal with cross-browser issues and adapt a workflow that minimizes problems
- Use a CSS reset, and understand what it does; I recommend Normalize.css
- Learn OOCSS techniques thus relying heavily on classes and avoiding IDs as styling hooks
- Learn basic debugging techniques (e.g. using Developer tools; making elements visible with temporary backgrounds and/or borders; learn to isolate your problems)
- Google is your best friend; if you have a problem, just type it into Google, in question form — it’s extremely unlikely that there isn’t someone that has had the same problem
- Do your best to use and learn Responsive Web Design techniques as early as possible, and try to avoid using fixed-width layouts
- Learn to use a preprocessor
Finally: Don’t Feel Overwhelmed
There’s a lot to take in and to catch up on. But there’s no reason to be overwhelmed. We’re all working on keeping our skills up to date, and learning new things. I have a laundry list of things to learn that I’ve barely scratched the surface of.
I think one of the best approaches is to just focus on small steps, one thing at a time, and even if you don’t feel like you’re going to remember everything you read, it’s not a big deal. We all use code references and Google regularly.
In fact, I would argue that it’s not important to know everything, but rather it’s important that you know how to find anything when you need it.
What Do You Suggest?
I’m sure there are things I’ve left out and maybe some things that people disagree with (*cough* OOCSS *cough*). If you have any suggestions for beginners looking to get into CSS and other aspects of front-end code, I’d love to hear them.
Credit: Chalkboard photo by Oliver Gruener