This article introduces a comprehensive roadmap Roadmap for Frontend Developers in 2021 and provides you with the right tools and directions.
Web development is one of the fastest, and most frequently changing fields in the programming industry. The way a website is built and operated in 2021 is completely different from 2010, 2015, or even 2020. So is Frontend Development: captivating, engaging, yet transformative.
You may not need to learn all of the things listed below, but surely, there will be at least some of them that will help you.
Stage 1: Prepare your luggage
In every roadmap for frontend developers, it is always the most important thing to prepare yourself with enough luggage. And for a Front-end Dev, two things should never be missed:
Internet Knowledge & Programing Languages
2 required things for frontend dev
These are the first steps that any Web Dev must go through, regardless of whether you are Front-end, Back-end, or Full-Stack. It can be said that, if you master this foundational knowledge, you can confidently become a Web Developer and earn money from suitable projects.
For the Internet, you need to learn about browser, HTTP, JSOL, XML, DNS… What are they? How does it work? What are the advantages and disadvantages? Regarding programming languages, never ignore TOP 3: HTML, CSS, and JavaScript.
In each language, there are parts of knowledge that you need to learn and practice constantly. Always make time for all the items on this route, practice using them continuously.
Another important step in this phase is learning about version control systems, learning the basics of Git, and creating interfaces on GitHub.
Once you've secured the basics, continue with learning about maintainable CSS and using CSS frameworks. Now, don't skip practicing with CSS with familiar tasks like writing CSS in SASS, automatically converting SASS to CSS using NPM Script.
Stage 2: Entering the “War”
Now, with all your weapons and gear ready, it's time to step into modern frontend development.
At this point, you need to continue to learn about JavaScript, Webpack, Babel, how to integrate them and how to link code with ESlint. This is an important stage to help you really feel your capabilities in the Frontend Dev role.
Then you need to continue learning about the Frontend Framework. Some of the popular ones that are commonly used today are React, Angular, and Vue.
But first, I recommend learning about React or Angular, then CSS in JS, and maybe Styled Components and CSS Modules if you like.
Progressive web apps are also a part that is not difficult to conquer if you are already familiar with frontend frameworks.
In the PWA checklist, you'll have the opportunity to learn about how tools you can use to your advantage such as hosting, measuring performance, using lighthouse, and seeing the different browser APIs you can use.
In addition, the Rail model and PRPL pattern are also documents that should be read. At the end of this phase, you can confidently call yourself a Frontend Developer.
Don't forget to practice every day to remember what you've learned by proactively performing simple tasks like creating an app that allows you to select a few hashtags and using Twitter's search API to fetch and show you the hashtags.
Most recent tweets for those hashtags in a layout grid-like Trello; pin hashtags so that when the user refreshes the page, the page remembers the hashtags you selected; using React Router and more about pages, etc.
Stage 3: Conquer all challenges
To save headaches when coding and also put you in a better position at work, a modern front-end Dev should never ignore Automated Testing.
You should start by learning different types of tests with concepts like mocking, stubs, etc. Then Jest, Cypress, and also how to calculate test coverage.
Static Type Checkers will also be an effective tool to make your code easier to maintain later in development, more flexible refactoring, better-supported IDEs, etc. There are 2 options for you: TypeScript and Flow, but if you have to choose, you should choose TypeScript.
Server-side rendering applications will also help your performance better, improving SEO on client rendering applications. Although not a must, the Server-side will definitely assist you very effectively in optimizing frontend applications.
For the frontend framework, there will be different server-side options. However, with the advice of using React as I mentioned above, you should continue to choose Next.js to make SSR easier.
Stage 4: Reaching remote areas
Having mastered the above 3 stages, you can completely become a Frontend Developer with stable professional skills, meeting most of the requirements of the job already. However, in order for yourself to go further, never stop learning.
There are many things you can choose to explore depending on your personal preferences and the right time.
Complete Big Picture
Final Thoughts
This roadmap may not be 100% complete, but basically, these are the most important information in the journey of building a Frontend Developer.
The most important key on every journey is practice, practice, and practice. Only with constant learning can you go far on the path you have chosen.
