inflearn logo

Học chuẩn web đúng cách (Cơ bản) - 2025

Khóa học này cung cấp những kiến thức cơ bản để bạn có thể học và vận dụng lập trình web chuẩn. Người học có thể hiểu được các nguyên tắc cơ bản của lập trình web, từ đó xây dựng nền tảng cần thiết để học các chương trình web. Ngoài ra, khóa học cũng được cấu trúc để giúp người học có thể lấy được các chứng chỉ thông qua việc lập trình web chuẩn.

9 học viên đang tham gia khóa học này

Độ khó Nhập môn

Thời gian 12 tháng

frontend
frontend
HTML/CSS
HTML/CSS
Web Design
Web Design
frontend
frontend
HTML/CSS
HTML/CSS
Web Design
Web Design

Bạn sẽ nhận được điều này sau khi học.

  • Bạn có thể trau dồi khả năng tìm việc làm với tư cách là nhà thiết kế web và nhà xuất bản web (web publisher) bằng cách học các kiến thức cơ bản về lập trình tiêu chuẩn web.

  • Bạn có thể đạt được chứng chỉ bằng cách học các kỹ năng về lập trình tiêu chuẩn web.

Học chuẩn web đúng cách (Cơ bản) - 2025

Khóa học này cung cấp những kiến thức cơ bản để học và ứng dụng lập trình web chuẩn. Người học có thể hiểu được các nguyên tắc cơ bản của lập trình web, và dựa trên đó để xây dựng nền tảng cần thiết cho việc học các chương trình web. Ngoài ra, khóa học cũng được cấu trúc để người học có thể lấy được các chứng chỉ thông qua việc lập trình web chuẩn.

Nội dung bài giảng

Học chuẩn web đúng cách (Cơ bản) - 2025 Phần 1

  • Bắt đầu với HTML: Học cách soạn thảo và cấu trúc tài liệu HTML

    • Quy trình tạo tệp HTML và soạn thảo văn bản cơ bản

    • Hiểu cách HTML được trình duyệt web thông dịch

  • Cấu trúc tài liệu HTML: Hiểu các thành phần cơ bản của HTML

    • Giải thích vai trò của các thẻ cơ bản như <html>, <head>, <body>

    • Phân biệt tiêu đề tài liệu, siêu dữ liệu (metadata) và vùng thân bài

  • Thẻ nhập liệu biểu mẫu: Cách sử dụng các thẻ nhập liệu khác nhau

    • Viết các thẻ nhập liệu đa dạng như <input>, <textarea>, <select> v.v.

    • Sử dụng văn bản, mật khẩu, hộp kiểm (checkbox), nút chọn (radio button), danh sách thả xuống (dropdown), v.v.

  • Các thẻ xuất dữ liệu khác: Cách hiển thị văn bản, hình ảnh và liên kết

    • Các thẻ xuất văn bản như <p>, <h1>~<h6>

    • Chèn hình ảnh bằng cách sử dụng <img>

    • Cách kết nối liên kết sử dụng <a>

  • Bắt đầu với CSS: Cú pháp cơ bản và cách áp dụng CSS

    • Hiểu cấu trúc bộ chọn (selector) và thuộc tính-giá trị (attribute-value)

    • 3 cách áp dụng CSS vào HTML (Inline, Internal, External stylesheet)

  • Phong cách CSS cơ bản: Thiết lập kiểu văn bản, màu sắc và nền

    • Điều chỉnh kích thước · độ dày phông chữ, màu chữ và khoảng cách dòng

    • Chỉ định màu nền, hình ảnh nền

  • Reset CSS: Khởi tạo lại phong cách mặc định

    • Loại bỏ sự khác biệt trong phong cách mặc định của trình duyệt

    • Cách sử dụng Reset CSS hoặc Normalize.css

  • Display CSS: Hiểu về phương thức hiển thị phần tử

    • Sự khác biệt giữa các thuộc tính block, inline, inline-block, none properties

    • Sự thay đổi bố cục theo cách sắp xếp các thành phần

  • Position CSS: Cách chỉ định vị trí

    • Đặc điểm và ví dụ sử dụng của static, relative, absolute, fixed, sticky

    • Chỉ định tọa độ của phần tử (top, right, bottom, left)

  • Flex Layout: Cơ bản về Flexbox và triển khai bố cục đáp ứng

    • Hiểu các thuộc tính cơ bản của Flex container và Flex item

    • Căn chỉnh ngang·dọc, phân bổ không gian, cấu hình bố cục đáp ứng (responsive)

Học chuẩn web đúng cách (Cơ bản) - 2025 Phần 2

  • Header chuẩn web: Cách cấu hình header phù hợp với tiêu chuẩn web

    • Thiết kế cấu trúc sử dụng các thẻ semantic HTML5 (như <header>, <nav>)

    • Viết mã markup tuân thủ các quy tắc tiêu chuẩn web

  • Header tiếp cận web: Cấu hình header để cải thiện khả năng tiếp cận

    • Áp dụng văn bản thay thế và thuộc tính ARIA để hỗ trợ trình đọc màn hình

    • Cung cấp khả năng điều hướng bằng bàn phím và tiêu điểm (focus) thị giác rõ ràng

  • Container theo từng thiết bị: Thiết kế container phù hợp với nhiều kích thước màn hình khác nhau

    • Phương pháp thiết kế container dạng cố định (fixed), linh hoạt (fluid) và đáp ứng (responsive)

    • Điều chỉnh bố cục theo kích thước màn hình bằng cách sử dụng Media Query

  • GNB tiêu chuẩn web (Loại 1, 2, 3): Thực hành thiết kế các thanh điều hướng đa dạng

    • Thực hiện điều hướng dạng ngang, dạng dọc và dạng thả xuống (dropdown)

    • Thêm phong cách và hành động bằng cách sử dụng CSS và JavaScript

  • Viết biểu tượng font: Thiết kế web sử dụng biểu tượng font

    • Cách sử dụng các thư viện font icon như Font Awesome

    • So sánh SVG và biểu tượng phông chữ (font icon) cùng các ví dụ ứng dụng

  • Định dạng bảng: Định dạng bảng cơ bản và ứng dụng

    • Chỉ định các kiểu cơ bản để tăng khả năng đọc của bảng

    • Phân biệt hàng/cột, hiệu ứng di chuột (mouse over), triển khai bảng phản hồi (responsive table)

  • Tạo kiểu cho Form: Các ví dụ cơ bản và ứng dụng trong thiết kế Form

    • Cải thiện thiết kế của các trường nhập liệu, nút bấm, hộp chọn, v.v.

    • Áp dụng kiểu dáng theo từng trạng thái (focus, vô hiệu hóa, v.v.)

  • Thiết kế đáp ứng: Thực hành thiết kế đáp ứng phù hợp với nhiều thiết bị khác nhau

    • Nguyên tắc thiết kế ưu tiên thiết bị di động (Mobile-First)

    • Tối ưu hóa UI theo kích thước màn hình bằng cách sử dụng Media Queries

Lưu ý trước khi khóa học bắt đầu

Khóa học này không cung cấp tính năng hỏi/đáp với người chia sẻ kiến thức.

Tài liệu học tập

part 1 - tệp sử dụng trong bài giảng (step1 html, step2 css)

part 2 - tài liệu thực hành bài giảng (bước 1 html, bước 2 css)

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Bất kỳ thành viên nào muốn học lập trình web lần đầu tiên

  • Bất kỳ thành viên nào chỉ sử dụng các chương trình đồ họa

  • Bất kỳ thành viên nào muốn lấy chứng chỉ

Xin chào
Đây là usefulit

8,280,823

Học viên

6,646

Đánh giá

4.6

Xếp hạng

336

Các khóa học

Chúng tôi sẽ giúp bạn phát triển thông qua những bài giảng IT hữu ích.

Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Chưa có đủ đánh giá.
Hãy trở thành tác giả của một đánh giá giúp mọi người!

Khóa học khác của usefulit

Hãy khám phá các khóa học khác của giảng viên!

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!

Giảm 25% cho thành viên mới

1.854.466 ₫

25%

2.472.616 ₫