Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

The HTML & CSS Bootcamp 2026 Edition

Khóa Học HTML & CSS Bootcamp Phiên Bản 2026

Khóa Học HTML & CSS Bootcamp Phiên Bản 2026

Khóa học hoàn toàn mới! Bao gồm Flexbox, CSS Grid, Hiệu ứng, Thiết kế Responsive và hơn thế nữa! Rất nhiều bài tập và dự án thực tế.

4.7
(4,607 đánh giá)
25,024 học viên
Giảng viên
Colt Steele
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
79.000đ 1.609.000đ -95%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
37.0 giờ video
319 bài giảng
3 bài quiz
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 07/06/2026

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

Thành thạo HTML & CSS và xây dựng các dự án thực tế quy mô lớn, không cần kiến thức trước!
Cách viết tài liệu HTML có cấu trúc tốt và ngữ nghĩa
Nắm vững các khái niệm CSS phức tạp bao gồm cascade, kế thừa và specificity
Làm việc với hiệu ứng CSS, chuyển tiếp, pseudo-elements, gradient và hơn thế nữa
Thực hành với hàng chục bài tập, câu đố và thử thách
Thiết kế website đẹp mắt từ đầu, hiển thị tốt trên mọi kích thước màn hình
Xây dựng các thành phần tái sử dụng, làm việc với CSS variables và viết code CSS hiện đại, sạch sẽ

Yêu cầu

Không cần kinh nghiệm lập trình trước đó
Mọi máy tính đều dùng được: Mac, Windows, hoặc Linux
Tất cả những gì bạn cần là trình duyệt web và trình soạn thảo code (chúng ta sẽ cùng nhau tải một trình soạn thảo miễn phí)

Đối tượng phù hợp

Dành cho bất kỳ ai muốn học cách tạo ra những website chuyên nghiệp, ấn tượng của riêng mình
Người mới bắt đầu hoàn toàn, chưa có kinh nghiệm
Học viên đã có một ít kinh nghiệm HTML & CSS muốn nâng cao kỹ năng

Nội dung khóa học

35 phần • 319 bài giảng
1 Chào mừng & Tổng quan chương trình học
2 Tham gia Cộng đồng Trò chuyện của chúng tôi
3 Lưu ý quan trọng về việc để lại phản hồi!
4 Trải nghiệm đầu tiên với HTML & CSS
5 Web hoạt động như thế nào
6 Vai trò của HTML, CSS và JS
7 Cài đặt các công cụ cần thiết
8 QUAN TRỌNG: Về Chủ đề Màu sắc của Visual Studio Code
9 Cấu hình VSCode
10 Lưu ý quan trọng về Bài tập trong khóa học
1 Giới thiệu về HTML
2 Quy trình làm việc cơ bản với HTML
3 Phần tử Đoạn văn (Paragraph)
4 Mozilla Developer Network
5 Công cụ dành cho Nhà phát triển của Chrome
6 Cấu trúc Tài liệu
7 Tạo Chú thích trong HTML
8 Tạo Tiêu đề
9 Bài tập Kiến thức cơ bản HTML
1 Làm việc với Danh sách trong HTML
2 Các phần tử Em, Strong, B và I
3 Lồng ghép các phần tử
4 Chỉ số trên và chỉ số dưới
5 Phần tử Inline và Block
6 Tạo Liên kết
7 Các loại Liên kết khác
8 Tạo Hình ảnh
9 Bài tập Công thức Mì ống
1 Tạo Ô nhập văn bản và Nút bấm
2 Phần tử Biểu mẫu
3 Thuộc tính Name và Placeholder
4 Gắn nhãn đúng cách cho các điều khiển Biểu mẫu
5 Các loại Ô nhập khác
6 Hộp kiểm, Vùng văn bản và Thanh trượt
7 Danh sách chọn và Nhóm Nút radio
8 Bài tập Biểu mẫu Trang đích Khóa học
1 Thẻ Span
2 Thẻ Div
3 Bảng
4 Đánh dấu Ngữ nghĩa
5 Các phần tử Ngữ nghĩa
1 Lấy Code mẫu
2 Làm việc với Inline Styles
3 Viết Internal Styles
4 External Styles: Cách tốt nhất để viết CSS
5 Lưu ý nhanh về Codepen
6 Cấu trúc của CSS
7 Bộ chọn Phần tử
8 Bài tập Kiến thức cơ bản CSS
1 Làm việc với background-color
2 Mẹo nhanh: MDN & Chú thích
3 Màu sắc có tên
4 Hiểu về Màu RGB
5 Màu hệ Thập lục phân
6 Màu RGBA và Độ trong suốt
7 Câu đố về Màu sắc
8 Kế thừa trong CSS
9 Bài tập Màu sắc CSS
1 Thay đổi Phông chữ với Font-Family
2 font-size, font-weight và font-style
3 Thay đổi Căn chỉnh Văn bản
4 line-height, letter-spacing và word-spacing
5 Thêm Phông chữ Tùy chỉnh với Google Fonts
6 Bài tập Định dạng Văn bản
7 Tạo Hiệu ứng Đổ bóng cho Văn bản
8 Dự án Mini đầu tiên: Cantilever
1 text-transform & text-decoration
2 Bộ chọn ID
3 Bộ chọn Class
4 Định dạng Danh sách
5 Định dạng Liên kết và Pseudo-Class :hover
6 Thuộc tính viết tắt Font
7 Bài tập Cá rồng biển
1 Bộ chọn Toàn cục
2 Bộ chọn Thuộc tính
3 Nhóm các Bộ chọn
4 Bộ chọn Hậu duệ & Con trực tiếp
5 Bộ chọn Ghép
6 Bài tập Bộ chọn CSS
1 Giới thiệu Mô hình Hộp
2 Làm việc với Đường viền
3 Chiều rộng, Chiều cao và Phần trăm
4 Thêm Khoảng đệm cho phần tử
5 Làm việc với Lề
6 Mô hình Hộp Thay thế
7 Thuộc tính Display
8 Display: None
9 Lề Âm và Margin Auto
10 Margin Collapsing: Chuyện gì thế này?
11 Một Mẫu Bố cục Phổ biến
12 Min và Max Width
13 Bo góc phần tử với Border Radius
14 Đổ bóng Hộp
15 Làm việc với Overflow
16 Bài tập Khu nghỉ dưỡng trượt tuyết
1 Giới thiệu Dự án của chúng ta
2 Thiết lập Cơ bản cho Dự án
3 Viết mã HTML cho Thanh điều hướng
4 Định dạng Thanh điều hướng
5 Hoàn thiện Thanh điều hướng
6 Tạo Lưới Ảnh
7 Tiếp tục với Lưới Ảnh
8 Hoàn thiện Lưới Ảnh
9 Thêm Nội dung Chân trang
1 Giới thiệu Phần
2 Bộ chọn Anh chị em
3 Làm việc với Pseudo-Classes
4 Định dạng Pseudo-Elements
5 Bài tập Bộ chọn CSS Phần 2
6 Kiến thức cơ bản về Specificity
7 Inline Styles và Specificity
8 Tính toán Giá trị Specificity
9 !important và Cascade
10 Tổng kết về Cascade
1 Giới thiệu Dự án Bài viết Blog của chúng ta
2 Căn giữa Nội dung Chính
3 Làm việc với Kiểu chữ
4 Tạo phần Tiêu đề chính
5 Triển khai các Tiêu đề của chúng ta
6 Thêm Kiểu dáng cho Code
7 Tạo Chân trang
8 Viết Hero toàn màn hình
1 Đơn vị Tuyệt đối: Pixel, Centimet và hơn thế nữa!
2 Làm việc với Phần trăm
3 Sức mạnh của Đơn vị Rem
4 Hiểu về Đơn vị Em
5 Đơn vị Vw và Vh
6 Bạn nên dùng Đơn vị nào?
7 Làm việc với Float
1 Giới thiệu Dự án
2 Thiết lập Thanh điều hướng
3 Hoàn thiện Thanh điều hướng
4 Bắt đầu với Nội dung Hero
5 Tạo phần Kỹ năng
6 Tạo phần Blog
7 Thêm phần Sự kiện
8 Tạo một Chân trang Đơn giản
1 Làm việc với Hình nền
2 Kiểm soát Background-Repeat
3 Điều chỉnh Kích thước Hình nền
4 Định vị Hình nền
5 Làm việc với Background-Clip
6 Bài tập Hình nền
7 Một Lưu ý Quan trọng về Gradient!
8 Tạo Linear Gradients
9 Radial, Conic và Repeating Gradients
10 Thuộc tính viết tắt Background
11 Bộ lọc CSS nâng cao
1 Giới thiệu về Định vị
2 Định vị Tương đối
3 Kiểm soát Lớp với Z-Index
4 Định vị Tuyệt đối Phần 1
5 Định vị Tuyệt đối Phần 2
6 Tạo Huy hiệu cho Nút
7 Định vị Cố định
8 Bài tập Định vị #1
9 Bài tập Định vị #2
10 Bài tập Định vị #3
1 Giới thiệu về Chuyển tiếp
2 Cú pháp Chuyển tiếp Cơ bản
3 Làm việc với Nhiều Chuyển tiếp
4 Hàm Thời gian Chuyển tiếp
5 Độ trễ Chuyển tiếp
6 Hiểu về Hiệu suất Hoạt ảnh
7 Giới thiệu về Biến đổi
8 Các loại Biến đổi khác
9 Transform Origin - Điểm gốc biến đổi
10 Xây dựng hiệu ứng hover cho nút bấm ấn tượng
1 Giới thiệu Flexbox
2 Display: Flex và trục Flex
3 Làm việc với Flex-Direction
4 Bài tập Flexbox 1
5 Flex-Wrap
6 Justify-Content
7 Bài tập Flexbox 2
8 Align-Items
9 Bài tập Flexbox 3
10 Align-Content
11 Bài tập Flexbox 4
12 Align-Self
13 Bài tập Flexbox 5
1 Thuộc tính Flex-Grow
2 Kiểm soát co lại với Flex-Shrink
3 Flex-Basis: Quan trọng & Dễ gây nhầm lẫn
4 Thuộc tính viết tắt Flex
5 Thuộc tính Order cho Flex-Item
6 Mẫu Flexbox: Xây dựng Thanh điều hướng đơn giản
7 Mẫu Flexbox: Flex Container lồng nhau
8 Mẫu Flexbox: Căn giữa nội dung
9 Mẫu Flexbox: Xây dựng bố cục Card
1 Giới thiệu Dự án Máy tính chi phí
2 Xây dựng Container của chúng ta
3 Tạo các Tab phía trên
4 Định vị đường gạch dưới của Tab
5 Tạo kiểu cho Tab đang hoạt động
6 Thêm phần Toggle
7 Xây dựng Card Phiên làm việc
8 Tạo Thanh trượt
9 Tạo hai Card Giá
10 Hoàn thiện các Card Giá
1 Giới thiệu Thiết kế Responsive
2 Media Query đầu tiên của chúng ta
3 Tìm hiểu thêm về Media Queries
4 Làm việc với Media Features
5 Toán tử logic trong Media Queries
6 Bài tập Media Queries
7 Media Queries Cấp độ 4 & 5
8 Các Breakpoint Responsive phổ biến
9 Tạo Thanh điều hướng Responsive đơn giản
10 Demo Lưới Flexbox Responsive
11 Thiết kế Mobile First vs. Desktop First
12 Xây dựng bố cục Mobile-First đơn giản
1 Làm cho Cantilever Responsive
2 Làm cho Potter Portfolio Responsive
3 Làm cho Dự án Hazel CV Responsive
4 Làm cho Máy tính chi phí Responsive
1 Giới thiệu CSS Grid
2 Kích hoạt CSS Grid
3 Grid-Template-Columns
4 Grid-Template-Rows
5 Bài tập Grid 1
6 Thuộc tính viết tắt Grid-Template
7 Hàm Minmax()
8 Làm việc với Repeat()
9 Fit-Content
10 Điều chỉnh khoảng cách Grid
11 Bài tập Grid 2
1 Làm việc với Grid Lines
2 Định vị Grid Items
3 Từ khóa Span
4 Thuộc tính viết tắt Grid-Area
5 Đặt tên cho Grid Lines
6 Grid-Template-Areas
7 Sử dụng Grid-Template-Areas với Hàng & Cột
8 Grid-Auto-Flow
9 Grid Auto Columns & Rows
10 Autofit và Autofill
1 Giới thiệu Dự án Grid của chúng ta
2 Tạo Lớp phủ Hình ảnh Phần 1
3 Tạo Lớp phủ Hình ảnh Phần 2
4 Thêm hình ảnh của chúng ta
5 Định vị hình ảnh trên Grid
6 Làm cho bố cục Grid Responsive
7 Sửa các Lớp phủ Hình ảnh
8 Xây dựng Thanh điều hướng
9 Hoàn thiện Thanh điều hướng và Chân trang
10 Tạo Nút Hamburger
1 Giới thiệu Hoạt hình Keyframes
2 Định nghĩa @keyframes
3 Thực hành thêm với @Keyframes
4 Độ trễ, Lặp lại và hơn thế nữa cho Hoạt hình!
5 Tái sử dụng Hoạt hình
6 Thuộc tính viết tắt Animation
7 Xây dựng Hoạt hình Vòng quay đơn giản
8 Tạo Bộ tải phức tạp hơn
9 Thuộc tính Animation Fill Mode
1 Giới thiệu Ngăn kéo có Hoạt hình của chúng ta
2 Viết Hoạt hình riêng cho từng Thanh
3 Khóa học JavaScript Cấp tốc
4 Làm cho Nút Hamburger hoạt động
5 Tạo Menu Ngăn kéo cho Di động
6 Tạo Hoạt hình Trượt ra cho Ngăn kéo
1 Giới thiệu Before và After
2 Tạo Dấu ngoặc kép trang trí với Phần tử giả
3 Viền Gradient với Phần tử giả
4 Nút bấm Hoạt hình Ấn tượng với Phần tử giả
5 Vòng quay Hoạt hình Siêu Ấn tượng với Phần tử giả
6 Điều khiển Form tùy chỉnh với Phần tử giả
1 Giới thiệu Biến CSS
2 Viết Biến CSS
3 Lớp giả :root
4 Biến và Media Queries
5 Sử dụng Biến cho Kích thước
6 Giới thiệu Calc()
7 Các quy tắc của Calc()
8 Một ví dụ khác về sử dụng Calc()
1 Giới thiệu Swipe
2 Thiết lập Biến Phông chữ
3 Định nghĩa Kiểu Tiêu đề cơ bản
4 Viết Kiểu Liên kết chung
5 Định nghĩa Kiểu Body
6 Tạo lớp Văn bản - Phụ đề, Văn bản phụ
7 Định nghĩa Kiểu Nút - Nút Chính & Nút Phụ
8 Tạo Nút bấm với Biểu tượng Hoạt hình
1 Xây dựng Thanh điều hướng
2 Định nghĩa lớp Bố cục Hai cột
3 Viết Cấu trúc cho Hero
4 Tạo kiểu cho Hero Trang
5 Xây dựng phần Lưới Đối tác
6 Thêm phần Nền tảng Thống nhất
7 Tạo Lưới Hình ảnh Đồ họa
8 Viết lớp Card có thể tái sử dụng
9 Thêm phần Tích hợp
10 Định nghĩa phần Tại sao chọn Swipe
1 Tạo phần Toàn cầu
2 Định vị Hình ảnh Quả địa cầu
3 Thêm Cấu trúc cho phần Sự kiện Ảo
4 Tạo kiểu cho phần Sự kiện Ảo
5 Xây dựng phần Bắt đầu
6 Viết Cấu trúc Chân trang
7 Tạo kiểu cho Chân trang
8 Thêm Sọc nghiêng đầu tiên
9 Hoàn thiện các Sọc nghiêng
10 Tạo Nền Hero Gradient Hoạt hình
11 Sửa một vấn đề với Sọc nghiêng
1 Bắt đầu làm Swipe Responsive
2 Làm Lưới Đối tác Responsive
3 Làm phần Nền tảng Thống nhất Responsive
4 Làm phần Tích hợp Responsive
5 Làm phần Tại sao chọn Swipe Responsive
6 Làm phần Toàn cầu Responsive
7 Làm phần Sự kiện Ảo Responsive
8 Làm phần dưới cùng của Trang Responsive
9 Làm Hero Trang Responsive
10 Thêm Thanh điều hướng Responsive
11 Điều chỉnh Responsive cho Sọc nền
12 Dọn dẹp CSS
13 Sửa vấn đề nhỏ với Border Radius
14 Sửa một vấn đề nhỏ khác với Lưới Đối tác

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

**Modern in-depth HTML & CSS course!**

** Check out the promo video to see the beautiful, responsive projects we build in this course! **

This course will teach you everything you need to know about HTML, CSS, and web design to build your own stunning websites from scratch. Instead of just watching me code, you’ll learn how to structure and build any website you can think of.

My background is in teaching in-person bootcamp programs around the world, where I work directly with students to help them learn web development and change careers. This course is based on all my experience in the classroom. Unlike most Udemy courses, this course includes dozens of exercises and challenges which ask you to recreate components, build layouts, and practice HTML and CSS. Practice is the most important tool I have to help you learn, and this course includes lots of it!

This course covers a huge amount of information, but it’s designed to be approachable for complete beginners and intermediate developers alike.

  • We start with the basics of HTML: structuring documents, creating text elements, tables, and forms. Then we learn about semantic markup and creating accessible webpages

  • Next, we cover the basics of CSS: working with selectors, color systems, and styling text elements.

  • From there, we cover critical CSS concepts including the box model, specificity, the cascade, and CSS units.

  • Next you’ll learn all about backgrounds, gradients, filters, positioning elements, working with transitions and transformations, and many other more intermediate CSS properties.

  • We then spend nearly 10 hours learning how to create complex CSS layouts using Flexbox and CSS Grid. We then build multiple projects with complicated layouts.

  • You’ll learn how to build responsive layouts that look good on all screen sizes, from large desktops to tablets and mobile devices.

  • Finally, we wrap up the course with our massive final project that we build together from scratch. This project combines everything we’ve learned in the course into one huge website built with thousands of lines of HTML & CSS. Check out the promo video to learn more about the final project.


This course includes:

  • Over 37 hours of high quality videos

  • Downloadable assets, starter coder, and solutions for all sections

  • Dozens of exercises, challenges, and quizzes

  • Downloadable slides and cheatsheets, including beautiful diagrams and syntax references

  • Included support in the course Q&A forums

  • Access to our exclusive discord community with thousands of students

About me (your instructor)

I’m a teacher with extensive real-world teaching experience. I’ve taught thousands of students how to code at my in-person coding bootcamps around the globe. My graduates work at companies including Google, Tesla, Apple, Airbnb, and pretty much any big company you can name. My in-person teaching background informs the online experiences I create for students. Unlike most Udemy instructors, I’ve actually taught this material in a classroom full of students for nearly a decade. I know what works and what doesn’t work!

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Css
Hiển thị tất cả khoá học Frontend Development
Hiển thị tất cả khoá học Html
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊