Roadmap to becoming a Front-end Web Developer in 2022
Tags: webdev, beginners, career, programming
Published: 2022-03-10 20:04:23

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 it. 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.

## #100daysOfCode
I highly recommend that you join the #100DaysOfCode challenge on Twitter. This challenge will help you to learn in public by coding for not less than an hour each day and sharing your progress on Twitter. You will become more consistent this way and you will also surround yourself with a good community of developers. Learn more about the challenge on the official website: 
[100daysofcode.com](https://www.100daysofcode.com/)

## 1. Command-line/Terminal:
Knowing your terminal well will give you full control of your computer and workflow. As a front-end dev, you will need the terminal to work with git, install dependencies and run the application. You will also feel like you have super-powers while working with a terminal ⚡
FreeCodeCamp - Command-line Crash Course: [youtu.be/yz7nYlnXLfE](https://www.youtube.com/watch?v=yz7nYlnXLfE&feature=youtu.be)

## 2. Code Editor (Visual Studio Code):
A code editor is simply a tool that you will be using to write your code. I personally work with visual studio code and I love it 😍

Visual Studio Code Tutorial for Beginners - 
Introduction: [youtu.be/VqCgcpAypFQ](https://www.youtube.com/watch?v=VqCgcpAypFQ&feature=youtu.be)

## 3. HTML/CSS:
HTML and CSS are the backbones of web development. They are also easy to learn but require a lot of practice to master. You will need HTML to add webpage content and CSS to style the content. CSS is like an art, become creative and have fun with it 🖌 design course

HTML and CSS Tutorial - 
COMPLETE Crash Course!: [youtu.be/D-h8L5hgW-w](https://www.youtube.com/watch?v=D-h8L5hgW-w&feature=youtu.be)

## 4. CSS(Framework) - Bootstrap/Tailwind CSS:
A CSS framework simply makes it easy and fast to build UIs. Have a solid understanding of CSS before you start using a Framework. In 2022 I recommend Tailwind CSS.

- Bootstrap - Design Course - Getting Started with Bootstrap 5 for Beginners Crash Course: [youtu.be/1nxSE0R27Gg](https://www.youtube.com/watch?v=1nxSE0R27Gg&feature=youtu.be)


- Tailwind CSS - Design Course - Build & Deploy a Personal Portfolio with Tailwind CSS 2022 Edition: [youtu.be/Vp6GC3jKG20](https://www.youtube.com/watch?v=Vp6GC3jKG20&feature=youtu.be)

## 5. JavaScript:
It's time for the big dog 🐶 JavaScript is the most important programming language on the web. It's also so huge, I recommend learning the fundamentals first and then going into advanced topics after learning at least one JS framework. Be patient with JavaScript and practice with projects. At the end of the day, it will start paying your bills 💰

FreecodeCamp - Learn JavaScript - Full Course for Beginners: [youtu.be/PkZNo7MFNFg](https://www.youtube.com/watch?v=PkZNo7MFNFg&feature=youtu.be)

## 6.JavaScript Framework (React, Vue, Angular, Svelt):
There are many popular JS Frameworks so far. It will be confusing to choose one. Decide depending on the company you want to work at or the job description. If you don't know which is which, go with React. It's popular in terms of jobs. Vue is loved by most developers though.

- React - Academind - React Crash Course for Beginners: [youtu.be/Dorf8i6lCuk](https://www.youtube.com/watch?v=Dorf8i6lCuk&feature=youtu.be)
- Vue - Traversy - Vue JS Crash Course 2021: 
[youtu.be/qZXt1Aom3Cs](https://www.youtube.com/watch?v=qZXt1Aom3Cs&feature=youtu.be)
- Angular - Traversy - Angular Crash Course 2021: [youtu.be/3dHNOWTI7H8](https://www.youtube.com/watch?v=3dHNOWTI7H8&feature=youtu.be)
- Svelt - Traversy - Svelte Crash Course 2021: [youtu.be/3TVy6GdtNuQ](https://www.youtube.com/watch?v=3TVy6GdtNuQ&feature=youtu.be)

## 7.Git and GitHub:
At this point, you can dive into git and GitHub. They will help you to track changes, share projects, and even collaborate on open source projects. Traversy Media - Git & GitHub Crash Course For Beginners: [youtu.be/SWYqp7iY_Tc](https://www.youtube.com/watch?v=SWYqp7iY_Tc&feature=youtu.be)

## 8.Deployment (Netlify, Vercel, GitHub):
You can take your application online for free using netlify or vercel. Netlify - Programming with Erik - Deploy Your Website In Minutes With

Netlify: [youtu.be/gaC-l9MAE9Q](https://www.youtube.com/watch?v=gaC-l9MAE9Q&feature=youtu.be) Official Website: [netlify.com](https://www.netlify.com/)
Vercel Official Website: [vercel.com](https://vercel.com/)

## 9.Frontend Mentor:
Participate in Frontend Mentor Challenges as you apply for jobs. The challenges will help you to practice and learn further. Official Website: [frontendmentor.io](https://www.frontendmentor.io/)

Note that on the above list I didn't mention some popular technologies such as SCSS, Next.js, Typescript, and others. I recommend you learn the above first and then you can explore the rest after having a solid understanding of the above

Was this post helpful? Let me know in the discussion section below. What are you planning to learn in 2022?