Frontend Learning Path

Session Goal

• Upgrade core frontend skills
• Focus on deep understanding & productivity
• Cover high-impact areas in:
  • CSS
  • JavaScript
  • TypeScript
  • React

CSS Mastery

Selectors

• Basic selector
• Combinator
• Class selector
• Id selector
• Attribute selector

Layouts & Positioning

• Box Model: padding, margin, border
• Position: Relative, absolute, sticky, fixed
• Flexbox & Grid

Visual Layers & Design

• z-index & stacking context
• Typography: line-height, font-size, spacing
• Units: rem, em, vh, vw
• Colors: rgba, hex, oklch, hsl
• Animations
• ???

Advanced Styling

• Transitions & keyframe animations
• CSS Variables (custom properties)
• Specificity, Cascade
• Media Queries & Container Queries

JavaScript Mastery

Core Concepts

• Scope, Hoisting, Closures
• this context
• Classes and functions
• Arrow functions
• Prototype
• Event Loop: microtasks vs macrotasks

DOM & Events

• DOM APIs
• Window object
• Event Bubbling & Capturing

Async Mastery

• Promises & Async/Await
• Generators
• Debounce vs Throttle

Object Handling

• Shallow vs Deep Copy
• Prototypes & Inheritance
• Spread, Rest, Destructuring

DOM Mastery

• DOM Basics
• Querying elements
• Adding/removing elements
• Getting element position
• Getting element dimensions

Browser Mastery

• How does browser work?
• https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/How_browsers_work

TypeScript Mastery

Practical TS

• Type Inference
• Union & Intersection Types
• Literal Unions vs Enums

Generics & Utilities

• Generic functions/components
• keyof, typeof, infer
• Utility types: Pick, Omit, Readonly, Const

Advanced TS

• Type Narrowing & Guards
• Declaration Merging
• Module Augmentation (3rd party types)

React Mastery

Hooks & Components

• Functional Components
• useState, useEffect, useMemo, useCallback
• Custom Hooks

Form Handling & Refs

• Controlled vs Uncontrolled inputs
• Using useRef for DOM manipulation

State & Architecture

• Context API
• Prop Drilling vs Lifting State
• Render Props & Compound Components

Performance & Safety

• Lazy Loading & Suspense
• Error Boundaries

React Tools

• React Router
• TanStack Query
• Zustand
• Zod

Cross-Cutting Power Tools

• Accessibility (ARIA, keyboard navigation)
• Code splitting & lazy loading
• Responsive Design Patterns
• Performance metrics: CLS, LCP, FID
• Component Composition best practices
• RTL + Jest: Frontend testing confidence
• Design Tokens & Theming

Server and Browser Deep Dive

• How browsers work: Parsing HTML, CSS, JS
• From server to browser: TCP, HTTP, Headers
• Chrome DevTools
• SSR, SSG, Hydration, CDN, Edge, PWA