Bài tập front-end · 2024
Dựng lại giao diện Monito Pet Shop
Đây là một bài tập luyện tay, không phải một cửa hàng thật. Mình lấy mẫu thiết kế Monito — Pet Shop (một bộ giao diện mẫu phổ biến dành cho người mới học dựng trang) rồi dựng lại trang danh mục sản phẩm của nó bằng HTML và CSS thuần, không dùng thư viện giao diện nào. Mục tiêu duy nhất là luyện mắt và luyện tay: đọc một bản thiết kế rồi dịch nó ra đúng khoảng cách, đúng lưới, đúng tỉ lệ.
Trang này không bán gì cả. Mọi ô nhập liệu, nút bấm và số giá bên dưới đều là nội dung minh hoạ của bản thiết kế gốc; chúng bị vô hiệu hoá và không gửi dữ liệu đi đâu.
Tên Monito, bảng màu và bố cục thuộc về tác giả của mẫu thiết kế gốc. Ở đây chúng chỉ được dựng lại để học, không nhằm mục đích thương mại. Nếu bạn là tác giả và muốn mình gỡ bản dựng này xuống, hãy mở một issue trên GitHub — mình phản hồi trong 48 giờ.
- Loại
- Bài tập tái dựng giao diện (UI recreation study)
- Phạm vi
- Một trang tĩnh: thanh điều hướng, hero chia đôi, bộ lọc, lưới sản phẩm, phân trang, khối đăng ký, chân trang
- Công nghệ
- HTML ngữ nghĩa, CSS Grid, Flexbox, linear-gradient — không framework, không JavaScript
- Trạng thái
- Hoàn tất phần bố cục · không có backend · không có dữ liệu thật
- Vì sao vẫn giữ
- Đường dẫn này đã tồn tại từ lâu và vẫn có người ghé; xoá đi là tạo ra một liên kết hỏng. Thay vì giấu, mình dán nhãn cho nó đúng với bản chất.
Bản dựng
Kết quả
Bản dựng nguyên trạng, đặt trong một khung có nhãn để nó không bị nhầm là trang thật. Bố cục gốc được thiết kế cho màn hình rộng, nên trên điện thoại khung này cuộn ngang thay vì bị bóp méo — đó cũng là một phần của sự trung thực với bản gốc.
Monito
Home Category About Contact
One More Friend
Thousands More Fun!
Having a pet means you have more joy, a new friend, a happy person who will always be with you to have fun. We have 200+ different pets that can meet your needs!
Filter
Small Dog 52 puppies
-
Ảnh sản phẩm
không kèm theo bài tậpMO502 — Poodle Tiny Yellow
3,900,000 VND
-
Ảnh sản phẩm
không kèm theo bài tậpMO504 — Poodle Tiny Sepia
4,000,000 VND
-
Ảnh sản phẩm
không kèm theo bài tậpMO231 — Alaskan Malamute Grey
8,900,000 VND
-
Ảnh sản phẩm
không kèm theo bài tậpMO102 — Pembroke Corgi Anniv
6,900,000 VND
-
Ảnh sản phẩm
không kèm theo bài tậpMO212 — Pomeranian White
6,900,000 VND
-
Ảnh sản phẩm
không kèm theo bài tậpMO051 — Golden Retriever
3,900,000 VND
1 2 3 4 … 28
Register Now So You Don't Miss Our Programs
HomeCategoryAboutContact
Ghi chú kỹ thuật
Bài tập này luyện cái gì
Một bản dựng chỉ có giá trị khi nói rõ nó làm được gì và cố tình bỏ qua điều gì. Dưới đây là cả hai vế.
Có trong bản dựng
- Hero chia đôi bằng một gradient. Nền kem và nền xanh đậm gặp nhau đúng vạch 50% bằng linear-gradient(90deg, … 50%, … 50%) — một nền, không phải hai khối chồng nhau.
- Lưới hai cột bất đối xứng. Cột lọc cố định 250px, cột sản phẩm co giãn — đúng một dòng grid-template-columns.
- Lưới sản phẩm ba cột với thẻ bo góc, ảnh tràn viền và hàng thông tin hai đầu bằng justify-content: space-between.
- HTML ngữ nghĩa. Bộ lọc là fieldset + legend, lưới sản phẩm là danh sách, mọi ô nhập đều có nhãn — kể cả khi nhãn bị ẩn về mặt thị giác.
- Không một dòng JavaScript. Bản gốc của bài tập cũng vậy, và đó là chủ ý.
Cố ý không có
- Ảnh sản phẩm. Bài tập không đi kèm bộ ảnh, và mình không muốn chèn ảnh tải ở đâu đó về. Mỗi ô ảnh vì thế là một khối giữ chỗ có ghi rõ lý do.
- Logo của thương hiệu gốc. Thay bằng chữ, vì đó là tài sản của người khác.
- Backend, giỏ hàng, đăng nhập, tìm kiếm. Không có gì chạy phía sau. Các nút được đánh dấu disabled để không ai bấm vào một thứ không phản hồi.
- Bố cục cho điện thoại. Bản thiết kế gốc chỉ có bản desktop, nên bản dựng cũng chỉ có desktop. Khung chứa cuộn ngang thay vì tự bịa ra một bố cục mobile không tồn tại trong thiết kế.
- Sửa lỗi của bản gốc. Nhãn Gene: trong thẻ sản phẩm là lỗi đánh máy có sẵn trong thiết kế — dựng lại thì giữ nguyên, sửa đi là dựng một thứ khác.