Trang chủ Lập trình Web Thiết kế web bằng HTML5, CSS3 và AI ChatGPT, Copilot (Full)

Thiết kế web bằng HTML5, CSS3 và AI ChatGPT, Copilot (Full)

Thiết kế giao diện web bằng HTML5, CSS3; Học kỹ thuật prompt AI thực chiến với ChatGPT, Gemini, Copilot.
Thầy Duy Lê
0 Đánh giá 0 Học viên

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

  • Học từ cơ bản đến nâng cao về HTML5, CSS3, Bootstrap 5

  • Làm chủ thiết kế giao diện web chuẩn responsive, thân thiện đa thiết bị

  • Tích hợp ChatGPT, GitHub Copilot để tra cứu nhanh, hỗ trợ viết mã

  • Thực hành thiết kế 3 giao diện web thực tế theo Figma

  • Làm quen với quy trình thiết kế web chuyên nghiệp

  • Có sản phẩm hoàn chỉnh đưa vào portfolio cá nhân

  • Phù hợp cho người mới bắt đầu, sinh viên hoặc người muốn chuyển nghề sang frontend

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

Khóa học “Thiết kế Web với HTML5, CSS3 và ChatGPT, GitHub Copilot” giúp người mới bắt đầu nắm vững kỹ năng thiết kế giao diện web từ cơ bản đến nâng cao. Nội dung chia thành 3 giai đoạn:

Phần 1: Kiến thức nền HTML5, CSS3 (Buổi 1–7)

  • Giới thiệu lập trình web, VS Code, Git, GitHub

  • Cấu trúc HTML5, thẻ định dạng, chèn CSS, bảng, danh sách, đa phương tiện

  • Luyện tập tổng hợp: Tạo một trang web tĩnh đơn giản

Phần 2: CSS nâng cao & Responsive (Buổi 8–14)

  • Box Model, thuộc tính layout, Flexbox, Grid

  • Animation, Transition, Media Queries

  • Luyện tập tổng hợp: Giao diện hiển thị tốt trên nhiều thiết bị

Phần 3: Bootstrap 5 & Dự án theo Figma (Buổi 15–20)

  • Cài đặt và sử dụng Bootstrap 5: Grid System, Components, Utilities

  • Ứng dụng thực tế qua 3 dự án thiết kế theo Figma, độ khó tăng dần.

Các Dự Án Thực Hành

  • Dự án 1: Giao diện trang giới thiệu cá nhân
    Thiết kế đơn giản gồm ảnh đại diện, thông tin cá nhân, kỹ năng, liên hệ. Tập trung vào cấu trúc HTML5 và CSS cơ bản.

  • Dự án 2: Giao diện landing page sản phẩm
    Thiết kế hiện đại với bố cục nhiều cột, hình ảnh minh họa, nút CTA, form đăng ký. Sử dụng Flexbox/Grid và responsive design.

  • Dự án 3: Giao diện trang tin tức/blog
    Giao diện phức tạp với nhiều danh mục, bài viết, sidebar, pagination. Kết hợp Bootstrap 5, hiệu ứng CSS và bố cục linh hoạt.

Khóa học tích hợp ChatGPT và GitHub Copilot giúp học viên tra cứu nhanh, hiểu mã tốt hơn và viết code hiệu quả trong suốt quá trình học và làm dự án. Sau khóa học, học viên có thể hoàn thiện portfolio giao diện web cá nhân chuyên nghiệp.

Nội dung khóa học

2 Bài học - 8 phút

  • Bài 1: Giới thiệu lập trình Web và các công nghệ sử dụng Học thử 04:23
  • Bài 2: HTML5 cơ bản, viết trang web đầu tiên với AI hỗ trợ (ChatGPT, Copilot) 03:44

3 Bài học - 10 phút

  • Bài 3: Hướng dẫn cài đặt và sử dụng VSCode (Visual Studio Code) để lập trình Web Học thử 05:10
  • Bài 4: Git & Github - Giới thiệu và cài đặt, sử dụng 05:40
  • Bài 5: Tài liệu học (hướng dẫn cài đặt môi trường lập trình - IDE, Git)

2 Bài học - 5 phút

  • Bài 6: Thực hành CSS3 cơ bản, chèn vào giao diện Web 05:53
  • Bài 7: Tài liệu học CSS

2 Bài học - 7 phút

  • Bài 8: HTML5 cơ bản - Tạo danh sách, bảng dữ liệu với ChatGPT Học thử 07:16
  • Bài 9: Tài liệu học (slide)

3 Bài học - 7 phút

  • Bài 10: Tài liệu học (slide)
  • Bài 11: Thực hành nhúng hình ảnh, video HTML5 với ChatGPT Học thử 05:18
  • Bài 12: Thực hành nhúng âm thanh, video (phần 2) với HTML 5 02:38

2 Bài học - 7 phút

  • Bài 13: Thiết kế giao diện Web cơ bản với HTML5, CSS3 và AI hỗ trợ 07:10
  • Bài 14: Tổng hợp kiến thức HTML5 và CSS3 cơ bản

2 Bài học - 4 phút

  • Bài 15: Giới thiệu Box Model: Content, Padding, Border, Margin
  • Bài 16: Thiết kế khối nội dung bằng CSS Box Model 04:34

2 Bài học - 5 phút

  • Bài 17: Thuộc tính CSS3: width, height, display và position
  • Bài 18: Thực hành sử dụng CSS Block Properties 05:35

2 Bài học - 7 phút

  • Bài 19: Làm việc với hiệu ứng, chuyển động trong CSS3
  • Bài 20: Thực hành tạo hiệu ứng chuyển động cho các phần tử trên trang web 07:43

2 Bài học - 7 phút

  • Bài 21: Giới thiệu responsive design, cú pháp Media Queries
  • Bài 22: Thực hành tạo giao diện web Responsive với Media Queries 07:10

2 Bài học - 4 phút

  • Bài 23: Cách sử dụng Flexbox để căn chỉnh và phân bố không gian trang Web
  • Bài 24: Tạo layout Web sử dụng CSS Flexbox 04:58

2 Bài học - 5 phút

  • Bài 25: Sử dụng Grid layout để thiết kế giao diện phức tạp
  • Bài 26: Thực hành tạo giao diện với Grid layout 05:38

2 Bài học - 5 phút

  • Bài 27: Tổng hợp kiến thức CSS nâng cao và Responsive Design
  • Bài 28: Thực hành xây dựng trang web tích hợp các kỹ thuật HTML5, CSS3 đã học 05:09

2 Bài học - 6 phút

  • Bài 29: Làm quen với Bootstrap 5 và hệ thống lưới
  • Bài 30: Thực hành code bố cục Web responsive với Grid system 06:08

2 Bài học - 6 phút

  • Bài 31: Làm quen với các thành phần UI cơ bản & nâng cao trong Bootstrap 5
  • Bài 32: Thực hành làm việc với UI trong Bootstrap 5: Button, NavBar, Forms, Cards 06:43

2 Bài học - 6 phút

  • Bài 33: Tài liệu hướng dẫn xây dựng trang Web Profile cá nhân với HTML5, CSS3, Bootstrap 5
  • Bài 34: Thực hành code trang Web Profile cá nhân 06:05

2 Bài học - 8 phút

  • Bài 35: Thiết kế Web hiện đại với Flex Box, Grid, bố cục Responsive
  • Bài 36: Thực hành Code Trang Web Landing Page Giới thiệu Sản phẩm 08:01

Thông tin giảng viên

Thầy Duy Lê
29 Học viên 2 Khóa học
Thầy Duy Lê
- Chuyên gia lập trình Web, Mobile, AI

Thạc sĩ CNTT - Đại học Bách khoa HN
Chuyên gia lập trình Web, Mobile, AI

Học viên đánh giá

0
0 Đánh giá

0%

0%

0%

0%

0%

Khóa học liên quan

membership
Lập trình web ReactJS với ChatGPT, Copilot (Full)
Thầy Hải Tùng
(0) 2 Học viên
459.000đ
599.000đ
(-24%)
membership
Lập trình web ReactJS với ChatGPT, Copilot
Thầy Hải Tùng
(6) 21 Học viên
Membership
membership
Thiết kế giao diện web bằng HTML5, CSS3 và AI ChatGPT, Copilot
Thầy Duy Lê
(9) 29 Học viên
Membership

Thanh toán mua khóa học

259.000

-19%

Hết tháng 4/2025
Đăng ký
Thời lượng: 1 giờ 54 phút
Giáo trình: 36 Bài học
Học mọi lúc mọi nơi
Học trên mọi thiết bị: Mobile, TV, PC