Dẫn nhập
Ở bài trước chúng ta đã cùng làm quen với WIREFRAME & TẠO FOLDERS CHO PROJECT.
Trong bài học ngày hôm nay, chúng ta sẽ cùng nhau Setup file CSS và HTML.Setup file CSS và HTML.
Nội dung
Để đọc hiểu bài này tốt nhất, bạn nên xem qua các nội dung:
- TỔNG QUAN HTML CƠ BẢN
- TỔNG QUAN CSS CƠ BẢN
- CẤU TRÚC MODEL BOX TRONG CSS
Trong bài này, Kteam sẽ cùng bạn tìm hiểu các nội dung:
- Chọn màu cho website.
- Setup file HTML và CSS
- Giới thiệu về các yếu tố chính trong responsive, giới thiệu grid.css
Lưu ý: Bài viết nhằm tóm tắt nội dung thực hiện project & giúp bạn nắm bắt các phần được hướng dẫn một cách đơn giản nhất. Tuy nhiên, hãy theo dõi video để học hỏi các kiến thức và kỹ thuật chi tiết nhất từ tác giả. Bài viết nhằm tóm tắt nội dung thực hiện project & giúp bạn nắm bắt các phần được hướng dẫn một cách đơn giản nhất. Tuy nhiên, hãy theo dõi video để học hỏi các kiến thức và kỹ thuật chi tiết nhất từ tác giả.
Chọn màu cho website
Do mình chọn tông màu chính của website là xanh [blue] nên mình google Blue color scheme để có được các màu phù hợp để sử dụngxanh [blue] nên mình google Blue color scheme để có được các màu phù hợp để sử dụng
Và đây sẽ là các màu chính mà chúng ta sẽ sử dụng trong thiết kế project.
Setup File HTML
Setup bình thường như ở các bài trước.
Thêm các đường link của font chữ [font Lato] và fontawesome[ font giúp bạn tạo icons 1 cách dễ dàng] và file styles.css.font chữ [font Lato] và fontawesome[ font giúp bạn tạo icons 1 cách dễ dàng] và file styles.css.
SelfTaught
Giới thiệu font awesome
Là font chữ mà bạn có thể chỉnh như kiểu chữ text bình thường, giúp tạo icon hoặc label dễ dàng cho website, được sử dụng rất phổ biến.
Ví dụ thực tế sử dụng fontawesome
Setup File CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #ffffff;
color: #5a5a5a;
font-family: 'Lato', sans-serif;
font-size: 20px;
text-rendering: optimizeLegibility;
}
Giới thiệu về các yếu tố chính trong responsive, giới thiệu grid.css
Lưu ý: Bài viết nhằm tóm tắt nội dung thực hiện project & giúp bạn nắm bắt các phần được hướng dẫn một cách đơn giản nhất. Tuy nhiên, hãy theo dõi video để học hỏi các kiến thức và kỹ thuật chi tiết nhất từ tác giả.
- Chọn màu cho website
- Do mình chọn tông màu chính của website là xanh [blue] nên mình google Blue color scheme để có được các màu phù hợp để sử dụng
- Và đây sẽ là các màu chính mà chúng ta sẽ sử dụng trong thiết kế project.
Setup File HTMLgrid.css
Setup bình thường như ở các bài trước. //www.responsivegridsystem.com
Thêm các đường link của font chữ [font Lato] và fontawesome[ font giúp bạn tạo icons 1 cách dễ dàng] và file styles.css.
Giới thiệu font awesome
Là font chữ mà bạn có thể chỉnh như kiểu chữ text bình thường, giúp tạo icon hoặc label dễ dàng cho website, được sử dụng rất phổ biến.
Ví dụ thực tế sử dụng fontawesome grid.css đã để sẵn trên phần mô tả bài học này trên trang HowKteam
Setup File CSS
Có 3 yếu tố chính tạo nên responsive:PROJECT THAM KHẢO ở link bên dưới!
Grid, hay hệ thống lưới
Hình ảnh scale theo màn hình
Media queries
Giới thiệu về grid.cssLuyện tập – Thử thách– Không ngại khó”.
Link tìm hiểu: //www.responsivegridsystem.com
Ví dụ:Kteam hỗ trợ tính năng lưu trữ nội dung bài học Setup file CSS & HTML dưới dạng file PDF trong link bên dưới.
Cài grid.css
Các bạn có thể download trực tiếp trên trang chủ của nólike hoặc +1 Google để ủng hộ Kteam và tác giả nhé!
Hoặc có thể sự dụng file grid.css đã để sẵn trên phần mô tả bài học này trên trang HowKteam
Project tham khảo
Hoặc có thể sự dụng file grid.css đã để sẵn trên phần mô tả bài học này trên trang HowKteam
Project tham khảo