Our Favorite HTML and CSS Resources

You want to learn HTML and CSS, or maybe you just need a refresher on the current state of web technology—where should you start?

This is a question we get asked a lot at Drupalize.Me. Our theming and module development videos often assume that you're familiar with basic HTML and CSS. But not everyone is, and you've got to start somewhere.

At the moment, creating HTML and CSS vidoes is low on our list of priorities. We're not saying we'll never do it, but for now we serve our members best by rocking Drupal-specific content.

And there's already a lot of great resources available for HTML and CSS. I thought I'd share some of my favorites here. I also tapped the Lullabot "hivemind" for additional recommendations.

So without further ado, here are the resources: 

There are a lot of good video tutorials out there, both free and paid. I haven't watched all of them from start to finish, but I've watched bits here and there of most. (You gotta research the competition, right?!) All three of these resources also came highly recommended by my Lullabot colleagues.

• Code Academy has a great track that covers the fundamentals of HTML and CSS, and it's a great starting point for beginners. If it's your first foray into the world beneath the pretty pages in your browser, start here.
• Code School (paid) does a good job covering some of the basics. They also take a look at some of the tools that augment CSS, like Sass.  And they have JavaScript, which rounds out their coverage of the front-end trio.
• Treehouse (paid) also has an HTML and a CSS track that's worth checking out, as well as some great extra tracks covering Sass, JavaScript, and other front-end fundamentals.

One of the things that's really awesome about learning HTML and CSS is they're client side languages. This means that your browser does all the processing and interpretation, which in turn faciliates great in-browser tools that let you experiment in real-time. This is great when you're just starting because the feedback is immediate. Finally, HTML Dog has some great tutorials that cover both HTML and CSS, as well as common tools for editing and working with code. I haven't used this one before, but it comes highly recommended. And after poking around a bit, I'm impressed with their material.

The Mozilla Developer Network (MDN), is a proponent of treating the web as hackable and modifiable by default. They believe the best way to learn HTML and CSS, as well as other web technologies, is to explore your favorite sites. With tools like FireBug (Firefox) and the WebKit Inspector (Chrome and Safari), it's easy to look under the hood and see how most sites work. MDN also has great tutorials for learning web technology that are worth checking out.

Webplatform.org has great crowd-sourced documentation and tutorials in their wiki. They also have great documentation on the HTML and CSS specifications, how different browsers meet those specifications today, and what the future looks like. It's all made more awesome by the fact that webplatform.com is a collaboration between some of the biggest names in technology, including Facebook, Google, Microsoft, Apple and Mozilla.

Update May 7, 2015: We've also found a nice free e-book, How to Code in HTML5 and CSS3, which you can read online or download the PDF.

Update November 5, 2015: For a very comprehensive introduction to the world of web front-end technique and tools, check out this free online Front-end Handbook.

But I'm sure there's lots of other great resources out there for learning HTML and CSS. After all, this is the foundation upon which the Internet is built. What are your favorite resources?