Thiết kế Web bằng HTML5, CSS3 và AI ChatGPT, Copilot

0 (0 đánh giá)
0 người học
Cập nhật mới nhất 05/2025
Thiết kế Web bằng HTML5, CSS3 và AI ChatGPT, Copilot

Mô tả 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.
Khóa học này dành cho
  • 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
Bạn sẽ nhận được gì nếu đăng ký khóa học này
  • 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

Nội dung khoá học

1

Học HTML5 Cơ Bản | Viết Trang Web Đầu Tiên với AI hỗ trợ

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

Cài đặt VSCode, Git, Github để lập trình

  • 3. Hướng dẫn cài đặt và sử dụng VSCode (Visual Studio Code) để lập trình Web
  • 4. Git & Github - Giới thiệu và cài đặt, sử dụng
  • 5. Tài liệu học (hướng dẫn cài đặt môi trường lập trình - IDE, Git)
  • 6. Tài liệu quan trọng: Code mẫu (của tất cả các bài trong khoá học)
  • 1. Bài tập trắc nghiệm 1
3

CSS3 cơ bản, Thực hành chèn CSS vào trang Web

  • 7. Thực hành CSS3 cơ bản, chèn vào giao diện Web
  • 8. Tài liệu học CSS
4

Tạo Danh Sách & Bảng Dữ Liệu HTML5 với ChatGPT

  • 9. HTML5 cơ bản - Tạo danh sách, bảng dữ liệu với ChatGPT
  • 10. Tài liệu học (slide)
5

Nhúng Hình Ảnh, Liên Kết, Video HTML5 với ChatGPT

  • 11. Tài liệu học (slide)
  • 12. Thực hành nhúng hình ảnh, video HTML5 với ChatGPT
  • 13. Thực hành nhúng âm thanh, video (phần 2) với HTML 5
6

Tổng hợp kiến thức, thiết kế giao diện Web cơ bản

  • 14. Thiết kế giao diện Web cơ bản với HTML5, CSS3 và AI hỗ trợ
  • 15. Tổng hợp kiến thức HTML5 và CSS3 cơ bản
  • 2. Bài tập trắc nghiệm 2
7

Làm việc với CSS Box Model

  • 16. Giới thiệu Box Model: Content, Padding, Border, Margin
  • 17. Thiết kế khối nội dung bằng CSS Box Model
8

 Hiệu ứng trong CSS3 – Transitions, Animations và Transformations (AI hỗ trợ code)

  • 18. Làm việc với hiệu ứng, chuyển động trong CSS3
  • 19. Thực hành tạo hiệu ứng chuyển động cho các phần tử trên trang web (AI hỗ trợ sinh code, sửa lỗi)
9

Hiệu ứng trong CSS3 – Transitions, Animations và Transformations (AI hỗ trợ code

  • 20. Làm việc với hiệu ứng, chuyển động trong CSS3
  • 21. Tạo hiệu ứng chuyển động trên trang web (AI hỗ trợ sinh code, sửa lỗi)
10

Tạo giao diện Responsive Design với CSS Media Queries (ChatGPT hỗ trợ Code Nhanh)

  • 22. Giới thiệu responsive design, cú pháp Media Queries
  • 23. Thực hành tạo giao diện web Responsive với Media Queries (dùng ChatGPT sinh code, sửa lỗi)
11

Sử dụng CSS Flexbox

  • 24. Cách sử dụng Flexbox để căn chỉnh và phân bố không gian trang Web
  • 25. Tạo layout Web sử dụng CSS Flexbox
12

Làm việc với Grid Layout trong CSS3

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

Tổng hợp phần 2 - CSS3 cơ bản và nâng cao

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

Bootstrap 5: Cài đặt & Giới thiệu Grid System

  • 30.  Làm quen với Bootstrap 5 và hệ thống lưới
  • 31. Thực hành code bố cục Web responsive với Grid system
15

Bootstrap 5: Làm việc với UI cơ bản & nâng cao

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

Dự án 1: Trang Web Profile cá nhân (AI ChatGPT hỗ trợ Code Nhanh)

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

Dự án 2: Xây dựng trang Landing Page Giới thiệu sản phẩm (AI Copilot hỗ trợ Code)

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

Dự án 3: Thiết kế Website Blog tin tức

  • 38. Hướng dẫn thiết kế Website Blog tin tức với Bootstrap 5 và ChatGPT
  • 39. Hướng dẫn Bootstrap nâng cao, pagination phân trang
Chi tiết khóa học
  • 39 Bài giảng
  • 2.0 giờ
  • Học online mọi lúc, mọi nơi
  • Học trên máy tính, điện thoại
Trung tâm CodeFresher
Trung tâm CodeFresher

0 (0 đánh giá)