Front End Learning Roadmap

css
css
package manager
package manager
linters
linters
module bundler
module bundler
testing
testing
typescript
typescript
spa
spa
Reactjs
Reactjs
Angular
Angular
http
http
graphql
graphql
Security
Security
Identity and Access Management (IAM)
Identity and Access…
SSO
SSO
RBAC
RBAC
OAuth2 / OpenID Connect
OAuth2 / OpenID Conn…
JWT
JWT
CSP
CSP
JWT Validation
JWT Validation
IDToken
IDToken
Access Token
Access Token
CSP
CSP
OWASP
OWASP
SSL/TLS
SSL/TLS
CORS
CORS
code & methods
code & methods
npm
npm
yarn
yarn
tools
tools
Browser DevTools
Browser DevTools
fundamentals
fundamentals
advanced
advanced
eslint
eslint
prettier
prettier
webpack
webpack
cypress
cypress
REST Api
REST Api
Progressive Web Apps
Progressive Web Apps
Server-Side Rendering
Server-Side Rendering
jest
jest
Angular CLI
Angular CLI
project structure
project structure
Modules
Modules
Component
Component
Decorator
Decorator
pipes
pipes
services and DI
services and DI
templates and databinding
templates and databi…
routing
routing
Forms
Forms
Rxjs
Rxjs
Http
Http
Lifecycle Hooks
Lifecycle Hooks
route gaurds
route gaurds
RouterModule
RouterModule
HttpClientModule
HttpClientModule
Interceptors
Interceptors
Rxjx Operators
Rxjx Operators
Observable & Subject
Observable & Subject
Template Driven forms
Template Driven forms
Reactive forms
Reactive forms
form validation
form validation
e2e
e2e
Playwright
Playwright
Jasmine/Karma
Jasmine/Karma
UI libraries
UI libraries
Angular Material
Angular Material
PrimeNG, NG-Zorro, Tailwind with Angular
PrimeNG, NG-Zorro, T…
vite
vite
pnpm
pnpm
npx
npx
React CLI
React CLI
JSX
JSX
Components and Props
Components and Props
State and useState
State and useState
Event handling
Event handling
List and Keys
List and Keys
Forms and Controlled componenets
Forms and Controlled…
Conditional Rendering
Conditional Rendering
Javascript
Javascript
Mocha
Mocha
DOM (Document Object Model)
DOM (Document Object…
ES6+ features
ES6+ features
Arrays & Objects (methods like map, filter, reduce)
Arrays & Objects (me…
Asynchronous JS → Callbacks, Promises, async/await
Asynchronous JS → Cal…
Error handling → try/catch
Error handling → try/…
Closures & Lexical Scope
Closures & Lexical S…
Prototypes & this keyword
Prototypes & this ke…
ES Modules vs CommonJS
ES Modules vs Common…
Working with APIs → fetch(), JSON
Working with APIs → f…
Events → bubbling, delegation, event listeners
Events → bubbling, de…
Local Storage, Session Storage, Cookies
Local Storage, Sessi…
Enums & Literal types
Enums & Literal types
Type Aliases vs Interfaces
Type Aliases vs Inte…
Optional & default parameters
Optional & default p…
Object typing (readonly, ?, Record, Partial, Pick, Omit)
Object typing (reado…
Structural typing (duck typing in TS)
Structural typing (d…
Install and run TypeScript (tsc)
Install and run Type…
TDD
TDD
BDD
BDD
concepts
concepts
concepts
concepts
websocket
websocket
WebRTC
WebRTC
Text is not SVG – cannot display

Leave a Reply