Frontend Mastery

Semantic markup, selectors, layout, and responsive design.

• 1Frontend Drill for e-commerce product page #1
• 2Sprint: reduce bundle size #2
• 3Component Checkpoint #3
• 4UI Lab for real-time chat interface #4
• 5Frontend Mastery Playbook #5
• 6Frontend Drill for search with filters #6
• 7Sprint: reduce layout shift #7
• 8Component Checkpoint #8
• 9UI Lab for e-commerce product page #9
• 10Frontend Mastery Playbook #10
• 11Frontend Drill for multi-step form wizard #11
• 12Sprint: optimize render performance #12
• 13Component Checkpoint #13
• 14UI Lab for search with filters #14
• 15Frontend Mastery Playbook #15
• 16Frontend Drill for landing page with animations #16
• 17Sprint: improve component reusability #17
• 18Component Checkpoint #18
• 19UI Lab for multi-step form wizard #19
• 20Frontend Mastery Playbook #20
• 21Frontend Drill for media gallery #21
• 22Sprint: improve test coverage #22
• 23Component Checkpoint #23
• 24UI Lab for landing page with animations #24
• 25Frontend Mastery Playbook #25
• 26Frontend Drill for dashboard with charts #26
• 27Sprint: enhance user experience #27

Variables, functions, DOM manipulation, and events.

• 28Frontend Drill for real-time chat interface #1
• 29Sprint: optimize render performance #2
• 30Component Checkpoint #3

Components, JSX, props, state, and basic hooks.

Composition, higher-order components, and render props.

Context, Redux, Zustand, and data flow patterns.

React Router, nested routes, and programmatic navigation.

Memoization, lazy loading, virtualization, and bundle splitting.

ARIA, keyboard navigation, screen readers, and WCAG.

Jest, React Testing Library, Cypress, and E2E strategies.

Component libraries, tokens, documentation, and governance.

Next.js, Remix, hydration, and edge rendering.

Monorepos, micro-frontends, and scalable app structure.