KHÓA HỌC ĐÀO TẠO LẬP TRÌNH VIÊN FRONTEND – REACTJS TÍCH HỢP AI

NỘI DUNG KHÓA HỌC

Module 0: Tổng quan (2h)
Kiến thức cơ bản:
-    Tổng quan và lộ trình khoá học Frontend - ReactJS
-    Các khái niệm về giao thức HTTP,  DNS, Hosting, Domain…
-    Mô hình client-server: hiểu rõ vai trò của từng thành phần.
Thực hành:
-    Cài đặt môi trường: GIT, IDE (Visual Studio Code….)
-    Tạo và chạy project đầu tiên.

Module 1: Basic HTML5 and CSS3 (12h)
Kiến thức cơ bản:
-    HTML và phiên bản
-    Cấu trúc tài liệu HTML
-    Các thẻ cơ bản: div, span, p, b, i…
-    Bảng: table, tr, th, td
-    Form và input…
-    Các thẻ HTML5
-    CSS cơ bản: font, màu sắc, kích thước.
-    CSS3
Kiến thức nâng cao:
-    Tạo bố cục trang web với flexbox, grid.
-    Sử dụng framework CSS: Bootstrap 5, TailwindCSS.

Module 2: JavaScript ES6 (14h)
Kiến thức cơ bản:
-    JavaScript cơ bản: biến, biểu thức, toán tử, hàm,  rẽ nhánh, vòng lặp…
-    HTML DOM: tương tác với các thẻ HTML
-    Xử lý sự kiện: click…
-    Làm việc với dữ liệu JSON.
Kiến thức nâng cao:
-    ES6: Arrow function
-    Thao tác với mảng: map, filter, reduce, sort, slice, await async…

Module 3: Thiết kế UI/UX (12h)
Kiến thức cơ bản:
-    Tổng quan UI UX và figma: Phân biệt UI (User Interface) và UX (User Experience), Vai trò của UI/UX trong quy trình phát triển sản phẩm, giới thiệu giao diện và chức năng chính của Figma.
-    Thao tác với công cụ figma: Cách tạo file, trang (pages) và layout cơ bản, Thiết lập kích thước khung vẽ (frames) cho các thiết bị khác nhau (web, mobile), Sử dụng Shape (rectangle, oval, line…) và Pen Tool để dựng khung, Tạo và chỉnh sửa text, màu sắc, gradients, và hiệu ứng (shadows, blur), Quản lý Layers, Groups, làm việc với Components và Styles, Sử dụng Prototype mode để thiết lập luồng điều hướng cơ bản
Kiến thức nâng cao:
-    Design system: Xây dựng thư viện nhất quán
-    Auto layout và responsive design
-    Prototyping nâng cao: Thiết lập interactions phức tạp: overlays, interactive components, nested flows, smart animations tạo chuyển động

Module 4: ReactJS (42h)
Kiến thức cơ bản:
-    Tổng quan về ReactJS, các khái niệm và cài đặt môi trường phát triển.
-    Component: class component và funtional component.
-    Phân biệt states và props.
-    Xử lý sự kiện trong các component.
-    Fetch dữ liệu với thư viện Axios.
Kiến thức nâng cao:
-    Làm việc các React hook: useState, useEffect, useContext
-    Điều hướng routing.
-    Quản lý trạng thái với Redux, Recoil.
-    Sử dụng các component, hook bên thứ ba: MUI, Ant Design …

Module 5: Github copilot for Reactjs developer (12h)
Kiến thức cơ bản:
-    Giới thiệu tổng quan về AI và Github copilot
-    Github copilot for HTML: Tạo layout, tích hợp bootstrap cùng Github copilot
-    Github copilot for Javascript: Tạo mã javascript bằng Github copilot
-    Github copilot for Reactjs: Tạo Reactjs project với hỗ trợ từ Github copilot, Tạo component, Tạo unit test, tạo và chạy code server phục vụ kiểm thử,  hướng dẫn và hỗ trợ gọi API, Tạo tài liệu
Kiến thức nâng cao:
-    Github copilot Agent Mode: Giới thiệu, thực thi một vài tính năng cơ bản, tiếp cận tính năng Custom Instructions để tuân thủ yêu cầu dự án
Thực hành:
-    Tạo một trang web đơn giản với Github copilot

Module 6: Project (30h)
-    Tham gia làm dự án thực tế tại trung tâm phần mềm BKSOFT-BKACAD.