Get started with the fundamentals of the design system, utility classes, and resetting styles to build consistent UI foundations.

Learn to work with color systems, typography, spacing, and reusable patterns to elevate your design.

Discover advanced UI patterns and indicators. Begin assembling your own website layout.

Put your knowledge to the test with an interactive assignment.

Understand layout fundamentals by building a responsive grid-based design, refining typography and visuals, and deploying your polished project to Netlify.

Check your understanding with a graded assignment.

Learn how to set up and style a responsive mobile navigation system, complete with layout tweaks, background styling, functionality, and animations.

Optimize your navigation for medium and large screens while ensuring accessibility and usability enhancements across all devices.

Assess your progress with an interactive assignment.

Build and refine a fully responsive destination page—from mobile to large screens—while addressing layout, alignment, and content enhancements with precision.

Reinforce your learning with a hands-on assignment.

Learn how to create an accessible tab navigation system from scratch, including keyboard navigation, dynamic tab activation, visual feedback, and progressive enhancements.

Prove what you know with an interactive assignment.