Find the detailed version of this roadmap


 Personal Recommendation / Opinion
along with resources and other roadmaps

 Alternative Option - Pick this or purple
https : // roadmap.sh

 Order in roadmap not strict (Learn anytime)
Front-end
 I wouldn't recommend

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


 
 What is Domain Name?


What is HTTP? Internet

 What is hosting?


Browsers and how they work?


 Learn the basics



 Accessibility
Writing Semantic HTML
HTML
SEO Basics



 Forms and Validations 

Floats

 Learn the basics


CSS Positioning
Conventions and Best Practices

Making Layouts

 Display

 JavaScript Box Model
Syntax and Basic Constructs

 CSS Grid
Responsive design and Media Queries

 Learn DOM Manipulation Flex Box


 Learn Fetch API / Ajax (XHR)


 ES6+ and modular JavaScript
Version Control Systems Repo hosting services
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


 Angular
Build Tools Task Runners npm scripts 



 Vue.js Pick a Framework Module Bundlers Vite
Parce 



 Svelte esbuild
Webpack 



 Solid JS Webpack
Webpack 

Modern CSS
Rollup
Rollu 

CSS Frameworks Parcel
Parce 

Styled Components 


Tailwind 

CSS Modules 


 Mantine
Styled JSX 


 Chakra UI Material UI 
 Jest 

Emotion 


 DaisyUI Radix UI 
 react-testing-library 

JS based and better to use with your Cypress 

framework based JavaScript apps. Testing your Apps
Playwright 

Learn the di!erence between Unit, Integration,
CSS first frameworks
Bootstrap and Functional tests and learn how to write 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
components by default.

HTML Templates 

Authentication Strategies 


 JWT, OAuth, SSO, Basic Auth, Session Auth etc Web Components Custom Elements 

Shadow DOM 


 
 
 
 
Progressive Web Apps Type Checkers TypeScript
Storage

Web Sockets Remix 


Server Sent Events 

React 
 Next.js 

Service Workers PRPL Pattern


Location RAIL Model Server Side Rendering (SSR) Angular 
 Universal 

Notifications Performance Metrics Vue.js 
 Nuxt.js 

Device Orientation Using Lighthouse
Svelte 
 Svelte Kit 

Payments Using DevTools

Credentials Calculating, Measuring



Static Site Generators
and improving performance
Eleventy 

Learn di!erent Web
APIs used in PWAs Astro 

Next.js 


 Apollo GraphQL 

GatsbyJS 


 React Native 
 Relay Modern
Vuepress 


 Flutter

 Jekyll 

Ionic Mobile Applications
Hugo 

NativeScript
Electron 
 Nuxt.js 



Desktop Applications Tauri 
 Remix 

Flutter 



 Bonus Content

Keep Learning