• Trang chủ
    • Môn học
    • Kỳ thi
    • Báo lỗi
    • Hướng dẫn
    Tất cả môn học
    🌐

    Thiết kế Web

    Bám sát giáo trình Thiết kế Web (ĐH KTQD): tổng quan Web & URL, HTML (phần tử, ngữ nghĩa, bảng, biểu mẫu), CSS (bộ chọn, độ ưu tiên, màu sắc, định dạng), thiết kế bố cục (mô hình hộp, đơn vị, Flexbox, Grid, đáp ứng), JavaScript căn bản, DOM, công cụ (Emmet, SASS, Bootstrap, jQuery) và triển khai Website.

    1135 bài · 19 chủ đề

    Bài giảng

    Thiết kế Web

    Khóa Thiết kế Web 15 buổi (45 giờ) theo học phần CNTT1165, bám sát Giáo trình Thiết kế Web (ĐH KTQD): từ nguyên lý Website, HTML, CSS, bố cục đáp ứng, JavaScript, DOM đến công cụ hỗ trợ và triển khai — mỗi buổi có bài giảng, bộ slide, ví dụ chạy thử ngay trên trang và bài tập.

    15
    buổi học
    45 giờ
    thời lượng
    265
    bài thực hành
    Tiến độ của bạn0/265 bài (0%)

    🎯 Hoàn thành khóa: giải được ≥70% số bài thực hành

    Hiện 0/265 bài (0%) — cần 186 bài.

    📦 Tài liệu & hướng dẫn cài đặt môi trường
    Bắt đầu học — Buổi 1

    Lộ trình 15 buổi

    1. 1

      Buổi 1: Tổng quan về thiết kế Website

      180 phút
      • Sau buổi này bạn có thể định nghĩa **Website**, **trang Web**, **URL**, **máy khách (Client)**, **máy chủ (Server)** và giải thích cách trình duyệt gửi **HTTP Request**, nhận **HTTP Response** để hiển thị trang.
      • Sau buổi này bạn có thể phân biệt **mạng LAN, WAN, Internet**, **Web tĩnh** với **Web động** và nêu được ba thành phần chính tạo nên một Website.
      • Sau buổi này bạn có thể đọc và tách một **đường dẫn Web** thành scheme, authority (địa chỉ và cổng), path, parameters và anchor; biết cổng mặc định của HTTP và HTTPS.
      0/14 bàiVào học →
    2. 2

      Buổi 2: HTML, CSS, JavaScript và các công cụ thiết kế Web

      180 phút
      • Sau buổi này bạn có thể phân biệt vai trò của **HTML** (cấu trúc và nội dung), **CSS** (trình bày, định dạng, bố cục) và **JavaScript** (hành vi), và giải thích cách trình duyệt kết hợp ba thứ này khi hiển thị một trang.
      • Sau buổi này bạn có thể mô tả cấu trúc cơ bản của một tài liệu HTML (`DOCTYPE`, `html`, `head`, `body`), lịch sử các phiên bản HTML, CSS và vai trò của W3C, WHATWG.
      • Sau buổi này bạn có thể liên kết một tệp CSS vào tài liệu HTML bằng thẻ `link` và nhận biết cách một tệp JavaScript được tải về và thực thi.
      0/11 bàiVào học →
    3. 3

      Buổi 3: HTML (1): tài liệu, phần tử, thuộc tính, phần đầu

      180 phút
      • Sau buổi này bạn có thể giải thích **HTML** là gì, mô tả cấu trúc cơ bản của một tài liệu HTML5 (`<!DOCTYPE html>`, `html`, `head`, `body`) và tạo, mở, xem trước một tệp `.html`.
      • Sau buổi này bạn có thể phân biệt **phần tử**, **thẻ mở**, **thẻ đóng**, **phần tử rỗng** và viết được các phần tử lồng nhau đúng cú pháp.
      • Sau buổi này bạn có thể khai báo và dùng **thuộc tính** (`href`, `src`, `alt`, `width`, `height`, `style`, `title`, `lang`, thuộc tính boolean) đúng quy tắc về tên, dấu nháy và vị trí.
      0/16 bàiVào học →
    4. 4

      Buổi 4: HTML (2): ngữ nghĩa, văn bản, bảng, danh sách, liên kết

      180 phút
      • Sau buổi này bạn có thể giải thích thế nào là **phần tử ngữ nghĩa (semantic element)**, phân biệt với phần tử phi ngữ nghĩa `div`, `span`, và dùng đúng `main`, `section`, `article`, `header`, `footer`, `nav`, `aside`, `figure`, `figcaption`, `hr`.
      • Sau buổi này bạn có thể tổ chức nội dung văn bản bằng tiêu đề `h1`–`h6`, đoạn văn `p`, trích dẫn (`blockquote`, `q`, `cite`), `abbr`, `address`, `time`, các thẻ định dạng (`strong`, `em`, `mark`, `del`, `ins`, `sub`, `sup`...), ngắt dòng `br` và mã lệnh `code`, `pre`.
      • Sau buổi này bạn có thể dựng bảng với `table`, `tr`, `th`, `td`, gộp ô bằng `colspan`, `rowspan`, thêm `caption` và chia `thead`, `tbody`, `tfoot`.
      0/19 bàiVào học →
    5. 5

      Buổi 5: HTML (3): biểu mẫu và đa phương tiện

      180 phút
      • Sau buổi này bạn có thể dựng một **biểu mẫu (form)** hoàn chỉnh với `action`, `method` và các điều khiển nhập liệu phù hợp (text, email, number, range, search, tel, password, url).
      • Sau buổi này bạn có thể chọn đúng phần tử **lựa chọn** (radio, checkbox, select, datalist), phần tử **thời gian**, **tập tin**, **nút bấm** cho từng loại dữ liệu cần thu thập.
      • Sau buổi này bạn có thể gán **nhãn (label)**, gom nhóm bằng **fieldset/legend**, dùng `hidden`, `progress`, `meter`, `output` đúng mục đích.
      0/15 bàiVào học →
    6. 6

      Buổi 6: CSS (1): cú pháp, cách nhúng và bộ chọn

      180 phút
      • Sau buổi này bạn có thể giải thích CSS là gì, cơ chế phân tầng (Cascading) và lợi ích của việc tách kiểu dáng khỏi nội dung.
      • Sau buổi này bạn có thể viết đúng cú pháp một quy tắc CSS gồm bộ chọn và khối khai báo, ghi chú thích `/* … */` và đọc được một đoạn CSS.
      • Sau buổi này bạn có thể chèn CSS vào tài liệu HTML bằng ba cách (bên ngoài, nội bộ, nội tuyến), biết cách chúng kết hợp, khi nào dùng `!important` và thuộc tính `all`.
      0/18 bàiVào học →
    7. 7

      Buổi 7: CSS (2): màu sắc và định dạng

      180 phút
      • Sau buổi này bạn có thể chỉ định màu bằng bốn cách: mã **Hexadecimal**, hàm **rgb()**, hàm **hsl()** và **tên màu**, đồng thời tạo độ trong suốt bằng **opacity**, **rgba()**, **hsla()**.
      • Bạn định dạng được **nền** (màu nền, hình nền, vị trí, cố định, viết rút gọn) và **viền** (kiểu, độ rộng, màu, từng phía, bo tròn).
      • Bạn định dạng được **văn bản** (căn chỉnh, trang trí, chuyển đổi, khoảng cách, chiều cao dòng, bóng, font chữ).
      0/20 bàiVào học →
    8. 8

      Buổi 8: Thiết kế bố cục (1): mô hình hộp, kích thước và vị trí

      180 phút
      • Sau buổi này bạn có thể mô tả **mô hình hộp (box model)** gồm bốn lớp content – padding – border – margin và tính đúng kích thước thực của một phần tử, kể cả khi dùng `box-sizing`.
      • Sau buổi này bạn có thể đặt **độ rộng, chiều cao** và giới hạn tối đa bằng `width`, `height`, `max-width`, `max-height`, đồng thời chọn đúng **đơn vị** tuyệt đối hoặc tương đối (`px`, `%`, `em`, `rem`, `vw`, `vh`…).
      • Sau buổi này bạn có thể điều khiển **khoảng cách** bằng `margin` và `padding` (viết rút gọn 1–4 giá trị, `auto`, `inherit`) và giải thích hiện tượng **gom lề (margin collapsing)**.
      0/20 bàiVào học →
    9. 9

      Buổi 9: Thiết kế bố cục (2): Flexbox, Grid và thiết kế đáp ứng

      180 phút
      • Sau buổi này bạn có thể tạo **flex container** bằng `display: flex` và điều khiển hướng, xuống dòng, căn chỉnh các phần tử con bằng `flex-direction`, `flex-wrap`, `flex-flow`, `justify-content`, `align-items`, `align-content`.
      • Sau buổi này bạn có thể điều khiển từng **flex item** bằng `order`, `flex-grow`, `flex-shrink`, `flex-basis`, `flex` và `align-self`, đồng thời giải thích được cách Flexbox chia không gian thừa hoặc thiếu.
      • Sau buổi này bạn có thể dựng **lưới (grid)** bằng `grid-template-columns`, `grid-template-rows`, `grid-template-areas`, `gap`, đơn vị `fr`, hàm `repeat()` và `minmax()`, và đặt phần tử con vào đúng ô bằng `grid-column`, `grid-row`, `grid-area`.
      0/20 bàiVào học →
    10. 10

      Buổi 10: JavaScript căn bản (1): giới thiệu, biến, kiểu dữ liệu, toán tử, hàm

      180 phút
      • Sau buổi này bạn có thể giải thích vai trò của JavaScript bên cạnh HTML và CSS, chèn mã vào trang bằng thẻ `<script>` (nhúng trực tiếp hoặc tệp `.js`), và xem kết quả bằng `console.log()`.
      • Sau buổi này bạn có thể khai báo biến bằng `var`, `let`, `const`, đặt tên đúng quy tắc, và giải thích được phạm vi biến (cục bộ, toàn cục, khối lệnh) cũng như hiện tượng nâng khai báo (hoisting).
      • Sau buổi này bạn có thể phân biệt các kiểu dữ liệu số, chuỗi, đúng sai, đối tượng, `null`, `undefined`; dùng `typeof`, `instanceof` để kiểm tra và các hàm `Number()`, `String()`, `Boolean()`, `parseInt()`, `parseFloat()` để chuyển kiểu.
      0/20 bàiVào học →
    11. 11

      Buổi 11: JavaScript căn bản (2): mảng, điều kiện, vòng lặp, xử lý lỗi, đối tượng

      180 phút
      • Sau buổi này bạn có thể khai báo, truy cập, thêm/xóa, duyệt (`for`, `forEach`, `map`, `filter`, `reduce`, `every`) và sắp xếp (`sort` với hàm so sánh) mảng.
      • Sau buổi này bạn có thể viết câu điều kiện `if / else if / else` và `switch` (có `break`, `default`, gom nhiều `case`) để điều khiển luồng chương trình.
      • Sau buổi này bạn có thể chọn đúng vòng lặp `while`, `do-while`, `for`, `for/in`, `for/of` và dùng `break`, `continue`, nhãn (label) để điều khiển vòng lặp.
      0/19 bàiVào học →
    12. 12

      Buổi 12: JavaScript cho Website (1): window, document, sự kiện, DOM

      180 phút
      • Sau buổi này bạn có thể mô tả vai trò của đối tượng **window** và các đối tượng con (`document`, `location`, `history`, `navigator`, `screen`, `localStorage`, `sessionStorage`), dùng hộp thoại `alert()`, `confirm()`, `prompt()` và bộ hẹn giờ `setTimeout()`, `setInterval()`.
      • Sau buổi này bạn có thể tìm phần tử HTML bằng `getElementById()`, `getElementsByTagName()`, `getElementsByClassName()`, `querySelector()`, `querySelectorAll()` và phân biệt `HTMLCollection` với `NodeList`.
      • Sau buổi này bạn có thể thay đổi nội dung, thuộc tính và định dạng (`style`) của phần tử, và biết khi nào cần dùng `getComputedStyle()`.
      0/18 bàiVào học →
    13. 13

      Buổi 13: JavaScript cho Website (2): biểu mẫu, đồ họa, JSON, giao tiếp máy chủ

      180 phút
      • Sau buổi này bạn có thể kiểm tra dữ liệu biểu mẫu bằng `onsubmit`, `checkValidity()`, `setCustomValidity()` và các thuộc tính của đối tượng `validity`.
      • Sau buổi này bạn có thể giải thích vì sao xác thực phía trình duyệt chỉ cải thiện trải nghiệm và vẫn phải kiểm tra lại ở phía máy chủ.
      • Sau buổi này bạn có thể dùng phần tử `<canvas>` và đối tượng bối cảnh vẽ (context) để vẽ đường thẳng, hình tròn, văn bản, gradient, hình ảnh và tạo chuyển động đơn giản.
      0/16 bàiVào học →
    14. 14

      Buổi 14: Các công cụ hỗ trợ: Emmet, Git/GitHub, SASS, Bootstrap, jQuery

      180 phút
      • Sau buổi này bạn có thể dùng cú pháp viết tắt của **Emmet** (`!`, `tag*n`, `>`, `#id`, `.class`, `[attr]`, `{text}`, `$`) để sinh nhanh mã HTML và CSS.
      • Sau buổi này bạn có thể giải thích Git và GitHub là gì, phân biệt kho cục bộ với kho trên GitHub và dùng các lệnh `init`, `add`, `commit`, `push`, `pull`, `branch`, `merge`.
      • Sau buổi này bạn có thể viết SCSS với **biến**, **lồng quy tắc** và **mixin**, rồi biên dịch ra CSS bằng lệnh `sass`.
      0/20 bàiVào học →
    15. 15

      Buổi 15: Triển khai Website và tổng kết khóa

      180 phút
      • Sau buổi này bạn có thể giải thích **tên miền (domain)**, quy tắc đặt nhãn, **tên miền cấp cao nhất (TLD)** và vai trò của hệ thống tên miền **DNS** cùng các loại bản ghi A, AAAA, CNAME, MX, TXT, NS.
      • Sau buổi này bạn có thể phân biệt các loại **Web host** (Shared, VPS, Cloud, Dedicated, Static hosting...) và chọn nơi lưu trữ phù hợp với Website của mình.
      • Sau buổi này bạn có thể đưa mã nguồn lên Web host bằng **FTP/SFTP** hoặc nền tảng triển khai từ Git, và bật **HTTPS** bằng chứng chỉ SSL/TLS (Let's Encrypt), chuyển hướng HTTP sang HTTPS.
      0/19 bàiVào học →