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

CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

CSS - Hướng dẫn Toàn diện (Bao gồm Flexbox, Grid & Sass)

CSS - Hướng dẫn Toàn diện (Bao gồm Flexbox, Grid & Sass)

Học CSS lần đầu tiên hoặc ôn lại kỹ năng CSS và đi sâu hơn nữa. MỌI nhà phát triển web đều phải biết CSS.

4.6
(20,130 đánh giá)
113,190 học viên
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 399.000đ -87%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
23.0 giờ video
308 bài giảng
4 bài quiz
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026

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

Khám phá lý do CSS thật tuyệt vời, không phải thứ gì đó đáng sợ!
Sử dụng các tính năng CSS cơ bản lẫn nâng cao
Flexbox, grid, animations, transitions, fonts, media queries và nhiều hơn nữa - tất cả đều có trong khóa học!
Hiểu các khái niệm và lý thuyết đằng sau CSS và những tính năng CSS nhất định
Xây dựng các trang web đẹp mắt không chỉ có nội dung hay mà còn trình bày đẹp

Yêu cầu

Bạn nên biết những kiến thức rất cơ bản về HTML và phát triển web nói chung
Tuy nhiên, KHÔNG yêu cầu kiến thức HTML hay phát triển web nâng cao
HOÀN TOÀN KHÔNG yêu cầu kiến thức CSS trước đó! Bạn sẽ học tất cả trong khóa học này!

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

Bất kỳ ai muốn học CSS lần đầu tiên hoặc muốn nâng cao kỹ năng CSS của mình
Bất kỳ ai hào hứng tìm hiểu về các tính năng CSS mới nhất như Flexbox, CSS Grid hay CSS Variables
Bất kỳ ai đã biết CSS nhưng muốn đi sâu hơn

Nội dung khóa học

19 phần • 297 bài giảng
1 Giới thiệu
2 CSS là gì?
3 Tham gia Cộng đồng Học trực tuyến của chúng tôi
4 Lịch sử, Hiện tại & Tương lai của CSS
5 Nội dung Khóa học
6 Chọn Lộ trình của Bạn
7 Yêu cầu Tiên quyết của Khóa học
8 Cách Tận dụng Tối đa Khóa học Này
9 Công cụ Đề xuất
10 Nơi Tìm Mã nguồn
11 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Hiểu về Thiết lập Dự án Khóa học
3 Thêm CSS vào Dự án bằng Inline Styles
4 Hiểu về Thẻ & Tạo Tệp .css
5 Áp dụng Thêm Kiểu & Nhập Google Fonts
6 Lý thuyết - Bộ chọn (Selectors)
7 Hiểu về Kiểu "Cascading" & Độ Ưu tiên (Specificity)
8 Hiểu về Tính Kế thừa (Inheritance)
9 Thêm Bộ chọn Kết hợp (Combinators)
10 Lý thuyết - Bộ chọn Kết hợp (Combinators)
11 Tổng kết Thuộc tính & Bộ chọn
12 Tổng kết
13 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Giới thiệu Mô hình Hộp CSS (Box Model)
3 Hiểu về Mô hình Hộp
4 Hiểu về Margin Collapsing và Loại bỏ Margin Mặc định
5 Tìm hiểu sâu về "Margin Collapsing"
6 Lý thuyết - Làm việc với Thuộc tính Viết tắt (Shorthand Properties)
7 Áp dụng Thuộc tính Viết tắt trong Thực tế
8 Đi sâu vào Thuộc tính Height & Width
9 Hiểu về Box Sizing
10 Thêm Header vào Dự án của chúng ta
11 Hiểu về Thuộc tính Display
12 display: none vs visibility: hidden
13 Ôn tập HTML: Phần tử Cấp khối (Block-level) vs Phần tử Nội dòng (Inline)
14 Áp dụng Thuộc tính Display & Tạo kiểu Thanh Điều hướng
15 Hiểu về Hành vi Bất ngờ của "inline-block"
16 Làm việc với "text-decoration" & "vertical-align"
17 Tạo kiểu Thẻ Liên kết (Anchor Tags)
18 Thêm Lớp giả (Pseudo Classes)
19 Lý thuyết - Lớp giả & Phần tử giả (Pseudo Classes & Pseudo Elements)
20 Nhóm Quy tắc (Grouping Rules)
21 Làm việc với "font-weight" & "border"
22 Thêm & Tạo kiểu Nút Kêu gọi Hành động (CTA-Button)
23 Thêm Hình nền vào Dự án của chúng ta
24 Các Thuộc tính Đáng nhớ
25 Tổng kết
26 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Sử dụng Nhiều Lớp CSS & Bộ chọn Kết hợp
3 Lớp (Classes) hay ID?
4 (Không) sử dụng !important
5 Chọn phần tử Ngược lại với :not()
6 CSS & Hỗ trợ Trình duyệt
7 Tổng kết
8 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Thêm Kiểu cho Phần Kế hoạch (Plans) của chúng ta
3 Làm việc trên Gói Được Đề xuất (Recommended Plan)
4 Tạo kiểu Huy hiệu (Badge) với "border-radius"
5 Tạo kiểu Danh sách của chúng ta
6 Làm việc trên Tiêu đề và Giá của các Gói (Packages)
7 Cải thiện Nút Hành động (Action Button) của chúng ta
8 Hiểu về Đường viền ngoài (Outlines)
9 Trình bày Tính năng Cốt lõi cho Người dùng
10 Tạo kiểu Tiêu đề của Phần Tính năng Cốt lõi
11 Chuẩn bị Nội dung cho Khu vực Tính năng Chính
12 Thêm Chân trang (Footer)
13 Những gì chúng ta Đã đạt được Cho đến nay
14 Thêm Trang Gói (Packages Page)
15 Thử thách của Bạn
16 Tạo kiểu Liên kết
17 Tạo kiểu Hộp Gói (Package Boxes) của chúng ta
18 Thêm "float" vào Gói của chúng ta
19 Sửa Hiệu ứng Di chuột (Hover Effect)
20 Thêm Những Điểm chỉnh Cuối cùng
21 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Tại sao Định vị (Positioning) sẽ Cải thiện Trang web của chúng ta
3 Hiểu về Định vị - Lý thuyết
4 Làm việc với Giá trị "fixed"
5 Tạo Thanh Điều hướng Cố định (Fixed Navigation Bar)
6 Sử dụng "position" để Thêm Hình nền
7 Hiểu về Z-Index
8 Thêm Huy hiệu (Badge) vào Gói của chúng ta
9 Tạo kiểu & Định vị Huy hiệu với "absolute" và "relative"
10 Đi sâu hơn vào Định vị Tương đối (Relative Positioning)
11 Làm việc với "overflow" và Định vị Tương đối
12 Giới thiệu Định vị "sticky"
13 Hiểu về Ngữ cảnh Xếp chồng (Stacking Context)
14 Tổng kết
15 Tài nguyên & Liên kết Hữu ích
1 Tùy chọn: Giới thiệu Lộ trình Nâng cao
2 Giới thiệu Mô-đun
3 Hiểu về "background-size"
4 Làm việc với "background-position"
5 Thuộc tính Viết tắt "background" - Lý thuyết
6 Áp dụng "background" Origin, Clip & Attachment
7 Sử dụng Thuộc tính Viết tắt "background" trên Dự án của chúng ta
8 Tạo kiểu Hình ảnh
9 Thêm Trang Khách hàng (Customers Page) vào Trang web của chúng ta
10 Làm việc trên Bố cục Hình ảnh
11 Hiểu về Gradient Tuyến tính (Linear Gradients)
12 Áp dụng Gradient Xuyên tâm (Radial Gradients)
13 Xếp chồng Nhiều Hình nền (Stacking Multiple Backgrounds)
14 Hiểu về Bộ lọc (Filters)
15 Thêm & Tạo kiểu SVG - Kiến thức Cơ bản
16 Tổng kết
17 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Có gì Sai với Đơn vị trong Dự án của chúng ta?
3 Nơi Đơn vị Quan trọng
4 Tổng quan về Các Kích thước & Đơn vị Có sẵn
5 Quy tắc Cần nhớ: Định vị Cố định (Fixed Positioning) & "%"
6 Quy tắc Cần nhớ: Định vị Tuyệt đối (Absolute Positioning) & "%"
7 Quy tắc Cần nhớ: Định vị Tương đối/Tĩnh (Relative/Static Positioning) & "%"
8 Sửa lỗi Vấn đề Height 100%
9 Định nghĩa Font Size trong Phần tử Gốc (Root Element)
10 Sử dụng "min-width/height" & "max-width/height"
11 Làm việc với "rem" & "em"
12 Thêm "rem" vào Các Thuộc tính Bổ sung
13 Hoàn thiện "rem"
14 Hiểu về Đơn vị Khung nhìn "vw" & "vh"
15 Cửa sổ, Đơn vị Khung nhìn & Thanh cuộn
16 Chọn Đơn vị Phù hợp
17 Sử dụng "auto" để Căn giữa Phần tử
18 Dọn dẹp Mã của chúng ta
19 Tổng kết
20 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Thêm Hộp thoại (Modal)
3 Chọn & Thao tác Kiểu với JavaScript
4 Thêm Trình nghe Sự kiện (Event Listener)
5 Thêm Thanh Điều hướng Bên (Side Navigation Bar)
6 Mở và Đóng Menu Hamburger
7 Thao tác Lớp Phần tử (Element Classes)
8 Hiểu về Ký hiệu Thuộc tính (Property Notations)
9 Dọn dẹp Mã của chúng ta
10 Tổng kết
11 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Tại sao Dự án của chúng ta Nên trở nên Đáp ứng
3 Hiểu về Pixel Phần cứng vs. Pixel Phần mềm
4 So sánh Thẻ meta Viewport (HTML) và Media Queries (CSS)
5 Hiểu về Thẻ meta "viewport"
6 Thiết kế Trang web "Ưu tiên Di động" (Mobile First)
7 Thêm Media Queries Đầu tiên của chúng ta
8 Những điều Cần lưu ý khi Làm việc với Media Queries
9 Tìm Điểm Ngắt (Breaking Points) Phù hợp
10 Tạo Thiết kế Ưu tiên Di động cho Phần Kế hoạch của chúng ta
11 Làm cho Các Kế hoạch Đáp ứng
12 Thử thách của Bạn
13 Làm việc với Toán tử Logic (Logical Operators)
14 Cải thiện Trang Khách hàng
15 Cải thiện Trang Gói
16 Dọn dẹp Thanh Điều hướng
17 Định vị Chân trang của chúng ta Chính xác
18 Tổng kết
19 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Thêm Biểu mẫu Chưa được Tạo kiểu
3 Khởi tạo Trang (Page Initialization)
4 Hiểu về Bộ chọn Thuộc tính Nâng cao (Advanced Attribute Selectors)
5 Làm việc trên Bố cục Tổng quát
6 Tạo lại kiểu cho Các phần tử Biểu mẫu
7 Tạo kiểu Hộp kiểm (Checkbox)
8 Cung cấp Phản hồi Xác thực (Validation Feedback)
9 Tạo kiểu Nút Đăng ký (Signup Button)
10 Sửa Liên kết Bị hỏng
11 Tổng kết
12 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 So sánh Họ chung (Generic Families) & Họ phông chữ (Font Families)
3 Tìm hiểu Cài đặt Trình duyệt
4 Sử dụng Họ Phông chữ Mặc định
5 Tìm hiểu Cú pháp "font-family"
6 Làm việc với Phông chữ Lưu cục bộ
7 Làm việc với Google Fonts
8 Tìm hiểu Font Faces & Thuộc tính "font-style"
9 Nhập Phông chữ Tùy chỉnh của chúng ta
10 Tìm hiểu Định dạng Phông chữ
11 Đi sâu vào Thuộc tính Phông chữ
12 Thêm "letter-spacing"
13 Thay đổi Chiều cao Dòng
14 Áp dụng "text-decoration" & "text-shadow"
15 Tìm hiểu Cú pháp Rút gọn "font"
16 Hiệu suất Tải & "font-display"
17 Tổng kết
18 Tài nguyên & Liên kết Hữu ích
1 Tùy chọn: Giới thiệu Chuyên sâu
2 Giới thiệu Mô-đun
3 Cách chúng ta có thể Cải thiện Dự án
4 Tìm hiểu Flexbox
5 Tạo Flex Container
6 Sử dụng "flex-direction" & "flex-wrap"
7 Hiểu tầm quan trọng của Trục Chính & Trục Phụ
8 Làm việc với "align-items" & "justify-content"
9 Còn "align-content" thì sao?
10 Cải thiện Thanh Điều hướng với Flexbox
11 Thử thách của bạn - Làm việc trên Thanh Điều hướng Di động
12 Cải thiện Chân trang
13 Flexbox và Z-Index
14 [TÙY CHỌN] Lời giải Bài tập
15 Thêm Flexbox vào Trang Khách hàng
16 Sử dụng Thuộc tính "order" cho Flex Item
17 Làm việc với "align-self"
18 Tìm hiểu "flex-grow"
19 Áp dụng "flex-shrink"
20 So sánh "flex-basis" với "width" & "height"
21 Tổng kết
22 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 CSS Grid là gì?
3 Bắt đầu
4 Biến Container thành Grid
5 Định nghĩa Cột & Hàng
6 Định vị Phần tử Con trong Grid
7 Sử dụng "element-sizing", "repeat" & "minmax"
8 Định vị Phần tử Nâng cao
9 Làm việc với Named Lines
10 Tìm hiểu Cú pháp Rút gọn Cột & Hàng
11 Làm việc với Khoảng cách (Gaps)
12 Thêm Named Template Areas
13 Tạo Grid Areas Tự động
14 Áp dụng Grid vào Dự án
15 Làm việc với "fit-content"
16 Định vị Phần tử Grid
17 Định vị Toàn bộ Nội dung Grid
18 Định vị Phần tử Riêng lẻ
19 Tìm hiểu Grid Linh hoạt (Responsive Grids)
20 Áp dụng Autoflow
21 So sánh Grid Tường minh & Không tường minh
22 Tìm hiểu "auto-fill" & "auto-fit"
23 Tạo Dense Grid
24 Tạo kiểu Form Dự án với Grid
25 So sánh Grid & Flexbox
26 Bước tiếp theo
27 Tổng kết
28 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Xoay Phần tử và thiết lập transform-origin
3 Sử dụng Rotate và Translate
4 Làm việc với "skew" và "scale"
5 Áp dụng Cú pháp Rút gọn Biến đổi
6 Xoay Phần tử trong Không gian 3 Chiều
7 Tìm hiểu Thuộc tính "perspective"
8 Di chuyển Phần tử dọc theo Trục Z với "translateZ"
9 Xoay Container với "transform style"
10 Lật Phần tử & "backface-visibility"
11 Tổng kết
12 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Tìm hiểu và Áp dụng Transitions
3 Tìm hiểu sâu Thuộc tính "transition" trong CSS
4 Làm việc với Timing Functions
5 Transitions & Thuộc tính "display"
6 Sử dụng CSS Animations
7 Tìm hiểu sâu Thuộc tính "animation" trong CSS
8 Thêm Multiple Keyframes
9 Thêm Animations vào Trang Khách hàng
10 Sử dụng JavaScript Animation Event Listeners
11 Tổng kết
12 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 CSS Modules & Các Nhóm làm việc
3 Sử dụng CSS Variables
4 Tìm hiểu & Sử dụng Vendor Prefixes
5 Nên dùng Prefix nào?
6 Phát hiện Hỗ trợ Trình duyệt với @supports
7 Polyfills
8 Loại bỏ Sự không nhất quán giữa các Trình duyệt
9 Cách đặt tên CSS Classes
10 Vanilla CSS vs Frameworks
11 Tổng kết
12 Tài nguyên & Liên kết Hữu ích
1 Giới thiệu Mô-đun
2 Sass & Scss là gì?
3 Quan trọng: Cài đặt Sass
4 Cài đặt Sass
5 Những điểm có thể Cải thiện với Sass
6 Lồng ghép Selectors (Nesting Selectors)
7 Thêm Nested Properties
8 Tìm hiểu Variables
9 Lưu trữ Lists & Maps trong Variables
10 Built-In Functions
11 Thêm Tính toán Đơn giản (Arithmetics)
12 Cải thiện Import và Partials
13 Cải thiện Media Queries
14 Tìm hiểu Inheritance
15 Thêm Mixins
16 Sử dụng Ampersand Operator
17 Tổng kết
18 Tài nguyên & Liên kết Hữu ích
1 Tổng kết Khóa học
2 Phần thưởng: Thêm Nội dung!

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

Join this bestselling CSS course to learn all about CSS from the ground up, in great depth!

CSS ( Cascading Style Sheets) is a "programming language" you use to turn your HTML pages into real beautiful websites.

This course covers it all - we start at the very basics (What is CSS? How does it work? How do you use it)? and gradually dive in deeper and deeper. And we do this by showing both practical examples as well as the theory behind it.

Getting started with CSS might look easy but there actually is a lot of depth to CSS - hence this course provides different "Tracks" or "Entry points" to exactly meet your demands and reflect you current knowledge level:

  • The Basics Track: Start from scratch, learn CSS from the ground up. You start with lecture 1 and simply follow through to the end.

  • The Advanced Track: You already know the CSS basics, you know what selectors are and how it works but you want to dive in deeper and learn some advanced features and usages.

  • The Expert Track: You got the advanced knowledge, too, but you want to dive into things like Flexbox, CSS Grid, CSS Variables or Sass. This track is for you.

Of course this course offers the theory and practical examples - we'll build an entire real course project throughout the course - but there also are multiple assignments, quizzes and challenges for you to practice individual concepts taught throughout the course.

Talking about the course project - we'll build the frontend (no backend) of a fictional web hosting company. We'll have a starting screen which has different sections, we got a responsive design with an animated side-drawer, we got modals and forms and in general we got a lot of CSS animations, font styles and more!

Here's what's inside the course in detail - this is all also applied to the mentioned course project:

  • The basics about selectors, combinators and how you set up styling rules in general

  • Properties, values and decalarations

  • How specifity and inheritance work and why it's called "Cascading" Style Sheets

  • Important theoretical concepts like the "Box Model"

  • How the default position of elements can be changed

  • Styling backgrounds (e.g. gradients) and images

  • Which units and dimensions you typically use in CSS (px, rem, % and more)

  • How JavaScript and CSS interact

  • Responsive design and what "Mobile First" means

  • Styling forms and form inputs

  • Working with text, fonts and text styles

  • Flexbox! How it works and how to use it

  • Using the CSS Grid and how it differs from Flexbox

  • Transforming and animating HTML elements with the help of CSS

  • Writing future-proof CSS with features like CSS variables or best-practice class names

  • Using Sass and what it actually is all about

Is this course for you?

It's for you if

  • you started with learning web development and you want to build more beautiful websites

  • you already know CSS but want to dive deeper

  • you're using CSS in a trial-and-error manner and want to change this (you should!)

You might come back later if

  • you're an absolute CSS pro and you know the CSS working group drafts by heart

  • you're a backend-only developer (Node, PHP, NO HTML or frontend JavaScript)

  • you're a total newcomer to web development and you don't know the basics about HTML

If that sounds good to you, we'd be more than happy to welcome you in this course!

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 Sass
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 😊