Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Đăng nhập
Xem tất cả kết quả
Menu
Đăng nhập Đăng ký miễn phí

The Complete Web Development Bootcamp

Khóa Học Lập Trình Web Toàn Diện

Khóa Học Lập Trình Web Toàn Diện

Khóa Học Thực Hành Phát Triển Web Full Stack: JavaScript, React, Python, Docker, Flask, API, Bootstrap, Git và Postman

4.5
(727 đánh giá)
7,387 học viên
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
79.000đ 499.000đ -84%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
30.5 giờ video
395 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 07/06/2026
#Frontend Development #Javascript #React #Web Development

Bạn sẽ học được gì

Cách tạo ứng dụng web full stack với frontend, backend, cơ sở dữ liệu và chạy tất cả dịch vụ bằng Docker có tính năng tự động tải lại
Cách xây dựng Ứng Dụng Một Trang (SPA) bằng React, sử dụng các Component, state, props và React hooks như useState và useEffect
Kết nối ứng dụng frontend viết bằng React với backend viết bằng Python thông qua các yêu cầu REST API sử dụng gói axios trong React app
Hiểu API là gì, cách hoạt động, các phương thức API và cách thiết kế endpoint API chính xác cho các tài nguyên khác nhau
Sử dụng Python Flask để xây dựng dịch vụ backend API, tạo các endpoint khác nhau với hàm xử lý tương ứng, sử dụng các module Python nội bộ và bên ngoài
Thành thạo quy trình phát triển web full stack với JavaScript, Python, Docker, React, NPM, MongoDB, Postman, Git, GitHub và các công cụ khác

Yêu cầu

Kiến thức cơ bản về phát triển phần mềm
Kỹ năng lập trình cơ bản

Đối tượng phù hợp

Lập trình viên Web
Lập trình viên Frontend
Lập trình viên Backend
Lập trình viên Full Stack

Nội dung khóa học

37 phần • 395 bài giảng
1 Giới thiệu
2 Kết nối nào! Tham gia Cộng Đồng Học Tập
3 ☝️Tải HƯỚNG DẪN CHI TIẾT☝️
4 Tổng quan về File Dự án của Khóa học
5 Kho lưu trữ GitHub của Dự án Khóa học
6 CẤU TRÚC KHÓA HỌC
1 Frontend vs Backend
1 Các phần bổ sung
2 Cài đặt Visual Studio Code
3 Thiết lập Visual Studio Code
4 Tổng quan phiên bản ứng dụng ban đầu
5 Cách tạo ứng dụng React mới
6 Cài đặt Node cùng với NPM và NPX
1 BẮT ĐẦU - Tạo ứng dụng React bằng create-react-app
2 Khởi chạy ứng dụng React
3 Cấu trúc ứng dụng Frontend
4 Cài đặt lại các phụ thuộc npm
5 Tạo và phục vụ bản build tối ưu của ứng dụng Frontend
6 Các bước triển khai ứng dụng Frontend cơ bản
7 Dọn dẹp ứng dụng React mặc định
8 React hoạt động như thế nào và JSX là gì
9 React Functional Components
1 Cài đặt và Cấu hình Git
2 KẾT THÚC - Tạo commit đầu tiên
3 BẮT ĐẦU và KẾT THÚC - Thêm file eslintcache vào gitignore
4 Đăng kho lưu trữ lên GitHub
1 BẮT ĐẦU và KẾT THÚC - Thay đổi Favicon
2 BẮT ĐẦU - Tạo Header component
3 KẾT THÚC - React props là gì
4 BẮT ĐẦU - Kế hoạch tạo Search component
5 Tạo Search component với form nhập liệu
6 Định dạng Search component
7 Gửi form tìm kiếm
8 Search component được kiểm soát
9 KẾT THÚC - Tóm tắt Search Component
10 Tắt tính năng chú thích GitLens blame
1 BẮT ĐẦU - Tạo tài khoản tại Unsplash và đăng ký App mới
2 Thêm file cục bộ chứa Biến Môi trường
3 Cách thực hiện yêu cầu API tới Unsplash và URL là gì
4 KẾT THÚC - Thực hiện yêu cầu API đầu tiên để lấy ảnh ngẫu nhiên
5 Phân tích yêu cầu và phản hồi API
6 BẮT ĐẦU - THỬ THÁCH - Xóa nội dung tìm kiếm
7 KẾT THÚC - GIẢI PHÁP THỬ THÁCH - Xóa nội dung tìm kiếm
1 BẮT ĐẦU - Code formatter là gì
2 Linter là gì
3 Cấu hình xác thực ESLint
4 Cài đặt và bật Prettier ESLint Plugin
5 Điều chỉnh cấu hình Prettier
6 Bật tính năng sửa lỗi ESLint khi Lưu File
7 KẾT THÚC - Thêm script linting NPM
8 BẮT ĐẦU và KẾT THÚC - Sửa tất cả lỗi linting
9 BẮT ĐẦU và KẾT THÚC - Thay đổi tabSize trong VS Code
10 Tóm tắt thiết lập ESLint với Prettier
1 BẮT ĐẦU - Lập kế hoạch các bước tiếp theo để xây dựng ứng dụng frontend
2 Lưu ảnh vào state
3 KẾT THÚC - State trong React được cập nhật bất đồng bộ
4 BẮT ĐẦU - Thêm tiện ích mở rộng React Developer Tools cho Chrome
5 Tạo ImageCard component
6 Thêm props vào ImageCard component
7 Hiển thị tất cả ảnh trong giao diện bằng phương thức map
8 Điều chỉnh bố cục của các thẻ ảnh
9 KẾT THÚC - Thêm chức năng xóa ảnh
1 BẮT ĐẦU - Tạo logo SVG từ văn bản
2 KẾT THÚC - Chỉnh sửa logo SVG
3 BẮT ĐẦU và KẾT THÚC - Thêm Welcome component
4 Tóm tắt ứng dụng frontend cơ bản
5 Xem lại codebase ứng dụng frontend cơ bản
6 BẮT ĐẦU và KẾT THÚC - Cập nhật ứng dụng create-react-app
1 API giải quyết vấn đề gì
2 Giao tiếp Client-server
3 REST API
4 URL là định danh tài nguyên duy nhất
5 Yêu cầu và Phản hồi
6 Phân tích yêu cầu và phản hồi trong ứng dụng Frontend của chúng ta
7 Tổng quan HTTP Methods
8 CRUD Operations
9 HTTP Methods Idempotent
10 HTTP Response Status Codes
11 Các mã trạng thái HTTP Thành công và Chuyển hướng phổ biến nhất
12 Các mã trạng thái Lỗi Client và Server phổ biến nhất
13 Tóm tắt REST API và HTTP methods
1 Tổng quan Dịch vụ Frontend và API
2 Cài đặt Python, Pip và Pipenv trên MacOS
3 Cài đặt Python, Pip và Pipenv trên Windows
4 Các bước triển khai Python Flask API
1 BẮT ĐẦU - Tạo thư mục api và chạy ứng dụng Python cơ bản
2 Tạo Python virtualenv và cài đặt Flask
3 KẾT THÚC - Khám phá Python virtualenv và thay đổi trình thông dịch Python trong VS Code
1 LƯU Ý cho Người dùng Windows
2 BẮT ĐẦU - Ứng dụng Flask đơn giản
3 Câu lệnh import trong Python và __name__
4 Import từ module Python khác và __name__
5 Decorators trong Python
6 KẾT THÚC - Khởi chạy ứng dụng Flask bên trong module
7 Khởi chạy nhất quán các module python trên Mac và Windows
1 BẮT ĐẦU - Tạo endpoint API new-image
2 Kiểm tra endpoint API new-image bằng Postman
3 Thực hiện yêu cầu API tới Unsplash API
4 Hoàn thiện và kiểm tra yêu cầu API tới Unsplash API
1 Trích xuất UNSPLASH_KEY vào file env
2 KẾT THÚC - Xác minh việc sử dụng biến môi trường từ file
3 BẮT ĐẦU và KẾT THÚC - Bật chế độ Debug trong ứng dụng Flask
1 BẮT ĐẦU - Thay đổi API trong ứng dụng frontend React
2 Thử nghiệm ứng dụng Frontend với Flask API
1 CORS là gì
2 So sánh phản hồi từ Flask API và Unsplash API
3 KẾT THÚC - Bật CORS trong ứng dụng Flask
4 BẮT ĐẦU - Cài đặt và bật linter Pylint và formatter Black
5 KẾT THÚC - Bật định dạng khi lưu và sửa tất cả lỗi trong ứng dụng Python
6 Tóm tắt API cơ bản
1 Đã đến lúc lưu dữ liệu ảnh vào cơ sở dữ liệu
2 Cấu trúc ứng dụng với cơ sở dữ liệu
3 Các bước triển khai để lưu dữ liệu ảnh trong cơ sở dữ liệu
4 Tất cả endpoint API trong giai đoạn triển khai hiện tại
1 Cài đặt Docker và chạy hello-world bằng Docker
2 BẮT ĐẦU - Tạo Dockerfile cho dịch vụ Python API
3 Cách tạo file requirements.txt đúng cách
4 Build Docker image cho dịch vụ API
5 Chạy container API dựa trên Docker image đã build
6 Phân tích container API Docker từ bên trong
7 KẾT THÚC - Tóm tắt Docker image cho dịch vụ API
1 BẮT ĐẦU - Tạo Dockerfile cho ứng dụng frontend
2 Build Docker image cho ứng dụng frontend
3 KẾT THÚC - Chạy Docker container cho dịch vụ frontend
4 Khám phá container frontend từ bên trong
5 Tại sao bạn cần có thư mục node_modules và thư mục python venv cục bộ
6 Chạy cả container frontend và api ở chế độ nền
1 BẮT ĐẦU - Tạo file docker-compose cơ bản
2 Khởi chạy cả hai container bằng docker-compose
3 KẾT THÚC - Cách vận hành container bằng docker-compose
4 BẮT ĐẦU - Tạo ánh xạ volumes cho dịch vụ frontend
5 Sửa lỗi đồng bộ volumes trong container React
6 Bật ánh xạ volumes cho dịch vụ api
7 KẾT THÚC - Bật tự động khởi động lại và Tóm tắt docker-compose
1 Tại sao chúng ta cần các dịch vụ mongo và mongo-express
2 Tổng quan Docker image chính thức của mongo và mongo-express
3 BẮT ĐẦU - Thêm dịch vụ mongo và mongo-express vào file docker-compose
4 Khởi chạy tất cả dịch vụ bao gồm mongo và mongo-express bằng docker-compose
5 Tổng quan Docker Desktop
6 Sử dụng MongoDB shell và giao diện mongo-express GUI
1 Dữ liệu MongoDB hiện bị xóa sau khi khởi động lại docker-compose
2 Cấu hình volume dữ liệu liên tục cho container mongo
3 Xác minh bộ nhớ MongoDB liên tục bằng volume
4 KẾT THÚC - Tóm tắt thiết lập mongo và mongo-express
5 Các container docker-compose giao tiếp với nhau như thế nào
6 Khám phá mạng giữa các container Docker
1 Kế hoạch tích hợp MongoDB và Dịch vụ Flask API
2 BẮT ĐẦU - Cài đặt pymongo
3 Tạo instance của MongoClient
4 Thêm chức năng chèn tài liệu vào MongoDB bởi dịch vụ Python API
5 Build lại Docker image cho dịch vụ api
6 KẾT THÚC - Tóm tắt kiểm tra kết nối Pymongo và mongo
7 BẮT ĐẦU - API endpoint mới để đọc và tạo ảnh trong cơ sở dữ liệu
8 Thêm endpoint images và xử lý yêu cầu GET
9 Xử lý yêu cầu POST tới endpoint images
10 Kiểm tra phương thức GET và POST trong API images
11 Sửa lỗi trong API images
12 KẾT THÚC - Hoàn thiện với việc kiểm tra API images sau khi sửa lỗi
13 Tóm tắt endpoint API images
1 Tổng quan triển khai lưu và lấy ảnh trong frontend
2 BẮT ĐẦU - Cài đặt Axios trong ứng dụng frontend và rebuild image frontend
3 Bắt đầu thay thế fetch bằng Axios
4 KẾT THÚC - Tiếp tục thay thế fetch bằng Axios
5 BẮT ĐẦU - Thêm một số hình ảnh vào cơ sở dữ liệu Mongo bằng Postman
6 Lấy hình ảnh đã lưu khi ứng dụng React tải
7 KẾT THÚC - Tìm hiểu cách hoạt động của useEffect
8 BẮT ĐẦU và KẾT THÚC - Giải thích lỗi ESLint và mở rộng cấu hình ESLint
9 BẮT ĐẦU - Lưu hình ảnh vào cơ sở dữ liệu từ ứng dụng frontend
10 KẾT THÚC - Ẩn nút Lưu cho hình ảnh đã lưu
11 Tổng kết phần Lưu hình ảnh vào cơ sở dữ liệu
1 Kế hoạch cho phần cải thiện
2 Cách xử lý việc xóa hình ảnh
3 BẮT ĐẦU - Thử thách: Tạo API endpoint xóa hình ảnh
4 Giải pháp: API endpoint xóa hình ảnh
5 KẾT THÚC - Xử lý lỗi cho API endpoint xóa hình ảnh
6 BẮT ĐẦU - Thử thách: Gửi yêu cầu xóa hình ảnh từ frontend
7 KẾT THÚC - Giải pháp: Gửi yêu cầu xóa hình ảnh từ frontend
8 BẮT ĐẦU - Thử thách: Thêm Spinner
9 Giải pháp: Thêm Spinner
10 KẾT THÚC - Hoàn thiện với giải pháp Spinner
11 BẮT ĐẦU - Thử thách: Thông tin tác giả hình ảnh
12 KẾT THÚC - Giải pháp: Thông tin tác giả hình ảnh
13 BẮT ĐẦU - Thử thách: Thông báo Toast
14 Giải pháp: Thông báo Toast
15 KẾT THÚC - Hoàn thiện với giải pháp thông báo Toast
16 Tổng kết phần Thử thách cải thiện
1 Chào mừng đến với Khóa học Cấp tốc
1 Shell vs Terminal
2 Giao diện Dòng lệnh
3 Thư mục người dùng và root
4 Thư mục hiện tại và thư mục cha
5 Di chuyển giữa các thư mục
6 Liệt kê file
7 Tạo và xóa file, thư mục
8 File thực thi
9 Nhiều tab
1 Cài đặt VS Code
2 Làm quen với Giao diện người dùng VS Code
3 Mở dự án có sẵn trong VS Code
4 Chỉnh sửa file và di chuyển giữa các file
5 Tạo và xóa file, thư mục mới
6 Thiết lập nhanh và Chủ đề
7 Thay đổi chủ đề biểu tượng
8 Hỗ trợ Ngôn ngữ lập trình
9 Thực thi lệnh trong VS Code
10 Terminal tích hợp
11 Tiện ích mở rộng
12 Chỉnh sửa Cài đặt người dùng
13 Chỉnh sửa Cài đặt workspace
14 Sân chơi tương tác
15 Đoạn mã mẫu
16 Emmet
17 Phím tắt trong VS Code
18 Tổng kết VS Code
1 Tổng quan Git và GitHub
2 Cài đặt Git
3 Khởi tạo Git Repository mới
4 Các loại đối tượng Git
5 Hash của đối tượng Git
6 Thêm thay đổi vào Staging Area
7 Cấu hình tên và email tác giả Git
8 Commit thay đổi
9 Khám phá lịch sử commit
10 Lệnh Git cơ bản
11 Checkout commit và branch
12 Trạng thái theo dõi file trong Git
13 Stage và Commit thay đổi bằng một lệnh
14 Branch và merge branch
15 Thực hành merge branch
16 Khám phá cây commit bằng tùy chọn đồ thị
17 Tổng quan GitHub và dịch vụ lưu trữ repository
18 Tạo remote repository trên GitHub
19 Push từ local repository lên remote
20 Commit trên GitHub và pull về local repository
21 Khám phá và đọc đối tượng Git
22 Đọc nội dung file HEAD
23 Tổng kết Khóa học cấp tốc Git
1 Tổng quan Khóa học cấp tốc JavaScript
2 Tạo dự án khóa học và khởi động Live Server
3 Khai báo biến bằng let và const
4 Quy tắc đặt tên trong JavaScript
5 Thêm chú thích
6 Kiểu dữ liệu nguyên thủy và toán tử typeof
7 Toán tử cộng và chuyển đổi kiểu
8 Toán tử trong JavaScript là gì
9 Biểu thức JavaScript
10 Toán tử so sánh
11 Toán tử logic
12 Giá trị falsy
13 Tiếp tục với toán tử logic
14 Đánh giá ngắn mạch trong toán tử AND và OR
15 Toán tử ba ngôi
16 Tạo và sửa đổi đối tượng
17 Đối tượng là kiểu tham chiếu trong JavaScript
18 Ký hiệu ngoặc vuông, key và value của đối tượng
19 Mảng và chứng minh mảng là đối tượng
20 Thêm phần tử vào mảng
21 Phương thức prototype và xóa phần tử khỏi mảng
22 Hàm
23 Phạm vi hàm và biến
24 Tham số hàm
25 Giá trị mặc định cho tham số và thao tác trong hàm
26 Biểu thức hàm mũi tên
27 Tùy chọn cú pháp trong hàm mũi tên
28 Hàm callback
29 Thứ tự thực hiện thao tác trong JavaScript
30 Phương thức trong đối tượng
31 Biến thể cú pháp phương thức
32 Thuộc tính vs Phương thức trong đối tượng
33 Destructuring mảng
34 Destructuring đối tượng
35 Destructuring đối tượng của tham số hàm
36 Destructuring tham số hàm và giá trị mặc định
37 Template String Literals
38 Câu lệnh if và if else
1 Tổng quan Khóa học cấp tốc NPM và Cài đặt NPM
2 Khởi tạo NPM trong dự án mới
3 Cập nhật NPM
4 Tổng quan file package
5 Chạy NPM Scripts
6 Cài đặt dependency NPM đầu tiên
7 Tổng quan thư mục node_modules
8 NPM cũng cài đặt các dependency khác
9 Phiên bản gói NPM
10 Semver - Phiên bản Major, Minor và Patch
11 Tạo và chạy ứng dụng Node.js cơ bản
12 Tạo NPM scripts tùy chỉnh
13 Tổng kết dự án Node.js
14 Giới hạn cập nhật gói bằng dấu ngã và dấu mũ
15 Cách semver ảnh hưởng đến quá trình cài đặt gói NPM
16 Khởi tạo ứng dụng React bằng create-react-app
17 Tổng quan ứng dụng React
18 Chạy các NPM scripts khác nhau trong ứng dụng React
19 Tạo dự án VUE.js trên codesandbox
20 Development Dependencies
21 Tổng kết tính năng chính của NPM
22 Tổng kết Khóa học cấp tốc NPM
1 Tổng quan Khóa học cấp tốc React
2 Làm quen với ứng dụng React và JSX
3 Chèn phần tử HTML vào JSX
4 Định kiểu phần tử JSX
5 Functional Components trong React
6 Chèn mã JavaScript vào JSX
7 Tạo React Component mới
8 Sử dụng React Components trong Components khác
9 Props của Component trong React
10 Destructuring Component props
11 Sử dụng Component props trong JSX
12 Tái sử dụng cùng một React Component
13 Sử dụng Template String Literal làm giá trị của Component prop
14 Thử dùng biến thông thường cho thay đổi state
15 Phải dùng React state thay vì biến thông thường
16 Giới thiệu React hook useState để quản lý state
17 Thay đổi Component State qua hook
18 Parent và child components được render lại khi state thay đổi
19 Tổng kết React state và props
20 Tổng kết và Thử thách Khóa học cấp tốc React
1 Tổng quan Khóa học cấp tốc Python
2 Hello từ Python
3 Kiểu dữ liệu cơ bản
4 Chuyển đổi giữa các kiểu
5 Giá trị falsy
6 Quy tắc đặt tên cho biến và hằng số
7 Biến và Kiểu động
8 Kiểu cơ bản được sao chép theo giá trị
9 Tăng và giảm biến
10 Danh sách (Lists)
11 Tuple
12 Từ điển (Dictionaries)
13 Sao chép theo tham chiếu
14 Tập hợp (Sets)
15 Tổng kết kiểu dữ liệu container
16 Cài đặt và cấu hình Code Runner trong VS Code
17 Hàm
18 Đối số theo vị trí
19 Đối số từ khóa (được đặt tên)
20 Gom tất cả đối số vào tuple
21 Lặp qua giá trị kiểu container bằng vòng lặp for in
22 Kwargs của hàm
23 Mô tả hàm
24 Toán tử so sánh
25 Toán tử logic AND
26 Đánh giá ngắn mạch
27 Toán tử logic OR
28 Toán tử logic NOT
29 Chuỗi toán tử và độ ưu tiên
30 Câu lệnh điều kiện if
31 Định dạng chuỗi
32 Xử lý ngoại lệ bằng try except
33 Module Python
1 Tổng quan về Docker
2 Cài đặt Docker Desktop hoặc Docker Engine
3 Máy ảo vs Container Docker
4 Kiến trúc Máy ảo
5 Cách tôi sử dụng Máy ảo
6 Kiến trúc Container Docker
7 Cách Docker chạy trên các Hệ điều hành khác nhau
8 Tiến trình và tài nguyên Container
9 Tổng quan các Thành phần Docker
10 Docker Client
11 Docker Server
12 Docker Host
13 Docker Image
14 Docker Container
15 Docker Repository
16 Docker Registry
17 Tổng kết các Thành phần Docker
18 Lệnh Docker vs Lệnh Quản lý
19 Các lệnh thay thế
20 Lệnh cơ bản cho Container và Image
21 Dọn dẹp cài đặt Docker
22 Tải Image từ Docker Hub
23 Docker Image là gì
24 Tạo Container mới từ Image
25 CMD trong Docker Image là gì
26 Docker Container là gì
27 Ánh xạ cổng là gì
28 Bật ánh xạ cổng cho container NGINX
29 Biến môi trường cho container
30 Volume và ánh xạ volume
31 Bật ánh xạ volume cho container NGINX
32 Chạy ứng dụng bên trong container
33 Dockerfile là gì
34 Tạo Dockerfile
35 Khởi chạy container dựa trên image tùy chỉnh
36 Thử kết nối container Python và Mongo
37 Gắn container vào mạng bridge tùy chỉnh
38 Docker Compose và YAML
39 Khởi chạy dịch vụ bằng Docker Compose
40 Ghi dữ liệu vào cơ sở dữ liệu
41 Bật Ánh xạ Cổng trong Docker Compose
42 Sử dụng Volume trong Docker Compose
43 Tổng kết Khóa học Cấp tốc Docker
44 Đăng tải file dự án khóa học lên GitHub
1 Bài giảng bổ sung

Giới thiệu khóa học

This is the React and Python Flask Full Stack Web Development Bootcamp. It is a practical course where you will start building real application from the first lecture. Application will consist of the frontend and backend parts. The frontend will be built using JavaScript React. The backend API will be built using Python Flask.

The practical full stack web development bootcamp includes: JavaScript, React, Python, Flask, API, Git and VS Code

During the creation of the frontend app you will perform the following practical tasks:

  1. Initialize a React app using create-react-app

  2. Create different React Components

  3. Use useEffect and useState React hooks

  4. Adjust favicon.ico in the frontend app

  5. Create and insert an svg logo

  6. Making API request to the Unsplash API

  7. Using React props and state

While making an API app you will perform the following practical tasks:

  1. Create a Python virtual environment using pipenv

  2. Install and use Python packages such as Flask, dotenv and Requests

  3. Creating Flask routes

  4. Making external API calls from the Flask app

  5. Accepting requests from the clients

You will also learn how to use following applications:

  1. Visual Studio Code

  2. Git and GitHub

  3. Postman

With this course you will get lifetime-long access to more than 100 lectures and tens of practical exercises. After the course you will become a full stack web developer with practical knowledge about JavaScript React and Python Flask.

You will also get 30-days money-back guarantee. No questions asked!

Don't wait and join the course now!

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Frontend Development
Hiển thị tất cả khoá học Javascript
Hiển thị tất cả khoá học React
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊