Quá trình tạo giao diện từ bản thiết kế là một quy trình quan trọng khi xây dựng trang web. Để đảm bảo việc viết mã nguồn khoa học và dễ debug, chúng ta cần tuân thủ các bước sau:
Contents
Vài quy tắc cần nhớ
-
Từ trên xuống dưới: Việc code giao diện cần tuân thủ thứ tự từ trên xuống dưới, từ phần trên cùng đến phần dưới cùng của trang web.
-
Từ ngoài vào trong: Sử dụng các container như “container” hoặc “container-fluid” để xác định chiều rộng của phần tử dựa trên kích thước màn hình của các thiết bị.
-
Từ trái sang phải: Xác định các row và columns để xác định cách hiển thị các phần tử trên trang.
Bước 1. Phân tích layout, xác định các block
Ở bước này, chúng ta cần nhìn vào bản thiết kế gốc được tạo thành từ file Photoshop .psd hoặc trên figma dưới dạng các layout. Dựa vào đó, ta xác định bố cục của trang web gồm những thành phần nào. Ví dụ, một cách phân tích bố cục layout điển hình như sau:
body
header
section.top-bar
section.nav-bar
main
section1
section2
...
footer
Bước 2. Phân tích từng block
Sau khi đã xác định bố cục chung của trang web và các block lớn, chúng ta cần phân tích các block thành các phần tử nhỏ hơn để code từng phần tử đó tạo ra giao diện. Ví dụ, phần header của trang web có giao diện như sau:
<header>
<nav>
<div class="logo"></div>
<div class="sub-nav"></div>
<div class="search-bar"></div>
<div class="user-menu"></div>
</nav>
</header>
Bước 3. Triển khai viết mã nguồn
Viết mã nguồn để tạo ra giao diện sẽ bao gồm 3 phần chính: mã nguồn HTML, CSS (SCSS, SASS), Javascript và Jquery.
-
Mã nguồn HTML: Sử dụng các thẻ để xác định bố khung cho trang web.
-
Mã nguồn CSS: Sử dụng các selector (tag, class, id, …) để tạo phong cách và định kiểu cho HTML. Điều này giúp điều khiển bố cục, màu sắc và font chữ của trang web.
-
Mã nguồn Javascript và Jquery: Sử dụng để xử lý các hoạt động động cho trang web, như click, hover, scroll và các thành phần khác.
Viết mã nguồn HTML
Để tạo mã nguồn bộ khung cho trang web, chúng ta có thể sử dụng Pug và HTML5. Các nhóm thẻ HTML5 mà chúng ta cần biết bao gồm:
- Nhóm thẻ cấu trúc: tạo bố cục cho trang.
- Nhóm thẻ tiêu đề: tạo phần tiêu đề.
- Nhóm thẻ xác định văn bản: tạo nội dung cho trang.
- Nhóm thẻ danh sách: tạo nội dung kiểu danh sách.
- Nhóm thẻ liên kết, media: tạo ảnh, video, liên kết cho trang.
- Nhóm thẻ tạo bảng: tạo bảng dữ liệu hoặc tạo layout.
- Nhóm thẻ liên quan đến form: tạo form nhập liệu.
Đặt tên theo chuẩn BEM
BEM là một tiêu chuẩn quy ước đặt tên cho các tên lớp CSS. Nó giúp việc code frontend dễ đọc, dễ hiểu, dễ làm việc và dễ bảo trì. Quy ước đặt tên trong BEM bao gồm:
-
Block: Là một thành phần của trang web hoặc ứng dụng, và các thành phần của DOM cũng có thể là các block. Ví dụ, section td có các block như tdcontainer, tdinner, tdheader, tdcontent và td__footer.
-
Element: Là một thành phần của một block và không thể tồn tại độc lập mà không có block. Trong BEM, các phần tử được biểu thị bằng dấu gạch dưới kép . Ví dụ, tdheadline, tdintro, tddescription, tdimage và tdbutton là các phần tử trong block td.
-
Modifier: Được dùng để thay đổi cách hiển thị trên block hoặc phần tử. Ví dụ, thêm class .block__elem-highlight để làm nổi bật một block hay một phần tử nào đó.
Tổng kết
Trên đây, chúng ta đã trình bày các bước đầu tiên để code giao diện từ bản thiết kế. Hãy đón đọc phần tiếp theo, mình sẽ viết về cách viết mã nguồn CSS và JS. Hy vọng rằng các bạn sẽ tìm thấy những thông tin hữu ích trong những bài viết tiếp theo.