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 -

• Create a webpage that uses GitHub Repositories API to fetch and show the top 10 repositories of the current week in a nice responsive format. --> solution // link of your solution or project

PHASE 1: THE BASICS

HTML

• Learn the basics
• Writing Semantic Html
• Basic SEO
• Accessibility

CSS

• Learn the basics
• making layouts -> Floats, Positioning, Display, Box Model, CSS Grid, Flex Box
• Media Queries
• Learn CSS 3

Javascript

• Syntax and Basics Constructs
• ES6+ and moduler Javascript
• Learn DOM manipulation
• Learn Fetch Api / ajax
• Understand hoisting, Event bubbling, Scope Prototype, Strict Mode

How the internet works

• How browsers work
• What is HTTP, how does it work?
• What is JSON and XML
• What is DNS, how does it work

TASKS

• Pick and complete the frontendmentor challenges --- for UI & UX
• Create a Pomodoro Application. You may clone and make the web version of this application
• Create a webpage that uses GitHub Repositories API to fetch and show the top 10 repositories of the current week in a nice responsive format.
• Create a simple to-do list application that allows you to add tasks, mark them complete, edit them and delete them.
• Create a simple stopwatch where the user can start, stop, pause and reset.

PHASE 2: WRITE BETTER CSS

• Package managers -> npm/yarn
• CSS architecture -> BEM
• CSS Frameworks -> Bootstrap/TailwindCSS
• CSS Pre-processors -> SASS/PostCSS

TASKS

• Create some phase 1 projects using Bootstrap and TailwindCSS
• Try to use npm/yarn as much as possible to practice it
• Convert some phase 1 projects to use BEM
• Write any CSS in SASS/PostCSS

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.

• Babel
• webpack
• eslint
• prettier

Tasks

• Create an npm package that takes a username and gives back the list of links found on the social networks (if they exist). It should be usable in the browser, bundle it with webpack, use babel to transpile it and use ESLint for linting.
• Create a simple to-do list application. Use SASS/PostCSS for the CSS, add Bootstrap/TailwindCSS for the styles, use BEM where needed, transpile JavaScript using babel, bundle it with webpack, create optimized production build and deploy it on Github Pages/Netlify/Vercel.

PHASE 4: MASTERING A FRAMEWORK

ReactJS

• Understand React Fundamentals

State Management

• Redux
• Redux Toolkit
• rematch
• reselect
• mobx

Type-checkers

• proptypes

Routing

• React-router

API clients

• fetch(native)
• Axios

Form helpers

• redux-form
• formik

Utility libraries

• lodash
• Moment/Luxon
• classnames

i18n

• React Intl

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

• About Progressive web apps
• Have a look at the PWA checklist
• About service workers
• Using lighthouse
• Look at the different browser APIs that you can use to your advantage e.g. Storage, Location, Notifications, Device Orientation, and Payments
• About RAIL model and PRPL pattern

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

• Create a simple application that lets you pick a few hashtags and uses Twitter's search API to fetch and show you the most recent tweets for those hashtags in a trello like a layout grid. Try to pin the hashtags so that when the user refreshes the page, it remembers the hashtags that you picked. Use react router and add about pages.
• Create a Pomodoro application similar to this one that lets the users configure the duration for work and breaks, shows notifications and plays a sound whenever work or break has ended/started.
• Re-create the GitHub trending page using React and allow filtering using language and dates just like GitHub. You may add any libraries for dates.

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.

• Learn what are the different types of testing, different concepts such as mocking, stubs etc.
• Go ahead and learn Jest, Enzyme, and Cypress in a respective manner
• Learn to calculate the test coverage

Tasks

• For the tasks, go ahead and write unit, integration and functional tests for the application(s) that you created in Phase 4 above.

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.

• Typescript

Tasks

• Go ahead and convert any of your existing JavaScript applications to use TypeScript

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.

• Next.js
• GatsbyJS

Tasks

• Convert any applications that you made above to be rendered on the server side using Next.js
• Create your personal blog and import all your posts

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.

• Learn about Node & Express a little

Tasks

• Create a simple crud application using MERN stack

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.