frontend-checklist

A complete todo list of skills and tasks to become a modern frontend developer📦

Based on the article modern frontend developer in 2019 by brother @kamranahmedse.

Follow me on Twitter👉

Usage

Just study each topic and check them as done âś…. As for the tasks, complete them and put the links at the right side of the task instructions. So like this -

PHASE 1: THE BASICS

HTML

CSS

Javascript

How the internet works

TASKS

PHASE 2: WRITE BETTER CSS

TASKS

PHASE 3: Build tools

This phase is going to be taking some time and is your step into modern frontend web development. Go ahead and learn more about the JavaScript ecosystem. Learn what is Webpack, understand the different concepts and why was it ever needed. Understand what is babel, why do we use it, and learn how to integrate it with webpack and finally, learn how to lint your code using ESLint. All of the items listed in this phase revolve around webpack.

Tasks

PHASE 4: MASTERING A FRAMEWORK

ReactJS

State Management

Type-checkers

Routing

API clients

Form helpers

Utility libraries

i18n

Once you have learned ReactJS, go ahead and read about Progressive web apps. Now that you know frontend frameworks, it shouldn’t be that difficult for you. Have a look at the PWA checklist, read about service workers, measuring performance, using lighthouse and look at the different browser APIs that you can use to your advantage e.g. Storage, Location, Notifications, Device Orientation, and Payments. Also read about RAIL model and PRPL pattern.

Read

Once you are done with this, you should be able to call yourself a modern frontend developer. Make sure to practice what you learn. Here is the list of tasks that you may pick from if you are looking for ideas.

Tasks

Phase 5: Automated Testing

Learning to write automated tests for your applications is going to save you a lot of headache in the future and is going to put you in a better position when looking for a job.

Tasks

Phase 6:  Static Type Checkers

Type checkers allow you to make your code more maintainable as it grows, increases your agility when doing refactoring, provide better support in the IDEs and are the best form of documentation that you can have. There are mainly Flow and TypeScript in this domain. However, there is more push towards TypeScript and I would recommend you to go with that.

Tasks

Phase 7:  Server-Side Rendering & Static Site Generator

Server rendered applications allow achieving better performance and improved SEO as compared to the client rendered applications. Although not a requirement it would definitely help you in crafting better frontend applications. There are different options available, based on the frontend framework of your choice; but if you picked React.js then you should go with Next.js which makes SSR a breeze.

Tasks

Go Beyond

Everything shown in this phase is optional and is not really required for you but if you would like to try them out, go ahead and have a look.

Tasks

Create a portfolio website and put all these project in there or just put your fork of this repo in there

Where to get the design? Because you are a frontend developer not a designer and people say you must have a great looking portfolio site to attract and showcase what you know to potential clients and employers. I have no idea on this one🤷‍.


Please send a PR if you think something’s missing.

Please share and 🌟 this project so every miserable people like me who wants to be self taught can get some guidence.