development resources

My Web Development Roadmap

By Wilver Salazar • 1/18/2024 Project random

Hiya! I’m back here to share with you my current Fullstack Roadmap!

I updated it a bit, but even though, it’s still a Work in Progress, so come often and check it out!

As you may know, I’m actually a Frontend Dev. However, I’ve been thinking about a “decent” roadmap to become a Fullstack Dev.

Also, please note that my roadmap is not the best, and of course you don’t need to follow it. I know I have to improve it a lot and it’s missing a lot of content.

You can give me some feedback about it too…

Now, let’s start.


♦ English

(Done)

I’m not sure if you know this already, but my native language is spanish.

Now, learning english is pretty important. It could seem pretty obvious considering the fact that this blog is actually written in english, but… yeah 😅 not the most obvius thing for some spanish people.


♦ HTML/CSS

(Done)

Essential things to become a Web Developer. HTML and CSS as bases, so we get the first steps done.

I’m not gonna lie, I invested a lot of time on this… and still there’s a lot of stuff that I still don’t know! Of course I’ll keep learning.

It’s fun!


♦ JavaScript - Basic Syntax and DOM

(Done)

I could’ve done this before, but playing around with CSS and SASS was way too funny, so I did that and learned Git before JavaScript…

The idea is simple: get the basics, know the DOM, manipulate it and you’re good to go. You don’t really need to be an expert, since JavaScript Frameworks will do that for you. However, it’s still better to actually know to it works in vanilla JavaScript instead of relying on frameworks all the time.


♦ Git and GitHub

(Done)

I know, I kinda skipped the previous step, BUT can’t help it. I started learning Git when I was learning CSS.

Git is one of the most important tools to know as a developer. It allows you to have your project versions organized, so if you make one (or a lot) of mistakes, you can go back one version and fix it, or change it…

It will also help you a lot to go with an efficient workflow, and it’s an essential tool when you work with a team.


♪ Project - Static Web (Optional)

(Done)

As it says there, this is optional, but I recommend a lot doing it, since it helps a lot to practice everything you’ve learned so far. And trust me, you’ll learn even more by doing projects, you’ll even notice that you were wrong on some things.

I kind of rushed this step during my first week, and well, this is what I got: SkyDead News Page a simple landing page, and it still has a few problems, but honestly, since it was the first page, I’m kind of satisfied about it all things considered.

Maybe one day I could make it way bigger than it is right now, or I could even make a new version of it…


♦ JavaScript - Fetch and Promises

(Work In Progress)

Yes, JavaScript again. This time we’ll go deeper into it by learning how Fetch works, and of course the Promises are very important.

That’s the point where you learn how to use an API, and of course you’ll learn what an API is, so if you don’t know it yet, you will now.


♦ JavaScript Frameworks: React/Angular/Vue

(Work In Progress)

Alright, the time has come to choose one of these…

You can choose whichever you want. Personally, I go with React which is the one I’m currently using.

As I said before, these frameworks will do the DOM manipulation for you, but still it’s a good idea to know how the DOM works.


♦ TypeScript (Optional)

Even though this is an optional step, I highly recommend you to learn TypeScript. It will help you A LOT to prevent some problems.

TypeScript also helps you making bigger projects, and so they can be easier to maintain. Definitively a good tool to learn.


♪ Project - Web using React/Angular/Vue and Fetch

This step can be considered “optional” if you’d like, but honestly, it’s really important to build projects so you can practice a everything you learn. And it could be useful for your portfolio…

This project would be one of the most important ones towards Frontend, since you should know by now how to use a JavaScript Framework, fetch and how to use an API, so it’s very important to do it in my opinion.

As for ideas of what to do, that’s up to you 😆


♦ Package Managers

(Work In Progress)

Well, this step is kinda optional, but I recommend you getting at least a basic idea of how a Package Managers works.

Most common Package Managers are npm and yarn as far as I know. But I’ve been using pnpm and bun too.


♦ CSS Architecture

(Work In Progress)

Honestly, this is apretty important thing to know in my opinion. Even if you use frameworks, it’s always good to know vanilla stuff, and tha’s when an architechture shines.

Personally, I tend to use BEM, but you can use the one you like the most.


♦ CSS Preprocessors (Optional)

(Work In Progress)

Well, you could skip this, but it’s pretty good to know it.

I used to go a lot for SASS and I really enjoy using it, but nowadays I’d go for PostCSS.


♦ Modern CSS

(Work In Progress)

Alright, this is really useful, and as a side note, you might learn this while learning one of the JS Frameworks…


♦ CSS Frameworks

Ok… This step is a bit… “messy” for me… I don’t like CSS Frameworks that much, honestly. I rather do it myself, but I know that CSS Frameworks are pretty useful tools.

As for options, you have Tailwind which is the one I like the most, ChakraUI, MaterialUI, Bulma… even Bootstrap… but I don’t like that one. No. NO. NO! I REFUSE to use Bootstrap!


♥ Frontend Developer!

Well, once you’ve completed all of these steps, you could say you have a pretty decent Frontend knowledge.

So now, we can go for Backend if you like, so you can follow my roadmap if you feel like it.


♦ Choose a language

One of the most important first steps for Backend…

You have some options… NodeJS, Java, PHP, Go, Python…

I’m actually still considering it… I’m not sure, but I’m thinking about going for NodeJS, or maybe Python…

Anyway, once you choose your language, you’re good to go.


♦ SQL Databases

The time has come! You now have to learn Data Bases.

You can either use SQL or NoSQL, but that’s up to you and it’ll depend on the job you get. However, we’re talking about SQL in this part, so yeah.

Personally, I think I’ll go with PostgreSQL, but I’m also liking SQLite.


♦ NoSQL Databases (Optional)

This step is optional to me because my plan is to learn SQL, but if you don’t go for SQL, you can learn MongoDB or any other NoSQL DB.

Also, please note that even though my plan is not to use NoSQL DB, I still recommend to learn them.

In my opinion, it doesn’t really matters which one you choose, because once you learn one, you can learn any of them without too much effort.


♦ Learn more about APIs

Well, while you were in the Frontend section, you should’ve learned about APIs, but now you have to go a bit further.

Knowing what an API is and what they do is essential, so go for it!


♦ Project - Make your own REST API.

This step is one of the most important ones in my opinion.

Making your own REST API will help you a lot to practice what you know about Backend, and it will help you a lot in your future jobs.


♪ Project - Web using React/Angular/Vue and your own REST API.

Finally! The biggest project so far.

This is the most important project in my opinion, and since you’ll be using your own REST API, you’ll be applying everything you know, so when you manage to do it, you’ll be ready to face the world 😎


♥ Backend Developer!

Now you should have a kinda decent knowledge for being a Backend Developer.

Therefore, you could now call yourself a Fullstack Developer.

Now, you can search for Trainee or Junior jobs as Fullstack Dev.


Well guys, that’s all for now! That’s my Roadmap so far.

I’ll be updating this post if I change or add something, so you can come and check it out!

As always, you can find me in my Discord to give me some feedback!

You can also Buy me a coffee!

See you next time! 👋🏻