CodeWiki

Frontend foundations

A practical route from browser-native structure and layout to accessible interfaces, reliable tests, and measured production delivery.

20 topics 4 checkpoints about 32 h beginner → intermediate
0%
0 of 20 topics · milestone 1 of 4 Continue: Frontend development foundations

The map

done you are here needs the checkpoint before it checkpoint
Frontend foundations: 20 topics, 4 checkpoints. Frontend development foundations Semantic HTML CSS flexbox CSS grid Responsive web design Form validation CSS animations Sass Tailwind CSS CSS-in-JS

Milestone 1 · Browser foundations

0 of 5 topics · about 83 min
now Frontend development foundations 18 min 2 Semantic HTML 17 min 3 CSS flexbox 15 min 4 CSS grid 18 min 5 Responsive web design 15 min
Checkpoint 1 unlocks M2

Milestone 2 · Accessible interfaces

0 of 5 topics · about 81 min
soon Accessibility 10 min
2 Form validation 17 min 3 CSS animations 17 min 4 Sass 17 min 5 Tailwind CSS 20 min
Checkpoint 2 unlocks M3

Milestone 3 · Component confidence

0 of 5 topics · about 58 min
1 CSS-in-JS 18 min
soon Storybook 10 min
soon Testing 10 min
soon Vitest 10 min
soon Playwright 10 min
Checkpoint 3 unlocks M4

Milestone 4 · Production delivery

0 of 5 topics · about 50 min
soon Vite guide 10 min
soon Code splitting 10 min
soon Tree shaking 10 min
soon Image optimization 10 min
soon Performance 10 min
Checkpoint 4 done

Why this order: Browser semantics and layout come first because every later abstraction renders onto that platform. Accessibility then constrains interaction and styling choices, component tooling makes those choices repeatable and testable, and build and performance work comes last so optimization is guided by verified behavior and measurements.