Hover effect là thứ rất dễ làm… và cũng rất dễ làm xấu. Phần lớn hiệu ứng hover trên web hiện nay rơi vào một trong ba dạng: quá gắt, quá màu mè, hoặc quá...
Typewriter effect nhìn thì đơn giản, nhưng làm không khéo là lộ ngay: chữ nhảy, gõ không đều, thậm chí hiện nguyên câu rồi mới bắt đầu gõ lại. Lý do thường không nằm ở...
Xây một mini game bằng HTML/CSS/JS không hề phức tạp như nhiều người nghĩ. Chỉ với một thẻ div, vài dòng CSS và một ít JavaScript, bạn đã có thể tạo ra trò chơi nhỏ...
Nếu Flexbox là bậc thầy của bố cục một chiều (hàng hoặc cột), thì CSS Grid là ông trùm của bố cục hai chiều. Grid cho bạn quyền kiểm soát cả hàng và cột cùng...
Flexbox sinh ra để đơn giản hóa việc xếp bố cục một chiều (theo hàng hoặc cột). Vấn đề không phải ở Flexbox khó, mà là nhiều người học sai thứ tự: nhảy ngay vào...
Lịch âm dương là chức năng rất phổ biến trên các website tin tức, blog phong thủy, trang xem ngày. Với JavaScript, bạn hoàn toàn có thể tự xây dựng một lịch âm chạy trên...
Tank 300IQ là một game bắn xe tăng góc nhìn top-down siêu gọn nhẹ nhưng cực kỳ dễ gây nghiện, do Init HTML phát triển. Ý tưởng của trò này đến từ một lần lướt...
Textarea Smart Auto-Complete Hints là kỹ thuật bổ sung các gợi ý thông minh ngay khi người dùng đang gõ trong ô nhập văn bản. Thay vì chỉ là một textarea đơn thuần, hệ thống...
Ripple Effect là hiệu ứng gợn sóng lan ra từ điểm người dùng nhấn chuột. Đây là hiệu ứng quen thuộc trong Material Design, giúp tạo cảm giác phản hồi trực quan, mềm mại và...
Auto Resize Textarea là kỹ thuật giúp ô nhập văn bản tự động mở rộng chiều cao theo nội dung mà người dùng đang gõ. Nhờ vậy, người dùng không cần kéo thủ công thanh...
Love Compatibility Calculator là một công cụ tính toán mức độ “hợp nhau” giữa hai người dựa trên tên hoặc cụm từ mà người dùng nhập vào. Trong bối cảnh lập trình front end, đây...
Snake mini game là một trò chơi kinh điển, trong đó người chơi điều khiển một chú rắn di chuyển trên màn hình để ăn thức ăn và kéo dài cơ thể. Nếu rắn đụng...
To-Do List mini app là một ứng dụng danh sách công việc đơn giản, cho phép thêm, đánh dấu hoàn thành và xóa các việc cần làm. Đây là một ví dụ thực hành trực...
Live Preview Code Editor là một trình soạn thảo cho phép nhập mã HTML, CSS, JavaScript và xem kết quả hiển thị ngay lập tức trong cùng một giao diện. Thay vì phải lưu file...
Bài này chỉ cho bạn cách làm một toggle switch kiểu iOS/Android: mượt, chuẩn truy cập, dễ tái sử dụng. Ta sẽ dùng HTML + CSS thuần để có bản tối giản, thêm một chút...
Bài viết này là hướng dẫn thực chiến để bạn tự tay dựng một bộ chuyển đổi “text → ASCII art” chạy ngay trong trình duyệt. Ta sẽ thiết kế font ma trận 5×6, viết...
Bài viết này dẫn bạn đi từ “zero → đẹp” với generative art trên thẻ <canvas>. Ta sẽ nắm cách khởi tạo canvas chuẩn DPI, tạo PRNG có seed để tái lập tác phẩm, dựng...
Mini Toast Notification System là một hệ thống thông báo nhỏ gọn xuất hiện trong một khoảng thời gian ngắn ở góc màn hình. Thông báo dạng toast thường được dùng để báo kết quả...
Bạn có thể xây dựng kiểm tra dữ liệu đầu vào (validation) mạnh mẽ chỉ với HTML5, không cần viết một dòng JavaScript nào. Bài này hướng dẫn cách dùng đúng các thuộc tính và...
Floating Action Button (FAB) dạng mở rộng là một thành phần giao diện hiện đại, cho phép người dùng truy cập nhanh nhiều chức năng chỉ với một nút nổi duy nhất. FAB sẽ nằm...
Công cụ trực tuyến
Nhấn Ctrl + \ trên máy tính, hoặc vuốt sang trái ở bất kỳ đâu trên mobile.
