Find the detailed version of this roadmap

!
" Personal Recommendation / Opinion
along with resources and other roadmaps
"
! Alternative Option - Pick this or purple
http : // 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 and yarn both are fine, pick
one or learn both, there is not
"
!
much di!erence. 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
"
!

"
! ESLint
"
!
Webpack Build Tools Linters and Formatters

"
! esbuild
Webpack StandardJS

"
! Rollup
Rollu
Redux
"
!
"
! Module Bundlers
Parcel
Parce "
!
React
MobX "
! Recoil "
!
"
! Vite
Parce
"
!
"
! RxJS
"
! Pick a Framework Angular
Styled Components NgRx
"
!
"
! CSS Modules "
! "
!
Vue.js Pinia
"
! Styled JSX Modern CSS

"
! HTML Templates
"
!
Emotion
"
!
Web Components Custom Elements "
!
"
!
"
! CSS first frameworks which Shadow DOM
Bootstrap
don't come with JavaScript

Bulma
" framework components by
! "
!
default.
Tailwind CSS
CSS Frameworks
"
! Chakra UI

"
! "
! Material UI
Jest Testing your Apps
"
!
"
! react-testing-library Learn the di!erence between Unit, Integration, Radix UI

and Functional tests and learn how to write JS based and better to use
"
! Cypress
them with the tools listed on the left. with your framework based
"
! Enzyme
JavaScript applications.

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 di!erent Web Calculating, Measuring "

!
APIs used in PWAs and improving performance "
! Apollo
GraphQL
Relay Modern
"
!
"
!
React Native "
!
Next.js
NativeScript "
!
"
! "
! GatsbyJS
Mobile Applications Static Site Generators
Flutter "
!
Nuxt.js
Ionic "
!
Electron
"
! Vuepress

"
! Jekyll
"
!
Desktop Applications Tauri
"
!
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 o"cial standard at the end of 2019. It will still
take quite some time to go mainstream though.

Keep Learning