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) https : // 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

yarn Get at least a basic knowledge of all of these

HTTPS Content Security Policy

pnpm Package Managers

CORS OWASP Security Risks

BEM CSS Architecture

Sass CSS Preprocessors

PostCSS
Prettier

Linters and Formatters ESLint

React

Build Tools Task Runners npm scripts

Angular

Vue.js Pick a Framework Module Bundlers Vite

Parcel

Svelte esbuild
Webpack

Solid JS Webpack
Webpack
Modern CSS
Rollup
Rollup

CSS Frameworks Parcel

Parcel
Styled Components

CSS Modules
Mantine Tailwind

Styled JSX
Chakra UI Material UI
Jest
Emotion
Radix UI

Related Roadmaps
DaisyUI

More →
react-testing-library
 Related Roadmaps
JS based and better to use with your Cypress
More →
framework based JavaScript apps. Testing your Apps
Playwright

CSS first frameworks React Learn the difference between Unit, Integration,
and Functional tests and learn how to write
Step by step guide to become a React Developer in 2022
Bootstrap You can fill all your testing
that don't come with needs with just these.
them with the tools listed on the right.
JS framework
Bulma

Angular
components by default.

Step by step guide to become a Angular Developer in 2022

Authentication Strategies
HTML Templates

Web Components Custom Elements

Vue
JWT, OAuth, SSO, Basic Auth, Session Auth etc

Shadow DOM

Step by step guide to become a Vue Developer in 2022

Progressive Web Apps Type Checkers TypeScript
Storage

Web Sockets JavaScript Remix

Server Sent Events Step by step guide to learn JavaScript in 2022 React Next.js
Service Workers PRPL Pattern

Location RAIL Model Node.js Server Side Rendering (SSR) Angular Universal

Notifications Step by step guide to becoming a Node.js developer in 2022

Performance Metrics Vue.js Nuxt.js

Device Orientation Using Lighthouse

Design System
Svelte Svelte Kit
Payments Using DevTools

Credentials Step by step guide to building a modern Design System

Calculating, Measuring
and improving performance
Static Site Generators Eleventy
Learn different Web
APIs used in PWAs Astro

Next.js
Apollo GraphQL

Open Source
GatsbyJS
React Native Relay Modern
Vuepress
Flutter

The project is OpenSource, 6th most starred project on GitHub and is visited by
Jekyll
Ionic Mobile Applications

hundreds of thousands of developers every month.

Hugo
NativeScript
Electron
Nuxt.js

Star 222,009
Desktop Applications Tauri
Remix
Flutter

Roadmaps Bonus Content

Guides
Videos Keep Learning

About
YouTube

roadmap.sh by @kamranahmedse
Community created roadmaps, articles, resources and journeys to help you choose
your path and grow in your career.