Home Education Online Course Landing Page

Online Course Landing Page

A high-converting online course landing page with curriculum preview, instructor bio, and enrollment CTA

Course Landing Page E-learning
Copy this prompt and paste it into ChatGPT or Claude
Create a high-converting online course landing page for a course called "Full-Stack Web Development Bootcamp" taught by an instructor named Alex Rivera on a platform called "LearnCraft Academy". Include these sections:

1. HERO SECTION
- Split layout: left side content, right side course preview mockup (laptop showing course dashboard)
- Eyebrow text: "12-Week Online Bootcamp — Next Cohort Starts April 14"
- Headline: "Go From Zero to Full-Stack Developer in 12 Weeks"
- Subheadline: "Learn React, Node.js, PostgreSQL, and deploy real projects — with live mentorship and career support"
- Primary CTA: "Enroll Now — $599" with strikethrough original price "$1,199"
- Secondary CTA: "Watch Free Preview Lesson"
- Trust row: "4.9/5 rating", "2,800+ graduates", "94% completion rate", "Money-back guarantee"

2. SOCIAL PROOF BAR
- Horizontal logo strip: "Graduates hired at:" followed by 6 company logos (Google, Shopify, Stripe, Vercel, Figma, Notion)
- Subtle grayscale logos that colorize on hover
- Light gray background (#F8FAFC)

3. WHAT YOU'LL LEARN (2-column icon grid, 8 items)
- HTML, CSS & Responsive Design
- JavaScript ES6+ & TypeScript
- React & Next.js
- Node.js & Express
- PostgreSQL & Prisma ORM
- REST APIs & Authentication
- Git, GitHub & CI/CD
- Deployment on Vercel & AWS
- Each item has a small checkmark icon in indigo (#6366F1)

4. CURRICULUM BREAKDOWN (expandable accordion)
- Module 1: Foundations (Week 1-2) — HTML5 semantics, CSS Grid & Flexbox, responsive design, accessibility basics — 8 lessons, 3 projects
- Module 2: JavaScript Mastery (Week 3-4) — ES6+, DOM manipulation, async/await, TypeScript intro — 10 lessons, 2 projects
- Module 3: React & Frontend (Week 5-6) — Components, hooks, state management, Next.js, Tailwind CSS — 12 lessons, 2 projects
- Module 4: Backend Development (Week 7-8) — Node.js, Express, REST APIs, authentication with JWT — 10 lessons, 2 projects
- Module 5: Database & ORM (Week 9-10) — PostgreSQL, Prisma, migrations, data modeling, query optimization — 8 lessons, 2 projects
- Module 6: Capstone & Career (Week 11-12) — Full-stack capstone project, deployment, portfolio building, resume review, interview prep — 6 lessons, 1 major project
- Total displayed at bottom: "54 lessons • 12 hands-on projects • 1 capstone"
- Each module shows lesson count and project count badges

5. INSTRUCTOR SECTION
- Large photo of instructor Alex Rivera
- Name and title: "Alex Rivera — Senior Software Engineer & Educator"
- Bio: "Alex has 10 years of experience building products at startups and Fortune 500 companies. After teaching 50+ workshops and mentoring 500+ developers, he created this bootcamp to make professional web development accessible to everyone."
- Credentials row: "Ex-Shopify", "10 years experience", "500+ students mentored"
- Social links: Twitter, LinkedIn, GitHub

6. COURSE FORMAT DETAILS (3-column feature cards)
- Live Sessions
  - 2x per week, 90 minutes each
  - Tuesday & Thursday at 7 PM EST
  - Recorded for replay anytime
  - Icon: video camera

- Hands-On Projects
  - 12 guided projects + 1 capstone
  - Real-world scenarios
  - Code reviews from mentors
  - Icon: code brackets

- Community & Support
  - Private Discord with 2,800+ members
  - Weekly office hours
  - Peer study groups
  - Job board access
  - Icon: people group

7. STUDENT RESULTS (3 testimonial cards)
- Card 1: Photo, "I landed a junior dev role at a fintech startup 6 weeks after graduating. The portfolio projects made all the difference." — Maria Santos, Junior Developer at PayFlow — Previously: Marketing Coordinator
- Card 2: Photo, "Best investment I've made in my career. The live sessions and code reviews accelerated my learning 10x." — David Park, Frontend Engineer at Vercel — Previously: Graphic Designer
- Card 3: Photo, "As a self-taught developer, this bootcamp filled all the gaps. I finally feel confident shipping production code." — Aisha Johnson, Full-Stack Developer at Notion — Previously: Self-taught

8. PRICING SECTION
- Two options side by side:
  - One-Time Payment: $599 (was $1,199) — "Best Value" badge
    - Full course access
    - Lifetime updates
    - Certificate of completion
    - Career support package
  - 3-Month Plan: $219/month ($657 total)
    - Same benefits as one-time
    - Spread over 3 payments
- Both cards have "Enroll Now" CTA
- Below both: "30-Day Money-Back Guarantee — No questions asked" with shield icon
- Small text: "Secure checkout powered by Stripe"

9. FAQ ACCORDION
- "Do I need prior coding experience?" — No. This bootcamp starts from absolute zero and builds up progressively.
- "How much time should I dedicate per week?" — Plan for 15-20 hours per week: 3 hours live sessions + 12-17 hours of practice and projects.
- "What if I fall behind?" — All sessions are recorded. You can also join the next cohort at no extra charge.
- "Do I get a certificate?" — Yes, a verified certificate of completion that you can add to LinkedIn and your resume.
- "What happens after the bootcamp?" — You get lifetime access to course materials, community, and our job board. We also offer optional 1-on-1 career coaching.
- "Is there a refund policy?" — Full refund within 30 days if you're not satisfied, no questions asked.

10. FINAL CTA SECTION
- Dark background (#1E1B4B) with subtle gradient
- Headline: "Your Developer Career Starts Here"
- Subheadline: "Join 2,800+ graduates who transformed their careers"
- Countdown timer: "Next cohort starts in X days"
- Large "Enroll Now" button with price
- Below: "Only 35 spots available per cohort"

Design: Modern, professional education aesthetic. Primary: indigo (#6366F1), secondary: slate (#334155), background: white with alternating light gray (#F8FAFC) sections. Typography: Cal Sans or Sora for headings, Inter for body. Cards with 12px border-radius, soft shadows. Sticky header with "Enroll Now" button visible on scroll. Mobile responsive: single-column layout, collapsible curriculum, sticky bottom CTA bar on mobile.

How to use this prompt

  1. 1 Click the "Copy Prompt" button above to copy the full prompt to your clipboard
  2. 2 Open ChatGPT, Claude, or your preferred AI assistant
  3. 3 Paste the prompt and customize any placeholder text (like product names or brand colors)
  4. 4 Let the AI generate your website code or design specifications

About this Education Prompt

This Online Course Landing Page prompt is designed to help you quickly create professional education websites using AI tools like ChatGPT, Claude, v0 by Vercel, Cursor, and Bolt.new.

Whether you're a developer, designer, or entrepreneur, this free AI prompt gives you a head start on building online course landing page. Simply copy the prompt, paste it into your favorite AI coding assistant, and customize it to match your brand.

Compatible AI Tools

  • ChatGPT (GPT-4) - Great for detailed code generation and explanations
  • Claude 3 - Excellent for complex, nuanced website designs
  • v0 by Vercel - Perfect for React and Next.js components
  • Cursor - Ideal for AI-powered coding in your IDE
  • Bolt.new - Quick prototyping and full-stack apps
  • Lovable - User-friendly AI website builder

Tags

Course Landing Page E-learning Education AI Prompt Free Template Website Builder Web Design Copy Paste Prompt