Grow your CSS skills. Land your dream job.

Rate Your CSS Skill Level: Final Version & Poll

Published by Chris Coyier

There was lots of great feedback from the rough draft model of the CSS Skill Levels. I have tried to take everyones ideas into account and rework things. The biggest consensus was that there needs to be another level between either 3 & 4, or 4 & 5. My solutions was to expand to a 6 level system and make and effort to space out the levels a little more evenly.

css-skill-level-all.png

So here is the finished CSS Skill Level chart! You'll notice I have added a poll to the sidebar as well, so you can assess yourself and then vote in the poll. (RSS Readers will have to jump over and vote, sorry!).

css-skill-level-1.png
  • I've heard of CSS, it is used in web design.
  • I have downloaded and used a CSS template before.
  • I have poked around in CSS files making small changes like changing colors and removing underlines from links.
css-skill-level-2.png
  • I understand that the purpose of CSS is keeping design and content separate, to the highest extent that is possible.
  • I have made extensive modifications to a CSS template.
  • I have used a WYSIWYG editor to create CSS web page.
  • I have a basic understanding of CSS layout techniques.

 

css-skill-level-3.png
  • I have designed a reasonably complex website from scratch using only CSS for layout.
  • I have a solid understanding of the structure of CSS, the CSS box model, and CSS positioning.
  • I understand how to use float and deal with it's quirks.
  • I have a basic understanding that different browsers render some CSS differently and that needs to be accounted for and tested.
  • I have a growing collection of CSS resources to draw from.
  • I do not use tables for layout whatsoever anymore. I understand that tables are for tabular data, not page layout.

 

css-skill-level-4.png
  • I have designed and coded a large number of CSS web sites. I can convert a design from any format into a CSS layout: Photoshop, Illustrator, napkin drawings, etc.
  • I am completely comfortable writing and editing CSS by hand.
  • I have a strong understanding of the cascading part of CSS. Particularly how some some CSS properties do, some don't, and some depend on how the value is declared.
  • I have a solid understanding of cross-browser CSS. I know how to use browser specific CSS statements and delclare browser specific stylesheets.
  • I know and have tried some CSS hacks and understand the advantages and disadvantages of using them.
  • I have a strong understanding of the different sizing values available in CSS (e.g. em, px, %, pt, "small", etc.) and in what situations each make the most sense.
  • I can quickly troubleshoot and solve CSS problems.
  • I have a great collection of tools and resources at my disposal for inspiration, debugging, or reference.

 

css-skill-level-5.png
  • I feel like I could tackle any design idea with CSS.
  • I can do pixel-perfect cross-browser conversions of designs into CSS websites.
  • I can visualize markup structure easily, just by looking at a design.
  • I have utilized additional web technologies to expand the possibilities and break through the limitations of CSS.
  • I have my own CSS framework I use, complete with my own customized CSS reset.
  • I have a strong understanding of advanced CSS like pseudo classes, pseudo elements, and attribute selectors.
  • I keep up to date on browser support and development progress.

 

css-skill-level-6.png
  • I am involved with the future of CSS specifications or support.
  • I am a CSS Celebrity.
  • I've written books, given seminars, taught classes, knew CSS since she was a little girl, etc.
  • I don't need to do testing, I just know.

Comments

  1. steve
    Permalink to comment#

    Umm, how do I vote again?

  2. steve
    Permalink to comment#

    oh, wayyyyyyyyy over there down to the right. any you’re teaching others on site design? no offense but hiding prime content is kinda rule number 1 not to break.

  3. It’s not prime content, it’s ancillary content.

    I thought about putting the poll in the post, but I thought it might be fun to keep on the homepage for longer than that post will be on the homepage…

  4. Mathieu Beausoleil
    Permalink to comment#

    Well, i suppose that people need to do an auto-evaluation to feel better.

    Personnaly I see CSS like a concept of development, comparable to object oriented and it’s why i don’t need a scale 1-6 to have confidence in me.

    Whatever my opinion, I think this scale is a good representation of the differents levels of knowledge.

  5. Permalink to comment#

    good deal. much better.
    im a 4.5.

    i think 5 is now much more clear and easy to determine if thats your rank. and 6, which would be master, is reachable to exactly only those people. masters.

    id be a 5 except i havent really utilized other technologies. ive used ajax and javascript some but i didnt code it and its only bee a few times. not really utilization and i dont have my own framework. i use the dreamweaver framework. it just speeds everything up so fast but i have alot of snippets and i know exactlly what to change in the framework going into it so i guess its sorta mine.

    good deal.
    glad this test is around bc i really had no idea where i was as far as skill progress.
    thanks!

  6. now all I need to do is make shirts for everyone to wear at work……

  7. Permalink to comment#

    I’m between 2 and 3. Guess I have to study more about CSS!

  8. Yeah much better and clearer. Would say im a 5 except that I dont use a framework, I dont like blotted code, so maybe im a 4.5 then :)

    The original guy who asked this, what is his response??

  9. @Mathieu Beausoleil: I’m glad you don’t need a scale to have confidence in yourself. I hope nobody who participated in the poll came away from it with any less confidence! If anything I hope it would be a good motivator.

    @Dallas Freeman: Haha, T-Shirts would be cool =)

    @Jermayn Parker: The original guy (Emil Stenström) did respond in the comments to the rough draft version. Essentially he liked it!

  10. I’m only at level 1.5 ;p

  11. This is excellent!

    I came across this post by searching for exactly this kind of thing. I’d be interested in seeing a rating / dan system for ALL languages.

    At the moment I’m on a particular ActionScript forum, and it is very frustrating to have to share 1 page that scrolls off several times a day with the entire range of skills.

    If all posters undertook a brief assessment of their own skills (both general and specific) it would allow options to filter content to a level they were comfortable with, as well as provide more of a clue regarding the skill levels of other posters.

    I can’t tell you how frustrating it is to see the oft-frequenters (*cough* moderators *cough*) of let’s say a Flash skill level 4 or even 3 tell a skill level 2 “It can’t be done!”, “Impossible!”, or provide a HUGE hacked workaround, when as a skill level 5 (or even a 4 would know) I know that it’s entirely possible, and could provide different appropriate ways to do it.

    A little knowledge, as they say, is a dangerous thing.

    Saying that, there are times when a skill level 2 has taught me a trick or two. I remember the first time I was told that the class attribute coudl take multiple selectors. Wow. That was a quick lesson in humility!

    Great work.

  12. Ray
    Permalink to comment#

    I am at level 2 going to level 3.

  13. Sweet, I’m sitting at 5! ….:) Time to go home!

  14. Permalink to comment#

    I have created this code pen to display these skills on your own site. Interested to hear on how it can be improved.

  15. RioBrewster
    Permalink to comment#

    I know this is a pretty old post – but when Chris posted he added a level 6, am I the only one who thought,

    “But this one goes to 11!”

    ;^)

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