Frontend developer Roadmap .pdf
- 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