Roadmap to become a Web Developer in 2022

Web Development is always evolving and every year in January I like to take a step back and re-evaluate and observe the ecosystem.

The question is: where should beginner Web Developers start in 2022, so they will learn skills they’ll find jobs for?

Has the map changed? Is it different from one year ago?

Changes seem to take forever, but they can be subtle and sometimes things radically change from one year to another and you don’t even realize.

So I started working on a post to guide you towards navigating the Web Development space.

It’s also useful for developers trying to keep up with the ecosystem and stay relevant. Is there anything new you should absolutely learn?

Let’s get into it.

But first, a note. This is a highly opinionated roadmap. It’s not one of those roadmaps that list 1000 different technologies and just leave you in tears and desperation.

Let me pick for you the best tech and trust me so you can quit analysis paralysis and go on with your progress.

In Web Development we have 3 paths:

• Frontent developer
• Backend developer
• Full-stack developer

The line between those roles is a bit blurred. I will focus this post on full-stack, which is my favorite specialization - in which you don’t really specialize in frontend or backend, but you’re able to create anything and everything that shows up.

Aggressively ignore

Let’s first start the roadmap from what we’ll ignore.

In this roadmap I will ignore more specialized niches like UI/UX engineering, accessibility, and other important topics. Those are entirely different professions with their own learning path.

You can’t possibly start by assuming you need to learn everything.

Aggressively cut.

We’ll ignore mobile development done with Web technologies. That’s a completely different field. We’ll also ignore any trend that’s not Web Development but it’s a different kind of development specialization like AI, data science, web3, etc etc etc.

Deep focus on 5 technologies

I recommend to deeply focus on a core set of 5 technologies:

HTML CSS JavaScript React Next.js

Those 5, in order, are the 5 things you need to master.

You can count them on one hand.

3 of them are fundamentals. HTML, CSS, JavaScript. You can’t avoid them. Those are the tools of the trade.

HTML defines the content CSS defines how we want the content to look JavaScript defines the behavior

React is the first real choice I’ve made here.

What is React? React is a technology that simplifies creating user interfaces.

It makes our life easier in many different ways.

There are no alternatives to HTML, CSS and JavaScript, but you could choose something else instead of React, like Svelte, Vue, Angular, but I chose React.

But React is super popular, it has a history and an heritage that allows it to be the de-facto standard. It’s used so much that you can find everything, every library, lots of tutorials and courses, and help when you need.

You can bet on an alternative, but you can also just look at the job market and opportunities that come with React and pick that.

We need a final piece now. A web application framework.

We picked React so we need to pick a web application framework that works with React.

On top of React and the HTML/CSS/JavaScript trio I pick Next.js to make it easy to serve React-based websites and applications, and integrate backend and frontend seamlessly.

So, 3 core technologies that are common for everyone - HTML/CSS/JavaScript, on top we have a super popular UI library - React - and on top of that, a super popular framework: Next.js.

Now there’s more stuff to add to those 5 choices, but you need to start somewhere.

With those 5 choices made, you’ve already eliminated doubt and fear of missing out on a ton of other things that might distract you on your path to become a Web Developer.

Let me double down on this elimination. Ignore TypeScript, at least in the beginning. I know you’ll hear about it all the time, but it’s not essential in your journey and it’s something you can add at any point in the future.

JavaScript lets you keep things much simpler, which is essential to stay motivated.

Start with HTML and CSS

At this point, start learning and start experimenting. Learn HTML, create web pages. Read my HTML Handbook. Do tons of practice. Codepen is a great tool for this.

Just don’t get sucked into the “I did this with CSS” where people do impossible things with CSS. I have no idea how they do them, and that’s art (which is fine if you like it, just not useful for our journey).

As for CSS, learn the basics. Read my CSS Handbook. And immediately start learning Tailwind, which is a really practical and popular way to apply CSS to your pages.

CSS can be complicated. Tailwind makes it easier. Trust me, I “do CSS” since 20 years and with Tailwind I finally got things manageable on every project. And that’s what many other people found.

What projects should you create with HTML and CSS/Tailwind? Well, start from your hobbies and interests. Create random Web pages and see how they show up in your browser.

Create a page about dogs, about soccer, football, baseball, your favorite Netflix series, your favorite musician, whatever. The important is to experiment.

Don’t get too fancy with HTML and CSS/Tailwind. They are rabbit holes. There is a TON to learn about both. Get familiar with them, use them to get stuff done.

Get familiar with an editor like VS Code and the basics of the terminal and the Bash shell. Learn Git to version your code. It will save you a lot of time and headaches.

Add JavaScript

Now it’s time to learn JavaScript. Download and read my JavaScript Beginner’s Handbook.

HTML and CSS define the content and the presentation, while JavaScript is a programming language.

Using JavaScript we can start having fun.

The basics are a bit ..boring and can be confusing, as there is lots of theory and new concepts. But it’s the thing you’ll use the most in Web Development. So it’s essential to master it.

One thing at a time.

Work on simple projects, gradually add JavaScript to your pages.

With JavaScript you’ll see that you can add some level of interactivity to your pages. You’ll explore the DOM, which is the way browsers let us interact with elements on the page.

You’ll create your first form.

And after you create your first form, you’ll have the need to send the form data somewhere.

Imagine you built an email newsletter signup form. You want to send the email somewhere, so you can store it.

Node.js

It’s now time to learn how to create a simple backend.

Up to now we’ve worked on the frontend, which means thing that are shown in the browser.

When data is involved, we must create an API that listens on a particular address on a server, and you’ll send data to this address.

We do this by running JavaScript on the server with a tool called Node.js.

Node.js is how we run JavaScript programs on a remote computer.

One thing to note is that JavaScript is the only programming language that can run inside the browser, for historical reasons.

So inside the browser we don’t have any choice. But outside the browser, on a remote server, we could use any programming language. For example Python, Java, Ruby, Go. So why JavaScript?

Because you already know JavaScript. It’s much better to become 2x better at one programming language than learning 2 different languages at the same time.

And because by using JavaScript on both the frontend and the backend you can do really fancy stuff, as you’ll later see with Next.js.

Create a simple API with Node.js, and post your form data to it.

Databases

Now you’ll want to store this data somewhere. That’s where you’ll start working with a database.

There are many different kinds of databases. I recommend you pick PostgreSQL as it’s the most flexible and the one you can really use all of the time.

Tip: I’d ignore MongoDB at this point. Many tutorials use it but if you were to learn just one database to optimize how you spend your time, pick a SQL database - and while we’re there, pick the best SQL database, PostgreSQL.

Connect your Node app to the database and learn how to store and retrieve data.

React

Now it’s time to learn React, by reading my React Beginner’s Handbook, and start working on your first React application.

Start simple. Try to do the same things you did in HTML, but this time with React. Learn JSX, the “HTML of React”.

Learn Next.js

Once you learn the concepts, add Next.js into the mix.

Next.js is useful because React is a great way to create user interfaces but ignores, on purpose, many things like server-side rendering, serving dynamic data, routing, static site generation, code splitting, and lots of advanced concepts you’ll always need on any moderately complex website or web application.

You’ll realize what you need while building applications.

The Next.js Handbook is a good introduction to Next.js.

After you’ve reached this stage, you can start using Next.js to create basically everything. Learn how to create API routes so you don’t have to use Node.js directly any more, Next.js will take care of deploying your APIs in a “serverless” way.

Work on tons of projects

Work on tons of projects and gain confidence and experience. Keep iterating.

I run a bootcamp every year at https://bootcamp.dev where we work on 15 different applications.

Practice is everything. At some point following tutorials is not important any more. What matters is progressing on projects and learning how to solve problems as they show up.

Start building your portfolio of projects. Start with small projects, continue with more complex ones.

Share everything you do on Twitter, to make friends with other developers.

Learn how to debug, learn how to do testing, how to secure your applications. Master Git and how to deploy applications on Vercel and other cloud providers.

Go on and fail. Rinse and repeat.

Find your “north star” project. The thing that excites you to work on. Build your SaaS (software as a service). Build a product and sell it on your Next.js website. Create an ecommerce with Next.js. Whatever your north star is.

Stay focused. Ignore the fads and the “next big thing”.

Now you can choose if you want to become a specialist in a particular thing in this stack, or you want to be a generalist. Don’t hop to different frameworks, double down on what you already know.

Whenever you feel ready, you can search for a job, or you can create your own job. Create a software product and sell it independently. Start freelancing and advertise yourself on the Internet as a React / Next.js developer. Find a local company that needs a developer. Ask an agency if they need help. Get hired at a local company or start the interview process at a big corporation or FAANG. Find a remote job.

You’re a highly valued professional now. Companies have a deep need for people like you.

The sky is the limit.