HTML & CSS
HTML is like a plain boring white t-shirt. It does the job but it's not interesting or appealing. CSS adds the style (v-neck, round-neck, long, etc), the color and any logos or pictures on it to make it more interesting and unique.
Control FLow & Loops
Control flow is the order in which code is written and read; left to right, top to bottom. Just like in daily life you have an order to do things. To drink beer, you first need to get it out of the fridge, open the bottle, put bottle to lips and drink. If you put the bottle to lips before opening it, it just won't work and you will just be very thirsty.
Loops is a set of instructions that will be executed multiple times until a condition is met. For example, I can say that I will keep drinking beer until 8pm. So I will kep repeating the steps (get beer out of fridge, open bottle, drink) until the condition (8pm) is reached. After which I will stop.
The DOM
DOM (Document Object Model) is the place where you can look at the structure, code and contents of a webpage.
We can interact with the DOM by making temporary changes to the contents or style either to test something, check something or pretend to hack a webpage. We access the DOM by right clicking on the page and selecting 'inspect'.
Accessing data from Arrays & Objects
Items in arrays are stored using zero-based indexing. Which means that the first item in the array has an index of [0], the second is [1] and so on, so forth. So for example this is how you would access data from an Array:

Then this is what I would get -

To access data from Objects, we use either the dot or bracket. And it looks like this -

Functions
JavaScript function is a piece of code that is written to perform a certain task. It can be executed as many times as we want. They are useful because they are reusable and they can contain in itself a bunch of complex instructions, which would take a long time to execute seperately.