Sinh viên FPT Polytechnic TP HCM gợi ý cách xây dựng trang web đơn giản

23:06 25/06/2024

Trang web bán bánh kem là sản phẩm của bạn Minh Quân (sinh viên chuyên ngành Lập trình web tại FPT Polytechnic TP HCM). Hãy cùng theo dõi cách bạn tạo ra một trang web bán hàng online đơn giản qua bài viết dưới đây. 

Để xây dựng một trang web bán hàng cơ bản, bạn Minh Quân sẽ thiết kế từ 5 trang trở lên, bao gồm: Trang chủ, trang liên hệ, trang giới thiệu, trang chi tiết sản phẩm, trang đăng ký, đăng nhập …. 

Các công cụ Minh Quân sử dụng như sau: Công cụ lập trình gồm có HTML5, CSS3, Javascript; công cụ lưu trữ là GitHub và công cụ deploy trang web là Vercel

Các bước thực hiện chi tiết:

Bước 1: Tạo thư mục 

Tạo sẵn các file html phù hợp theo trang muốn xây dựng, trong đó có 1 file style.css để chứa code css của các trang và 1 file main.js để chứa code Javascript của web
Ta sẽ bắt đầu xây dựng từ trang home.html bao gồm các phần header, footer vì nó sẽ xuất hiện của toàn bộ ở các trang khác, từ đó sẽ tiết kiệm thời gian hơn. Sau đó, tiến hành link file css và file js vào để code của các phần đó cũng sẽ apply vào trang web của chúng ta.
Để thay đổi font chữ, ta có thể vào trang Google Font để lấy font chữ qua link cdn

Kết quả: Như các bạn có thể thấy font chữ đã thay đổi đẹp hơn đúng như ta muốn.

Bước 2: Đưa website lên trang lưu trữ như Github như sau

Đầu tiên các bạn phải tải Github và có tài khoản để đăng nhập trên máy.

Link tham khảo: https://www.youtube.com/watch?v=2j7fD92g-gE&t=319s

Sau đó tạo tài khoản Github và tạo 1 Repo lưu trữ mới như hình dưới đây:

Trên máy của chúng ta sau khi setup xong hãy mở Terminal lên
Gõ lệnh git init để tạo Repo dưới local, sau đó hãy gõ từng dòng theo hướng dẫn của git như trong ảnh. Sau khi gõ xong ta reload lại github sẽ thấy dự án của chúng ta được đẩy lên
Như các bạn thấy mình đã đẩy lên được và có phần commit là vừa hoàn thành Header.
Như vậy là ta đã có phần header và footer rồi bây giờ chỉ cần copy code từ phần home qua cho các trang còn lại sau đó chỉnh sửa phần nội dung tùy vào yêu cầu là được
Sau đó hoàn thiện trang home dùng Js để render ra danh sách sản phẩm đồng thời tạo thêm phần hero cho trang Home

Thành quả đạt được

 

Trang đăng ký

Trang Contact
Trang About. Chúng ta nhúng bản đồ của Google map bằng thẻ iframe đã được học trên lớp

Bước 3: Push Code Lên Github 

Bạn hãy vào trang vercel.com và tạo tài khoản sau đó connect với github của bạn
Sau đó hãy chọn nút Add New Project phía trên
Sau đó Import dự án của bạn vào
Sau đó nhấn Deploy và đợi vercel xử lý

Link sản phẩm đã hoàn thành: 

Như vậy, chỉ với 3 bước là bạn có thể tạo ra một trang web bán hàng online đơn giản. Chúc các bạn thành công!

Giảng viên Hà Văn Cử
Bộ môn Công nghệ thông tin
FPT Polytechnic TP HCM

Hỗ trợ tư vấn và giải đáp thông tin tuyển sinh FPT Polytechnic
Zalo
Tags:

Cùng chuyên mục

Đăng ký nhập học tại FPT Polytechnic 2026

  • Max. file size: 50 MB.
  • Max. file size: 50 MB.
  • Max. file size: 50 MB.