HTML. CSS and DOM blog

Can you think of an analogy to describe HTML, CSS and the DOM? How would you describe it to your non-technical friend?

Imagine a decorated fence.

• HTML is the posts, pickets and slats. It is the structure of the fence.
• CSS is the paint on the wood and the decorations hanging off it. Different posts could be painted different colours, and photos can be on the fence.
• Take a photo of the fence. The photo is the DOM. The photo is not the fence, it is the camera's intepretation of the fence.

What is meant by boxifying design?

Boxifying design is a method of understanding a design mock to more easily create the webpage. The programmer draws boxes around each thing on the design mock where each thing will respresent one element in the HTML code.

What is the box model?

The box model is applicable to (probably) all HTML elements. The box model consists of 4 different components which can each be styled individually. Every element can have margins keeping it away from other elements, a border, padding between the border and the actual content.