Khái niệm kỹ thuật cơ bản

Giới thiệu

Khi viết prompt cho Claude Code, bạn sẽ gặp một số từ kỹ thuật. Bài viết này giải thích chúng bằng ngôn ngữ đơn giản, không cần biết lập trình.

1. HTML - Cấu Trúc Trang Web

HTML là gì? HTML là “bộ xương” của trang web. Nó định nghĩa cấu trúc, bố cục, những gì xuất hiện trên trang. Ví dụ:

Tiêu đề chính
  ↓ (HTML nói rằng đây là tiêu đề chính)

Đoạn văn bản
  ↓ (HTML nói rằng đây là đoạn văn)

Nút "Đăng Ký"
  ↓ (HTML nói rằng đây là nút, khi click sẽ làm gì)

Các thành phần HTML phổ biến:

header = Phần đầu trang (logo, menu)
nav = Thanh điều hướng (menu links)
section = Khu vực (ví dụ: Hero section, Features section)
button = Nút bấm
footer = Phần chân trang (liên hệ, links)
div = Hộp chứa (dùng để nhóm các phần tử)

Khi viết prompt, bạn sẽ nói:

“Tạo một HTML file với header, hero section, footer”
“Thêm buttons và links”
Bạn KHÔNG cần viết code HTML, chỉ cần nói Claude Code cần gì!

Để biết chi tiết các thành phần HTML, hãy prompt hỏi Claude Code về chúng. Ví dụ:

Liệt kê các thẻ HTML phổ biến

2. CSS - Trang Trí & Bố Cục

CSS là gì? CSS là “quần áo và makeup” của trang web. Nó quyết định:

Màu sắc
Kích thước chữ
Khoảng cách giữa các thành phần
Hình dạng, góc cạnh
Bố cục (2 cột hay 1 cột)

Ví dụ:

HTML: "Đây là tiêu đề"
  ↓ (HTML tạo cấu trúc)

CSS: "Tiêu đề này nên:
      - Màu trắng
      - Kích thước lớn (48px)
      - Dùng font Poppins
      - Đặt ở giữa"

Các thuật ngữ CSS bạn sẽ gặp: Màu sắc:

Hex color: #090A14 (mã màu dạng số)
- #090A14 = Đen sâu
- #DF6B33 = Cam
- #FFFFFF = Trắng
- Khi viết prompt: “Nền #090A14, text #FFFFFF”

Kích thước:

16px = Kích thước chữ bình thường (px = pixel)
48px = Kích thước chữ lớn (tiêu đề)
24px = Kích thước icon
Khi viết prompt: “Font 16px cho chữ thường, 48px cho tiêu đề”

Khoảng cách:

padding = Khoảng cách bên trong (từ cạnh đến nội dung)
gap = Khoảng cách giữa các items
Khi viết prompt: “Padding 24px, gap 16px”

Bố cục:

flexbox = Sắp xếp linh hoạt (items theo hàng hoặc cột)
grid = Sắp xếp dạng lưới (rows và columns)
Khi viết prompt: “Desktop 2 cột, mobile 1 cột”

Border & Rounded:

border = Đường viền xung quanh
rounded = Góc cạnh bo tròn
Khi viết prompt: “Thêm border xám, góc bo tròn”

Tailwind CSS: Tailwind CSS là thư viện CSS cho phép viết style bằng các class ngắn ngay trong HTML, thay vì viết file CSS riêng. Ví dụ bg-[#090A14] = nền màu #090A14, p-6 = padding 24px, rounded-xl = bo góc lớn.

Bạn không cần nhớ tên class — chỉ cần nói “Dùng Tailwind CSS” trong prompt
Bản Next.js của khóa học dùng Tailwind CSS mặc định

Để biết chi tiết các thuộc tính CSS, hãy prompt hỏi Claude Code về chúng. Ví dụ:

Liệt kê các thuộc tính CSS phổ biến

3. Icons - Biểu Tượng Nhỏ

Icons là gì? Icons là những hình biểu tượng nhỏ giúp khách truy cập nhanh chóng nhận ra chức năng. Icon ví dụ:

⚡ = Speed / Tốc độ
⚙️ = Settings / Cài đặt
👥 = Users / Người dùng
⭐ = Star / Đánh giá
✓ = Check / Hoàn thành
🔧 = Tools / Công cụ
📱 = Mobile / Di động

Lucide Icons - Khuyến nghị sử dụng: Lucide Icons là bộ icon SVG miễn phí, modern, dễ dùng. Claude Code lấy từ CDN (không cần cài thêm). Khi viết prompt:

"Thêm icons:
- Hero: star icons (4 cái)
- Features: zap, settings, users icons
- Dùng Lucide Icons từ CDN
- Icon size: 24px, màu #DF6B33"

Icon sizes:

24px = Nhỏ (buttons, text inline)
36px = Vừa (cards, list items)
48px = Lớn (hero, section headers)

Thư viện icons khác (nếu muốn thay thế Lucide):

Thư viện	Đặc điểm	Phù hợp với
Lucide Icons	Hiện đại, đơn giản, 1000+ icons	Landing page, ứng dụng web
Tabler Icons	Hiện đại, đơn giản, 1000+ icons	UI hiện đại, app web
Hero Icons	Hiện đại, đơn giản, 1000+ icons	Landing page, ứng dụng web
Font Awesome	Phổ biến, 7000+ icons	Bất kỳ project nào
Feather Icons	Nhỏ gọn, tối giản	Design hiện đại, minimal
Material Icons	Chuyên nghiệp, 5000+ icons	Ứng dụng Google-style
Bootstrap Icons	Đơn giản, 2000+ icons	Bootstrap projects
Ionicons	Mobile-friendly, 1000+ icons	Ứng dụng di động

Cách nói với Claude Code:

"Dùng Lucide Icons" (khuyến nghị)
hoặc
"Dùng Font Awesome icons"
hoặc
"Dùng Feather Icons"

Claude Code sẽ tự động lấy từ CDN - bạn KHÔNG cần biết chi tiết! 🎯

4. Font - Chữ Viết

Font là gì? Font là kiểu chữ. Mỗi font có cảm giác khác nhau. Ví dụ fonts:

Poppins = Chữ hiện đại, tròn, dễ đọc
- Thường dùng cho tiêu đề (bold, lớn)
Inter = Chữ sạch, rõ ràng, chuyên nghiệp
- Thường dùng cho body text (thường, vừa)

Font weight (độ đậm):

400 = Regular (bình thường, dễ đọc)
500 = Medium (đậm một chút)
600 = Semi-bold (đậm)
700 = Bold (đậm)
800 = Extra-bold (rất đậm, cho tiêu đề)

Khi viết prompt:

“Poppins 700 bold cho tiêu đề”
“Inter 400 regular cho body text”
“Font 48px cho heading, 16px cho paragraph”

Google Fonts: Google cung cấp font miễn phí qua CDN (bạn không cần download).

5. Animation - Chuyển Động

Animation là gì? Animation là những chuyển động nhỏ trên trang, tạo cảm giác sống động và chuyên nghiệp. Animate.style là gì? Animate.style là thư viện chứa hàng chục hiệu ứng animation sẵn. Claude Code sẽ sử dụng thư viện này để bạn không cần code.

https://animate.style

Bạn chỉ cần nói: “Thêm animate.style” hoặc chỉ định hiệu ứng cụ thể. Danh sách hiệu ứng phổ biến để dùng trong prompt: Entrance Animations (Xuất hiện):

fadeIn - Xuất hiện từ từ (mờ → sáng)
fadeInUp - Vừa hiện dần vừa trượt lên (phổ biến nhất cho section và card)
slideInUp - Trượt lên từ dưới
slideInDown - Trượt xuống từ trên
slideInLeft - Trượt vào từ trái
slideInRight - Trượt vào từ phải
zoomIn - Phóng to từ từ
bounceIn - Nhảy vào

Emphasis Animations (Nhấn mạnh):

pulse - Phập phồng to nhỏ nhẹ (lặp lại)
bounce - Nhảy (lặp lại)
swing - Đung đưa
wobble - Lắc lư
heartBeat - Đập tim (lặp lại)
flip - Lật
shakeX / shakeY - Rung ngang / rung dọc

Exit Animations (Biến mất):

fadeOut - Mờ dần (sáng → mờ)
slideOutUp - Trượt lên khỏi màn hình
slideOutDown - Trượt xuống khỏi màn hình
zoomOut - Thu nhỏ dần

Hover Effects (Khi di chuột): Animate.css không có hiệu ứng hover riêng. Hiệu ứng khi di chuột thường được làm bằng CSS transition — bạn chỉ cần mô tả:

Phóng to nhẹ (scale) - “Button phóng to 1.05 khi hover”
Nhấc lên (translateY) - “Card nhấc lên 6px khi hover”
Đổ bóng (shadow) - “Thêm bóng cam khi hover”
Đổi màu - “Link đổi sang màu cam khi hover”

Khi viết prompt:

"Thêm animations:
- Hero section: fadeInUp (xuất hiện từ dưới)
- Cards: fadeInUp with delay (lần lượt xuất hiện)
- Buttons hover: phóng to nhẹ + đổ bóng (dùng CSS transition)
- CTA section: slideInUp (trượt lên)

Dùng Animate.css library"

Ví dụ cụ thể:

❌ Prompt tồi: "Thêm animation"
✅ Prompt tốt: "Thêm fadeIn animation cho tiêu đề,
               slideInUp animation cho cards khi scroll,
               buttons phóng to nhẹ khi hover"

Lưu ý:

Chọn 2-3 animation cho trang (quá nhiều sẽ loạn)
Phổ biến nhất: fadeIn, slideInUp, zoomIn cho Entrance
pulse cho nút CTA cần thu hút sự chú ý (dùng tiết chế)
Đơn giản & thanh lịch > Phức tạp & rối rắm

Framer Motion — dùng cho bản Next.js: Animate.css phù hợp với landing page HTML. Với bản Next.js, khóa học dùng Framer Motion — thư viện animation dành cho React. Tên hiệu ứng vẫn mô tả giống nhau (fadeInUp, fadeInLeft…), chỉ khác thư viện:

"Dùng Framer Motion cho animations:
- Section cards: fadeInUp khi cuộn tới, xuất hiện lần lượt (stagger)
- Button: phóng to 1.04 khi hover, thu nhỏ 0.97 khi bấm
- FAQ accordion: mở/đóng mượt"

Xem prompt đầy đủ trong bài Tạo landing page với Next.js.

6. Responsive Design - Hiển Thị Trên Mọi Kích Thước

Responsive là gì? Responsive nghĩa là trang web hiển thị đẹp trên mọi kích thước màn hình. Bạn không muốn khách truy cập trên di động phải cuộn ngang hay bị chữ chật, phải không? Các loại thiết bị bạn cần lo:

Desktop (Máy tính để bàn)
- Màn hình rộng (1024px trở lên)
- Có thể hiển thị 2-3 cột
- Ví dụ: Tiêu đề | Tính năng 1 | Tính năng 2 | Tính năng 3
Tablet (Máy tính bảng)
- Màn hình vừa phải (768px)
- Có thể hiển thị 1-2 cột
- Ví dụ: Tiêu đề + Tính năng 1 | Tính năng 2 + Tính năng 3
Mobile (Điện thoại)
- Màn hình hẹp (640px trở xuống)
- Chỉ 1 cột từ trên xuống dưới
- Ví dụ:
  Tiêu đề Tính năng 1 Tính năng 2 Tính năng 3

Ví dụ cụ thể:

Hero Section - Hiển thị khác nhau tùy thiết bị:

Desktop: 2 cột ngang (text ở trái, image ở phải)
  ┌─────────────────────────────┐
  │ Tiêu đề        │  Hình ảnh   │
  │ Mô tả          │             │
  │ 2 buttons      │             │
  └─────────────────────────────┘

Mobile: 1 cột dọc (text rồi image)
  ┌──────────────────┐
  │ Tiêu đề          │
  │ Mô tả            │
  │ 2 buttons        │
  │ Hình ảnh         │
  └──────────────────┘

Khi viết prompt cho Claude Code, bạn chỉ cần nói đơn giản:

“Desktop: hiển thị 2 cột (text + image), mobile: 1 cột”
“Trên desktop chữ to, trên di động chữ nhỏ hơn”
“Trên di động padding (khoảng cách) nhỏ hơn để phù hợp với màn hình hẹp”
“Nút buttons: desktop cạnh nhau, mobile xếp dọc”

Lưu ý quan trọng:

✅ Luôn nói cho Claude Code biết cần responsive
✅ Mô tả cách hiển thị trên desktop vs mobile
✅ Nếu quên, Claude Code sẽ hỏi lại hoặc trang sẽ không đẹp trên di động
❌ Không cần nói chi tiết công nghệ, chỉ cần nói “responsive”

Thú vị là: Hầu hết người xem landing page của bạn dùng điện thoại, không phải máy tính. Vì vậy responsive rất quan trọng!

7. Color - Chọn Màu Sắc

Bộ màu (Color Palette) là gì? Là bộ màu được chọn sẵn để website nhất quán. Cần 4 loại:

Loại	Dùng cho	Ví dụ
Primary (màu chính)	Buttons, highlights	`#DF6B33` (cam)
Secondary (màu phụ)	Cards, nền phụ	`#111827` (xám đen)
Background (nền)	Nền trang chính	`#090A14` (đen) hoặc `#FFFFFF` (trắng)
Text (chữ)	Chữ chính + phụ	`#F3F4F6` (trắng nhạt), `#9CA3AF` (xám)

Contrast (độ tương phản) - Quy tắc quan trọng

Chữ sáng trên nền tối = Dễ đọc ✅
Chữ tối trên nền sáng = Dễ đọc ✅
Chữ xám trên nền xám = Khó đọc ❌

Chọn màu dễ dàng với Coolors.co:

Vào coolors.co → Click “Generate” để tạo bộ màu ngẫu nhiên
Thích màu nào thì giữ, không thích thì tạo lại
Copy mã màu (hex code) vào prompt

Khi viết prompt:

"Color palette:
- Nền: #090A14 (đen)
- Primary: #DF6B33 (cam) - cho buttons
- Text chính: #F3F4F6 (trắng nhạt)
- Text phụ: #9CA3AF (xám)"

Hoặc dùng tên màu đơn giản: "Nền đen, nút màu cam, chữ trắng" - Claude Code sẽ chọn mã phù hợp.

8. Thành Phần Giao Diện Thường Dùng Trên Landing Page

Ngoài 10 phần chính (hero, features, FAQ, footer…), landing page thường có thêm các thành phần nhỏ giúp tăng lượt đăng ký. Gọi đúng tên giúp Claude Code hiểu ngay bạn muốn gì:

Thành phần	Dùng khi	Khi viết prompt
Floating Chat Button	Khách muốn hỏi nhanh qua Zalo/Messenger	”Thêm floating chat button Zalo ở góc phải dưới, link zalo.me/0xxxxxxxxx”
Sticky CTA	Nút đăng ký luôn trong tầm tay trên điện thoại	”Trên mobile, thêm sticky CTA ‘Đăng ký ngay’ ở đáy màn hình”
Toast	Báo kết quả sau khi gửi form	”Gửi form thành công thì hiện toast ‘Đăng ký thành công‘“
Modal / Popup	Hiện form hoặc ưu đãi mà không rời trang	”Bấm ‘Nhận tư vấn’ mở modal chứa form 3 ô”
Logo Cloud / Marquee	Hiển thị logo đối tác, doanh nghiệp tin dùng	”Thêm dải logo đối tác chạy ngang vô tận (marquee)“
Countdown Timer	Ưu đãi hoặc khai giảng có hạn	”Thêm countdown timer đến 20/12, hiện ngày-giờ-phút-giây”
Testimonial Carousel	Nhiều nhận xét học viên, không đủ chỗ hiện hết	”Nhận xét học viên dạng carousel, tự chuyển sau 5 giây”
Video Embed	Video giới thiệu khóa học	”Nhúng video YouTube vào hero, tỉ lệ 16:9, không tự phát”
Map Embed	Có địa chỉ học trực tiếp	”Nhúng Google Maps địa chỉ trung tâm vào footer”
Back to Top	Trang dài, khách muốn quay lên đầu	”Thêm nút back to top hiện khi cuộn quá 600px”

Xem tên gọi và mô tả của 49 thành phần giao diện web khác tại Tên gọi các UI Component trên Web.

📋 Tóm Tắt - Từ Khóa Chính

Từ Khóa	Ý Nghĩa	Ví Dụ Trong Prompt
HTML	Cấu trúc trang	”Header, sections, footer”
CSS	Trang trí, bố cục	”Màu sắc, kích thước, khoảng cách”
Icons	Biểu tượng nhỏ	”Lucide Icons, 24px, màu cam”
Font	Kiểu chữ	”Poppins 700 cho tiêu đề”
Animation	Chuyển động, hiệu ứng	”fadeInUp cho cards, phóng to khi hover”
Animate.css	Thư viện hiệu ứng	”slideInUp, zoomIn, fadeIn”
Framer Motion	Thư viện hiệu ứng cho Next.js	”Dùng Framer Motion, fadeInUp khi cuộn”
Tailwind CSS	Viết style bằng class ngắn	”Dùng Tailwind CSS”
Responsive	Hiển thị đẹp mọi kích thước	”Desktop 2 cột, mobile 1 cột”
Color	Bộ màu nhất quán	”Nền đen, nút cam, chữ trắng”
Contrast	Độ tương phản (dễ đọc)	“Chữ sáng trên nền tối”
HEX Color	Mã màu	”#DF6B33 (cam)“
Coolors	Tool chọn màu	”coolors.co”
Padding	Khoảng cách bên trong	”Padding 24px trong cards”
Border	Đường viền	”Border xám, góc bo tròn”
Sticky CTA	Nút đăng ký luôn hiển thị	”Sticky CTA ở đáy màn hình mobile”
Floating Chat Button	Nút chat nổi ở góc	”Floating chat button Zalo góc phải”

💡 Ví Dụ Prompt Hoàn Chỉnh

Prompt mẫu hoàn chỉnh:

Tạo landing page hoàn chỉnh

HTML:
- Header với logo + nav
- Hero section với headline, subheadline, 2 buttons
- Features section với 3 cards
- Footer

Styling (dùng Tailwind CSS):
- Nền: bg-[#090A14]
- Buttons (primary): bg-[#DF6B33]
- Text chính: text-[#F3F4F6]
- Text phụ: text-[#9CA3AF]
- Font: Poppins 700 cho tiêu đề, Inter 400 cho body

Icons:
- Dùng Lucide Icons
- Size: 24px (nhỏ), 36px (vừa)
- Màu: #DF6B33 (cam)

Animation (dùng Animate.css):
- Hero: fadeInUp (xuất hiện từ dưới)
- Cards: slideInUp (lần lượt trượt lên)
- Buttons hover: phóng to nhẹ + đổ bóng

Responsive:
- Desktop: hiển thị 2-3 cột
- Mobile: hiển thị 1 cột dọc
- Chữ to trên desktop, nhỏ trên mobile
- Padding lớn trên desktop, nhỏ trên mobile

Layout:
- Padding 24px, khoảng cách 16px giữa items
- Góc bo tròn, đường viền nhẹ

Kết quả: Claude Code sẽ hiểu rõ và tạo ra landing page đúng ý bạn!

❓ FAQ

Có cần nhớ hết các khái niệm này không?
Không! Chỉ cần hiểu ý nghĩa cơ bản. Khi cần, quay lại đọc phần liên quan. Animation nào phổ biến nhất?
fadeIn, fadeInUp, slideInUp (xuất hiện). Hover thường chỉ cần phóng to nhẹ hoặc đổ bóng. Chỉ cần 2-3 loại cho cả trang. Quá nhiều animation có sao không?
Có! Trang sẽ loạn. Giữ đơn giản: 2-3 animation thôi. Chọn màu như thế nào?
Dùng coolors.co → click Generate → thích thì giữ → copy mã màu vào prompt. Hex color là gì? Phải nhớ không?
Hex color là mã màu (#DF6B33). Không cần nhớ! Dùng Coolors.co để copy. Màu nào là tốt nhất?
Tuỳ brand. Luôn nhớ: chữ sáng trên nền tối (hoặc ngược lại) = dễ đọc. Font phải là Poppins + Inter không?
Không! Chỉ là lựa chọn phổ biến. Dùng font nào bạn thích. Dark hay Light theme?
Dark = hiện đại, bảo vệ mắt. Light = sạch sẽ, chuyên nghiệp. Tuỳ brand. Responsive có bắt buộc không?
Có! Hơn 50% người xem dùng điện thoại. Luôn nói “responsive” trong prompt. Icon lấy từ đâu?
Từ thư viện có sẵn (Lucide Icons). Bạn không cần vẽ, chỉ cần nói tên icon.

Bây giờ bạn đã sẵn sàng viết prompt chuyên nghiệp! 🚀

Tổng quan

Làm việc với Claude

Tạo tài khoản và thiết lập

Kiến thức nền tảng

Công nghệ

Kiến trúc phần mềm

Thực chiến

Khái niệm kỹ thuật cơ bản

Giới thiệu

1. HTML - Cấu Trúc Trang Web

2. CSS - Trang Trí & Bố Cục

3. Icons - Biểu Tượng Nhỏ

4. Font - Chữ Viết

5. Animation - Chuyển Động

6. Responsive Design - Hiển Thị Trên Mọi Kích Thước

7. Color - Chọn Màu Sắc

Contrast (độ tương phản) - Quy tắc quan trọng

8. Thành Phần Giao Diện Thường Dùng Trên Landing Page

📋 Tóm Tắt - Từ Khóa Chính

💡 Ví Dụ Prompt Hoàn Chỉnh

❓ FAQ

​Giới thiệu

​1. HTML - Cấu Trúc Trang Web

​2. CSS - Trang Trí & Bố Cục

​3. Icons - Biểu Tượng Nhỏ

​4. Font - Chữ Viết

​5. Animation - Chuyển Động

​6. Responsive Design - Hiển Thị Trên Mọi Kích Thước

​7. Color - Chọn Màu Sắc

​Contrast (độ tương phản) - Quy tắc quan trọng

​8. Thành Phần Giao Diện Thường Dùng Trên Landing Page

​📋 Tóm Tắt - Từ Khóa Chính

​💡 Ví Dụ Prompt Hoàn Chỉnh

​❓ FAQ

Giới thiệu

1. HTML - Cấu Trúc Trang Web

2. CSS - Trang Trí & Bố Cục

3. Icons - Biểu Tượng Nhỏ

4. Font - Chữ Viết

5. Animation - Chuyển Động

6. Responsive Design - Hiển Thị Trên Mọi Kích Thước

7. Color - Chọn Màu Sắc

Contrast (độ tương phản) - Quy tắc quan trọng

8. Thành Phần Giao Diện Thường Dùng Trên Landing Page

📋 Tóm Tắt - Từ Khóa Chính

💡 Ví Dụ Prompt Hoàn Chỉnh

❓ FAQ