Lộ trình học HTML/CSS trong 1.5 tháng - 8 tháng từ 0 đến fullstack web developer (Phần 3)

NaN/NaN

Có thể các bạn đã biết hoặc chưa biết, dù code bằng ngôn ngữ nào phía sau thì cuối cùng website cũng trả html/css/javascript cho trình duyệt. Vì vậy html/css/javascript là những kiến thức tiên quyết mà các bạn phải học trong lập trinh web

Bài viết này này mình sẽ cùng các bạn xây dựng lộ trình học html/css trong 1.5 tháng. Đây là những kiến thức sẽ theo các bạn trong suốt thời gian làm việc với website. Tuy vậy nó khá cơ bản và dễ học nên mình sẽ đi rất nhanh thôi

Chuẩn bị

Công cụ cần thiết

  • IDE: Visual Studio Code
  • Browser: Chrome
  • Git Account
  • Figma Account

Tài liệu tham khảo

Tài nguyên tổng hợp

Tài nguyên UI/UX

HTML (2 tuần)

Bắt đầu với HTML

  1. Tạo project

    • Tạo thư mục portfolio
    • Tạo file index.html
    • Chạy dự án với Live Server

  2. Cơ bản về HTML

    • HTML là gì?
    • Vai trò của HTML
    • Cách HTML hoạt động
    • Cấu trúc file HTML

  3. Ví dụ

<!DOCTYPE html>
<html>
    <head>
        <!-- Thông tin -->
    </head>
    <body>
        <!-- Nội dung -->
    </body>
</html>

  1. Cấu trúc thẻ HTML
    • Tag: <tag> hoặc <tag />
    • Attribute: Thuộc tính (src, class, id,...)
    • Value: Giá trị của attribute

Ví dụ:

   <img src="https://..." alt="Ảnh" />

Note: Một tag có thể có 0 hoặc nhiều cặp attribute-value

Các thẻ HTML cơ bản (5 ngày)

  1. Văn bản

    • Tiêu đề: <h1> đến <h6>
    • Đoạn văn: <p>
    • Khối: <div>, <span>

  2. Liên kết và Media

    • Link: <a>
    • Ảnh: <img>

  3. Danh sách

    • Không thứ tự: <ul>, <li>
    • Có thứ tự: <ol>, <li>

  4. Bảng

    • <table>
    • <tr>, <td>, <th>

HTML5 Semantic Elements (5 ngày)

  1. Layout Elements
  • <header>
  • <footer>
  • <article>
  • <section>
  • <nav>
  • <aside>
  • <main>

  1. Media Elements
  • <audio>
  • <video>
  • <canvas>

  1. Form Elements
  • <form>
  • <input>
  • <textarea>
  • <button>
  • <select>, <option>
  • <label>
  • <checkbox>, <radio>

Mini Project Portfolio (3 ngày)

  1. Bắt đầu
  • Xoá hết hoặc sắp xếp chỉnh sửa lại portfolio index.html theo cấu trúc

  1. Header
  • <header>
  • Logo: Text <h2> hoặc image <img />
  • Menu: Home, About <nav>, <ul>, <li>, <a>

  1. About
  • <section>
  • Ảnh đại diện <img>
  • Câu chào ngắn <h1>
  • Giới thiệu <p>

  1. Blog
  • <section>
  • List bài viết: <article>
  • Nội dung mỗi bài viết: Title <h3>, Description <p>, Image <img />

  1. Experience
  • <section>
  • Bảng kinh nghiệm: <table>, <tr>, <td>, <th>
  • Các cột: Thời gian, Trường/Công ty, Vị trí, Công việc (những việc đã làm)

  1. Video
  • <section>
  • Video nào đó <video>
  • Mô tả ngắn <p>

  1. Contact
  • <section>
  • Form liên hệ <form>
  • Danh sách field: Tên <input />, Email <input />, Message <textarea />, Send <button />

  1. Footer
  • <footer>
  • Copyright, Socials: Facebook, Twitter, Instagram <ul>, <li>, <a>

=> Một portfolio khá xấu, bố cục 1 hàng. Đừng lo lắng hãy tập chung vào cấu trúc

Github Practice (1 ngày)

  • Tạo repo và đẩy dự án lên
  • Deploy lên Vercel hoặc Github Pa

CSS (4 tuần)

Cơ bản về CSS (3 ngày)

  1. Tìm hiểu
  • CSS là gì?
  • Vai trò của CSS

  1. Cách nhúng CSS
  • Inline: <tag style="color: red;">
  • Internal: <style> {color: red;"} </style> (trong <head></head>)
  • External: <link rel="stylesheet" href="style.css"> (trong <head></head>)

Ví dụ:

<!-- Inline CSS -->
<div style="color: red;">...</div>

<!-- Internal CSS -->
<style>
    .text-red { color: red; }
</style>

<!-- External CSS -->
<link rel="stylesheet" href="style.css">

  1. Cú pháp CSS
  • Selector: Chọn element (#id-name, .class-name, ...)
  • Declaration: Thuộc tính và giá trị (color: red;) (cặp key-value trong )
  • Những cách lựa chọn selector
  • Thứ tự ưu tiên (inline > id > class > tag)

Ví dụ:

/* Selector */
.class-name {
    /* Properties */
    color: red;
    font-size: 16px;
}

  1. Thực hành
  • Vào thư mục portfolio
  • Tạo file style.css
  • Gõ bất cứ thứ gì vào đó
  • Link file CSS vào index.html (head => <link rel="stylesheet" href="style.css">)
  • Chạy dự án kiểm tra (view page source > click vào style.

CSS Properties (6 ngày)

  • Văn bản: color, text-align, font-size, font-weight, ...
  • Box model: width, height, margin, padding, border, ...
  • Background: background-color, background-image, ...
  • Bố cục: display, position, z-index, top, left, ...

CSS BEM (1 ngày)

  1. Tìm hiểu
  • BEM là gì?
  • Dùng để làm gì?
  1. Cú pháp
  • Block: <div class="block">
  • Element: <div class="block__element">
  • Modifier: <div class="block--modifier">

Ví dụ:

/* Block */
.card { }

/* Element */
.card__title { }
.card__image { }

/* Modifier */
.card--featured { }

Mini project Portfolio: Improvement (3 ngày)

  • Sử dụng DevTools responsive > Chọn mobile
  • Đặt selector cho các thẻ HTML theo BEM
  • Sử dụng CSS để style cho các thẻ HTML
  • Kết hợp sử dụng Perseudo-classes (ví dụ: Trỏ chuột vào link sẽ đổi màu)

=> Mặc dù portfolio đã đẹp hơn, nhưng trông vẫn 1 hàng, đừng lo lắng, vẫn chưa học xong CSS đâu

Responsive Design (1 ngày)

  • Hiểu mobile-first design
  • Khai bào bằng Thẻ meta viewport: <meta name="viewport" ... /> (<head>)
  • Media Queries: @media (max-width: 768px) { ... } (file css)

Ví dụ:

/* Mobile First */
.container {
    width: 100%;
    padding: 15px;
}

/* Tablet */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        max-width: 960px;
    }
}

Flexbox (2 ngày)

  • Khai báo: display: flex;
  • Các thuộc tính: flex-direction, justify-content, align-items, ...
  • Học trực quan: flexboxfroggy.com

Ví dụ:

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Grid (2 ngày)

  • Khai báo: display: grid;
  • Các thuộc tính: grid-template-columns, grid-template-rows, grid-template-areas, ...
  • Học trực quan: cssgridgarden.com

Ví dụ:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

Animation & Transition (2 ngày)

  • Transition: transition: keyframes_name duration timing-function delay;
  • Animation: @keyframes name { ... }

Mini project Portfolio: Improvement (2 ngày)

  • Đổi devtools linh hoạt giữa mobile, tablet và desktop
  • Header: Logo và menu ngang hàng ở 2 bên (flex)
  • About: Avatar và thôn tin text ngang hàng ở 2 bên ở tablet trở lên
  • Blog: Dạng 1 cột mobile, 2 cột tablet, 3 cột desktop (grid)
  • Footer: Copyright và Socials ở ngang hàng ở 2 bên (flex)

Luyện tập HTML/CSS

  • 15-30ph/ngày
  • Chọn 1 website bất kỳ
  • Sử dụng DevTools > Element để phân tích cấu trúc HTML & thuộc tính Css
  • Tự đặt câu hỏi và trả lời (tại sao lại sử dụng thuộc tính CSS này)
  • Tìm kiếm, tìm hiểu về các thuộc tính CSS chưa biết/chưa dùng

Css Libraries & Framework (2 ngày)

  1. Tham khảo
  1. Cách học
  • Đọc qua tài liệu, đọc kỹ phần giới thiệu, cài đặt
  • Tạo 1 mini project
  • Tìm cách sử dụng CDN và nhúng vào project
  • Tìm kiếm các example copy/paste, ghép nối và sắp xếp thành 1 page

Mini project: Clone Website (4 ngày)

  • Sử dụng 1 CSS Library
  • Clone 1 page HTML bất kỳ
  • Sử dụng tối đa DevTools > Element ĐỂ THAM KHẢO

Mini project: Landing Page by Figma (4 ngày)

  • Chọn 1 Figma Design
  • Cắt UI theo figma design đó

Figma Community: figma.com/community

Github Practice (1 ngày)

  • Tạo repo và đẩy 3 dự án lên
  • Nếu dự án có repo rồi thì add, commit, push lên
  • Deploy lên Vercel hoặc Github Pages
My Image
Xin chào

Mình là Thái, một lập trình viên fullstack với 5 năm kinh nghiệm trong lập trình web.