Lộ trình lớp Web Public hè 2026

Buổi 1: Giới thiệu cài đặt IDE và Extensions

Buổi 2: Cấu trúc HTML cơ bản & Semantic HTML

Buổi 3: Giới thiệu CSS & Cách style cơ bản

Buổi 4: Làm việc với Font, Biến, Bộ chọn & Kỹ thuật chia layout với Flexbox

Buổi 5: CSS Grid, Position, Animation, Transition

Buổi 6: Giới thiệu về JavaScript và cách sử dụng JavaScript

Buổi 7: DOM là gì? Lắng nghe sự kiện và thao tác DOM

Buổi 8: Ôn tập tổng hợp & Kiểm tra cuối khóa

Buổi 1: Giới thiệu cài đặt IDE và Extensions

I. Cài đặt IDE, Extensions

1. IDE

Visual studio code

2. Extensions

example

example

example

example

II. Git & Github

1. Git

a. Git là gì? Git là hệ thống quản lý phiên bản phân tán (VCS - Version Control System), giúp bạn theo dõi mọi thay đổi trong mã nguồn của dự án, từ đó có thể hợp và làm việc nhóm một cách dễ dàng và hiệu quả

b. Tại sao cần dùng Git

c. Khái niệm cơ bản

d. Cài đặt Git

  1. Dowload Git

  2. Thiết lập thông tin cá nhân của mình với Git

git config --global user.name "Tên của bạn"
git config --global user.email "email@example.com"
git config --list
  1. Các lệnh cơ bản khi dùng Git
git init                     # Khởi tạo repo Git mới
git clone <url>              # Sao chép một repo từ GitHub/GitLab...

git status                   # Kiểm tra trạng thái file
git add <file>               # Thêm file vào staging area
git add .                    # Thêm tất cả file vào staging
git commit -m "Thông điệp"   # Tạo commit mới

git push                     # Đẩy code lên repository 
git push origin main         # Đẩy code lên nhánh main
git pull                     # Kéo code mới nhất từ repo về

git branch                   # Liệt kê các nhánh
git branch <ten-nhanh>       # Tạo nhánh mới
git checkout <ten-nhanh>     # Chuyển sang nhánh khác
git checkout -b <ten-nhanh>  # Tạo và chuyển sang nhánh mới
git merge <ten-nhanh>        # Gộp nhánh vào nhánh hiện tại
git branch -d <ten-nhanh>    # Xoá nhánh đã gộp
2. Github

a. Github là gì?

b. Liên kết Git và Github

  1. Tạo tài khoản Github và tạo repo mới

example

example

example

  1. Kết nối folder trong máy tính với repo trên Github
    B1: Tạo một folder bất kỳ trên Laptop

example

B2: Click chuột phải vào folder vừa tạo chọn Show more options sau đó chọn Git Bash:

example

B3: Sau khi hiển thị bảng như hình

alt text

thì chúng ta copy code ở gitHub vào đó

alt text

alt text

B4: Sau khi code chạy xong load lại trang ở gitHub
3. Github Page
B1: mở folder vừa tạo trong VS code.
B2: Tạo một file có tên là index.html.
B3: Copy đoạn code sau vào file vừa tạo.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello anh em</h1>
</body>
</html>

B4: Mở lại Git Bash và gõ lệnh git add . và Enter

alt text

B5: Tiếp theo gõ lệnh git commit -m "message" và Enter

alt text

B6: Cuối cùng gõ lệnh git push origin main và Enter

alt text

Như vậy là đã thành công, load lại trang GitHub sẽ thấy file index.html đã được tải lên

alt text

B7: Tiếp tục ở trang GitHub, nhấn vào mục Setting

alt text

B8: Chọn vào phần Page

alt text

B9: Ở phần Branch chọn main như ảnh:

alt text

B10: Nhấn vào button Save bên cạnh
B11: Đợi 1 lúc sau đó nhần vào Visit site

alt text

B12: Thêm index.html (tên file vừa tạo ở bước 2)

alt text

III. HTML, CSS

  1. HTML
  1. CSS