Thứ Sáu, 23 tháng 1, 2026

Bài 18: Hoàn thiện & xuất bản khóa học Web tĩnh trên Blogspot

🎯 Mục tiêu

Hoàn tất cấu trúc khóa học (Menu → Bài học)
Áp dụng checklist xuất bản chuẩn Blogspot
Thiết lập bảo mật cơ bản cho web tĩnh
Gắn Google Analytics để theo dõi học viên
Biết cách bảo trì, cập nhật nội dung

✅ Checklist trước khi xuất bản

Mỗi bài = 1 bài viết / 1 trang riêng
Menu khóa học (Bài 16) đã thay đủ link thật
Mỗi bài có đúng cấu trúc: Mục tiêu → Lý thuyết → Ví dụ → Bài tập → Đáp án
Chỉ có 1 thẻ <h1> mỗi bài
Ảnh có alt, có loading="lazy"
Code hiển thị rõ (nền sáng – chữ đen)
Test trên Desktop và Mobile

🔐 Bảo mật cơ bản cho Web tĩnh

1) Không nhúng mã lạ

Chỉ dùng JS tự viết hoặc nguồn tin cậy
Tránh copy script không rõ nguồn

2) Tránh XSS (ở mức cơ bản)

Khi hiển thị dữ liệu người dùng nhập (form demo), tránh dùng innerHTML nếu không cần thiết.


// TỐT
out.textContent = userInput;

// HẠN CHẾ (chỉ dùng khi bạn kiểm soát nội dung)
out.innerHTML = "<b>" + safeText + "</b>";

3) Không lưu thông tin nhạy cảm

Không lưu email, số điện thoại thật trong localStorage
Form ở khóa học chỉ nên là demo

📊 Gắn Google Analytics (GA4)

Bước 1: Tạo GA4 → lấy Measurement ID (dạng G-XXXX).

Bước 2: Blogspot → Theme → Edit HTML.

Bước 3: Dán trước thẻ </head>:


<!-- Google Analytics GA4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

👉 Sau 24–48h, bạn sẽ thấy lượt xem bài học, thời gian ở lại trang.

🛠️ Quản lý & bảo trì khóa học

Đặt tên bài rõ ràng: Bài 08 – CSS Flexbox
Cập nhật nội dung nhưng giữ nguyên URL
Ghim Menu khóa học ở đầu blog
Sao lưu code Menu + Template bài học

Gợi ý nâng cấp tiếp theo

Thêm mục “Hỏi & Đáp” (FAQ)
Thêm bài “Bài tập tổng hợp”
Gắn comment để học viên trao đổi

💻 Code mẫu: Banner hoàn thành khóa học


<div class="finish">
  <h2>🎉 Chúc mừng!</h2>
  <p>
    Bạn đã hoàn thành khóa học Web tĩnh (HTML • CSS • JavaScript).
  </p>
  <p>
    👉 Hãy quay lại Menu khóa học để ôn tập hoặc chia sẻ cho bạn bè.
  </p>
</div>

<style>
.finish{
  margin: 20px 0;
  padding: 16px 18px;
  border-radius: 16px;
  background:#ecfdf5;
  border:1px solid #bbf7d0;
  text-align:center;
}
.finish h2{ margin-top:0; }
</style>