CSS: The First Steps - New Plus Tutorial

CSS: The Very First Steps – New Plus Tutorial

Oct 7th in HTML & CSS by Jeffrey Way

This one is for those who are hoping to take their first steps into web design. This 70 minute Plus 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 Plus membership!

PG

Author: Jeffrey Way

Hi, I'm Jeff. I'm the editor of Nettuts+, and the Site Manager of Theme Forest. I spend too much time in front of the computer and find myself telling my fiance', "We'll go in 5 minutes!" far too often. I just can't go out to dinner while I'm still producing FireBug errors...drives me crazy. During my free time, I sporadically write articles for my own personal blog. If it will keep you in the good graces of the church, follow us on Twitter.

Join Tuts Plus

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of TUTS sites runs a premium membership service called "TUTSPLUS". For $9 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!

  • Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.


Related Posts

Check out some more great tutorials and articles that you might like

Enjoy this Post?

Your vote will help us grow this site and provide even more awesomeness

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )
  1. PG

    kevin October 7th

    so tempting now

    ( Reply )
  2. PG

    patvillaruz October 7th

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

    ( Reply )
  3. PG

    Jasmin Halkic October 7th

    Very nice tutorial. Thanks.

    ( Reply )
  4. PG

    EGY99 October 7th

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

    Thanks JW
    Keep them coming.

    ( Reply )
    1. PG

      wnabcreative October 8th

      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.

      ( Reply )
  5. PG

    EGY99 October 7th

    @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

    ( Reply )
    1. PG

      Belinda October 7th

      I think that would be a fabulous idea :-)

      ( Reply )
    2. PG

      Laneth October 7th

      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!

      ( Reply )
  6. PG

    Montana Flynn October 7th

    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!

    ( Reply )
  7. PG

    David Ferguson October 7th

    @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 :(

    ( Reply )
    1. PG

      Jeffrey Way October 7th

      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. :)

      ( Reply )
  8. PG

    Towel October 7th

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

    ( Reply )
  9. PG

    Jenart October 8th

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

    ( Reply )
  10. PG

    Chris October 8th

    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…

    ( Reply )
  11. PG

    Jeff Adams October 8th

    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!

    ( Reply )
  12. PG

    Andrew October 8th

    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.

    ( Reply )
    1. PG

      leonardo October 15th

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

      ( Reply )
    2. PG

      Cumbrian October 23rd

      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!

      ( Reply )
  13. PG

    Raoul October 8th

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

    Thank you !!!!! ^^
    R.

    ( Reply )
  14. PG

    Richard Bagshaw October 8th

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

    ( Reply )
  15. PG

    Francisco October 9th

    Very nice tutorial. Thanks.

    ( Reply )
  16. PG

    Joshua October 12th

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

    ( Reply )
  17. PG

    Peter Breis October 13th

    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.

    ( Reply )
  18. PG

    leonardo October 14th

    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.

    ( Reply )
  19. PG

    Lawrence of Haiti October 31st

    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!

    ( Reply )
  1. Arrow
    Gravatar

    Your Name
    October 31st