Tổng quan
Dự án tái hiện giao diện người dùng phức tạp của sàn thương mại điện tử Shopee chỉ sử dụng HTML5 và CSS3 thuần túy. Dự án chứng minh khả năng dựng các thành phần giao diện nhiều tầng, lưới sản phẩm động và layout responsive phức tạp mà không cần dựa dẫm vào bất kỳ thư viện hay framework CSS/JS bên ngoài nào.
Các thành phần giao diện chính
Khu vực Header
- Thanh điều hướng trên cùng:
- Menu đa cấp dạng dropdown với hiệu ứng hover mượt mà.
- Giao diện tìm kiếm sản phẩm kèm lịch sử tìm kiếm.
- Giỏ hàng kèm badge số lượng sản phẩm động.
- Khối thông tin tài khoản người dùng và thông báo.
Khu vực Nội dung chính
- Danh mục ngành hàng:
- Menu cuộn ngang trực quan theo danh mục.
- Icon minh họa và nhãn ngành hàng chuẩn tỉ lệ.
- Lưới sản phẩm (Product Grid):
- Card sản phẩm responsive thích ứng độ phân giải màn hình.
- Nhãn giảm giá, huy hiệu "Yêu thích", sao đánh giá và số lượng đã bán.
- Khu vực Banner & Quảng cáo:
- Banner chính và các banner phụ đối xứng.
- Phím tắt truy cập nhanh các chương trình khuyến mãi.
Khu vực Footer
- Layout đa cột hiển thị thông tin chăm sóc khách hàng, giới thiệu công ty, chứng nhận bảo mật, đối tác thanh toán và đối tác vận chuyển.
Điểm nhấn kỹ thuật
- Kiến trúc CSS: Quy ước đặt tên theo phương pháp BEM (Block - Element - Modifier) giúp code mạch lạc, dễ mở rộng.
- Layout: Kết hợp thuần thục Flexbox, CSS Grid, thuộc tính Position (
absolute,fixed,sticky). - Responsive: Hệ thống Breakpoints Media Queries chặt chẽ đảm bảo hiển thị hoàn hảo từ màn hình di động nhỏ đến màn hình máy tính lớn.