Hi Everyone I would like to share a frontend developer roadmap which is really helpful to you who is decided to make career as a fronted developer as well

1. 2023
Frontend Development
Interview Checklist & Roadmap
HTML
0 !DOCTYP6
0 Block & Inline element+
0 Tags & Attribute+
0 Head & Titl@
0 Imports (script, style...2
0 Heading+
0 Tables
0 Anchors & navigatioa
0 Lists (unordered +ordered2
0 Forms & Input type+
0 Events basic+
0 Image+
0 Semantic HTMR
0 Local & Session storage
CSS
0 Selector+
0 basi|
0 combinationa‚
0 Psued
0 selector+
0 element+
0 Specificits
0 Inheritance
0 Box mode‚
0 Fonts & Typographs
0 Color+
0 Positionin˜
0 Units (absolute + relative2
0 OverfloŠ
0 Floa«
0 Display & Flex
JavaScript
0 Primitive+
0 Scopes & Hoistin˜
0 Closure+
0 Execution contex«
0 Variables (var, let, const2
0 Operator+
0 Type Conversions
0 Arrays + method+
0 Objects + method+
0 Functions + Arrow function+
0 Try Catch & Error handlin˜
0 Strict mod@
0 Timeout & Interva‚
0 Classes
FU
N
DAME
N
TALS
FU
N
DAME
N
TALS
FU
N
DAME
N
TALS

2. Web Fundamentals
1 Client Server architectur+
1 HTT
1 RESTful web service
1 Communicatio(
1 Pollin
1 Web socket
1 XML JSO
1 HTTPs SSL
1 Authentication
1 Cookies Session
1 SecuritT
1 XS=
1 COR=
1 CS
1 Caching compressio(
1 HTTP 2.0
BOM DOM
1 DOM Tre+
1 Accessing DO}
1 Node creation deletio(
1 Element selector
1 Events handlin
1 Events listener
1 Event bubbling delegatio(
1 Iterating Nodelist
1 Attribute manipulatio(
1 AJAX FetcŸ
1 Event Loo“
1 Shadow DO}
1 CSSO}
1 Critical Rendering PatŸ
1 Browser API
1 Browser Internals
Version Control
1 Git and GithuÊ
1 Clon+
1 Pull FetcŸ
1 CommiÆ
1 Lo
1 PusŸ
1 ReseÆ
1 Restor+
1 Switch Checkout
1 Branchin
1 Merg+
1 Rebas+
1 WorkfloÙ
1 Cherry picæ
1 StasŸ
1 SquasŸ
1 ReverÆ
1 Tags

3. React
% Components JS
% State Prop
%
% Functional component
% Hook
% useStat
% useEffec
% useRe
% Render prop
% Forward refs
Class components life cycl
% Event handlinH
% Form
% React.lazL
% Context APT
% Higher order component
% Advanced Custom hook
% Portal
% Error boundarie
% ReconciliatioV
% React internals
React Ecosystem
„ Zustand /
„ React Routev
„ Styled Components / EmotioV
„ Material Reac
„ React Hook Foro
„ Axio
„ Tanstack Query
Redu‹ % Framer MotioV
% React intŸ
% Jes
% React Testing LibrarL
% GraphQ˜
% Apollo clien
% NextJS
HTML
% Meta tag
% Search Engine OptimizatioV
% Responsive image
% MultimediÓ
% Audi¾
% Vide¾
% SVG animation
% Web Components
% IndexedDî
% iFram
% Canva
% WebG˜
% Worker
% web workev
% service workev
% shared worker
/
ADVANCED

4. CSS
! Shadow
! Gradient
! Background image
! Masking blendin
! CSS function
! Media Querie
! Transform
! Transition
! Animations
! Flex advance7
! CSS Grid
! CSS sprite
! CSS variables counter
! Container querie
! Subgri7
! BEM standard
! Responsive web design
JavaScript
! “this” keywor7
! Template string
! De-structurin
! Rest Sprea7
! Callback
! Promise
! Async Awaid
! Prototype
! Modules
! Sets Weakset
! Maps Weakmap
! Regular expression
! Symbol
! Proxy Reflecd
! Iterators + Generator
! Dates Int–
! Typed Array
! ES Next features
Frontend Concepts
! Progressive Web Ap·
! Object Oriented Programmin
! Functional Programmin
! Reactive Programmin
! Test Driven Developmend
! Accessibility UsabilitÈ
! Web PerformancÁ
! CSR, SSR, SSG, ISR
! Web SecuritÈ
! Design pattern
! JAM Stacé
! Micro fronten7
! User ExperiencÁ
! CI/Cì
! Web AssemblÈ
! Web 3.0
ADVANCED
ADVANCED

5. Recommended Tools
Editor
VS Code
Browser
Chrome
Formatter
Prettier
Language
TypeScript
Version Control
Git
Task Runner
npm / Yarn
Bundler
ViteJS / Webpack
Stylelint
Linter
ESlint
Linter
Popular Tech Tools
ƒ SAS
ƒ Tailwind CS
ƒ Bootstra{
ƒ PostCS
ƒ AntD
ƒ RxJ
ƒ D3J
ƒ XStat›
ƒ StencilJ
ƒ Lit Element
ƒ Remi¸
ƒ Gatsb­
ƒ Astr©
ƒ NodeJ
ƒ Deno
ƒ StorybooÌ
ƒ CypresÃ
ƒ VitesË
ƒ PlaywrighË
ƒ TestCafe
ƒ Dockeâ
ƒ N¸
ƒ LernÜ
ƒ Turbo Rep©
ƒ SingleSPA
ƒ ThreeJ
ƒ Electro
ƒ ESBuil
ƒ Babe
ƒ SWC
VueJS Angular Svelte SolidJS Preact
Commit Hook
Husky

6. Created
By
Sadanand Pai
For Frontend Materials, Click Here
This document is a guideline based on personal knowledge opinions
Never
Ends...
HTML 5 CSS
State
Management
BOM DOM
HTML CSS JS
Advanced
Design Patterns
NextJS
TypeScript
Unit Testing React
JavaScript
Git
Web
Fundamentals
React
Ecosystem
Recommended Frontend Roadmap
Web security
performance
Beginner Track
Intermediate Track