Startseite 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
Kopiere diesen Prompt und füge ihn in ChatGPT oder Claude ein
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.

So verwendest du diesen Prompt

  1. 1 Kopiere den Prompt oben
  2. 2 Füge ihn in dein Lieblings-KI-Tool ein (ChatGPT, Claude, v0, etc.)
  3. 3 Die KI generiert den Website-Code für dich
  4. 4 Passe an und iteriere nach deinen Bedürfnissen

Über diesen Education Prompt

Dieser Online Course Landing Page Prompt wurde entwickelt, um dir zu helfen, schnell professionelle education-Websites mit KI-Tools wie ChatGPT, Claude, v0 von Vercel, Cursor und Bolt.new zu erstellen.

Ob Entwickler, Designer oder Unternehmer - dieser kostenlose KI-Prompt gibt dir einen Vorsprung beim Erstellen von online course landing page. Kopiere einfach den Prompt, füge ihn in deinen bevorzugten KI-Coding-Assistenten ein und passe ihn an deine Marke an.

Kompatible KI-Tools

  • ChatGPT (GPT-4) - Hervorragend für detaillierte Code-Generierung und Erklärungen
  • Claude 3 - Ausgezeichnet für komplexe, nuancierte Website-Designs
  • v0 von Vercel - Perfekt für React- und Next.js-Komponenten
  • Cursor - Ideal für KI-gestütztes Coding in deiner IDE
  • Bolt.new - Schnelles Prototyping und Full-Stack-Apps
  • Lovable - Benutzerfreundlicher KI-Website-Builder

Tags

Course Landing Page E-learning Education KI-Prompt Kostenlose Vorlage Website-Builder Webdesign Copy-Paste Prompt