course learning education curriculum enrollment online lessons course learning education curriculum enrollment lessons instructor rating online online course detail page with enrollment learning platform course page with curriculum
Course Detail Base
Fetch pattern JSON:
curl https://webspire.de/patterns/course-detail/base.json base.html
<section class="ws-course-detail bg-[var(--ws-color-surface)] py-16">
<div class="mx-auto max-w-6xl px-6">
<!-- Hero Area -->
<div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
<div class="lg:col-span-2">
<!-- Video Placeholder -->
<div class="aspect-video w-full rounded-2xl bg-gradient-to-br from-indigo-200 via-purple-200 to-pink-200 dark:from-indigo-900 dark:via-purple-900 dark:to-pink-900" aria-label="Course preview video">
<div class="flex h-full items-center justify-center">
<div class="flex h-16 w-16 items-center justify-center rounded-full bg-white/80 shadow-lg">
<svg class="ml-1 h-8 w-8 text-indigo-600" fill="currentColor" viewBox="0 0 20 20"><path d="M6.3 2.841A1.5 1.5 0 004 4.11v11.78a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"/></svg>
</div>
</div>
</div>
<!-- Course Title -->
<h1 class="mt-6 text-3xl font-bold text-slate-900">Complete Web Development Bootcamp 2026</h1>
<!-- Instructor Card -->
<div class="mt-4 flex items-center gap-3">
<div class="h-10 w-10 rounded-full bg-gradient-to-br from-indigo-300 to-purple-400 dark:from-indigo-700 dark:to-purple-800" aria-hidden="true"></div>
<div>
<p class="text-sm font-semibold text-slate-900">Dr. Elena Rossi</p>
<p class="text-xs text-slate-500">Lead Instructor, Full-Stack Developer</p>
</div>
</div>
<!-- Rating & Students -->
<div class="mt-4 flex flex-wrap items-center gap-4">
<div class="flex items-center gap-1">
<div class="flex text-amber-400" aria-label="Rating: 4.8 out of 5">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<span class="text-sm font-semibold text-slate-900">4.8</span>
</div>
<span class="text-sm text-slate-500">12,480 students enrolled</span>
<span class="text-sm text-slate-500">Last updated March 2026</span>
</div>
<!-- Course Description -->
<div class="mt-8">
<h2 class="text-xl font-bold text-slate-900">What you'll learn</h2>
<div class="mt-4 space-y-3 text-slate-600">
<p>Master modern web development from scratch. This comprehensive bootcamp covers HTML, CSS, JavaScript, React, Node.js, databases, and deployment. Build 15+ real-world projects and graduate job-ready.</p>
<p>No prior coding experience required. You'll start with the fundamentals and progress to building full-stack applications with authentication, APIs, and cloud deployment.</p>
</div>
</div>
<!-- Curriculum Accordion -->
<div class="mt-8">
<h2 class="text-xl font-bold text-slate-900">Curriculum</h2>
<div class="mt-4 space-y-3">
<details class="group rounded-xl border border-slate-200" open>
<summary class="flex cursor-pointer items-center justify-between px-5 py-4 text-sm font-semibold text-slate-900">
Section 1: HTML & CSS Foundations
<svg class="h-5 w-5 shrink-0 text-slate-400 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
</summary>
<ul class="border-t border-slate-200 px-5 py-3">
<li class="flex items-center justify-between py-2 text-sm text-slate-600">
<span>Introduction to HTML5</span>
<span class="text-xs text-slate-400">14 min</span>
</li>
<li class="flex items-center justify-between py-2 text-sm text-slate-600">
<span>Semantic Elements & Accessibility</span>
<span class="text-xs text-slate-400">18 min</span>
</li>
<li class="flex items-center justify-between py-2 text-sm text-slate-600">
<span>CSS Box Model & Layout</span>
<span class="text-xs text-slate-400">22 min</span>
</li>
<li class="flex items-center justify-between py-2 text-sm text-slate-600">
<span>Flexbox & Grid Mastery</span>
<span class="text-xs text-slate-400">25 min</span>
</li>
</ul>
</details>
<details class="group rounded-xl border border-slate-200">
<summary class="flex cursor-pointer items-center justify-between px-5 py-4 text-sm font-semibold text-slate-900">
Section 2: JavaScript Essentials
<svg class="h-5 w-5 shrink-0 text-slate-400 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
</summary>
<ul class="border-t border-slate-200 px-5 py-3">
<li class="flex items-center justify-between py-2 text-sm text-slate-600">
<span>Variables, Types & Operators</span>
<span class="text-xs text-slate-400">16 min</span>
</li>
<li class="flex items-center justify-between py-2 text-sm text-slate-600">
<span>Functions & Scope</span>
<span class="text-xs text-slate-400">20 min</span>
</li>
<li class="flex items-center justify-between py-2 text-sm text-slate-600">
<span>DOM Manipulation</span>
<span class="text-xs text-slate-400">24 min</span>
</li>
</ul>
</details>
<details class="group rounded-xl border border-slate-200">
<summary class="flex cursor-pointer items-center justify-between px-5 py-4 text-sm font-semibold text-slate-900">
Section 3: React & Modern Frontend
<svg class="h-5 w-5 shrink-0 text-slate-400 transition-transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
</summary>
<ul class="border-t border-slate-200 px-5 py-3">
<li class="flex items-center justify-between py-2 text-sm text-slate-600">
<span>React Components & JSX</span>
<span class="text-xs text-slate-400">19 min</span>
</li>
<li class="flex items-center justify-between py-2 text-sm text-slate-600">
<span>State Management with Hooks</span>
<span class="text-xs text-slate-400">28 min</span>
</li>
<li class="flex items-center justify-between py-2 text-sm text-slate-600">
<span>Routing & Navigation</span>
<span class="text-xs text-slate-400">15 min</span>
</li>
<li class="flex items-center justify-between py-2 text-sm text-slate-600">
<span>API Integration & Data Fetching</span>
<span class="text-xs text-slate-400">22 min</span>
</li>
</ul>
</details>
</div>
</div>
</div>
<!-- Right: Sticky Sidebar -->
<aside class="lg:sticky lg:top-8 lg:self-start">
<div class="rounded-2xl border border-slate-200 bg-[var(--ws-color-surface)] p-6 shadow-sm">
<p class="text-3xl font-bold text-slate-900">€49.99</p>
<p class="mt-1 text-sm text-slate-500 line-through">€199.99</p>
<p class="mt-1 text-sm font-medium text-emerald-600">75% off — 2 days left</p>
<a href="#" class="mt-6 block w-full rounded-xl bg-indigo-600 px-6 py-3 text-center text-sm font-semibold text-white transition hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-slate-800">Enroll Now</a>
<p class="mt-3 text-center text-xs text-slate-400">30-day money-back guarantee</p>
<hr class="my-6 border-slate-200">
<h3 class="text-sm font-semibold text-slate-900">This course includes:</h3>
<ul class="mt-3 space-y-2.5">
<li class="flex items-center gap-2 text-sm text-slate-600">
<svg class="h-4 w-4 shrink-0 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
42 hours of video content
</li>
<li class="flex items-center gap-2 text-sm text-slate-600">
<svg class="h-4 w-4 shrink-0 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
15 real-world projects
</li>
<li class="flex items-center gap-2 text-sm text-slate-600">
<svg class="h-4 w-4 shrink-0 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Lifetime access
</li>
<li class="flex items-center gap-2 text-sm text-slate-600">
<svg class="h-4 w-4 shrink-0 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Certificate of completion
</li>
<li class="flex items-center gap-2 text-sm text-slate-600">
<svg class="h-4 w-4 shrink-0 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Downloadable resources
</li>
<li class="flex items-center gap-2 text-sm text-slate-600">
<svg class="h-4 w-4 shrink-0 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
Community access
</li>
</ul>
</div>
</aside>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
courselearningeducationcurriculumenrollmentonlinelessons
Slots
| Name | Required | Description |
|---|---|---|
| video-hero | Yes | Video placeholder with play button overlay. |
| course-info | Yes | Title, instructor card, rating, and student count. |
| description | Yes | Course description prose. |
| curriculum | Yes | Accordion sections with lesson items and durations. |
| sidebar | Yes | Sticky sidebar with price, enroll CTA, and includes list. |