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

NỘI DUNG KHÓA HỌC

1. Module 0: Tổng quan (2h)

Mục tiêu: Hiểu tổng quan về web development, cài đặt môi trường và tạo project đầu tiên

Lý thuyết:

• Tổng quan và lộ trình khoá học Frontend – ReactJS
• Lộ trình trở thành một Frontend Developer.
• Web hoạt động như thế nào? Các khái niệm về giao thức HTTP,  DNS, Hosting, Domain…
• Mô hình Client-Server và cách trình duyệt render website
• Tổng quan về Frontend, Backend và các công nghệ liên quan

Thực hành:

• Cài đặt môi trường: Visual Studio Code, Extensions,…
• Tạo và chạy website HTML đơn giản đầu tiên: CV cá nhân đơn giản bằng HTML,…

2. Module 1: Basic HTML5 and CSS3 (12h)

Mục tiêu: Thành thạo HTML5 và CSS3, xây dựng được giao diện responsive chuyên nghiệp

2.1. Phần 1: HTML5 – Nền tảng của Web(4h)

Kiến thức cơ bản:

• Giới thiệu về Web và HTML:
  • Khái niệm, vai trò của HTML/ CSS/ Javascript
  • Cấu trúc của một trang web
• Cấu trúc tài liệu HTML 5:  
• Các thẻ cơ bản:
• Thẻ ngữ nghĩa (Sematic Tags)
• Bảng: 
• Forms: form, input types (text, email, password, number, date...), textarea, select, button

Thực hành:

• Xây dựng structure cho các loại website khác nhau
• Tạo forms với validation
• Lab 1: Xây dựng trang blog cá nhân với đầy đủ sematic HTML,..

2.2.  Phần 2: CSS3 – Styling & Layout  (8h)

Kiến thức cơ bản:

• Giới thiệu CSS: Vai trò, cú pháp và các các nhúng CSS
• Bộ chọn CSS: Bộ chọn thẻ (Element), Lớp (Class), ID, Bộ chọn nâng cao
• Độ ưu tiên: nguyên tắc áp dụng
• Thộc tính cơ bản:
  • Kiểu chữ (Typography): font-family, font-size, font-weight, line-height, text-align
  • Màu sắc (Colors): hex, rgb, rgba, hsl, gradients
  • Backgrounds: background-color, background-image, background-size
• Box Model: Khái niệm Content, Padding, Margin, Border, thuộc tính width, height.
• Kỹ thuật định vị (Positioning): static, relative, absolut, fixed
• Hiển thị phần tử (Display): block, inline, inline-block và thuộc tính float.

Kiến thức nâng cao:

• Tạo bố cục trang web với flexbox, grid.
• Thiết kế đáp ứng (Responsive Design): Khái niệm và sử dụng Media Queries cơ bản, cách tiếp cận mobile-first.
• CSS Transitions & Animations: transform, transition, @keyframes
• Modern CSS: CSS Variables, calc(), clamp(), aspect-ratio
• Sử dụng framework CSS: Bootstrap 5, TailwindCSS.

3. Module 2: JavaScript ES6 (18h)

Mục tiêu:

• Nắm được tổng quan về JavaScript, vai trò của JavaScript trong phát triển web.
• Hiểu các quy tắc cú pháp cơ bản, phân biệt được các kiểu dữ liệu.
• Sử dụng thành thạo các cấu trúc điều khiển và vòng lặp.
• Hiểu cấu trúc DOM và cách JavaScript tương tác với HTML.
• Thao tác với DOM để thay đổi nội dung, thuộc tính, style.
• Xử lý sự kiện người dùng cơ bản.
• Nắm vững các tính năng mới của ES6 và cách sử dụng chúng.
• Hiểu và áp dụng được các phương thức xử lý mảng.
• Làm việc với Objects và JSON cơ bản.

3.1. Phần 1: Javascript Cơ bản (8h)

Cơ bản:

• Giới thiệu về Javascript và môi trường phát triển
• Biến: var, let, const - scope và hoisting
• Kiểu dữ liệu: primitive types, reference types, type conversion

Các loại toán tử: arithmetic, comparison, logical, ternary

• Câu lệnh điều khiển:
  • Câu lệnh điều kiện: if/else, switch/case
  • Vòng lặp: for, while, do-while, for...in, for...of
• Hàm (Function): Khai báo hàm, biểu thức hàm và kiểu giá trị trả về.
• Mảng (Arrays): phương thức cơ bản thao tác với mảng (push, pop, shift, unshift, indexOf, includes)
• Objects: thuộc tính, phương thức, và từ khóa “this”
• Error Handling: try/catch/finally

DOM trong Javascript:

• DOM là gì?
• HTML DOM là gì?
• Cây cấu trúc DOM
• Cách tương tác với các thẻ HTML: getElementById, querySelector, querySelectorAll,getAttribute, setAttribute, classList, createElement, appendChild, insertBefore,..
• Lấy và thay đổi nội dung, thuộc tính của phần tử: innerHTML, textContent, innerText,..
• Xử lý sự kiện:
  • Event trong Javascript
  • addEventListener(),..
  • Các loại sự kiện: click, change, submit,…
  • preventDefault()
• Form Validation cơ bản
  • Form event: submit, input
  • Validating form inputs
  • Display error messages

• Làm việc với Objects và dữ liệu JSON cơ bản.

3.2. Phần 2: Javascript ES6 (10h)

Kiến thức nâng cao:

• Let, const và Block Scope
• Arrow function và từ khóa “this”
• Template Literals và Destructuring (array, object)
• Spread & Rest Operator
• Thao tác với mảng: map, filter, reduce, sort, slice, await async…
• Thao tác với String: includes, concat, startsWith, endsWith, repeat,..
• Asynchronous JavaScript:
  • Callbacks và callback hell
  • Promises: then, catch, finally
  • Async/Await
  • Fetch API để gọi REST APIs
• Modules: import/export (ES6 modules)
• Classes: constructor, methods, inheritance, extends, super

Optional Chaining (?.) và Nullish Coalescing (??)

4. Module 3: Thiết kế UI/UX (12h)

Mục tiêu:

• Phân biệt rõ ràng giữa UI (User Interface - Giao diện người dùng) và UX (User Experience - Trải nghiệm người dùng) và vai trò của từng phần trong quy trình phát triển sản phẩm kỹ thuật số
• Hiểu được các bước cơ bản để thiết kế một sản phẩm.
• Thành thạo các công cụ cơ bản của một phần mềm thiết kế (ví dụ: Figma) để có thể tạo ra các giao diện đơn giản.

4.1. Phần 1: Kiến thức cơ bản UX/UI (8h)

• 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

4.2. Phần 2: Kiến thức nâng cao (4h):

• Components & Variants: tạo component library reusable
• Design system: Xây dựng thư viện nhất quán
• Auto Layout: responsive design trong Figma
• Constraints: responsive behavior cho frames
• 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.

5. Module 4: ReactJS (48h)

Mục tiêu:

• Hiểu được React là gì, tại sao sử dụng React và các ưu điểm của React.
• Biết cách cài đặt và thiết lập môi trường phát triển React.
• Hiểu cách phân chia giao diện thành các Component, quản lý dữ liệu linh hoạt bằng States và Props.
• Tương tác với API backend để fetch và hiển thị dữ liệu thực tế.
• Sử dụng Hooks, Routing và các thư viện quản lý trạng thái nâng cao (Redux, Recoil) để 
• xử lý logic phức tạp.
• Sử dụng thành thạo các thư viện UI bên thứ ba (MUI, Ant Design) để xây dựng giao diện nhanh và đẹp mắt.

5.1. Phần 1: Kiến thức cơ bản (12h):

Khởi đầu với React:

• Tổng quan về ReactJS, các khái niệm và cài đặt môi trường phát triển.
• Setup môi trường: Create React App,..
• JSX: syntax, expressions, fragments
• Component: class component và funtional component.
• Props: passing data, props validation with PropTypes
• State: useState hook, state updates
• Xử lý sự kiện trong các component.
• Conditional Rendering: if/else, ternary, && operator
• Lists và Keys: rendering lists, key importance
• Forms: controlled components, form handling, validation

5.2. Phần 2: React Hooks & Nâng cao (16h):

Nội dung:

• Làm việc các React hook: useState, useEffect, useContext,…
• React Router: routing, nested routes, dynamic routes, protected routes
• Error Boundaries
• CSS Modules
• Styled Components
• TailwindCSS integration
• CSS-in-JS libraries

5.3. Phần 3: State Management & API Integration (12h)

State Management:

• Props drilling problems
• Context API deep dive
• Redux Toolkit:
  • Store, Actions, Reducers
  • Slices và createSlice
  • Redux DevTools
  • Async logic với createAsyncThunk
• Recoil: atoms, selectors
• Zustand (Giới thiệu)

API Integration:

• Tổng quan về REST APIs
• Axios library: requests, interceptors, error handling
• React Query: data fetching, caching, mutations
• Loading states, error states
• Pagination, infinite scroll

5.4. Phần 4: React Ecosystem & Best Practices (8h)

UI Component Libraries:

• Material-UI (MUI): components, theming, customization
• Ant Design: form handling, table, layout
• Icon libraries: React Icons, Heroicons

Form Libraries:

• React Hook Form: validation, error handling

TypeScript với React:

• TypeScript cơ bản trong React
• Typing props, state, events
• Generic components

6. Module 5: Project (30h)

• Tham gia làm dự án thực tế tại trung tâm phần mềm BKSOFT-BKACAD.
• Ứng dụng các công cụ AI (Github Copilot, ChatGPT, Claude, Cursor, v3.chat...) vào toàn bộ quy trình phát triển dự án Frontend.
• Kỹ năng prompt engineering hiệu quả để có output chất lượng.
• Biết cách chọn và sử dụng đúng AI tool cho từng task cụ thể.
• Kết hợp nhiều AI tools để tối ưu workflow.
• Đánh giá và verify output từ AI một cách critical thinking .
• Customize và fine-tune AI tools theo nhu cầu dự án.