Setup file CSS & HTML

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.

Java


<!-- #group.howkteam.com -> trao đổi, hỏi đáp, thảo luận
     #nhớ Like và Sub video youtube
     #Code: howkteam.com
     #Kho tài liệu: Howkteam.com/documentation
     #Hỏi đáp tại website: howkteam.com/questions => người khác tìm lại có đáp án -->
<!-- Chung ta dang code html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
        crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
    <title>SelfTaught</title>
</head>
<body>
    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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


<link rel="stylesheet" href="./vendors/css/grid.css">
1

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.

Tải xuống

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 và share để ủ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ê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.

CỘNG ĐỒNG HỎI ĐÁP HOWKTEAM.COM

GROUP THẢO LUẬN FACEBOOK

Nội dung bài viết

Dẫn nhập
Nội dung
Chọn màu cho website
Setup File HTML
Setup File CSS
Giới thiệu về các yếu tố chính trong responsive, giới thiệu grid.css
Project tham khảo
Kết luận
Tài liệu
Thảo luận
Tải xuống
- Tài liệu
Thảo luận

Tác giả/Dịch giả

Kteam

Khóa học

Lập trình Front End cơ bản với website Landing Page

Nếu bạn yêu thích lập trình web nhưng còn lơ ngơ không biết bắt đầu từ đâu hay đã biết cơ bản mà chưa làm được một sản phẩm nhất định nào, thì đây chính là khóa học dành cho bạn – LẬP TRÌNH FRONT END CƠ BẢN VỚI WEBSITE LANDING PAGE.

Trong phần này, Kteam sẽ giới thiệu cho các bạn về nội dung chúng ta sẽ được hướng dẫn cho khóa học này, cũng như là project mà chúng ta sẽ cùng nhau thực hiện.

Nào! Bắt đầu thôi!

Đánh giá

GnuhEht đã đánh giá 3 năm trước

Báo cáo

qp.quocpham đã đánh giá 4 năm trước

cảm ơn KTEAM rất nhiều

Báo cáo

Thoai Do đã đánh giá 4 năm trước

Bài giảng dễ hiểu. Cảm ơn Kteam rất nhiều

Báo cáo

hungvp1109 đã đánh giá 4 năm trước

Báo cáo

work.hoangthien@gmail.com đã đánh giá 4 năm trước

Báo cáo

Bình luận

Để bình luận, bạn cần đăng nhập bằng tài khoản Howkteam.

Đăng nhập

vt123455 đã bình luận 6 tháng trước

bạn cho mình xin nội dung các file con của folder WebLandingPage với bạn ơi

Trả lời Báo cáo

NQD2308 đã bình luận 3 năm trước

Ad gửi cho em cái grid của ad được ko ạ chứ e ko còn thấy nó trong phần download nữa

nqd230899@gmail.com

Trả lời Báo cáo

minhsangdo đã bình luận 3 năm trước

em không thấy file grid trong bài giảng 9 anh ơi, anh có thể gửi qua gmail cho em được không
minhsangdo2308@gmail.com

Trả lời Báo cáo

tranngocphong110398@gmail.com đã bình luận 4 năm trước

cho em xin file grid với ạ

Trả lời Báo cáo

HeiuVu đã bình luận 4 năm trước

font trong " https://fontawesome.com/ " không còn như trong hướng dẫn nữa, ad chỉ giúp lấy link ntn với ạ, thanks!!!

Trả lời Báo cáo

Setup file CSS & HTML

Lập trình Front End cơ bản với website Landing Page

Danh sách bài học