What Advice Would You Give to a CSS Beginner? |New WordPress Magazine Themes

Thursday, June 14, 2012

What Advice Would You Give to a CSS Beginner?

Posted: 14 Jun 2012 03:00 AM PDT

Chalkboard 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.

Well, 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
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
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
Learn to program, and in particular JavaScript; take a course if you can afford it

Finally: Don’t Be 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