Congratulations, newbie-no-more, you've mastered the bare bones basics of HTML web development as covered in the last Teach Yourself Tech. Now what? In this resource roundup, take those coding skills to the next level by getting to know the new standards of the web — HTML5 and CSS3.
Step 1: Discover the World of HTML5
As a markup language built for a mobile world, HTML5 is the future of the Internet. Try accessing GeekSugar.com from a smartphone; the mobile version of the site, an entirely new format optimized for small touch screens, will appear — that's the power of HTML5.
- Discover why HTML5 Rocks, but don't worry if you don't understand all of the terms just yet; we'll get to that later.
- There's a lot this new HTML is capable of, like 3D graphics, offline viewing, and new audio/video tools. The Web Can Do That!? covers all the amazing features of HTML5, complete with cat memes.
- To learn what HTML5 is all about and laugh along the way, look no further than Mark Pilgrim's Dive Into HTML5.
Learn the lingo, master the markup, and take your HTML5 and CSS3 skills for a spin after the break.
Step 2: Learn the Lingo
HTML5 uses real language in its tags like header, footer, section, and article . . . but it's not always that obvious. This quick vocabulary exercise cuts the confusion and makes coding much easier later on.
- Learn to talk the talk with Tim Wright's HTML5 and the Future of the Web, which takes you through the markup's basic structural elements.
- See how those elements come together with this Webmonkey tutorial.
Step 3: Master the Markup
What's the best way to learn how to work on the web? Dive in head first! Literally, start with a header, then build the rest of your web page from scratch.
- Smashing Magazine's step-by-step tutorial takes you from start to finish. Create a layout on your own using W3School's online HTML Editor.
Step 4: Pretty Your Page With CSS3
Cascading style sheets define the look of that HTML document you're working on, and CSS3 is jam-packed with new features to beautify your site.
- Poke around a style sheet format in Get Started With CSS3.
- Look over this reference sheet from CSS-Tricks and get to know all the things CSS3 can do for your site. Don't forget to keep it handy while you code!
Step 5: Strut Your Stuff
Now you're ready to put your new HTML5 and CSS3 skills to work by building and designing your own blog theme.
- Many of today's content management systems make it easy to create and upload a custom theme. We'd recommend WordPress — it's free, it has a great online community if you run into problems, and it provides this detailed guide to developing WordPress themes.
- If you ever get stuck, turn to the HTML5 Doctor, a network of web developers that addresses implementation issues. The site even categorizes forums by element — head, sections, tables, text, etc.