DOCTYPE: Strict, Almost Strict and Quirks modes

It is a matter of how the browsers, according to the type/version and standard(strict)/quirks mode (with/without a Doctype) make the difference between window’s viewport , body, document and documentElement. The behaviors are peculiar and hardly to be set in a general rule.

According to the type and mode, body and/or documentElement might be the block element (the element which bears the size) of the window’s viewport, of the document or even of both :rolleyes:

Sounds messy, I know, but don’t ask me why, ask the people who created those browsers.

For instance, several examples


Four ways to hide elements

display (right toggle)


  1. References between the FORM and its elements
  2. Labels
  3. Elements

HTML Forms is an often guest in JavaScript-enabled sites. There are few tricks in working with it.


The page loads not at once. There are stages and events that we’ll study here. All of them are pretty important for solid understanding.

Detecting event and property support [TODO]

There are three ways to detect support for an event or a special property without browser sniffing.

In short:

  • ‘name’ in obj
  • assign attr
  • typeof

Variable naming

  1. Short names
  2. Multiple words
  3. Under_score VS camelCase
  4. Summary

When you create a variable, it is very important to give it a proper name.

The script may have a lot of variables. Compare it with a number of labelled boxes in the attic. Without good labels, you will never be able to find the right box.

Same with variables. As your scripts will become more and more complex, right variable names will also become more and more important.

Widgets, architecture

A widget is a short for a graphical component.

The basic, worst way to create components is a plain code.

For example, let’s say we need a menu which opens on click:

Reintroducing CSS

  1. CSS

Read this article in case you are a beginner in CSS and semantic markup, to make