Stage 1: HTML and CSS

How html, CSS and JavaScript fit together - a house analogy

Structure of a html document

A html page is effectively made of nested boxes, which is the reason why it can be a good idea to start with pen and paper when designing one.
This is referred to as the Document Object Model (DOM). The DOM is an API that describes the structure of the page in a parent-children form to the browser. This creates a tree-like structure where a parent element can have several children elemtents, each of a different type. For example a div element can have a heading and a paragraph as its children. The browser then combines this information with the CSS code to render the page.

CSS

Overview

CSS is used to format the way the HTML page is displayed. It stands for Cascading Style Sheets.
The main idea in programming is: "do not repeat yourself."
It can be used by using the "style" tag, linking to an additional file using the "link" tag or writing it inline.
What is being cascaded is the style. It can be passed to various types of classes.
It follows the structure: class{Attribute: value;}
The attribute reference guide can be found here.

The box model

Everything on a webpage is made of boxes. However, these boxes comprise of four elements:

  1. Content: the actual content of the box
  2. Padding: the padding between the content and the border
  3. Border: the actual border of the box
  4. Margin: not part of the actual box, it forms a kind of "exclusion zone" around it and its size is not used to calculate when calculating the boxe's.

These boxes can have several types of attibutes such as their maximum width, which can be set as an absolute number of pixels or as a percentage of the screen.

The importance of not repeating yourself

Not repeating yourself is one of the main ideas in programming. It involves more planning upfront but there are several advantages to doing so:

  1. More efficient work: by not repeating yourself, you write less code which takes you less time to write and to read.
  2. More efficient code: this also means that the browser has less code to complile, leading to a faster rendering of the page.
  3. More efficient maintenance: by avoiding repetition, you also create a single source of truth for your code. In the case of CSS, if you have made use of the "class" attribute in your html blocks, you will only have to change a few lines of code in the CSS file to make changes to the your pages' style. This would be a lot more onerous if you had repeated yourself by using inline attributes as would have to alter your code in numerous places
  4. More accurate code: by not repeating yourself, you also reduce your chances of copying and pasting errors that you will have to correct in multiple places.

Code validation

To make sure that your code appears correctly on all browsers, it is a good idea to check it for errors using online code-checkers:

Html code checker
CSS code checker

1 - Inline elements

They affect a single line of text:

2 - Block elements

They create a block that can have different properties attached to them
  1. <p> stands for paragraph
  2. <div> stands for document division
  3. <form> creates a form for user input

Other tags