Coding About Section - Phần 1

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

5.0 (1 đánh giá)
Tạo bởi Kteam Cập nhật lần cuối 23:06 04-08-2020 896 lượt xem 3 bình luận
Học nhanh

Danh sách bài học

Coding About Section - Phần 1

Dẫn nhập

Ở những bài trước, chúng ta hoàn thành phần HEADER CHO WEB LANDINGPAGE .

Trong bài học này chúng ta sẽ cùng nhau đi vào phần About Section trong Web Landing Page.


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: 

Trong bài này, Kteam sẽ cùng bạn tìm hiểu nội dung: 

  • Sử dụng grid
  • Code HTML
  • Code 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ả.


Sử dung grid

Cú pháp:

<element class=”row”>
       <element_con class=”col  span-a-of-b”> </element_con>

        <!--a và b là số 1 đến 12  -->
</element>

Ví dụ muốn tạo ra 3 cột:

<div=”row”>
       <div class=”col span-1-of-3”> column 1</div>
       <div class=”col span-1-of-3”> column 2</div>
       <div class=”col span-1-of-3”> column 3</div>
</div>

Hoặc 2 cột mà 1 cột to gấp đôi cột còn lại

<div=”row”>

       <div class=”col span-2-of-3”> column 1</div>

       <div class=”col span-1-of-3”> column 2</div>
</div>

Code HTML

<section class="about-section">
    <div class="row">
        <h2>About Us</h2>
        <p class="p-long">
        We are people that are studying English by ourselves, we believe that you don’t need to pay so much money for being good at English, we’re here to help you 
        </p>
    </div>
    <div class="row">
          <div class="col span-1-of-4 about-picture">
              <img src="./resources/img/activities1.jpeg" alt="activities1">
              <p class="picture-title">
                  Team Working
              </p>
          </div>
          <div class="col span-1-of-4 about-picture">
              <img src="./resources/img/activities2.jpeg" alt="activities2">
              <p class="picture-title">
                  Funny class
              </p>
          </div>
          <div class="col span-1-of-4 about-picture">
              <img src="./resources/img/activities3.jpeg" alt="activities3">
              <p class="picture-title">
                 Be confident
              </p>
          </div>
          <div class="col span-1-of-4 about-picture">
              <img src="./resources/img/activities4.jpeg" alt="activities4">
              <p class="picture-title">
                All our friends
              </p>
          </div>
    </div>
</section>

Code CSS

REUSABLE COMPONENT

h1, h2{
  text-transform: uppercase;
  letter-spacing: 1px;
}

h1{
  font-size: 300%;
  font-weight: 400;
  word-spacing: 5px;
  color: white;
  line-height: 135%;
  margin-bottom: 50px;
}

h2{
  color: #e67e22;
  font-size: 180%;
  font-weight: 700;
  text-align: center;
}

h2:after{
  content: " ";
  display: block;
  width: 150px;
  height: 3px;
  background-color: rgba(230, 126, 34,0.5);
  margin: 0 auto;
  margin-top: 5px;
}

.p-long{
  text-align: center;
  color: #265077;
  font-size: 22px;
  margin-top: 40px;
  margin-bottom: 40px;
  width: 70%;
  margin-left: 15%;
  line-height: 140%;
}

section{
  padding: 50px;
}

ABOUT SECTION

/* ---------------------------- */
/* ---------ABOUT SECTION--------- */
/* ------------------------------------- */
.about-picture img{
  width: 90%;
}

Kết luận

Ở bài này chúng ta đã cùng nhau hoàn thiện xong 1 phần HTML, và 1 số các thuộc tính CSS của phần About section.

Trong bài học sau chúng ta sẽ cùng nhau HOÀN THIỆN ABOUT SECTION này.

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 xuống

Project

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!


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.

Nội dung bài viết

Tác giả/Dịch giả

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á

Trịnh đã đánh giá 17:39 10-09-2020

I love it.

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
Trịnh đã bình luận 17:39 10-09-2020

Hóng phần tiếp theo ^^.

 
Daniels đã bình luận 17:52 06-09-2020

Chuẩn bị ra phần tiếp theo chưa anh

 

thanhtuann đã bình luận 17:54 20-08-2020

Chờ phần tiếp :D

Không có video.