How To Become Frontend Developer: Step-by-Step Guide In 2022

Web development is one of the most demanded industry skills today. If we take a look at downloads of popular packages like express, react, or jquery, you’ll see over the last 5 years, the common thing between them is their usage is increasing, rapidly, every year.

In fact, the StackOverflow survey for 2020 contains “full-stack” and “frontend” as two of the top 3 developer professions in the world right now

Therefore, it is clear that web development today is a great skill to have. In this blog post, let us look at what you need to do exactly to become a frontend web developer in 2021 and beyond.

The problem

The problem with the web right now is the information overload and noise. jQuery, Angular, Ember, Vue, React, Next.js, Nuxt.js, TypeScript, Sass, Webpack, NPM, Yarn, ESbuild, snowpack, …! There are so many things, so many tools, so much you can learn – that often it becomes discouraging to even start.

Then there’s the point of what is relevant today, what will be relevant 3 years from now, etc. Let us clarify a few things in this blog:

You don’t need to learn everything

A common misconception is that you need to learn everything to be a great developer. This is completely false.

You need to own a “complete” tech stack. A complete tech stack is a stack using which you can create almost any project you’d like.
You need to be aware of most, if not all popular tools in the ecosystem. Note, that this does not mean you need to know how to work with them. But you should know they exist.

You need to bet on a stack

Angular vs React vs Vue vs Svelte vs xyz. This discussion will never end. The truth is, every single popular framework/library out there is popular because people use it and they’re good at what they do.

You can try spending time with different technologies if you’d like. But my personal recommendation is not to switch major libraries/frameworks every month or two.

Sure, you can switch from React to Angular by watching a 4-hour course. However remember that there’s a certain mental model you need to develop when you’re working with technology, and that could take weeks if not months to get comfortable with.

Do not switch to the hottest technology in the market, stick to a tech stack you work with.

The framework to learn frontend web development in 2022

Alright. Now the big question. What do you actually learn from all the noise in the world? Let’s split the question into two parts – (What and How) to learn frontend web development. Both are equally important questions as you can save or waste a lot of time depending on the decision you take. Let’s start.

What to learn for frontend web development?

This is a no-bs list of things you should learn for frontend web development. Please note that this would be opinionated because my experience is heavy with these technologies (the platform you’re reading this on, codedamn, has been built with all of these technologies)

Internet fundamentals

This might come as a surprise to many. Most sites will recommend starting with HTML/CSS, but I feel even before that, you should understand how the internet and web work on a high level. What are HTML documents, how they’re sent from a backend server, what is DNS, what exactly happens when you type google.com in the browser, etc.

Of course, you should not need to go in-depth on any of the topics, but it provides a very solid understanding of things when you’re suddenly using dev-servers for development, slightly start shifting to the backend or try to debug network requests later in your journey.

We cover internet fundamentals in two learning paths on codedamn:

• Frontend web developer learning path
• Full stack web developer learning path

HTML5/CSS3

HTML and CSS are the fundamental building blocks of the web. There’s no doubt that this should be the first thing you should learn as a frontend developer.

JavaScript

JavaScript is super important for interactivity and anything you do beyond a simple static HTML/CSS landing page. It can be used extensively beyond the frontend too (in Node.js/Deno/TypeScript) therefore it is essential you get your fundamentals right with JavaScript.

We have a lot of JavaScript projects and labs in this free course on JavaScript on codedamn.

Some very important points:

• Make sure you learn about ES6+ syntax. Do not use var and even follow tutorials using them. They’re not needed in most cases. One way to check that is to try following tutorials done after 2017.
• JavaScript has some behaviors that might catch you off guard. For example, why 0.1 + 0.2 is not 0.3, or why null == undefined is true in JS. Remember, there are always reasons for these behaviors. You’re a google search away to understand such things.
• JavaScript is fundamentally an asynchronous and non-blocking I/O language. This means you should understand how some core parts of asynchronous things like Promises work in JavaScript.
• Learn about DOM API and understand it’s an API provided by your browser to your JS code to interact with your HTML/CSS.

Developer Tools

At this time, you should also start exploring how to work with devtools of your browser. I prefer Chrome devtools because they’re great for debugging and working with JavaScript and DOM. Irrespective of your choice, I would prefer building projects and debugging any issues you face using devtools, instead of staring at your code for hours.

Chrome devtools, just like any other tool in real life or a virtual product, would require a little training and you’ll have to spend some time to be maximum efficient with it. However, the time you spend learning browser devtool will pay for itself in orders of magnitude as your developer life goes on.

Here’s a great video course on chrome devtools to get you started.

Some important points:

• I recommend sticking to Chrome devtools because they’re super powerful.
• Learn about DOM manipulation, debugging network requests, setting breakpoints on events, jumping through sources, searching for code in your website assets, throttling network speed, and more.
• This will be ongoing learning, just like all other technologies. You should not aim to learn devtools at once, simply learn small but important things and move on. You will learn a lot more as you’re working with projects, etc.

Git

You need to learn a Version Control System (VCS), and it should be git. Git is a widely used VCS used by teams and companies to manage their codebases across employees. Git can be super complex to learn, but initially, your use case of learning git would be to get your code deployed on GitHub, or a similar site.

This is required because when you learn git, you can push to GitHub. When you are able to push to GitHub, you can integrate with many services like GitHub pages, Vercel, Netlify, etc. to create a live preview of your website/project. This live preview then can be shared with your friends, and family and even added to your resumes.

As you get employed or work with a team of 2+ developers, you’ll need git knowledge anyway. But even as a solo developer, it is of utmost importance as it makes your deployment cycle to a live website a breeze.

We have an amazing interactive Git course on codedamn you can check out.

Some important points:

• Git can get complex super quickly. Do not get confused with a lot of git commands. As a solo developer, you’ll hardly need anything beyond 5-7 commonly used commands.
• While point 1 is true, you should still understand the overall architecture of how git works, what branches are, what one means by remote repositories, etc. This is again, a solid framework of understanding that you should have.

NPM/Yarn

NPM and Yarn are the two most popular package managers for JavaScript. They both exist for the same purpose – managing dependencies in your codebase. A dependency is a package/software usually not developed by you/your team, but you can still use and integrate it inside your app. For example, a design system like bootstrap or tailwind CSS is a dependency.

If there’s any update to the dependency, a bugfix, or a security patch, the maintainer of the package updates it on the NPM repo, and you can update the package with your package manager. Alongside this, it also helps with a number of things you’ll find out when you learn about NPM and yarn.

Some important points:

• NPM and yarn are very close concepts-wise. When you learn about npm, you’ll also learn about package.json, lockfiles, why they’re needed, and more. All these things are transferrable to yarn v1 as package manager too.
• Therefore, do not stress a lot about what package manager you should learn. Learn anyone (like yarn), and you can automatically switch to another if your project requires it.

React

At codedamn, we bet heavily on React. Not because we feel like it is superior to others, but this is us following our own advice given at the top of the article – stick to a tech stack.

I worked with Angular.js in the past (2015 time), switched to Angular 2 – didn’t like it much, and then made the switch to React. Since then, I’ve been using React myself for almost any medium+ complexity frontend project.

React is an amazing library with tremendous community support. Any problem/bug you run in with React – chances are someone already did that mistake and asked a question on 1000 websites. Therefore, if you’re a good googler, you should not face any problem working with React.

You can get started with React for free on codedamn through a free React course.

Some important points:

• React looks simple on the surface, but it requires developing a mental model to work at scale. It’s not only about concepts and hooks, it’s also about how to architect your app, make it maintainable, choose the right libraries for the ecosystem, etc.
• React does not enforce any standard practices for common tasks, like network requests or UI. But we recommend the following options – react-query for network requests, tailwind CSS, or material UI for UI library.
• Do not learn in-depth about class-based components unless you have to work on a legacy codebase that requires you to learn about them in-depth. Class-based components are not the future of React. Run away from tutorials that teach you class-based components. Learn about functional components and hooks instead.

Module bundlers

Webpack is one of the most popular module bundlers that React uses out of the box right now. Again, you don’t necessarily need to learn webpack in-depth, but you should know about what webpack.config.js file is and what are the top 10 useful options in it, and what they can do.

ESBuild is also another relatively very very fast module bundler right now, but the plugin support for it isn’t great yet. As a beginner, you don’t need to worry about ESBuild yet.

Code Testing

Last but not least, you should also focus on code testing. I feel people should start with end-to-end testing because it seems easier and more intuitive as a reason for code testing, compared to snapshot testing or unit testing.

My recommended tool here is to use Cypress – which has a very friendly syntax to test your applications end-to-end i.e. your code will act as a user using your app and can pretty much perform any action your user can perform, but in an automated fashion saving your time and energy.

Practice! Practice! Practice!

One thing not explicitly mentioned in the blog post above is the fact that you need to practice a lot, all the time. Practice is the way to fit concepts in your brain. If you’re only watching videos, you are not learning.

How to learn frontend web development?

The above list is not an exhaustive list of topics, but definitely a solid start as a guide. Now the question is how do you learn front-end web development? Here, I have two options for you:

You want a structured learning approach with support and practice modules

The purpose of codedamn platform to exist is to solve this structuring, support, and practice. We have a full Frontend Web Developer curriculum of 50+ hours with over 60+ practice sessions including the following:

• Practice projects built-in
• Interactive learning (completing labs and challenges inside the browser)
• Video lectures by top industry experts

We always keep this curriculum up to date with industry standards with all the things mentioned in the blog post above and some more.

You want a free learning approach

If you cannot afford codedamn’s learning path above with money, you can spend your time on free resources instead. Irrespective of that, using these resources with codedamn learning path is also recommended.

• Use google, a lot, for learning and doubt clarification.
• Watch YouTube videos, but make sure they’re relatively new, especially with topics like JavaScript and React.
• Practice on your own, build projects, and deploy them online for people to see.
• Take up free courses on codedamn (we have a lot of 100% free courses too), like this html css course.

Conclusion

Time is money, in fact, sometimes more important than money. What you want to spend (or can spend), is up to you. But I’d recommend that even if not codedamn, spending money on your education to get acceleration and clarity on what you’re trying to achieve would definitely be worth it.

The average salary of a frontend developer is $100,000/year. In fact, a codedamn yearly subscription would pay for itself, probably in the first 10 days of your job as a frontend developer.