I’ve been asked before how I learned HTML/CSS, and JavaScript (always ongoing). The answer: curiosity and the WebKit inspector. Everyday, I’m inspecting the markup of pages that I think are well designed or have effects and interactions that pique my curiosity. The inspector is simply a right-click away by selecting the “Inspect Element” menu item. Make sure you’ve enabled the ‘Develop’ menu, in Safari’s advanced preferences.

The WebKit inspector is where you can observe and interact with the the languages that create a website. Through the inspector, you can pick up how the DOM (Document Object Model) works and complex pages are constructed. At first, the tool that is most key is the live element selection tool. By using the element selection tool, you can explore the different HTML elements of a page and what and how CSS properties are applied them. If you are unfamiliar with a CSS property, element, or attribute, refer to W3C Schools, DocHub, or a site of your choosing. Once you gained some new-found knowledge, then try creating a single page site incorporating what you’ve learned. If you want to learn even more about different markup techniques, web standards, or the ‘industry’, A List Apart is an excellent site.

This approach isn’t for everybody. Some may feel intimidated by seeing all that code in the inspector, but my curiosity and appetite to learn, helped me get me over that. The first page I ever inspected was the designer, John Hicks. He has a great comment in his markup about learning:

“Hello source code curious person from the INTERWEBS!

What you’re doing is (in my opinion) the BEST way to learn and advance,

that is, viewing the source. It’s how I learnt, and how I’m still learning.

So go ahead, dig away and ask any questions…”