2. Tìm hiểu nâng cao về HTML/CSS.

2.1. Ba cốt lõi trong việc code HTML, CSS tốt.

2.2. Chuyển px sang rem 1 cách hiệu quả.

• Why: là cách thức dễ dàng để thay thế tất cả các đơn vị đo lường trong trang web về 01 cài đặt căn bản. Ví dụ để hiện thị giao diện trên thiết bị di động, yêu cầu cần thiết là phải thay đổi kích thước các đơn vị đo của từng elements cho phù hợp với màn hình hiển thị. Do đó thay vì viết rất nhiều các dòng code để thay đổi kích thước mỗi elements, ta chỉ đơn giản thay đổi global settings.
• How:

/* Khai báo root font size */
html {
    font-size: 10px;
}
/* Chuyển đổi px sang rem */
body {
    font-family: Lato, sans-serif;
    font-weight: 400;
    /* font-size: 16px; */
    line-height: 1.7;
    color: #2e2e2e;
    padding: 3rem;
}

2.3. Cấu trúc, thành phần và cách đặt tên class (BEM) trong HTML & CSS

• Why: để code HTML/CSS một cách chuyên nghiệp, chứ không phải code cho xong.

Chiến thuật thực hiện: THINK -> BUILD -> ARCHITECT

• Think: tập suy nghĩ về cấu trúc (layout) của trang web/web app trcớc khi viết code.
  • Chia giao diện thành các khối nội dung.
  • Gắn kết các khối nội dung lại thành Layout của webpage.
  • Có khả năng tái sử dụng lại các thành phần, trong 1 hoặc nhiều dự án.
• Build: xây dựng cấu trúc HTML, CSS với việc đặt tên class một cách phù hợp.
  • Phương pháp phổ biến: BEM (Block Element Modifier)

.block {} /* Thành phần độc lập, có ý nghĩa riêng */
.block__element {} /* Thành phần con của 1 block, ko có ý nghĩa riêng */
.block__element--modifier {} /* Phiên bản khác của 1 block hay 1 element */

• Architect: Xây dựng cấu trúc file & folders một cách hợp lý.
  • Phương pháp đề xuất: 7-1 pattern. 7 thư mục khác nhau chứa các file SASS có cùng chức năng. và 1 file chính import tất các các file được sử dụng để biên dịch ra CSS.

2.4. Triển khai BEM cho dự án Natours.

<header class="header">
    <div class="header__logo-box">
        <img src="img/logo-white.png" alt="Logo" class="header__logo">
    </div>

    <div class="header__text-box">
        <h1 class="heading-primary">
            <span class="heading-primary--main">Outdoors</span>
            <span class="heading-primary--sub">is where life happens</span>
        </h1>

        <a href="#" class="btn btn--white btn--animated">Discover our tours</a>
    </div>
</header>

/* example css */
.header__logo-box {
    position: absolute;
    top: 40px;
    left: 40px;
}

.header__logo {
    height: 35px;
}

.header__text-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

Kiến Thức Cơ Bản

1. CSS hoạt động như thế nào? https://www.youtube.com/playlist?list=PLjXJ5Dv8wYgcLK1vmc8K4nTUp9-kksDBz (mọi người xem nhớ bật CC)