Dear marine critters,
I'm continuing my learning journey at DevAcademy.
HTML and CSS
During the previous sprint, I have discovered a lot about HTML and CSS and I want to share my knowledge with you with a simple analogy. Look at us anemones, we all have the same structure: our body is a column, with a foot at one end and an oral disc at the other end. Our oral disc is surrounded by tentacules, protecting our mouth in the center. This is our HTML code, our building blocks. But as you know, we come in a variety of size, color and shape. Or some of us can project thread-like filaments when threatened, some have a smooth column while others can be sticky or covered with "warts". If we were a webpage, this would be determined by our CSS code.
After CSS and HTML, we moved on to basic Javacript and I've been introduced to a host of new concepts and I'm going to share a few with you.
Control flow and loops
The first one is control flow. A Javacript program is a succession of instructions that your browser will execute in order, from top to bottom. You can modify this default behavior by adding conditions so your browser skips some parts of the program, or by adding loops, to repeat parts of the program. Let's take a pratical example. Next month, human beings are partaking in a ritual called "Plastic Free July". When they will come across an object made out of plastic, they will go through the 4R's to decide what to do with it:
- Refuse
- Reduce
- Repurpose
- Recycle
In that order! And they will repeat this process for each plastic object they will encounter. Hopefully, they'll take the right decisions and our home will be cleaner. In the meantime, watch out for those pesky bits of plastic, they tend to be everywhere nowadays.
The DOM
What's the DOM? The DOM (Document Object Model) is an essential feature of your browser. Without it, websites wouldn't look and behave like they're suppose to. When you open an url, your browser first goes through the HTML document this url is pointing to. It will look at every element and create a tree where each element becomes a node. In other words, it reorganises the HTML code into a family tree. This "translation" of your HTML document into nodes is essential. It will allow your browser to apply the styling it will find in your CSS. More important, without it, your Javascript functions would not be able to access your HTML to modify it. Which means users would not be able to interact with your website.
For most users, the DOM will never be visible. But developers often use the devtools of their browser to display a representation of the DOM they can directly interact with. This is useful to test new ideas, for debugging or checking that your code meet the standards.
Accessing data from arrays and objects
WIP
Functions!
WIP