Grow your CSS skills. Land your dream job.

How Would You Recommend a Novice Get Started Using CSS?

Published by Chris Coyier

This question was sent in by Nikita James.

I get this one a lot and it's surprisingly difficult to answer. The problem is that the question doesn't include the persons background, which will in many ways determine the best course of action.

  • Are you literally just getting started in web design? As in, you have never designed a website before?
  • Have you designed web sites before, but never with CSS? As in, you are coming from a table-based mindset?
  • Have you designed sites (graphically) before, but never done the actual coding?

My favorite analogy is that learning web design is like learning to play the guitar.

When you get your first guitar, you have stars in your eyes. You are picturing yourself on stage rocking out with throngs of screaming fans. Or at the very least, you are imagining yourself playing Dave Matthews Band songs on the porch of a frat house increasing your chances of getting laid that night. But in order to get there, you have a lot of practicing to do. So you buy a book. It shows you how to make a G chord and a Dm chord. Then you learn all the notes in the C Ionian scale and learn some finger exercises. Great. Now you are bored stiff and the guitar goes to the pawn shop.

You need to something to sink your teeth into! Something fun, something to keep you playing and practicing, so you can keep that excitement going. Maybe that "Step 1" should have been to learn a few simple chord shapes and then learn a super easy Social Distortion tune.

This is just like web design. You are all excited to build an awesome looking website. So you go out and buy a book. It tells you all about how you should be using XHTML 1.0 STRICT and what an unordered list is, what the details of the box model are, and how to remove links from underlines with CSS. Now you are bored, yawning, and that original spark of excitement is gone.

Instead, here is what you do. Go out and get yourself a domain name (from GoDaddy or the like) and get yourself some cheap hosting. You need to learn how to do that stuff anyway. Then you get yourself a template. That's right, a template. No, it's not cheating, we're learning here. (Free ones here, or nice paid ones here.) Upload that template to your new hosting and go visit that site on the web in a real browser. If you are like me, you still get a grin on your face when you see that website come up for the first time. I've done this 100 or more times and I still smile when I see it. It's the birth of a website. A place you will bring to life!

Now you have the ultimate learning environment. Start poking through that code and making changes and seeing what happens. Learn to use Firebug so you can understand structure easier. Install WordPress and play with the template. See what you can make happen.

That is how you learn CSS. Experimentation. THEN, you go buy a book about CSS. That book will make 10x more sense now that you have something to relate it to.

That's why it depends on how you are coming into this. If you've been making sites for years as tables, maybe a book about CSS will do you good right out the door. For you, Bulletproof Web Design is probably a good choice.

Comments

  1. WC
    Permalink to comment#

    I have to say, this is one of the best ways to start that I’ve heard yet. I almost wish I was a newcomer to CSS to try it out. :)

  2. Definately just get down and have a go at it. I’m primarily a coder but i need to know css to a degree. Just have a go at building yourself a site. ~The basics are pretty straightforward. The difficult part is knwoing what will cause problems in different browsers

  3. Permalink to comment#

    This was exactly how I learned – experiment, tinker, and trial and error. Take things apart and “break” them. The number one thing I think you’ve left out is the online help available. Google everything, it’s out there, do the tutorials, all of them (impossible of course, but you get the idea), and learn what works best for you. Books are over-rated, but if that’s how you learn best, definitely pick up one or two after you get your hands dirty.

  4. Permalink to comment#

    One essential book for the “designing with tables” crowd is Zeldman’s Designing with Web Standards. Even for a newb, it’s essential reading. What’s php? What’s RoR? It’s got it all. Excellent post, Chris.

  5. Permalink to comment#

    Chris,

    Thanks so much for always keeping things simple, basic, and real. As a person who was thrown into both a roll as a CSS theme manager for my companies website, and the go to guitar guy for my wife’s folk music group, this post really resonated with me in a number of ways. I love CSS Tricks, it’s been a real staple of my work day, and you just seem like a really cool and laid back guy.

    And thanks for the link to Ball and Chain Chords

  6. Permalink to comment#

    CSS is the first Web Technology I learned with real depth. It started when I desired to create and edit templates for Joomla! CMS. To get started I worked through the book “CSS:The Missing Manual.” Which helped me get the basics.

    I would recommend the FireFox plugin, Web Developer. It can really help get a grasp of the DOM.

    Another book, which is not for beginners is “Pro CSS and HTML Design Patterns” from Apress. It has helped me learn to write CSS in a much more professional structured way.

  7. Permalink to comment#

    very true.
    when i started with webdesign, i began with a book called html in 7 days and lost interest before the third day. it was only when i got a site uploaded on my own did i realize the importance of css.

    ps: it happened even with the guitar, but i never got back to it

  8. You just describes exactly how, and I mean to the letter, I started out in web design.

    I just finished my first client website, (www.gordonmcbryde.com) and am VERY proud to have made it myself, with no lessons (apart from yours!)

  9. Permalink to comment#

    Chris, you couldn’t have better timing. I’m right now teaching a buddy of mine this stuff, and we did just what you’re suggesting:

    I already have the hosting, so I put him on my ticket.
    We started http://www.manliosity.com/
    I set up what you see, and gave him a mirror image on a development subdomain to play around with.
    I reload the development page, and see his first edit: “So this is html, huh? Wait, why the hell am I all the way over here”
    Hilarity and education ensues.

  10. Permalink to comment#

    Probably the best way I’ve seen to go about learning Web Design / Coding. Practically taught HTML / CSS to myself the same way you described, but for me it was through notepad and using all the files locally on my machine.

    Then I grew up, got Dreamweaver and a domain. Now I’m the Lead Web Designer / Developer at a large company.

  11. Permalink to comment#

    Great article, exactly how I learned, although sometimes I feel like I would’ve been better starting from the ground up, because sometime I just copy/paste code and have a hard time remembering some of the basics from time to time, but definatley once I got my first domain is how things started to take off.

  12. Lu
    Permalink to comment#

    I recommend Head First HTML with CSS & XHTML by Eric Freeman and Elisabeth Freeman for those who have done some HTML but want to understand how the HTML and CSS work together.

  13. Peter K
    Permalink to comment#

    I started out years ago doing table based design, etc – it was literally me, a book on HTML and a crappy PC with IE3 and Netscape.

    And it was literally a trial and error situation for me – looking at other websites, seeing how they coded the pages, etc, trying to pick up new techniques.

    Then along came CSS :) and made my life even worse (damn cross browser support)

  14. Permalink to comment#

    Hello Chris and everyone,

    Thanks for answering my question and thanks to everyone that has responded with additional information and recommendations. I currently design website but want to really start using CSS to build sites I design. It’s good to see that tinkering is the way most people have learned. I’ll keep tinkering and check out the sites and books you’ve mentioned!

    Thanks,
    Nikita

  15. Permalink to comment#

    I would show the CSS Zen Garden. Wornderful example of what can be accomplished with CSS.

  16. Permalink to comment#

    The method I took when starting was making Myspace layouts for myself, then friends and family and then strangers who made requests.

    I then was introduced to the CSS Zen Garden which inspired me to learn some HTML and I started to build HTML websites.

    Then I moved on to WordPress which helped me to fly (in web design terms)!

    Doing it that way round meant that I knew the power of CSS before I even started to use HTML – the opposite to most coders. And I’ve always found that to be a strength in my design career.

  17. I’d recommend the Web Standards Curriculum.

  18. Peter
    Permalink to comment#

    My introduction was thanks to customising my own myspace page, started with a myspace “customiser” site and saw what code changed every time i changed options…though these days i’d start off with firebug and wordpress or something similar.

  19. Patrick
    Permalink to comment#

    Before this summer, I was using tables and iFrames for my content.

    I got pissed off at the lack of flexibility, so when the summer started, I had tons of free time, so I scoured the net on web design, starting with http://www.thesitewizard.com/.

    Then I cracked open a book, read the part about CSS syntax, returned the book to the library, fired up Notepad++ and started screwing around. I learned CSS in three days.

    In the span of three weeks, I went from Tables/iFrames to XHTML/CSS/PHP Includes, through almost purely trial and error.

    Books could not and never will be able to help me in the way that thrusting myself deep into the actual environment and having to claw my way out did.

  20. Permalink to comment#

    Don’t buy a book: Get a domain, a FTP-Program, a Texteditor and the Web Developer Toolbar. I would recommend wordpress as a good, but hard starting point. After rebuilding a wordpress-theme you will know a lot of css and got the PHP basics on top!
    Cheers Claudius

  21. mack
    Permalink to comment#

    A good way to learn the “design” side of Web Design is getting a blogger account and going to town on the minima theme. Like these :

    http://templature.blogspot.com

  22. So true!! You’ll die trying to read a book about coding if you have no experience with it – but if you’ve tried it out and read the book afterwards you won’t be able to put it down because suddenly everything makes sense to you..

  23. What would you say for a person with some css knowledge and who has designed websites like me. I have very little css experience, but I have a good enough experience to create a decent site with it.

  24. Great article. How about – “How Would You Recommend a Novice Get Started in Web Design?”

  25. Juan Gotti
    Permalink to comment#

    Well it’s true that it’s easier to not lose interest in learning web design if you mess with a template, but as you sayd Chris, it all depends on the person.

    I’m the kind of guy who likes to learn everything that I can and I never lose interest. IMHO people really interested in learning the basics fast and having standards and accesibility on top of all that should visit this site and then with all the basics fresh and clear then come to CSS Tricks to learn how to unleash the Ultimate-Super-Dumer-Ninja-Designer-Coder-Monk CSS power.

    Hope that helps xD

  26. Permalink to comment#

    Another great piece of advice there Chris. This is how I am learning CSS, I think it really is the only way to do it – get stuck in and start making things happen.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".