Topic
10 resources tagged with CSS.
Build a responsive product filtering interface with Vanilla JavaScript. Practice search, category filtering, price filtering, DOM updates, empty states, and responsive UI behavior in this practical coding challenge.
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.
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.
Practice building a keyboard-friendly, ARIA-supported accordion component using semantic HTML, responsive CSS, and vanilla JavaScript.
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.
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.
Build an accessible, mobile-friendly responsive navbar with semantic HTML, CSS Flexbox, media queries, and vanilla JavaScript for a working hamburger menu.
Practice CSS Flexbox by building a responsive product card grid that displays four columns on desktop, two columns on tablet, and one column on mobile.
Create a responsive, beginner-friendly FAQ accordion using semantic HTML, native details and summary elements, and CSS styling without JavaScript.
Build a beginner-friendly semantic HTML navigation bar with a site name, accessible links, and simple CSS for a clean horizontal website header.
If a related tutorial is missing, send a topic request through the contact page.