This article is translated

The Complete Guide to Becoming a Frontend Web Developer in 2021

Codedamncom

Original address: codedamn.com/news/become…

Web development is a particularly needed skill in the industry today. If you look at downloads of popular software packages like Express, React, or jquery, you’ll see that they’ve grown rapidly every year for the last five years.

In fact, in the 2020 StackOverflow survey, “full stack” and “front end” are the top three trends in development.

So Web development is a great technology to learn. In this article, let me talk about what it takes to be a good front-end developer in 2021 and beyond.

The problem

One of the biggest problems in Web development today is “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 to learn — it’s easy to get frustrated when you’re getting started.

What I want to talk about today is “what technologies are going to matter today”, “what technologies are going to matter three years from now”, etc. Let me clarify a few things here:

You don’t need to learn everything

A common misconception is that you need to learn everything to be a great developer. That’s a big mistake.

  1. You need to learn a “complete” technology stack. A complete technology stack is a set of technologies through which you can create almost any project you want to create.
  2. You need to know most, but not all, of the popular tools in the front-end ecosystem. Note that this doesn’t mean you need to know how to use them. But you should know they exist.

You need to bet on a technology stack

Angular vs React vs Vue vs Svelte vs what other frameworks, this type of debate will never stop. In fact, every popular library/framework is popular because it works well in the right context and people want to use it.

You can certainly spend some time experimenting with different techniques. But I personally recommend that you don’t switch libraries/frameworks every month or two.

Yes, you can watch a 4-hour class and switch from React to Angular. But remember, when you use a technology, you need to build some kind of mental model. This means it can take weeks or even months to get used to a new technology.

You don’t need to switch to the hottest technology on the market, stick with the stack you’re on.

Architecture for 2021 Front-end Development learning

Okay, here’s the catch. What can you actually learn from noise? Let’s split the question into two parts – (What and how to learn) Web front-end development techniques. Both are equally important questions, because you can save or spend a lot of time based on your answers to both questions. Let’s get started.

Network Basics

This may come as a surprise to many. Most sites will advise you to start with HTML/CSS, but I think you should understand the higher-level web work model before doing so. What HTML documents are, how they are sent by back-end servers, what is DNS, what actually happens when you type Google.com into your browser, etc.

Of course, you don’t need to dig too deep into network knowledge, but if you suddenly want to develop with a development server, pay a little attention to the back end, or try to Bug a network request for the rest of your career, you’ll find that network knowledge provides a solid foundation.

HTML5/CSS3

HTML and CSS are the building blocks of the Web. Without a doubt, this is the first thing you need to learn as a front-end developer.

Very important point:

  1. Make sure to learn modern HTML5 syntax
  2. Instead of throwing everything into divs, learn HTML semantic tags
  3. Learn modern CSS layouts (Flexbox, Grid)
  4. Learn CSS syntax and have a clear understanding of selectors, media queries, properties, property values, etc. These are the basics
  5. Don’t obsess over outdated grammar (centerLabel,marquee, etc.).
  6. Don’t spend a lot of time learning outdated CSS layout practices (float related)
  7. Don’t try the CSS3/4 feature on every frontier. Browsers don’t support much yet. Focus on the widely supported CSS3 features.

JavaScript

JavaScript is extremely important if you want to interact with web pages, or if you want to create more than just static pages. JavaScript is also widely used outside of the front end (in Node.js/Deno/TypeScript), so learning proper JavaScript is a must.

Very important point:

  1. Make sure you learn ES6+ grammar. Don’t usevarEven though many tutorials will use it.
  2. Some of JavaScript’s behavior can feel overwhelming. For example, why does 0.1 + 0.2 not equal 0.3, or whynull == undefinedThis is true in JS. Remember, there are reasons for these behaviors that you can Google to understand.
  3. JavaScript is essentially an asynchronous non-blocking I/O language, which means you need to understand some of the core concepts in asynchrony, such as how Promise works in JS.
  4. Learn the DOM API and understand that this is the API that browsers give you for javascript code that interacts with HTML/CSS.

Developer tools

At this point, you should start exploring how to use the browser’s developer tools. I prefer Chrome DevTools because it’s great for debugging JavaScript and DOM. I like to use DevTools to debug any problems I encounter, rather than staring at the code for hours on end.

Like real life tools, Chrome DevTools requires a little training, and you have to spend some time using it most effectively. However, as you move on in your development career, you will find that the devTools you learn will pay off exponentially.

Very important point:

  1. I insist that you use Chrome DevTools because it is really powerful.
  2. Learn to operate DOM, debug network requests, set event breakpoints, jump to source code, search for code in website resources, limit network speed, and so on.
  3. It’s a constant learning process, just like any other technology. You shouldn’t immediately switch your focus to devTools, simply learn something simple to use and move on. You learn more when you work on projects.

Git

You need to learn a Version Control System (VCS), and I think you should learn Git. Git is a widely used VCS that teams and companies use to manage code bases across people. Git is a bit complicated to learn, but you can start by deploying your code on Github or similar sites.

When you learn Git, you must learn to deploy to Github. When you can push code onto GitHub, you can integrate with services like GitHub Pages, Vercel, and Netlify, and then you can create live previews of your own projects. You can share this live preview with your friends, family and even add it to your resume.

When you’re hired or working with more than two developers, you’ll need git knowledge anyway. But even if you’re an indie developer, it’s very, very important because it makes it very easy to deploy your site.

Very important point:

  1. Git can get complicated quickly. Don’t get confused by the large number of Git commands. As an indie developer, you don’t need much more than five or seven common commands.
  2. While point 1 is true, you should still understand how Git works, what branches are, what remote repositories mean, and so on. Just like the web knowledge mentioned above, git knowledge should be a solid foundation for you.

NPM/Yarn

NPM and Yarn are two of the most popular JavaScript package managers. They all exist for the same purpose — to manage dependencies in the code base. Dependencies are packages/software, usually not developed yourself, that you can still introduce into your own projects. For example, design systems like bootstrap or tailwind CSS are dependencies.

If there are any updates, bug fixes, or security patches for dependencies, the package maintainer will update the package in the NPM repository and you can update the package through the package manager. In addition, learning NPM and YARN can help you solve many problems, which you will notice in due course.

Very important point:

  1. NPM and YARN are conceptually similar. As you study NPM, you will learnpackage.jsonLockfiles, and why we need them. All of these concepts also apply to YARN V1.
  2. So, don’t put your energy into choosing which package manager to learn. Just learn one (like YARN) and then switch to the other if the project needs it.

React

At CodeDamn, we bet heavily on React. Not because we think it is superior to other technologies, but because we are following the original advice of this article – stick to one technology stack.

I used to use angular.js (2015), cut to Angular 2 — not a big fan, then cut to React. Since then, I’ve used React in almost all of my mid-complexity front-end projects.

React is a great library and has plenty of community support. Any problems/bugs you encounter in the React project have probably already been encountered by someone, and they’ve probably asked questions on a number of sites. So if you’re a good Googler, you shouldn’t have any trouble using React.

Very important point:

  1. React looks simple, but you need a mental model to work at scale. It’s not just about important concepts or hooks, it’s about how to build your APP, maintain your APP, choose the right libraries in your ecosystem, and so on.
  2. React does not enforce standard practices for generic businesses such as network requests or UIs. But I recommend you follow these configurations – usereact-query Do network requests, tailwind CSS or Material UI for THE UI library.
  3. Don’t dive into class-based components unless you have to maintain some old code base that requires this knowledge. Class-based components are not the future of React. Stay away from tutorials that teach you class-based components. Instead, you should learn functional components and hooks.

Module packer

Webpack is one of the most popular module packers for React right now out of the box. As before, you don’t need to learn webpack in depth, but you should know what the webpack.config.js file is, what the 10 most useful configurations are, and what they can do.

ESBuild is another module packer that is very, very fast compared to WebPack, but it doesn’t have great plug-in support yet. As a beginner, you don’t need to worry about ESBuild yet.

The test code

Last but not least, you should also focus on code testing. I think end-to-end testing is a good place to start because it seems easier and more intuitive than snapshot or unit testing.

The tool I recommend here is Cypress – it has a friendly syntax to test your application end-to-end, meaning that your code will act as if there are real users using your application, and it will do almost anything the user can do, but save you time and effort in an automated way.

Practice! Practice! Practice!

In fact, what is not explicitly mentioned above is that you need to keep practicing a lot. Practice is a way to get concepts into your mind. If you just watch videos, you can’t call it learning.

How to learn Web front-end development

The list above is by no means exhaustive, but as a guide, it’s a solid starting point. Now the question is how do you learn Web front-end development? Here I give you two options:

You need a structured way of learning, with additional practice modules

(Translator’s note: The code learning platform for my own advertising, this is not translated)

You need free access to learning

If you can’t afford codeDamn’s learning path above, you can spend your time on free resources. However, it is also recommended to use these resources with codeDamn’s learning path. (Translator’s Note: Advertising again…)

  1. Use Google extensively for learning and clarifying.
  2. Watch YouTube videos, but make sure they’re relatively new, especially on topics like JavaScript and React.
  3. Practice on your own, build projects and deploy them online for others to view.
  4. Take free lessons at CodeDamn (we have plenty of 100% free ones too).

conclusion

Time is money, in fact, sometimes more important than money. How much you want to spend (or can spend) is up to you. But I suggest, even if it’s not CodeDamn, that it’s definitely worth spending on your education to get the acceleration you want to achieve.

Translator’s View

See here, you may have found that the original author wrote a soft article. I didn’t notice it when I was preparing the translation until the last two paragraphs. However, apart from the last two paragraphs of the article advertising part, the advice given in this article is very pertinent, especially for the learning structure of the article, I think it is very valuable, I hope friends can take what they need from the article, focus on these technical structures and suggestions.

As for paying for knowledge, I’m sure it’s worth it. From the early days of MOOCs to the later days of Geek Time or gold-digging book series, the market really responds strongly to this area. But ONE thing I want to make clear is, please don’t make impulse purchases. Just because you buy these courses doesn’t mean you have learned them. There is no shortcut to learning.

To sum up, don’t be fooled by the flowery rhetoric and decide if you really need to pay for your knowledge. There are so many resources on the Internet these days that self-learning won’t stop you from being a good front-end developer.