CSS: Noob to Ninja – The Complete Video Series
plusvideos

CSS: Noob to Ninja – The Complete Video Series

on Jul 28th 2010 with 71 comments
Tutorial Details
Download Source Files

This exclusive premium video series will take you from a state of absolute CSS “noobness,” all the way up to ninja-status, capable of taking advantage of the latest CSS3 techniques. The series begins with the basics: the syntax, properties, etc. However, each new video expands upon the previous, as you work your way up and improve your skills. In this final week, you’ll complete the series, as you gain access to Parts 8-12: five new episodes.

In these final video tutorials, you’ll learn about a variety of CSS3 techniques, how to use custom fonts, working with CSS frameworks, and how to extend CSS with applications like LESS. Don’t fall behind! Become a Premium member!

The Full Screencast Series: Exclusive to Premium Members

  • Part 1: Preparation
  • Part 2: CSS Properties
  • Part 3: Typography
  • Part 4: Floats
  • Part 5: Positioning
  • Part 6: Semantics, List Items, and Menus
  • Part 7: CSS Organizational Techniques
  • Part 8: Rounded Corners, Box Shadows, and Text Shadows
  • Part 9: CSS3 Gradients
  • Part 10: Custom Fonts with @font-face
  • Part 11: Taking Advantage of CSS Frameworks
  • Part 12: Extending CSS with LESS
Video Sample

Join Net Premium

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member!

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Mohamed Zahran

    Hi Jeff, I’ve a question I’d be grateful if you answered it!

    your JavaScript from null series has only 5 videos?
    If there are more could you provide me with them?

    Thanks in advance :)

    • Jeffrey Way

      That’s next on the list to finish up. :)

      • Mohamed Zahran

        Ok, I can’t wait :)

        Thank you

      • http://jarodtaylor.com Jarod Taylor

        Sweet. I’ve been waiting for the rest of this series! I’m pretty solid with jQuery (even created a well received plug-in meerkat.jarodtaylor.com) but have been wanting to get a better understanding of raw Javascript. Looking forward to the next installment(s).

        Thanks!

      • Mohib

        Plz help me!!! its regarding web designing

    • David T.

      Yes I agree with Mohamed, I would love it if more episodes of the javascript from null series were made.
      Thanks JW!

      • Rik de Vos

        Me too! I love them!

    • florian

      can you post a link for the javascript series?

  • ShadowAssassin

    Yes, this is more like it!

    Now this is why I’d recommend buying tuts premium, thanks for providing this Jeffrey, if I had some money, I’d buy premium just for this :)

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks, Shadow.

  • guru

    knowledge should be free…plus you earning from adds…… i think net tutsplus could be more popular if its free…………

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Nettuts *is* free. But for those who want more education — that costs us a lot more to produce — we also offer a premium program.

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        This reminds me of those who say that music should be free too. Yeah…because it’s not like artists need to pay bills or anything. :)

      • Mitchell Stewart

        I don’t really think the music argument is analogous in this situation. None the less, I bought a tutsplus membership for this and can’t wait to dive in!

    • http://thedigitalyardsale.com Digital Yard Sale

      I have never had a Premium membership at Tuts+ and I’ve still managed to learn more here than many other tutorial sites combined. So I’d say the vast amount of knowledge here is free. And even the premium is peanuts compared to taking a semester of classes on the subject.

      That said, this is the kind of stuff that makes me want to get a Premium membership….dang it.

    • http://byte-news.com Ahmed “C.Z”

      Well i disagree with you
      when i first wanted to join premium member i was thinking a lot more than a 9$ per month
      well that’s nothing really
      just think who much nettuts pay for there server and for member who add tuts and lots of other things well that’s a big money and 9$ isn’t enough for running a site like nettuts
      and i am so glad for being one of tuts+ premium member

    • Eyes Only

      I agree with Ahmed, $9 a month is nothing especially for a site that will better your skill set in many different areas.

      Jeffrey, that was a good point about the music. I would love for Guru to give us all something useful for free haha.

      This is a great site and I’ll always pay the money because if you think of all of the sites it includes,$9 is basically free as it is.

    • http://www.marioplanet.com Zach

      For people who put as much time into their work as those that work at tuts+, their has to be a premium section. Adds don’t make you that much. This is great stuff!

  • Constantine

    Hi Jeffrey! Awesome tutorials as always. Please we need a complete series from xtml to wordpress 3! Thanks.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Hmm — Maybe not XHTML, but I have considered writing a WordPress + HTML5 tut.

      • http://www.seowisedesigns.com Yheng

        hey Jeff I would really appreciate if you write an article for WordPress + HTML5! I’ve been waiting for so long for you to post something like that on net.tutsplus even before you started to post a tutorial for html5…

        …please :)

        I would really appreciate it! For sure many of us will do.

      • Sanjit

        hey Jeffrey…I need the series of HTML 5 & CSS 3…If you can provide the tut then it would be gr8….

        Thanks..

  • Jack Franklin

    Is there anyway you could sell these individually to non-premium members? I’m pretty competent with CSS but would like the last couple of videos.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      It’s something we’re actively considering.

      • Joshua

        I agree with Jack. Thanks for actively considering it (especially if it’s for all the premium tuts)!

  • HeatoN

    Now , these videos I should see . And by the way I like your style explaining videos. I think you should build your own site where you will provide various types of software online training videos like http://www.lynda.com. And I’m pretty sure many people will buy your products including me :)

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks! But that’s sort of what Nettuts is for. :) But, I know what you mean. I appreciate that!

      I actually do have a personal Tumblr tutorial site coming out that will do this very thing. :)

      • HeatoN

        Good, looking forward to see that .

  • http://freecss.info CSS Tutorials

    Looks awesome. Im sure to check it out.

  • Mohamed elzarie

    As always from nettuts , but are these videos different from all the screencasts here about these new css 3
    features ?

  • Jaysone

    Jeffrey, miss the wordpress tutorials..can’t wait for premium wordpress tutorials :)

  • http://www.botaiusti.com/ Bota Iusti

    I wait for new episode in JavaScript from null series, Jeffery great job!
    Your the best!

  • JonQ

    Hi Jeffrey! I just wanted to say THANK YOU so much for your CSS tutorials they’ve helped IMMENSELY. I even loved that 2hr psd to html/CSS tutorial. I’m probably going to get a premium membership just so I can watch these! Thanks for doing what you do and keep up the great work!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks, Jon. I really appreciate that. :)

  • Law

    Thanks Jeffrey..
    I m gonna buy a premium for that… ( as I love your first Ninja book )
    ++

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Thanks!

  • arnold

    can you make WordPress + e-commerce + other Advance stuff, or continue the jquery/php series in nettuts? I will sign up for Premium, for this.
    I think the only new here is the ” Part 12: Extending CSS with LESS” , the others was already done here (somewhere in nettuts tutorials?) by Jeff

  • http://www.codecrunchers.net Kevin Groenendaal

    I’m willing to become a premium member again just because of this.

    Great job

  • Andy King

    Guys, for $9 a month, why isn’t EVERYONE a premium member? I pay more than nine bucks for a week’s worth of coffee! And I do not work for Envato and I have not been paid to say this. But if you want this kind of online video training on a site like lynda.com you pay almost three times as much. And I think Jeff is a great online teacher. I have thoroughly enjoyed the jQuery, PHP and SQL stuff he has done, and am actually hoping for more advanced SQL (but there must be a very long list in his TODO file ;-) ).

    • http://byte-news.com Ahmed “C.Z”

      Agree with you everyone can get 9$
      i think people spend more than 9$ for a pizza so why not spending it in something useful (like tuts+ for example) :)

  • Mark Roberts

    Talking of CSS3, anyone come across this: http://css3pie.com, by adding a simple extra declaration in your css it says it will render many css 3 rules across ie6/7/8. If it does what it says then it’s amazing!

    • Andy King

      It seems to slow down the browser’s responsiveness a fair bit. Things like scrolling or changing the screen size seem to get a bit jerky. It’s not native IE code that generates the effects, it’s the add-on software, so the CPU has a bit extra work to do to generate the effects.

  • Ant

    By becoming a Premium member would I be able to download the videos to my Mac to view later? Time for me is a seriously precious commodity, and I’ll only be able to watch the videos when I have some spare time.

    Thanks.

    • Robert

      Yes, when you are a Premium member you are able to download the videos for the tutorials here on Nettuts. It’s one of the perks of being a Premium member :o)

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Absolutely. :)

    • http://www.ulrichdesign.ca Travis Ulrich

      This is exactly what I did. ;)

    • Ant

      Cool thanks for responding, right 50 % convinced, final question (might sound obvious – just want to make double sure), do we get access to all the past tutorials too?

  • http://www.ulrichdesign.ca Travis Ulrich

    Awesome! Can’t wait to go through these! This series alone has been worth the $9 I spent for this month’s subscription! :)

  • http://www.nionwebdesign.com Niels Pilon

    Thanks for all these videos Jeffrew especially the ones about the 960 grid system and the custom fonts using font-face! Very well explained and really usefull.

    @ant, yes all tutorials can be downloaded even from the other tuts sites.

  • Billy

    You are an absolute hero Jeff! Very well taught series of tuts! You assume the viewers have no previous knowledge which is something most tut providers seem to forget to a certain degree when creating beginners tutorials. Thank you! Look forward to your next tuts!

  • millsmillion

    I think this is great series I became a premium member because of the wide array tutorials available for all the network sites. However, I am having trouble with the part 3 (typography) video. Extracting from winrar it says that the file is corrupt. I’m wondering if anyone else has this problem and is there any way I can download it or see it. Right now I’m a CSS noob. I want to see the whole series especially typography so I can be a Ninja. If I’m the only one with this problem pls let me know and if there’s a fix or something so I can see typography I’d very much appreciate it.

    Other than that please keep up the great work!

  • millsmillion

    I went to the premium tutorial section and downloaded the individual video file so my problem is solved Thanks!!! this is a great resource.

  • Nathan

    I’ve been trying to download these files, but my download keeps stopping mid-stream. Anyone have any thoughts on why?

  • arnold

    why sometimes premium stuff are geared on beginners?

  • http://www.conceptopixel.com Luis Lopez

    Well I dont feel exactly like a ninja, but I feel like Im going to markup a PSD design and Ill be with no fear or failings because you explain very well, the floats confuses me a lot but I think that overflow:hidden; is my favorite way to not float elements above.

    Thank you, I will be featuring soon in my site with my future new WordPress Theme (yes Ive watched your wordpress theme video series, that JW layout).

  • Ian

    Very nice tutorial series Jeffery. Especially enjoyed The latter tuts on the CCS3 styles.

    I have a question on gradients though… I’ve put a gradient fill in my body element as follows:

    background-color: #f8f8f8;
    background-image: -moz-linear-gradient(top, #4B654B, #F8F8F8 95%);

    I was expecting a gradient from green to grey and then the grey to persist down the page.

    What I’m getting is a nice gradient, followed by a repeat of the gradient once my content (in a centralized div). is finished. tried adding a further #f8f8f8 color-stop at 100% but no change.

    It renders the same in Chrome and Safari (with the relevant webkit flavour CSS3 ).
    Only IE8 gave me what I expected. Any help getting rid of the y-axis repeat appreciated.

    Loving the series on CodeIgniter as well.

  • Lucas

    Hi Jeffrey .Cool tutorial is a pity that this series was completed.Can you make a video tut on how to use 960 grid system in a simple photoshop template(and maybe to show a little html and css implementation).Please!

  • http://www.gsatgames.com kamal98

    Wow really love your tuts and Andrew Kreamer should consider working together.

  • soran

    Hi Jeffrey .Cool tutorial is a pity that this series was completed.Can you make a video tut on how to use 960 grid system in a simple photoshop template(and maybe to show a little html and css implementation)and for me.Please my daer!!!!!!!!!!111

  • http://www.phantoms.su Nikita

    Lot’s of time i use margin and padding, for only 1 side, and i always as a question to myself, which way is better:

    margin:0 100px 0 0;
    or
    margin-right:100px;
    ?

  • http://www.goofy.fi iivo

    Watching this through right now and I gotta say big thanks for this. I’m doing a CSS training session for a bunch of beginner developers / graphic designers next month and I think this series is just want I need to use as a reference when putting together material for the session.

    And you can be sure that I’ll tip them anyway about Envato sites. ;)

  • http://None PsyberMind

    Hey I’ve got a problem here, and I don’t know if its browser related, or something just isn’t set up right

    None of the CSS3 styles you introduced in Part 8 are rendering in FF 3.6.10. Now I know that CSS3 is still relatively new, but from what I understand, the -moz styles should work fine. They don’t with my version. I just get a blank page. Using WAMP Server as a backend

    Also, I wanted to throw out another tool for windows users. It’s free, and very powerful, and thats PSPad. It works almost in the same manor as TextMate, with a file “drawer” and code hinting. It also will do some inline error checking for you, so if you are missing a closing tag, or something isn’t right, It will let you know.

    Anyway, this series was the reason I subscribed, and dang I’m glad I did!

    • http://None PsyberMind

      Ok yea, so I figured it out.. It was a noobish play on my part:

      -mox-border-radius: <– see the problem there?

      *sheepish grin*

      Thanks for all you do man, this site is a coder/developers dream come true

  • dimtiar

    Hello, i just wonder, what is the name of the snippet program you use in rounded corners lesson, and is there any good alternative for it for windows. I just like the option to insert snippet through quick search.

  • Matias

    Looks great, I think I should join the Premium. The first part could be available for everyone, though.

  • http://gnarmedia.com Adam Murpy

    Amazing stuff Jeffrey, even having done HTML/CSS professionally for 5+ years, I learned lots from these videos. I am really excited to continue learning HTML 5 and CSS 3.-0!

  • Chris M

    Thank for all your work Jeffrey, I’m your new fan ;)
    I learn a lot from yours tuts.
    But only one thing from 960gs part. You wrote a bit of code like this:

    Lorem ipsum …

    Lorem ipsum …

    How to write this part of code different way to have valid markup and keep margin 20px from block above?

    Regards
    Chris

  • Chris M

    Something wrong happened with attached code :(
    I thought about:

    Lorem ipsum …

    Lorem ipsum …

    • Chris M

      I give up with adding code here :(
      I thought about “subcontent” id. You use twice the same div id. That’s probably not valid markup?

  • http://academicwriterjobs.com Academic writer

    Simply great !
    For absolute beginner its a great guidelines