🕵️ Dev Tools Workshop
When we build visual web pages, or "front end", we always use these building blocks: fonts colours, and spacing. Every site you see uses these building blocks to show the user an interface.
🧩 Components
In fact they use these building blocks to design components. The components are composed on the page to make a user interface. All web coding is the composition of small, simple pieces into more and more complex systems.
It is the job of a developer to build the smallest, simplest piece she can. We are always operating within a wafer thin layer of a vastly more complex system, and it's our job to make that layer as clear and simple as possible, so all the other layers can predict what it might do.
⚛️ Complexity
But any "block" is really composed of and dependent upon many components. Fonts, for example, are made of vectors - points and a mathematical description of the distances between them - and shown on the screen by pixels. The pixels are coloured using computer colour, another mathematical system to represent colours as coordinates, or locations, in a colourspace. The colourspace values are sent to the LCD as a set of subpixel intensities, or gates to filter the light, but if it's an OLED display... we could go on forever like this. We are only really saying that everything is made of something.
🤔 We learn by asking questions
So you can see, it doesn't make sense to try to memorise or "complete" coding. The "stack" is millions of layers deep. Where would you stop? Instead, developers learn to understand systems using a combination of learning rules and using systematic inquiry.
Developers are explorers, botanists, astronomers. We explore code by reading it, making predictions about what it will do based on the rules we already know, and testing those predictions to develop our understanding. In short: developers constantly look at how things work using tools and tests.
🧪 Devtools
For web coding, your first tool, your sonic screwdriver, is called Devtools. Inspect this page with Devtools.