Education
Education — Online Course Landing Page
Copy-paste layout brief covering Hero Section, Social Proof Bar, What You'Ll Learn and Curriculum Breakdown — hand it to ChatGPT, Claude, or v0 as-is.
Education — Online Course Landing Page is a copy-ready build prompt for education pages. Paste it into ChatGPT, Claude, v0 and iterate from the first draft it returns.
If something here is out of date, the source link below is always the canonical reference.
| Use case | Education |
|---|---|
| Works with | ChatGPT, Claude, v0, Cursor |
| Source | websiteprompts.com |
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 it
- Copy the full prompt with the button above.
- Paste it into your model and add your brand, copy and colours.
- Ask for one section at a time if the first pass is too broad.
Compiled and written by HowToPrompts from public sources. View original source ↗
← Back to Website Prompts