30 Days to Learn HTML and CSS: a Free Tuts+ Premium Course

30 Days to Learn HTML and CSS: a Free Tuts+ Premium Course

If you’ve ever wanted to learn how to build websites and web apps, HTML and CSS are the first skills you should learn. They are so fundamental that we believe everyone has the right to learn these skills for free.

We set ourselves the challenge of designing the most effective and enjoyable way to learn HTML and CSS in one month. The result is 30 Days to Learn HTML and CSS, a free Tuts+ Premium course instructed by Nettuts+ editor and web dev veteran Jeffrey Way. We’re really excited to share this with you today! (Plus, get a sneak peek at the new Tuts+ Premium.)


How it works

30 Days to Learn HTML and CSS is a thirty-day video course designed to be completed over one month. Jeffrey Way will take you through a new topic each day, giving you the building blocks you need to eventually code an entire website based on a PSD design.

If you’ve ever wanted to learn HTML and CSS, but either didn’t have the time, didn’t know where to start, or didn’t quite ‘get it’, we’re pretty sure you’re going to love this free course. All you need to give us in return is 10 minutes a day to go through each video and build your knowledge.


Part of the new Tuts+ Premium

In the next few weeks we’ll be launching a complete reinvention of Tuts+ Premium, including a massive redesign and UX overhaul, member forums, a library of eBooks and in-depth courses teaching you skills from the inside out.

We’ve also drastically improved the way you access the content you know and love, with the ability to quickly filter content based on topic, difficulty, format, and estimated completion time.

30 Days to Learn HTML and CSS is one of the courses that will be available as part of the new Tuts+ Premium. This course is free, but the rest of the courses are available to members. We’ll be covering topics like HTML5, CSS3, WordPress, digital painting, web design and web typography.

For now, here are a few glimpses at the new Tuts+ Premium!


Selecting a topic allows you to filter by sub-category, format, difficulty, and estimated completion time.

Members can view content in their browser, rather than having to download it.

Full members get access to educational eBooks worth more than $400.

One of many upcoming courses.

Juicy tabs!

Stay up to date and win a 5-year scholarship

If you’re a Tuts+ Premium member and want to be notified about the new Tuts+ Premium, or an interested non-member who’d like to learn more, you can sign up to our notification list. Every subscriber will have the opportunity to win one of 10 x Five-year scholarships to the new Tuts+ Premium, including access to 670+ tutorials, top-selling eBooks, 1,201 source files and a library of in-depth courses.

To get notified and learn more about the competition, join the web design and dev courses mailing list.

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

    Jeffrey,

    Is there anyway that this course is available without the 960 grid stylesheet you used? I am a beginner, and I suppose those that found the course easy to follow have had some experience starting a website from beginning to end.

    I am having a lot of trouble with layouts in CSS. Can’t ever get stuff to organize the way I need it. When you dove straight into the 960 grid I became a mess and could no longer follow your tutorial. I had no idea what did what! It felt like you just wanted to end it so you just plugged the grid to do the layout for you. I am appreciative that you started the tutorial in the first place and provide it to us for free, but I really need a little help, especially in the floats department. I’m sure a lot of people do too. Sometimes they simply don’t work or they mess up things before or after floated elements.

    It’d be nice if we could get a review on how to create 2, 3, or 4 column layouts from scratch.

    Thanks

    • Kushan

      hi

      i am also new and beginner so i found my self its easy we do css stuffs from Dreamweaver(cs5.5) since we dont have that much idea about codes and how they act so in Dreamweaver u also can tick and untick css options by looking at option window and can self learn what they do actually.

      Jeffrey also said dont use grid960 if u are a beginner and i don’t think its smart u try creating 2,3,4 colmns from the start u should try something really easy and better continue it for while at least u can code it while closing your eyes ;) so then u can jump to next level of creating as u wish.

      hope this will help u and good luck :D

      my english is bad sorry :)

  • http://www.kyleoliveiro.com Kyle

    I just watched the lesson on headings and realized that Nettuts uses multiple H1 tags on their homepage.

    Doesn’t this go against best practices?

  • http://tutoriales-equipo.blogspot.com Machfudz

    hmmm… I just learn about HTML.. hoho

  • Margalus

    Hi there Jeff! I’m liking the course a lot but i’m wondering: what’s your Sublime Text 2 theme? I’m sticking with Monokai which i love for the colors but i can’t see my code well because it doesn’t separate elements too much.

    I’ve tried to install the famous Soda Light but it’s not working so again: what’s your theme name?

  • http://anupplanet.com Anup

    The page show me 404!

  • Kevin

    I can’t get the tutorial to load anymore, am I the only one?

  • daniel

    I really need that course! however I see only error: 404 Not Found

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

      About twelve more hours, hopefully. :)

  • liam

    Still not loading for me, I’m stuck on day 12 and have been for like 3 days, this is not natural!

  • http://vasanthramu.com vasanth

    Hello jeffrey ! I got a problem in my website ..

    Two webpages i created… when i click the next page the entire page position changes, dnt know why it is so

    can you fix it !

  • Rick

    Hi Jeff do you have any video tutorial on sublime 2? I just would like to use it as a text editor. I would like to know the ins and outs of it. Thanks

  • anonymous312

    How can i load flash animation or video in background in html?…Is there any easy way.I have tried video tag in html5.But its not getting adjusted according to size of background

  • Jaclyn

    Hi Jeff! thank you for the great tutorials! i’m about to finish the entire course but I’m stuck on a few thing in the Day 29 video. after switching to the 24 column grid system, i couldn’t get the banner image or callout image to end up on the same alignment. The navigation bar seems off too. any ideas? or hints on where to find a solution?

  • http://twitter.com/derbywds derbywebdesignstudio

    nice work keep it up