WDA™ Exam Syllabus

Exam: WDA™ – Certified Associate Web Developer

Exam Version: WDA-41-01

Status: ACTIVE

The WDA exam consists of 40 single-select and multiple-select items designed to assess a candidate’s ability to author semantic HTML, apply maintainable CSS, and build responsive, accessible web pages. The exam evaluates practical knowledge in document structure, text and media markup, forms, CSS selectors and cascade/specificity, typography and color, the box model and positioning, modern layout (Flexbox/Grid), media queries, and foundational accessibility and performance practices.

Each item is worth a maximum of 10 points. After completion, the candidate’s raw score is normalized and presented as a percentage.

The exam is organized into five blocks, each focused on essential web development practices with HTML and CSS. The weight of each block indicates its importance in the overall exam.

WDA-41-01 Badge

The table below summarizes the distribution of exam items and their respective weight in the total exam score.

Block Number

Block Name

Number of Items

Weight

1

HTML Fundamentals

10

25%

2

CSS Fundamentals

9

22.5%

3

Integrating HTML and CSS

10

25%

4

Responsive Web Design and Layout Techniques

5

12.5%

5

Accessibility, Usability, and Best Practices

6

15%

 

TOTAL

40

100%

Exam Syllabus

Last updated: September 16, 2025

Aligned with Exam WDA-41-01

Exam Syllabus Contents


Block 1: HTML Fundamentals

10 objectives covered by the block → 10 exam items

1.1 Document Structure and Markup Basics (3)

Objective 1.1.1 Identify and apply DOCTYPE, html, head, and body tags correctly

  1. Place the HTML5 declaration <!DOCTYPE html> at the very top of every page.
  2. Use a single root <html lang="…"> element that wraps all content, with language set appropriately.
  3. Include a <head> section for metadata (character encoding, viewport, title) and a <body> for visible content.
  4. Ensure the basic skeleton is correctly ordered and closed to avoid quirks mode and parsing errors.

Objective 1.1.2 Incorporate appropriate metadata elements

  1. Set character encoding and viewport: <meta charset="utf-8">, <meta name="viewport" content="width=device-width, initial-scale=1">.
  2. Provide a concise, unique <title> and a descriptive <meta name="description"> for search and sharing.
  3. Add social preview metadata, favicons, and <meta name="robots"> directives when needed.
  4. Keep metadata inside <head> only; avoid deprecated or duplicate tags.

Objective 1.1.3 Construct well-formed markup

  1. Use proper nesting and close all non-void elements; quote attribute values and avoid duplicate IDs.
  2. Prefer semantic, standards-compliant elements; avoid obsolete tags and inline presentation.
  3. Escape special characters (&amp;, &lt;, &gt;) where required.

1.2 Structured and Semantic HTML Content (3)

Objective 1.2.1 Apply semantic tags like header, nav, section, article accurately

  1. Use <header> for introductory or navigational content and <nav> for primary sets of links.
  2. Structure pages with <main> (one per page), grouping related content with <section> and standalone pieces with <article>.
  3. Complement with <aside> for tangential content and <footer> for page or section endings.

Objective 1.2.2 Construct well-organized content using tables, lists, and paragraphs in HTML

  1. Reserve <table> for tabular data; include <caption>, <thead>, <tbody>, <tfoot>, and scope on <th>.
  2. Use <ul>/<ol> with <li> for lists; apply <dl>, <dt>, <dd> for term–definition pairs.
  3. Write text in <p> paragraphs; avoid using tables or multiple <br> for layout or spacing.

Objective 1.2.3 Implement headings, thematic breaks, and line breaks to structure content properly

  1. Use a logical heading hierarchy (<h1> to <h6>), typically one <h1> per page.
  2. Apply <hr> for thematic shifts between sections and <br> for meaningful single line breaks (e.g., addresses, poetry).

1.3 Media, Forms, and Navigation (4)

Objective 1.3.1 Integrate multimedia content using img, video, and audio tags effectively

  1. Provide informative alt text for images; use width/height to reduce layout shift and srcset/sizes for responsiveness.
  2. Wrap media in <figure> with <figcaption> when a caption is needed.
  3. Enable controls for <video>/<audio>, add captions/subtitles via <track kind="captions">, and provide fallback text.
  4. Use appropriate loading strategies (e.g., loading="lazy" for images) and consider performance of media assets.

Objective 1.3.2 Embed external content using iframes and ensure it is responsive and accessible

  1. Include a descriptive title attribute for <iframe> content; allow fullscreen where appropriate.
  2. Apply security-related attributes like sandbox and referrerpolicy as needed.
  3. Make embeds responsive using CSS (e.g., aspect-ratio or a wrapper that preserves proportions).

Objective 1.3.3 Implement form elements accurately to interact with users and collect data

  1. Choose appropriate native controls – <input> (e.g., email, number, date, file), <select>/<option>/<optgroup>, <textarea>, and <button type="submit|reset|button"> – with meaningful name and id attributes.
  2. Use <datalist> for suggestions and <output> for computed values.
  3. Associate each control with a <label> (via for/id or by wrapping), group related fields with <fieldset> and a descriptive <legend>, and link help/error text using aria-describedby.
  4. Configure the <form> with the appropriate method (GET for idempotent queries, POST for data changes), action, and enctype (e.g., multipart/form-data for file uploads); set autocomplete and use novalidate only when justified.
  5. Leverage native HTML5 constraints (required, pattern, min, max, step, minlength/maxlength, multiple) and entry aids (inputmode, placeholder) to improve data integrity without scripting.

Objective 1.3.4 Develop navigational structures using hyperlinks, ensuring proper linking and user-friendly URL structures

  1. Use clear, descriptive link text within <a href>.
  2. Organize site navigation with lists inside <nav>, add breadcrumb and skip links where appropriate.
  3. Use meaningful and human-readable URLs.
  4. Use relative and absolute links appropriately.
  5. Apply rel="noopener noreferrer" when using target="_blank" to improve security and performance.

Block 2: CSS Fundamentals

9 objectives covered by the block → 9 exam items

2.1 Core CSS Concepts (3)

Objective 2.1.1 Recognize and use standard CSS syntax, selectors, properties, and values correctly

  1. Write valid declarations using the pattern selector { property: value; } and end each rule with a semicolon.
  2. Use common selectors (type, class, ID, attribute, pseudo-classes, pseudo-elements) appropriately and avoid overly broad matches.
  3. Apply core properties for the Box Model, typography, colors, and sizing with consistent units (rem, em, %, px).

Objective 2.1.2 Manage the CSS cascade, understand and apply specificity and inheritance of styles effectively

  1. Explain how source order, specificity, and !important determine the final computed style.
  2. Calculate specificity for compound selectors and reduce it when possible to prevent conflicts.
  3. Leverage inheritance for text properties and override intentionally with explicit rules.
  4. Adopt naming conventions (e.g., BEM) to minimize collisions and improve predictability.

Objective 2.1.3 Apply basic CSS styling to HTML elements

  1. Style text with font families, sizes, weights, line heights, and spacing for readability.
  2. Control colors, backgrounds, borders, and basic spacing using margin and padding.
  3. Use the Box Model intentionally, including box-sizing: border-box; for layout consistency.
  4. Create simple utility classes for common patterns (e.g., visually hidden, text centering).

2.2 Layout, Effects, and Positioning (3)

Objective 2.2.1 Manipulate layout and appearance of elements using advanced CSS properties

  1. Control display contexts with display, intrinsic sizing, overflow, and aspect ratio.
  2. Use modern sizing and spacing techniques (min(), max(), clamp(), logical properties) for responsive designs.
  3. Enhance presentation with shadows, rounded corners, filters, and blend modes judiciously.
  4. Apply custom properties (CSS variables) to centralize design tokens and reduce repetition.

Objective 2.2.2 Implement dynamic styles and transitions using CSS3 properties

  1. Create smooth state changes with transition on opacity, transform, and color.
  2. Animate with @keyframes and animation while preserving accessibility and performance.
  3. Use transform (translate, scale, rotate) and will-change when appropriate to improve rendering.
  4. Respect user preferences such as prefers-reduced-motion to reduce motion effects.

Objective 2.2.3 Apply various CSS positioning schemes to control layout flow and appearance

  1. Differentiate between static, relative, absolute, fixed, and sticky positioning.
  2. Use offsets (top, right, bottom, left) intentionally and understand containing blocks.
  3. Manage stacking contexts and z-index to resolve overlap predictably.

2.3 Frameworks, Preprocessors, and Performance (3)

Objective 2.3.1 Utilize CSS frameworks like Bootstrap for rapid, responsive design development

  1. Include framework CSS correctly and use the grid system, utilities, and components as designed.
  2. Override framework styles with minimal, scoped additions to preserve upgradability.
  3. Customize themes via variables/tokens and build steps when available.

Objective 2.3.2 Implement CSS preprocessors like Sass or Less to write more maintainable and scalable CSS

  1. Organize styles into partials and use imports to structure large codebases.
  2. Use variables, nesting, mixins, and functions to encapsulate reusable patterns.
  3. Leverage extends/placeholders carefully to avoid unintended selector bloat.
  4. Configure build pipelines to compile, autoprefix, and generate source maps.

Objective 2.3.3 Optimize CSS for performance and maintainability

  1. Minify and concatenate assets, employ HTTP caching, and defer noncritical CSS (e.g., critical CSS inlining).
  2. Reduce unused CSS with audits, pruning, and tree-shaking tools where safe.
  3. Limit selector complexity and depth to improve rendering performance.

Block 3: Integrating HTML & CSS

10 objectives covered by the block → 10 exam items

3.1 Stylesheets, precedence, and project structure (4)

Objective 3.1.1 Link external stylesheets and embed internal stylesheets in HTML documents, understanding their precedence

  1. Link external CSS with <link rel="stylesheet" href="css/styles.css" media="all"> placed in <head>, and order files from base to components to utilities.
  2. Embed internal CSS with a single <style> block in <head> for page-specific rules or prototypes.
  3. Understand precedence: inline > internal/external (by source order) > user agent, with specificity and !important further affecting the cascade.
  4. Use media queries on links (e.g., media="print") and prefer external files for caching and maintainability.

Objective 3.1.2 Apply inline styles when necessary, understanding their benefits and limitations

  1. Reserve inline styles for one-off overrides, email templates, or dynamic values injected by scripts.
  2. Recognize that inline styles increase specificity, can hinder reuse, and complicate theming.
  3. Avoid overusing style="" and prefer utility classes or tokens for consistency.
  4. Remove temporary inline styles during refactors to restore a clean cascade.

Objective 3.1.3 Manage style conflicts and ensure style consistency across the website

  1. Adopt naming conventions (e.g., BEM) and design tokens (CSS custom properties) to standardize decisions.
  2. Reduce specificity by favoring class selectors over IDs and deep descendants.
  3. Establish a layered stylesheet order (base → layout → components → utilities) to control overrides.
  4. Avoid !important except for utilities or accessibility fixes, and document any use clearly.

Objective 3.1.4 Understand and implement proper directory structures

  1. Organize assets into predictable folders such as /css, /js, /img, /fonts, and /assets.
  2. Use relative paths consistently (e.g., href="../css/app.css") and avoid fragile deep nesting.
  3. Separate source and build outputs (e.g., /src and /dist) when using tooling.
  4. Document path conventions and entry points (e.g., index.html) for team consistency.

3.2 Forms and interactive elements (3)

Objective 3.2.1 Construct and style HTML forms using appropriate form elements, attributes, and input types

  1. Lay out forms with CSS Grid or Flexbox, align labels and inputs, use gap for spacing, and let fields wrap on small screens.
  2. Keep forms readable with consistent typography and spacing; avoid fixed heights and prefer low-specificity class selectors.
  3. Reuse styles with CSS custom properties for colors, spacing, and font sizes.

Objective 3.2.2 Validate user inputs and interactions using HTML5 and simple JavaScript, ensuring form data integrity

  1. Use native HTML5 validation first; add small scripts only to prevent submit and show clear messages when needed.
  2. Show errors near fields and style :invalid/:valid states without causing layout shift.
  3. Move focus to the first error and announce a brief summary via an aria-live or role="alert" region.

Objective 3.2.3 Develop and style interactive elements ensuring user-friendly experience

  1. Use semantic controls (buttons for actions, links for navigation) and clear visual states (:hover, :focus-visible, :disabled).
  2. Ensure full keyboard access with a logical tab order and a visible focus indicator; avoid hover-only interactions.
  3. Provide comfortable touch targets and sufficient contrast, and keep motion subtle while respecting @media (prefers-reduced-motion).

3.3 Standards compliance and debugging (3)

Objective 3.3.1 Validate HTML and CSS to ensure they are free of syntax errors and comply with standards

  1. Run documents through HTML and CSS validators to catch syntax issues early.
  2. Confirm correct doctype, character encoding, and closing/nesting of elements.
  3. Use autoprefixing and linting tools to improve cross-browser robustness and consistency.

Objective 3.3.2 Debug and solve styling issues arising from CSS cascading and specificity conflicts

  1. Inspect computed styles and specificity to identify the winning rule and unintended overrides.
  2. Simplify or restructure selectors, reduce depth, and reorder files to resolve conflicts.
  3. Replace !important with proper architecture and utilities where possible.
  4. Test across breakpoints and themes to ensure fixes do not create regressions.

Objective 3.3.3 Use developer tools to inspect and debug HTML and CSS issues

  1. Leverage the Elements panel to edit rules live, toggle properties, and examine the Box Model.
  2. Use layout overlays, grid/flex inspectors, and responsive design mode to diagnose layout problems.
  3. Profile rendering and paint events when animating or handling large DOM trees.
  4. Persist fixes back to source files and commit with clear, focused messages.

Block 4: Responsive Web Design and Layout Techniques

5 objectives covered by the block → 5 exam items

4.1 Responsive design fundamentals (2)

Objective 4.1.1 Create responsive web designs using media queries, fluid grids, and flexible images

  1. Adopt a mobile-first approach, then layer breakpoints with media queries such as @media (min-width: 640px).
  2. Build fluid grids using percentages, fr units, and functions like min(), max(), and clamp().
  3. Make images flexible with max-width: 100%;, and serve responsive sources using srcset and sizes.
  4. Use consistent spacing scales and type scales that adapt across breakpoints.

Objective 4.1.2 Develop web designs that are mobile-friendly, focusing on optimal viewports and touch-friendly navigation

  1. Set the viewport meta tag for proper scaling: <meta name="viewport" content="width=device-width, initial-scale=1">.
  2. Provide touch-friendly targets (about 44×44 px), adequate spacing, and clear focus states.
  3. Avoid hover-only interactions; offer visible toggles and keyboard-accessible controls.

4.2 Modern layout systems (2)

Objective 4.2.1 Employ CSS Flexbox and Grid to create advanced, responsive layouts

  1. Use Flexbox for one-dimensional alignment, gap management, and content reordering when appropriate.
  2. Use CSS Grid for two-dimensional layouts with grid-template, auto-fit/auto-fill, and minmax().
  3. Leverage gap instead of margins for clean, consistent spacing between items.
  4. Combine grid areas and utility classes to keep markup semantic and styles maintainable.

Objective 4.2.2 Optimize layouts for various devices and screen sizes, ensuring cross-browser compatibility

  1. Test across common breakpoints using responsive design tools and real devices.
  2. Apply progressive enhancement and feature queries with @supports for fallbacks.
  3. Prevent overflow and layout shifts by setting intrinsic sizes and using content wrapping wisely.
  4. Use autoprefixing and conservative CSS features where necessary to support older browsers.

4.3 Performance for responsive experiences (1)

Objective 4.3.1 Implement performance optimization techniques such as lazy loading, image optimization, and code minification

  1. Enable native lazy loading with loading="lazy" and defer non-critical assets.
  2. Serve optimized images (correct dimensions, compression, and modern formats like WebP/AVIF).
  3. Minify and bundle CSS, and inline critical CSS for faster first paint.
  4. Leverage caching, preconnect/preload hints, and a performance budget to maintain speed.

Block 5: Accessibility, Usability, and Best Practices

6 objectives covered by the block → 6 exam items

5.1 Accessibility and usability (2)

Objective 5.1.1 Implement accessibility features, ensuring content is accessible to people with disabilities

  1. Provide text alternatives for non-text content with informative alt text, captions, and transcripts, and use semantic landmarks like <main>, <nav>, and <footer>.
  2. Ensure keyboard navigation and visible focus, manage focus order, and offer skip links for bypassing repetitive content.
  3. Meet color-contrast guidelines (e.g., 4.5:1 for body text) and do not convey meaning with color alone.
  4. Associate labels with form controls, provide clear error messages via aria-live, and respect motion preferences with @media (prefers-reduced-motion).

Objective 5.1.2 Evaluate and enhance the usability of web content, focusing on user-centric designs and clear, intuitive navigation

  1. Design clear information architecture with descriptive labels, consistent navigation, and breadcrumbs where appropriate.
  2. Use readable typography, adequate spacing, and scannable headings to improve comprehension.
  3. Provide predictable interactions, helpful empty states, and clear feedback for loading, success, and errors.
  4. Conduct lightweight usability reviews or tests and iterate based on observed friction points.

5.2 Best practices and quality assurance (2)

Objective 5.2.1 Develop web content adhering to industry best practices, including reusability, maintainability, and separation of concerns

  1. Separate structure, presentation, and behavior by keeping HTML semantic, CSS modular, and JavaScript focused on interactions.
  2. Adopt reusable components, design tokens (CSS custom properties), and naming conventions (e.g., BEM) for consistency.
  3. Organize files into predictable folders, document conventions, and use version control with clear commit messages.

Objective 5.2.2 Test and validate web content for cross-browser compatibility, performance, and adherence to web standards

  1. Validate HTML and CSS, and audit accessibility, internationalization, and print styles.
  2. Define a browser/device support matrix and use feature queries and progressive enhancement for fallbacks.
  3. Measure core performance metrics (e.g., LCP, CLS, INP) and maintain a performance budget.

5.3 SEO and analytics (2)

Objective 5.3.1 Implement SEO best practices to optimize website visibility in search engine results

  1. Write unique, descriptive <title> and <meta name="description"> tags and use a logical heading hierarchy.
  2. Use semantic HTML, internal linking with descriptive anchor text, and meaningful image alt attributes.
  3. Provide sitemaps and robots directives, use canonical URLs, and consider structured data where appropriate.
  4. Improve technical SEO with fast loading, mobile-friendly design, and stable layouts.

Objective 5.3.2 Understand and utilize web analytics to monitor website performance and user engagement

  1. Define KPIs and events that reflect business goals (e.g., sign-ups, purchases, or task completion).
  2. Implement pageview and event tracking with clear naming, parameters, and UTM conventions for campaigns.
  3. Segment reports by channel, device, geography, and cohort to identify patterns and opportunities.
  4. Respect privacy and consent requirements, anonymize data where needed, and iterate based on insights.

Download WDA-41-01 Exam Syllabus in PDF

MQC Profile

A Minimally Qualified Candidate (MQC) for the WDA-41-01 exam is an individual with foundational knowledge of semantic HTML and core CSS, plus an understanding of web standards and responsive design. The candidate can structure valid documents, apply styles using selectors and the cascade, integrate stylesheets effectively, and deliver accessible, mobile-friendly pages.

The MQC understands document structure and metadata, semantic elements and content grouping, forms and media, CSS syntax and specificity, layout with Flexbox and Grid, media queries, and basic performance practices. The candidate is familiar with debugging via browser developer tools, cross-browser testing, and the essentials of usability, SEO, and analytics; and can apply frameworks (e.g., Bootstrap) and preprocessors (e.g., Sass/Less) at a basic level.

This profile represents a blend of standards awareness, practical styling, and debugging skills needed to produce maintainable, responsive, and accessible web content.

Block 1: HTML Fundamentals

Minimum Coverage – the candidate can:

  • Assemble a valid HTML document with <!DOCTYPE html>, language on <html>, and appropriate <head> metadata (charset, viewport, title).
  • Apply semantic elements such as <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer> correctly.
  • Organize content with paragraphs, headings, lists, and data tables that use captions, headers, and proper scope.
  • Integrate images, video, and audio with alternatives and basic responsiveness, and build clear, descriptive navigation links.

Block 2: CSS Fundamentals

Minimum Coverage – the candidate can:

  • Write valid CSS using common selectors, properties, and units; and structure stylesheets for readability.
  • Manage the cascade, specificity, and inheritance to resolve conflicts without overusing !important.
  • Apply core styling for typography, color, spacing, and the box model, including box-sizing: border-box;.
  • Use modern properties, basic transitions/animations, and positioning appropriately while prioritizing maintainability.

Block 3: Integrating HTML & CSS

Minimum Coverage – the candidate can:

  • Link external stylesheets, embed internal styles, and recognize precedence relative to inline styles and source order.
  • Use inline styles sparingly, prefer class-based patterns, and maintain a clear directory structure for assets.
  • Construct and style forms with proper labels, input types, basic HTML5 validation, and accessible states.
  • Validate markup and CSS, inspect computed styles with developer tools, and resolve cascade/specificity issues.

Block 4: Responsive Web Design and Layout Techniques

Minimum Coverage – the candidate can:

  • Create responsive layouts with mobile-first media queries, fluid grids, and flexible images (srcset/sizes).
  • Employ Flexbox for one-dimensional alignment and CSS Grid for two-dimensional layouts using modern gap controls.
  • Set optimal viewports and provide touch-friendly, keyboard-accessible navigation patterns.
  • Optimize for different screens and browsers using progressive enhancement and appropriate fallbacks.

Block 5: Accessibility, Usability, and Best Practices

Minimum Coverage – the candidate can:

  • Implement accessibility fundamentals: semantic landmarks, labels, focus visibility, contrast, alternatives, and motion preferences.
  • Enhance usability with clear IA, consistent navigation, readable typography, and helpful feedback states.
  • Apply separation of concerns, reuse patterns and tokens, audit performance, and test cross-browser compliance.
  • Follow basic SEO practices (titles, descriptions, headings, alt text, internal links) and read analytics to guide improvements.

Passing Requirement

To pass the WDA-41-01 exam, a candidate should achieve a cumulative average score of at least 75% across all exam blocks.