The relationship between HTML and CSS is very much like that of a house. HTML is the bricks and mortar, the bare bones of the house. Without these things there would be nothing to look at (or indeed live in). It's functional, but it's quite dull. If all we had was HTML every house would look more or less the same. So say we wanted to bring some indivduality to our house. A new color scheme, some nice texture and lets make the door one of those big wooden ones. To do this we need CSS. CSS is allows us to manipulate our existing structure, but make it much, much cooler by styling it.
Consider lunchtime. Now I probably spend more time considering lunchtime than most but for the average person there's a specific time of the day where we think to ourselves "Oh it's 12.00, time to go for lunch". This is a loop that happens every day, at the same time.
So we've determined that it's lunchtime. Time to work out what to do with that juicy bit of information. We ask ourselves, am I hungry? Yes. Did I pack lunch? No. Is it raining outside? Yes. makeLunchInDevAcademyKitchen(). There's a clear decision making proccess that we follow in order to come to a final decision. This, is control flow.
Sounds scary I know but don't worry, it's pretty straight forward. The DOM stands for document object model and it breaks down your HTML into a 'family tree' structure. You can see a visual representation of this by interacting with the DOM via devTools. Chrome is the industry standard but Mozilla Firefox is also good.
An array is a list of different values where each value has their own specific index number assigned to it ranging from 0 -> infinity. We can reference this index number if we want to access the data within it. E.g arrayList = ['array1', 'array2', 'array3']. console.log(arrayList[2]) displays 'array3'.
An object differs from an array in the sense that rather than indexing values numerically it holds a list of keys which values are assigned to. It's maybe a little hard to understand initially, I like to think of the keys as attributes. For examle: We have a character object. Within the object there is a like of keys such as hairColor, eyeColor, height, to which we assign values. If we want to access those values we need to reference the key that it's stored against. console.log(character.hairColor) prints 'pink'.
Remember before how we were talking about control flow and the process needed to decide what to do at lunchtime? In the case of lunchtime we know that it rolls around once a day so why not store the decision making proccess into a function that we can call everytime lunchtime comes around? This saves us writing a whole bunch of code.