CSS: The First Steps - New Plus Tutorial
plus

CSS: The Very First Steps – New Premium Tutorial

on Oct 7th 2009 with 46 comments

This one is for those who are hoping to take their first steps into web design. This 70 minute Premium video tutorial will assume that you have zero knowledge of CSS. Over the course of the screencast, you’ll learn about the basic syntax, a plethora of different properties, and how to create the beginnings of your very first website.

Don’t know what CSS stands for? Need help diving into CSS? Never created a website before? If so, this screencast was tailor-made for you! Sign up for a Premium membership!

Join Tuts Premium

NETTUTS+ Screencasts and Bonus Tutorials

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


 
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. I'm incredibly passionate about modern software development, and am the author of Laravel Testing Decoded! 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
  • kevin

    so tempting now

  • patvillaruz

    cool! ^_^ i cant wait to read it! ^_^

  • http://www.livingforart.com Jasmin Halkic

    Very nice tutorial. Thanks.

  • EGY99

    Finally, a Tuts for 100% beginners :-)
    I’m glad I’m a Tuts+ member!!!

    Thanks JW
    Keep them coming.

    • http://2fanofsports.blogspot.com wnabcreative

      I want to start learning. As you are a beginner, I think you can help me how to start.
      Because of health problem I almost locked up in my house for a long time, so that don’t know anyone who can help me about this. Pls help me.

  • EGY99

    @Jeffrey Way
    I have a recommendation. The free Tuts and Tuts+ content can be organized or filtered as for “Beginners”, “Some experience” and “Advanced”? That way we can get the right content faster

    • Belinda

      I think that would be a fabulous idea :-)

    • http://sffarlenn.net Laneth

      I reckon this would be an excellent idea as well – that way you wouldn’t get all those people in the comments complaining about the beginner tuts, even though they’re clearly marked as “For Beginners”

      Bravo Jeffrey! I have your PSD to HTML/CSS to WordPress Plus Tutorial constantly playing in the background while I work so that I can learn the ins and outs of a basic site.
      Between that tut-set and the jQuery series on ThemeForest, you’ve taught me so much – I’m so grateful!

  • http://complimedia.com Montana Flynn

    Didn’t see it in the Latest plus box on the dashboard, I agree their needs to be a better system for downloading Plus content. Also when I login to the dashboard I don’t want to be redirected to the Account page, I just want to download some plus content!

    • Andrew

      I agree. I find it hard to know if I’m logged in or not. It is not clearly marked where to login.

  • David Ferguson

    @Jeffrey Way
    Just something I thought should be mentioned should you decide to take this tutorial (beginner css) any further, but be sure to mention how adding padding and such affects the width of objects and such. That may be kinda confusing to someone new if they are trying to place items in a container with a specified size and it doesn’t seem to wanna line up right.

    Also, I don’t know if this is something you could easily go back and fix now, or if you would want to bother, but, at around 59:30 into the video, there is overlapping audio. Sounds as if audio from another video got overlaid onto this one :(

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

      Hey David. Can’t believe you bothered to watch. :) This was for beginners.

      I’m utterly baffled about the 10 second audio problem there. Actually – I don’t think I did any editing of this video. Very strange. I’ll try to fix it soon. :)

  • Towel

    I already knew enough CSS to get by but this tut really helped.

  • Jenart

    That was an awesome tutorial, it taught me so much more than i already knew.
    Thanks =D

  • Chris

    I find it funny that they offer “source files” when you can easily snag css files from any website ^^. I guess if it makes things easier then it’s useful…

  • http://www.jeffadams.co.uk Jeff Adams

    Part of me is selfish and wants to see more jQuery or PHP tutorials, but part of me felt a little proud that such an awesome tutorial came out of a site that I’m a member of.

    I’m not the intended audience, but even I picked up alot of best practice and that might sound crazy but it’s true! Plus as well, teaching others seems quite natural to Jeff so keep it coming!

  • Andrew

    Why is this a plus tutorial? I’m guessing that most of the readers of Nettuts are way beyond an introduction to CSS. So for those who already have a plus account, I’d bet this isn’t going to do a ton for them.

    I guess I see a tutorial like this as a way to show people what a plus tutorial is like and if it is worth it. But I think it is weird that you are making a plus tutorial for beginners, beginners probably being the demographic that would be on the fence about spending money on a subscription. While the more advanced users, who already have a plus account for all the other great tutorials on this site, probably already know most of the information in a tutorial like this.

    Don’t get me wrong I think this site is great, just think this is a little out of place.

    • leonardo

      i hear you on this one. i am beginner and wasnt a member but payed to see this tut…

    • Cumbrian

      I couldn’t disagree more, Andrew.

      Surely there are subscribers of the site who excel in certain areas like graphics for whom a beginners guide to CSS is a great way for them to spread their wings?

      If we all know it all already then the site is somewhat redundant.

      Good to have you on board Leonardo!

    • André

      I agree

  • Raoul

    You make me understand YEAAARRRSSS of ununderstanding (if this word exist…)

    Thank you !!!!! ^^
    R.

  • Richard Bagshaw

    Great tutorial — this and the CI ones are really good, very clear and professional.

  • http://www.topiberian.com Francisco

    Very nice tutorial. Thanks.

  • Joshua

    I have waited for almost a year for this! Thank you so much! You Rock!

  • Peter Breis

    Thanks for a fascinating and informative tutorial on CSS. It has clarified so much for me.

    Just one thing, since I would like to practice everything I learnt, could we have this as a non-streaming flash movie? Or even as a printable tutorial.

    It is a very big stream and I can’t DL it to my desktop.

  • leonardo

    Great tutorial for those who are jsut starting and trying to understand about webdesign basics like me.

    I am glad i joined as a member :) it would be great if you could continue this tutorial and do the second part, creating pages and adding a cool effect navigation bar.

  • Lawrence of Haiti

    New to CSS, but loved this video… the way you taught just makes sense and I picked it up pretty easily. Looking forward to more advanced editions. Great job!

  • http://www.pixelwebtech.com/ sweety gupta

    Give more examples

  • http://www.motionflashdesigns.com LGLab

    Awesome Jeff ;-)

  • Athear Najor

    Jeffery,

    I’m sort of a newbie to css and think this would help me but… unfortunately about 15 min into the tutorial flowplayer stops and gives me the loading icon and never ever loads again. Is there a problem in the streaming of the vid?

    I pay for a monthly subscription and really would like to view the whole tutorial. Is it possible to download this tut directly to my desktop.

    Also when directed to this content I sometimes get two options on the right

    1. Download Video
    2. View Screencast

    Both are not always available. Just thought I’d let you know.

    Thanks,

    Athear

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

      Hi Athear – If you view the Net Plus tab specifically, there will be a link for you to download the video. :)

  • Kevin Rivers

    The screencast nor the download are working properly. The screencast stops loading around 12 minutes and the downloads will not complete in Safari or Firefox.

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

      It’s working now.

  • suneohair

    The video doesn’t seem to be working.

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

      It should be working now. Thanks for your patience!

  • Milan

    Is there anyone who can pay Plus account for me, because there is no PayPal in my country, and I just love these tutorials?
    I would pay whatever it costs, if there is someone who could help me. I have a Moneybookers account, so I will pay to whoever who can create a Plus account for me after my payment to him.

    Thank you

  • http://www.andrecastelo.com André

    Near the 60 minute mark the video stops working. I’ve tried VLC, winamp and BSPlayer and it doesn’t work. Also, I can’t see the flowplayer.

  • Billy

    The video crashes at the 60 minute mark :\

    Tried it on Window media player and VLC..

    • julio

      yeah its stops for me too

      • Eko

        It stop for me too in minute 59, so I can’t complete my learning.
        zzz

  • David

    Does this CSS tutorial, or any others for that matter, cover what the difference is between the different values of the CSS position property?

  • Anthony

    What tools/IDE’s are used in this tutorial?

  • Tara

    I can’t log in to my premium account – I log in and the page returns to this one…

  • Tara

    well I can click on the tutorial now – the page goes nowhere – how do i get access?

  • Prithvi

    Hi, i am a premium member but i am unable to see or find out the link towards this screen cast.
    Something is wrong.

    Prithvi

  • paresh bhatt

    i was excited regarding css now I have to be content with the free bees available only

    i am a student.
    regards
    paresh bhatt
    kolkata, India.