Nền tảng Web với HTML & CSS - Học viện Đào tạo Công nghệ

HTML & CSS CHO FRONTEND

Mọi trang web và ứng dụng web mà bạn tương tác hàng ngày, dù phức tạp đến đâu, đều được xây dựng trên một nền tảng không thể thay thế: HTML và CSS. Đây là những công nghệ cốt lõi, là “ngôn ngữ” của trình duyệt, và việc làm chủ chúng chính là bước đi đầu tiên và quan trọng nhất trên hành trình trở thành một Lập trình viên Frontend chuyên nghiệp. Khóa học này được thiết kế để đặt những viên gạch nền móng vững chắc nhất, giúp bạn tự tin kiến tạo nên những giao diện web hiện đại.

Chương trình sẽ trang bị cho bạn kiến thức toàn diện, từ việc sử dụng HTML5 để xây dựng nên “bộ xương” của trang web. Bạn sẽ không chỉ học các thẻ cơ bản, mà còn đi sâu vào Semantic HTML để tạo ra một cấu trúc có tổ chức, thân thiện với các công cụ tìm kiếm (SEO) và dễ dàng tiếp cận. Sau đó, bạn sẽ học cách thổi hồn vào trang web bằng CSS3, từ việc định dạng màu sắc, văn bản cho đến việc làm chủ các hệ thống layout phức tạp và mạnh mẽ nhất hiện nay là Flexbox và CSS Grid.

Thời lượng: 36h

Hình thức đào tạo:

- Đào tạo trực tiếp tại lớp học
- Đào tạo trực tuyến
- Đào tạo hybrid (trực tuyến kết hợp trực tiếp)
- Đào tạo tại văn phòng khách hàng

KẾT QUẢ ĐẠT ĐƯỢC:

LÀM CHỦ NGÔN NGỮ ĐÁNH DẤU HTML5

Nắm vững cú pháp, các thẻ phổ biến và biết cách sử dụng thẻ ngữ nghĩa để xây dựng cấu trúc web có tổ chức, thân thiện với bộ máy tìm kiếm.
THÀNH THẠO ĐỊNH KIỂU VỚI CSS3

Sử dụng thành thạo các thuộc tính CSS để định dạng văn bản, màu sắc, hình ảnh và tạo ra các giao diện trực quan, đẹp mắt.
HIỂU SÂU CÁC NGUYÊN TẮC BỐ CỤC HIỆN ĐẠI

Vận dụng thành thạo mô hình hộp (box model), định vị (positioning), Flexbox và CSS Grid để xây dựng các layout phức tạp.
XÂY DỰNG GIAO DIỆN RESPONSIVE

Có khả năng sử dụng Media Queries để tùy biến giao diện, đảm bảo trang web hiển thị tốt và chuyên nghiệp trên mọi kích thước màn hình.
TẠO NỀN TẢNG VỮNG CHẮC CHO LỘ TRÌNH FRONTEND

Sẵn sàng kiến thức, kỹ năng cốt lõi để tiếp tục học các công nghệ nâng cao như JavaScript, React, hoặc Vue.js.

Đối tượng tham gia

Sinh viên

Muốn xây dựng một nền tảng vững chắc và bài bản về phát triển web ngay từ đầu.

Lập trình viên

Đã có kiến thức lập trình cơ bản, muốn bắt đầu sự nghiệp phát triển web chuyên nghiệp.

Chuyên viên Thiết kế UI/UX

Mong muốn hiểu rõ cách các thiết kế được hiện thực hóa bằng code để làm việc hiệu quả.

Người chuyển ngành

Muốn mở rộng kỹ năng sang frontend hoặc xử lý các công việc liên quan đến giao diện.

Nội dung khóa học

1. Tổng quan về Web và HTML cơ bản

- Cách thức hoạt động của web:
  - Tìm hiểu về mô hình Client-Server và quy trình một HTTP Request/Response diễn ra như thế nào.
- Cấu trúc tài liệu HTML:
  - Nắm vững cấu trúc của một tài liệu HTML chuẩn với các thẻ <!DOCTYPE>, <html>, <head>, và <body>.
- Các thẻ HTML cơ bản:
  - Thực hành với các thẻ phổ biến nhất như thẻ tiêu đề (<h1> đến <h6>), thẻ đoạn văn (<p>), và thẻ ngắt dòng (<br>).
- Thực hành:
  - Tự tay xây dựng trang web “Hello, World!” đầu tiên để củng cố kiến thức.

2. Cấu trúc Nội dung với HTML5

- Định dạng nội dung:
  - Học cách sử dụng các thẻ định dạng văn bản, tạo danh sách (<ul>, <ol>) và bảng (<table>).
- Liên kết và Hình ảnh:
  - Nắm vững cách sử dụng thẻ liên kết (<a>) để điều hướng và thẻ hình ảnh (<img>) để hiển thị media.
- Thẻ ngữ nghĩa (Semantic HTML):
  - Hiểu rõ tầm quan trọng và cách sử dụng các thẻ <header>, <footer>, <nav>, <main>, <section>, <article> để cải thiện SEO.

3. Định kiểu Cơ bản với CSS

- Cú pháp và cách áp dụng CSS:
  - Tìm hiểu về cú pháp CSS và 3 cách để áp dụng vào HTML (inline, internal, external).
- Selectors:
  - Học cách “chọn” các phần tử HTML để định kiểu thông qua element, class, ID, attribute, và pseudo-class.
- Các thuộc tính CSS cơ bản:
  - Thực hành với các thuộc tính định dạng phổ biến như color, background-color, font-size, font-family.
- Khái niệm cốt lõi:
  - Hiểu sâu về tính kế thừa (inheritance) và thứ tự ưu tiên (specificity & cascade) trong CSS.

4. Làm chủ Bố cục với CSS

- Mô hình hộp (Box Model):
  - Nắm vững các khái niệm margin, border, padding, content và vai trò của thuộc tính box-sizing.
- Định vị (Positioning):
  - Vận dụng các giá trị static, relative, absolute, fixed, và sticky để sắp xếp các phần tử.
- Bố cục với Flexbox:
  - Làm chủ display: flex và các thuộc tính liên quan để xây dựng các layout một chiều linh hoạt.
- Giới thiệu CSS Grid:
  - Hiểu các khái niệm cơ bản về display: grid để xây dựng các layout dạng lưới hai chiều phức tạp.

5. Xây dựng Giao diện Hoàn chỉnh & Responsive

- Thiết kế Responsive:
  - Học cách sử dụng Media Queries để tùy chỉnh CSS cho các kích thước màn hình khác nhau theo phương pháp mobile-first.
- Xây dựng các thành phần phổ biến:
  - Thực hành xây dựng các thành phần thực tế như thanh điều hướng, thẻ sản phẩm, biểu mẫu và chân trang.
- Giới thiệu CSS Frameworks:
  - Tìm hiểu vai trò và lợi ích của các framework như Bootstrap và Tailwind CSS trong việc tăng tốc độ phát triển.

6. Đồ án cuối khóa

- Xây dựng Website Tĩnh
  - Mục tiêu: Vận dụng toàn bộ kiến thức đã học để tự tay xây dựng một trang web tĩnh đa trang (3-4 trang) hoàn chỉnh và responsive.
  - Quy trình thực hiện:
    - Lập kế hoạch: Lựa chọn chủ đề (ví dụ: portfolio cá nhân, trang giới thiệu dịch vụ, blog đơn giản) và phác thảo bố cục (wireframe).
    - Xây dựng cấu trúc HTML: Dựng khung sườn HTML cho tất cả các trang, đảm bảo sử dụng các thẻ ngữ nghĩa một cách hợp lý.
    - Thiết kế với CSS: Viết CSS để định kiểu cho toàn bộ trang web, áp dụng Flexbox/Grid để tạo bố cục.
    - Tối ưu Responsive: Sử dụng Media Queries để đảm bảo trang web hiển thị đẹp trên cả máy tính và điện thoại.
    - Hoàn thiện và Triển khai: Kiểm tra lại toàn bộ code, sau đó triển khai trang web lên một nền tảng miễn phí như GitHub Pages.
  - Yêu cầu đầu ra: Một trang web tĩnh hoạt động, mã nguồn được quản lý trên GitHub, và file README.md mô tả về dự án.