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

Modern HTML & CSS From The Beginning 2.0

HTML & CSS Hiện Đại Từ Cơ Bản Đến Nâng Cao 2.0

HTML & CSS Hiện Đại Từ Cơ Bản Đến Nâng Cao 2.0

Xây dựng website responsive hiện đại với HTML và CSS - Học theo module, dự án nhỏ và 3 website hoàn chỉnh

4.6
(28,431 đánh giá)
92,743 học viên
Giảng viên
Brad Traversy
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 2.049.000đ -98%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
24.5 giờ video
200 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 18/03/2026

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

Xây dựng 3 Website Chất Lượng Cao Cùng Với Các Dự Án Nhỏ
Môi trường thực hành để học về thẻ HTML, thuộc tính CSS, khả năng truy cập và các khái niệm khác
Phần tử ngữ nghĩa, Mô hình hộp, Hiệu ứng chuyển tiếp, Keyframes, Bộ chọn giả và hơn thế nữa
Tạo bố cục linh hoạt với Flexbox & CSS Grid
Tạo website responsive với Media Queries, đơn vị tương đối và bố cục linh hoạt
Học những kiến thức cơ bản về Git, GitHub và triển khai website
Học phương pháp BEM (Block Element Modifier)
Phù hợp với mọi cấp độ kỹ năng

Yêu cầu

Khóa học này dành cho mọi lập trình viên, từ người mới bắt đầu đến nâng cao

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

Từ người hoàn toàn mới đến lập trình viên dày dặn kinh nghiệm

Nội dung khóa học

21 phần • 200 bài giảng
1 Chào mừng đến với khóa học
2 Cách thức hoạt động của Web
3 Vai trò của HTML, CSS & JS trong Phát triển Web
4 Trình soạn thảo VS Code & Môi trường
5 Mã nguồn khóa học
1 Giới thiệu phần
2 Tạo & Mở tệp HTML
3 Thẻ & Thuộc tính HTML
4 Cấu trúc tài liệu
5 Live Server & Prettier
6 Thiết lập tệp thực hành
7 Thẻ Meta & Tìm kiếm
8 Thẻ tiêu đề, đoạn văn & nhấn mạnh
9 Giới thiệu Công cụ dành cho nhà phát triển của trình duyệt
10 Danh sách
11 Thẻ liên kết (Anchor)
12 Hình ảnh
13 Phần tử Block vs Inline
14 Ngắt dòng, đường kẻ ngang & Ký tự thực thể
15 Divs & Spans
16 Lớp (Classes) & ID
17 Phần tử ngữ nghĩa
18 Khóa học cấp tốc về Emmet
19 Phím tắt
20 Thử thách: Lưới giá
1 Giới thiệu phần
2 Thẻ Biểu mẫu & Nhập liệu
3 Thẻ nhập liệu dạng văn bản
4 Thuộc tính trường nhập liệu
5 Hộp chọn & Vùng văn bản
6 Hộp kiểm & Nút radio
7 Các trường nhập liệu khác
8 Danh sách dữ liệu (Datalist)
9 Thử thách Biểu mẫu HTML
1 Giới thiệu phần
2 Phần tử Âm thanh
3 Phần tử Video
4 Bản đồ hình ảnh
5 Bảng
6 Iframe
7 Thuộc tính toàn cục
8 Phần tử SVG
9 Popover & Details
10 Progress & Meter
1 Giới thiệu phần
2 Triển khai CSS
3 Bộ chọn CSS cơ bản
4 Phông chữ trong CSS
5 Thuộc tính Phông chữ & Văn bản
6 Màu sắc (Tên màu, HEX, RGB, HSL)
7 Độ ưu tiên trong CSS (Specificity)
8 Nền
9 Tạo kiểu cho liên kết
10 Thư viện Font Awesome
11 Thử thách CSS Cơ bản
1 Giới thiệu phần
2 Giải thích Mô hình hộp
3 Kích thước & Tràn nội dung (Overflow)
4 Khoảng đệm (Padding)
5 Khoảng cách ngoài (Margin)
6 Bộ chọn toàn cục & Đặt lại kiểu (Reset)
7 Đường viền
8 Thuộc tính Hiển thị (Display)
9 Thuộc tính Vị trí (Position)
10 Đổ bóng hộp (Box Shadow)
11 Dự án nhỏ: Biểu mẫu Freelance
12 Dự án nhỏ: Thẻ sản phẩm giày
1 Giới thiệu phần
2 Flexbox là gì?
3 Flexbox cơ bản - Vùng chứa & Mục
4 Căn chỉnh & Phân bổ mục
5 Thuộc tính Flex & Kích thước động
6 Thứ tự Flex (Order)
7 Thử thách bố cục Flexbox
8 Dự án nhỏ: Thẻ giá CSS
1 Giới thiệu phần
2 Thiết kế Responsive là gì?
3 Bố cục linh hoạt & Phần trăm
4 Đơn vị rem & em
5 Đơn vị Viewport (vh & vw)
6 Media Queries
7 Lưới giá Responsive
8 Bố cục Flexbox Responsive
9 Container Queries
10 Container Units
1 Giới thiệu dự án
2 Thiết lập & HTML
3 CSS cơ sở & Kiểu tiêu đề
4 Bố cục Flex & Căn chỉnh nội dung chính
5 Kiểu dáng bên trong
6 Bố cục di động & Media Queries
1 Giới thiệu phần
2 Thuộc tính tùy chỉnh (Custom Properties)
3 Tiền tố nhà cung cấp (Vendor Prefixes)
4 Bộ lọc (Filters)
5 Dự án nhỏ: Cuộn mượt mà (Smooth Scroll)
6 Thanh điều hướng cố định & Tạo kiểu khi cuộn
7 Hàm calc()
8 Lồng nhau (Nesting)
1 Giới thiệu dự án
2 Thiết lập & CSS cơ sở
3 Tiêu đề & Điều hướng
4 Văn bản Hero
5 Thuộc tính tùy chỉnh
6 Phần thư viện ảnh với Flexbox
7 Chân trang
8 Trang Giới thiệu
9 Trang Liên hệ
10 Hiệu ứng Lightbox cho hình ảnh
1 Giới thiệu phần
2 Giới thiệu về Git & GitHub
3 Tạo khóa SSH
4 Quy trình làm việc & Lệnh Git
5 Triển khai website lên Netlify
6 Gửi biểu mẫu liên hệ
7 Kết nối & Cấu hình tên miền
1 Giới thiệu phần
2 Khả năng truy cập Web là gì?
3 Tiện ích mở rộng trình duyệt Skilltide
4 Kiểm tra trình đọc màn hình
5 Thuộc tính Vai trò (Role)
6 Thuộc tính ARIA
7 Aria Expanded & Phần tử động
1 Giới thiệu phần
2 Bộ chọn thuộc tính
3 Bộ kết hợp con & anh chị em
4 Phần tử giả
5 Lớp giả - first-child, last-child & nth-child
6 Lớp giả - first-of-type, last-of-type, nth-of-type
7 Phần tử giả :before & :after
8 Lớp phủ hình ảnh với :before
9 is(), where() & has()
10 Tạo kiểu cho biểu mẫu
11 Thử thách bộ chọn
1 Giới thiệu phần
2 Tổng quan về CSS Grid
3 Cột & Khoảng cách lưới (Gap)
4 repeat() & minmax()
5 Hàng lưới
6 Thử thách Grid 1
7 Thuộc tính căn chỉnh & phân bổ
8 repeat() với autofit & autofill
9 Định vị & Trải dài mục (Spanning)
10 Đường lưới được đặt tên
11 Thử thách Grid 2
12 CSS Grid & Media Queries
13 Vùng mẫu lưới (Grid Template Areas)
14 Tái cấu trúc Lumina Creative với Grid
1 Giới thiệu phần
2 Tổng quan về Hiệu ứng chuyển tiếp
3 Tạo hiệu ứng chuyển tiếp
4 Thuộc tính Biến đổi (Transform)
5 Căn giữa tuyệt đối với Transform/Translate
6 Biến đổi 3D
7 Giới thiệu JavaScript & CSS
8 Menu Hamburger
9 Keyframes - Phần 1
10 Keyframes - Phần 2 (Hoạt ảnh bộ tải CSS)
11 Khối lập phương xoay 3D
12 Dự án nhỏ: Website thuyết trình
1 Giới thiệu dự án
2 Thiết lập dự án
3 Điều hướng máy tính
4 Điều hướng di động
5 Phần Hero
6 SVG Hero & Media Queries
7 Nền thanh điều hướng khi cuộn
8 Phần Học tập
9 Phần Chương học
10 Phần Tóm tắt
1 Phần Thông Tin
2 Phần Tóm Tắt Kiến Thức
3 Phần Chi Tiết & Tác Giả
4 Phần Thống Kê
5 Phần Bản Tin
6 Chân Trang & Biểu Tượng Mạng Xã Hội
7 Trang Liên Hệ
8 Thêm Tính Năng Truy Cập
9 Triển Khai Lên Vercel & Thiết Lập Formspree
1 Giới Thiệu Dự Án
2 Giải Thích Phương Pháp BEM
3 Thiết Lập Dự Án
4 Thanh Điều Hướng & Menu Desktop
5 Điều Hướng Trên Di Động
6 Phần Hero (Ảnh Nền Chính)
7 Nền Thanh Điều Hướng Khi Cuộn
8 Phần Đánh Giá
9 Phần Tính Năng
10 Bố Cục Tính Năng Trên Di Động
1 Phần Xem Trước
2 Nút Phát Có Hiệu Ứng
3 Cửa Sổ Video
4 Khu Vực Chi Tiết
5 Phần Ảnh Chụp Màn Hình
6 Phần Tải Xuống
7 Chân Trang
8 Tạo Trang Chi Tiết
9 Thẻ Giá
10 Tính Năng Chi Tiết
1 Tổng Kết Khóa Học

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

Just revamped for 2024, this course is for both beginners that want to learn HTML/CSS beginning to end as well as seasoned developers that just want to build some cool projects. This is my most important course because it is the entry point to everything else that I have created. Whether you want to build front-end applications with React or full stack Node.js, PHP, Python, etc, you will always need use HTML and CSS in some way.


We go over all kinds of HTML tags, elements and structure and tons of CSS properties and concepts with a sandbox environment. Outside of these learning modules are mini-projects, challenges and 3 main website projects. One project uses the BEM CSS methodology.


The first few sections are tailored for beginners so even if you have never built anything before, you will learn all of the basics. If you already have experience with basic HTML & CSS, you can skip around and learn what you need or just go right into the projects.


Things We Cover In This Course


  • How Websites Work

  • Visual Studio Code Setup, Shortcuts, Live Server & Emmet

  • HTML5 Semantic Elements & Layout

  • CSS Fundamentals (colors, fonts, alignment, etc)

  • The Box Model, Margin, Padding & Border

  • Responsive Design With Media and Container Queries

  • CSS Units - rem, em, vh, vw, etc

  • Flexbox Layout Model

  • CSS Grid

  • Animation with Keyframes & Transitions

  • Using JavaScript to toggle classes & styles

  • CSS Custom Properties

  • Git & Github

  • Deploying Websites to Netlify and Vercel

  • Mini-Projects & Challenges

  • Project 1 - Lumina Creative Agency Website

  • Project 2 - Tutor Course Website

  • Project 3 - Leno Mobile App Website (BEM Methodology)

  • Much More

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 😊