HTML & CSS

Form validation với HTML5 — không cần JavaScript

26/10/2025 0 15 7 phút đọc

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

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

Hình ảnh nhanh và mượt với loading=”lazy” và decoding=”async”

20/10/2025 0 41 5 phút đọc

Hai thuộc tính loading="lazy" và decoding="async" giúp tối ưu tốc độ tải và khả năng tương tác khi hiển thị ảnh. Bài viết này giải thích cách hoạt động, khi nào nên dùng, những lưu...

Semantic HTML là gì và tại sao quan trọng?

17/10/2025 0 22 6 phút đọc

Semantic HTML (HTML ngữ nghĩa) là cách viết HTML dùng đúng thẻ để thể hiện đúng ý nghĩa nội dung. Thay vì chỉ tập trung vào hiển thị, ta mô tả rõ ràng vai trò...

Accessibility (a11y) cơ bản mọi developer nên biết

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

Accessibility (truy cập số) giúp mọi người — bao gồm người khuyết tật, người dùng di động, mạng chậm, thiết bị cũ — đều sử dụng được website. Bài viết này tóm tắt khái niệm,...

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

08/10/2025 0 20 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,...

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

CSS BEM naming convention cho người mới

02/10/2025 0 9 4 phút đọc

BEM (Block – Element – Modifier) là một quy tắc đặt tên class trong CSS giúp code rõ ràng, dễ đọc và dễ mở rộng. Với BEM, bạn có thể quản lý style cho các...

Hiệu ứng trên web và tác động đến hiệu năng thiết bị

02/10/2025 0 37 7 phút đọc

Hiệu ứng hình ảnh trên trang web là yếu tố quan trọng trong việc tạo trải nghiệm trực quan hấp dẫn cho người dùng. Tuy nhiên, nếu lạm dụng hoặc triển khai không đúng cách,...

Tại sao HTML5 “picture” và “source” là chìa khóa để tối ưu responsive image

26/09/2025 0 13 4 phút đọc

Trong thiết kế web hiện đại, hình ảnh chiếm phần lớn dung lượng tải trang. Nếu không tối ưu, chúng có thể khiến website chậm chạp, ảnh hưởng trực tiếp đến trải nghiệm người dùng...

Closure trong JavaScript: Đơn giản hơn bạn nghĩ

26/09/2025 0 6 6 phút đọc

Closure nghe có vẻ hàn lâm, nhưng thực chất chỉ là khả năng một hàm “nhớ” môi trường nơi nó được tạo ra. Nhờ đó, bạn có thể giữ trạng thái riêng tư, viết API...

CSS Houdini: Khi dev có thể hack vào engine của trình duyệt

24/09/2025 0 6 4 phút đọc

Trong nhiều năm, CSS thường bị coi là “ngôn ngữ trang điểm” – mạnh nhưng giới hạn. Nếu trình duyệt không hỗ trợ thuộc tính nào đó, lập trình viên gần như bó tay hoặc...

CSS Color Level 4: Tận dụng màu sắc hiện đại (lab, lch, color-mix)

23/09/2025 0 16 4 phút đọc

Demo

Trước đây, CSS chỉ xoay quanh các hệ màu quen thuộc như HEX, RGB hay HSL. Chúng đủ dùng nhưng thiếu độ chính xác về màu sắc, nhất là khi hiển thị trên màn hình...

Has() selector: CSS giờ đã có parent selector

22/09/2025 0 6 4 phút đọc

:has() là relational pseudo-class cho phép chọn một phần tử dựa trên những gì nó chứa hoặc đứng kề. Nói nôm na, đây là “parent selector” mà cộng đồng chờ đợi nhiều năm: bạn có...

CSS Nesting chính thức: Viết CSS gọn như SCSS mà không cần preprocessor

21/09/2025 0 4 3 phút đọc

Trong nhiều năm, lập trình viên front-end phải dựa vào SCSS, LESS hoặc PostCSS để viết CSS theo dạng “lồng” (nesting). Điều này giúp code gọn, dễ đọc và quản lý component rõ ràng hơn....

Modern Object Cache trong WordPress: Redis Cluster, Relay & APCu Hybrid

13/09/2025 0 29 4 phút đọc

Object Cache là một trong những kỹ thuật tăng tốc WordPress quan trọng nhất. Thay vì query MySQL lặp đi lặp lại, WordPress có thể lưu kết quả trong bộ nhớ (Redis, Memcached, APCu…) và...

Glassmorphism Card bằng CSS và UIkit: Trong suốt, mờ nền và nổi bật nội dung

13/09/2025 0 81 5 phút đọc

Demo

Glassmorphism tạo cảm giác mặt kính: nền mờ, bề mặt trong suốt và viền sáng nhẹ. Phong cách này giúp nội dung nổi bật trên ảnh nền hoặc gradient mà vẫn giữ được độ sang...

Floating Label Form với UIkit: Label bay lên khi nhập, gọn đẹp và dễ đọc

13/09/2025 0 9 4 phút đọc

Demo

Floating Label giúp trường nhập liệu gọn gàng: nhãn nằm trong ô khi trống và trượt lên phía trên khi người dùng nhập. Kỹ thuật này cải thiện khả năng quét thông tin, tiết kiệm...

Card 3D Hover Effect bằng CSS Perspective: Hiệu ứng nghiêng theo chuột mượt mà

12/09/2025 0 31 5 phút đọc

Demo

Hiệu ứng 3D hover giúp thẻ nội dung nghiêng nhẹ theo vị trí con trỏ chuột, tạo cảm giác chiều sâu và tương tác cao. Bài viết này hướng dẫn bạn xây dựng Card 3D...

Loading Skeleton: Giả lập nội dung như Facebook bằng HTML, CSS và JS

12/09/2025 0 18 4 phút đọc

Demo

Loading Skeleton là kỹ thuật hiển thị khung xám mô phỏng nội dung trong lúc dữ liệu thật đang tải về. Thay vì vòng xoay chờ, skeleton giữ nguyên bố cục, giúp người dùng cảm...