Frontend Roadmap in 2022
From A to Z, this is what you need to become a modern developer
You want to become a frontend developer, so you browse the web for clues on starting, but there are more articles on how to become one than episodes in the “Young and Restless” TV series.
This post serves as an introduction to what you need to learn. If you want the full picture, you can check this out. Very long, but also very useful! Still not something I would recommend to a beginner, because it’s very lengthy and it scares most people.
But FE development is not scary at all. If you ask me, it’s the easiest and most pleasant one, because your changes are instantly seen on a monitor. And you learn just one programming language: Javascript!
Or Typescript… or Coffescript… but enough of this, let’s get down to business!
Let’s talk about the big 3: HTML, CSS, JS
HTML
It stands for HyperText Markup Language. So yes, not a programming language!
A good comparison would be to think of the user interface as a human body. Your body has bones, muscles and skin. Well, a little bit more than that, but we will keep this simple.
HTML is the bones part. Basically it’s the structure of your website. Here you need to learn your tags: <div>, <h1>, <p>, just to name a few. You also need to understand how the <head> and <body> tags work. To give you an example, if you would write:
Save this in a .html file, open it in Chrome and voila! You just made your first website!
Now, allegedly, it’s not the best one you created, but it’s a good first start. It’s the equivalent of “Hello World” programs.
Let’s style it a bit!
CSS
Standing for Cascading Style Sheets, it is responsible for the styling of your website. Going back to our human body analogy, it is the skin part.
Colors, fonts, sizes. Those are the things that CSS solves. You can add different attributes to the tags, for instance, class .
This is by no means a tutorial, so take this with a grain of salt, but this is how the code would look to make the text red (more or less, you need to create the file, add it to the <head> tag, but you got the gist).
The idea being that this is what CSS does and this is what it is used for.
After you learn the basics, you need to start learning some CSS frameworks, such as Bootstrap or TailwindCSS. I really recommend Tailwind, because you learn more about CSS.
We are still missing one vital piece for everything.
Javascript
The most loved and hated programming language. The only language you can use for web (UI wise).
It is responsible for the muscle part. This is where the functionality of the website is happening: menus changing left and right, getting data from the server, etc.
HTTP Requests, DOM manipulation, shadow DOM and event bubbling will become your friends.
Javascript is by no means a simple language. I mean, maybe if you compare it with C# or C++, then yes. It is very simple. But like every language, it has its quirks.
Ok, so we learned HTML, CSS and JS. What’s next?
Your Framework
Maybe you already know of Angular, React and Vue. Those are the big 3 players in the UI framework space. There is also Svelte, but there are very few jobs in it, because it’s pretty new.
You can do a website without a framework, but they exist to make our work easier.
If you’re looking for the easiest one, I would say…
Choose REACT!!!
Why would I say React when everyone says Vue is the best one for beginners? It’s due to the fact that React is almost pure JS. Most tutorials and jobs are for React. And since you know JS very well at this point, JSX is a breeze.
Don’t fret! You can jump between frameworks after you learn how one of them works. They are very similar. Some packages may differ, but that’s about it.
Typescript
Back 2 minutes ago when I said you only need Javascript for the frontend, that wasn’t a lie. But it also wasn’t the truth. Most developers code today in Typescript.
TS (for short) is a super-set of JS. This means that it compiles to normal JS, but we get the addition of types in our files.
let ourNumber= 1“ourNumber” should be a number, right? Let’s see what happens when we add a string to it.
So it was a number, but when we added a string to it, it became a string as well. Now, this happens in a few other languages as well, but what we want to do is being able to catch “errors” like those before we ship to production.
Now let’s try the same thing, but in TypeScript.
Ok, now this is epic. Because it infers types, we actually know we shouldn’t be able to add a string to a number. And this is why we want to use TypeScript. It improves the stability of the code before you build your project.
What’s next?
There is a lot to cover. The roadmap for a developer is no straight arrow. There are package managers, unit testing, integration testing, end-to-end testing, git, server-side rendering and so much more. When I started learning, I first started with HTML and CSS, then I went straight to React.
Did I know Javascript well? No.
But it was fun!
And this is the most important thing, I can’t stress this enough! You will be overwhelmed in the beginning by how many technologies there are to learn.
Instead of taking the “correct” way of learning, do what’s most interesting for you. Start with HTML, CSS, then maybe go learn npm. Or maybe you start with JS. The possibilities are endless.
In the end, you will (most probably) use most of the technologies you learn. So don’t sweat it!
Conclusion
Thanks for reading until this point! I hope what I shared will help you on your journey to become a frontend developer.
I would also love to know your opinion about this blog article! Drop a comment, don’t be shy.
If you enjoyed my content:
You’ll probably like these, as well:
