Web Development Roadmap 2024

Despite the rise of AI and significant layoffs across (almost) all industries, it's still a great time to become a web developer - as I also discuss in two podcast episodes.

Web developers are still in high demand and there's no better way to get into coding.

Here's how I would become (or grow as) a web developer if I had to start over again.

You must understand the essentials - i.e., how the web works and how a website ends up on the screen.

Without that, you'll have a hard time building websites.

You must understand that a website is, in the end, an HTML document that's sent back by a server that handled the HTTP request that was sent by the browser (the client).

Once you have that understanding, you're ready to dive into the three core languages every web developer must know (at least the fundamentals):

• HTML (for the page structure & content)

• CSS (for the styling)

• JavaScript (to add interactivity and client-side logic)

By the way, our "100 Days of Code - Web Development Bootcamp" course can help you with that! It teaches you all those basics and much more in 100 days (or less, if you're quick)!

You'll also need a code editor that helps you with catching errors, formatting code etc.

My clear recommendation here is Visual Studio Code since it's a highly performant, extensible and free-to-use editor.

Just HTML, CSS & JavaScript won't be enough though. In order to build truly dynamic websites that can also store data, you'll need code that runs on the server that serves the website.

Because that code can then also interact with a database that stores the data.

You got different options here, but my clear recommendation is to learn Node.js. This is not a programming language but instead a runtime (i.e., a tool) that allows you run JavaScript outside of the browser.

Hence you can leverage your existing JavaScript knowledge to write backend code!

There also are alternatives JavaScript runtimes: Deno and Bun.

But Node.js is the oldest, most stable and popular one - hence I recommend going with that.

Alternatively, you could also explore other possible backend languages - e.g., PHP or Go.

Node.js is great, but it'll likely not be enough.

Because writing "pure Node.js code" can quickly become annoying, cumbersome and error-prone.

Things get much easier when using a framework - i.e., a "code package" that you install into your code base that provides various utility functionalities.

Express.js is the most popular framework for Node.js, hence I recommend learning that as well.

Indeed, you don't need to spend too much time on "pure Node.js" - instead, pick up Express.js early.

Once you're a bit more experienced, you can also explore Express.js alternatives, but to get started, I recommend sticking to Express.

Having a backend programming language (and framework!) is important and useful but not enough if you want to store data.

You need a database for that - i.e., a dedicated tool that is optimized for handling (large amounts of) data.

Again, you got various options, but the most popular type of database is SQL, hence I recommend going with that.

For example, MySQL is a SQL-based database engine you can get started with for free. SQLite would be another great alternative, since the setup process is much easier (you simply create a local file).

We also got an in-depth SQL course which will teach you everything you need to know to get started with SQL databases!

SQL-based databases are popular, but there is an alternative: NoSQL databases.

One main difference is that NoSQL databases have no strict table schema and offer higher flexibility. This can be both an advantage or disadvantage.

As you progress as a web developer you should absolutely also explore NoSQL databases - MongoDB is one of the most popular options.

When it comes to connecting frontend and backend, you again got options.

If you learned how to work with Node.js and Express, you most likely already worked with so-called "templating engines" to dynamically render HTML code on the server.

That's a great approach!

But there also is a popular alternative: Having a decoupled frontend and backend.

In that case, you'd typically build your frontend as a standalone application (a so-called "Single Page Application") with help of a library like React, Angular or Vue.

Those standalone frontend web applications would then take care of updating the UI. They would do that with help of data that's fetched from the backend "behind the scenes".

For that to work, the backend would be built as a web API that does not return HTML code but instead data (typically in the JSON format).

The most common form of web API is a "REST API", though you could also build your backend as a GraphQL API.

When building more advanced frontend applications (no matter if they're decoupled or not), you probably also need more complex styling (to make them look good).

You can either learn more about CSS or - if you don't like CSS - use a CSS framework.

Popular choices would be Boostrap CSS or - my recommendation - Tailwind CSS.

At this point in your learning journey, you should also make sure that you've learned about more advanced web concepts like requests and responses, caching or user authentication.

You should also explore security concepts like CORS, CSRF, XSS, SQL injection etc.

Besides building decoupled frontends and backends or backends that render frontend HTML code, you can also build tightly integrated fullstack apps with help of metaframeworks like Next.js for React, Analog.js for Angular or Nuxt for Vue.

The idea behind those frameworks is that you can get the best of both worlds: Build highly interactive, dynamic frontends that behave like Single Page Applications which seamlessly integrate with the backend code.

It's not a must-use but can be a very attractive alternative to the other options.

Of course, as a web developer, you probably want to write code.

But you should also be aware of tools that can reduce the amount of code you have to write - at the expense of control, of course.

I recommend exploring popular content management systems (CMS) like Wordpress which allow you to manage content and build a website without writing any code.

You should also explore backend services like Firebase or Supabase which handle some (but not all) of the complexity of a backend. With those services, you'll need to write less code but you'll have more control and configurability than when using a CMS.

As a web developer, you build websites - probably not a surprising fact.

But those websites are worthless if they're just sitting on your machine.

That's why you also must learn how to deploy your websites - i.e., how to get them onto some server (some computer) out there in the web.

Thankfully, there's a broad range of hosting providers to choose from.

For example, Vercel or Netlify make getting started easy. AWS or Azure on the other hand would be service providers that are more complex to get started with but also give you way more configuration options and services to choose from.

As you write code, you'll eventually mess something up. You might want to go back to some older code state.

That's exactly what Git allows you to do. A free-to-use tool that can be used to create code snapshots ("commits").

It's therefore a tool every developer must know.

And it becomes more powerful when combined with GitHub - a service you can use (also free) to store your Git-managed code "in the cloud" (i.e., on some server, not on your local machine).

Using GitHub ensures that your code survives, even if your local machine crashes and breaks.

And it helps with collaboration with other developers.

By the way, since these are such crucial tools, you might want to explore our Git & GitHub course to learn all about them!

To take things a step further, you also might want to take a look at GitHub Actions - a service provided by GitHub that allows you to set up automated workflows that are, for example, kicked off whenever you commit a new code snapshot.

This allows you to, for example, automatically deploy a new version of your website once you save a snapshot.

One problem you might face when deploying websites, is that the environment running on the target server is likely not the same as on your local machine.

Therefore some configuration might be needed.

To simplify that process, you could use Docker - a tool that allows you to put your code and all the tools required to run it (including the operating system) into a so-called "container".

You can then deploy that container and hence have the guarantee that your code will work without issue.

As you become better and better as a developer, you should focus on writing high-quality code.

A tool that helps with that is TypeScript - a superset to JavaScript that adds static typing.

TypeScript can help you catch certain errors earlier than if you were using just JavaScript.

In addition, you should learn about automated testing and tools that can test your code for you - so that you can make sure that you test a broad variety of scenarios as you introduce changes to your code.

It's tools like Vitest, Cypress or Playwright you should explore to write such tests.

Of course, there would be more tools, languages, libraries and concepts that could be mentioned here.

You'll discover them automatically at some point though, trust me.

In this article, I focused on outlining the key tools and concepts I would recommend learning.