Getting the Fundamentals Right: Introduction
After some time of coding (two years to be exact), after overcoming many hurdles, and frustration and finally getting to calmer waters, you start to think about the steps that led you to where you currently are in your career, and about the next steps that will lead you further to where you want to be. What keeps coming to my mind is a term that's often heard in the world of programming, the fundamentals. A lot of people by now are probably sick and tired of hearing about the fundamentals, but there's a good reason why they are frequently mentioned.
As a self-taught front-end developer, there are a lot gaping holes in my knowledge when it comes to programming. A way to close those gaps is to get good at the fundamentals. Hopefully, in time, I'll manage to patch the holes in my general knowledge of programming, algorithms and computer science, but right now, I'll be focusing on the fundamentals of front-end development: HTML, CSS and JavaScript. My goal here is to create a guide that will help out people that start in the web development space, something that would have helped me when I started learning web development.
Emphasizing the "mental" in fundamental
When learning a new skill or honing an existing one, it's necessary to have a good mental model, or a good way of thinking about a certain topic. If you want to dive more deeply into this concept, here's a short article. Naturally, introspection, examination of one's thoughts and/or feelings, is key in this regard since we need to be aware of our way of thinking about a certain topic.
It's odd that sometimes we experience some kind of internal struggle, resistance even, when trying to establish a good mental model by dismissing our attempts to think too much about a particular topic, thinking that we already understand it, and that it's time to move on to something else. However, let's persist in the struggle against our internal resistance, as it may unveil the flaws or gaps in our understanding.
When dealing with abstractions (and programming is all about abstractions), it's important to draw parallels with the real world, with the human condition, and one of the best ways to accomplish this is to use metaphors. By using metaphors and analogies we are able to create memorable mental models for complex concepts like HTML, CSS and JavaScript. So let's start by doing just that.
The house metaphor
Imagine our website as a house. The house has a foundation, walls, windows, a door, and a roof with a chimney. The structure of the house is the HTML, all of the colors of the house, the color of the roof, the house, the windows are the CSS, and the functionality of the house is the JavaScript. You are here presented with three options.
The first option is just the HTML, the backbone of the house. Then, we have the HTML combining with the CSS to give the house texture and color. Finally, we're including JavaScript to make the house functional. Try choosing between different options, and once you're on the last option where JavaScript is added, you might notice that nothing visually changed, but try interacting with the chimney, the door, the doorbell, the windows, and the light bulbs, and see what happens.
What I like about this mental model is that it's easy to remember, straightforward in its layering, and can be extended to a fullstack web development model by including external services that connect our house to the whole city, be that the electrical grid, the water supply network, the sewage system, etc. When juxtapositioning with its digital counterparts, these would be the databases, APIs (Application Programming Interfaces) and other services that either host our website or supercharge it with additional functionality that we would otherwise need to build on our own.
Conclusion
Strive in building a mental model that works for you, trying using different metaphors, but do not get stuck in the process. The goal is to create a mental model that will help you understand the fundamentals of web development, not to create the perfect mental model. In the next article, we'll start with the first layer of our house, the foundation, and we'll start learning about HTML.