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”

Để 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)
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 - Nhăn nhó (chậm, 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
shake - Rung

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):

pulse - Button nhăn nhó
bounce - Button nhảy
swing - Button đung đưa
grow - Button phóng to
glow - Button tỏa sáng

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: pulse (nhấn mạnh)
- 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,
               pulse animation khi hover buttons"

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, bounce cho Hover Effects
Đơn giản & thanh lịch > Phức tạp & rối rắm

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.

📋 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, pulse khi hover”
Animate.css	Thư viện hiệu ứng	”slideInUp, zoomIn, fadeIn”
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”

💡 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: pulse (nhấn mạnh)

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, slideInUp (xuất hiện) và pulse, bounce (hover). 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

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

Development tools

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

📋 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

​📋 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

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

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

❓ FAQ