HTML/CSS cho người mới bắt đầu 2023

HTML/CSS, Lập trình web, Frontend

4.5

(380 đánh giá)

1,520 học viên

Giảng viên

Thúy Nguyễn

Đánh giá cao

79.000đ 1.309.000đ -94%

✓ Xem giỏ hàng và thanh toán

Mua trực tiếp qua Zalo Học thử bài 1

8.0 giờ video

10 bài quiz

107 bài viết

Truy cập vĩnh viễn

Học trên mọi thiết bị

Cập nhật: 27/04/2026

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

Trình bày được cấu trúc của tài liệu HTML

Sử dụng được các thẻ HTML cơ bản và nâng cao

Sử dụng được CSS để tùy chỉnh trang Web

Áp dụng được các kỹ thuật bố cục trang Web với CSS

Áp dụng được kỹ thuật responsive hiển thị hình ảnh trên nhiều loại kích thước màn hình

Sử dụng được Sass

Áp dụng được các nguyên tắc thiết yếu của UX/UI

Sử dụng được Git

Tự xây dựng các ứng dụng front-end phục vụ cho các mục đích khác nhau

Tham gia được vào vị trí Chuyên viên Thiết kế Website tại doanh nghiệp

Yêu cầu

Sử dụng máy tính ở mức cơ bản

Chăm chỉ, có kĩ năng tự học tốt

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

Học sinh, sinh viên chưa có nền tảng lập trình muốn tìm hiểu xây dựng website

Học sinh/sinh viên đã có nền tảng lập trình muốn củng cố, bổ sung kiến thức

Người đi làm muốn chuyển ngành, chuyển nghề sang lĩnh vực website

Người yêu thích công nghệ thông tin muốn bổ sung thêm kiến thức

Nội dung khóa học

15 phần • 136 bài giảng

1 Giới thiệu

2 6 bí kíp học online hiệu quả

3 Duy trì sự tập trung

4 Kĩ thuật ghi chép sử dụng Cornell Note

5 Ghi chép sử dụng bản đồ tư duy

1 [Bài giảng] Tổng quan Internet

2 [Bài giảng] Internet – Dây, cáp, wifi

3 [Bài giảng] Internet – HTTP vs HTML

4 [Bài giảng] Internet – An ninh mạng và tội phạm

5 [Bài giảng] Internet – Hoạt động tìm kiếm

6 [Bài đọc] Tổng quan Web

7 [Bài đọc] HTTP

8 [Bài đọc] Hướng dẫn cài đặt VS Code

9 [Bài thực hành] Web và Internet

1 [Bài đọc] Tổng quan về Git

2 [Bài đọc] Các bước làm việc cơ bản với Git

3 [Thực hành] Clone dự án từ Git

4 [Thực hành] Tạo dự án mới trên GitHub

5 [Bài tập] Sử dụng Git

1 [Bài đọc] Tổng quan về UI/UX

2 [Bài đọc] Tản mạn về Typography

3 [Bài đọc] Các nhà thiết kế web nên học typography

4 [Bài đọc] Sử dụng mẫu chữ F để trình bày nội dung

5 [Bài đọc] 10 nguyên tắc để thiết kế Type tốt hơn

6 [Bài đọc] Các vấn đề thường gặp khi kết hợp các kiểu chữ trong Typo

7 [Bài đọc] Sử dụng màu sắc trong trang web

8 [Thực hành] Sử dụng Adobe Color

9 [Bài đọc] Tổng quan HTML

1 [Bài giảng] Một trang web cơ bản và các thẻ HTML

2 [Bài đọc] Tổng quan HTML

3 [Bài đọc] Các thẻ (heading, paragraph, formatting) trong HTML

4 [Bài đọc] HTML Styles

5 [Bài đọc] Thẻ hiển thị hình ảnh, liên kết trong HTML

6 [Bài đọc] Sử dụng các thẻ tạo danh sách: ul, ol, li

7 [Bài đọc] Html Media

8 [Thực hành] Thêm video vào trang web

9 [Thực hành] Sử dụng thẻ HTML cơ bản

10 [Bài tập] Tạo trang CV cá nhân

11 [Bài tập] Thiết kế trang web nghe nhạc đơn giản

12 [Bài tập] Tạo danh sách

1 [Bài giảng] Tạo bảng trong HTML

2 [Bài đọc] Tạo biểu mẫu cho trang web

3 [Bài đọc] Sử dụng select, option

4 [Bài đọc] Sử dụng input, button và text-area

5 [Thực hành] Tạo form cơ bản

6 [Thực hành] Tạo một form tìm kiếm Google

7 [Thực hành] Tạo bảng cơ bản

8 [Thực hành] Tạo bảng nâng cao

9 [Bài tập] Tạo form đơn giản

10 [Bài tập] Tạo giao diện form đăng ký người dùng

11 [Bài tập] Tạo form lấy survey khách hàng

12 [Bài tập] Tạo bảng nâng cao

1 [Bài đọc] Tổng quan CSS

2 [Bài đọc] Các bộ chọn (selector) khác nhau trong CSS

3 [Bài đọc] Điều chỉnh màu nền và ảnh nền

4 [Bài đọc] Đường viền trong CSS

5 [Bài đọc] Mô hình hộp (Box Model)

6 [Bài giảng] Mô hình hộp trong CSS

7 [Thực hành] Danh sách trong CSS

8 [Thực hành] Bảng trong CSS

9 [Thực hành] Sử dụng Box Model 1

10 [Bài tập] Nhúng CSS vào trang HTML

11 [Bài tập] Sử dụng Box Model 2

1 [Bài giảng] Thuộc tính position

2 [Bài giảng] Tạo Layout với div và CSS

3 [Bài đọc] CSS Layout – Thuộc tính display

4 [Bài đọc] CSS Layout – width and max-width

5 [Bài đọc] CSS Layout – Horizontal & Vertical Align

6 [Bài đọc] CSS Layout – Clear

7 [Bài đọc] CSS Layout – Overflow

8 [Bài đọc] CSS Layout – Float

9 [Thực hành] Tạo bố cục cơ bản

10 [Thực hành] Tạo menu dọc

11 [Thực hành] Tạo menu ngang

12 [Thực hành] Tạo bố cục các fixed header và fixed footer

13 [Bài tập] Tạo giao diện giản lược của trang chủ Facebook

14 [Bài tập] Tạo layout với các thẻ HTML5 và CSS

15 [Bài tập] Phát triển trang web xem hoạt hình trực tuyến

1 [Bài đọc] CSS Combinators

2 [Bài đọc] CSS Pseudo-classes

3 [Bài đọc] CSS Opacity / Transparency

4 [Bài đọc] CSS Pseudo-elements

5 [Bài đọc] CSS Transitions

6 [Bài đọc] CSS Animations

7 [Thực hành] Text in Transparent Box

8 [Thực hành] Tạo xung hướng tròn

9 [Thực hành] Tạo xung hướng chuyển đổi vuông và tròn

1 [Bài đọc] Responsive Web Design

2 [Bài đọc] Grid View

3 [Bài đọc] RWD Media Queries

4 [Bài đọc] RWD với DIV và CSS

5 [Thực hành] Responsive Web Page

6 [Thực hành] Tạo trang web Responsive cơ bản

7 [Bài tập] Tạo layout với RWD

8 [Bài tập] Tạo gallery đơn giản sử dụng RWD

1 [Bài đọc]CSS Grid Layout

2 [Bài đọc] CSS Grid Container

3 [Bài đọc] CSS Grid Item

4 [Thực hành] CSS | grid-gap Property

5 [Thực hành] CSS | grid-row Property

6 [Thực hành] CSS | grid-row-gap Property

7 [Thực hành] CSS | grid-column-start Property

8 [Thực hành] CSS | grid-template-columns Property

1 [Bài đọc] CSS Flexbox

2 [Thực hành] CSS | flex-basis Property

3 [Thực hành] CSS | flex-flow Property

4 [Thực hành] CSS | flex-grow Property

5 [Thực hành] CSS | flex-wrap property

6 [Bài đọc] CSS Flex Container

7 [Bài đọc] CSS Flex Items

8 [Bài đọc] CSS Flex Responsive

1 [Bài đọc] Các giai đoạn của quy trình thiết kế web

2 [Bài đọc] Giới thiệu HTML template

3 [Bài đọc] Quy ước đặt tên CSS theo chuẩn BEM

4 [Bài đọc] Tổng quan về SASS

5 [Bài đọc] Variables: Biến trong SASS

6 [Bài đọc] Nesting: Lồng CSS Selector

7 [Bài đọc] Mixin: Nhóm CSS

8 [Bài đọc] Extend & Inheritance: Mở rộng và Kế thừa trong CSS

9 [Bài đọc] Partials và Importing

10 [Bài đọc] Thiết lập Build Process

11 [Bài tập] Tái cấu trúc mã CSS cho sẵn

1 Project Base – Intro

2 Project Base – HTML Banner

3 Project Base – CSS Banner

4 Project Base – HTML SideNav

5 Project Base – CSS SideNav

6 Project Base – HTML Features

7 Project Base – CSS Features

8 Project Base – HTML Services

9 Project Base – CSS Services

10 Project Base – HTML Testimonial

11 Project Base – CSS Testimonial

12 [Project Base] HTML Footer

13 [Project Base] CSS Footer

14 [Project Base] Scroll Menu

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

Bạn có đam mê về thiết kế web?

Bạn muốn tạo ra những trang web đẹp mắt, tương tác và chuyên nghiệp?

Bạn lo lắng học online có hiệu quả không?

Bạn sợ việc phải bỏ tiền ra mua một khóa học online nhưng lại nhận về một khóa học không chất lượng?

Mình hoàn toàn hiểu những lo lắng đó của các bạn. Khóa học HTML/CSS sẽ giúp bạn giải quyết được những lo lắng này. Trong khóa học này mình có video hướng dẫn phương pháp học, đảm bảo quá trình học tập của bạn sẽ là học tập thực thụ.

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

Khóa học HTML/CSS của mình không chỉ là một khóa học thông thường. Đây là hành trình thú vị đưa bạn từ những khái niệm cơ bản đến việc xây dựng và tối ưu hóa các trang web ấn tượng.

Dựa trên hơn 5 năm kinh nghiệm thực tế trong lĩnh vực thiết kế web, mình đã tạo ra một khóa học mang tính ứng dụng cao, giúp bạn có thể áp dụng ngay những kiến thức bạn học vào dự án thực tế.

Học viên sẽ học được gì?

Trình bày được cấu trúc của tài liệu HTML
Sử dụng được các thẻ HTML cơ bản và nâng cao
Sử dụng được CSS để tùy chỉnh trang Web
Áp dụng được các kỹ thuật bố cục trang Web với CSS
Áp dụng được kỹ thuật responsive hiển thị hình ảnh trên nhiều loại kích thước màn hình
Sử dụng được Sass
Áp dụng được các nguyên tắc thiết yếu của UX/UI
Sử dụng được Git
Tự xây dựng các ứng dụng front-end phục vụ cho các mục đích khác nhau
Tham gia được vào vị trí Chuyên viên Thiết kế Website tại doanh nghiệp

Đối Tượng Học:

Khóa học phù hợp cho tất cả mọi người - từ người mới bắt đầu không có kiến thức trước về lập trình
Những bạn muốn nâng cao kỹ năng thiết kế web của mình.

Tại sao nên tham gia khóa học?

1. Giảng viên dày dặn kinh nghiệm: Bạn sẽ được hướng dẫn bởi giảng viên giàu kinh nghiệm và nhiệt tình. Bạn sẽ được đồng hành từng bước trong hành trình học tập.

2. Thời gian và địa điểm linh hoạt: Khóa học này cho phép bạn học tại bất kỳ đâu có kết nối internet. Bạn có thể tự quản lý thời gian học tập và tích hợp học vào lịch trình hàng ngày của mình.

3. Dự án thực tế: Bạn sẽ có cơ hội tham gia vào các dự án thực tế, giúp bạn rèn luyện kỹ năng lập trình thực tế và làm quen với quy trình phát triển ứng dụng.

4. Hỗ trợ và tương tác: Bạn sẽ được hỗ trợ và tương tác với cộng đồng học viên đồng nghiệp và giảng viên thông qua diễn đàn trực tuyến và nhóm học tập.