Learning Path
6 items | about 34 min total
Step 1 | Challenge
Practice basic HTML structure by building a beginner-friendly personal profile webpage with a heading, bio, hobbies list, and link.
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 2 | Challenge
Practice HTML form elements by creating a clean, accessible contact form page that collects a user's name, email, and message.
Step 3 | Challenge
Build a beginner-friendly semantic HTML navigation bar with a site name, accessible links, and simple CSS for a clean horizontal website header.
Step 4 | Challenge
Create a responsive image gallery with category filter buttons using HTML, CSS, and vanilla JavaScript while practicing DOM manipulation, event handling, and data attributes.
Step 5 | Challenge
Create a responsive, beginner-friendly FAQ accordion using semantic HTML, native details and summary elements, and CSS styling without JavaScript.