Bài 6 thực hành tạo giao diện chuyên nghiệp

Đâ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: