HTML, CSS and Javascript are the building blocks of web pages. HTML gives the structure for the content and CSS gives the styling.
When it comes to buiding a beautiful house, two things are important (or three). Structure of the house - which forms the basis of the building. The wall-paintings and decorations - which would make living in the house interesting. HTML relates to the structure of the house. Structure is an important part of the buiding, but it would be unpleasan to live in a skeleton-buiding. CSS which relates to the paintings and decorations of the house, makes dwelling possible.
And there is a third player which is the Javascript. Imagine javascript as the one giving functionality to the website. In the house analogy, flicking the switch turns the light on in the room, turning the shower to cold gives cold water etc.
Control Flow is the order in which the program is executed. For example if we want to prepare a cup of coffee, we will have to do a sequence of steps
The control flow of a program is regulated by conditional statements and loops (and functions). Let us look at conditionals and loops
People make decisions all the time. Not just big decisions such as buying house or changing career but small decisions routinely in everyday life. For example if I am hungry i will eat, if i am not hungry i will not eat. Even during the eating process, i constantly make decisions: when i am full i make the decision to stop eating and move on to other chores.
The decision making ability is always at work in humans even without we paying concious attention to it. However, in Software(or any machine) we will have to instruct every single decision making criteria. We have to explicitly tell the software: if you are full stop eating. What is full the software will ask. A high-level logic will be if you have consumed 400 grams of food you are full.
Many a times we will have to do a bunch of steps repeatedly in our life. Take the food eating process: it is a combination of a bunch of repeated steps and decision making: 1. Take a spoon-full of food. 2. Chew and swallow 3. If you feel full stop or consitnue to do steps 1,2 and 3. This is an example of conditional and loop.
The browser is the piece of software which does a specific task of interpreting HTML, CSS and Javascript. Under the hood, the browser takes these files and converts them into Javascript objects in a family-tree like structure called DOM. HTML, CSS & JS goes in to the browser and JS objects come out of the browser.
To interact with it is a two step process: 1. get hold of the node in the DOM (think a member in the family-tree). 2.Make the node do something (make him dance etc)
Arrays are lists. Think of the lists we use in our everyday life. A grocery list has the items we need to buy from the super market. Also the list has a numbered order. Even if we do not write the numbers, it still has some order. This is exactly what an array is. A numbered list of items of similar things. Just that the index starts from 0. If we were asked what is the 8th item in the grocery list, we know how to find it, using the index. Delete last two items in the list. . . easy. Change Apples to 10 instead of 5. . . done. We just have to know th eindex of the item in the list (or Array)
Assume you are a class-teacher of a year-5 class. You know the names of each of the students in the class. Assume each student have test scores for 5 subjects - Math, History, Science, English, Geography. If you want to know the Alex's (a student) Math score, how will to get it. You think of the studen't name (whic is Alex)and you get hold of his score using subjects's name(whic is Math). We acces them using the names instead of the index. Data in objects are structured but not ordered.
Functions do a piece of task. Imagine you have to calculate the GPA of a student based on the 5 subjects. You have to do this for a class of 25 children. You will have to do a set of steps to calculate the GPA. You have to repeat this set of steps for 25 students which is a tedious task. With functions we can write the set of steps required to calculate GPA once and use the same code for the rest of the class.
With functions there is no need to repeat the code. We can write once and use it whenever required.