Hướng dẫn tải html/css website

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.

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ả.

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 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.

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

Có 3 yếu tố chính tạo nên responsive:

• Grid, hay hệ thống lưới
• Hình ảnh scale theo màn hình
• Media queries

Giới thiệu về grid.css

Link tìm hiểu: http://www.responsivegridsystem.com

Ví dụ:

Cài grid.css

Các bạn có thể download trực tiếp trên trang chủ của nó

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 

Nếu việc thực hành theo hướng dẫn không diễn ra suôn sẻ như mong muốn. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở link bên dưới! 

Kết luận

Ở bài này chúng ta đã kết thúc phần chuẩn bị cho project.

Ở bài sau chúng ta sẽ bắt tay vào code phần đầu tiên của website, đó chính là HEADER.

Cảm ơn các bạn đã theo dõi bài viết, hãy để lại bình luận và góp ý của mình để giúp phát triển bài viết tốt hơn. Đừng quên: “Luyện tập – Thử thách– Không ngại khó”.

Tài liệu 

Nhằm phục vụ mục đích học tập Offline của cộng đồng, 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.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like hoặc +1 Google để ủng hộ Kteam và tác giả nhé! 

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng. 

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.