Sau 5 tháng, bạn có 6 Projects thực chiến và +30 bài tập ứng dụng!
Project 1: Xây dựng website hoàn chỉnh sử dụng HTML, CSS: Easy landing page
Project 2: Xây dựng website hoàn chỉnh sử dụng HTML, CSS with Figma: Portfolio website
Project 3: Xây dựng website hoàn chỉnh sử dụng HTML, CSS, JS: Todo App
Project 4: Xây dựng website hoàn chỉnh sử dụng HTML, CSS, JS, React and Firebase: Shopping Online
Project 5: Xây dựng REST API với NodeJS và MongoDB: Shopping Online API
Project 6: Hackathon- Final Project
Lộ trình chi tiết
TIMELINE | CHAPTER | OUTCOME | PROJECT |
Tuần 1-4 | HTML, CSS: Kiến thức cơ bản đến chuyên sâu về HTML5, CSS3 để có thể tạo Landing Page website. | • Giới thiệu về HTML, CSS và vai trò của nó trong phát triển web
• Hiểu biết về cú pháp và cấu trúc HTML, CSS
• Tạo văn bản, thêm hình ảnh và liên kết đến trang web
• Làm việc với các phần tử danh sách, phần tử biểu mẫu và bảng
• Làm việc với selector để nhắm đến các phần tử HTML
• Áp dụng các thuộc tính tạo kiểu cơ bản như màu sắc, phông chữ và nền,…
• Tạo bố cục bằng CSS sử dụng model box, position, flexbox và lưới
• Làm việc với thiết kế responsive và media query | Project 1: Xây dựng web đơn giản với HTML, CSS
Project 2: Xây dựng web Portfolio với HTML, CSS với Figma |
Tuần 5-8 | FRONT-END: Tất cả về JavaScript ES6 | • Giới thiệu về JavaScript: kiểu dữ liệu, biến, toán tử và cấu trúc điều khiển.
• Hàm JavaScript: cách tạo và gọi hàm, biểu thức hàm và phạm vi hàm.
• Mảng: Các phương thức mảng mới mạnh mẽ trong ES6, chẳng hạn như ,map, reduce, filter và find.
• Đối tượng JavaScript: phương thức đối tượng và khái niệm lập trình hướng đối tượng.
• Mô hình đối tượng tài liệu (DOM): cách thao tác với DOM, tạo, đọc, cập nhật và xóa các phần tử HTML.
• JavaScript không đồng bộ: cách sử dụng Promise, Async/Await và fetch API cho lập trình bất đồng bộ.
• Các khái niệm JavaScript nâng cao: closures, hoisting, prototypal inheritance, và design patterns.
• Tất cả về JavaScript ES6: Arrow function, destructuring, spread operator, optional chaining,… | Project 3: Xây dựng To-do App với HTML, CSS, JavaScript |
Tuần 9-14 | NÂNG CAO FRONT-END: Xây dựng giao diện người dùng với thư viện ReactJS | • Giới thiệu về ReactJS - ReactJS là gì, tại sao lại sử dụng nó và thiết lập môi trường phát triển.
• Thành phần và JSX - Tạo components, hiểu cú pháp JSX và làm việc với các props và state.
• Làm việc với Form và Events - Xử lý các sự kiện, nhập và xác thực biểu mẫu cũng như các thành phần được kiểm soát và không được kiểm soát.
• Định tuyến và Điều hướng - Sử dụng Bộ định tuyến React, tạo liên kết và tuyến đường.
• Tìm hiểu các tính năng mới nhất trong React bao gồm Hooks, Context API, Suspense, React Lazy,...
• <new> Sử dụng Firebase để tạo ứng dụng fullstack. | Project 4: Xây dựng Ứng dụng mua sắm trực tuyến Full-stack với ReactJS và Firebase
|
Tuần 15-19 | BACK-END: NodeJS và MongoDB | • Làm chủ tất cả các công nghệ back-end hiện đại: NodeJS, Express, MongoDB và Mongoose (MongoDB JS driver).
• Xây dựng một ứng dụng thực tế hoàn chỉnh và đẹp mắt từ đầu đến cuối.
• Xây dựng API RESTful nhanh, có thể mở rộng, giàu tính năng (bao gồm bộ lọc, sắp xếp, phân trang,...).
• Tìm hiểu cách Node thực sự hoạt động đằng sau hậu trường: event loop, blocking/non-blocking, luồng, mô-đun, v.v.
• Triển khai CRUD với MongoDB và Mongoose.
• Tìm hiểu sâu về Mongoose (bao gồm tất cả các tính năng nâng cao).
• Cách làm việc với dữ liệu trong cơ sở dữ liệu NoSQL.
• Xác thực và ủy quyền nâng cao (bao gồm đặt lại mật khẩu).
• Triển khai ứng dụng cuối cùng vào thực tế | Project 5: Xây dựng Shopping Online API sử dụng REST API với NodeJS và MongoDB |
Tuần 20 | Hackathon | • Triển khai Hackathon để xây dựng dự án Full-stack từ front-end đến back-end.
• Thuyết trình, trình bày dự án cuối cùng của cá nhân hoặc nhóm.
• Luyện trả lời phỏng vấn trực tiếp với giáo viên giàu kinh nghiệm.
• Các bài học về cấu trúc dữ liệu và giải thuật để tăng khả năng đậu phỏng vấn.
• Hướng dẫn viết CV xin việc công ty IT
• Cấp chứng chỉ và giới thiệu việc làm cho học viên xuất sắc. | Project 6: Dự án Full-stack từ Front-end đến Back-end |