Ư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 Advanced Web Developer Bootcamp

Khóa học Lập trình Web Nâng cao

Khóa học Lập trình Web Nâng cao

Học React 16, Redux, D3, ES2015, Kiểm thử, CSS Flexbox, Hiệu ứng, SVG, AJAX và nhiều hơn nữa!

4.5
(9,398 đánh giá)
79,887 học viên
Giảng viên
Colt Steele
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
79.000đ 1.599.000đ -95%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
34.0 giờ video
405 bài giảng
29 bài quiz
18 bài coding
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 #Node Js #Web Development

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

Xây dựng các ứng dụng web THỰC TẾ bằng công nghệ tiên tiến
Phát triển ứng dụng có khả năng phản hồi bằng các công nghệ CSS hiện đại như flexbox
Tạo API JSON bằng Node, Express và MongoDB
Học thư viện front-end phổ biến nhất React và nắm vững kiến thức nền tảng về state, props và vòng đời component
Sử dụng babel và webpack để biên dịch và đóng gói mã nguồn
Hiểu Virtual DOM là gì và cách React thực hiện quá trình đồng bộ lại (reconciliation)
Tận dụng phương thức vòng đời component với React để gọi AJAX đúng cách
Bảo mật ứng dụng Node, Express, Mongo và React ở cả front-end lẫn back-end bằng bcrypt và JSON Web Tokens
Thêm định tuyến vào ứng dụng single-page bằng thư viện định tuyến phổ biến nhất cho React: React Router
Quản lý State bằng kho lưu trữ tập trung với Redux
Kết nối Redux với ứng dụng React để xây dựng ứng dụng sản xuất có khả năng mở rộng với quản lý state phía client
Chọn và thao tác các phần tử trong DOM bằng D3
Tạo trực quan hóa động bằng D3 và SVG
Sử dụng D3 để xây dựng biểu đồ phân tán, biểu đồ cột, biểu đồ tròn và đồ thị lực
Tạo trực quan hóa bản đồ hấp dẫn với GeoJSON và TopoJSON
Thành thạo cách xử lý mã bất đồng bộ bằng callbacks, promises, generators và async functions
Hiểu cách JavaScript xử lý mã bất đồng bộ thông qua Event Loop với Stack, Heap và Queue
Sử dụng các phương thức mảng nâng cao để xây dựng nền tảng vững chắc về lập trình hàm
Tạo ứng dụng single-page động bằng AJAX
Cấu trúc ứng dụng với các mẫu thiết kế sử dụng closure và module
Giải thích cách Lập trình Hướng đối tượng hoạt động qua hiểu biết thấu đáo về từ khóa this và new
Tái cấu trúc mã bằng call, apply và bind để loại bỏ trùng lặp
Sử dụng jQuery để xây dựng ứng dụng single-page và hiểu các hạn chế khi chỉ dùng jQuery
Tạo phạm vi block với từ khóa let và dùng const để ngăn biến bị khai báo lại
Làm sạch mã bằng arrow functions và thành thạo ràng buộc phương thức mà không cần bind
Sử dụng default parameters, for of loops, rest và spread operator để viết mã ngắn gọn và dễ bảo trì hơn
Tái cấu trúc ứng dụng ES5 lên ES2015
Thành thạo cú pháp class mới và tạo instance methods, class methods
Triển khai kế thừa trong ES2015 bằng extends và super
Tận dụng cấu trúc dữ liệu mới như Maps và Sets để giải quyết vấn đề hiệu quả hơn
Học các tính năng tiên tiến nhất của JavaScript với ES2016, 2017 cũng như các bổ sung thử nghiệm
Giải quyết các bài toán tương tự như trong phỏng vấn nhà phát triển hoặc phỏng vấn qua điện thoại

Yêu cầu

Có kiến thức cơ bản về HTML và CSS
Có hiểu biết nền tảng về JavaScript: cách tạo biến, dùng logic điều kiện, vòng lặp, đối tượng, mảng và hàm
Sẵn sàng xây dựng ứng dụng web thực tế với công nghệ JavaScript mới nhất!

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

Khóa học này dành cho bất kỳ ai muốn tiếp tục tìm hiểu về phát triển web
Rất phù hợp cho người đã nắm vững kiến thức cơ bản, nhưng muốn khám phá các khái niệm và công nghệ nâng cao hơn để thành công với tư cách nhà phát triển

Nội dung khóa học

37 phần • 391 bài giảng
1 Câu chuyện về khóa học này
2 Tổng quan chương trình
3 Lộ trình học tập
4 Giới thiệu nhóm giảng viên
1 Giới thiệu phần
2 Giới thiệu về Hiệu ứng CSS
3 Tại sao hiệu ứng quan trọng
4 Giới thiệu về Pseudoclass
5 Pseudoclass: Hover
6 Pseudoclass: Focus
7 Pseudoclass: Active
8 Bài tập nhanh về Pseudoclass
9 Xây dựng nút có hiệu ứng
10 Giới thiệu về Transform
11 Transform: Translate
12 Transform: Scale() và Transform-Origin
13 Transform: Rotate()
14 Lưu ý về Vendor Prefixes
15 Kiến thức cơ bản về Transitions
16 Transition-Duration và Transition-Property
17 Transition-Timing-Function và Transition-Delay
18 Cách viết tắt Transition
19 Hiệu suất CSS Animation
20 Xây dựng bộ sưu tập ảnh có hiệu ứng
1 Giới thiệu về Keyframes
2 Video làm theo: Hiệu ứng văn bản cầu vồng nhấp nháy
3 Các thuộc tính CSS Animation khác
4 Bài tập: Hiệu ứng mặt trời mọc và lặn
5 LỜI GIẢI bài tập: Hiệu ứng mặt trời mọc và lặn
6 Cách viết tắt CSS Animation
7 Xây dựng biểu tượng tải CSS có hiệu ứng
1 Giới thiệu phần
2 Giới thiệu về Flexbox
3 Sự kỳ diệu của Display: Flex
4 Thuật ngữ quan trọng trong Flexbox
5 Flex-Direction
6 Flex-Wrap
7 Justify-Content
8 Bài tập thanh bên Flexbox
9 Bài tập thanh bên Flexbox: LỜI GIẢI
10 Align-Items
11 Align-Content
12 Video làm theo: Xây dựng thanh điều hướng có khả năng phản hồi
13 Align-Self
14 Order
15 flex-basis
16 flex-grow
17 Flex-Shrink
18 Xây dựng widget Polygon.com
19 Bài tập: Bố cục Holy Grail
20 Bài tập: LỜI GIẢI bố cục Holy Grail
21 Hỗ trợ trình duyệt cho Flexbox
1 Giới thiệu Matt
2 Giới thiệu phần
3 Dự án: Giới thiệu
4 Lời giải dự án: Nav và Header
5 Lời giải dự án: Điểm đến và Tính năng
6 Lời giải dự án: Đánh giá, Liên hệ và Footer
7 Lời giải dự án: Thiết kế đáp ứng
1 Giới thiệu Tim
2 Giới thiệu
3 Hàm Callback
4 Video làm theo: forEach
5 Giới thiệu bài tập findIndex
6 Lời giải findIndex
7 Stack và Heap
8 Stack: Một ví dụ
9 setTimeout và setInterval
10 Lời giải bài tập countDown
11 Event Loop và Queue
12 Kiến thức cơ bản về Promise
13 Chuỗi Promise
1 Giới thiệu về AJAX
2 JSON và XML là gì?
3 Tạo yêu cầu đầu tiên bằng XMLHTTPRequest
4 Quy trình AJAX: Xây dựng ứng dụng ảnh ngẫu nhiên
5 Bài tập Bitcoin Price
6 Lời giải bài tập Bitcoin Price
7 Giới thiệu về Fetch
8 Tùy chọn Fetch
9 Xử lý lỗi Fetch
10 Bài tập Fetch Random User Profile
11 Lời giải bài tập Fetch Random User Profile
12 Vấn đề với Fetch
1 Giới thiệu jQuery AJAX
2 Phương thức $.ajax của jQuery
3 Khám phá mã nguồn jQuery
4 Các phương thức viết tắt của jQuery AJAX
5 Bài tập jQuery Random Cats API
6 LỜI GIẢI bài tập jQuery Random Cats
7 Giới thiệu Axios
8 Xử lý lỗi Axios
9 Bài tập Ron Swanson
10 Lời giải bài tập Ron Swanson
1 Giới thiệu Elie
2 Giới thiệu phần
3 Viết kiểm thử trong trình duyệt
4 Cú pháp Jasmine và Matchers
5 Viết kiểm thử tốt hơn với Hooks
6 Spies
7 Clocks
8 TDD và BDD
9 Các loại kiểm thử khác nhau
1 Giới thiệu phần
2 forEach
3 LỜI GIẢI bài tập: forEach
4 map
5 LỜI GIẢI bài tập: Map
6 Filter
7 LỜI GIẢI bài tập: Filter
8 Some
9 Every
10 LỜI GIẢI bài tập: Some và Every
11 Reduce
12 Reduce Tiếp theo
13 LỜI GIẢI bài tập: Reduce
14 Tổng kết Phương thức mảng
1 Giới thiệu phần
2 Giới thiệu về Closure
3 Sử dụng Closure trong thực tế
4 LỜI GIẢI bài tập: Closure
5 Tổng kết Closure
6 Giới thiệu về Từ khóa 'this'
7 'this' với Hàm và "use strict"
8 Ràng buộc Đối tượng/Ràng buộc ngầm
9 Ràng buộc tường minh
10 Call
11 Apply
12 Bind
13 Bind Tiếp theo
14 LỜI GIẢI bài tập: Call, Apply, Bind
15 Từ khóa 'new' và tổng kết phần
1 Giới thiệu phần
2 Giới thiệu về Lập trình Hướng đối tượng với JavaScript
3 Từ khóa 'new'
4 Tái cấu trúc với Nhiều Constructor
5 Tổng kết Hàm Constructor
6 LỜI GIẢI bài tập: Hàm Constructor
7 Giới thiệu về Prototype
8 Chuỗi Prototype
9 Thêm Phương thức vào Prototype
10 LỜI GIẢI bài tập: Prototype
11 Kế thừa Prototype
12 LỜI GIẢI bài tập: Kế thừa
13 Tổng kết Lập trình Hướng đối tượng
1 Giới thiệu phần
2 Chuẩn bị cho React
3 Xác định kế hoạch API của chúng ta
4 SUPER IMPORTANT: UPDATED C9 INSTALLATION INSTRUCTIONS
5 Installing NodeJS
6 Cloud9 Without A Credit Card Instructions
7 Installing Node Locally
8 Creating Our Initial Express Application
9 Responding With JSON
10 Installing Mongo
11 Defining Our Schema
12 Defining The Index Route
13 Defining The Create Route
14 Defining The Show Route
15 Defining the Update Route
16 Defining the Delete Route
17 Refactoring Our API
1 Introducing Our Single Page App
2 Serving Static Files and Nodemon
3 Adding jQuery and The Starter CSS
4 Writing The Initial AJAX Call
5 Displaying Our Todos Correctly
6 Connecting the Form to our API
7 Making the Delete Button Work
8 Toggling Todo Completion
1 Section Introduction
2 Introduction to ES2015
3 Const
4 Let
5 Template Strings
6 Introduction to Arrow Functions
7 Arrow Functions Continued
8 Exercise SOLUTION: Arrow Functions
9 Default Parameters
10 For...of Loops
11 Rest
12 Spread
13 Exercise SOLUTION: Rest and Spread
14 Object Enhancements
15 Object Destructuring
16 Array Destructuring
17 Exercise SOLUTION: Destructuring
18 ES2015 Part I Recap
1 Section Introduction
2 Introduction to Guess the Password
3 Guess the Password Code Walkthrough
4 Guess the Password Refactor
1 Section Introduction
2 Introduction to the 'class' Keyword
3 Instance Methods
4 Class Methods
5 Class Solutions
6 Inheritance with ES2015
7 Super
8 Exercise SOLUTION: Inheritance and Super
9 ES2015 'class' Keyword Recap
10 Maps
11 Sets
12 Exercise SOLUTION: Maps and Sets
13 Promises
14 Promises Continued
15 ES2015 Promises Assignment
16 Exercise SOLUTION: Promises
17 Generators
18 Object.assign and Array.from
19 Additional Helpful ES2015 Methods
20 Exercise SOLUTION: ES2015 Methods
1 Section Introduction
2 ES2016 Exponentiation Operator and Includes
3 padStart and padEnd
4 Async Functions Introduction
5 Async Functions Continued
6 Coding Exercise - Async Functions Assignment
7 Exercise SOLUTION: Async Functions
8 Object Rest and Spread + Recap
1 Section Introduction
2 An Introduction to D3
3 D3 Selections
4 Selections and Callbacks
5 Event Listeners in D3
6 Exercise: Guess the Password Refactor
7 Solution: Guess the Password Refactor
8 Exercise: Notes App
9 Solution: Notes App
1 Section Introduction
2 Basic Data Joins and Enter Selections
3 Exit Selections and Key Functions
4 The General Update Pattern in D3
5 Exercise: Character Frequencies
6 Solution: Character Frequencies
1 Section Introduction
2 Introduction to SVG
3 Rectangles, Polygons, and Circles in SVG
4 Text Elements in SVG
5 Path Elements in SVG
6 Exercise: SVG Flags
7 Solution: SVG Flags
8 Introduction to SVG and D3
9 Exercise: Character Frequencies Revisited
10 Solution: Character Frequencies Revisited
1 Section Introduction
2 Extrema and Scales
3 Scatterplots
4 Axes and Gridlines
5 Exercise: Scatterplot
6 Solution: Scatterplot
7 Histograms
8 Histograms Continued
9 Exercise: Histograms
10 Solution: Histograms
11 Pie Charts
12 Pie Charts Continued
13 Exercise: Pie Charts
14 Solution: Pie Charts
1 Section Introduction
2 Tooltips
3 Transitions
4 Managing Asynchronous Code with D3
5 Exercise: D3 Odds and Ends
6 Solution: D3 Odds and Ends
7 An Introduction to GeoJSON
8 An Introduction to TopoJSON
9 Map Visualization Example
10 Nodes in Force-Directed Graphs
11 Links in Force-Directed Graphs
12 Dragging Nodes and Alpha Values
13 General Update Pattern with Force-Directed Graphs
1 Project: Introduction and Requirements
2 Project: Example Solution Part 1
3 Project: Example Solution Part 2
1 START HERE FOR REACT
2 Section Introduction
3 How To Get Our React Solution Code
4 Front-end Framework Introduction
5 First React Component
6 JSX
7 JSX With JavaScript
8 Exercise: Random Box
9 Random Box Assignment Solution
10 Multiple React Components
1 Create React App
2 Create React App: Files
3 JavaScript Import Statements
4 Import HobbyList Assignment
5 Import HobbyList Solution
6 Intro to Props
7 Recipe App With Props
8 Recipe App With Props Continued
9 Default Props and Prop Types
10 Recipe App Props Exercise
11 Recipe App Props Solution
12 props.children
1 Section Introduction
2 Intro to State
3 Pure Functions
4 Update Complex State Exercise
5 Update Complex State Solution
6 React Component Architecture
7 setState Can Be Tricky
8 React DevTools
9 Colored Boxes Exercise
10 Colored Boxes Solution
1 Section Introduction
2 The Virtual DOM
3 Events
4 Forms
5 Todo App Exercise
6 Todo App Solution
7 Refs
8 Recipe App With State
9 Recipe App With State - New Recipe Form
10 Recipe App With State - Saving The New Recipe
11 Recipe App With State - Show/Hide Form
12 Recipe App With State - Delete Recipe
13 Memory Game
14 Memory Game Solution Part 1
15 Memory Game Solution Part 2
1 Introduction To Component Lifecycle Methods
2 Component Lifecycle Method Examples
3 Country Flag Guessing App Exercise
4 Country Flag Guessing App Solution
1 Setting Up Our Express/Mongo API
2 Creating Our React App
3 Adding the TodoList Component
4 Loading Initial Data from API
5 Creating the TodoItem Component
6 Thêm component TodoForm
7 Xóa Todo
8 Chuyển đổi trạng thái Todo
9 Tái cấu trúc các lệnh gọi API với hàm bất đồng bộ
1 Giới thiệu phần
2 Đối tượng HTML5 History
3 Giới thiệu về React Router
4 Giới thiệu về React Router (tiếp theo)
1 Giới thiệu phần
2 Giới thiệu về Redux không dùng React
3 React với Redux
4 Tổ chức Redux
1 Redux Intro
2 Redux Counter
3 Redux Todos
4 Redux React Intro
5 Redux React (tiếp theo)
6 Redux React mapDispatchToProps
7 React Router Redux
8 Backend Node cho Todos
9 Full Stack Redux
1 Warbler Intro
2 Giới thiệu về xác thực
3 Bắt đầu với Backend
4 Thêm trình xử lý lỗi
5 Thêm model User
6 User Middleware
7 Lưu mật khẩu đúng cách
8 Ôn tập phần
1 Thêm chức năng đăng nhập
2 Giới thiệu về Messages
3 Tạo một message
4 Thêm middleware loginRequired
5 Thêm middleware ensureCorrectUser
6 Thêm các route messages bổ sung
7 Kiểm tra với HTTPie và ôn tập
1 Giới thiệu Frontend Warbler
2 Reducers - errors và currentUser
3 Thiết lập Redux Store cho Warbler
4 Thêm Navbar
5 Tạo kiểu cho component Navbar
6 Component Warbler Main
7 Tạo kiểu cho component Homepage
8 Warbler Authform Phần 1
9 Warbler Authform Phần 2
10 Warbler Authform Phần 3
11 Ôn tập phần Frontend Warbler
1 Xử lý thông báo lỗi với Redux
2 Chuyển hướng với React Router và Redux
3 Đăng xuất người dùng
4 Thêm JWT vào HTTP Headers
5 Hiển thị Messages
6 Component Message List
7 Higher Order Components cho xác thực
8 Thêm Message mới
9 Xóa Message
10 Hiển thị đúng nút Xóa Message
11 Thêm tạo kiểu và ôn tập phần
12 Triển khai Backend
13 Triển khai Frontend

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

Hi! Welcome to the Advanced Web Developer Bootcamp, the complete course that will help you learn the latest technologies, tools and libraries to become a proficient web developer.  Think of this course as an encyclopedia of all the  knowledge you need to take your developer skills to the next level.

There are quite a few options out there for online training, but we are certain this course is the most comprehensive and frankly the best one out there - here’s why:

  • This course is taught by professional bootcamp instructors. The material you’re going to learn has been taught to hundreds of students in person and hundreds of thousands online.

  • Everything we’ll cover in this course is up-to-date and even anticipates future advancements to prepare you for what is to come. We focus on the most commonly used technologies, libraries and frameworks.

  • This is the only full-stack developer course that covers Advanced CSS, Advanced JavaScript, NodeJS, D3, React and Redux!!

  • We build over 10 projects and have dozens of code challenges with solutions to ensure you understand the material and don’t just watch us talk!

  • You get to meet our wonderful course mascot - Whiskey the dog!

Throughout the course we cover tons of tools and technologies including:

  • React
  • React-Router
  • Redux
  • CSS3 Transitions, Transforms and Animations
  • Testing with Jasmine
  • D3
  • SVG
  • Building charts, force graphs and data visualizations
  • ES2015 keywords, arrow functions, class syntax, and much more
  • ES2016 and ES2017 and cutting edge features to JavaScript
  • Callbacks, Promises, Generators and Async Functions
  • Building Node.js APIs
  • Building Single Page Applications
  • Object Oriented Programming in JavaScript
  • Closures and the keyword 'this'
  • Functional Programming in JavaScript
  • Authentication and Authorization

  • Asynchronous Code with JavaScript

This course is also unique in the way that it is structured and presented. Many online courses are just a long series of "watch as I code" videos. This course is different. I've incorporated everything I learned in my years of teaching to make this course not only more effective but more engaging. The course includes:

  • Lectures

  • Code-Alongs

  • Projects

  • Exercises and Solutions

  • Research Assignments

  • Slides

  • Downloads

  • Readings

If you have any questions, please don't hesitate to contact us. We’ve all been working in the education industry for the past four years and love working with people and helping students learn. Sign up today and see how fun, exciting, and rewarding web development can be!

If you want to take ONE COURSE to learn everything you need to know to be successful as a modern JavaScript web developer, take this course.

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 Node Js
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 😊