Course Website

Create a project scaffold for an online course sales page:

FILES:
- index.html
- assets/css/style.css
- assets/js/main.js

In style.css, define CSS custom properties on :root:
- Font families: a premium serif or rounded sans-serif for
  headings, a clean sans-serif for body text
- Type scale: at least 6 steps from sm to 5xl
- Spacing scale: at least 8 steps from xs to 5xl
- Colors: a warm primary (amber, orange, or gold works well
  for courses), a high-contrast CTA color (green for "enroll"),
  neutral grays, dark background, white surface
- Border radii: sm (4px), md (8px), lg (16px), full (9999px)
- Shadows: sm, md, lg for card elevation
- Transitions: fast (0.15s), base (0.2s), slow (0.3s)
- Max content width: 1100px
- A full CSS reset (box-sizing, margin, padding)

In index.html, set up a minimal HTML5 document with lang="en",
viewport meta, and links to the stylesheet and script. Leave the
body empty for now.

Build the navigation and hero for this course sales page:

NAVIGATION:
- Sticky header that stays visible on scroll
- Course name or logo on the left
- Nav links: Curriculum, Instructor, Pricing, FAQ
- CTA button on the right: "Enroll Now" with a filled
  background using the CTA color
- Use <header> and <nav> with aria-label="Main navigation"
- Mobile: collapse links into a hamburger <button> with
  aria-expanded. Keep the CTA visible outside the menu.

HERO (two-column layout):
- Left column (text):
  - Small eyebrow text: course category (e.g. "ONLINE COURSE")
  - Large <h1>: outcome-focused headline, e.g.
    "Master [Skill] in 30 Days"
  - 2-sentence description of the transformation
  - Primary CTA: "Enroll Now" (large, filled button)
  - Stats row below the CTA: 3 metrics side by side
    (e.g. "2,400+ students", "12 hours", "4.9 ★ rating")

- Right column (media):
  - A video placeholder (16:9 aspect ratio container)
  - Center a play button icon inside it
  - Use a dark background with a subtle border

RESPONSIVE:
- Stack to single column on mobile (text above, video below)
- Stats row wraps naturally with flexbox

Use CSS custom properties for all values. BEM naming.

Build the curriculum section for this course sales page:

LAYOUT:
- Section <h2>: "What you'll learn"
- Subtitle: total number of modules, lessons, and hours
- Centered, max-width 800px container
- Add id="curriculum" for anchor navigation

MODULE ACCORDION:
- Use native <details> and <summary> for each module
- 4-5 modules with placeholder content
- Each <summary> shows:
  - Module number label (e.g. "MODULE 1")
  - Module title
  - Lesson count on the far right (e.g. "5 lessons")
  - Custom +/− indicator using ::after pseudo-element
- Inside each <details>, show a lesson list:
  - Each lesson is a row with a circle icon (play or
    checkmark), lesson title, and duration on the right
  - Use an <ol> for the lesson list

STYLING:
- Hide the default <details> disclosure triangle
- Modules separated by subtle borders
- Expanded module has a slightly different background
- Lesson rows have padding and hover states
- Duration text is muted and right-aligned

Include a total count summary at the bottom:
"5 modules · 32 lessons · 12 hours of content"

Build the instructor and social proof section:

INSTRUCTOR BIO:
- Section <h2>: "Meet your instructor"
- Two-column layout:
  - Left: circular photo placeholder (200x200)
    using <img> inside a rounded container
  - Right: instructor name (<h3>), title/role,
    and a 3-4 sentence bio paragraph
  - Add 2-3 credential badges below the bio
    (e.g. "10+ years experience", "50k+ students taught")
- Add id="instructor" for anchor navigation

STUDENT TESTIMONIALS:
- Subheading <h3>: "What students are saying"
- 2-column grid of testimonial cards (stack on mobile):
  - Each card uses <figure>, <blockquote>, <figcaption>
  - Star rating (5 stars using ★ characters)
  - Quote text (2-3 sentences)
  - Student avatar placeholder, name, and outcome
    (e.g. "Landed a frontend role at Google")
- Decorative quotation mark via CSS ::before
- 4 testimonials total

Keep backgrounds consistent with the page.
Use BEM naming for CSS classes.

Build the pricing section for this course sales page:

LAYOUT:
- Section <h2>: "Invest in your future"
- Centered, single pricing card (max-width 480px)
- Add id="pricing" for anchor navigation

PRICING CARD:
- Large price at the top: "$199" with a small "one-time" label
- Optional: show a crossed-out original price ("$399")
- A divider line
- "What's included" checklist using <ul>:
  - 32 video lessons (12+ hours)
  - Downloadable project files
  - Private community access
  - Certificate of completion
  - Lifetime updates
  - 1-on-1 bonus Q&A session
- Each item has a ✓ prefix
- Large CTA button: "Enroll Now" (full-width, filled)

GUARANTEE:
- Below the card, add a guarantee badge:
  - Shield icon (inline SVG) + text:
    "30-day money-back guarantee. No questions asked."
  - Centered, muted text, smaller font size

The card should have a prominent border or shadow to
stand out from the page background.

Build the FAQ section for this course sales page:

LAYOUT:
- Section <h2>: "Frequently asked questions"
- Centered, max-width 720px container
- Add id="faq" for anchor navigation

ACCORDION:
- Use native <details> and <summary> elements
- 6 questions specific to course purchases:
  - "Who is this course for?"
  - "Do I need any prior experience?"
  - "How long do I have access to the content?"
  - "What if I don't like the course?"
  - "Are there any prerequisites?"
  - "Do I get a certificate?"
- Each answer should be 2-3 sentences

STYLING:
- Each <details> has a bottom border separator
- <summary> has padding, cursor: pointer, and a
  +/− indicator on the right using ::after
- Hide the default disclosure triangle
- <summary> text is bold, answer text uses muted color
- Answers have top padding when expanded

Build the final enrollment CTA and footer for this course page:

ENROLLMENT CTA SECTION:
- Full-width section with a distinct background (darker or
  slightly lighter than the page)
- Centered layout:
  - Bold <h2>: "Start learning today"
  - One sentence reinforcing the transformation
  - Large CTA button: "Enroll Now for $199"
  - Guarantee reminder below: "30-day money-back guarantee"
- Generous vertical padding (at least 80px)

FOOTER:
- Use <footer> with role="contentinfo"
- 3-column grid layout:
  - Column 1: Course name, 1-sentence description
  - Column 2: "Course" links (Curriculum, Instructor,
    Pricing, FAQ)
  - Column 3: "Support" links (Contact, Help Center,
    Terms, Privacy)
- Bottom bar with copyright text on left
- Social links on right (Twitter/X, YouTube)
  with aria-label and target="_blank" rel="noopener noreferrer"

RESPONSIVE:
- Footer grid: 3 columns desktop, 1 column mobile
- CTA button full-width on mobile

Finalize this course sales page for production:

SEO:
- Complete <head> meta tags:
  - <title> matching the h1 + "| [Course Name]"
  - meta description (150-160 characters about the course)
  - Open Graph: og:title, og:description, og:image (1200x630),
    og:url, og:type="website"
  - Twitter card: summary_large_image
  - Canonical URL
  - Favicon and theme-color
- Add JSON-LD structured data using the Course schema:
  name, description, provider, instructor, offers (price,
  currency, availability)
- Verify heading hierarchy: single h1, no skipped levels

PERFORMANCE:
- Add loading="lazy" to all images below the fold
- Add width and height attributes to every <img>
- Add fetchpriority="high" to the hero video placeholder
- Add <link rel="preconnect"> for external font domains
- Minify the CSS

ACCESSIBILITY:
- Color contrast meets WCAG AA (4.5:1 text, 3:1 large text)
- Keyboard navigation: tab through the entire page, verify
  focus order, nothing trapped
- Skip link as first focusable element
- FAQ and curriculum accordions are keyboard-operable
- CTA buttons have descriptive, unique text
- Video placeholder has appropriate alt text

DEPLOYMENT:
- Add a netlify.toml or vercel.json with:
  - Custom 404 page
  - Security headers
  - Cache-Control for static assets
- Create a README.md with project name and deploy instructions