CSS3

Ảnh minh họa: Grid layout: thứ khiến Flexbox phải

Grid layout: thứ khiến Flexbox phải nể

03/12/2025 0 8 6 phút đọc

Demo

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...

Ảnh minh họa: Flexbox không khó, khó là do

Flexbox không khó, khó là do bạn học sai thứ tự

03/12/2025 0 6 11 phút đọc

Demo

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...

Bạn có đang hiểu sai về position trong CSS (và cách sửa trong 10 phút)

02/12/2025 0 5 12 phút đọc

Demo

Thuộc tính position trong CSS quyết định phần tử nằm ở đâu, chồng lên cái gì và phản ứng thế nào khi cuộn trang. Nghe thì đơn giản, nhưng chỉ cần trộn relative, absolute, fixed,...

Hướng dẫn làm lịch âm với JavaScript và thư viện solarLunar

01/12/2025 2 56 7 phút đọc

Demo

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...

Ảnh minh họa: Hướng dẫn tạo Textarea Smart Auto-Complete

Hướng dẫn tạo Textarea Smart Auto-Complete Hints bằng HTML, CSS và JavaScript

13/11/2025 0 13 9 phút đọc

Demo

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...

Ảnh minh họa: Hướng dẫn tạo Ripple Effect on

Hướng dẫn tạo Ripple Effect on Click bằng HTML, CSS và JavaScript

13/11/2025 0 46 5 phút đọc

Demo

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à...

Ảnh minh họa: Hướng dẫn tạo Auto Resize Textarea

Hướng dẫn tạo Auto Resize Textarea bằng HTML, CSS và JavaScript

13/11/2025 0 12 5 phút đọc

Demo

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...

Ảnh minh họa: Hướng dẫn tạo Love Compatibility Calculator

Hướng dẫn tạo Love Compatibility Calculator bằng HTML, CSS và JavaScript

12/11/2025 0 10 10 phút đọc

Demo

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...

Ảnh minh họa: Hướng dẫn tạo Snake mini game

Hướng dẫn tạo Snake mini game bằng HTML, CSS và JavaScript

10/11/2025 0 6 7 phút đọc

Demo

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...

Ảnh minh họa: Hướng dẫn tạo To-Do List mini

Hướng dẫn tạo To-Do List mini app bằng HTML, CSS và JavaScript

07/11/2025 0 11 7 phút đọc

Demo

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...

Ảnh minh họa: Hướng dẫn tạo Live Preview Code

Hướng dẫn tạo Live Preview Code Editor bằng HTML, CSS và JavaScript

07/11/2025 0 27 6 phút đọc

Demo

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...

Ảnh minh họa: Hướng dẫn tạo công tắc bật/tắt

Hướng dẫn tạo công tắc bật/tắt hiện đại cho web/app

06/11/2025 0 31 4 phút đọc

Demo

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...

Ảnh minh họa: Hướng dẫn tạo CSS Gradient Generator

Hướng dẫn tạo CSS Gradient Generator bằng HTML, CSS và JavaScript

05/11/2025 0 9 6 phút đọc

Demo

CSS gradient cho phép tạo ra các nền chuyển màu mượt mà mà không cần dùng đến hình ảnh. Thay vì một màu đơn giản, các phần tử giao diện có thể sử dụng nhiều...

Text to ASCII Art Generator

03/11/2025 0 58 6 phút đọc

Demo

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...

Generative Art với Canvas

02/11/2025 0 6 3 phút đọc

Demo

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...

CSS-only Game: Tic-Tac-Toe

01/11/2025 0 6 11 phút đọc

Demo

Một phiên bản Tic-Tac-Toe được xây dựng hoàn toàn bằng CSS hiện đại. Trò chơi khai thác trạng thái biểu mẫu và bộ chọn quan hệ để hiển thị X/O, phát hiện các tổ hợp...

Ảnh minh họa: Hướng dẫn tạo Mini Toast Notification

Hướng dẫn tạo Mini Toast Notification System bằng HTML, CSS và JavaScript

27/10/2025 0 72 7 phút đọc

Demo

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ả...

Ảnh minh họa: Hướng dẫn tạo Floating Action Button

Hướng dẫn tạo Floating Action Button (FAB) kiểu Android với menu mở rộng

23/10/2025 0 14 3 phút đọc

Demo

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...

Ảnh minh họa: CSS Animation vs JavaScript Animation: Chọn

CSS Animation vs JavaScript Animation: Chọn bên nào cho hiệu năng cao nhất

08/10/2025 0 19 7 phút đọc

Hiệu ứng chuyển động là yếu tố không thể thiếu trong thiết kế web hiện đại. Tuy nhiên, không phải mọi animation đều được tạo ra như nhau. Một số được triển khai bằng CSS,...

Ảnh minh họa: Critical CSS – Tải trang nhanh

Critical CSS – Tải trang nhanh hơn 2 giây

08/10/2025 0 16 12 phút đọc

Bạn có bao giờ truy cập một website và phải chờ đợi màn hình trắng xóa vài giây trước khi nội dung hiển thị? Đó chính là dấu hiệu của việc CSS chưa được tối...

Công cụ trực tuyến

Đăng nhập