17
The complete guide to becoming a frontend web developer in 2021
Today, it is clear that web development is a great skill to have. In this blog post, let us look at what do you need to do exactly to become a frontend web developer in 2021 and beyond.
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:
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, this does not mean you need to know how to work with them. But you should know they exist.
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 watching a 4 hour course. However remember that there's a certain mental model you need to develop when you're working with a 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.
Alright. Now the big question. What do you actually learn from all the noise in the world. Let's split the question in 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.
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 heavily with these technologies (the platform you're reading this on, codedamn, has been built with all of these technologies)
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 works 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 of 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 backend, or try to debug network requests later in your journey.
HTML and CSS are the fundamental building blocks of web. There's no doubt that this should be the first thing you should learn as a frontend developer.
Some very important points:
- Make sure you learn about modern HTML5 syntax
- Try to learn about semantic tags in HTML5 instead of sticking everything inside divs
- Learn about modern layout practices in CSS (flexbox, grid)
- Learn about modern CSS syntax and have a clarity on selectors, media queries, properties, values, etc. - the fundamentals.
- Do not stick with older and deprecated syntax ( center tag, marquee, etc.)
- Do not spend a lot of time learning about old layout practices in CSS with floats, etc.
- Do not try every cutting edge CSS3/4 feature. A lot of them might not be supported in browsers yet. Stick to the widely supported CSS3 features at most.
JavaScript is super important for interactivity and anything you do beyond a simple static HTML/CSS landing page. It can be used extensively beyond frontend too (in Node.js/Deno/TypeScript) therefore it is essential you get your fundamentals right with JavaScript.
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.
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.
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 an 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, family and even added on 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.
Some important points:
- Git can get complex super quick. 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 does one mean by remote repositories, etc. This is again, a solid framework of understanding that you should have.
NPM and Yarn are 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 any one (like yarn), and you can automatically switch to another if your project requires.
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 in 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 a 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.
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, choosing 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.
Webpack is one of the most popular module bundler 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.
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 like 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.
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.
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 frontend web development? Here, I have two options for you:
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 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.
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 react query course.
Time is money, in fact, sometimes more important than money.
What you want to spend (or can spend), is upto you. But I'd recommend that even if not codedamn, spending money on your education to get an 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.
17