The Path to Learn Web Development

I wrote a ton of tutorials, and I get so many emails from people new to web development who want to know what’s the ideal path to go from zero to becoming a web developer. I think everyone you ask this question is going to give you a different answer. So let me provide you my answer based on my experience.

The short answer to the question “What’s the best path to learn web development?” is to join my bootcamp, where I teach you all I’ll mention in this email. Find all the information about the next edition on the website.

So that was the short answer. Let’s see the long answer now.

By the way, if you prefer video, I’m back on YouTube, after a hiatus. I made a video on this topic, check it out (and subscribe to the channel).

So what’s the ideal way to learn? The ideal way involves a mix of theory and practice. You cannot just learn all in a vacuum; you must mix learning with doing tons of demo projects or even working on a project you really want to create.

That’s even better. Also, you can’t just start coding right away before learning how stuff works. That would be a world of pain and it would be inefficient. You learn while doing. Let’s focus on the tech you need to know in order to call yourself a web developer. I focus on full stack because I think every web developer needs to know the entire stack they work with.

Otherwise, they will be a little bit limited in seeing the overall picture. You don’t need to work as a full stack web developer. Maybe you just work as a front end or back end developer, but if you don’t know the other half of the job that needs to be done, it will be hard to work with other people and be a valuable person in your team.

Starting from scratch, the absolute minimum you need to know is the fundamentals of the web, the HTTP protocol, HTML, and CSS. Many people tend to skip the basics, but I think knowing these things inside out is absolutely essential. It doesn’t take a lot to master the basics. Yet, knowing them super well is essential.

Those are the bare bones. I’m talking about how the internet works: protocols, TCP, DNS, IP, UDP, IP addresses, what’s a web server, what’s a web browser, how they work internally, knowing perfectly what happens from the instant you press enter on the browser bar to reach a website to see it rendered in a browser.

The difference between websites and web applications, HTTP methods, HTTP status codes, request headers, and response headers, HTML, the document markup language of the web. Tags, attributes, hidden tags, body tags, images, links, how to build a simple HTML page, semantic HTML, loading resources, tables - this is all basic HTML.

And then you learn CSS: selectors, cascade, units, colors, styling pages in a basic way, typography, spacing, and then layouts with the box model, positioning, CSS Grid, Flexbox, Responsive Design.

I think now you can start learning Tailwind CSS, which is a way to write CSS that a lot of people use. If something is used by a lot of people, there is always a reason. And I will suggest you look into Tailwind CSS.

So this is the 101 of web development: HTTP, HTML, CSS.

You need to know how to use tools then, like an editor, like VS Code. It takes a while to master the editor, finding the right extensions, useful commands, and so on. The command line - if you don’t know how to use a terminal, it’s going to be a whole new world.

Through the terminal, you navigate the file system, execute commands, control your computer with text. Or you can control your server as well. You need to know how to program the shell using scripts, handle permissions, processes, and those are all topics related to the command line. Using SSH to connect to a server securely - that’s another topic.

Git is a very important application that you need to know about. It allows you to version control your files in your project. So, it’s a tool you will use every day as a developer.

You need to understand the basics of Git, the basic Git commands, branches. You need to know how to use GitHub. You need to know how to work with remote repositories using both the terminal and the graphical user interface tools for Git, and collaborate with other people in a project.

You need to know what merging is, how to resolve conflicts, rebasing. Save a version of your code and push them to a remote repository where, thanks to continuous deployment, you will be able to deploy new versions of your website or application. I said deployment - you need to learn how to deploy your website because with HTML and CSS, you are now able to build websites.

Not web apps yet, but websites. Learn about all the most common platforms and their advantages and main characteristics while using Netlify or your own VPS or Vercel or Heroku or any other tool.

And that’s it for the fundamentals: HTTP, HTML and CSS, and tools.

Next up is JavaScript/TypeScript. So far, we haven’t done any programming.

What we have done is creating documents that are served by a web server and then rendered as graphical items by the web browser. That’s the web used as a publishing platform. Adding a programming language can turn our websites into web applications - apps, like the ones you install on your computer or phone, but they use the web as the platform, which has many advantages.

What you need to learn to start doing that is the programming language of the web, JavaScript, and its typed superset, basically a version of JavaScript with types called TypeScript. TypeScript is so widely used and popular that when I say JavaScript, I actually mean TypeScript. First, you need to know what a programming language is.

If you have never used a programming language, there are many concepts that are unique to programming languages. And you need to know about how to think about writing a program. What is a program? What is programming? And the different programming paradigms that exist, compiled languages versus interpreted, how to solve problems using programs, algorithms, flowcharts.

Then you need to know how to plan an application from the ground up, how to start from the problem and describe your application in words. Define it, define the application, define the stakeholders, do requirement analysis, do the application architecture, mockups, define the flowcharts for complex scenarios.

I think those are super important skills. A lot of people gloss over them, diving directly into the syntax of a programming language or into a project, but they are very important. Then you can talk about the main concepts of programming languages like input and output variables, loops.

Conditions, functions, modules, types, objects - all of these applies almost to any programming language. But in particular, we are going to see how to use them in the context of JavaScript. JavaScript is a peculiar programming language. There are thousands of programming languages, perhaps maybe hundreds. And the only one that can run inside the browser is JavaScript.

So JavaScript has this unique advantage over any other programming language. It might not be the best programming language, the fastest, the more scalable, but it has this unique, huge advantage that it is the only language that is understood natively by the browser. So it’s the language of the web because it can run inside the browser, but not just that - it can also run on a server, like any other programming language in this case, but especially as a beginner, I think it’s important to realize that mastering a programming language, learning it well, is a super hard effort and using JavaScript on the client and on the server is a great advantage because you don’t need to learn two different programming languages.

Which all have their own paradigms and differences and concepts and conventions. And you just learn a single language, JavaScript/TypeScript, and you are good to go for anything you want to do. Even desktop applications, thanks to technologies like Tauri, or even mobile apps with React Native.

Of course, if you want to learn another programming language, do it; there’s nothing stopping you. This is just the path I suggest.

So in the fundamentals of JavaScript, you need to learn what literals are, identifiers, variables, comments, how to define variables using let, const, var, types, the basics of types in JavaScript.

Operators like the assignment operator, logical operators, operator precedence, how to work with strings, how to work with numbers, case sensitivity, white space, semicolons, and you can jump then into arrays, how to work with arrays, all the operations that you can do with arrays. Then you work with conditionals, like if statements, else, switch, the ternary operator.

Then you have loops: for loops, do while, while, for of, forEach - all the kinds of loops that you can do. Then you have functions. Functions are super important. They are one of the most important building blocks of code. Any JavaScript program - you must learn absolutely everything about functions really, really well, like parameters, returning values from functions, arrow functions, regular functions, nesting functions, and so on.

Then you have a few very useful methods of arrays that use functions, for example, map, filter, sort, find, forEach. They are super important to mix arrays with functions. Then you must learn everything about objects: how to create objects, object properties, defining properties, getting the values of properties, methods, passing objects as function arguments, returning objects from a function, object destructuring, cloning objects, merging objects, and all of that fun stuff.

Once you know objects, you can dive into object-oriented programming using classes, class methods, private class properties, constructors, inheritance, and all of that. Asynchronous code is at the heart of JavaScript. You need to learn what callbacks are, promises, async functions, async/await, how to work with all this stuff because it’s used everywhere, everywhere.

Then you have scope, hoisting, the event loop, closures - very fundamental topics. Then fetch. Fetch is an API built into JavaScript that you can use to perform network requests. And then you have modules, how to work with modules in JavaScript, third-party packages, how to work with errors and exceptions. And those are just the basics of JavaScript.

There are a lot of built-in objects that you can explore provided by JavaScript, like the global object, number, string, math, JSON, date. You must do a lot of demos and practice to really master all of those subjects.

And this is just the language, the notions.

Once you know the language, you must apply it.

You can use JavaScript in two different contexts, as I mentioned. One is inside the browser, and the other is on the server. Let’s start from the server. You can use different runtimes for JavaScript. One is Node.js, which is the most popular, the one that made server-side JavaScript a thing.

And it’s basically the OG server-side JavaScript programming runtime. Then you have Deno, which is another one, a more recent one, which is very interesting. It was created by the person that created Node.js originally; it has very peculiar features that I think you need to know about. There is also another one, which is called Bun. Basically, they are different engines that you can use to run JavaScript, and all of them have pros and cons. So you might prefer one over the other. The nice thing is that they compete with each other to get better and better over time.

And we as developers, we benefit from this.

You need to know how to install packages from npm, how to build server-side JavaScript applications that interact with the file system, interact with the network. You must learn how to create APIs, HTTP servers using server-side frameworks like Express or Hono.

And perhaps you need to know how to use a website building tool like Astro, which is a tool that lets you experiment in a very easy way, I think, with server-side JavaScript to build websites and web applications.

And this was JavaScript on the server side.

JavaScript on the client side is a whole different beast because you can interact with the DOM, the Document Object Model, which is basically the in-browser representation of the HTML page. It lets you respond to events like click events, keyboard events, or other events like scroll events.

And basically lets you create interactive experiences inside what would otherwise be static pages.

At this point, you know HTTP, HTML, CSS, you know JavaScript/TypeScript, and how to use it on the server and on the client in the browser. You have a very good starting point.

Next up, you have forms, you know, for example, login forms or signup forms on a website. Those are fields you can define in HTML, style with CSS. And the browser automatically sends this data to a server when you press the submit button.

So you need to know how to build those forms and how to get the data on the server that was submitted by the form. So you can then save this data somewhere. And this somewhere is typically a database. So you need to learn databases, relational databases, SQL databases.

And the most popular ones - and the most popular one is probably Postgres. There are many others, but I think that you can focus on learning a single one initially. Postgres is a great choice. And so you can learn how databases work, how to work with an ORM, which is basically a JavaScript library that simplifies interacting with the database.

Common ones are Prisma, for example, or Drizzle or Kysely. Then you need to know what authentication is, for example, how to sign up a user to an application securely, how to use cookies. This is a very big topic and you need to do a lot of projects with everything I mentioned because that’s the only way to really learn stuff.

Once you know how to create pages and make them dynamic, how to create applications using JavaScript, and you learn how to create data-intensive applications, applications that display data from a database, insert data, modify data, then you need to learn a front-end framework.

Front-end frameworks let you create applications in the browser more easily than using plain primitives offered by the browser to JavaScript. So you can learn the most popular one, which is React, or other ones, depending on your preference or what your friends are doing, or you choose just based on what other people you look up to use.

For example, you can use Svelte, you can use Vue, Solid, or other ones. And the important thing is that you find the one you like and then you just create projects and projects using it. On top of the frontend library typically you have meta frameworks like Next.js, Remix, and Tanstack Start.

They provide very useful things for those building applications on top of it, like routing, server rendering, and so on. There is an entire ecosystem of tools to learn. If you talk about React, for example, you have things like React Router, React Query, server components, state management libraries. There is a ton of stuff to learn.

It’s never-ending. When you reach this stage, you just learn new things all the time, but before you need to learn everything I mentioned. So now you’re basically just building on top of existing knowledge you have, knowledge that will serve you for years.

Things like React or frameworks or libraries change quite often because tools progress, but fundamentals like HTML, CSS, and JavaScript are mostly timeless.

So, this was the path to learn web development as I have it in my mind.

…did I miss anything?

This is also what I teach in my coding bootcamp, obligatory mention, which is a cohort course - you can find all the information about the next cohort if you are interested on the website bootcamp.dev