Online Course Landing Page
A high-converting online course landing page with curriculum preview, instructor bio, and enrollment CTA
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 Kopiere den Prompt oben
- 2 Füge ihn in dein Lieblings-KI-Tool ein (ChatGPT, Claude, v0, etc.)
- 3 Die KI generiert den Website-Code für dich
- 4 Passe an und iteriere nach deinen Bedürfnissen
Mehr Education Prompts
University Alumni Network Page
A university alumni network portal with member directory, events calendar, mentorship matching, and donation campaigns
Professional Certification Platform Landing Page
A professional certification and credentialing platform page with course catalog, exam scheduling, digital badges, progress tracking, and employer verification portal
Coding Bootcamp Homepage
A high-converting coding bootcamp homepage with program tracks, outcomes data, and enrollment flow
Ü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