What is the difference between HTML, CSS and JavaScript

HTML provides the structure of a website. If you were to build a house, HTML were all the bricks and other elements such as doors, windows that make up the final house. CSS provides the style of a website. CSS defines width, height, position, colors and many more things that make up how the house appears. Javascript brings in interactivity. It lets you open doors and windows, can watch out for visitors and perform certain tasks if they arrive such as turn on the barbecue.

Control Flow and Loops

The control flow is the order in which the computer executes statements in a script. Code is run in order from the first line in the file to the last line, unless the computer runs across the (extremely frequent) structures that change the control flow, such as conditionals and loops.

Imagine you cook a meal and you follow a recipe. The receipe will tell you "boil 4 eggs". So before you continue your flow you will loop through this task until all 4 eggs are boiled (of course you are much smarter than a stupid script that follows commands and you boil them in the same pan). If you expect another guest you will adjust all measurements by 1, which is another example (IF condition) where the normal flow can be broken.

Hopefully you will not be interrupted too much and you can just follow through the recipe from top left to right bottom.

What is the DOM

The DOM is an inventory of all objects, properties, methods and events of an HTML page. Thanks to this "addressbook" Javascript can get, change, add, or delete specific HTML elements.

Imagine you need to describe to an electrician which lightbulp in your house needs to be changed. Wouldnt it be great if you had a standardised way to tell him? Like go to livingroom, count all lamps from the left, it's the 3rd one that is damaged, replace it please.

Accessing data from an array vs. from an object

Lets define an array:

Var colors = {'white', 'black', 'custom'];

The items within the array are indexed starting with 0. To access the array we use the name of the array (colors) and the position of the item within the array in square brackets []. This looks like this:

Var itemThree;
ItemThree = colors[2];

The value of the variable itemThree would be 'custom'.

Let's now define an object:

var hotel = {
hotel.name ='Quay';
hotel.rooms = 40;
Hotel.booked = 25;
checkAvailability: function() {
Return this.rooms - this.booked;
}

To access any property or method from an object we can use dot notation. At the left side of the dot we call the object and to the right we call the property or the method we want to access:

Access / call the property of an object:
Var hotelName = hotel.name;

Access / call the method of an object:
Var roomsFree = hotel.checkAvailability();

Functions

Functions let you group a series of instructions together to perform a specific task. Imagine the recipie would need to explain basic cooking processes from scratch like boiling an egg each time this process is required. Instead, all steps required to "boil egg" can be summarised in one function that would look somewhat like this:

function boilEggs (egg) {
put water into pan,
put egg into pan,
bring to boil,
wait 5min,
take out
shock with cold water
}

This way of packaging a series of statements is very practical. From now on the recepie could just say: boilEggs and you would know exactly what to do without the recepie having to tell you the exact steps everytime the menu requires you to boil an egg.