Difference between HTML and CSS

HTML is the base code for a website that defines it's overarching structure and elements. CSS manipulates the HTML elements to stylize them, change their appearance, and change their location.
As an analogy, imagine a Sci-Fi Valet Parking Lot. The parking lot itself and the cars inside it are your HTML. The cars are the elements, and the lot is the overarching structure.The Valet parking attendant (with a shrink ray and paint gun) is the CSS in this analogy - they can change the positions of the cars, the size of the cars, colors - everything. They can even drive the car out of the parking lot and off a bridge (Z-index)

Control flow and Loops

In programming, the control flow is the order, or flow, in which specific code statements are executed. A simple example of control flow would be from top to bottom. Whatever's at the top gets executed first, then the one below it, then below that, and so on. Things can get markedly more complex than that with multiple possible flows and loops.
Loops are specific instruction in programming that allow the same script to be executed as long as a specific (set of) condition(s) are met.
To describe control flow - imagine the flow as a typical day in your life. Everything you do during this day is a part of the flow. It can contain different things, and also the same things done more than once. In the same analogy, a loop would be something that you do, then repeat, based on certain conditions. Suppose your job is a brick layer, and you work from 7am to 3pm. In this case, the loop conditions (simplified) are:
Time is between 7am and 3pm
Day is weekday
Health is good
As long as the above conditions are met, you will be in a loop of laying brick after brick. If one of these conditions are not met, the loop stops.

The DOM

The DOM (Document Object Model) is a term to simplify how specific objects are laid out on a web document. In layman's terms, it's the structure and layout of a web page, for example. Each part of the page is represented in a way to allow programming languages to interact with it. This allows us to manipulate parts of the document, it is useful if you want to test specific functionality, add or remove elements, or debug (troubleshoot) specific issues. Think of a lego structure - each lego piece is like an element of the DOM, and you are able to manipulate it however you choose to by removing, changing, or adding pieces.

Arrays and Objects

Arrays are data containers that are assigned to a single variable. Each data item inside an array can be a string, number, boolean value (true/false), or another array. You can access specific values in an array by indexing a variable. Indexing is simply a number that specifies an element of the array. Take the simple array:
let x = [1, 2, 3, 4, 5].
Each number between the brackets is an element of the array (separated by commas). The first element (1) has an index 0. If you want to capture the 1 using the variable, you'll need to specify the index as follows: x[0]. x is the variable where the array is stored, and 0 is the index value. This returns 1.
Objects are stored inside braces {}, and are usually properties and values.
let heroColor = {batman: 'black', superman: 'blue'}
To access batman's color from the variable heoColor, you can either use a dot or brackets. As an example: heroColor.batman will return 'black'. heroColor['batman'] will also return 'black', and that is a different notation which can be useful.

Functions

Functions are basically snippets of code that perform a specific task and are stored to be potentially re-used. If you need to access a certain block of code multiple times, or have it relay different results depending on the arguments the function is given, then it will allow you to do so. If I tell you to picture a tiger, you would immediately be able to picture one. That's because the image of the tiger is stored in your brain (your brain is the system it is defined in) - you don't need to see a picture of it or have it described to you. Functions are like that - you just define it once, and can access it whenever (within the system it is defined in).

Back to Blog Homepage