Learning Path
9 items | about 61 min total
Step 1 | Snippet
Build an accessible, mobile-friendly responsive navbar with semantic HTML, CSS Flexbox, media queries, and vanilla JavaScript for a working hamburger menu.
Step 1 | Snippet
Build a reusable, accessible modal dialog with semantic HTML, modern CSS, and vanilla JavaScript, including ARIA attributes, focus trapping, Escape key support, and restored focus.
Step 1 | Snippet
Learn how to build a reusable debounced search input with vanilla JavaScript to reduce API calls, improve performance, and keep search results responsive.
Step 1 | Snippet
Build a lightweight, reusable, screen-reader-friendly toast notification component with plain HTML, CSS, and JavaScript. Includes auto-dismiss, manual close, toast types, and practical customization options.
Step 1 | Snippet
Learn how to build a responsive, accessible breadcrumb navigation component that updates a preview card with Unsplash images when users click a breadcrumb link. Includes semantic HTML, Flexbox layout, mobile behavior, JavaScript state handling, and customization tips.
Step 1 | Snippet
Build a polished and reusable copy-to-clipboard component with Vanilla JavaScript, modern UI styling, responsive layout, accessible feedback, Clipboard API support, and a legacy fallback.
Step 2 | Challenge
Create a responsive, beginner-friendly FAQ accordion using semantic HTML, native details and summary elements, and CSS styling without JavaScript.
Step 2 | Challenge
Learn how to build an accessible tabs component using semantic HTML, CSS, and vanilla JavaScript. Practice keyboard navigation, ARIA attributes, and dynamic tab switching with a beginner-friendly coding challenge and complete solution.
Step 2 | Challenge
Practice building a keyboard-friendly, ARIA-supported accordion component using semantic HTML, responsive CSS, and vanilla JavaScript.