Tea Station là website giới thiệu thương hiệu trà được xây bằng HTML, CSS và JavaScript thuần. Nội dung kết hợp câu chuyện nguyên liệu, danh mục trà, khu vực sản phẩm, video và lời kêu gọi hành động trong một landing page dài.

Mục tiêu của bài làm là tổ chức nhiều lớp nội dung thương mại mà vẫn giữ nhịp đọc rõ trên desktop và mobile, từ phần mở đầu giàu hình ảnh đến thông tin sản phẩm cụ thể.

Người xem dùng điều hướng responsive, chuyển giữa các nhóm nội dung và xem danh sách sản phẩm lấy từ tệp dữ liệu JavaScript. Các chuyển động đếm số, progress và hiệu ứng khi cuộn tạo nhịp nhưng không thay thế nội dung chính.

Hình ảnh và video được đặt như thành phần kể chuyện cho nguồn gốc, hương vị và cách dùng trà. Trên màn hình nhỏ, menu và các khối nhiều cột được sắp lại để hành động chính vẫn xuất hiện theo đúng thứ tự đọc.

HTML giữ cấu trúc nội dung, CSS xử lý layout và breakpoint, còn JavaScript quản lý dữ liệu sản phẩm cùng các tương tác. Việc không dùng framework giúp từng trạng thái DOM và từng thay đổi responsive có thể được quan sát trực tiếp.

Dữ liệu được tách khỏi markup thay vì lặp lại toàn bộ thẻ sản phẩm trong HTML. Đây là bước trung gian giữa một landing page tĩnh và cách render danh sách từ nguồn dữ liệu trong framework.

Công nghệ sử dụng: HTML5, Vanilla CSS, Tailwind CSS, JavaScript.

Repository giữ riêng tệp dữ liệu, script và stylesheet, cùng nhiều asset hình ảnh và video. Quá trình triển khai tập trung vào thứ tự nội dung, crop ảnh, độ tương phản chữ và breakpoint của từng cụm layout.

Các hiệu ứng được gắn vào những điểm có ý nghĩa như thống kê, tiến trình và phần tử đi vào viewport. Phần còn lại vẫn hoạt động như một trang HTML bình thường nếu không có chuyển động.