Đây là một giao diện chuyên nghiệp khá mất thời gian để làm. Thường thì sẽ có 1 file psd mẫu để lập trình viên dựa vào đó để code nên 1 layout giống hệt. Nhưng ở bước này chúng ta chỉ cần ảnh để thực hành.
Yêu cầu:
- – Tạo 1 giao diện giống hệt với mẫu (ít nhất phải giống 95%)
- – Chú ý từng font chữ, kích thước ảnh, màu sắc, chiều dài rộng các khối phải giống hệt mẫu
Một số công cụ cần thiết để thực hiện:
- Trình duyệt: Dùng firefox
- Tool lấy màu: colorzilla dùng để lấy mã màu trên mẫu để làm màu giống
- Tool đo kích thước: Measure-it để đo kích thước ảnh, layout.
- Tool cho mọi câu hỏi: google. Cách tìm kiếm: sử dụng từ khóa “html css”+ <từ cần tìm bằng tiếng Anh> ví dụ tìm cách sidebar luôn ở bên trái như giao diện bên dưới thì google “html css sidebar fix left”
Font chữ: sử dụng font “Raleway”, sans-serif, đường dẫn import font: ttps://fonts.googleapis.com/css?family=Raleway Import như import file css
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
Giao diện:
English
