Thực hành code Web Portfolio với HTML5, CSS3, Bootstrap 5 và ChatGPT
Bài viết này hướng dẫn bạn tạo một website portfolio cá nhân đơn giản, hiện đại và responsive bằng HTML5, CSS3 và Bootstrap 5. Điều đặc biệt: bạn sẽ đồng hành cùng ChatGPT để tối ưu thời gian viết mã.
Bài viết này hướng dẫn bạn tạo một website portfolio cá nhân đơn giản, hiện đại và responsive bằng HTML5, CSS3 và Bootstrap 5. Điều đặc biệt: bạn sẽ đồng hành cùng ChatGPT để tối ưu thời gian viết mã. Mỗi bước đều có phần hướng dẫn cụ thể, prompt mẫu cho ChatGPT, đoạn mã minh họa và phân tích từng dòng để người học hiểu rõ không chỉ cách làm, mà còn vì sao phải làm như vậy.
Kiến thức nền tảng – Công cụ sử dụng
- HTML5: Ngôn ngữ đánh dấu dùng để tạo cấu trúc trang web. Các thẻ như
section,header,nav,footergiúp nội dung rõ ràng, dễ định vị và thân thiện SEO. - CSS3: Ngôn ngữ định kiểu cho HTML. Cho phép bạn định nghĩa màu sắc, khoảng cách, bố cục… một cách linh hoạt, sử dụng kỹ thuật Flexbox, Grid để xây dựng layout hiện đại.
- Bootstrap 5: Framework CSS phổ biến nhất hiện nay, cung cấp sẵn hệ thống lưới và hàng trăm class tiện ích để tạo layout responsive nhanh chóng mà không cần viết CSS từ đầu.
- ChatGPT: Trợ lý AI giúp bạn sinh code mẫu, giải thích đoạn mã và đề xuất cải tiến. Nếu biết đặt câu hỏi đúng (prompt), bạn có thể tiết kiệm 50-70% thời gian code.
Các bước thực hành – Xây dựng Web Portfolio
Bước 1: Khởi tạo dự án và cấu trúc file cơ bản
Mục tiêu: Tạo cấu trúc thư mục chuẩn và file HTML5 cơ bản.
Prompt mẫu cho ChatGPT:
Tôi muốn bắt đầu dự án portfolio với HTML5. Hãy giúp tôi tạo một file index.html có cấu trúc cơ bản, bao gồm thẻ head đầy đủ và kết nối với file style.css.
Code mẫu:
Giải thích:
<!DOCTYPE html>: Khai báo chuẩn HTML5.meta viewport: Giúp giao diện responsive trên thiết bị di động.link style.css: Liên kết file định dạng riêng.
Bước 2: Tích hợp Bootstrap và Google Fonts
Mục tiêu: Giúp giao diện hiện đại, responsive và có font đẹp.
Prompt mẫu:
Hãy giúp tôi thêm Google Fonts 'Poppins' và tích hợp Bootstrap 5 qua CDN vào file HTML.
Code mẫu:
Giải thích:
- Google Fonts giúp font chữ mượt mà, thẩm mỹ hơn.
- Bootstrap 5 giúp bạn tạo layout và các thành phần UI nhanh, chuẩn responsive.
Bước 3: Tạo thanh điều hướng (Navbar)
Mục tiêu: Tạo thanh menu cố định trên đầu trang, phản hồi tốt với các thiết bị khác nhau.
Prompt mẫu:
Hãy tạo một navbar Bootstrap có logo và 4 liên kết: Trang chủ, Giới thiệu, Dự án, Liên hệ. Khi thu nhỏ trình duyệt, menu sẽ chuyển sang biểu tượng hamburger.
Code mẫu:
Giải thích:
navbar-expand-lg: Navbar co giãn theo độ rộng thiết bị.ms-auto: Căn phải menu.collapsevànavbar-toggler: Giúp ẩn/hiện menu trên mobile.
Bước 4: Dựng phần Hero Section với ChatGPT
Mục tiêu: Hiển thị lời chào + nút CTA “Xem dự án” với thiết kế hiện đại.
Prompt mẫu:
Tạo một Hero Section bằng Bootstrap 5 với chiều cao 100vh, căn giữa nội dung và nút "Xem dự án".
Code mẫu:
Giải thích:
vh-100: Chiều cao 100% khung hình.d-flex,align-items-center,justify-content-center: Căn giữa nội dung.text-center: Canh giữa chữ.
Bước 5: Tối ưu form liên hệ và kiểm tra responsive
Prompt mẫu:
Tạo một form liên hệ đơn giản bằng Bootstrap, gồm: Họ tên, Email, Nội dung và nút Gửi.
Code mẫu:
Giải thích:
- Dùng class
form-control,form-label,btntừ Bootstrap để đảm bảo tính thẩm mỹ và responsive. - Việc sử dụng ChatGPT trong từng bước không thay thế hoàn toàn kỹ năng lập trình, nhưng là công cụ hỗ trợ cực mạnh để tiết kiệm thời gian.
- Bạn có thể mở rộng giao diện thêm phần dự án dạng card, hiệu ứng cuộn, hoặc tích hợp AOS.js để có animation.
- Quan trọng nhất: hiểu rõ cấu trúc HTML + cách Bootstrap hoạt động, không copy mã mà không hiểu.
Như vậy, việc sử dụng ChatGPT trong từng bước không thay thế hoàn toàn kỹ năng lập trình, nhưng là công cụ hỗ trợ cực mạnh để tiết kiệm thời gian. Bạn có thể mở rộng giao diện thêm phần dự án dạng card, hiệu ứng cuộn, hoặc tích hợp AOS.js để có animation. Quan trọng nhất: hiểu rõ cấu trúc HTML + cách Bootstrap hoạt động, không copy mã mà không hiểu.
Nội dung trên được biên soạn bởi Thầy Duy – Thạc sĩ CNTT, Đại học Bách Khoa, Hà Nội. Nếu các bạn muốn biết thêm các kiến thức về lập trình web, ứng dụng của AI trong lập trình. Đừng quên theo dõi Thầy qua các kênh để nhận tài liệu học tập - hữu ích cho con đường phát triển kiến thức lập trình của bạn:
- Kênh YouTube: https://www.youtube.com/@LeHongDuyCNTT
- GitHub cá nhân: https://github.com/DuyLeHong
Địa chỉ: Trung tâm CodeFresher – Số 104 Hoàng Ngân, Cầu Giấy, Hà Nội.
SĐT: 0813188668 , 0332026803 (Zalo / Call)
Blog Học lập trình Online Newsletter
Join the newsletter to receive the latest updates in your inbox.
