This week we showed you how to create a website using HTML and CSS… but now what? Here are some additional resources and methods you can use to learn more.First things first: If you want the notes for all of the lessons as a PDF, you can download one here.
Next, you should know that perhaps the best way to learn new things with HTML and CSS is to simply look at the source code on other sites. Basically you just choose View Source from the View menu in your web browser and look through the HTML source code to find the code you want, but check out the video above for a more in-depth look.
Don’t hesitate to use your search engine of choice to learn more about various HTML elements, CSS properties, or just a cool trick you know how to describe. Fellow web developers are often willing to share details explaining how they accomplished something. During your searching, you’re very likely to run across results pointing you to W3Schools. The W3Fools website argues (perhaps over-dramatically) that W3Schools is a bad thing. It’s not perfect, though, so take it with a grain of salt. A site like HTML Dog is a nice alternative.
All of that said, let’s take a look at some other resources you can use to learn more about CSS and HTML and improve your skills.
Web Developer Tools
(Adam Pash jumping in here.) Even better than View Source (described in the video above), you’ll want to get familiar with your browser’s best web development tools. On some browsers, like Chrome or Safari, really good developer tools are built in. On others, like Firefox, you’ll want to install the Firebug extension.
These web developer tools are invaluable as you start hacking away at websites. As an HTML and CSS beginner, the aspect of these tools you’ll want to get most familiar with is the Element Inspector. Let’s say, for example, you’re looking at an element on the page, and you want to see what the CSS that defines it’s fancy presentation looks like. Here’s how it works in Chrome:
Right-click the element you want to inspect and select Inspect Element. (Makes sense, right?) This will open a new pane at the bottom of your browser, as shown in the screenshot below. On the left side of the pane you’ll see the page source, with the element you chose to inspect highlighted. On the right side, you’ll see the CSS of the element you’re inspecting. You can inspect any other element on the page by either right-clicking it and selecting Inspect Element again, or by clicking on it in the source pane.
The best part? You can play with the CSS live on the page, adding properties, pushing pixels and tweaking anything you want to see how it works, what a certain property does, and so on. In the screenshot above, you can see I’ve changed the colour of this post’s headline and increased the font size to 50px. I realise we’re kind of burying this in the Additional Resources post, but in my opinion this is the single best tool in a web developer’s kit. Don’t hesitate to use it to poke around on a page and play with the source code. (The changes are just local, in your browser; next time you refresh the page, everything will be back to normal.)
There are other browser-based web developer tools out there that perform more specific tasks, but these are by far the most important ones to get familiar with. (Pash out.)
These online resources range from additional screencasts to articles to CSS tools you can use to speed up your development.
- Lynda.com – We almost always mention Lynda as a great learning resource because it is. It’ll cost you around $US25 per month, but if you’re simply there to go through one of their courses you can learn what you want to learn in a month and then suspend your account until you want to come back and learn something else. Or you can just continue your subscription and pick up a new skill every month, because their library is pretty great and endless.
- Primary CSS – Primary is a CSS framework, providing a number of pre-coded layouts that always work well. If you want to save a little time putting your layout together, Primary can do it for you.
- Blueprint – Blueprint is another CSS framework that is, perhaps, a bit more flexible than Primary and concentrates on cutting down on your entire development time. It not only helps with layouts, but helps you easily create buttons, tabs, and other page elements as well.
- 3 Advanced CSS3 Techniques You Should Learn – This is just an article, but it will teach you three techniques in CSS3 you might want to know: advanced selectors, animation and media queries. Animation, in particular, is very cool. The other two are practical.
Both Adam Pash and I learned HTML and CSS by looking at code and through experimentation, so we can’t personally recommend any books. But here are some recommendations from friends and Lifehacker readers.
- CSS: The Missing Manual by David Sawyer McFarland
- CSS: The Definitive Guide by Eric A. Meyer
- HTML and XHTML: The Definitive Guide by Chuck Musciano and Bill Kennedy
- Head First HTML with CSS and XHTML by Eric T. Freeman and Elisabeth Freeman
- HTML for Dummies by Andy Harris
Got any other great resources for learning HTML and CSS? Share ’em in the comments!