CYBERSOFT ACADEMY
CyberSoft Academy
Trang chủ
⌨️ Luyện gõ chữ Lộ trình 3–12 Dự án học viên Blog Về CyberSoft Đăng ký tư vấn →
🕵️ K15 · KHÓA WEB · HTML · CSS · JAVASCRIPT

Web Weavers Thợ Dệt Web

Con dệt HTML, CSS, JavaScript, Canvas và API thành website, web-app và mini-game chạy thật trên trình duyệt.

“Con là Thợ Dệt Web — dệt ý tưởng thành trang web chạy thật trên trình duyệt.”

12buổi
3capstone
3đề đồ án
★Dấu Tự Làm
Web Quiz — app đố vui con tự làm
Web Quiz — app đố vui con tự làm

KHÓA NÀY LÀ GÌ✧

Con vào vai thợ dệt web, dệt từ 5 sợi chỉ: HTML, CSS, JavaScript, Canvas/p5.js và fetch API. Mỗi buổi ra một sản phẩm mở được ngay trên trình duyệt.

Meme Generator — web-app chế meme con tự làm
Meme Generator — web-app chế meme con tự làm
Cấu trúc — HTMLkhung xương của trang
Phong cách — CSSmàu · bố cục · responsive
Tương tác — JavaScriptbấm là trang phản hồi
Canvas & APIsân chơi game · dữ liệu web thật

CON HỌC GÌ✧

Mỗi “sợi chỉ” được học kỹ qua mini-app minh hoạ, rồi ráp thành sản phẩm chạy thật.

1
HTML — cấu trúc trangweb chạy thế nào · thẻ h1, p, img, a, ul/li · header/section/footer

🎯Con dựng khung xương trang web đầu tiên của mình.

2
CSS — phong cách & bố cụcselector · màu, font, nền · box model · Flexbox · responsive · hover

🎯Con biến trang trơn thành trang đẹp trên cả điện thoại và máy tính.

3
JavaScript & DOMbiến · sự kiện nút · đổi chữ/ảnh · if/else · danh sách động · localStorage

🎯Con làm nút bấm phản hồi, quiz chấm điểm, web nhớ lựa chọn.

4
fetch APIAPI là gì · gọi fetch & nhận JSON · hiển thị dữ liệu ngoài lên web

🎯Con làm trang lấy dữ liệu thật từ API và hiển thị đẹp.

5
Canvas & p5.jshệ toạ độ · vẽ hình & màu · chuyển động · phím, chuột · va chạm

🎯Con làm mini-game chơi được và công cụ chế meme trên Canvas.

BẢN ĐỒ 12 BUỔI✧

Từ trang HTML đầu tiên tới mini-game Canvas: 3 capstone rèn từng kỹ năng, khép lại bằng đồ án website và Demo Day.

1Chặng 1 · HTML & CSS
Chặng 1 · HTML & CSSKhung xương web — HTMLTrang giới thiệu idol/nhân vật bằng HTML thuần
Chặng 1 · HTML & CSSKhoác áo cho web — CSSTrang idol có style: card bo góc, màu nền, font đẹp
Chặng 1 · HTML & CSSBố cục & hiệu ứng — Flexbox, responsiveTrang fan responsive trên điện thoại và máy tính, có hover
🏆 CAPSTONE
Chặng 1 · HTML & CSSCapstone #1 — Fan SiteFan site 1 trang: hero, tiểu sử, gallery ảnh, responsive
2Chặng 2 · JavaScript & DOM
Chặng 2 · JavaScript & DOMThổi hồn — JavaScript & DOMTrang có nút đổi ảnh/câu quote và bộ đếm lượt bấm
Chặng 2 · JavaScript & DOMJS ra quyết định — danh sách động & localStorageMini app to-do/bình chọn; web nhớ tên và chế độ sáng/tối
🏆 CAPSTONE
Chặng 2 · JavaScript & DOMCapstone #2 — Web QuizWeb quiz 5 câu: chấm điểm, hiện kết quả, lưu điểm cao nhất
3Chặng 3 · API & Canvas
Chặng 3 · API & CanvasNối với thế giới — fetch APITrang lấy dữ liệu thật từ API (quote anime, thời tiết, Pokémon)
Chặng 3 · API & CanvasSân chơi Canvas (p5.js) — chuyển động & va chạmMini-game hứng đồ hoặc né chướng ngại, có điểm và game over
🏆 CAPSTONE
Chặng 3 · API & CanvasCapstone #3 — Meme Generator (Canvas)Meme generator: chọn ảnh, thêm chữ, tải meme về máy
4Chặng 4 · Đồ án & Demo Day
🎓 ĐỒ ÁN
Chặng 4 · Đồ án & Demo DayĐồ án — Thiết kế & xây dựngWireframe, danh sách tính năng và website chạy được đúng thiết kế
🎓 ĐỒ ÁN
Chặng 4 · Đồ án & Demo DayĐồ án — Demo Day (trình bày)Website hoàn chỉnh, bài demo 3–5 phút, có link mở được

Muốn biết con có theo kịp Web Weavers không? Thử trước một buổi — ba mẹ ngồi cạnh, không mất phí.

Cho con thử sức 1 buổi →

SẢN PHẨM CON KHOE ĐƯỢC✧

3 capstone con tự làm — mỗi cái là một website/web-app chạy thật trên trình duyệt, mang Dấu tự làm.

Fan Site
● Capstone 1 · HTML + CSSFan SiteTrang fan về idol/anime/CLB con mê: hero, tiểu sử, gallery ảnh, responsive, hiệu ứng hover.
Web Quiz
● Capstone 2 · JavaScript + DOMWeb QuizQuiz 5 câu chấm điểm, hiện kết quả và lưu điểm cao nhất bằng localStorage.
Meme Generator
● Capstone 3 · CanvasMeme GeneratorDùng Canvas ghép ảnh nền với chữ trên/dưới, kéo chỉnh rồi tải meme PNG về máy.

ĐỒ ÁN & TỐT NGHIỆP✧

Cuối khóa con chọn 1 trong 3 đề đồ án (hoặc tự đề xuất đề mở), phác wireframe rồi dựng website chạy thật đúng thiết kế.

Personal Website ProWebsite cá nhân nhiều mục (giới thiệu, dự án, liên hệ), responsive, có chế độ sáng/tối và lưu trạng thái.
Web Game Arcade
Web Game ArcadeTrang tổng hợp 1–2 mini-game Canvas con tự làm, có bảng điểm cao.
Creator StudioStudio sáng tạo (meme, thẻ bài, poster) dùng Canvas kết hợp dữ liệu online lấy bằng fetch.

Demo Day: con trình diễn website 3–5 phút bằng link mở được, nói 30 giây cách trang chạy rồi nhận Huy hiệu Tự Làm. Ba mẹ được mời tới xem.

GIỮ CHỖ HỌC THỬ MIỄN PHÍ✧

Để lại số điện thoại, CyberSoft gọi lại trong ngày: tư vấn khóa Web Weavers hợp với con và xếp buổi học thử 60 phút miễn phí, không ràng buộc.

Bằng việc gửi, anh/chị đồng ý để CyberSoft liên hệ tư vấn. Chúng tôi bảo mật thông tin của gia đình.

PHƯƠNG PHÁP HỌC✧

Con tự nghĩ trước, làm là chính. Học theo khung 5E, bài tập 3 mức ★/★★/★★★ để bạn nào cũng vừa sức.

1Phác trướcPhác sơ đồ trang (wireframe) và cây thẻ
2Thử & quan sátNghịch mini-app, thấy trang phản hồi
3Hiểu & thiết kếChọn bố cục, phác giao diện
4Tự tay codeGõ HTML/CSS/JS, có dẫn dắt
5Kiểm & trình diễnTest trên điện thoại, sửa layout, ship và khoe
Mỗi buổi có ít nhất 4 mini-app minh hoạ — con thấy trang phản hồi trước khi tự gõ code
HTML cấu trúc
HTML cấu trúcthẻ → thành trang
CSS Flexbox
CSS Flexboxtrang trí & xếp hàng
JS/DOM · Bấm là đổi
JS/DOM · Bấm là đổibấm → trang phản hồi
fetch API
fetch APIdữ liệu → hiện lên trang

DẤU TỰ LÀM✧

Huy hiệu Tự Làm chỉ đóng cho sản phẩm cuối khóa đạt đủ 3 bằng chứng — gắn vào hồ sơ My Cyber ID của con.

1Nháp không dùng AICon phác sơ đồ trang (wireframe) và cây thẻ ra giấy trước khi mở máy hay hỏi AI.
2Nhật ký AI gợi ý — con kiểmCon ghi lại: hỏi AI gì, AI đúng/sai chỗ nào, con đã sửa gì.
3Clip 30 giây con tự giải thíchCon demo trang và nói cách nó chạy — bằng lời của con.

BỔ TRỢ MÔN HỌC✧

Con giỏi hơn ở trường — và sẵn sàng cho thời đại AI.

💻 Tin học
⌨️ Trong khóaJavaScript, DOM, Canvas, fetch API
🏫 Ở trườngweb — kỹ năng nền của thời đại số
🎨 Mỹ thuật
⌨️ Trong khóamàu, font, bố cục Flexbox, responsive
🏫 Ở trườngthiết kế, màu sắc, bố cục, thẩm mỹ
🌐 Ngoại ngữ
⌨️ Trong khóathẻ & thuộc tính HTML/CSS tiếng Anh
🏫 Ở trườngvốn từ tiếng Anh công nghệ
📝 Ngữ văn
⌨️ Trong khóaviết tiểu sử, giới thiệu trên website
🏫 Ở trườngviết nội dung, trình bày mạch lạc
📐 Toán
⌨️ Trong khóatoạ độ (x, y), va chạm, điều kiện if/else
🏫 Ở trườngtư duy logic, toạ độ
Năng lực tư duyTư duy thiết kế — bố cục & trải nghiệmTư duy logic — sự kiện, điều kiện, luồngGiải quyết vấn đề — sửa layout, sửa lỗiSáng tạo — làm ra sản phẩm chia sẻ được

BUỔI RA MẮT CHO BA MẸ✧

15 phút con tự trình diễn đồ án cuối khóa — ba mẹ thấy rõ con đã học được gì, làm được gì.

Đồ án cuối khóa · Web Game Arcade
Đồ án cuối khóa · Web Game Arcade
🎓 CON TRÌNH DIỄN · ĐỒ ÁN CUỐI KHÓACon chọn 1 trong 3 đồ án
  • Personal Website ProWebsite cá nhân nhiều mục (giới thiệu, dự án, liên hệ), responsive, có chế độ sáng/tối và lưu trạng thái.
  • Web Game ArcadeTrang tổng hợp 1–2 mini-game Canvas con tự làm, có bảng điểm cao.
  • Creator StudioStudio sáng tạo (meme, thẻ bài, poster) dùng Canvas kết hợp dữ liệu online lấy bằng fetch.
🧠 KIẾN THỨC CON NẮM
HTML — cấu trúc trangCSS — phong cách & bố cụcJavaScript & DOMfetch APICanvas & p5.js
🛠️ KỸ NĂNG CON LÀM ĐƯỢC
  • Con dựng khung xương trang web đầu tiên của mình.
  • Con biến trang trơn thành trang đẹp trên cả điện thoại và máy tính.
  • Con làm nút bấm phản hồi, quiz chấm điểm, web nhớ lựa chọn.
  • Con làm trang lấy dữ liệu thật từ API và hiển thị đẹp.
  • Con làm mini-game chơi được và công cụ chế meme trên Canvas.
💡 NĂNG LỰC TƯ DUY
Tư duy thiết kế — bố cục & trải nghiệmTư duy logic — sự kiện, điều kiện, luồngGiải quyết vấn đề — sửa layout, sửa lỗiSáng tạo — làm ra sản phẩm chia sẻ được
🎬 KÈM THEOClip 30 giây con tự giải thích đồ án và share-link để ông bà, người thân cùng xem.

Muốn là người đầu tiên xem con trình diễn sản phẩm tự tay làm ra?

Giữ vé học thử cho con →

KHÓA NÀY NẰM Ở ĐÂU✧

Sau K15, con có nền web vững để lên K16 App Engine Studio — chế app đủ tầng có AI và đưa lên mạng.

PHỤ HUYNH THƯỜNG HỎI✧

Khóa thuộc Tầng 2 · Agent (11–14 tuổi), nằm trong chặng Dữ liệu · Web · App. Con làm website và web-app thật, làm nền để lên các khóa App và AI.

Con học HTML, CSS, JavaScript, Canvas và p5.js, viết code trên VS Code hoặc CodePen, và dùng fetch API để lấy dữ liệu thật từ web.

Mỗi buổi con làm ra một sản phẩm mở được trên trình duyệt, cùng 3 capstone: Fan Site, Web Quiz và Meme Generator. Cuối khóa con chọn 1 trong 3 đề đồ án (Personal Website Pro, Web Game Arcade, Creator Studio) và trình diễn ở Demo Day.

AI là bạn tập, không làm hộ. Con phác sơ đồ trang ra giấy trước, ghi nhật ký AI gợi ý gì và con đã kiểm ra sao, rồi tự giải thích trang chạy thế nào.

HÔM NAY, KHÔNG PHẢI “DỊP KHÁC”✧

Cho con học thử MIỄN PHÍ một buổi.Tuổi thơ của con không chờ “dịp khác”. 60 phút ba mẹ ngồi cạnh, xem con tự làm ra sản phẩm đầu tiên — kèm test xếp lớp & tư vấn lộ trình 9 năm riêng cho con, hoàn toàn miễn phí.

✓ Đã gửi! CyberSoft sẽ liên hệ với anh/chị sớm nhất.