Front-End Development

RoadMap

HTML
FUNDAMENTALS

0 !DOCTYP6 0 Anchors & navigatioa

0 Block & Inline element+ 0 Lists (unordered +ordered2
0 Tags & Attribute+ 0 Forms & Input type+
0 Head & Titl@ 0 Events basic+
0 Imports (script, style...2 0 Image+
0 Heading+ 0 Semantic HTMR
0 Tables 0 Local & Session storage

CSS
0 Selector+ 0 Box mode‚
FUNDAMENTALS

0 basi| 0 Fonts & Typographs

0 combinationa‚ 0 Color+
0 Psued 0 Positionin˜
0 selector+ 0 Units (absolute + relative2
0 element+ 0 OverfloŠ
0 Specificits 0 Floa«
0 Inheritance 0 Display & Flex

JavaScript
FUNDAMENTALS

0 Primitive+ 0 Arrays + method+

0 Scopes & Hoistin˜ 0 Objects + method+
0 Closure+ 0 Functions + Arrow function+
0 Execution contex« 0 Try Catch & Error handlin˜
0 Variables (var, let, const2 0 Strict mod@
0 Operator+ 0 Timeout & Interva‚
0 Type Conversions 0 Classes

sosamson.com
Web Fundamentals
1 Client Server architectur+ 1 Authentication
1 HTT 1 Cookies & Session
1 RESTful web service 1 SecuritT
1 Communicatio( 1 XS=
1 Pollin 1 COR=
1 Web socket 1 CS
1 XML & JSO 1 Caching & compressio(
1 HTTPs & SSL 1 HTTP 2.0

BOM & DOM

1 DOM Tre+ 1 Attribute manipulatio(
1 Accessing DO} 1 AJAX & FetcŸ
1 Node creation & deletio( 1 Event Loo“
1 Element selector 1 Shadow DO}
1 Events handlin 1 CSSO}
1 Events listener 1 Critical Rendering PatŸ
1 Event bubbling & delegatio( 1 Browser API
1 Iterating Nodelist 1 Browser Internals

Version Control
1 Git and GithuÊ 1 Branchin
1 Clon+ 1 Merg+
1 Pull & FetcŸ 1 Rebas+
1 CommiÆ 1 WorkfloÙ
1 Lo 1 Cherry picæ
1 PusŸ 1 StasŸ
1 ReseÆ 1 SquasŸ
1 Restor+ 1 ReverÆ
1 Switch & Checkout 1 Tags

sosamson.com
 React /

% Components & JS % Event handlinH

% State & Prop % Form
% Class components & life cycl % React.lazL
% Functional component % Context APT
% Hook % Higher order component
% useStat % Advanced & Custom hook
% useEffec % Portal
% useRe % Error boundarie
% Render prop % ReconciliatioV
% Forward refs % React internals

React Ecosystem
„ Zustand / Redu‹ % Framer MotioV
„ React Routev % React intŸ
„ Styled Components / EmotioV % Jes
„ Material Reac % React Testing LibrarL
„ React Hook Foro % GraphQ˜
„ Axio % Apollo clien
„ Tanstack Query % NextJS

HTML
% Meta tag % IndexedDî
% Search Engine OptimizatioV % iFram
ADVANCED

% Responsive image % Canva

% MultimediÓ % WebG˜
% Audi¾ % Worker
% Vide¾ % web workev
% SVG animation % service workev
% Web Components % shared worker

sosamson.com
 CSS
! Shadow ! Flex advance7
! Gradient ! CSS Grid
ADVANCED

! Background image ! CSS sprite

! Masking & blendin ! CSS variables & counter
! CSS function ! Container querie
! Media Querie ! Subgri7
! Transform ! BEM standard
! Transition ! Responsive web design
! Animations

JavaScript
! “this” keywor7 ! Sets & Weakset
! Template string ! Maps & Weakmap
ADVANCED

! De-structurin ! Regular expression

! Rest & Sprea7 ! Symbol
! Callback ! Proxy & Reflecd
! Promise ! Iterators + Generator
! Async Awaid ! Dates & Int–
! Prototype ! Typed Array
! Modules ! ES Next features

Frontend Concepts
! Progressive Web Ap· ! Web SecuritÈ
! Object Oriented Programmin ! Design pattern
! Functional Programmin ! JAM Stacé
! Reactive Programmin ! Micro fronten7
! Test Driven Developmend ! User ExperiencÁ
! Accessibility & UsabilitÈ ! CI/Cì
! Web PerformancÁ ! Web AssemblÈ
! CSR, SSR, SSG, ISR ! Web 3.0

sosamson.com
 Recommended Tools
Editor Browser Version Control Language

VS Code Chrome Git TypeScript

Task Runner Commit Hook Bundler

npm / Yarn Husky ViteJS / Webpack

Linter Linter

ESlint Stylelint
Formatter

Prettier

Popular Tech & Tools

ƒ SAS ƒ RxJ ƒ StorybooÌ

ƒ Tailwind CS ƒ D3J ƒ CypresÃ

ƒ Bootstra{ ƒ XStat› ƒ VitesË

ƒ PostCS ƒ StencilJ ƒ PlaywrighË

ƒ AntD ƒ Lit Element ƒ TestCafe

VueJS Angular v
S elte SolidJS Preact

ƒ ThreeJ ƒ Remi¸ ƒ Dockeâ

ƒ 
Electro ƒ Gatsb­ ƒ N¸

ƒ ESBuil ƒ Astr© ƒ LernÜ

ƒ Babe ƒ NodeJ ƒ Turbo Rep©

ƒ SW C ƒ Deno ƒ SingleSPA

sosamson.com
 Recommended Frontend Roadmap

Web

HTML 5 CSS JavaScript

Fundamentals

Beginner Track
Git

React
State

Unit Testing React

Ecosystem Management

Intermediate Track

BOM & DOM

HTML CSS JS
Web security

TypeScript NextJS
Advanced & performance

Never

Ends...
Design Patterns

sosamson.com
This document is a guideline based on personal knowledge & opinions