Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Đăng nhập
Xem tất cả kết quả
Menu
Đăng nhập Đăng ký miễn phí

HTML&CSS Tutorial and Projects Course (Flexbox&Grid)

Khóa học Hướng dẫn HTML & CSS và Các Dự Án (Flexbox & Grid)

Khóa học Hướng dẫn HTML & CSS và Các Dự Án (Flexbox & Grid)

Lập trình Web cho người mới bắt đầu tuyệt đối. Học HTML5 và CSS3 từ đầu bằng cách xây dựng 20+ dự án thực tế tuyệt vời.

4.7
(5,326 đánh giá)
22,768 học viên
Giảng viên
Jānis Smilga
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
79.000đ 349.000đ -77%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
40.0 giờ video
446 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 07/06/2026
#Css #Frontend Development #Html #Web Development

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

Học HTML5 từ đầu.
Học CSS3 từ đầu.
Tạo các dự án thực tế có tính responsive từ đầu.
Học các mô-đun bố cục CSS Grid và Flexbox.
Học cách lấy hình ảnh miễn phí, font chữ tùy chỉnh.
Học cách làm việc với các biểu tượng font-awesome
Học cách lấy bảng màu tùy chỉnh.

Yêu cầu

Không cần kinh nghiệm lập trình/mã hóa vì chúng ta sẽ bắt đầu từ số 0
Mọi loại máy tính - Mac, PC.
Mọi trình soạn thảo văn bản. Chúng ta sẽ tải Brackets Text Editor nhưng bạn có thể theo dõi bằng bất kỳ trình soạn thảo nào.
Mọi trình duyệt Web. Chrome, Firefox. (Chrome chỉ bắt buộc nếu muốn dùng tính năng Live Preview của Brackets).
Tất cả phần mềm cần thiết đều MIỄN PHÍ!!!!

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

Dành cho bất kỳ ai muốn học Lập trình Web từ đầu.

Nội dung khóa học

35 phần • 446 bài giảng
1 Cấu trúc Khóa học
2 Sửa lỗi mờ Video
3 Đánh giá Khóa học
4 Kênh Discord
1 Giới thiệu HTML
2 Google Chrome và Visual Studio Code
3 Tải Google Chrome
4 Tải Visual Studio Code
5 Tổng quan về Visual Studio Code
6 Tạo một Dự án
7 Trang Web đầu tiên
8 Cấu trúc Tài liệu HTML Cơ bản
9 Triển khai Cấu trúc Tài liệu HTML
10 Thiết lập Tiện ích Live Server
11 Cài đặt Bổ sung và Emmet
12 Các Phần tử Tiêu đề
13 Tài nguyên Video
14 Phần tử Đoạn văn
15 Thu gọn Khoảng trắng
16 Lorem Ipsum
17 Cơ bản về Hình ảnh
18 Nhiều Hình ảnh
19 Hình ảnh Từ bên ngoài
20 Hình ảnh Đẹp
21 Chiều rộng và Chiều cao
22 Cắt Hình ảnh
23 Chú thích và Ngắt dòng
24 Liên kết Ngoài
25 Liên kết Trong
26 Liên kết - Trong cùng một Trang
27 Liên kết Hình ảnh - Liên kết Rỗng
28 Các Phần tử Sup và Sub
29 Các Phần tử STRONG và EM
30 Ký tự Đặc biệt
31 Danh sách Không có thứ tự
32 Danh sách Có thứ tự
33 Danh sách Lồng nhau
34 Phần tử Bảng
35 Biểu mẫu - Các Phần tử Input và Submit
36 Biểu mẫu - Textarea, Radio, Checkboxes, Select
37 Cài đặt Công cụ Định dạng Mã Prettier
38 Phím tắt
39 Phần tử Head - Tài nguyên Ngoài
1 Giới thiệu
2 Thiết lập
3 Tài nguyên Dự án
4 Tải Hình ảnh
5 Logo, Tiêu đề và Thanh điều hướng
6 Trang Chủ
7 Giới thiệu
8 Số liệu
9 Liên hệ
10 Hoàn thành Dự án
1 Giới thiệu CSS
2 Thiết lập Không gian làm việc
3 Thiết lập Trình soạn thảo
4 Tài nguyên Video
5 CSS Nội tuyến
6 CSS Nội bộ
7 CSS Ngoại tuyến
8 Xung đột Ưu tiên
9 Cú pháp CSS Cơ bản
10 Bộ chọn Phần tử
11 Nhóm Bộ chọn
12 Bộ chọn ID
13 Bộ chọn Class
14 Tổng kết Bộ chọn ID và Class
15 Các Phần tử DIV và SPAN
16 Tính kế thừa trong CSS
17 Tính kế thừa - Thông tin Thêm
18 Quy tắc Cuối, Độ cụ thể và Bộ chọn Toàn cục
19 Kết hợp Bộ chọn - Bộ chọn Hậu duệ
1 Giới thiệu Tất cả Dự án
2 Hoàn thành Dự án
1 Giới thiệu Dự án Đầu tiên
2 Các bước
3 Hoàn thành Dự án
4 Thư mục Dự án
1 Giới thiệu Màu sắc
2 Thuộc tính Color và Background-color
3 Tên Màu
4 RGB
5 RGBA
6 Giá trị HEX
7 Tùy chọn Màu trong VS-Code
8 Tài nguyên Ngoài
1 Giới thiệu
2 Các bước
3 Hoàn thành Dự án
1 Giới thiệu Đơn vị
2 Pixel, Font-Size, Width, Height
3 Đơn vị Phần trăm
4 Đơn vị Em
5 Đơn vị Rem
6 Vh và Vw
7 Kiểu mặc định của Trình duyệt và Chrome DevTools
8 Hàm Calc
9 Min-height, Max-height
1 Giới thiệu
2 Các bước
3 Hoàn thành Dự án
1 Giới thiệu Kiểu chữ
2 Font-family
3 Font-Stack và Font chung
4 Google Fonts
5 Font hệ thống
6 Thêm về Google Fonts
7 Font-weight, Font-style
8 Text-align, Text-indent
9 Các Thuộc tính Văn bản Khác
1 Giới thiệu
2 Các bước
3 Hoàn thành Dự án
1 Giới thiệu Mô hình Hộp
2 Mô hình Hộp CSS - Padding
3 Mô hình Hộp CSS - Margin
4 Mô hình Hộp CSS - Border
5 Border-radius, Negative Margin
6 Thuộc tính Outline
7 Mẹo với Border
1 Giới thiệu
2 Các bước
3 Cấu trúc Html
4 Tạo kiểu CSS
1 Giới thiệu Thuộc tính Display
2 Thuộc tính Display
3 Căn giữa Ngang Cơ bản
4 Ví dụ Thanh điều hướng Di động
5 Box-sizing: border-box
6 Display: inline-block
7 Display:none, Opacity, Visibility
1 Giới thiệu
2 Các bước
3 Cấu trúc Html
4 Tạo kiểu CSS
5 Các Câu hỏi Thường gặp
1 Giới thiệu
2 Thiết lập
3 Cơ bản về Hình nền
4 background-repeat
5 background-size
6 background-position
7 background-attachment
8 Linear Gradients
9 Lớp phủ Hình nền
10 Colorzilla
1 Giới thiệu
2 Các bước
3 Thiết lập
4 Cấu trúc Html
5 Tạo kiểu CSS
1 Giới thiệu Float, Positions, Media Queries, Z-index
2 Thuộc tính Float
3 Ví dụ Bố cục Cột với Float
4 Position static
5 Position relative
6 Position absolute
7 Position fixed
8 position:sticky
9 Media Queries
10 Z-index
11 Cơ bản về ::before và ::after
12 Ví dụ về ::before và ::after
13 Thuộc tính Inset
1 Giới thiệu
2 Các bước
3 Hoàn thành dự án
1 Giới thiệu Bộ chọn
2 Bộ chọn Cơ bản
3 Bộ chọn Hậu duệ và Con trực tiếp
4 First-line và First-letter
5 Bộ chọn lớp giả :hover
6 Bộ chọn lớp giả cho Liên kết
7 Bộ chọn lớp giả :root
1 Giới thiệu
2 transform: translate()
3 Ví dụ minh họa với Translate
4 transform: scale()
5 transform: rotate()
6 transform: skew()
7 Thuộc tính Transition
8 Nhiều hiệu ứng Transition
9 Transition - Delay, Cú pháp rút gọn, Tất cả thuộc tính
10 Transition-timing-function
11 Animation
12 Animation-fill-mode
1 Giới thiệu
2 Các bước
3 Hoàn thành dự án
1 Giới thiệu
2 Biến trong CSS
3 Giới thiệu FontAwesome Icons
4 FontAwesome Icons - Tự lưu trữ
5 FontAwesome Icons - Liên kết CDN
6 FontAwesome Icons - Cách dùng SVG
7 FontAwesome Icons - Các phiên bản
8 Text-Shadow và Box-shadow
9 Tiền tố trình duyệt
10 HTML Ngữ nghĩa
11 object-fit
12 Quy trình làm việc với Emmet
13 :is()
14 :not()
15 Giá trị màu HSL
16 Tiện ích mở rộng Five Server
1 Giới thiệu
2 Thiết lập
3 Hình ảnh và Biểu tượng
4 Cấu trúc HTML
5 Reset
6 Biến CSS
7 Body
8 Thẻ Blog
9 Hình ảnh Blog
10 Hoàn thành dự án
1 Giới thiệu
2 Thiết lập tệp và Dự án hoàn chỉnh
3 Thiết lập
4 Tài nguyên
5 Biến CSS
6 Kiểu dáng Toàn cục
7 Header HTML
8 Video bổ sung
9 Header CSS
10 Phân chia Nội dung
11 Kỹ năng HTML
12 Kỹ năng CSS
13 Cột Kỹ năng và Clearfix
14 Class so với Descendant
15 Giới thiệu HTML
16 Giới thiệu CSS
17 Sản phẩm HTML
18 Sản phẩm CSS
19 Dịch vụ HTML
20 Dịch vụ CSS
21 Biểu tượng Dịch vụ
22 Liên hệ HTML
23 Liên hệ CSS
24 Footer HTML
25 Footer CSS
26 Nút Điều hướng
27 Thanh điều hướng HTML
28 Thanh điều hướng CSS
29 Chức năng Thanh điều hướng
30 Animation
31 Nhiều Trang
32 Gửi Biểu mẫu
33 Netlify - Giới thiệu
34 Netlify - Kéo và Thả
35 Dự án Hoàn chỉnh
1 Phần Tùy chọn
2 Giới thiệu
3 Cài đặt Git
4 Lệnh Git
5 Thiết lập Github
6 Lợi ích
1 Giới thiệu CSS Flexbox
2 Thiết lập
3 Quy ước đặt tên
4 flex-direction
5 flex-wrap
6 justify-content
7 align-items
8 Dự án Hero
9 align-content
10 Trục Chính / Trục Phụ
11 Thuộc tính order
12 align-self
13 flex-grow
14 flex-shrink
15 flex-basis và flex
16 TÍNH NĂNG FLEXBOX MỚI!!!
1 Giới thiệu
2 Thiết lập tệp và Dự án hoàn chỉnh
3 Thiết lập Dự án
4 Sắc độ Màu
5 Logo
6 Favicon
7 Hero HTML
8 Hero CSS
9 Giới thiệu HTML
10 Giới thiệu CSS
11 Bố cục Cột Giới thiệu
12 Dịch vụ HTML
13 Dịch vụ CSS
14 Tour HTML
15 Tour CSS
16 Thiết kế Bổ sung
17 Liên hệ HTML
18 Liên hệ CSS
19 Thư viện ảnh HTML
20 Thư viện ảnh CSS
21 Footer HTML
22 Footer CSS
23 Thanh điều hướng HTML
24 Thanh điều hướng CSS - Màn hình nhỏ
25 Nút Chuyển đổi Thanh điều hướng
26 Cuộn mượt
27 Thanh điều hướng CSS - Màn hình lớn
28 Autoprefixer
29 Netlify - Triển khai Liên tục
30 Dự án Hoàn chỉnh
1 Giới thiệu CSS Grid
2 Thiết lập
3 Cú pháp Cơ bản - grid-template-columns
4 Lưới Ngầm định
5 Thiết lập CSS Tổng quát
6 Đơn vị - auto
7 grid-template-rows
8 Đơn vị fr
9 Thuộc tính gap
10 Gap - Cú pháp Mới!
11 fr so với %
12 Công cụ dành cho Nhà phát triển Firefox
13 Đường lưới
14 Đặt tên Đường lưới
15 Grid Template Areas
16 Thuộc tính Order
17 Hàm Repeat
18 justify-content
19 align-content
20 align-items, justify-items, align-self, justify-self
21 minmax()
22 auto-fit và auto-fill
1 Giới thiệu
2 Thiết lập tệp và Dự án hoàn chỉnh
3 Thiết lập
4 Kiểu dáng Toàn cục
5 Dự án nhỏ Thanh điều hướng
6 Hero HTML
7 Hero CSS
8 Thẻ HTML
9 Thẻ CSS - Màn hình nhỏ
10 Thẻ CSS - Màn hình lớn với Media Queries
11 Thẻ CSS - Màn hình lớn với minmax và auto-fit, auto-fill
12 Thẻ CSS - Chiều cao Hàng
13 Ô lưới HTML
14 Ô lưới CSS
15 Bổ sung Object-fit
16 Bố cục HTML
17 Bố cục CSS - Tổng quát
18 Bố cục CSS - Đường lưới
19 Mã nguồn Hoàn chỉnh và Dự án Hoàn chỉnh
1 Giới thiệu
2 Dự án Khởi đầu
3 Thiết lập
4 Thanh điều hướng HTML
5 Thanh điều hướng CSS - Màn hình nhỏ
6 Thanh điều hướng CSS - Màn hình lớn
7 Thanh bên HTML
8 Thanh bên CSS
9 Chức năng Thanh bên
10 Thanh điều hướng Cố định
11 Phần Hero - HTML
12 Phần Hero - CSS (Màn hình nhỏ)
13 Phần Hero - CSS (Màn hình lớn)
14 Phần Giới thiệu - HTML
15 Phần Giới thiệu - CSS (Màn hình nhỏ)
16 Phần Giới thiệu - CSS (Màn hình lớn)
17 Phần Dịch vụ - HTML
18 Phần Dịch vụ - CSS (Màn hình nhỏ)
19 Phần Dịch vụ - CSS (Màn hình lớn)
20 Phần Dự án - HTML
21 Phần Dự án - CSS (Màn hình nhỏ)
22 Phần Dự án - CSS (Màn hình lớn)
23 Phần Dự án - CSS (Bố cục tùy chỉnh)
24 Phần Kết nối - HTML
25 Phần Kết nối - CSS (Thiết lập video cơ bản)
26 Phần Kết nối - CSS (Lớp phủ)
27 Phần Kết nối - Banner
28 Tạm ẩn Video
29 Phần Kết nối - Clip-Path
30 Tài nguyên Video bên ngoài
31 Phần Kỹ năng - HTML
32 Phần Kỹ năng - CSS
33 Phần Dòng thời gian - HTML
34 Phần Dòng thời gian - CSS
35 Blog - Thiết lập cơ bản
36 Blog - Hoàn thiện
37 Footer
38 Trang Giới thiệu & Liên hệ - HTML
39 Trang Giới thiệu & Liên hệ - CSS
40 Trang Dự án và Tiền tố trình duyệt
41 Dự án hoàn chỉnh
1 Giới thiệu
2 Tài nguyên
3 Cấu trúc
4 HTML
5 Normalize
6 Phông chữ
7 Phông chữ - Tổng quan và điều chỉnh
8 Màu sắc - Thiết lập chung
9 Sắc thái chính
10 Sắc thái xám
11 Happy Hues
12 Các biến còn lại
13 Hình ảnh
14 Nút bấm
15 Thông báo
16 Thiết lập Form
17 CSS cho Form
18 Trạng thái tải
19 Tiêu đề
1 Giới thiệu
2 Mẫu khởi đầu
3 Thiết lập
4 Color Flipper - Giới thiệu
5 Color Flipper - HTML
6 Color Flipper - CSS
7 Bộ đếm - Giới thiệu
8 Bộ đếm - HTML
9 Bộ đếm - CSS
10 Trình quản lý công việc - Giới thiệu
11 Trình quản lý công việc - Form HTML
12 Trình quản lý công việc - Form CSS
13 Trình quản lý công việc - Danh sách HTML
14 Trình quản lý công việc - Danh sách CSS
15 Trình quản lý công việc - Form chỉnh sửa HTML
16 Trình quản lý công việc - Form chỉnh sửa CSS
17 Đánh giá - Giới thiệu
18 Đánh giá - HTML
19 Đánh giá - CSS
20 Thanh điều hướng - Giới thiệu
21 Thanh điều hướng - HTML
22 Thanh điều hướng - CSS (màn hình nhỏ)
23 Thanh điều hướng - CSS (màn hình lớn)
24 Thanh điều hướng - JS (chức năng bật/tắt)
25 Thanh bên - Giới thiệu
26 Thanh bên - HTML
27 Thanh bên - Nút bật/tắt
28 Thanh bên - CSS
29 Thanh bên - Chức năng
30 Modal - Giới thiệu
31 Modal - HTML
32 Modal - CSS phần Hero
33 Modal - CSS
34 Câu hỏi - Giới thiệu
35 Câu hỏi - HTML
36 Câu hỏi - CSS
37 Menu - Giới thiệu
38 Menu - HTML
39 Menu - CSS
40 Grocery Bud - Giới thiệu
41 Grocery Bud - HTML
42 Grocery Bud - CSS
1 Phần thưởng

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

If you want to start your career in Web Development, HTML and CSS are essential skills to have because they are foundational languages of the web.

HTML stands for Hyper Text Markup Language. In short HTML is a markup language that is used developing web pages.

CSS stands for Cascading Style Sheets. In short CSS is a language responsible for layout and styling of the web pages.

In this course we will cover both languages from the scratch and by the end of the course become HTML and CSS ninjas by building Responsive Real World Projects.

Why you should take this course?

Reason Number ONE - You Will Understand the Web Better.

Knowing the HTML and CSS and how they are used to create web pages is essential for web developer as they are building blocks of every web page.

Reason Number TWO - You Will be able to Create Websites.

Once you will know HTML and CSS you will be able to create a personal,unique web page for yourself.

Reason Number THREE - Start a Web Career.

For anybody who wants to pursue a career in Web Development knowledge of HTML and CSS is required. 

Reason Number FOUR - You Will Progress to Another Programming Languages with Greater Ease.

Once you know the fundamentals of HTML and CSS you will be able to pick up languages like Javascript with greater ease.

Reason Number FIVE - We Will Learn HTML and CSS from Scratch and Will Use it to Build Responsive Real Life Projects.

Not only we will learn the theory of HTML and CSS step by step. We also will apply our knowledge by building Real Life Projects.

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 😊