We now have a YouTube Channel.

roadmap.sh

NEW Topic videos being made on YouTube »

Frontend Developer
Step by step guide to becoming a modern frontend
developer in 2022

← Download Subscribe

NEW Resources are here, try clicking any nodes.

Find the detailed version of this roadmap

Personal Recommendation / Opinion
along with resources and other roadmaps
Alternative Option - Pick this or purple

Order in roadmap not strict (Learn anytime) http : // roadmap.sh

I wouldn't recommend
Front-end

How does the internet work? DNS and how it works?

What is HTTP? What is Domain Name?

Internet

Browsers and how they work? What is hosting?

Learn the basics

Accessibility
Writing Semantic HTML
HTML
SEO Basics
Forms and Validations
Floats
CSS Learn the basics Positioning
Conventions and Best Practices
Display
JavaScript Making Layouts
Box Model
Syntax and Basic Constructs
CSS Grid
Responsive design and Media Queries
Learn DOM Manipulation Flex Box

Learn Fetch API / Ajax (XHR)

Version Control Systems Repo hosting services

ES6+ and modular JavaScript
What are they and why you should use one Create account and Learn to use GitHub

Understand the concepts

Hoisting, Event Bubbling, Scope, Basic Usage of Git GitHub
Prototype, Shadow DOM, strict
GitLab

Web Security Knowledge

Bitbucket
npm and yarn both are fine, pick
one or learn both, there is not
much difference. Get at least a basic knowledge of all of these

HTTPS Content Security Policy

npm
Package Managers
CORS OWASP Security Risks
yarn

BEM Sass
CSS Architecture CSS Preprocessors

OOCSS With modern frameworks and CSS-in-JS you don't With how the modern frameworks there has been
PostCSS
have to worry about these anymore but still it would more push towards CSS-in-JS so you may not need
SMACSS be a good idea to get familiarized with BEM atleast. these but still a good idea to familiarize yourself. Less

npm scripts Task Runners Prettier

Webpack Build Tools ESLint

Linters and Formatters

esbuild
Webpack StandardJS

Rollup
Module Bundlers Redux
Parcel React
MobX Recoil
Vite
Parcel

RxJS
Pick a Framework Angular
Styled Components NgRx

CSS Modules
Vue.js VueX
Styled JSX Modern CSS

Emotion HTML Templates

Web Components Custom Elements

CSS first frameworks which Shadow DOM

Bootstrap
don't come with JavaScript
framework components by
Bulma Tailwind CSS
default. CSS Frameworks

Chakra UI

Material UI
Jest Testing your Apps

Learn the difference between Unit, Integration, Radix UI

react-testing-library
and Functional tests and learn how to write JS based and better to use
Cypress with your framework based
them with the tools listed on the left.
JavaScript applications.
Enzyme
Mocha Chai Ava Jasmine
You can fill all your testing
needs with just these.

TypeScript
Storage Progressive Web Apps Type Checkers
Flow
Web Sockets

Service Workers
Next.js
Location PRPL Pattern Server Side Rendering (SSR) React
Notifications RAIL Model After.js

Device Orientation Performance Metrics

Angular Universal
Payments Using Lighthouse
Credentials Using DevTools Vue.js Nuxt.js

Learn different Web Calculating, Measuring

APIs used in PWAs Apollo
and improving performance
GraphQL
Relay Modern
React Native
Next.js
NativeScript
GatsbyJS
Mobile Applications Static Site Generators
Flutter
Nuxt.js
Ionic
Vuepress
Electron
Jekyll
Desktop Applications Carlo
Hugo
Proton Native
Gridsome

Eleventy

Web Assembly or WASM is the binary instructions generated from

Web Assembly
higher level languages such as Go, C, C++ or Rust. It is faster than
JavaScript and WASM 1.0 has already shipped in the major browsers.
W3C accepted it as an official standard at the end of 2019. It will still
take quite some time to go mainstream though.

Keep Learning

Open Source
The project is OpenSource, 7th most starred
project on GitHub and is visited by hundreds of
thousands of developers every month.

Star 196,888

A considerable amount of my time is spent doing

unpaid community work on things that I hope will
help humanity in some way. Your sponsorship
helps me continue to produce more open-source
and free educational material consumed by
hundreds of thousands of developers every
month.

Sponsor @kamranahmedse

Stay Informed
Subscribe yourself to get updates, new guides,
videos and roadmaps in your inbox.

Subscribe to Updates

Free subscription for updates

Updates & Paid Content

Support the project by paying as little as 5$ per month

Roadmaps

Guides

Videos

Thanks

About

YouTube

roadmap.sh by @kamranahmedse

Community created roadmaps, articles, resources

and journeys to help you choose your path and grow
in your career.

© roadmap.sh · FAQs · Terms · Privacy