2022 Frontend Development

Interview Checklist & Roadmap

HTML
Elements + Attribute Web storag
Forms + Input type Images & Multimedi
Imports + META tag iFram
Lists & ancho Canva
Table Worker
Events Sematic HTML

CSS
Selectors (basic, complex Shadow
Psuedo selector Colors + Gradient
Specificity & inheritanc Transforms & Transition
Box mode Animation
Units, Displa Media querie
Positionin CSS variable
Layouts: Flex, Grid BEM standards

JavaScript
Variables & Primitive “this” keywor
Scopes & Hoistin callbacks + Promis
Operators & type conversion Async awai
Closure Set & Map
Objects + methods & rege Module
Arrays + method Classe
Functions & Arrow function ES6+ syntaxe
timeout & interva Prototype
destructing & spread Iterators
 Web Fundamentals

HTTP & RES Cookies & Session

Headers & Method CSP, XSS, COR

Polling & Web Socke Cachin

JSON HTTP 2.0

BOM & DOM

Element selector AJAX & fetc

DOM manipulatio Event bubbling & delegatio

Iterating nodelis Event loo

attribute modificatio Shadow DO

style modification Browser APIs

React /
Components & JS Component Compositio

Props & Stat React context AP

Hooks & Lifecycle Advanced & Custom hook

Lists & key HOC + Render prop

Forms + Event handlin Portals + Error boundarie

Refs & optimizations Internals & Reconcilation

React Ecosystem

Redu Axio

React route React Quer

Styled component React i 18Nex
Material Reac Framer Motio

React hook Form / Formi Jest + React testing librar

Apollo Client + GraphQL NextJS
 Recommended Tools
Editor: Visual Studio Code

Browser: Chrome & Developer tools

Language: TypeScript

Version control: Git

Task runner: npm / yarn

Linter: ESLint

Formatter: Prettier

Bundler: Webpack / ViteJS

Commit hook: Husky

Frontend Concepts
Responsive Web desig Jam stac
Progressive Web App Test driven developmen
Web Component Search Engine Optimizatio
SSR, SSG, IS Web Perforamnc
Design Pattern Accessibilit
Reactive programmin Web Securit
Functional programmin User experienc
Micro frontend CI/CD

Good to know
SASS & PostCS Gatsb
Storyboo TailWind / Bootstra
Cypres StencilJS / Li
D3j Electro
Docke Threej
AW Babe
Firebas Web Assembl
Protocol Buffers / gRP NodeJ
RxJS Web 3.0
 Recommended Roadmap

HTML5 CSS JavaScript

web

Beginner
Fundamentals
build projects while learning

GIt Basics Redux React

BOM & DOM Intermediate

build projects while learning

Advanced
React

TypeScript
CSS & JS in depth

Intermediate Web performance &

accessibility
build projects while learning

Never
Design

NextJS
ends... patterns

For frontend Materials click here Created by

This document is a guideline based on personal knowledge & opinions Sadanand Akshay Pai