CSS: Noob to Ninja – The Complete Video Series
Tutorial Details
- Subject: CSS
- Difficulty: Basix
- Availability: Premium Exclusive
Download Source Files
- Source files for this tutorial are available to Premium members.
Get a Premium Membership
Not Premium? This tutorial is available on the Tuts+ Marketplace
Learn MoreThis 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
Join Net Premium
For those unfamiliar, the family of TUTS sites runs a premium membership service. For $9 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!
XEROX CODEEnjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Rockstar WordPress Designer
Now updated for WordPress 3.0, this classic book on WordPress theming and design has sold over 3500 copies! Get yours now!
Top Selling
on Codecanyon
jQuery Lightbox Evolution only $12.00 
Events Calendar Pro - Wordpr ... only $30.00 
Honda Malta - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+ mobiletuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
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
That’s next on the list to finish up.
Ok, I can’t wait
Thank you
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!
Yes I agree with Mohamed, I would love it if more episodes of the javascript from null series were made.
Thanks JW!
Me too! I love them!
can you post a link for the javascript series?
http://net.tutsplus.com/tutorials/javascript-ajax/javascript-from-null-chapter-5-events/
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
Thanks, Shadow.
knowledge should be free…plus you earning from adds…… i think net tutsplus could be more popular if its free…………
Nettuts *is* free. But for those who want more education — that costs us a lot more to produce — we also offer a premium program.
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.
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.
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
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.
Hi Jeffrey! Awesome tutorials as always. Please we need a complete series from xtml to wordpress 3! Thanks.
Hmm — Maybe not XHTML, but I have considered writing a WordPress + HTML5 tut.
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.
hey Jeffrey…I need the series of HTML 5 & CSS 3…If you can provide the tut then it would be gr8….
Thanks..
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.
It’s something we’re actively considering.
I agree with Jack. Thanks for actively considering it (especially if it’s for all the premium tuts)!
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
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.
Good, looking forward to see that .
Looks awesome. Im sure to check it out.
As always from nettuts , but are these videos different from all the screencasts here about these new css 3
features ?
Jeffrey, miss the wordpress tutorials..can’t wait for premium wordpress tutorials
I wait for new episode in JavaScript from null series, Jeffery great job!
Your the best!
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!
Thanks, Jon. I really appreciate that.
Thanks Jeffrey..
I m gonna buy a premium for that… ( as I love your first Ninja book )
++
Thanks!
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
I’m willing to become a premium member again just because of this.
Great job
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
).
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)
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!
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.
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.
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
)
Absolutely.
This is exactly what I did.
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?
Awesome! Can’t wait to go through these! This series alone has been worth the $9 I spent for this month’s subscription!
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.
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!
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!
I went to the premium tutorial section and downloaded the individual video file so my problem is solved Thanks!!! this is a great resource.
I’ve been trying to download these files, but my download keeps stopping mid-stream. Anyone have any thoughts on why?
why sometimes premium stuff are geared on beginners?
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).
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.
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!
Wow really love your tuts and Andrew Kreamer should consider working together.
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
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;
?