Chương trình với 23 chủ đề
HTML - I - Căn bản
Cài đặt các phần mềm cần thiết: Visual Studio Code & Notepad++.
Mô hình web truyền thống và mô hình front-end, back-end và full-stack developers.
Căn bản về HTML.
- Cấu trúc của 1 file HTML và phần tử trong HTML.
- Các phiên bản HTML và <!DOCTYPE html>.
- Thẻ trong HTML: title, h1... h6, p, span, br.
- Các loại list và table.
- Hiển thị với Unicode trong HTML.
- Thuộc tính của thẻ.
- Thẻ img và a.
- Đường dẫn tương đối và đường dẫn tuyệt đối.
- Block và inline.
So sánh các phiên bản trước HTML5 và sau HTML5.
Thực hành dựng trang HTML với HTML4 và HTML5.
1 3 GiờHTML - II - Nâng cao và HTML5/6
Các tính năng nâng cao.
- HTML Entities: thuận lợi và nhược điểm.
- Sử dụng mã thay thế và một số ký tự đặc biệt thường dùng.
Form và input.
- Form và các phương thức.
- Các loại input cơ bản.
- Submit button.
Các tính năng của HTML5/6.
- Các loại input mới trong HTML5/6.
- Audio và video.
Giới thiệu về frame.
- Giới thiệu và cách sử dụng frame hiệu quả.
- Nhúng youtube clip vào web và ứng dụng quảng cáo.
Thực hành.
2 3 GiờCSS - I - Căn bản
Giới thiệu CSS?
- CSS là gì?
- Vai trò của CSS trong việc thiết kế website.
- Các mở rộng khác của CSS ngoài website.
- Các phiên bản CSS.
Sử dụng CSS
- External CSS, Internal CSS và Inline CSS
- Selector CSS: id, class, tag name, ...
Sắp xếp các block: left, right.
- Nhắc lại block và inline.
Các thuộc tính cơ bản
- Thuộc tính kích thước.
- Thuộc tính màu sắc.
- Mã màu theo hệ thập lục phân và hệ thập phân.
- Thuộc tính font chữ.
- Thuộc tính viền và bo tròn.
- Các kỹ thuật tính toán viền và bo tròn.
Thực hành.
3 3 GiờCSS - II - Nâng cao
CSS nâng cao
- Đơn vị trong CSS.
- Margin và padding (trong và ngoài).
Vị trí các phần tử.
- Tọa độ các phần tử.
- Hệ qui chiếu tương đối và hệ qui chiếu tuyệt đối.
- CSS transformation.
- Tạo hiệu ứng hoạt hình với CSS.
Đa giác với CSS3.
Nâng cao về selector: các mối quan hệ trên dưới và ngang hàng.
4 3 Giờ- Đơn vị trong CSS.
Dự án I - Dựng trang chi tiết sản phẩm
Giới thiệu các tính năng nâng cao của CSS3 và các thuộc tính layout nâng cao: grid, flex.
Thực hành dựng trang giới thiệu sản phẩm (tham khảo trang giới thiệu Calc+).
- Phân tích thành phần của trang.
- Thực hành dựng trang.
5 3 GiờDự án I - Dựng trang chi tiết sản phẩm - Xử lý đa màn hình
Giới thiệu về responsive và xử lý hiển thị trang web trên nhiều kích thước màn hình khác nhau.
- Vì sao phải responsive?
- Các phương pháp hỗ trợ xử lý Responsive.
- Lợi ích và nhược điểm khi sử dụng Responsive.
Xử lý responsive.
- @media và override css.
- Thực hành thiết kế responsive cho trang chi tiết sản phẩm.
6 3 GiờJavaScript - I - Tiếp cận JavaScript
Giới thiệu ngôn ngữ lập trình JavaScript và vai trò JavaScript trong lập trình web.
Nguyên tắc của các ngôn ngữ lập trình hiện đại.
Thuận lợi và nhược điểm của các ngôn ngữ kịch bản như JavaScript.
Giới thiệu NodeJS.
- Giới thiệu NodeJS.
- Cài đặt NodeJS.
- Mối quan hệ giữa JavaScript, trình duyệt web, NodeJS.
- Các ứng dụng khác của NodeJS.
- Chương trình đầu tiên "Hello JavaScript".
- Căn bản 1 dòng code trong JavaScript.
- Thực hành.
Biến trong JavaScript.
- Biến vô hướng: thuận lợi và các bất lợi.
- Thực hành.
Các loại dữ liệu mở rộng.
7 3 GiờJavaScript - II - Điều kiện và vòng lặp
Cấu trúc điều điều kiện.
- Cấu trúc rẽ nhánh if/else.
- Cấu trúc switch/case.
- Thực hành.
Vòng lặp có điều kiện.
- Vòng lặp while.
- Vòng lặp for.
- Thực hành.
8 6 GiờJavaScript - III - Hàm và hàm nặc danh
Hàm trong JavaScript.
- Hàm trong ngôn ngữ JavaScript.
- Sử dụng hàm dựng sẵn và hàm đã xây dựng.
- Thực hành.
Truyền hàm vào 1 hàm khác (Higher order functions).
- Cách thức hiện thực và tính ứng dụng.
- Giới thiệu về lập trình hàm (Functional programming).
- Thực hành.
Hàm nặc danh, cách khởi tạo và tính ứng dụng.
- Thực hành.
9 3 GiờJavaScript - IV - Ứng dụng vào lập trình web
Ứng dụng JavaScript vào lập trình web.
- Mối quan hệ giữa HTML và JavaScript.
- Khai báo hàm JavaScript.
- Internal JavaScript và External JavaScript.
- 1 số hàm tiện ích trong JavaScript với trình duyệt web.
Mô hình DOM.
- Giới thiệu về mô hình DOM.
- Truy cập các phần tử của HTML thông qua JavaScript thông qua tag, id và class.
- Nhận và gán giá trị từ 1 phần tử.
- Thuộc tính và nội dung.
- Xử lý logic.
Thực hành.
10 3 GiờXử lý sự kiện với JavaScript
Mô hình sự kiện và các sự kiện.
Xử lý sự kiện trên các phần tử.
- Sự kiện tự gọi.
- Sự kiện từ người dùng.
Sự kiện chuột.
- Xử lý các sự kiện từ chuột.
Sự kiện từ bàn phím.
- Mã ASCII và bàn phím.
- Sự kiện và mã phím.
11 3 GiờĐịnh dạng trao đổi dữ liệu - XML và JSON
Giới thiệu về định dạng trao đổi dữ liệu.
Nhắc lại kiểu dữ liệu Object (trong JavaScript) và Class (OOP).
Làm quen với cấu trúc JSON.
- Định nghĩa JSON.
- Hướng dẫn sử dụng JSON trong JavaScript.
Thực hành.
12 3 GiờMô hình Front-end vs Back-end
Mô hình Front-end vs Back-end.
- Mô hình Front-end vs Back-end.
- HTTP Request và tham số.
- Webservice.
- Request và Response.
- REST API.
JSON và chuẩn giao tiếp.
- Kiến trúc của JSON.
- Ứng dụng vào giao tiếp Front-end vs Back-end.
Demo và ứng dụng.
13 3 GiờNode Package Module - npm
Làm việc với Node Package Module - npm
- Giới thiệu package.
- Node module.
- Các lệnh npm quan trọng.
- File package.json.
Sử dụng các module thông dụng.
14 3 GiờGiới thiệu và cài đặt React.js
Giới thiệu về front end.
- Front end là gì?
- Front end với web, iOS, Android.
Giới thiệu ứng dụng đa nền tảng.
Hello React.js.
- Cài đặt React.js.
- Tạo dự án React.js và triển khai thử.
Cấu trúc dự án React.js.
- Tư duy Component - Component là gì?
- Thực hành tạo và sử dụng Component.
Life cycle của ứng dụng React Native.
Giới thiệu project mẫu trong khóa học.
15 3 GiờThiết kế giao diện người dùng - Component
Thiết kế giao diện người dùng
- Nhắc lại Component (và HTML).
- Sử dụng các Component căn bản.
- Debug trong React.js.
- Tạo custom Component và sử dụng.
Thực hành các Component cơ bản.
16 6 GiờThiết kế giao diện người dùng - Style
Thiết kế giao diện người dùng
- Nhắc lại CSS (web HTML).
- Giới thiệu Style trong React.js.
- Ứng dụng Style vào React.js.
Thực hành sử dụng Style vào project mẫu.
17 6 GiờQuản lý trạng thái
Quản lý các trang, chuyển trang.
Giới thiệu về State và Prop
- Giới thiệu cơ bản State và Props.
- Giới thiệu React hook và Function Component.
- Thực hành 1 số loại hook và đăng ký 1 số sự kiện React hook.
- Sắp xếp kiến trúc dự án với Next.js.
17 6 GiờDự án II - Trang sản phẩm và giỏ hàng
Tham khảo trang danh sách sản phẩm STDIO Apps và hiện thực trang liệt kê các sản phẩm, phải hỗ trợ responsive.
18 3 GiờDự án II - Trang sản phẩm và giỏ hàng
Kiến thức lưu trữ.
- localStorage
- sessionStorage.
- Hiện thực trang giỏ hàng, nút thêm vào giỏ và các thao tác thêm xóa, cập nhật số lượng sản phẩm.
19 3 GiờDự án II - Trang sản phẩm và giỏ hàng
Xử lý giao diện và các component nâng cao.
- Cuộn ngang danh sách sản phẩm trên các màn hình điện thoại.
- Xử lý thời gian với thư viện Moment.js
20 3 GiờDự án II - Trang sản phẩm và giỏ hàng
Giới thiệu Backend và thực hành tương tác 1 số API giỏ hàng với Postman.
- Sử dụng axios.
- Gửi giỏ hàng từ Frontend lên Backend.
21 3 GiờDự án cuối khóa
Xây dựng project CV.
- Thiết kế website giới thiệu sơ yếu lý lịch CV theo mẫu.
- Hiện thực 1 số hiệu ứng cho CV.
21 6 Giờ
Đối tượng phù hợp
- Người mới, chưa từng biết lập trình trước đó.
- Đã từng lập trình nhưng muốn đảm bảo kiến thức được hệ thống hoàn chỉnh.
- Muốn học lập trình front end 1 cách bài bản.
- Muốn được đào tạo các kiến thức dành cho công việc thực tế.
- Nhân sự ngoài ngành lập trình muốn thay đổi công việc mới.
- Bạn muốn có 1 việc làm liên quan đến web hoặc ngành công nghệ thông tin.
- Bạn không tin tưởng các kiến thức rải rác và chắp vá trên mạng.
- Muốn được sự hỗ trợ kỹ thuật, kinh nghiệm từ giảng viên kể cả sau khóa học.
Mục tiêu đào tạo
- Tạo các trang web front-end đầy đủ, thực tế bằng công nghệ tiên tiến từ đầu.
- Tạo các trang web tĩnh với thuần HTML và CSS.
- Sử dụng NodeJS để học JavaScript từ cơ bản.
- Kỹ thuật lập trình với JavaScript.
- Hiểu được input/output của HTTP Request.
- JSON, XML và RESTful.
- Tạo trang đích đẹp, tương thích nhiều kích thước màn hình (Responsive).
- Triển khai xác thực người dùng.
- Hiểu đầy đủ kiến trúc đằng sau ứng dụng React.js và cách ứng dụng.
- Phát triển giao diện người dùng với React.js.
- Tạo các ứng dụng single-page với React.js (1 trong các frameworks front-end) hiện đại nhất.
- Phát triển ứng dụng web hiện đại, phức tạp, đáp ứng và có thể mở rộng với React.js.
- Cách thức triển khai dự án front-end React.js, đưa vào ứng dụng.
- Tập trung học các kiến thức được sử dụng trong công việc, đáp ứng nhu cầu các công ty.
