Doanh nghiệp

Hội viên

Đăng nhập

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

Khoá học Thiết kế Web cơ bản với 5+ dự án Web hoàn chỉnh: Profile cá nhân, Web tin tức, Landing page sản phẩm.

5.0 (4 đánh giá)

29 học viên

Lê Hồng Duy (Trung tâm CodeFresher Việt Nam)

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ế

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

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, Copilot là lựa chọn lý tưởng cho người mới bắt đầu muốn học thiết kế giao diện web bài bản, từ kiến thức nền đến các dự án thực tế.

Khóa học chia làm 3 giai đoạn rõ ràng: từ HTML5, CSS3 cơ bản, đến CSS nâng cao & responsive design, và kết thúc bằng thiết kế giao diện chuẩn Figma với Bootstrap 5. Học viên sẽ thực hành liên tục qua 3 dự án thực tế: trang cá nhân, landing page sản phẩm và trang blog tin tức, giúp xây dựng portfolio ấn tượng ngay sau khi học xong.

Khóa học còn tích hợp ChatGPT và GitHub Copilot để học viên tra cứu, gợi ý code và tăng tốc quá trình phát triển hiệu quả hơn. Sau khóa học, bạn có thể tự tin thiết kế giao diện web hiện đại, chuẩn responsive, sẵn sàng ứng tuyển vị trí front-end hoặc tiếp tục học nâng cao.

Đăng ký khóa học ngay để biến đam mê thiết kế web của bạn thành kỹ năng nghề nghiệp vững chắc!

Nội dung khóa học

18 Phần• 38 Bài bài giảng • 02h 01p 02 giờ 01 phút

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

Bài 1: Giới thiệu lập trình Web và các công nghệ sử dụng 00:04:23

Bài 2: HTML5 cơ bản, viết trang web đầu tiên với AI hỗ trợ (ChatGPT, Copilot) 00:03:44

Phần 2: Cài đặt VSCode, Git, Github để lập trình 4 bài học

Bài 3: Hướng dẫn cài đặt và sử dụng VSCode (Visual Studio Code) để lập trình Web 00:05:10

Bài 4: Git & Github - Giới thiệu và cài đặt, sử dụng 00:05:40

Bài 5: Bài tập trắc nghiệm Buổi 1 03:25:22

Bài 6: Tài liệu quan trọng: Code mẫu (của tất cả các bài trong khoá học) 03:25:22

Phần 3: CSS3 cơ bản, Thực hành chèn CSS vào trang Web 2 bài học

Bài 7: Thực hành CSS3 cơ bản, chèn vào giao diện Web 00:05:53

Bài 8: Tài liệu học CSS 03:25:22

Phần 4: Tạo Danh Sách & Bảng Dữ Liệu HTML5 với ChatGPT 2 bài học

Bài 9: HTML5 cơ bản - Tạo danh sách, bảng dữ liệu với ChatGPT 00:07:16

Bài 10: Tài liệu học (Slide) 03:25:22

Phần 5: Nhúng Hình Ảnh, Liên Kết, Video HTML5 với ChatGPT 3 bài học

Bài 11: Thực hành nhúng hình ảnh, video HTML5 với ChatGPT 00:05:18

Bài 12: Thực hành nhúng âm thanh, video (phần 2) với HTML 5 00:02:38

Bài 13: Tài liệu học (Slide) 03:25:22

Phần 6: Tổng hợp kiến thức, thiết kế giao diện Web cơ bản 2 bài học

Bài 14: Thiết kế giao diện Web cơ bản với HTML5, CSS3 và AI hỗ trợ 00:07:10

Bài 15: Tổng hợp kiến thức HTML5 và CSS3 cơ bản 03:25:22

Phần 7: Làm việc với CSS Box Model 2 bài học

Bài 16: Thiết kế khối nội dung bằng CSS Box Model 00:04:34

Bài 17: Giới thiệu Box Model: Content, Padding, Border, Margin 03:25:22

Phần 8: CSS3 nâng cao - sử dụng thuộc tính Width, Height, Display & Position (AI hỗ trợ) 2 bài học

Bài 18: Thực hành sử dụng CSS Block Properties 00:05:35

Bài 19: Thuộc tính CSS3: width, height, display và position (AI chatgpt hỗ trợ) 03:25:22

Phần 9: Hiệu ứng trong CSS3 –Transitions, Animations và Transformations (AI hỗ trợ code) 2 bài học

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 00:07:43

Bài 21: Làm việc với hiệu ứng, chuyển động trong CSS3 (AI hỗ trợ sinh code, sửa lỗi) 03:25:22

Phần 10: Tạo giao diện Responsive Design với CSS Media Queries(ChatGPT hỗ trợ code nhanh) 2 bài học

Bài 22: Thực hành tạo giao diện web Responsive với Media Queries 00:07:10

Bài 23: responsive design, cú pháp Media Queries (Dùng chatGPT sinh code, sửa lỗi) 03:25:22

Phần 11: Sử dụng CSS Flexbox 2 bài học

Bài 24: Tạo layout Web sử dụng CSS Flexbox 00:04:58

Bài 25: Cách sử dụng Flexbox để căn chỉnh và phân bố không gian trang Web 03:25:22

Phần 12: Làm việc với Grid Layout trong CSS3 2 bài học

Bài 26: Thực hành tạo giao diện với Grid layout 00:05:38

Bài 27: Sử dụng Grid layout để thiết kế giao diện phức tạp 03:25:22

Phần 13: Tổng hợp phần 2 - CSS3 cơ bản và nâng cao 1 bài học

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 00:05:09

Phần 14: Cài đặt & Giới thiệu Grid System 2 bài học

Bài 29: Thực hành code bố cục Web responsive với Grid system 00:06:08

Bài 30: Tài liệu học: Bootstrap 5 và hệ thống lưới 03:25:22

Phần 15: Làm việc với UI cơ bản & nâng cao 2 bài học

Bài 31: Thực hành làm việc với UI trong Bootstrap 5: Button, NavBar, Forms, Cards 00:06:43

Bài 32: Đọc thêm: các thành phần UI cơ bản & nâng cao trong Bootstrap 5 03:25:22

Phần 16: Trang Web Profile cá nhân (AI chatgpt hỗ trợ code nhanh) 2 bài học

Bài 33: Thực hành code trang Web Profile cá nhân 00:06:05

Bài 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 03:25:22

Phần 17: Xây dựng trang Landing Page Giới thiệu sản phẩm (AI Copilot hỗ trợ code) 2 bài học

Bài 35: Thực hành Code Trang Web Landing Page Giới thiệu Sản phẩm 00:08:01

Bài 36: Thiết kế Web hiện đại với Flex Box, Grid, bố cục Responsive 03:25:22

Phần 18: Thiết kế Website Blog tin tức 2 bài học

Bài 37: Hướng dẫn thiết kế Website Blog tin tức với Bootstrap 5 và ChatGPT 00:06:51

Bài 38: Hướng dẫn Bootstrap nâng cao, pagination phân trang 03:25:22

Tags:

Thiết kế Web Ngôn ngữ lập trình Lập Trình Web

Thông tin giảng viên

Lê Hồng Duy (Trung tâm CodeFresher Việt Nam)

giảng viên

5.0 Đánh giá

96+ Học viên

2 Khóa học

Giới thiệu CEO CodeFresher.

Mr. Duy Lê (Le Hong Duy) là CEO Trung tâm CodeFresher Việt Nam. Thầy Duy có bằng Thạc sĩ CNTT Đại học Bách khoa Hà Nội, chứng chỉ nghiệp vụ sư phạm và đang làm Giảng viên tại một số trường, trung tâm. Theo dõi các thông tin về Thầy Duy tại đây:

Facebook: https://www.facebook.com/LeHongDuyCNTT
Youtube: https://www.youtube.com/@LeHongDuyCNTT
Github: https://github.com/duylehong
Tiktok: https://www.tiktok.com/@codenhanh.vn

2. Giới thiệu Trung tâm.

Công ty CodeFresher Việt Nam là Trung tâm tin học, đào tạo nhân lực CNTT chất lượng và là nhà cung cấp giải pháp CNTT chuyên nghiệp.

Chú trọng việc ứng dụng, tích hợp công cụ AI như ChatGPT, Github Copilot trong chương trình đào tạo nghề lập trình CNTT. Giúp nhân lực vừa có kiến thức lập trình tốt vừa có kỹ năng prompt AI chuyên nghiệp.

Lộ trình bài bản: Học lập trình từ cơ bản đến nâng cao (Web, Mobile)
Hệ thống học lập trình trực tuyến, linh hoạt
Xây dựng website nhanh chóng: PHP (Laravel, WordPress), ReactJS, ExpressJS
Phát triển ứng dụng Mobile: Tạo app Android, iOS dễ dàng với Flutter, React Native, Kotlin, Swift