Apply all XD skills in a complete end-to-end project — read an XD design file, extract all specifications using the Inspect panel and share link, and implement a fully accessible, responsive course listing page in HTML and CSS.
This capstone lesson brings together every XD skill from this module: reading layer hierarchy, extracting Inspect panel values, translating Auto Layout to Flexbox, mapping variant states to CSS pseudo-classes, following responsive constraints, and using prototype interactions to understand animation specifications.
You will implement a course listing page with four sections: a sticky header navigation, a hero section with search, a course grid with card components, and a pagination footer. The design includes mobile and desktop artboards, a complete component variant set, and a prototype with hover and filter interactions.
Work through each section methodically: read the XD spec, plan your CSS, implement, then compare against the artboard.
Before writing a single line of CSS, spend 30 minutes auditing the XD file. This prevents missed states, incorrect values, and implementation rework.
Design audit checklist:
1Desktop artboards found:
2- Home / Courses (1440px) — main listing page
3- Home / Courses — Hover State (1440px) — card hover
4- Home / Courses — Filter Open (1440px) — filter panel state
5
6Mobile artboards found:
7- Home / Courses — Mobile (375px) — mobile layout
8- Home / Courses — Mobile Filter (375px) — mobile filter1Component States found in artboards
2Header Nav Link Default, Hover, Active (current page)
3Search Input Default, Focused, Filled, Error (no results)
4Filter Dropdown Closed, Open, Option Hovered, Option Selected
5Course Card Default, Hovered
6Pagination Btn Default, Hover, Disabled (prev on page 1), Active (current)
7Category Badge Default (4 color variants by category)1Element Desktop Mobile
2Header Full nav visible Hamburger menu
3Hero heading 60px 36px
4Search bar 560px wide 100% width
5Course grid 3 columns 1 column
6Card 280px fixed 100% width
7Pagination Numbers shown Prev/Next only1Interaction Transition Duration Easing
2Filter dropdown open Slide Down 200ms Ease Out
3Card hover state Auto-Animate 150ms Ease
4Filter option select Auto-Animate 100ms Ease Out
5Mobile menu open Slide from right 250ms Ease Out1? Card shadow: visible in hover state but no values in Inspect panel — need confirmation
2? Search error state: 'No results' text uses what font size? (Inspect shows 14px and 16px in different artboards)
3? Badge colors: category-specific, how many categories are there?A CSS plan derived directly from XD artboard analysis prevents scope creep and ensures every XD specification maps to a specific CSS rule.
CSS custom properties (from XD CC Library colors):
1:root {
2 /* Palette */
3 --blue-600: #2563eb;
4 --blue-700: #1d4ed8;
5 --neutral-900: #111827;
6 --neutral-700: #374151;
7 --neutral-500: #6b7280;
8 --neutral-200: #e5e7eb;
9 --neutral-50: #f9fafb;
10 --green-600: #16a34a;
11 --purple-600: #9333ea;
12 --amber-500: #f59e0b;
13 --rose-600: #e11d48;
14
15 /* Semantic */
16 --color-text: var(--neutral-900);
17 --color-muted: var(--neutral-500);
18 --color-border: var(--neutral-200);
19 --color-bg-surface: var(--neutral-50);
20 --color-action: var(--blue-600);
21
22 /* Spacing (from XD spacing measurements) */
23 --space-1: 0.25rem; /* 4px */
24 --space-2: 0.5rem; /* 8px */
25 --space-3: 0.75rem; /* 12px */
26 --space-4: 1rem; /* 16px */
27 --space-6: 1.5rem; /* 24px */
28 --space-8: 2rem; /* 32px */
29 --space-10: 2.5rem; /* 40px */
30 --space-12: 3rem; /* 48px */
31
32 /* Typography scale */
33 --text-sm: 0.875rem; /* 14px */
34 --text-base: 1rem; /* 16px */
35 --text-lg: 1.125rem; /* 18px */
36 --text-xl: 1.25rem; /* 20px */
37 --text-3xl: 1.875rem; /* 30px */
38 --text-5xl: 3.75rem; /* 60px — hero heading desktop */
39 --text-hero: clamp(2.25rem, 5vw + 0.5rem, 3.75rem); /* fluid 36px → 60px */
40}Component file structure plan:
1src/styles/
2├── tokens.css → CSS custom properties
3├── reset.css → CSS reset
4├── base.css → body, typography defaults
5├── header.css → .site-header, .nav-link, .nav-cta
6├── hero.css → .hero-section, .search-form, .filter-row
7├── course-grid.css → .courses-grid, .course-card, .course-badge
8├── pagination.css → .pagination, .page-btn
9└── main.css → imports all aboveComponent rule count estimate:
1Header: 8 rules (header, logo, nav, nav-link states, cta button)
2Hero: 12 rules (section, heading, sub, search form, input, btn, filter)
3Course grid: 15 rules (grid, card, thumbnail, body, title, meta, cta)
4Pagination: 6 rules (nav, btn states)
5Responsive: 8 media query rules
6Total: ~49 CSS rules across 5 filesStarting with the header and hero, read each value directly from XD Inspect panel.
Header implementation:
1/* Header values from XD:
2 Height: 64px, Padding: 0 40px, Bg: #FFFFFF, Border: 1px #E5E7EB
3 Logo width: 148px, Nav gap: 4px, CTA: 112×40px radius:8px
4 Nav link padding: 8px 12px, radius: 6px */
5
6.site-header {
7 display: flex;
8 align-items: center;
9 justify-content: space-between;
10 height: 4rem; /* 64px */
11 padding: 0 2.5rem; /* 0 40px */
12 background-color: #ffffff;
13 border-bottom: 1px solid var(--color-border);
14 position: sticky;
15 top: 0;
16 z-index: 100;
17 backdrop-filter: blur(8px);
18 background-color: rgb(255 255 255 / 0.92);
19}
20
21.nav {
22 display: flex;
23 align-items: center;
24 gap: 0.25rem; /* 4px */
25 list-style: none;
26 margin: 0;
27 padding: 0;
28}
29
30.nav-link {
31 display: inline-flex;
32 align-items: center;
33 padding: 0.5rem 0.75rem; /* 8px 12px */
34 border-radius: 0.375rem; /* 6px */
35 font-size: var(--text-base);
36 font-weight: 500;
37 color: var(--neutral-700);
38 text-decoration: none;
39 transition: background-color 150ms ease, color 150ms ease;
40}
41
42.nav-link:hover { background-color: var(--color-bg-surface); color: var(--neutral-900); }
43.nav-link[aria-current="page"] { background-color: #eff6ff; color: var(--blue-600); font-weight: 600; }Hero implementation:
1/* Hero values from XD:
2 Padding: 80px 40px, Bg: #F9FAFB
3 Heading: 60px/700/1.2 (desktop), 36px on mobile
4 Subheading: 20px/400/1.5 #6B7280
5 Search bar: 560px wide, 52px high, radius:12px, border:1.5px #D1D5DB
6 Search input: 16px/400 placeholder #9CA3AF */
7
8.hero-section {
9 padding: var(--space-12) 2.5rem; /* 48px → use space-12; 40px horizontal */
10 background-color: var(--color-bg-surface);
11 text-align: center;
12}
13
14.hero-heading {
15 font-size: var(--text-hero); /* clamp 36px → 60px */
16 font-weight: 700;
17 line-height: 1.2;
18 color: var(--color-text);
19 margin: 0 0 1rem;
20}
21
22.hero-sub {
23 font-size: var(--text-xl); /* 20px */
24 font-weight: 400;
25 line-height: 1.5;
26 color: var(--color-muted);
27 margin: 0 0 2.5rem;
28 max-width: 40rem; /* keeps comfortable line length */
29 margin-inline: auto;
30}
31
32.search-form {
33 display: flex;
34 align-items: center;
35 gap: var(--space-2);
36 max-width: 35rem; /* 560px */
37 margin: 0 auto;
38}
39
40.search-input {
41 flex: 1;
42 height: 3.25rem; /* 52px */
43 padding: 0 var(--space-4);
44 border: 1.5px solid var(--neutral-200);
45 border-radius: 0.75rem; /* 12px */
46 font-size: var(--text-base);
47 outline: none;
48 transition: border-color 150ms ease, box-shadow 150ms ease;
49}
50
51.search-input:focus {
52 border-color: var(--blue-600);
53 box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
54}
55
56.search-input::placeholder { color: #9ca3af; }Course card grid implementation and final validation process.
Course card CSS from XD Inspect:
1/* Card values: W:280px, H:auto, Radius:12px, Border:1px #E5E7EB
2 Thumbnail: 280×160px, Object-fit:cover
3 Body: padding 16px, gap 8px
4 Category badge: 12px/500, padding 4px 8px, radius:4px
5 Title: 18px/600/#111827, line-height:1.44, 2-line clamp
6 Meta: 13px/400/#6B7280
7 Enroll CTA: 100% width, 44px height, radius 8px
8 Hover: border-color #2563EB, shadow 0 8px 24px #0000001A */
9
10.courses-grid {
11 display: grid;
12 grid-template-columns: repeat(auto-fill, minmax(min(17.5rem, 100%), 1fr));
13 gap: var(--space-6); /* 24px */
14 padding: var(--space-8) 2.5rem; /* 32px 40px */
15}
16
17.course-card {
18 display: flex;
19 flex-direction: column;
20 border-radius: 0.75rem; /* 12px */
21 border: 1px solid var(--color-border);
22 background-color: #ffffff;
23 overflow: hidden;
24 text-decoration: none;
25 color: inherit;
26 transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
27}
28
29.course-card:hover {
30 border-color: var(--blue-600); /* XD hover border */
31 box-shadow: 0 8px 24px rgb(0 0 0 / 0.1); /* XD hover shadow */
32 transform: translateY(-2px);
33}
34
35.course-card__thumbnail {
36 width: 100%;
37 height: 10rem; /* 160px */
38 object-fit: cover;
39 display: block;
40}
41
42.course-card__body {
43 display: flex;
44 flex-direction: column;
45 gap: var(--space-2); /* 8px */
46 padding: var(--space-4); /* 16px */
47 flex: 1;
48}
49
50/* Category badge: 4 color variants by category */
51.course-badge {
52 display: inline-flex;
53 align-items: center;
54 padding: 0.25rem 0.5rem; /* 4px 8px */
55 border-radius: 0.25rem; /* 4px */
56 font-size: 0.75rem; /* 12px */
57 font-weight: 500;
58 width: fit-content;
59}
60.course-badge[data-cat="frontend"] { background-color: #dbeafe; color: var(--blue-600); }
61.course-badge[data-cat="backend"] { background-color: #f3e8ff; color: var(--purple-600); }
62.course-badge[data-cat="database"] { background-color: #fef3c7; color: var(--amber-500); }
63.course-badge[data-cat="devops"] { background-color: #dcfce7; color: var(--green-600); }
64
65.course-card__title {
66 font-size: var(--text-lg); /* 18px */
67 font-weight: 600;
68 line-height: 1.44;
69 color: var(--neutral-900);
70 margin: 0;
71 display: -webkit-box;
72 -webkit-line-clamp: 2;
73 -webkit-box-orient: vertical;
74 overflow: hidden;
75}
76
77.course-card__meta {
78 font-size: 0.8125rem; /* 13px */
79 color: var(--color-muted);
80 display: flex;
81 align-items: center;
82 gap: var(--space-1);
83 margin-top: auto; /* pushes meta to bottom before CTA */
84}
85
86.course-card__cta {
87 display: flex;
88 align-items: center;
89 justify-content: center;
90 width: 100%;
91 height: 2.75rem; /* 44px */
92 border-radius: 0.5rem; /* 8px */
93 background-color: var(--blue-600);
94 color: #ffffff;
95 font-size: var(--text-base);
96 font-weight: 600;
97 border: none;
98 cursor: pointer;
99 text-decoration: none;
100 transition: background-color 150ms ease;
101}
102
103.course-card__cta:hover { background-color: var(--blue-700); }
104
105/* Mobile responsive: 1 column, no horizontal padding on grid */
106@media (max-width: 47.9375rem) {
107 .courses-grid { grid-template-columns: 1fr; padding: var(--space-4); }
108 .hero-section { padding: var(--space-8) var(--space-4); }
109 .site-header { padding: 0 var(--space-4); }
110 .nav { display: none; } /* replaced by hamburger menu on mobile */
111}Final validation checklist (run after implementation):
1[ ] Header sticky on scroll — check in browser with content below
2[ ] Nav link hover: background changes on mouse-over
3[ ] Nav current page: correct blue highlight
4[ ] Search focus ring: blue outline, no layout shift
5[ ] Cards load in grid — 3 columns on desktop, 1 on mobile
6[ ] Card hover: border turns blue, shadow appears, subtle lift
7[ ] Category badge colors: each category has correct color
8[ ] Title line-clamp: no text overflow on 2-line limit
9[ ] CTA button hover: background darkens
10[ ] All interactive elements have :focus-visible states
11[ ] Screenshot mobile at 375px: matches XD mobile artboard
12[ ] Screenshot desktop at 1440px: matches XD desktop artboard
13[ ] No horizontal scroll at any viewport width
14[ ] All font sizes match XD (use browser inspector to verify rem values)The semantic HTML structure for the complete course listing page, derived from the XD layer hierarchy and artboard structure.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>All Courses | DevBootstrap</title>
7 <link rel="preconnect" href="https://fonts.googleapis.com">
8 <link rel="stylesheet" href="/styles/main.css">
9</head>
10<body>
11
12 <!-- Header: 'Header' frame in XD, Auto Layout horizontal -->
13 <header class="site-header" role="banner">
14 <a href="/" class="site-logo" aria-label="DevBootstrap — home">
15 <img src="/images/logo.svg" alt="DevBootstrap" width="148" height="32">
16 </a>
17
18 <!-- Navigation: 'Nav Links' Auto Layout horizontal, gap 4px -->
19 <nav aria-label="Main navigation">
20 <ul class="nav" role="list">
21 <li><a href="/courses" class="nav-link" aria-current="page">Courses</a></li>
22 <li><a href="/guides" class="nav-link">Guides</a></li>
23 <li><a href="/community" class="nav-link">Community</a></li>
24 <li><a href="/pricing" class="nav-link">Pricing</a></li>
25 </ul>
26 </nav>
27
28 <div class="header-actions">
29 <a href="/login" class="nav-link">Sign in</a>
30 <a href="/signup" class="nav-cta">Start free</a>
31 </div>
32 </header>
33
34 <main id="main-content">
35 <!-- Hero: 'Hero Section' frame in XD -->
36 <section class="hero-section" aria-labelledby="hero-heading">
37 <h1 class="hero-heading" id="hero-heading">
38 Master modern development
39 </h1>
40 <p class="hero-sub">
41 1,800+ lessons across web, mobile, and backend — structured paths for every level.
42 </p>
43
44 <!-- Search: 'Search Form' Auto Layout horizontal -->
45 <form class="search-form" role="search" action="/search" method="get">
46 <label for="course-search" class="sr-only">Search courses</label>
47 <input
48 id="course-search"
49 class="search-input"
50 type="search"
51 name="q"
52 placeholder="Search for a course or topic..."
53 autocomplete="off"
54 aria-label="Search courses"
55 >
56 <button class="search-btn" type="submit" aria-label="Search">
57 <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">
58 <path d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0Z"
59 stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
60 </svg>
61 </button>
62 </form>
63 </section>
64
65 <!-- Course Grid: 'Courses Section' frame -->
66 <section class="courses-section" aria-labelledby="courses-heading">
67 <h2 class="sr-only" id="courses-heading">Available courses</h2>
68
69 <!-- 'Course Grid' Auto Layout wrap -->
70 <div class="courses-grid">
71
72 <!-- Individual course card: 'Course Card / Default' component -->
73 <article class="course-card">
74 <a href="/courses/css-mastery" class="course-card__link">
75 <img
76 class="course-card__thumbnail"
77 src="/images/courses/css-mastery.jpg"
78 alt="Abstract geometric CSS shapes in blue and white"
79 width="280"
80 height="160"
81 loading="lazy"
82 >
83 <div class="course-card__body">
84 <!-- Category badge: 'Category Badge / Frontend' component -->
85 <span class="course-badge" data-cat="frontend">Frontend</span>
86 <h3 class="course-card__title">CSS Mastery: Grid, Flexbox, and Modern Layouts</h3>
87 <p class="course-card__meta">
88 <span>42 lessons</span>
89 <span aria-hidden="true">·</span>
90 <span>8 hours</span>
91 </p>
92 <a href="/courses/css-mastery" class="course-card__cta">Start learning</a>
93 </div>
94 </a>
95 </article>
96
97 <!-- Repeat course-card for each course -->
98
99 </div>
100
101 <!-- Pagination -->
102 <nav class="pagination" aria-label="Course pages">
103 <button class="page-btn" aria-label="Previous page" disabled>
104 <svg class="icon" aria-hidden="true" viewBox="0 0 24 24">
105 <path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2"/>
106 </svg>
107 </button>
108 <button class="page-btn page-btn--current" aria-current="page" aria-label="Page 1">1</button>
109 <button class="page-btn" aria-label="Page 2">2</button>
110 <button class="page-btn" aria-label="Page 3">3</button>
111 <span class="page-ellipsis" aria-hidden="true">…</span>
112 <button class="page-btn" aria-label="Page 12">12</button>
113 <button class="page-btn" aria-label="Next page">
114 <svg class="icon" aria-hidden="true" viewBox="0 0 24 24">
115 <path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2"/>
116 </svg>
117 </button>
118 </nav>
119 </section>
120 </main>
121
122 <footer class="site-footer" role="contentinfo">
123 <!-- Footer content -->
124 </footer>
125
126 <script src="/scripts/main.js" defer></script>
127</body>
128</html>Every semantic HTML decision maps back to an XD layer hierarchy reading: the 'Header' frame becomes <header role='banner'>, the 'Nav Links' Auto Layout becomes <ul role='list'>, each 'Course Card' component becomes <article>, and the artboard page structure becomes <main> with labeled sections. The aria-current='page' on the courses nav link comes from reading the XD active nav state. The disabled attribute on the 'Previous' pagination button comes from the XD artboard showing the previous button in the disabled variant on page 1. Nothing in this HTML is guessed — every structural decision is traceable to a specific XD design decision.
Congratulations on completing the Adobe XD module. You now have a complete toolkit for reading XD designs, extracting CSS values, working with the prototype and handoff workflows, and planning migration to modern tooling. The next module covers Figma for Developers — taking everything learned here into the industry-standard design tool of 2026.
Your progress is saved in this browser, on this device only.