Khoá HTML & CSS cơ bản

Giới thiệu khóa học

Khóa học HTML & CSS Cơ Bản được thiết kế dành cho người mới bắt đầu, giúp bạn nắm vững nền tảng để xây dựng giao diện website chuyên nghiệp.
Sau khóa học, bạn sẽ có khả năng tự tay code một website hoàn chỉnh, responsive trên mọi thiết bị.

Bạn sẽ học được gì?

✅ Hiểu cấu trúc và cú pháp HTML5 chuẩn
✅ Sử dụng thành thạo các thẻ HTML semantic
✅ Làm chủ CSS3: Selector, Box Model, Flexbox, Grid
✅ Thiết kế giao diện Responsive với Media Queries
✅ Tạo animation và transition đẹp mắt
✅ Thực hành với 5+ dự án thực tế
✅ Áp dụng best practices trong code

Yêu cầu

•💻 Máy tính có kết nối internet
•📝 Không cần kiến thức lập trình trước đó
•⏰ Dành 2-3 giờ/ngày để học và thực hành

Nội dung khóa học

Tuần 1-2: Làm quen với HTML

Buổi 1: Giới thiệu Web Development

•Internet hoạt động như thế nào?
•Frontend vs Backend
•Cài đặt VS Code và extensions cần thiết
•Viết trang HTML đầu tiên

Buổi 2: Cấu trúc HTML cơ bản

•Doctype, html, head, body
•Thẻ tiêu đề: h1 - h6
•Thẻ văn bản: p, span, strong, em
•Comment trong HTML

Buổi 3: Làm việc với Links và Images

•Thẻ a và các thuộc tính
•Thẻ img và tối ưu hình ảnh
•Đường dẫn tương đối vs tuyệt đối
•Thực hành: Tạo trang portfolio cá nhân

Buổi 4: Lists và Tables

•Danh sách: ul, ol, li
•Bảng: table, tr, td, th
•Colspan và Rowspan
•Thực hành: Tạo trang menu nhà hàng

Tuần 3-4: HTML5 Semantic & Forms

Buổi 5: HTML5 Semantic Elements

•header, nav, main, footer
•section, article, aside
•figure, figcaption
•Tại sao semantic quan trọng cho SEO

Buổi 6: Forms cơ bản

•Thẻ form và method (GET/POST)
•Input types: text, email, password, number
•Label và placeholder
•Button và submit

Buổi 7: Forms nâng cao

•Select, textarea, checkbox, radio
•Validation với HTML5
•Required, pattern, min, max
•Thực hành: Tạo form đăng ký

Buổi 8: Multimedia & Embed

•Video và Audio trong HTML5
•Iframe và nhúng nội dung
•SVG cơ bản
•Thực hành: Tạo trang landing page

Tuần 5-6: CSS Fundamentals

Buổi 9: Giới thiệu CSS

•CSS là gì và cách hoạt động
•3 cách thêm CSS: Inline, Internal, External
•Selectors cơ bản: element, class, id
•Độ ưu tiên (Specificity)

Buổi 10: Colors & Typography

•Màu sắc: hex, rgb, rgba, hsl
•Font-family, font-size, font-weight
•Line-height, letter-spacing
•Google Fonts

Buổi 11: Box Model

•Content, Padding, Border, Margin
•Width, Height và box-sizing
•Display: block, inline, inline-block
•Thực hành: Tạo Card component

Buổi 12: Positioning

•Position: static, relative, absolute, fixed, sticky
•Top, right, bottom, left
•Z-index
•Thực hành: Tạo Navbar fixed

Tuần 7: Flexbox & Grid

Buổi 13: Flexbox Layout

•Display flex và flex direction
•Justify-content, align-items
•Flex-wrap, flex-grow, flex-shrink
•Thực hành: Layout với Flexbox

Buổi 14: CSS Grid

•Display grid
•Grid-template-columns, grid-template-rows
•Gap, grid-area
•Thực hành: Gallery layout

Buổi 15: Responsive Design

•Viewport và đơn vị responsive (%, vw, vh, rem)
•Media Queries
•Mobile-first approach
•Thực hành: Responsive navbar

Buổi 16: Advanced CSS

•Pseudo-classes: hover, focus, nth-child
•Pseudo-elements: before, after
•Transitions và Animations
•CSS Variables

Tuần 8: Dự án cuối khóa

Buổi 17-18: Project - Landing Page

•Phân tích thiết kế
•Cấu trúc HTML semantic
•Styling với CSS
•Responsive hoàn chỉnh

Buổi 19-20: Project - Portfolio Website

•Thiết kế multi-page website
•Navigation và smooth scroll
•Contact form
•Deploy lên GitHub Pages

Dự án thực hành

•Profile Card - Thẻ thông tin cá nhân đơn giản
•Pricing Table - Bảng giá responsive
•Photo Gallery - Grid gallery với hover effects
•Landing Page - Trang giới thiệu sản phẩm
•Portfolio Website - Website cá nhân hoàn chỉnh

Công cụ sử dụng

•VS Code - Code editor
•Chrome DevTools - Debug và inspect
•Figma - Xem thiết kế
•GitHub - Quản lý code
•GitHub Pages - Deploy website