Pause before writing code. Really, there is no rush. Before learning what to write, it is essential to understand where to write it, which tools to use and what kinds of technologies we have at hand.
This chapter is the toolbox I show you before we start working. Trust me: you will return to it often.
✍️ Your first traveling companion: the code editor
If you are used to Word or Notepad, forget them. Writing code is different from writing a document: you need tools designed to help you write, read and navigate thousands of lines without getting lost in a maze.
The most popular among web developers is undoubtedly Visual Studio Code (VS Code): free, fast, highly customizable and full of useful extensions, from automatic formatting (Prettier) to frontend framework support and collaboration tools.
In enterprise environments or complex projects, you may encounter WebStorm, Rider or Visual Studio: heavier, but with advanced debugging, testing and refactoring built in. Every developer has a style; you will soon find yours.
🖥️ Terminal, Git and DevTools: superpowers
When picturing a developer, you probably imagine a black screen full of scrolling text. That is not science fiction: it is the terminal (or shell), the tool for talking directly to your system and project tools. You can:
- Start a project (
npm start). - Install dependencies (
npm install). - Run tests, builds and all kinds of commands.
At first it can seem unfriendly, but it gradually becomes a natural extension of your hands. On Windows you will use PowerShell or WSL; on Mac and Linux, Bash or zsh.
Then there is Git, one of your best friends on this journey. Git records code changes, creates versions, enables collaboration without stepping on each other's toes and takes you back when things go wrong. With Git, you work alone as if you were a team, and in a team as if everyone were always aligned. Platforms such as GitHub, GitLab and Bitbucket also let you share, protect and track code. We will devote a whole module to Git later: it is too important to dismiss in one paragraph.
Finally, browser DevTools. Press F12 (or right-click → "Inspect") on a web page to open a panel of developer tools: see and change HTML and CSS live, monitor HTTP requests (the very ones from last chapter), read JavaScript errors and measure performance. Like putting on X-ray glasses for every website.
🔍 Languages, libraries and frameworks
One of the most important distinctions to establish is between a language, a library and a framework. They are often mentioned together, but do different jobs.
Languages are the foundations: HTML, CSS and JavaScript in the frontend; Python, C#, Java and PHP in the backend; SQL for databases. Without languages, there is no code.
Libraries are ready-made tool sets. They do not impose rules; they simplify your life: need an HTTP request in JavaScript? Axios. Date manipulation? Day.js. Charts? Chart.js.
Frameworks are entire ecosystems: they tell you how to build a web app, providing structure, conventions and tools. React (technically a library, but let us not say it too loudly), Angular and Vue on the frontend; Express, Laravel, ASP.NET or Django on the backend.
If libraries are tools scattered across the table, a framework is the box that organizes them and decides which compartment each belongs in.
🤖 A note about AI
There is a new tool in the box, and I cannot ignore it: artificial intelligence. Assistants such as Copilot, ChatGPT and Claude are part of many developers' daily work: completing code, explaining errors, helping reason through problems.
This guide's view is simple: AI is a tool, like the editor and terminal. It will not replace the developer, but understanding and using it well is now essential. To judge what it produces, you still need to read and understand code. That is exactly why this guide exists. Later, we will dedicate specific guides to it; for now, know it exists and is neither magic nor a threat.
🚀 Bringing the tools together
Knowing languages matters, but using the right tools makes you fast, efficient and, why not, happy in daily work. You need not learn everything today. Just know these tools exist, will stay beside you, and feel more like home the more you play with them.
In the next chapter, we get our hands dirty with the first real half of web development: the frontend. We discover how to build the interfaces users see and use every day.
Ready? Editor open? Terminal ready? Then the journey truly begins.