Web Development Roadmap

Before you start learning the basics of Web Development you need to sharpen your axe and understand how a website and its individual parts work.

Most web applications consist of a frontend and backend, where the frontend consists of a GUI while the backend encompasses all processes and components that operate behind the scenes (generally a server and a database). It’s recommended to watch these 2 videos to learn what each of those are and their roles in a web application:

To start, it’s recommended to download an IDE/text editor—the place where you’ll be writing all your code. Most people should use VSCode (Download).

Part 1: Fundamentals

After this you can start learning. One of the most exceptional things about Web Dev is the sheer amount of resources available online to learn about the subject. As such, you can learn the fundamentals of Web Dev through an incredible open source resource: The Odin Project.

To learn HTML, CSS, and Javascript, the basis of all Web Development, all you need to do is complete—in it’s entirety—the “Foundations Course” of The Odin Project. It will help you start with Git as a method of version control, teach basic terminal commands, HTML, CSS, and Javascript in an easy to follow manner.

Once you finish the foundations course, there is more flexibility on what to do. The Odin Project will allow you to choose two paths, and it’s up to you what to choose, but it’s recommended to start the “Full Stack Javascript” route. Most of this part of the guide will focus on Javascript based Web Dev instead of something like Python or Ruby.

However, it’s not recommended to go through everything in that course as it’s redundant in most cases. If you have time, feel free to do so as the resources are excellent.

Part 2: The Frontend

For most developers, just HTML, CSS, and pure Javascript might be tedious to use. In such cases, we employ the use of frameworks.

There are a plethora of frameworks and libraries to use, and the ones you use is up to you.
Here is a table of common JavaScript frameworks/libraries:

If you don’t know where to start, it’s highly recommended to learn and use React for ease of use and popularity.

To get started with React, follow The Odin Project’s React Course. Here you will learn to setup Vite, a fast front end development tool, and learn the basics of React.

At the very least, the introduction portion of the React Course is recommended. If you are seeking a more visual and hands on approach, Scrimba is an absolutely incredible resource that allows you apply what you learned immediately in it’s own website through interactive coding exercises. However, it falls short sometimes when it comes to volume of content. It’s highly recommended to read up on missing parts in the Odin Project React course, as well as the official React Documentation.

You should also be exploring what other frameworks and libraries you can use in your project. Here are some commonly recommended ones and what they do:

These are only a few that you can use. If you want to find anything specific you can look for it.

The minimum i’d recommend are the following:

• Tailwind CSS (In my opinion, mandatory)
• A UI library: DaisyUI and ShadCN are highly recommended
• Typescript

Part 3: The Backend

Once you have a good grasp of Frontend Web Development, it’s time to start learning about Backend Web Development.

In most web applications, the backend consists of a server and a database. The database stores all the information used by the application while the server takes responsibility for routing and moving information between the front end and database.

However, even if this is the case for most applications, it’s much easier and more time efficient to use a BaaS that does everything for you. Moreover, it’s usually simpler to host (we’ll cover this more later). However, if you want more control over your backend, you might stick to choosing your own server side language and database.

If you choose the latter, The Odin Project can help you start learning how to use Node.js alongside PostgreSQL. If in doubt, check their respective documentation.

When choosing a BaaS there are some distinctions to make. The two main ones recommended are Firebase and Supabase, but the one you use is up to you.

You can use the following table to help you make the decision:

Firebase is recommended if you need your backend to work on the fly without much intervention, but Supabase is my personal recommendation as it’s more flexble and open source. You can’t go wrong with etiher of these so watch these videos to learn more about each and pick the one you like:

To learn each of these, simply visit their respective documentation.

Part 4: Deployment

When creating a web application, you’ll generally want somewhere to host a website so that people can view it through a domain.

Some free hosting services include the following:

Generally, it’s recommended to use Vercel as it’s easy to interface. However, the other options are all very viable so use the one that you find is most appropriate.