Đề cương khóa học
Cấu trúc và Phong cách (HTML & CSS)
Giới thiệu & Công nghệ Web
- Web hoạt động như thế nào: Giải thích đơn giản về mô hình Client-Server.
- Trình duyệt như một máy tính: Cách mã được diễn giải.
- HTML: Khung xương của web. Cấu trúc, phân cấp và các thẻ ngữ nghĩa.
- CSS: Phần trang trí của web. Màu sắc, phông chữ và Mô hình Hộp (Box Model).
- Phòng thí nghiệm 1: Thiết lập môi trường chứa và xây dựng trang hồ sơ "Về tôi" tĩnh.
Thực hành với HTML & CSS (Chuyên sâu)
- HTML: Danh sách, liên kết, hình ảnh và biểu mẫu (cần thiết cho tương tác người dùng).
- CSS: Trang trí văn bản và nền. Giới thiệu về Flexbox và Grid cho bố cục hiện đại.
- Thiết kế đáp ứng (Responsive Design): Đảm bảo trang web hiển thị tốt trên cả điện thoại di động và máy tính.
- Phòng thí nghiệm 2: Tinh chỉnh trang tĩnh với kiểu chuyên nghiệp và khả năng thích ứng trên thiết bị di động.
Làm việc với DOM (Mô hình Đối tượng Tài liệu)
- Khái niệm: Hiểu cách mã liên hệ với giao diện trực quan của trang.
- Chọn phần tử: Cách xác định các phần cụ thể trên trang web.
- Biến đổi: Thay đổi nội dung và thuộc tính bằng mã.
- Phòng thí nghiệm 3: Chỉnh sửa các thành phần của trang tĩnh thông qua mã (ví dụ: thay đổi tiêu đề hoặc hình ảnh theo thời gian thực).
Bộ não (JavaScript)
Lập trình với JavaScript (Cơ bản)
- Biến & Kiểu dữ liệu: Lưu trữ thông tin (dấu ngoặc kép, số, đúng/sai).
- Logic: Câu lệnh if/else (đưa ra quyết định).
- Vòng lặp: Lặp lại các hành động một cách hiệu quả.
- Hàm (Functions): Tạo các khối mã có thể tái sử dụng (khái niệm "Công thức").
- Phòng thí nghiệm 4: Tạo máy tính cơ bản hoặc trò chơi logic bằng JavaScript.
Tương tác & Sự kiện
- Nghe sự kiện (Event Listeners): Phản hồi với cú nhấp chuột, phím bấm và tải trang.
- Xử lý biểu mẫu: Xác thực dữ liệu người nhập (ví dụ: kiểm tra xem email có hợp lệ không).
- Biến đổi DOM: Thêm và xóa các phần tử một cách động (ví dụ: danh sách việc cần làm).
- Phòng thí nghiệm 5: Biến máy tính thành ứng dụng web tương tác có phản hồi giao diện người dùng.
Lấy dữ liệu (APIs)
- Khái niệm: Ứng dụng web giao tiếp với các máy chủ khác như thế nào (ví dụ: lấy dữ liệu thời tiết hoặc giá cổ phiếu).
- JSON: Ngôn ngữ trao đổi dữ liệu.
- Lập trình bất đồng bộ (Async Programming): Hiểu logic "Chờ, rồi mới làm" mà không làm đông trình duyệt.
- Phòng thí nghiệm 6: Xây dựng tính năng lấy dữ liệu trực tiếp từ API công khai để hiển thị trên trang.
Công cụ Chuyên nghiệp (Frameworks & Dự án Tổng kết)
Sử dụng các Framework lập trình
- Tại sao dùng framework? (Khái niệm React, Vue hoặc Svelte).
- Thành phần (Components): Xây dựng các mảnh giao diện module, có thể tái sử dụng.
- Quản lý trạng thái (State Management): Theo dõi dữ liệu thay đổi.
- Hệ sinh thái: Hiểu về các gói (packages), phụ thuộc (dependencies) và kiểm soát phiên bản (Git).
- Phòng thí nghiệm 7: Tái cấu trúc một tính năng đơn giản bằng cách tiếp cận dựa trên thành phần.
Dự án Tổng kết: Xây dựng Ứng dụng Web
- Yêu cầu: Người tham dự phải xây dựng một ứng dụng web hoạt động (ví dụ: ứng dụng theo dõi ngân sách, bảng điều khiển sản phẩm hoặc trang portfolio).
- Lập kế hoạch: Xác định "Hồ sơ người dùng" (User Story) và phạm vi kỹ thuật.
- Triển khai: Kết hợp cấu trúc HTML/CSS với logic JavaScript.
- Gỡ lỗi: Cách đọc thông báo lỗi và sửa logic sai.
- Trình bày: Giới thiệu ứng dụng cuối cùng cho nhóm.
Lời kết & Các bước tiếp theo
- Từ vựng kỹ thuật: Bảng tra cứu giúp giao tiếp với kỹ sư (API, Backend, Frontend, Git, Triển khai).
- Hướng dẫn tài nguyên: Nơi học thêm (Tài liệu, StackOverflow, MDN).
- Tích hợp nghề nghiệp: Làm thế nào những kỹ năng này hỗ trợ vai trò Quản lý Sản phẩm và Thiết kế.
- Hỏi đáp và Đánh giá khóa học.
Yêu cầu
- Kỹ năng sử dụng máy tính cơ bản
- Không yêu cầu kinh nghiệm lập trình trước
Đánh giá (3)
Tôi thực sự thích thú khi tìm hiểu về các cuộc tấn công AI và những công cụ sẵn có để bắt đầu thực hành và áp dụng tích cực trong kiểm thử bảo mật. Tôi đã tiếp thu nhiều kiến thức mới mà trước đây tôi chưa có, và khóa học đã đáp ứng những kỳ vọng của tôi. Phần yêu thích nhất của tôi từ buổi huấn luyện là Comet Browser, và tôi rất ấn tượng với những gì nó có thể làm. Chắc chắn tôi sẽ tìm hiểu sâu hơn về điều này. Nhìn chung, đây là một khóa học tuyệt vời và tôi đã rất vui khi được học tất cả về OWASP GenAI Top 10.
Patrick Collins - Optum
Khóa học - OWASP GenAI Security
Dịch thuật bằng máy
Thực hành, bài tập, hỗ trợ và giải đáp trực tiếp.
Jose Paulos - INESC TEC
Khóa học - Tailwind CSS
Dịch thuật bằng máy
Mỗi bài học kỹ thuật đều đi kèm với nhiều bài tập thực hành để củng cố các khái niệm.
Andrei-Calin Bajea
Khóa học - OWASP Top 10 2025
Dịch thuật bằng máy