BLOCK HTML5 CẦN BIẾT CHO WEB DEVELOPER

Để trở thành một Web Front-end Developer với skill thượng thừa, bạn cần biết sử dụng linh hoạt kĩ năng và sự am hiểu của mình để tạo ra các Block HTML5 từ đơn giản tới phức tạp mà không quá phụ thuộc vào các thư viện sẵn có. 

Hybrid Technologies xin giới thiệu một số Block HTML5 bạn nên tự luyện tập để nâng cao trình độ của mình khi tham gia các dự án thiết kế website, cùng khám phá nhé!

Block HTML5 là gì?

Block HTML5 là tập hợp các element được nhóm vào thành một group. Nói cách khác, block thường đóng vai trò cụ thể về cả tính năng và nội dung.

Các block ở responsive web thường gồm nhiều cột và dòng, hoặc mixin giữa các element, nhưng trong HTML5 thường được bắt đầu và kết thúc bằng tag <section></section>.

Ngoài ra, nó cũng phân định rõ ràng các thành phần như Heading Text (thường là thẻ H1, H2 hoặc H3), đoạn paragraph (thường nằm trong thẻ div), và các button CTA.

Một số mẫu block HTML5 để luyện tập viết code

Mẫu block HTML5 phổ thông

Froala – Ví dụ về Two Up Block

Các mẫu block này không yêu cầu quá cao, không quá sáng tạo và bạn có thể sử dụng cùng các thư viện như Bootstrap hay Foundation.

Các mẫu block đơn giản được Froala cung cấp thông qua dự án open source có thể truy cập trên Github.

Mẫu block sáng tạo

Những mẫu block này sáng tạo về bố cục, tuy vẫn bám theo bố cục tỷ lệ grid. Thường rất ít các framework hoặc thư viện hỗ trợ mà do developer tự làm.

Bố cục Grid News

Bố cục Grid theo kiểu Gallery

Bố cục này phù hợp với các trang Tạp chí giúp người dùng quan sát bài viết và gợi ý click vào bài viết để xem thêm hơn.

Bố cục Two Up Hero CTA

Bố cục có tỷ lệ cân đối nhưng yêu cầu content cân giữa

Bố cục này đặc biệt ở chỗ ta phải đảm bảo phần ảnh và phần content luôn cân đối bất kể nội dung dài hay ngắn, ngoài ra phần ratio của ảnh cũng cần được đảm bảo trên nhiều thiết bị khác nhau về kích thước.

Callout với ảnh nền

Layout Callout có background ảnh

Bố cục này khá phổ biến với những trang Giới thiệu của công ty hay các thương hiệu lớn. Lý do là bởi khung hình lớn tạo cảm giác rất tốt với người dùng, khiến họ quan tâm hơn tới nội dung bên trong.

Two Up Image

Bố cục sáng tạo với content và ảnh nằm có tỷ lệ lệch nhau nhất định

Nếu bạn muốn lựa chọn content theo hướng song hành kèm ảnh lớn, nhưng thu hút hơn, thì việc wrap một trong 2 block nhỏ hơn tạo điểm nhấn khá thú vị.

Bố cục Grid Card cân đối

Bố cục Grid Carđ cân đối

Vẫn là câu chuyện làm grid, nhưng bạn cần nắm được cách làm sao cho các card cân đối kể cả nếu content nhập có độ dài khác nhau. Gợi ý nhé, bạn có thể dùng Flexbox để làm dễ dàng vô cùng.

Bố cục Multiple Grid

Bố cục Multiple Grid

Đây là một trong bố cục được khá nhiều designer ưa chuộng, nhưng lại gây khó dễ cho developer, đặc biệt là trên các bố cục tablet và mobile. Việc xây dựng cân đối các thành phần trong bố cục này đòi hỏi sự hiểu biết về CSS và kinh nghiệm sâu qua nhiều project.

Creative Grid

Three Up Grid là bố cục rất sáng tạo

Không chỉ có bố cục với tính chất sáng tạo cao, đây cũng là thử thách với rất nhiều lập trình viên khi bắt tay triển khai nó trong những dòng code.

Hi vọng qua bài viết này các bạn sẽ bắt tay vào tự mình làm ra các ví dụ như trên để nâng cao khả năng và skill của mình hơn. Đừng quên đogs góp ý kiến và chia sẻ thành quả dưới comment nếu bạn đã hoàn thành nó để mọi người cùng tham khảo nhé!