Scribd
Upload
55 views6 pages

2023 FE Roadmap

This document provides a checklist and roadmap for frontend development interviews and skills. It summarizes foundational and advanced concepts for HTML, CSS, JavaScript, React, and other relevant technologies. Recommended tools, popular additional technologies, and a sample frontend roadmap are also included.

Uploaded by

Sethupathi Mahendran
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
55 views6 pages

2023 FE Roadmap

This document provides a checklist and roadmap for frontend development interviews and skills. It summarizes foundational and advanced concepts for HTML, CSS, JavaScript, React, and other relevant technologies. Recommended tools, popular additional technologies, and a sample frontend roadmap are also included.

Uploaded by

Sethupathi Mahendran
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

2023

Frontend Development

Interview Checklist & Roadmap


HTML
FU DAME TALS

F !DOCTYP3 F Anchors & navigatiod


F Block & Inline element> F Lists (unordered +ordered
N

F Tags & Attribute> F Forms & Input type>


F Head & Titl- F Events basic>
F Imports (script, style... F Image>
N

F Heading> F Semantic HTMg


F Tables F Local & Session storage

CSS
F Selector> F Box mode‚
FU DAME TALS

F basi† F Fonts & Typographn


F combinationa‚ F Color>
N

F Psued} F Positionin‘
F selector> F Units (absolute + relative
F element> F Overflo‰
N

F Specificitn F Floa–
F Inheritance F Display & Flex

JavaScript
FU DAME TALS

F Primitive> F Arrays + method>


F Scopes & Hoistin‘ F Ob ects + method>
j

F Closure> F Functions + Arrow unction>


N

F Execution contex– F Strict mod-


F Variables (var, let, const F Timeout & Interva‚
F Operators & Type Conversion> F Classe>
N

F Try Catch & Error handling F Promise


Web Fundamentals
 Client Server architectur  Authentication2
 HTT  Cookies & Session2
 RESTful web service2  SecuritC
 Communicatio*  XS?
 Pollin  COR?
 Web socket2  CS
 XML & JSO-  Caching & compressio*
 HTTPs & SSL  HTTP 2.0

BOM & DOM


 DOM Tre  Attribute manipulatio*
 Accessing DOv  AJAX & Fetc“
 Node creation & deletio*  Event Looš
 Element selector2  Shadow DOv
 Events handlin  CSSOv
 Events listener2  Critical Rendering Pat“
 Event bubbling & delegatio*  Browser API2
 Iterating Nodelist  Browser Internals

Version Control
 Git and Githuà  Branchin
 Clon  Merg
 Pull & Fetc“  Rebas
 CommiÐ  WorkfloÙ
 Lo  Cherry pic×
 Pus“  Stas“
 ReseÐ  Squas“
 Restor  ReverÐ
 Switch & Checkout  Tags
React /

 Components & JS  Event handlinH


 State & Prop  Form
 Class components & life cycl  React.lazQ
 Functional component  Context APC
 Hook  Higher order component
 useStat  Advanced & Custom hook
 useEffec!  Portal
 useRe#  Error boundarie
 Render prop  ReconciliatioT
 Forward refs  React internals

React Ecosystem
€ Zustand / Redu  Framer MotioT
€ React Route|  React intš
€ Styled Components / EmotioT  Jes!
€ Material Reac!  React Testing LibrarQ
€ React Hook Fors  GraphQ­
€ Axio  Apollo clien!
€ Tanstack Query  NextJS

HTML
 Meta tag  IndexedDé
 Search Engine OptimizatioT  iFram
ADVANCED

 Responsive image  Canva


 Multimedi  WebG­
 Audi¾  Worker
 Vide¾  web worke|
 SVG animation  service worke|
 Web Components  shared worker
CSS
 Shadow  Flex advance2
 Gradient  CSS Grid
ADVANCED

 Background image  CSS sprite


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

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

 De-structurin  Regular expression


 Rest & Sprea2  Symbol
 Callback  Proxy & Reflecm
 Promises in depti  Iterators + Generator
 Async Awaim  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 fronten2
 Test Driven Developmenm  User Experienc¼
 Accessibility & Usabilit¨  CI/Cð
 Web Performanc¼  Web Assembl¨
 CSR, SSR, SSG, ISR  Web 3.0
Recommended Tools
Editor Browser Version Control Language

VS Code Chrome Git TypeScript


Task Runner H
Commit ook 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©
† S C W † Deno † SingleSPA
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

Created
Never

By
Ends...
Design Patterns
Sadanand Pai

For Frontend Materials, Click Here

This document is a guideline based on personal knowledge & opinions

You might also like