Scribd
Upload
58 views4 pages

2022 FE Roadmap

The document provides a checklist and roadmap for frontend development. It covers HTML, CSS, JavaScript, frameworks like React, tools, concepts and recommended learning paths from beginner to advanced levels.

Uploaded by

সপ্তক মন্ডল
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
58 views4 pages

2022 FE Roadmap

The document provides a checklist and roadmap for frontend development. It covers HTML, CSS, JavaScript, frameworks like React, tools, concepts and recommended learning paths from beginner to advanced levels.

Uploaded by

সপ্তক মন্ডল
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/ 4

2022 Frontend evelopmen D t

Interview Checklist & oadmap R

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

CSS
Selectors asic omplex
(b ,c Shadow
Psuedo selector Colors + Gradient
Specificity & inheritanc Transforms & Transition
Box ode
m Animation
Units ispla
,D 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
destructuring & 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 i18Nex

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 Performanc
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

Intermediate
BOM & DOM

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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy