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
- Learn to program, and in particular JavaScript; take a course if you can afford it
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
1. Avoid preprocessors until you have a handle on the ins and outs of “regular” CSS.
2. Format the code in a way that makes sense to you, not what is recommended by the experts. Again, once you are more familiar with CSS, you can start adjusting your style based experience instead of advice.
I’d give a look at the tutos at codeacademy.com and avoid preprocessors for a beginner!
+1 for codeacademy. I’m only starting out but I really feel like I’ve learned lots because of the interactive learning style.
I find it ironic that the last thing many people learn about CSS is how to master the cascade. Instead, I say learn that first, as your life will become easier & more enjoyable.
This is good advice. The books I recommended should have a little info on those, but I added an extra line about the cascade, specificity, and specificity wars. Thanks!
1. Do not learn a preprocessor, that’s a surefire way to not learn proper CSS, but the shortcuts, and overly comlpex ways that preprocessors generate CSS.
Instead focus on writing all your CSS from scratch.
2. Learn the cascade, embrace it, learn to love it
3. Learn that not every single element needs to have a class or ID to be targetable
4. Figure out what/who you want to design for – don’t learn IE6/7/8 hacks if you’re only working on learning stuff right now and you only use Firefox.
5. Don’t waste your time learning IE6/7 hacks at all
6. Start with the basics and work your way up
7. Find a (simple) website you admire, and try and replicate it (locally for yourself so you can prove you can do it)
8. Understand semantic markup to some extent. It’s not that important to understand when/why you should use an h1 tag over an h2 in one particular case, but it is important to understand that through css you can make any tag look like anything*
9. Comment your code when you comment it you should be able to understand it, and therefore remember it
10. Build something you want to build and have fun.
*to some extent, you can’t style a style tag obviously.
My advice would be to consult a psychiatrist.
The one site that started popularizing CSS-based design back in the early days of web is CSS Zen Garden. That site got me interested in learning more about CSS and giving me inspiration that everything doesn’t have to be an ugly mess (though they have examples of this as well). I don’t know any other inspirational site that still hits it with the flexibility of CSS.
I’d say as a first step for inspiration, go to http://www.csszengarden.com/ then go through the different designs for the *same* HTML. Then go tinker around with the CSS yourself in the web browser’s dev tools (Chrome and Firefox/Firebug has tools that lets you manipulate the CSS on the fly).
Also on top of learning CSS you have to learn javascript/jquery. I would argue that you can’t really call yourself “front-end” designer if you don’t know a little bit of javascript… at least the good parts of it. The web is an interactive medium. So don’t forget to learn how to deal with little bits of interactivity and, most importantly, designing proper feedback loops to the user.
This is good advice. I was going to say, use Firebug on Firefox to manipulate and get the hang of what is happening on a web page. I largely learned by doing this.
When I want to show my middle schoolers what CSS does and doesn’t do, I show them random pages from CSS Zen Garden. After they quit yelling to “click on that one!”, they start asking questions — why does this design have these images in it and that one doesn’t, why is the text content all the same regardless of the page, and every question leads them closer to a rich understanding of the power of the stylesheet. CSSZG is a hell of a valuable learning tool.
Thanks for the encouragement and write up! Points noted.
This will be posted into my “learning advice” part in my CSS/HTML course blog. Many thanks and excellent advice(s). Mauro.
I have been mulling over some of these issues/thoughts while formulating a “the web for graphic designers” short course aimed at students. For those wanting to get into code I am thinking of pointing them toward the Twitter Bootstrap for one simple reason: they will be able to have a website up very quickly. From there we could restyle the elements with colours, fonts etc. And only then would we deconstruct the code or perhaps move onto another simple template/boilerplate. The key here is a sense of accomplishment from the outset that can be built on. CSS is first and foremost a means to an end, and should be learned in tandem with HTML and JS.
I think there needs to be some more focus on software engineering fundamentals before stepping into the details.
There’s no mention in this list of the design philosophy behind CSS: i.e. why is it good to have this separation of concerns?
Understanding fundamental concepts such as this when beginning helped me create much better mental models of the different aspects of the purpose of HTML and CSS and as such helped me design better coding practices as a result.
You could lump into that a look at object orientation for inheritance etc. as these are also fundamental aspects of the design of the CSS.
As Steve McConnell puts it in code complete, code into the language not in the language.
I almost forgot about this resource:
http://www.dontfeartheinternet.com/
I’ve seen it before but I just stumbled across it again today. I haven’t looked into it much, but it looks like a solid source for beginners.
The best advice I can give to beginners to CSS is to just do it.
Read some of the big blogs such as CSS tricks, nettuts find some of their tutorials and go through them the tutorials. Don’t just see the demo and download the files work through the tutorials. The more you code the more you learn.
Netutts should definitely be added as a reference. This link might be good as it filters only basics articles for HTML/CSS:
http://net.tutsplus.com/category/tutorials/html-css-techniques/?tag=basix
Great filter, thanks! I often feel so lost at tutsplus, they have to much content.
HTML = Wall-e.
CSS = Eve.
http://www.imdb.com/rg/s/1/title/tt0910970/#lb-vi2192703769
Can anyone tell me if using CSS preprocessors degrade the performance or not (I think they do as I have seen LESS use javascript library).
Thank
No, they do not degrade performance. Preprocessors are to be used during development, nor during runtime in production.
The easy HTML 5 template link doesn’t work.
Woops, thanks. Fixed.
My biggest advice would be to make this website your bestfriend http://www.w3schools.com/css/default.asp and Cheers from Erik at webtemplates.com.au.
Yes, W3Schools can be a good resource for beginners, but keep in mind that they’ve had a reputation for publishing a lot of inaccurate and out of date info.
But yes, it’s a good place to start. I just wouldn’t recommend it as the main source. SitePoint’s reference is much better:
http://reference.sitepoint.com/css
It’s a bit out of date (for CSS3 stuff), but they have told me that they have plans to revamp it and get everything more relevant again.
Not. At. All.
w3schools.com is your worst enemy, not your best friend. Check out w3fools.com.
“Bad education hurts.”
I think the list is accurate and quite complete, but probably quite discouraging to somebody starting out. I mean, just reading SM or CSS Tricks’ archives (partly) is something that can take days or weeks. And that crosses of only one bullet point in a long list.
Agreed. I definitely don’t expect anyone to read all of SM’s archives. I just think it’s a good idea to at least go through them, maybe skimming and looking for some tips here and there, if for no other reason than to get up to date on what’s been happening in CSS for the past 3 or 4 years.
If you’re a beginner and want to learn basic HTML and CSS (including HTML5 and CSS3) by watching video tutorials, please check out our YouTube channel. There are a lot of free tutorials on basic coding, web accessibility, and other related media applications such as Photoshop, Dreamweaver, and others. Download the data files and follow along with the online presenter.
Thanks!
This is great collection of resources, thanks. As a beginner I think good advice is to start simple, learn how to edit the vast sources of css styles and effects that are out there which will lead to you being able to write your own. i am currently trying to reduce and tidy up my css – although D-R-Y is a bit complicated for me I am trying to re-use selectors etc. I have never heard of pre-processors but this is definitely something I will look into.
1. Make sure your site can be accessed on various devices. Consider responsive web design. Design for mobile first approach.
2. Separate structure (HTML), presentation (CSS) and behavior (JavaScript) layers, cf. Meiert. Write your markup without thinking about the page layout. Write your CSS after the markup has been done.
Don’t write presentational markup. Don’t use presentational class names. Use appropriate HTML elements and semantic classes (saying what an element represents, not how it should be styled).
3. Do use what CSS has to offer. Use ID selectors, use descendant/child combinators. Learn about the selector specifity and how the cascade works. Make it work for you.
Did I just say don’t use the OOCSS approach? Sure, I did. Don’t use the OOCSS approach. (At least not in the suggested way. Don’t mess up your markup with classes. A CSS preprocessor might come to the rescue.)
Gunnar, there is no practical reason to use an ID for styling purposes. It’s virtually useless in that context. Classes keep the CSS clean and reusable, and specificity becomes a non-issue (like it should be, because it’s a pain to deal with). Give me one good reason to use an ID as a styling hook, and I’ll concede. Other than “to override an existing style”, there is no good reason to do it. An ID is really not that much different than an
!importantdeclaration, when you really think about it. See:http://www.impressivewebs.com/css-specificity-irrelevant/
Markup being “messed up” with classes is an old-school myth that had no practical value to it. For those interested, Nicole Sullivan discussed some OOCSS stuff here on the Shop Talk podcast:
http://shoptalkshow.com/episodes/021-with-nicole-sullivan/
There she mentions that using OOCSS properly doesn’t pollute your markup with extra classes. If you plan properly, you should not have unmanageable markup. (Of course, I’m not saying that she would agree with me in any of my approaches here, or that my view of OOCSS is the same as hers).
Louis, there is a big difference between “there is no” and “I see no”. You were meaning the latter.
I’ve shown that you can keep CSS reusable not relying on classes.
For you, the holy grail seems to be to keep the CSS “clean” (whatever that means). I, like many others, aim to keep the markup clean (that means purely “semantic” markup, not presentational markup).
Why is presentational markup bad?
1. Because of maintainability. Depending on the development worklflow, OOCSS misses its goal to “improve both the performance and maintainability of your Web pages.” Consider a development team where frontend developers provide a sample HTML document and the stylesheet; the backend developers write code that generates the HTML output. (In the final product, there’s no static HTML.) Later, the layout is required to be changed.
What happens if the site was built on presentational markup? The backend developers need to change their code in order to generate different HTML for changes in the frontend. High costs. That’s really bad.
If the site was built on pure markup, no markup changes need to be made for layout changes. A frontend developer (that’s who you guessed to do changes in the frontend, right?) would change some lines in the CSS, done. Simple as that. Low costs.
That’s not “an old-school myth”.
2. Because the same HTML document might (read: should) be presented differently on different devices. OOCSS is not suited to responsive web design. OOCSS is not suited to modern web development.
Because it’s already there. The main navigation menu, for example, is a very special, unique element on a web page. That makes it predestinated to carry an ID “main-nav”. Wheather this ID would later be later used for scripting or styling, is irrelevant at the time of writing the markup.
Once you have that hook, you can use it for styling. There’s no need for another hook.
<nav id="main-nav" class="main-nav">doesn’t make any sense when<nav id="main-nav">is sufficient.Use ID selectors for elements that carry an ID (or their descendants). Not because the selector would be more specific, but because you’re gonna style that very element.
Now that’s weak. The cascade (hey, that’s the “C” in CSS!) and selector specificity might be an enemy to bad frontend developers who fight against it. But it’s a friend to good frontend developers who make use of it. What kind of developer are you going to be?
Gunnar, this post is not meant to be a debate on OOCSS. So I am going to respond to your comments here in a post of its own. Not sure when, but I hope some time this week or next.
Thanks for your thoughts.
Here’s another good article for beginners:
http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/
Hang out where people are asking CSS questions and responding to them. I’ve learned a lot by hanging around forums, trying to figure out someone’s CSS problems. I spend about 5 minutes trying to fix it, then usually see that someone else has fixed it. Although I can fix the problem less than 5% of the time, I’ve learned a lot by struggling and reading the answers of people more knowledgeable than me. I don’t learn much when I just read a question then go straight to an answer. Well, I might learn a bit, but if I don’t struggle with the problem for a few minutes, I probably won’t remember it.
I’m biased because I volunteer there, but I find the SitePoint forums to be very friendly and useful for beginners. They are where I began asking noob questions back in the day and getting polite, helpful responses instead of the arrogant snot-headed “answers” I received at Other Forums Not to Be Named. It’s very easy for the initiated to mock and berate the not-yet-initiated, but it’s such a lousy thing to do. I’m glad you’re spending time and effort on helping the newbies, Louis.
Hello Louis,
You are an ultimate person and I am really thankful to honestly for having this article for all starters or beginners and I hope this article will help to everybody and I assure 1000000% guarantee.
Thank you once again for this article and I will start learning more now with the help of the links given in this article.
As a beginner I think good advice is to start simple, learn how to edit the vast sources of css styles and effects that are out there which will lead to you being able to write your own.
Install CSS Usage for Firefox and every few weeks just run through you site with FF and CSS Usage to make sure there is no straggler CSS code that’s causing your stylesheet to bloat.
https://addons.mozilla.org/en-US/firefox/addon/css-usage/
This blog post has made my day, coming from a design background i now want to bring my PSD files to life. Thank you for providing such great links.
Very Informative good for beginners