You’ve just learned HTML, CSS, and JavaScript—the foundational technologies for web development. A pat on the back for your achievement! đź‘Ź
This series walks you through the front-end development ecosystem starting with what you’re familiar with, showing why various tools exist so you don’t have to spend years figuring it out on your own.
Front-end development ecosystem
HTML, CSS, and JavaScript are the building blocks, but the front-end ecosystem has so much more. Think about all the tools you hear or read about.
Here’s a screenshot from a Google search for ‘front-end development tools’. Mind you, this only shows a sample of the available tools.
At this point, a good question is, how did we go from just HTML, CSS, and Javascript to multiple tools used during development? The good news is that you don’t have to master all of them, but you need to know why the tools exist so you can pick your favourite combo for different projects.
Gaining experience
I could tell you which tools to pick as a beginner, but instead, I will teach you ‘experience’ by showing you why a tool is selected.
Ultimately, it’s not the tool that will make you money; it is the ability to solve a problem with the tool that will. This series is structured to teach you experience and reduce your learning time significantly
From Basics to Tools
In the real world, you will rarely use HTML, CSS, or JavaScript alone. Take a look at these two projects on GitHub, and you will hardly see any HTML, CSS, or JavaScript. If you find them, they are not used as you would expect. PS: You don’t have to understand what you see.
Tools play a crucial role in the development process. We’ll delve into the ‘WHY’ for each step, exploring the purposes behind tools like Bootstrap, React, NPM, and more. Understanding their functionalities provides valuable experience.
An overview of some tools.
What are Tools: Frameworks, libraries, etc.
So far, I have been using the term ‘tool’ to describe all these other technologies that are not HTML, CSS, or Javascript, but other terms exist to describe how a tool will fit into your project or what it does. Terms like ‘Framework‘ and ‘Library’ are the most common; others are Bundlers, Task runners, Preprocessors, Packages, Code editors, and many more.
You will learn more about them as we move along.
The missing foundation
While HTML, CSS, and JavaScript are the foundational technologies, two more technologies are considered foundational, a database and a programming language. So now we have HTML, CSS, Javascript, a Database and a Programming language.
So, a more practical foundation for front-end development is HTML, CSS, Javascript, a database (eg. MySQL or MongoDB) and a programming language (eg. PHP or NodeJS)
Conclusion
In summary, while HTML, CSS, and JavaScript are foundational technologies in web development for a beginner, it’s essential to recognize the integral roles of databases and programming languages.
Understanding the ecosystem is a journey, not a destination. Embrace the learning process, and eventually pick the tools that resonate with you, and gradually build your expertise. With a clear roadmap and a strategic tech stack, you’re well on your way to mastering the intricacies of web development. Happy coding!
Estimated Reading Time: 3 minutes