DEV Community

Cover image for 2022 Front-End Web Developer Roadmap With Resources
Chaoo Charles
Chaoo Charles

Posted on

2022 Front-End Web Developer Roadmap With Resources

This is my ultimate guide to becoming a front-end web developer in 2022 with resources.

There are a lot of free courses you can learn from. Below I have listed some of the best from YouTube. If you don't like learning with videos, I recommend you start your journey on freecodecamp

I have also compiled this guide in a video πŸ‘‡

Remember to subscribe to my channel for more. Join 4.5k+ others 😊

#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: 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 ⚑
  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 😍
  3. HTML/CSS: HTML and CSS is the backbone 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 πŸ–Œ
  4. CSS(Framework) - Bootstrap/TailwindCSS: 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 TailwindCSS.
  5. 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.
  6. JavaScript It's time for the big dog 🐢 JavaScript is the most important programming language of 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 πŸ’°
  7. JavaScript Framework (React, Vue, Angular, Svelt): There are many popular JS Frameworks so far. It will be confusing to choose one. Decide depending on company you want to work at or 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.
  8. Deployment (Netlify, Vercel, GitHub): You can take your application online for free using netlify or vercel.
  9. Frontend Mentor: Participate in Frontend Mentor Challenges as you apply for jobs. The challenges will help you to practice and learn further.

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

Check out my amazing portfolio: https://chaoocharles.dev/

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

Top comments (28)

Collapse
 
jemeni11 profile image
Emmanuel C. Jemeni

Great article but freecodecamp uploaded the JavaScript tutorial video about two years ago or so.

Here’s a video that was made six months ago on the same channel.

https://www.youtube.com/watch?v=jS4aFq5-91M&t=310s

Collapse
 
irwandi1980 profile image
yess

thank you for latest info

Collapse
 
chaoocharles profile image
Chaoo Charles

Thank you for sharing this 😊

Collapse
 
iammatengo profile image
Davis The Coding Apostle

Kenya to the world..Great article brother...

Collapse
 
chaoocharles profile image
Chaoo Charles

Asanti, umeona my channel? youtube.com/chaoocharles

Collapse
 
iammatengo profile image
Davis The Coding Apostle

Let me check it out..Hope it will help me master MERN Stack....starting from JS Basics

Thread Thread
 
chaoocharles profile image
Chaoo Charles

Follow this course, youtu.be/KNZZZ3pbqco

You surely won't regret it. But it's kinda long. You'll have to dedicate some time learning with it.

Thread Thread
 
iammatengo profile image
Davis The Coding Apostle

Thanks alot..The channel is very great and I wish you all the best as it grows

Thread Thread
 
iammatengo profile image
Davis The Coding Apostle
Thread Thread
 
chaoocharles profile image
Chaoo Charles

The problem with this one is that it's not complete, lol. I will try to complete it in 2022 though. There is a lot to cover, and I had to do some other stuff first.

Thread Thread
 
iammatengo profile image
Davis The Coding Apostle

So you recommend this one - youtube.com/watch?v=KNZZZ3pbqco - hope it starts from the basics

Thread Thread
 
chaoocharles profile image
Chaoo Charles • Edited

use the freecodecamp course from above to learn JS basics, then create some projects. You can use these videos by wesbos javascript30.com/

after that you can move to MERN stack using this: youtube.com/watch?v=KNZZZ3pbqco

JavaScript is huge so be consistent with learning it. After a few months you will understand most of the fundamentals and be able to create some apps.

Thread Thread
 
iammatengo profile image
Davis The Coding Apostle

Thanks for your time ...Let's catch up again soon

Collapse
 
olafem391 profile image
Π”Π°Ρ€ΡŒΡ

The article is very interesting, I have learned many new things! I work with Andrei Mishurenkov, he does web development, robotics, and he’s interested in technology in general. He also appreciated the article. Here’s his Instagram, I’d like to find like-minded people and talk to them about exciting topics! In 2022, I want to upgrade my skills to a new level of web development.
instagram.com/andreymishurenkov/

Collapse
 
yoanbello profile image
yoanbello

Great path but the js course is bΓ‘sic, don't have async and DOM

Collapse
 
huulamnguyen profile image
Liam

Thank you for your effort to combine all great tutorials.

Collapse
 
chaoocharles profile image
Chaoo Charles

You're welcome 😊

Collapse
 
juniori_1 profile image
Abdinajib Junior

Thank you endlessly. I saved your post

Collapse
 
chaoocharles profile image
Chaoo Charles

Welcome buddy!

Collapse
 
kianaemmert profile image
KianaEmmert

How can I improve the productivity in the text editor ? taweez for love marriage to agree parents

Collapse
 
chaoocharles profile image
Chaoo Charles

Fireship.io has nice productivity tips: youtu.be/ifTF3ags0XI

Collapse
 
kirzin profile image
0xKirz

thnx sir

Collapse
 
chaoocharles profile image
Chaoo Charles

Welcome 🀝

Collapse
 
suhakim profile image
sadiul hakim

Tnx

Collapse
 
chaoocharles profile image
Chaoo Charles

Hey, you are welcome 😊

 
chaoocharles profile image
Chaoo Charles

You're welcome 😊