HTML and CSS

There are two vital parts to learning a language:

1. Absorbing information
2. Practicing the information (and turn it into knowledge)

This guide focuses on the Absorbing information part. Actually using the material is still needed. Hence, the goal here is to know the building blocks and tools of HTML and CSS. In other words, focus less on the detailed usage of each element but more on the purpose and functionality, ultimately creating a reference in your brain. This way, you will have the intuition and the basic knowledge of what to use and be able to learn the details quickly as you are using the languages.

It is also extremely useful to examine the source of web sites to see how things are implemented.

Two useful links:

• Mozilla Developer Network: A well composed source of information.
• JSFIDDLE: A tool for quick prototyping of HTML/CSS and Javascript

HTML

Before anything else, learn the background and structure of HTML.

The way I learn utilizes two resources:

• codecademy’s HTML/CSS Tutorial
• MDN’s HTML Reference

1. Follow through the tutorial as a guideline and as a way to get used to the language. (The tutorial may be too easy but does a good job teaching the basics. Skip sections as desired)
2. Read the associated section in the HTML reference with the introduction of each new element
3. Search on the Internet when unclear on the intention of an attribute if the usage of an element is still unclear
4. Skim through the list of HTML Guides provided by MDN
5. Skim through HTML5 Overview
6. Go back to the HTML reference and scan through all the elements which are not introduced by the tutorial

Again, at this point, the goal is to know what to use and where to get help, instead of how to use.

CSS

Using Cascading Style Sheets (CSS) to achieve the desired result requires not only broad but also extensive knowledge on the technology. Many many things such as fonts and layouts can already be topic of their own. Going through this serves as base knowledge. To really be able to use CSS, one will need to research further into topics and issues at hand. Checking out the source of web sites as examples is particularly important to learning CSS.

Structure of CSS: syntax and forms of the language

Learning CSS is largely the same as learning HTML, but since there is already a CSS tutorial on MDN, I skipped te codecademy’s tutorial.

1. Follow MDN CSS Tutorial
2. Read MDN CSS Reference along with the tutorial
3. Skim through CSS Developer Guides
4. Read 10 properties of CSS3

Note: The CSS reference may look long and intimidating, but many properties are simply similar and of the same family and usage. The important thing to know here is where the properties belong and when to use them.