Frontend Developer Roadmap 2022

There hasn't been a better time to get into tech. Tech jobs are more in demand than ever.

According to PayScale and Upwork, the average base front-end developer salary in the US is $74K per year. Senior front-end developers earn a salary of $113K (PayScale). A mid-career front-end developer makes around $74K a year. A junior front-end developer with 1–3 years of experience has a salary of $49K. So, it's well paid for the job.

What is the frontend?

The internet has two parts. The frontend and the backend. The things we see and interact with within the browser is the frontend or the client-side (at least in the simplest definition). And the back end of a website is everything that goes on behind the scenes, from servers to databases, and much more. In a nutshell, a website's back end is everything the user doesn't see.

A birds-eye view of what to learn: View image (source: roadmap.sh)

Start with HTML & CSS. Then move to JavaScript and spend about 400 hours with JavaScript. JavaScript is easy to get started with, but hard to master.

HTML & CSS: Because the basics can be covered quite quickly, HTML is relatively easy to learn. In fact, you can learn the basics in as little as an hour! And once you understand the tags, you can even start creating your own HTML pages! CSS is used to style HTML. It's a bit harder than HTML.

After you have a basic understanding of HTML and CSS, don't waste any time and start building projects right away! You'll find building even a simple design harder at first. But keep building and building until you become so good with HTML and CSS, that you can even build a UI without even looking at the live preview. I recommend a maximum of 1 month for getting on an intermediate level with HTML and CSS.

I recommend Modern HTML & CSS From The Beginning (Including Sass) by Brad Traversy for getting started with HTML & CSS.

I also recommend Advanced CSS and Sass: Flexbox, Grid, Animations and More! by Jonas Schmedtmann for really advanced CSS.

JavaScript: JavaScript is the KIngpin of the web. It makes interacting with elements possible. It's a lot harder than HTML & CSS

The way to master JavaScript is to learn, build, repeat. After you get a good understanding of JavaScript, start building projects right away. Get out of your comfort zone and try to solve hard problems. You can start by completing 1 algorithmic challenge a day at Code Wars. This will improve your problem-solving skills. And programming is nothing but solving problems.

You can also take JAVASCRIPT30 by Web Bos as a challenge to sharpen your JS skills.

I recommend spending at least 400 hours with JavaScript and building 30-50 projects in 4-6 months. That's all it takes to become a master of JavaScript!

I recommend The Complete JavaScript Course 2022: From Zero to Expert! by Jonas Schmedtmann for getting into, and mastering JavaScript. You really don't need to take multiple courses on JS.

React: Today, ReactJS is the highly used open-source JavaScript Library. It helps in creating impressive web apps that require minimal effort and coding. The main objective of ReactJS is to develop User Interfaces (UI) that improve the speed of the apps.

At this point, you know that building big projects with vanilla JS is quite hard and annoying because of the application state and UI. As your state changes, you have to manually update the DOM to reflect changes. React solves this problem (and many others) in a good manner. This is what makes it suitable for developing large-scale web apps.

Once you get the hang of React, start building apps. Re-do some of your old JS apps with React or build new large-scale apps. 1-2 large apps with React is good enough to get really good at it.

I recommend The Modern React Bootcamp (Hooks, Context, NextJS, Router) by Colt Steele for learning React.

NextJS: Next.js is a React framework that enables several extra features, including server-side rendering and generating static websites. React is a JavaScript library that is traditionally used to build web applications rendered in the client's browser with JavaScript. Developers recognize several problems with this strategy, however, such as not catering to users who do not have access to JavaScript or have disabled it, potential security issues, significantly extended page loading times, and it can harm the site's overall search engine optimization. Frameworks such as Next.js sidestep these problems by allowing some or all of the website to be rendered on the server-side before being sent to the client. Next.js is one of the most popular components available in React. It is one of several recommended "toolchains" available when starting a new app, all of which provide a layer of abstraction to aid in common tasks.

All of this makes NextJS suitable for developing production-grade applications.

I recommend Next.js & React - The Complete Guide (incl. Two Paths!) by Maximilian Schwarzmüller for learning all of NextJS.

Don't Stop Learning: At this point, I've discussed the core technologies that matter for building good web apps. But there are other technologies that go along with the technologies above. Such as Redux for state management, Styled Components for styling, Apollo Client for making requests to a GraphQL server, SWR for fetching data and caching, etc. Always keep up-to-date with the industry.

Note: I'm not affiliated with any of the platforms I've shared links of.