Trang web tĩnh cơ bản 01
Code một trang web tĩnh training-wireframe (Task01).
| Ước tính thời gian làm việc | Thời gian làm việc (bao gồm cả hoàn thành chỉnh sửa) |
|---|
| - | 22h |
Files thiết kế
👉 training-wireframe
Yêu cầu công việc
- Kiểm tra file design (PSD) và mark up bằng EJS/SCSS. Website tham khảo:
- Thiết kế CSS theo qui tắc đặt tên của FLOCSS/BEM.
- Biết cách sử dụng git để quản lý phiên bản source code.
Nhiệm vụ và các điểm quan trọng
- Code chính xác và nhanh chóng.
- Biết sử dụng tag h1~h6 một cách hợp lí.
- Bất kể độ lớn theo design của một yếu tố ra sao, nó vẫn phải tồn tại ở vị trí thích hợp khi xem HTML như một văn bản.
- Xét từ góc độ SEO thì trong văn bản chỉ được phép tồn tại 1 tag h1, trong khi những tag h khác có thể tồn tại ở số nhiều.
- Xét từ góc độ khả năng tiếp cận (accessibility) thì h1~h6 nên được sắp xếp theo thứ tự tăng dần.
- Hiểu được cách cài đặt
font-family cho font chữ tiếng Nhật- Cũng giống như font chữ tiếng Anh, font tiếng Nhật cũng được chia ra thành serif và san-serif.
- Trên các thiết bị được sử dụng (bao gồm Windows, Mac, iPhone, Android) thì font serif, san-serif được cài đặt sẵn đều khác nhau.
- Việc font có hiển thị chính xác hay không chịu ảnh hưởng bởi tên font được đăng kí trên thiết bị. Do vậy, có những trường hợp ta phải đăng kí nhiều tên cho cùng một font.
- Phần lớn các khoảng cách dòng, khoảng cách text được định sẵn giá trị bằng số trong file design đều có thể tái hiện bằng CSS, nhưng cũng có trường hợp phải tái hiện design một cách tỉ mỉ hơn bằng cách điều chỉnh các properties như
line-height, letter-spacing.
