RobustX / Chương trình học / Chuyên đề / Công nghệ cho học sinh K12 / WD201 – Nền Tảng Web: HTML & CSS

WD201 – Nền Tảng Web: HTML & CSS

Khóa học “WD201 – Nền Tảng Web: HTML & CSS” cung cấp nền tảng vững chắc về phát triển giao diện web, bước khởi đầu thiết yếu cho mọi lập trình viên web chuyên nghiệp. Học viên sẽ làm chủ hai công nghệ cốt lõi: HTML để xây dựng cấu trúc và tổ chức nội dung, cùng với CSS để kiến tạo phong cách, bố cục và mang lại trải nghiệm thị giác hấp dẫn. Chương trình không chỉ tập trung vào cú pháp mà còn rèn luyện tư duy thiết kế, khả năng phân tích layout và xây dựng sản phẩm số chỉn chu, chất lượng cao.

Xuyên suốt khóa học, lý thuyết luôn song hành cùng thực tiễn. Học viên sẽ từng bước xây dựng các trang web hoàn chỉnh, từ các thành phần cơ bản đến những layout phức tạp, đồng thời học cách áp dụng kỹ thuật responsive để giao diện hiển thị tối ưu trên mọi thiết bị từ máy tính đến điện thoại. Đây là bước đệm quan trọng, trang bị đầy đủ kỹ năng và tư duy cần thiết trước khi chinh phục JavaScript và các framework frontend hiện đại.

Thời lượng: 24h

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

Mục tiêu khoá học:

  1. XÂY DỰNG CẤU TRÚC WEB CHUẨN VỚI HTML5
    Nắm vững cách tổ chức nội dung bằng các thẻ HTML phổ biến và sử dụng HTML ngữ nghĩa để tạo ra cấu trúc trang web rõ ràng, chuẩn SEO.
  2. LÀM CHỦ CSS VÀ TƯ DUY THIẾT KẾ GIAO DIỆN
    Vận dụng thành thạo các thuộc tính CSS, từ màu sắc, font chữ đến Box Model để tạo ra những giao diện web hiện đại và có tính thẩm mỹ.
  3. VẬN DỤNG KỸ THUẬT BỐ CỤC HIỆN ĐẠI
    Sử dụng Flexbox và Grid Layout để xây dựng các bố cục phức tạp một cách linh hoạt, hiệu quả, đáp ứng mọi yêu cầu thiết kế.
  4. THIẾT KẾ GIAO DIỆN WEB ĐÁP ỨNG (RESPONSIVE)
    Thành thạo kỹ thuật Media Queries và các đơn vị tương đối để tạo ra giao diện hiển thị hoàn hảo trên mọi kích thước màn hình.
  5. HOÀN THIỆN DỰ ÁN WEB TĨNH VÀ QUY TRÌNH LÀM VIỆC
    Áp dụng quy trình làm việc chuyên nghiệp với VS Code, DevTools để hoàn thành một dự án web tĩnh hoàn chỉnh và triển khai thực tế.

Đối tượng tham gia

Học sinh Cấp 2, Cấp 3

Cần một bước đệm vững chắc để hiểu rõ bức tranh toàn cảnh trước khi đi sâu vào các khóa học chuyên nghiệp.

Người làm trái ngành

Muốn xây dựng nền tảng phát triển web một cách bài bản, từ con số không.

Người mới tiếp cận lập trình Web

Cần trang bị kỹ năng thực tế về HTML & CSS để chuẩn bị cho các dự án và công việc tương lai.

Người yêu thích sáng tạo

Đam mê tự tay tạo ra sản phẩm, muốn biến các ý tưởng công nghệ thành hiện thực một cách có hệ thống.

Nội dung khóa học

1. Tổng quan về phát triển web
    • Kiến trúc Web và Môi trường làm việc:
      • Phân biệt Frontend và Backend, Web tĩnh và Web động.
      • Vòng đời của một dự án phát triển website.
      • Cài đặt và làm quen các công cụ: VS Code, Trình duyệt & Chrome DevTools.
2. HTML5 – Ngôn ngữ của cấu trúc
    • Cấu trúc tài liệu HTML:
      • Cấu trúc một file HTML5 chuẩn: <!DOCTYPE>, <html>, <head>, <body>.
      • Các thẻ meta quan trọng cho SEO và hiển thị.
      • Semantic HTML: header, nav, main, section, article, footer.
    • Các thẻ HTML thiết yếu:
      • Định dạng văn bản: <h1>–<h6>, <p>, <span>, <strong>, <em>.
      • Tạo liên kết <a> và nhúng hình ảnh <img>.
      • Xây dựng danh sách <ol>, <ul>, <li> và bảng <table>.
    • Tương tác người dùng với Form:
      • Các loại input phổ biến: text, password, email, number.
      • Các thành phần tương tác: checkbox, radio, select, textarea, button.
3. CSS3 – Ngôn ngữ của phong cách
    • Nền tảng và cú pháp CSS:
      • Các cách nhúng CSS vào trang web và nguyên lý hoạt động.
      • Bộ chọn (Selector): tag, class, id, và các bộ chọn thuộc tính.
      • Độ ưu tiên (Specificity) và cơ chế xếp tầng trong CSS.
    • Mô hình hộp (Box Model):
      • Các thành phần content, padding, border, margin.
      • Thuộc tính box-sizing và cách kiểm soát kích thước phần tử.
    • Thuộc tính định dạng cốt lõi:
      • Làm việc với màu sắc (color, background-color) và font chữ (font-family, font-size).
      • Tùy chỉnh nền (background-image), đổ bóng (box-shadow, text-shadow).
      • Tạo hiệu ứng chuyển động mượt mà với transition.
4. Kỹ thuật dàn trang hiện đại
    • Flexbox – Bố cục một chiều:
      • Các thuộc tính của container: display: flex, flex-direction, justify-content, align-items.
      • Các thuộc tính của item: flex-grow, flex-shrink, flex-basis.
      • Thực hành xây dựng navbar, căn giữa phần tử.
    • Grid – Bố cục hai chiều:
      • Tạo hệ thống lưới với display: grid, grid-template-columns, grid-template-rows.
      • Sắp xếp các phần tử vào lưới một cách chính xác.
      • Xây dựng các layout phức tạp như trang báo, gallery.
    • Positioning và dòng chảy tài liệu:
      • Các giá trị của position: static, relative, absolute, fixed, sticky.
      • Quản lý lớp hiển thị với z-index.
5. Thiết kế Web đáp ứng (Responsive Web Design)
    • Nguyên lý và chiến lược thiết kế:
      • Tìm hiểu về Viewport và vai trò của thẻ meta viewport.
      • Tiếp cận Mobile-First trong thiết kế giao diện.
    • Media Queries:
      • Cú pháp và cách sử dụng Media Queries để áp dụng CSS theo điều kiện.
      • Các điểm ngắt (breakpoint) phổ biến cho mobile, tablet, và desktop.
    • Đơn vị và kỹ thuật Responsive:
      • Sử dụng các đơn vị linh hoạt: %, em, rem, vh, vw.
      • Kỹ thuật xử lý hình ảnh, video và nội dung co giãn theo khung nhìn.
6. Quy trình làm việc và Thực hành
    • Tổ chức và quy trình làm việc chuyên nghiệp:
      • Cấu trúc thư mục và cách đặt tên file/class theo chuẩn BEM.
      • Sử dụng Live Server để phát triển nhanh hơn.
      • Gỡ lỗi (debug) giao diện hiệu quả với Chrome DevTools.
    • Thực hành xây dựng dự án mẫu:
      • Phân tích và xây dựng giao diện Landing Page sản phẩm.
      • Xây dựng trang Portfolio cá nhân hoàn chỉnh.
7. Dự án cuối khóa
    • Lựa chọn đề tài và lên ý tưởng:
      • Học viên lựa chọn đề tài từ danh sách gợi ý hoặc tự đề xuất.
      • Xây dựng wireframe hoặc bản thiết kế đơn giản cho dự án.
    • Yêu cầu kỹ thuật và Tiêu chí đánh giá:
      • Bắt buộc áp dụng đầy đủ: HTML5 ngữ nghĩa, CSS3, Flexbox/Grid, Responsive Design.
      • Tiêu chí đánh giá: code sạch, cấu trúc tốt, giao diện thẩm mỹ, trải nghiệm người dùng.
    • Bảo vệ dự án và Nhận phản hồi:
      • Học viên trình bày sản phẩm cuối cùng của mình.
      • Nhận đánh giá và góp ý trực tiếp từ giảng viên để hoàn thiện kỹ năng.

LỊCH KHAI GIẢNG

(Đang cập nhật)

Đăng ký khóa học

Bài viết liên quan