Buổi 09: Dự Án Thật — Landing Page Hoàn Chỉnh 🌐
Thành quả: Hoàn thành 1 Landing Page sản phẩm từ A-Z, mở trên trình duyệt!
🎯 Mục tiêu buổi học
- Kết hợp HTML + CSS + JS tạo Landing Page
- Hiểu cấu trúc Landing Page chuẩn CRO
- Sử dụng AI để code nhanh hơn 10x
- Áp dụng cm-planning để lên kế hoạch
- Hoàn thành trang web sản xuất chất lượng cao
📖 Phần 1: Cấu trúc Landing Page Chuẩn
7 Section Bắt Buộc
┌─────────────────────────────────┐
│ 1. HEADER (Navigation) │ ← Logo + Menu + CTA
├─────────────────────────────────┤
│ 2. HERO (First Impression) │ ← Tiêu đề lớn + Subtitle +
│ "Giải quyết [vấn đề] │ 2 nút CTA + Hình ảnh
│ trong [thời gian]" │
├─────────────────────────────────┤
│ 3. FEATURES (Tính năng) │ ← 3-4 cards: icon + title + desc
├─────────────────────────────────┤
│ 4. HOW IT WORKS (Cách dùng) │ ← 3 bước: 1→2→3
├─────────────────────────────────┤
│ 5. TESTIMONIALS (Review) │ ← 3 reviews khách hàng
├─────────────────────────────────┤
│ 6. PRICING (Bảng giá) │ ← 2-3 plans: Free, Pro, Enterprise
├─────────────────────────────────┤
│ 7. CTA + FOOTER │ ← Kêu gọi hành động + Links
└─────────────────────────────────┘Tại sao cấu trúc này hiệu quả?
| Section | Tâm lý người dùng | Thời gian |
|---|---|---|
| Hero | "Ồ, cái này giải quyết vấn đề của mình!" | 3 giây |
| Features | "Có đủ tính năng mình cần!" | 15 giây |
| How it works | "Dễ dùng quá!" | 10 giây |
| Testimonials | "Người khác dùng tốt rồi!" | 10 giây |
| Pricing | "Giá hợp lý, thử thôi!" | 5 giây |
| CTA | "Click download ngay!" | 2 giây |
📖 Phần 2: Quy Trình Xây Landing Page
Bước 1: Lên kế hoạch (cm-planning)
Sản phẩm: [Tên]
Target: [Ai dùng?]
Vấn đề: [Giải quyết gì?]
USP: [Khác đối thủ ở điểm nào?]
CTA chính: [Nút gì? Download/Đăng ký/Mua?]
Color palette: [5 màu hex]
Font: [Heading + Body]Bước 2: Code từng Section
Dùng AI tạo từng section theo Chain Prompting:
Prompt 1: "Tạo HTML/CSS cho HEADER section: Logo '[Tên]',
4 menu items, CTA button 'Dùng Miễn Phí',
nền trắng, sticky top, shadow nhẹ"
Prompt 2: "Tạo HERO section:
heading 'Giải Quyết [Vấn Đề] Trong [Thời Gian]',
subtitle 2 dòng, 2 button (primary + ghost),
hình minh họa bên phải, gradient background"
...lặp lại cho 5 section còn lại...Bước 3: Ghép các section
html
<!DOCTYPE html>
<html lang="vi">
<head>
<title>[Tên Sản Phẩm] — [Tagline]</title>
<meta name="description" content="[Mô tả 150 ký tự]">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Section 1: Header -->
<header>...</header>
<!-- Section 2: Hero -->
<section id="hero">...</section>
<!-- Section 3-6: Content -->
<section id="features">...</section>
<section id="how-it-works">...</section>
<section id="testimonials">...</section>
<section id="pricing">...</section>
<!-- Section 7: Footer -->
<footer>...</footer>
<script src="script.js"></script>
</body>
</html>📖 Phần 3: CRO Tricks (Tối Ưu Chuyển Đổi)
5 Mẹo CRO cho Landing Page
1. Headline rõ ràng — 5 giây test
❌ "Nền tảng quản lý toàn diện"
✅ "Quản lý 100 đơn hàng/ngày — chỉ 5 phút setup"2. Social Proof — Bằng chứng xã hội
html
<div class="social-proof">
<span>⭐⭐⭐⭐⭐ 4.9/5</span>
<span>10,000+ người dùng</span>
<span>Được giới thiệu bởi VnExpress</span>
</div>3. CTA nổi bật
css
.cta-button {
background: #ff6b35; /* Màu nổi, không trùng nền */
padding: 16px 32px;
font-size: 18px;
border-radius: 8px;
animation: pulse 2s infinite; /* Nhấp nháy nhẹ */
}4. Urgency — Tạo khẩn cấp
html
<p>🔥 Ưu đãi chỉ còn <strong id="countdown">02:59:45</strong></p>5. Risk Reversal — Giảm rủi ro
html
<p>✅ Miễn phí 14 ngày | ❌ Không cần thẻ tín dụng | 🔄 Hủy bất kỳ lúc nào</p>📖 Phần 4: Super Prompt — Tạo LP 1 Shot
[P] Bạn là expert frontend developer + CRO specialist.
[T] Tạo COMPLETE landing page (1 file HTML, CSS inline, JS inline) cho:
Sản phẩm: [TÊN]
Vấn đề: [MÔ TẢ]
Target: [ĐỐI TƯỢNG]
[C] Landing page tiếng Việt, mobile-first responsive.
[F] 7 sections: Header, Hero, Features (3 cards), How It Works (3 steps),
Testimonials (3 reviews), Pricing (3 plans), Footer.
Dark gradient background, modern glassmorphism cards,
smooth scroll navigation, AOS-style scroll animations.
[C] - Chỉ 1 file HTML (CSS + JS inline)
- Responsive mobile/tablet/desktop
- Dùng Google Fonts Inter
- Color palette: [5 MÀU]
- KHÔNG dùng framework (thuần HTML/CSS/JS)
- Có favicon emoji
- Meta SEO tags đầy đủ📖 Phần 5: Liên hệ CodyMaster
| Giai đoạn | Skill | Tác dụng |
|---|---|---|
| Lên kế hoạch | cm-planning | Brief + timeline |
| Thiết kế | cm-ux-master | 48 luật UX |
| Code | cm-execution | Chain prompting |
| CRO | cm-cro-methodology | Tối ưu chuyển đổi |
| Content | cm-content-factory | Viết copy |
🎓 Tóm tắt
| Khái niệm | Nhớ gì |
|---|---|
| 7 Sections | Header→Hero→Features→How→Review→Price→Footer |
| CRO | Clear headline + Social proof + CTA nổi + Urgency + Risk reversal |
| Super Prompt | 1 prompt PTCFC = 1 landing page hoàn chỉnh |
⏭️ Buổi tiếp theo
Buổi 10: Deploy — Đưa Website Lên Internet! 🚀