300 Progressive Practice Exercises
Welcome to the Web Design Mastery interactive exercise laboratory. This bank contains 300 progressive challenges spanning from fundamental HTML tags to advanced asynchronous JavaScript runtime engineering.
Exercise Catalog & Difficulty Distribution
| Module | Range | Target Count | Core Topics Covered |
|---|---|---|---|
| 01. Basic HTML | EX-BHTML-01 to EX-BHTML-40 | 40 Problems | DOCTYPE, document skeleton, headings, lists, tables, forms, anchors, images |
| 02. Advanced HTML | EX-AHTML-01 to EX-AHTML-40 | 40 Problems | Semantic architecture, SEO meta, OpenGraph, <dialog>, <picture>, A11y & ARIA |
| 03. Basic CSS | EX-BCSS-01 to EX-BCSS-50 | 50 Problems | Selectors, box model, border-box, typography, colors, dimensions, positioning |
| 04. Advanced CSS | EX-ACSS-01 to EX-ACSS-60 | 60 Problems | Specificity, @layer, Flexbox axes, CSS Grid tracks, clamp(), animations, tokens |
| 05. Basic JavaScript | EX-BJS-01 to EX-BJS-50 | 50 Problems | Variables, types, operators, conditionals, loops, functions, array methods, DOM |
| 06. Advanced JavaScript | EX-AJS-01 to EX-AJS-60 | 60 Problems | Closures, execution context, this, Promises, async/await, Event Loop, Fetch API |
Module 01: Basic HTML Exercises (EX-BHTML-01 to 40)
EX-BHTML-01BeginnerDocument Structure
HTML5 Standards Skeleton
Write the minimal, standards-compliant HTML5 document structure containing the DOCTYPE, html root with English language attribute, UTF-8 character encoding, responsive viewport meta tag, title, and an empty body.
EX-BHTML-02BeginnerLinks & Anchors
Secure External Hyperlink
Create a hyperlink to 'https://developer.mozilla.org' that opens in a new browser tab and protects against reverse tabnabbing attacks.
EX-BHTML-03IntermediateTables
Accessible Data Table with Scope
Construct an accessible 3-column table showing 'Product', 'Quantity', and 'Price'. Ensure headers use the appropriate scope attribute and include a table caption.
EX-BHTML-04BeginnerForms
Explicit Accessible Form Label Binding
Create an email input field linked explicitly to a label using the 'for' and 'id' attributes. Make the input required and specify an autocomplete attribute.
EX-BHTML-05BeginnerSemantic HTML
Semantic Page Landmarks
Arrange a page layout utilizing header, nav, main, section, and footer elements without using any generic div tags.
Module 02: Advanced HTML Exercises (EX-AHTML-01 to 40)
EX-AHTML-01IntermediateHTML APIs
Native HTML5 Modal Dialog
Create a native <dialog> element containing an accessible form with method='dialog' that closes when a cancel button is pressed.
EX-AHTML-02AdvancedResponsive Images
Responsive Art-Direction Picture Element
Construct a <picture> element that serves 'hero-wide.avif' for screens wider than 1024px, 'hero-mobile.webp' for screens under 768px, and falls back to 'hero.jpg'.
EX-AHTML-03IntermediateForms Validation
Constraint Validation Regex Pattern
Create a text input that strictly accepts a US telephone format '(123) 456-7890' using the HTML5 pattern attribute and custom validation message title.
Module 03: Basic CSS Exercises (EX-BCSS-01 to 50)
EX-BCSS-01BeginnerBox Model
Universal Box-Sizing Reset
Write the standard universal CSS rule that resets margins, paddings, and applies border-box box-sizing across all elements and pseudo-elements.
EX-BCSS-02IntermediatePositioning
Centering with Absolute Positioning
Given a parent container with position: relative, center a child box perfectly in the center horizontally and vertically using absolute positioning and transforms.
EX-BCSS-03BeginnerAccessibility
Accessible Custom Focus Ring
Style all buttons to remove the default outline on mouse click while displaying a prominent 2px solid cyan focus ring when navigated via keyboard.
Module 04: Advanced CSS Exercises (EX-ACSS-01 to 60)
EX-ACSS-01IntermediateCSS Grid
Responsive Auto-Fitting Grid
Create a responsive card gallery grid where columns automatically calculate their width, never dropping below 260px, without writing any media queries.
EX-ACSS-02AdvancedModern CSS
Relational Parent Selector :has()
Write a CSS rule that adds a 3px solid sky-blue border to a .card element only if it contains an active checkbox (<input type='checkbox':checked>) inside it.
EX-ACSS-03IntermediateResponsive Design
Fluid Typography with clamp()
Define an h1 font-size that scales smoothly between a minimum of 24px (1.5rem) and a maximum of 48px (3rem) based on viewport width.
Module 05: Basic JavaScript Exercises (EX-BJS-01 to 50)
EX-BJS-01BeginnerArrays & Sets
Array Deduplication Function
Write a function 'removeDuplicates(arr)' that takes an array with duplicate numbers and returns a new array containing only unique numbers using modern ES6 features.
EX-BJS-02IntermediateDOM Events
Form Submission & Validation
Attach an event listener to a form (#loginForm) that prevents default submission, checks if the password input has at least 8 characters, and alerts an error if invalid.
Module 06: Advanced JavaScript Exercises (EX-AJS-01 to 60)
EX-AJS-01IntermediateClosures
Private State Bank Counter via Closures
Write a function 'createCounter(start = 0)' that returns an object with increment(), decrement(), and getValue() methods. The internal count must not be accessible directly from the outside.
EX-AJS-02AdvancedPerformance
Production Debounce Utility
Implement a reusable 'debounce(fn, delay)' function that delays execution until the user has stopped calling the function for the specified milliseconds.
EX-AJS-03AdvancedAsync & APIs
Resilient Fetch with AbortController
Write an async function 'fetchWithTimeout(url, timeoutMs = 5000)' that cancels the HTTP request and throws an error if the server does not respond within the timeout limit.
TIP
For the complete reference answer key of all 300 exercises across all 6 modules, visit the Master Answer Key.