Học HTML, CSS từ Zero Tới Hero

2 ol.ol { list-style: none; counter-reset: list; padding: 0 1rem; } .post-body ol>li.li { --stop: calc(100% / var(--length) * var(--i)); --l: 62%; --l2: 88%; --h: calc((var(--i) - 1) * (180 / var(--length))); --c1: hsl(var(--h), 71%, var(--l)); --c2: hsl(var(--h), 50%, var(--l2)); position: relative; counter-increment: list; max-width: 45rem; margin: 2rem auto; padding: 2rem 1rem 1rem; box-shadow: 0.1rem 0.1rem 1.5rem rgba(0, 0, 0, 0.3); border-radius: 0.25rem; overflow: hidden; } .post-body ol>li.li::before { content: ''; display: block; width: 100%; height: 1rem; position: absolute; top: 0; left: 0; background: linear-gradient(to right, var(--c1) var(--stop), var(--c2) var(--stop)); } .post-body h3.h3 { display: flex; align-items: center; margin: 0 0 1rem; -webkit-text-fill-color: unset; } .post-body h3.h3::before { display: flex; justify-content: center; align-items: center; flex: 0 0 auto; margin-right: 1rem; width: 1.5rem; height: 1.5rem; content: counter(list); padding: 1rem; font-size:18px; border-radius: 50%; background-color: var(--c1); color: #161616; } .post-body ol li ul, .post-body ul li ul{ padding: 0 0 0 72px; } @media (min-width: 40em) { .post-body ol>li.li { margin: 2rem auto; padding: 2rem 1.5rem 1.5rem; } .post-body h3.h3 { margin: 0 0 1rem; } .post-body h3.h3::before { margin-right: 1.5rem; width: 1.5rem; height: 1.5rem; } } @media only screen and (max-width: 680px) { .post-body h3.h3::before { display: flex; justify-content: center; align-items: center; flex: 0 0 auto; margin-right: 1rem; width: 1rem; height: 1rem; font-size:13px; content: counter(list); padding: .8rem; border-radius: 50%; background-color: var(--c1); } .post-body ol li ul, .post-body ul li ul{ padding: 0 0 0 10px; } }

1. Làm quen với HTML

   • Vai trò của HTML, CSS, Javascript
   • Chi tiết về ngôn ngữ HTML
   • Cấu trúc tiêu chuẩn của file HTML
   • Tìm hiểu về các thẻ meta
   • Boilerplate là gì và cách sử dụng
   • Các thẻ HTML thông dụng
   • Tìm hiểu về thuộc tính trong HTML
   • Các mẹo để viết HTML tốt hơn
   • Tóm tắt chương làm quen với HTML

2. Các thẻ tiêu đề

   • Thẻ tiêu đề h1
   • Thẻ tiêu đề h2
   • Thẻ tiêu đề h3, h4, h5, h6
   • Những sai lầm thường gặp
   • Tóm tắt chương

3. Thẻ đoạn văn

   • Thẻ p
   • Thẻ br
   • Những sai lầm thường gặp
   • Tóm tắt chương

4. Chữ đậm, chữ nghiêng

   • Thẻ strong và thẻ b
   • Thẻ strong với headings
   • Thẻ em và thẻ i
   • Giải đáp thắc mắc
   • Tóm tắt chương

5. HTML semantic

   • Semantics là gì?

6. Thẻ danh sách

   • Thẻ ul và ol
   • Sử dụng Emmet
   • Dùng Emmet để Code HTML/CSS nhanh hơn
   • Thẻ danh sách lồng nhau
   • Tính chất của ul, ol
   • Những sai lầm thường gặp
   • Tóm tắt chương

7. Sử dụng liên kết

   • Thẻ a
   • Thuộc tính target
   • Phương thức tel, mailto
   • Kết hợp với menu, mục lục

8. Sử dụng hình ảnh

   • Thẻ img
   • Thuộc tính alt
   • Các định dạng ảnh #1
   • Các định dạng ảnh #2
   • Sử dụng hình ảnh tối ưu
   • Liên kết và hình ảnh
   • Hình ảnh trong HTML5
   • Tóm tắt chương

9. Tra cứu thẻ HTML

   • HTML Reference
   • Sử dụng W3Schools

10. Comments và blank space

    • Comments trong HTML
    • Thẻ pre
    • HTML Entities
    • Non-breaking space Entity
    • Thẻ code
    • Tóm tắt chương

11. Tính hợp lệ của HTML

    • Tính hợp lệ của HTML #1
    • Tính hợp lệ của HTML #2
    • Thẻ tùy chỉnh
    • Tóm tắt chương

12. Làm quen với CSS

    • Cách sử dụng CSS #1
    • Thẻ link #1
    • Thẻ link #2
    • Cách sử dụng CSS #2
    • Thuộc tính CSS thông dụng #1
    • Thuộc tính CSS thông dụng #2
    • CSS prefix là gì?
    • Tóm tắt chương

13. Tính thừa kế CSS

    • CSS mặc định
    • Thừa kế trong CSS
    • Reset CSS là gì?
    • Lưu ý khi Reset CSS
    • Tóm tắt chương

14. Thẻ inline và block

    • Thẻ inline, block #1
    • Thẻ inline, block #2
    • Thuộc tính display
    • Thuộc tính opacity
    • Thuộc tính visibility
    • So sánh display, opacity và visibility
    • Tóm tắt chương

15. CSS selectors cơ bản

    • CSS selectors là gì?
    • ID và Class
    • Pseudo-classes selectors
    • Độ ưu tiên của CSS

16. Đệm, viền, khoảng lề

    • Box Model là gì?
    • Thuộc tính padding
    • Thuộc tính border
    • Thuộc tính border-radius
    • Thuộc tính outline
    • Thuộc tính margin
    • Margin Collapse là gì?
    • Thuộc tính box-sizing

17. Đơn vị trong CSS

    • Các đơn vị trong CSS
    • Đơn vị px (pixel)
    • Đơn vị %, vw, vh
    • Đơn vị em
    • Đơn vị rem
    • Nên dùng đơn vị nào?

18. Làm việc với màu sắc

    • Màu sắc trong CSS
    • Quy đổi RGB sang Hex?
    • Một số cách viết màu sắc khác
    • Trường hợp sử dụng màu sắc

19. Làm việc với background

    • Background-color
    • Background-image
    • Background-size
    • Background-position
    • Background-attachment
    • Background-clip
    • Cách làm chữ chuyển màu
    • Background-origin
    • Background shorthands
    • Backdrop-filter

20. Làm việc với font chữ

    • Tổng quan về font chữ
    • Font-family là gì?
    • Nhúng Google Fonts
    • Fonts chữ hệ thống
    • Làm việc với font chữ #1
    • Làm việc với font chữ #2