BEST

[Code Camp] Khóa học Frontend 'Hoàn hảo' được tạo ra tại Bootcamp

Name: [Code Camp] Khóa học Frontend 'Hoàn hảo' được tạo ra tại Bootcamp
Price: 396000 KRW
Rating: 5 (15 reviews)

Đây là chương trình giảng dạy frontend hoàn hảo của bootcamp 'thực sự' đã đào tạo hàng trăm lập trình viên. Chỉ với một khóa học này, bạn có thể phát triển đến trình độ junior developer trong thực tế và sẽ có được khả năng ứng dụng cũng như kiến thức về tech stack frontend. [Code Camp] đã chuẩn bị để bất kỳ ai cũng có thể xây dựng sự nghiệp bất kể xuất thân xã hội, kinh tế hay giáo trình học vấn 😊

(5.0) 15 đánh giá

463 học viên

Độ khó Nhập môn

Thời gian Không giới hạn

React

Next.js

GraphQL

React Native

Hybrid App

React

Next.js

GraphQL

React Native

Hybrid App

Bạn sẽ nhận được điều này sau khi học.

Chuẩn bị cho khóa học nâng cao với [CSS&Javascript] thân thiện
Sử dụng công nghệ mới nhất cho [Web Frontend]
Phát triển Frontend cho Ứng dụng Hybrid nhằm nâng cao năng lực thực tế
Hai danh mục đầu tư mini, hai danh mục đầu tư thực tế
Hiểu hoàn hảo về chu trình phát triển tổng thể

'Khóa học Frontend hoàn hảo
được tạo ra từ bootcamp 'thực thụ'

"Tôi không biết gì về lập trình cả.. Liệu mình có thể xin việc làm developer được không?" Hãy gạt bỏ những lo lắng đó ngay đi.
Vì khóa học này bắt đầu từ những bài giảng nền tảng vững chắc để ngay cả người mới hoàn toàn cũng có thể phát triển đến trình độ developer thực tế!

'Khóa học Frontend cô đọng' được hơn 2,000 học viên lựa chọn cả online và offline
Đã được cập nhật mạnh mẽ hơn và quay trở lại với tên gọi 'Khóa học Frontend hoàn hảo'😀

Hoàn thành portfolio của bạn
bằng code do chính tay bạn viết.

Trong 'Frontend Hoàn Hảo', chương trình học được xây dựng để bạn có thể hoàn thành dự án ở mỗi khóa học, giúp bạn tập trung phát triển. Với chương trình học theo từng bước mà ai cũng có thể hiểu được, khi bạn làm theo bài giảng và tạo ra các dự án thực tế, không chỉ cảm giác thành tựu mà cả kỹ năng của bạn cũng sẽ được nâng cao phải không?

Công nghệ cốt lõi của Frontend
Tại sao chúng ta nên sử dụng React.js và Next.js?

Next.js là framework của thư viện React. Khác với React, về cơ bản Next.js thực hiện Server-Side Rendering (SSR) nên tốt cho tối ưu hóa công cụ tìm kiếm (SEO, Search Engine Optimization). Ngoài ra, thông qua pre-rendering, nó cho phép lấy trước trang đã được render dữ liệu, do đó cũng có lợi về mặt trải nghiệm người dùng.

Ngoài ra, Next.js cung cấp routing dựa trên trang, tối ưu hóa hình ảnh, built-in-css để cải thiện hiệu suất dự án và tạo môi trường thuận lợi cho các nhà phát triển, giúp bạn có thể phát triển hiệu quả với hiệu suất cao 😊

Cuối cùng, giờ đây là thời đại ứng dụng hybrid!
Dựa trên React và Next, bạn có thể phát triển ứng dụng hybrid một cách thuận tiện và hiệu quả hơn bằng cách sử dụng React.Native và Expo, đồng thời xây dựng dịch vụ trên Android và iOS.

Hơn nữa, chỉ với một khóa học Full-stack
có thể nắm được nhiều công nghệ như vậy cùng một lúc!

Trong khóa học này, chúng ta sẽ học thông qua dự án không chỉ React và Next.js, mà còn sử dụng nhiều công nghệ chính như Typescript, GraphQL và nhiều hơn nữa. Bạn sẽ nắm vững cách sử dụng các ngôn ngữ được kết nối hữu cơ với nhau để triển khai một tính năng, và tự nhiên hiểu được nhiều công nghệ khác nhau.

Bởi vì trong thực tế công việc, bạn phải biết sử dụng linh hoạt nhiều ngôn ngữ và công nghệ khác nhau để đạt hiệu quả tối ưu!

*version: Đây là phiên bản stack chính được sử dụng trong khóa học. (Vui lòng tham khảo khi cần thiết!)

-"next": "14.2.13",
-"react": "^18",
-"react-dom": "^18",
-"typescript": "^5"
-"@apollo/client": "^3.11.8",
-"graphql": "^16.9.0",
-"react-hook-form": "^7.53.1",
-"zod": "^3.23.8",
-"zustand": "^5.0.0",
-"tailwindcss": "^3.4.1",

Bạn không cần hiểu về 'Version' và các công nghệ này cũng không sao. Mình sẽ giải thích tỉ mỉ và dễ hiểu trong khóa học 😊

💡 Vui lòng kiểm tra cấu hình máy tính.

· Mac OS không phụ thuộc vào cấu hình.  
· Nếu sử dụng Window OS, cần cài đặt git-bash. 
 - Vui lòng tham khảo Tài liệu học tập > Thiết lập môi trường.  
 - Intel Core i5 thế hệ 9 trở lên / AMD RYZEN 5 thế hệ 2 trở lên 

- Khuyến nghị RAM 16GB trở lên

💡Hãy lập thời gian biểu học tập để học đều đặn và kiên trì.
💡Vui lòng tạo tài khoản 'Notion' - công cụ cộng tác để nhận tài liệu học tập.
💡Tài liệu học tập cần thiết cho khóa học sẽ được cung cấp qua Notion (link).
※ Bản quyền tài liệu học tập thuộc về Code Camp. Nghiêm cấm sao chép · phân phối · sử dụng trái phép.

Hỏi: Tôi có thể học khóa này mà không cần bất kỳ kiến thức nào không?

Vâng. Không sao cả nếu bạn hoàn toàn không biết gì về lập trình. Để bạn có thể hiểu sâu và rộng hơn, chúng tôi cung cấp khóa học cơ bản nhất 'Bắt đầu với Precamp' và khóa học trung cấp 'Khóa học Master CSS&JS' để chuẩn bị cho bootcamp.

Câu hỏi: Nếu đã có kiến thức cơ bản thì nên bắt đầu học từ đâu?

Nếu bạn chỉ hiểu HTML, CSS, Javascript cơ bản thì tôi khuyên bạn nên bắt đầu từ 'Khóa học CSS&JS Master'. Nếu CSS và Javascript của bạn đã vững vàng nhờ các khóa đào tạo do chính phủ tài trợ hoặc các khóa học trực tuyến khác thì bạn có thể bắt đầu ngay từ 'Web Frontend Bootcamp'.

Câu hỏi: Có cách nào để học khóa học bootcamp phát triển web frontend một cách hiệu quả không?

Hãy học từng phần một! Trung bình mỗi phần được chia thành 3~5 chủ đề nhỏ. Vì đây là khóa học có hệ thống, tôi khuyên bạn nên lập lịch học tập và học đều đặn!
Nếu có bài tập học tập, hãy hoàn thành bài tập nhé! Bài tập học tập được chia thành các phần có bài tập và không có bài tập. Nếu bạn làm bài tập học tập trước khi làm bài tập portfolio thì sẽ rất hữu ích đấy!
Vui lòng thực hiện bài tập bắt buộc (bài tập portfolio)! Các bài tập bắt buộc theo từng phần được cung cấp dựa trên nội dung của phần đó là điều bạn nhất định phải làm để tạo portfolio! Tuy nhiên, mã tham khảo chỉ được cung cấp đến giữa chừng thôi! Hãy nhớ rằng sau đó bạn phải có khả năng tự viết toàn bộ mã thì mới có thể sử dụng làm portfolio thực sự.

Hỏi: Chương trình giảng dạy theo bậc thang là gì?

Chương trình giảng dạy của Frontend hoàn hảo có cấu trúc bài giảng liên tục nối tiếp nhau!
Ví dụ, để học [Section 26-02 Refresh Token], bạn cần sao chép code đã viết ở [Section 23-07] để tiếp tục bài học. Tức là bạn phải đã học [Section 23-07] để viết code, và cũng phải ôn tập để hiểu code đó là gì, đúng không?

Đừng lo lắng nếu bạn muốn bỏ qua một section cụ thể nào đó để học section mình quan tâm! Code bài giảng của giảng viên được cung cấp để bạn có thể tải xuống riêng! Tuy nhiên, nếu đó không phải là code bạn tự viết qua bài học mà là code đã tải xuống, thì bạn nhất định phải hiểu code đó thì mới có thể theo kịp bài học được nhé!

Q. Tôi có thắc mắc trong quá trình học.

Vui lòng để lại câu hỏi trong cộng đồng. Chúng tôi sẽ trả lời thỏa đáng trong thời gian sớm nhất😁

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

Bất kỳ ai muốn phát triển đúng đắn với chương trình học chuyên nghiệp
Bất kỳ ai cảm thấy thiếu sót từ các khóa học được tài trợ bởi chính phủ hoặc các khóa học khác
Bất kỳ ai muốn học lập trình một cách có hệ thống với đủ bài tập thực hành
# Nhà phát triển Junior mà Senior cần
Sinh viên chuẩn bị việc làm muốn xây dựng portfolio phù hợp với xu hướng

Cần biết trước khi bắt đầu?

Niềm đam mê và ý chí về lập trình💪🏻

Xin chào
Đây là codecamp

Xác minh Inflearn

15,869

Học viên

502

Đánh giá

232

Trả lời

4.8

Xếp hạng

Các khóa học

"Try anything, Try everything!"

Code Camp mang trong mình mục tiêu thay đổi tương lai của ngành phát triển bằng cách đào tạo nên những nhà phát triển tài năng. Chúng tôi đã có mặt tại Inflearn để mang đến cơ hội chuyển đổi nghề nghiệp cho bất kỳ ai, bất kể nền tảng xã hội, kinh tế hay giáo dục. Hãy cùng Code Camp thử thách bản thân để bứt phá trong sự nghiệp!

Thêm

Đồng giảng viên

Chương trình giảng dạy

Tất cả

444 bài giảng ∙ (162giờ 6phút)

Tài liệu khóa học:

Tài liệu bài giảng

Phần 1. [Nhập môn] Bắt đầu với Freecamp

36 bài giảng ∙ (9giờ 1phút)

1. 👉 Phần 01 : Hiểu về dịch vụ ứng dụng web & Cài đặt chương trình
2. [01-01] Ứng dụng web là gì?
03:21
3. [01-02] Cài đặt chương trình (VS code, Extension)
07:53
4. 👉 Phần 02 : Hiểu về HTML và Technology Stack
5. [02-01] HTML là 'lệnh' đã được thỏa thuận.
11:30
6. [02-02] Cốt lõi của HTML
42:25
7. [02-03] Hiểu về Technology Stack
06:14
8. 👉 Phần 03 : Cơ bản về CSS và thực hành Cyworld phần 1
9. [03-01] Học CSS
25:28
10. [03-02] Căn chỉnh CSS
20:43
11. [03-03] Tạo Cyworld phần 1
43:24
12. 👉 Phần 04 : Cơ bản về Javascript và thực hành Cyworld phần 2
13. [04-01] Hiểu về ngôn ngữ web 'Javascript'
02:40
14. [04-02] Biến và hằng số
17:07
15. [04-03] Mảng
24:30
16. [04-04] Đối tượng
20:40
17. [04-05] Tạo Cyworld phần 2
39:42
18. 👉 Phần 05 : Thực hành Javascript thực tế và thực hành Cyworld phần 3
19. [05-01] Kiểu dữ liệu và toán tử
17:29
20. [05-02] Câu lệnh điều kiện
19:53
21. [05-03] Vòng lặp
22:18
22. [05-04] Đối tượng toán học
06:43
23. [05-05] DOM
10:41
24. [05-06] Tạo Cyworld phần 3
27:30
25. 👉 Phần 06 : Ứng dụng Javascript và thực hành Cyworld phần 4
26. [06-01] Hàm số
09:13
27. [06-02] Cách viết hàm
14:20
28. [06-03] Hàm tích hợp sẵn
24:08
29. [06-04] Tạo Cyworld phần 4
23:30
30. 👉 Phần 07 : Phát hiện thay đổi sự kiện Javascript và thực hành Cyworld phần 5
31. [07-01] Ôn tập hàm tích hợp
10:59
32. [07-02] Phát hiện thay đổi sự kiện
16:04
33. [07-03] Tạo Cyworld phần 5
43:24
34. 👉 Phần 08 : Bài tập Final và trồng cỏ Github
35. [08-01] Bài tập cuối kỳ
07:55
36. [08-02] Git/Github
22:01

Phần 2. [Sơ cấp·Trung cấp] CSS&JS Master

134 bài giảng ∙ (30giờ 49phút)

37. CSS&Javascript Master OT
05:35
38. 👉 Phần 01
39. [CSS 01-1-1] Khoảng trắng - Giới thiệu CSS và thiết lập khoảng trắng
27:53
40. [CSS 01-1-2] Khoảng trắng - Box Sizing
08:00
41. [CSS 01-1-3] Khoảng trắng - Margin Collapse
09:38
42. [CSS 01-2-1] Căn chỉnh - Căn chỉnh item
12:09
43. [CSS 01-2-2] Căn chỉnh - Đưa các item tràn xuống dòng
12:18
44. [CSS 01-2-3] Căn chỉnh - Lý do tại sao flexbox không hoạt động theo chiều dọc
12:44
45. [JS 01-1-1] Biến và hàm - Lưu trữ dữ liệu đa dạng
26:55
46. [JS 01-1-2] Biến và hàm - Biến và việc ghép nối chuỗi
11:14
47. [JS 01-1-3] Biến và hàm - Hàm và phạm vi
33:37
48. [JS 01-2-1] Sử dụng biến và hàm - Hoisting
12:50
49. [JS 01-2-2] Sử dụng biến và hàm - Vấn đề phát sinh từ hoisting và TDZ
18:52
50. [JS 01-2-3] Sử dụng biến và hàm - DOM
30:39
51. 👉 Phần 02
52. [CSS 02-1-1] Biến đổi và hoạt ảnh - Transition
11:40
53. [CSS 02-1-2] Biến đổi và hoạt ảnh - Transform
14:43
54. [CSS 02-1-3] Biến đổi và hoạt ảnh - Hoạt ảnh
11:29
55. [CSS 02-2-1] Ứng dụng Animation - Toast
13:17
56. [CSS 02-2-2] Ứng dụng Animation - Loading
09:19
57. [CSS 02-2-3] Ứng dụng Animation - Skeleton
11:58
58. [JS 02-1-1] Chức năng trình duyệt - Storage
21:55
59. [JS 02-1-2] Chức năng trình duyệt - Storage và lưu trữ JSON
15:17
60. [JS 02-1-3] Chức năng trình duyệt - Định tuyến
18:46
61. [JS 02-2-1] Câu lệnh điều kiện và vòng lặp - Lọc điều kiện
26:21
62. [JS 02-2-2] Câu lệnh điều kiện và vòng lặp - Lặp qua các phần tử
01:06:16
63. [JS 02-2-3] Câu lệnh điều kiện và vòng lặp - Nâng cao về lặp qua các phần tử
34:21
64. 👉 Phần 03
65. [CSS 03-1-1] Position - Vị trí tuyệt đối
09:20
66. [CSS 03-1-2] Position - Vị trí tương đối
08:19
67. [CSS 03-1-3] Position - Vị trí trên màn hình
07:05
68. [CSS 03-2-1] Cuộn - Tạo cuộn
17:24
69. [CSS 03-2-2] Cuộn - Cố định header khi cuộn
06:28
70. [CSS 03-2-3] Cuộn - Làm mờ nền header khi cuộn
04:38
71. [JS 03-1-1] Cuộn - Cuộn
17:26
72. [JS 03-1-2] Cuộn - Cuộn và thanh địa chỉ
11:44
73. [JS 03-1-3] Cuộn trang - Event Listener và phát hiện cuộn trang
19:42
74. [JS 03-2-1] Event Bubbling - 1
18:36
75. [JS 03-2-2] Event Bubbling - 2
13:55
76. [JS 03-2-3] Event Bubbling - Event Capturing
12:04
77. 👉 Phần 04
78. [CSS 04-1-1] Thiết kế responsive - Thiết kế responsive
10:00
79. [CSS 04-1-2] Thiết kế responsive - Media query
18:19
80. [CSS 04-1-3] Thiết kế responsive - Nâng cao khả năng bảo trì với rem
12:48
81. [CSS 04-2-1] Kết hợp responsive và grid - Căn chỉnh lưới
15:36
82. [CSS 04-2-2] Kết hợp responsive và grid - So sánh flexbox và grid
13:10
83. [CSS 04-2-3] Kết hợp responsive và grid - Hỗn hợp flexbox và grid
11:48
84. [JS 04-1-1] Phát hiện thiết bị - Chưa áp dụng phát hiện kích thước thiết bị
22:26
85. [JS 04-1-2] Phát hiện thiết bị - Áp dụng phát hiện kích thước thiết bị
12:33
86. [JS 04-1-3] Phát hiện thiết bị - Phát hiện cuộn động thiết bị %
09:28
87. [JS 04-2-1] Phát hiện thiết bị di động - Phát hiện thiết bị di động
09:41
88. [JS 04-2-2] Phát hiện thiết bị di động - Pinch zoom in/out trên mobile
13:30
89. [JS 04-2-3] Phát hiện thiết bị di động - Bàn phím ảo trên di động
11:03
90. 👉 Phần 05
91. [CSS 05-1-1] Ngữ cảnh xếp chồng và Z-Index - z-index
09:20
92. [CSS 05-1-2] Ngữ cảnh xếp chồng và Z-Index - Ngữ cảnh xếp chồng
17:42
93. [CSS 05-1-3] Ngữ cảnh xếp chồng và Z-Index - Refactoring
20:32
94. [CSS 05-2-1] Modal và Modal lồng nhau - Tạo nền Modal
09:05
95. [CSS 05-2-2] Modal và Modal lồng nhau - Tạo các item modal
16:00
96. [CSS 05-2-3] Modal và Modal lồng nhau - Tạo Modal lồng nhau
16:43
97. [JS 05-1-1] Phát hiện bàn phím - Phát hiện bàn phím
25:53
98. [JS 05-1-2] Phát hiện bàn phím - Bàn phím và ô nhập liệu
08:50
99. [JS 05-1-3] Phát hiện bàn phím - Khái niệm về form và chức năng bàn phím được tích hợp trong form
13:37
100. [JS 05-2-1] API trình duyệt - API và Web API
12:56
101. [JS 05-2-2] API Trình duyệt - Navigator
31:00
102. [JS 05-2-3] API trình duyệt - Timer
23:30
103. 👉 Phần 06
104. [CSS 06-1-1] Căn chỉnh hình ảnh và tỷ lệ - Thay đổi căn chỉnh hình ảnh
08:09
105. [CSS 06-1-2] Căn chỉnh hình ảnh và tỷ lệ - Thay đổi tỷ lệ hình ảnh
09:38
106. [CSS 06-1-3] Căn chỉnh hình ảnh và tỷ lệ - Thay đổi đồng thời căn chỉnh hình ảnh và tỷ lệ
08:59
107. [CSS 06-2-1] Hiệu ứng chuyển trang - Hiệu ứng bay vào
12:49
108. [CSS 06-2-2] Hiệu ứng chuyển trang - Hiệu ứng bay và xoay trở về
10:02
109. [CSS 06-2-3] Hoạt ảnh chuyển trang - Hoạt ảnh kết hợp trang trước và trang sau
16:31
110. [JS 06-1-1] Open API - Câu
18:33
111. [JS 06-1-2] Open API - Hình ảnh
15:23
112. [JS 06-1-3] Open API - Ứng dụng hình ảnh
10:23
113. [JS 06-2-1] Di chuyển menu - Sao chép trang để di chuyển menu
15:23
114. [JS 06-2-2] Di chuyển menu - iframe để di chuyển menu
15:32
115. [JS 06-2-3] Di chuyển menu - Component để di chuyển menu
12:25
116. 👉 Phần 07
117. [CSS 07-1-1] UI nâng cao - thay đổi màu accent
07:59
118. [CSS 07-1-2] UI Nâng cao - Toggle Tùy chỉnh
23:24
119. [CSS 07-1-3] UI nâng cao - Dropdown tùy chỉnh
41:30
120. [CSS 07-2-1] Chế độ tối - Chế độ tối
10:41
121. [CSS 07-2-2] Chế độ tối - Chế độ tối và các thẻ đa dạng
08:11
122. [CSS 07-2-3] Chế độ tối - Chế độ tối và biến toàn cục CSS
11:36
123. [JS 07-1-1] Tìm kiếm và Debouncing - Tìm kiếm
14:23
124. [JS 07-1-2] Tìm kiếm và Debouncing - Debouncing
13:05
125. [JS 07-1-3] Tìm kiếm và Debouncing - Debouncing và API
11:41
126. [JS 07-2-1] Cuộn vô hạn và Throttling - Cuộn vô hạn
20:26
127. [JS 07-2-2] Cuộn vô hạn và Throttling - Throttling
20:57
128. [JS 07-2-3] Cuộn vô hạn và Throttling - Throttling và API
09:25
129. 👉 Phần 08
130. [CSS 08-1-1] Lịch - Lịch tùy chỉnh - Vùng nhấp chuột
10:56
131. [CSS 08-1-2] Lịch - Lịch tùy chỉnh - Placeholder
15:18
132. [CSS 08-1-3] Lịch - Lựa chọn và xác thực
09:50
133. [CSS 08-2-1] Gradient - Linear Gradient
14:06
134. [CSS 08-2-2] Gradient - Gradient hình tròn
06:03
135. [CSS 08-2-3] Gradient - Text Gradient
12:26
136. [JS 08-1-1] Số trang - Phân trang
16:48
137. [JS 08-1-2] Số trang phân trang - Số trang trước/tiếp theo
13:06
138. [JS 08-1-3] Số trang phân trang - Số trang cuối cùng
21:31
139. [JS 08-2-1] Danh sách phân trang - Ví dụ danh sách trang được nhấp
12:25
140. [JS 08-2-2] Danh sách phân trang - Danh sách trang được nhấp
13:05
141. [JS 08-2-3] Danh sách phân trang - Hiển thị trang được nhấp đang hoạt động
14:21
142. 👉 Phần 09
143. [CSS 09-1-1] Cross-browsing - Lập trình HTML, CSS trong Notepad
11:59
144. [CSS 09-1-2] Cross-browsing - Cross-browsing
19:58
145. [CSS 09-1-3] Cross-browsing - Phiên bản trình duyệt và CAN-I-USE, MDN
22:16
146. [CSS 09-2-1] Font - Font
08:03
147. [CSS 09-2-2] Font - Font và Loading
22:25
148. [CSS 09-2-3] Font - Font và Cross Browsing
10:58
149. [JS 09-1-1] Cross-browsing - Lập trình HTML, CSS trong Notepad
10:57
150. [JS 09-1-2] Cross-browsing - Vấn đề Cross-browsing
14:33
151. [JS 09-1-3] Cross-browsing - Phiên bản trình duyệt và CAN-I-USE, MDN
23:38
152. [JS 09-2-1] Tiêu chuẩn web và khả năng tiếp cận - Tối ưu hóa công cụ tìm kiếm (SEO)
17:42
153. [JS 09-2-2] Tiêu chuẩn web và khả năng tiếp cận - SEO và tiêu chuẩn web
07:30
154. [JS 09-2-3] Tiêu chuẩn web và khả năng tiếp cận - SEO và khả năng tiếp cận web
10:05
155. 👉 Phần 10
156. [CSS 10-1-1] Thư viện - Bootstrap
10:31
157. [CSS 10-1-2] Thư viện - Thiết kế Material
05:21
158. [CSS 10-1-3] Thư viện - Tailwind CSS
16:12
159. [CSS 10-2-1] Xu hướng và định hướng - Giai đoạn 1
27:03
160. [CSS 10-2-2] Xu hướng và định hướng - Giai đoạn 2
14:40
161. [CSS 10-2-3] Xu hướng và định hướng - Giai đoạn 3
12:07
162. [JS 10-1-1] Thư viện - Cuộn toàn trang
09:26
163. [JS 10-1-2] Thư viện - Trình soạn thảo web
16:14
164. [JS 10-1-3] Thư viện - Kéo và Thả
08:47
165. [JS 10-2-1] Xu hướng và định hướng - Bước 1
16:46
166. [JS 10-2-2] Xu hướng và định hướng - Giai đoạn 2
19:25
167. [JS 10-2-3] Xu hướng và định hướng - Giai đoạn 3
16:00
168. 🔥 Tải xuống slide bài giảng CSS&Javascript Master🔥
169. 🔥 Tải xuống mã nguồn khóa học CSS&Javascript Master 🔥
170. 🔥 Tải xuống mã tham khảo bài tập CSS&Javascript Master🔥

Phần 3. [Trung cấp] Bootcamp Phát triển Web Frontend

213 bài giảng ∙ (97giờ 28phút)

171. 👉 Phần 01
172. [01-01] React và Component
52:38
173. [01-02] props và state
41:09
174. [01-03] Lý do sử dụng React (Thay đổi đồng thời)
34:57
175. [01-04] Xác thực state (xác thực đăng ký thành viên)
47:02
176. [01-05] import và export module
18:08
177. 👉 Phần 02
178. [02-01] Tạo React CRA trong một lần
33:16
179. [02-02] React Boilerplate
32:23
180. [02-03] Điều hướng trang React
46:26
181. [02-04] Nguyên lý của setState
52:08
182. [02-05] Những thứ biểu thị sự giả dối (False)
14:26
183. 👉 Phần 03
184. [03-01] TypeScript
41:40
185. [03-02] Kiểu dữ liệu cơ bản
54:21
186. [03-03] Linter và Formatter
43:22
187. 👉 Phần 04
188. [04-01] Thế giới Next
46:49
189. [04-02] Chuyển đến trang Next
21:10
190. [04-03] CSS-Module
37:32
191. [04-04] Next 내장 기능 (phông chữ, hình ảnh)
40:23
192. 👉 Phần 05
193. [05-01] Lý thuyết truyền thông dữ liệu
50:24
194. [05-02] Thực hành truyền thông dữ liệu
01:25:13
195. 👉 Phần 06
196. [06-01] Đồng bộ/Bất đồng bộ
36:35
197. [06-02] Thiết lập GraphQL
12:24
198. [06-03] Đăng bài viết và giải quyết lỗi mạng
31:21
199. [06-04] Thực hành đăng bài viết
54:00
200. 👉 Phần 07
201. [07-01] Định tuyến tĩnh
15:57
202. [07-02] Cơ bản về xem bài viết
48:40
203. [07-03] Luyện tập xem bài viết
49:58
204. 👉 Phần 08
205. [08-01] Vòng lặp map
26:01
206. [08-02] Lưu ý khi sử dụng map
47:28
207. [08-03] Destructuring Assignment và Custom Hook
01:04:19
208. 👉 Phần 09
209. [09-01] Chỉnh sửa bài viết
39:36
210. [09-02] Chỉnh sửa bài đăng nâng cao
01:08:41
211. [09-03] Chỉnh sửa bài đăng trong thực tế
32:23
212. [09-04] Tái cấu trúc thư mục cho chức năng chỉnh sửa bài viết
01:19:53
213. [09-05] Bổ sung loại chỉnh sửa bài đăng
28:27
214. 👉 Phần 10
215. [10-01] Loại API
37:41
216. 👉 Phần 11
217. [11-01] Truyền tải sự kiện và Bubbling
20:36
218. [11-02] Truyền bá sự kiện và ngắt
57:34
219. 👉 Phần 12
220. [12-01] Thư viện và Framework
01:03:07
221. [12-02] Thực hành UI Framework - Đánh giá sao
35:14
222. [12-03] Thực hành UI Framework - Carousel
26:09
223. [12-04] Thư viện - Modal mã bưu điện
56:01
224. [12-05] Tái cấu trúc (prev state)
27:53
225. [12-06] Thư viện (TypeScript)
04:28
226. [12-07] Refactoring an toàn
18:36
227. 👉 Phần 13
228. [13-01] trẻ em
36:38
229. [13-02] children TypeScript
12:37
230. [13-03] Bố cục
38:41
231. [13-04] Ẩn layout
15:28
232. [13-05] Tổng hợp và thiết lập component
10:30
233. 👉 Phần 14
234. [14-01] Cơ bản về Phân trang
41:50
235. [14-02] Phân trang trang trước/tiếp theo/cuối cùng
46:26
236. [14-03] Refactoring (nâng state lên trên)
01:04:20
237. 👉 Phần 15
238. [15-01] Toán tử spread và sao chép dữ liệu
46:29
239. [15-02] Ứng dụng thực tế sao chép dữ liệu
43:36
240. [15-03] el và TypeScript
12:00
241. [15-04] Cuộn vô hạn
26:07
242. [15-05] Toán tử spread và refactoring
36:46
243. [15-06] Toán tử spread và xóa dữ liệu
09:22
244. 👉 Phần 16
245. [16-01] Class Component và this
01:06:41
246. [16-02] Vòng đời của Component
17:59
247. [16-03] Vòng đời component và useEffect
31:55
248. [16-04] useEffect và open-API
20:13
249. 👉 Phần 01
250. [17-01] CORS và PROXY server
25:04
251. [17-02] Cấu trúc Web
30:55
252. [17-03] Backend và DB
01:04:50
253. [17-04] Máy chủ và cổng
27:47
254. [17-05] API Backend
38:35
255. [17-06] Tích hợp API Backend và DB
32:16
256. [17-07] Firebase(BaaS)
39:57
257. 👉 Phần 18
258. [18-01] Quá trình lưu trữ hình ảnh
22:34
259. [18-02] Tải lên hình ảnh
45:50
260. [18-03] useRef và nút hình ảnh
12:32
261. [18-04] Xác thực và đăng ký hình ảnh
33:14
262. [18-05] Đăng bài viết kèm theo hình ảnh
27:35
263. 👉 Phần 19
264. [19-01] Tìm kiếm
33:04
265. [19-02] Debouncing từ khóa tìm kiếm
28:57
266. [19-03] Tô màu từ khóa tìm kiếm
19:10
267. [19-04] Từ khóa tìm kiếm typescript
10:06
268. 👉 Phần 20
269. [20-01] callback / promise / async-await
01:17:28
270. [20-02] Các trường hợp sử dụng callback và bản chất của el, prev
22:14
271. [20-03] Thực thể GraphQL
37:20
272. [20-04] Nguyên lý hoạt động của promise
22:19
273. [20-05] Tạo fetch của riêng mình bằng promise
13:48
274. 👉 Phần 21
275. [21-01] GlobalState (Cache dữ liệu máy chủ và fetchPolicy)
46:06
276. [21-02] Global State (Cache dữ liệu server và update)
16:14
277. [21-03] GlobalState (Cache dữ liệu cục bộ)
25:46
278. 👉 Phần 22
279. [22-01] Đăng nhập
39:29
280. [22-02] Thực hành JWT token
25:14
281. [22-03] Đăng ký thành viên và mã hóa
13:21
282. [22-04] Thực hành đăng nhập
43:15
283. [22-05] Token đăng nhập và làm mới
45:48
284. [22-06] Đăng nhập và kiểm tra token
08:40
285. 👉 Phần 23
286. [23-01] Closure và HOF
26:49
287. [23-02] HOF
23:41
288. [23-03] HOC
31:21
289. [23-04] Kiểu Generic
35:32
290. [23-05] Generic và HOF/HOC
24:28
291. 👉 Phần 24
292. [24-01] Thư viện Form
33:04
293. [24-02] Thư viện xác thực
30:24
294. [24-03] Utility Types
29:09
295. [24-04] Áp dụng Utility Types
33:11
296. 👉 Phần 25
297. [25-01] Component chung
33:18
298. [25-02] Component chung và Base component
35:31
299. [25-03] Component chung và Generic type
23:42
300. [25-04] Thành phần chung và chuyên sâu về kiểu Generic
29:23
301. [25-05] Hiểu về phiên bản thư viện
10:37
302. [25-06] Phát hành npm component chung
49:30
303. [25-07] Triển khai tổ chức npm cho component chung
17:46
304. 👉 Phần 26
305. [26-01] Gia hạn đăng nhập
31:34
306. [26-02] Refresh Token
01:15:28
307. [26-03] Refresh Token và làm mới
41:15
308. [26-04] Promise liên tiếp
19:09
309. 👉 Phần 27
310. [27-01] Quy trình thanh toán
22:23
311. [27-02] PortOne
48:08
312. 👉 Phần 28
313. [28-01] Ngày/Giờ và Trình duyệt
15:40
314. [28-02] Ngày/Giờ và Thực thi Chức năng
04:46
315. [28-03] Ngày/Giờ và Event Loop
19:34
316. [28-04] Microqueue và Microqueue
25:17
317. [28-05] Nguyên lý của microtask queue và await
42:37
318. 👉 Phần 29
319. Bản đồ
29:45
320. [29-02] Bản đồ và SPA
32:29
321. [29-03] Bản đồ và thư viện
05:12
322. 👉 Phần 30
323. [30-01] Trình soạn thảo web và thư viện form
30:16
324. [30-02] Trình soạn thảo web và gửi biểu mẫu
29:33
325. [30-03] Trình soạn thảo web và XSS
30:55
326. [30-04] OWASP Top 10
08:57
327. [30-05] Hydration
11:57
328. [30-06] Hydration Nâng cao
38:41
329. 👉 Phần 31
330. [31-01] Memoization
39:22
331. [31-02] Ứng dụng Memoization
23:13
332. [31-03] Memoization và map
20:36
333. [31-04] Trình duyệt Rendering
44:03
334. [31-05] Cải thiện hiệu suất xem trước hình ảnh
28:26
335. [31-06] Phương thức hình ảnh mới và đăng ký bài viết
16:10
336. [31-07] Tải lên đa tệp và Promise.all
24:33
337. [31-08] Cải thiện hiệu suất tải lên nhiều hình ảnh
31:52
338. [31-09] Cải thiện hiệu suất refetch
41:47
339. [31-10] Cải thiện hiệu suất bookmark/thích/đăng ký
34:06
340. [31-11] Cải thiện hiệu suất truy vấn dữ liệu
25:43
341. [31-12] Cải thiện hiệu suất truy vấn hình ảnh
18:30
342. [31-13] Cải thiện hiệu suất truy vấn tệp
36:00
343. [31-14] Cải thiện hiệu suất Windowing và Infinite Scroll
46:12
344. [31-15] Tổng hợp tối ưu hóa hiệu suất Frontend
12:00
345. 👉 Phần 32
346. [32-01] Bản chất của thanh địa chỉ trình duyệt
31:50
347. [32-02] Open Graph
31:08
348. [32-03] Dynamic Open Graph
01:01:48
349. [32-04] RSC và fetch
34:32
350. [32-05] RSC và Hydration
29:57
351. [32-06] RCC cha và RSC con
14:48
352. [32-07] Tổng hợp RCC và RSC
23:00
353. 👉 Phần 33
354. [33-01] Tổng hợp RCC/RSC để tái cấu trúc form
53:22
355. [33-02] RSC và hướng phát triển của Form hiện đại
25:19
356. [33-03] RSC và hướng phát triển web hiện đại
11:09
357. [33-04] Shallow routing cho việc refactoring tìm kiếm
51:32
358. [33-05] Định tuyến song song (parallel routing) để tái cấu trúc modal
28:04
359. [33-06] Fragment để tái cấu trúc GraphQL
45:42
360. 👉 Phần 34
361. [34-01] Máy chủ proxy backend
35:17
362. 👉 Phần 35
363. [35-01] Mã kiểm thử
35:08
364. [35-02] Kiểm thử UI
23:07
365. [35-03] Kiểm thử chức năng
14:18
366. [35-04] Kiểm thử mô phỏng API
01:08:06
367. [35-05] Kiểm thử E2E
29:33
368. [35-06] Những hiểu lầm về Test Code và TDD
03:11
369. 👉 Phần 36
370. [36-01] Triển khai
40:38
371. [36-02] Triển khai trang web tĩnh
31:34
372. [36-03] Kết nối tên miền
36:42
373. [36-04] Mạng và Khắc phục sự cố
29:24
374. [36-05] SSL và HTTPS
48:38
375. [36-06] Triển khai trang động
01:09:32
376. [36-07] Truy cập tên miền trang động
15:35
377. [36-08] Kết nối Load Balancer với trang động
48:42
378. [36-09] Wireshark và API
08:40
379. [36-10] Docker
01:14:42
380. [36-11] Docker và Port Forwarding
17:25
381. [36-12] Cải thiện hiệu suất Docker build
18:31
382. 🔥 Tải xuống mã nguồn khóa học Web Front-end Bootcamp🔥
383. 🔥 Tải xuống mã tham khảo bài tập Web Front-end Bootcamp 🔥

Phần 4. [Trung cấp·Cao cấp] Bootcamp Ứng dụng Hybrid

61 bài giảng ∙ (24giờ 46phút)

Ngày đăng: 17/12/2024

Cập nhật lần cuối: 13/05/2025

Đánh giá

Tất cả

15 đánh giá

5.0

15 đánh giá

arnold4778
Đánh giá 5
∙
Đánh giá trung bình 5.0
11/03/2026
5
50% đã tham gia
Tôi vẫn đang theo dõi rất kỹ! Tôi đã hoàn thành được 50% khóa học rồi, tôi sẽ cố gắng chinh phục cho đến cuối cùng.
starmagic22066311
Đánh giá 21
∙
Đánh giá trung bình 4.8
06/05/2025
5
30% đã tham gia
다른 강의보다 훨씬 tỉ mỉ chi tiết hơn nhiều nên em đã có thể theo kịp rất tốt ạ!!! Em sẽ cố gắng theo hết các bài giảng còn lại ạ!!!
saintjoker040059
Đánh giá 6
∙
Đánh giá trung bình 4.5
01/11/2025
5
60% đã tham gia
wltjd20268146
Đánh giá 2
∙
Đánh giá trung bình 5.0
07/02/2026
5
60% đã tham gia
jolo
Đánh giá 4
∙
Đánh giá trung bình 5.0
07/11/2025
5
30% đã tham gia

Khóa học khác của codecamp

Hãy khám phá các khóa học khác của giảng viên!

[Code Camp] Javascript ấm áp

codecamp

Có nhiều ngôn ngữ khác... tại sao phải là JavaScript? JavaScript là ngôn ngữ được sử dụng rộng rãi nhất trên thế giới và ngay cả những người không chuyên cũng có thể học nó một cách nhanh chóng và nó có cấu trúc dễ hiểu. Hơn nữa, các công ty nổi tiếng như Google, PayPal và Amazon cũng đang sử dụng nó! Tôi có cần phải suy nghĩ thêm nữa không?

Nhập môn

JavaScript

[Code Camp] Javascript ấm áp

codecamp

Ứng dụng Hybrid với Expo Framework giúp tăng lương cho nhà phát triển web

codecamp

Đây là khóa học giúp bạn phát triển ứng dụng di động có thể cung cấp dịch vụ trên Android và IOS bằng cách tận dụng phát triển web.

Cơ bản

React, Next.js, expo

Ứng dụng Hybrid với Expo Framework giúp tăng lương cho nhà phát triển web

codecamp

[VOD] Hoàn thành trong 6 tuần! Lập trình Vibe cô đặc cho thực tế phát triển (Cursor AI, Figma)

codecamp

Hãy bỏ qua những dịch vụ đơn giản có thể tạo ra bằng vibe coding trong 10 phút! Bạn có thể học vibe coding ứng dụng thực tế 'thật sự'. Hãy tạo ra dịch vụ tinh vi ở mức độ dịch vụ thực tế theo đúng kế hoạch và thiết kế bằng Cursor AI NCOP. No Code, Only Prompt

Trung cấp trở lên

React, Next.js, cursor

[VOD] Hoàn thành trong 6 tuần! Lập trình Vibe cô đặc cho thực tế phát triển (Cursor AI, Figma)

codecamp

[CSS&JS Master] - Tạo nhật ký ghi chép cảm xúc theo phong cách hiện đại

codecamp

Bạn có thể học CSS và Javascript thực tế mới nhất một cách thú vị khi thực hiện dự án.

Nhập môn

HTML/CSS, JavaScript, vanilla-javascript

[CSS&JS Master] - Tạo nhật ký ghi chép cảm xúc theo phong cách hiện đại

codecamp

[Code Camp] Lý thuyết + thực hành về thuật toán Javascript dành cho người mới bắt đầu

codecamp

Những thuật toán có vẻ rất khó... Ngay cả những sinh viên không quen với toán học cũng có thể hoàn thành những kiến thức cơ bản về thuật toán chỉ trong một bài giảng! Chúng tôi sẽ dạy bạn những khái niệm cơ bản cần thiết để giải thuật từng bước và hơn nữa, chúng tôi sẽ dạy bạn toàn bộ bí quyết của Code Camp để áp dụng vào các vấn đề :)

Cơ bản

JavaScript

[Code Camp] Lý thuyết + thực hành về thuật toán Javascript dành cho người mới bắt đầu

codecamp

[CodeCamp] Khóa học backend cô đặc được tạo ra từ bootcamp

codecamp

Chương trình giảng dạy này chứa đầy niềm đam mê cá nhân của Captain, một nhà phát triển phần mềm đầy đủ với 8 năm kinh nghiệm và yêu thích lập trình. Trái tim của thuyền trưởng tan chảy khi anh ấy muốn kể cho bạn mọi thứ về phần sau! Nếu bạn nghe bài giảng này, bạn sẽ nghĩ: "Họ đã nói với tôi nhiều như vậy sao?" Bạn sẽ không thể thoát khỏi suy nghĩ đó. Chúng ta hãy bắt đầu bằng bài giảng này, bài giảng này sẽ giải đáp và cung cấp cho chúng ta những phần mà mọi người đều thấy khó hiểu?

Nhập môn

NestJS, Node.js, JavaScript

[CodeCamp] Khóa học backend cô đặc được tạo ra từ bootcamp

codecamp

[CodeCamp] Khóa học Front-end cô đặc được tạo ra từ Bootcamp

codecamp

1 năm đào tạo ra hơn 300 nhà phát triển, đây là chương trình đào tạo cô đọng của 'trại huấn luyện' thực sự. Chỉ với một khóa học này, bạn có thể phát triển đến trình độ của một nhà phát triển cấp junior và có được khả năng sử dụng và kiến thức về công nghệ stack phía trước. [InflearnX Code Camp] đã chuẩn bị để bất kỳ ai, bất kể bối cảnh xã hội, kinh tế hay giáo dục, đều có thể xây dựng sự nghiệp :)

Nhập môn

React, Next.js, GraphQL

[CodeCamp] Khóa học Front-end cô đặc được tạo ra từ Bootcamp

codecamp

[Code Camp] CSS mạnh mẽ

codecamp

Bạn đã thấy một bài giảng tập trung hoàn toàn vào CSS chưa? Trong bài giảng này, bạn sẽ làm việc trên tổng cộng hai dự án và triển khai mọi thứ từ cấu hình bố cục cơ bản nhất đến thiết kế đáp ứng! Bây giờ, nếu bạn đã sẵn sàng, hãy bắt đầu.

Cơ bản

HTML/CSS

[Code Camp] CSS mạnh mẽ

codecamp

[Code Camp] Bắt đầu với trại miễn phí

codecamp

Đây là khóa học được tạo bằng chương trình giảng dạy độc đáo của Coding Boot Camp. Nó bao gồm những nội dung cơ bản và cần thiết nhất trong thực tế. 'Bất cứ ai cũng có thể chuyển sang nghề lập trình viên' Bắt đầu với bài học này.

Nhập môn

HTML/CSS, JavaScript

[Code Camp] Bắt đầu với trại miễn phí

codecamp

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!

[CodeCamp] Khóa học Front-end cô đặc được tạo ra từ Bootcamp

codecamp

Nhập môn

React, Next.js, GraphQL

[CodeCamp] Khóa học Front-end cô đặc được tạo ra từ Bootcamp

codecamp

Next.js vừa tầm một miếng ăn

winterlood

Tác phẩm thứ 3 trong series "Một miếng"! Đây là khóa học Next.js chi tiết và tận tâm nhất thế giới. Chúng ta sẽ cùng tìm hiểu không chỉ App Router mà cả Page Router thông qua các dự án thực tế.

Cơ bản

React, TypeScript, Next.js

Next.js vừa tầm một miếng ăn

winterlood

Ứng dụng Hybrid với Expo Framework giúp tăng lương cho nhà phát triển web

codecamp

Đây là khóa học giúp bạn phát triển ứng dụng di động có thể cung cấp dịch vụ trên Android và IOS bằng cách tận dụng phát triển web.

Cơ bản

React, Next.js, expo

Ứng dụng Hybrid với Expo Framework giúp tăng lương cho nhà phát triển web

codecamp

[VOD] Hoàn thành trong 6 tuần! Lập trình Vibe cô đặc cho thực tế phát triển (Cursor AI, Figma)

codecamp

Trung cấp trở lên

React, Next.js, cursor

[VOD] Hoàn thành trong 6 tuần! Lập trình Vibe cô đặc cho thực tế phát triển (Cursor AI, Figma)

codecamp

Thực tế phát triển ứng dụng React Native cho iOS/Android - Cơ bản

Wintho

Mục tiêu là có được kiến thức cơ bản về React Native để phát triển front-end ứng dụng di động. Khóa học này được thiết kế để giúp những người không phải là chuyên gia dễ dàng phát triển Ứng dụng di động gốc thông qua việc sử dụng ngôn ngữ/API với rào cản gia nhập thấp.

Cơ bản

React Native, React, ES6

Thực tế phát triển ứng dụng React Native cho iOS/Android - Cơ bản

Wintho

[Hoàn thiện Full-stack] Clone 3 trang web với Supabase (Next.js 14)

lopun

Supabase sẽ chắp cánh cho việc phát triển Full-stack của bạn! Thông qua 3 dự án clone, bạn sẽ được học cấp tốc cách phát triển Full-stack cấp độ thực tế với Next.js 14 và Supabase.

Cơ bản

Next.js, supabase, TailwindCSS

[Hoàn thiện Full-stack] Clone 3 trang web với Supabase (Next.js 14)

lopun

Một trại huấn luyện phát triển toàn diện thực sự dành cho những người không chuyên ngành

grab

Khóa học đầy đủ nhất mà ngay cả người mới bắt đầu cũng có thể học được, bao gồm web, máy chủ, ứng dụng di động và học máy!! Nếu bạn không biết nên bắt đầu phát triển từ đâu, tôi thực sự khuyên bạn nên tham gia khóa học này. Chúng ta hãy tiến hành chỉ với Javascript!

Nhập môn

JavaScript, React, Node.js

Một trại huấn luyện phát triển toàn diện thực sự dành cho những người không chuyên ngành

grab

Giải pháp trang đích tối ưu SEO & chiến lược hiển thị: Hoàn thiện với Vibe Coding cùng Nextjs

ludgi

Hoàn thành trang landing giới thiệu công ty bằng cách lập trình thực tế với phong cách sống động. Sử dụng stack Cursor AI + Next.js + TypeScript + TailwindCSS + shadcn/ui + MCP, tiến hành từ thiết kế đến triển khai một lần. Trọng tâm là "triển khai nhanh + SEO tối ưu để hiển thị tốt trên công cụ tìm kiếm". 🏁 Mục tiêu khóa học Tạo landing → Tối ưu hiệu suất → Áp dụng SEO → Triển khai/lập chỉ mục Xác nhận ngay sản phẩm hoàn thiện từng phần thông qua lập trình thời gian thực (vibe coding) Trải nghiệm trực tiếp việc phản ánh tìm kiếm 🛠️ Stack thực hành Cursor AI, Next.js(App Router), TypeScript TailwindCSS, shadcn/ui, quy trình làm việc MCP 🔍 Thực hành SEO Áp dụng file MD tối ưu SEO do giảng viên cung cấp Metadata, OG/Twitter card, robots/sitemap, dữ liệu có cấu trúc (JSON-LD) Áp dụng tùy chọn định tuyến đa ngôn ngữ 🎯 Sản phẩm hoàn thiện Landing giới thiệu công ty responsive + form liên hệ Mục tiêu Lighthouse 95+ Triển khai Vercel sau đó đăng ký Search Console và yêu cầu lập chỉ mục 📚 Những gì học được từ khóa học này Cách cấu thành nhanh các phần hero/tin cậy/tính năng/FAQ Cấu thành UI gọn gàng với shadcn/ui Thiết kế điểm theo dõi chuyển đổi cơ bản và xác thực form Nâng điểm SEO bằng dữ liệu có cấu trúc + định tuyến đa ngôn ngữ Hiểu quá trình lập chỉ mục thông qua Search Console sau triển khai 💡 Insight thực tế (đặc quyền khóa học) Không chỉ đơn thuần triển khai code, mà còn đề cập đơn giản về phương thức marketing·hiển thị được sử dụng thực tế trên thị trường. Phạm vi đơn giá thực tế của quảng cáo, blog posting, công việc comment Cách các công ty gia công·dịch vụ thực tế tiến hành công việc SEO, hiển thị Sự khác biệt về chi phí/hiệu quả khi developer tham gia trực tiếp và khi giao thầu phụ Thông qua phần này, có thể rèn luyện cảm giác không chỉ về kỹ thuật mà còn về cách sử dụng thực tế trong công việc, cấu trúc chi phí vận hành như thế nào. Tóm tắt một dòng "Theo dõi quy trình triển khai → tối ưu → triển khai → lập chỉ mục", Học quy trình tạo web kết nối đến hiển thị tìm kiếm thực tế và cấu trúc thị trường thực tế.

Nhập môn

React, Node.js, cursor

Giải pháp trang đích tối ưu SEO & chiến lược hiển thị: Hoàn thiện với Vibe Coding cùng Nextjs

ludgi

# [Electron #1] Ứng dụng Timer với Electron + React (Sử dụng Zustand)

dakgangjung123

Đây là khóa học thực tế giúp bạn tự tay tạo ra một ứng dụng hẹn giờ bằng React, Electron, Zustand và triển khai nó trên đa nền tảng (Windows, macOS, Linux). Bắt đầu với việc phát triển web React quen thuộc, quản lý trạng thái toàn cục thông qua Zustand, và cho đến khi triển khai GUI cuối cùng, bạn có thể học được toàn bộ quy trình phát triển ứng dụng desktop!

Cơ bản

React, Electron, GUI

# [Electron #1] Ứng dụng Timer với Electron + React (Sử dụng Zustand)

dakgangjung123

Những điều Bootcamp không cho bạn biết (Tối ưu hóa kết xuất phản ứng) Phần 2

aftercamp

Nắm vững các nguyên tắc kết xuất và tối ưu hóa React để sử dụng chúng trong thực tế và chuẩn bị cho các cuộc phỏng vấn!

Trung cấp trở lên

React, react-usememo, Tech Interview

Những điều Bootcamp không cho bạn biết (Tối ưu hóa kết xuất phản ứng) Phần 2

aftercamp

Tạo dịch vụ web với Vibe Coding With Claude Code

ref63184917

Một CTO hiện tại của startup sẽ truyền đạt kiến thức về vibe coding thu được thông qua dịch vụ thực tế và nhiều dự án outsourcing.

Nhập môn

HTML/CSS, JavaScript, Next.js

Tạo dịch vụ web với Vibe Coding With Claude Code

ref63184917

Chỉ cần biết HTML/CSS/JS là OK! Dự án thực chiến hoàn thiện với React và Firebase

ezweb

Đây là khóa học xây dựng ứng dụng web sử dụng React và Firebase để triển khai các tính năng cốt lõi trong thực tế như đăng nhập, quản lý bài viết, tải lên tệp tin và quản lý hồ sơ. Bạn có thể tạo ra một dịch vụ web hoàn chỉnh bằng cách thực hiện từng bước các tính năng: đăng nhập bằng email và mạng xã hội thông qua Firebase Authentication, lưu trữ và xử lý dữ liệu thời gian thực dựa trên Firestore, chức năng tải lên tệp tin bằng Firebase Storage, và cả chức năng quản lý hồ sơ. Khóa học này được thiết kế để giúp những người đang học phát triển Frontend hiểu cách triển khai nhanh chóng một dịch vụ web bằng Firebase mà không cần xây dựng hệ thống máy chủ phức tạp.

Cơ bản

React, Firebase, firebase-firestore

Chỉ cần biết HTML/CSS/JS là OK! Dự án thực chiến hoàn thiện với React và Firebase

ezweb

Hướng dẫn hoàn hảo phát triển dịch vụ web Python/Django với React (dựa trên Django 4.2)

pyhub

Củng cố nền tảng phát triển dịch vụ web Python/Django. Học Django tốn thời gian, nhưng bạn có thể tối đa hóa năng suất của mình trong quá trình phát triển lặp đi lặp lại. Biến trí tưởng tượng của bạn thành hiện thực.

Cơ bản

Python, Django, React

Hướng dẫn hoàn hảo phát triển dịch vụ web Python/Django với React (dựa trên Django 4.2)

pyhub

Chinh phục hoàn toàn GraphQL (khóa học full stack vừa học vừa tạo kiosk) - [Đổi mới một phần vào năm 2024]

Indie Coder

Bạn sẽ tìm hiểu cách sử dụng GraphQL cơ bản và nâng cao, công nghệ kiểm soát API thế hệ tiếp theo và trải nghiệm dự án thực tế thông qua dịch vụ kiosk ảo được tạo bằng GraphQL. Khóa học đã được cập nhật một phần lên phiên bản mới nhất, apollo-server v4, kể từ tháng 2 năm 2024.

Cơ bản

GraphQL, Svelte, MongoDB

Chinh phục hoàn toàn GraphQL (khóa học full stack vừa học vừa tạo kiosk) - [Đổi mới một phần vào năm 2024]

Indie Coder

Học cơ sở dữ liệu qua thực hành: Tạo ứng dụng nhắc nhở uống thuốc (SQLite & React Native Expo)

Kyo

Phát triển ứng dụng nhắc nhở thời gian uống thuốc bằng React Native. Dựa trên việc học cơ bản về cơ sở dữ liệu và cú pháp SQL, chúng ta sẽ tạo một ứng dụng xử lý dữ liệu bằng SQLite và tiến hành phát hành lên cửa hàng ứng dụng.

Cơ bản

React Native, SQLite, database

Học cơ sở dữ liệu qua thực hành: Tạo ứng dụng nhắc nhở uống thuốc (SQLite & React Native Expo)

Kyo

Từ MVP đến triển khai và kiếm tiền! Chuỗi bài học thực chiến Next.js × LLM API

dxers

Dạo gần đây LLM đang thay đổi môi trường phát triển, nhưng điều thực sự quan trọng không phải là "viết mã thay bạn" mà là tích hợp nó vào dịch vụ như một tính năng. Khóa học này sẽ hướng dẫn bạn triển khai từng bước một dịch vụ xem bài Tarot tuy nhẹ nhàng nhưng có độ hoàn thiện cao bằng Next.js + OpenAI API. Trong giai đoạn đầu, chúng ta sẽ tạo một MVP (Sản phẩm khả thi tối thiểu) có thể hoạt động mà không cần backend, đồng thời kết nối luồng nhập liệu của người dùng (câu hỏi/luồng/chọn bài) cho đến khi tạo ra kết quả. Ở các giai đoạn tiếp theo, chúng ta sẽ mở rộng tính năng với việc xây dựng backend, đăng nhập thông thường và OAuth, tính năng cộng đồng và bảng điều khiển lịch sử xem bài. Cuối cùng, chúng ta sẽ tiến hành triển khai lên AWS và tích hợp Google AdSense để hoàn thiện sản phẩm dưới dạng có thể vận hành thực tế. Ngoài ra, để chi phí sử dụng LLM API không trở thành gánh nặng, khóa học cũng sẽ bao gồm việc tìm hiểu cấu trúc phí và các chiến lược tối ưu hóa chi phí.

Cơ bản

AWS, Google Ads, Next.js

Từ MVP đến triển khai và kiếm tiền! Chuỗi bài học thực chiến Next.js × LLM API

dxers

Vibe Coding: Tạo ứng dụng ghi nhớ giọng nói bằng Next.js + FastAPI + Faster-Whisper

ludgi

Đây là khóa học dự án thực tế về cách chạy Whisper cục bộ và phát triển nhanh chóng một ứng dụng nhận dạng giọng nói AI bằng FastAPI và Next.js. Bạn sẽ triển khai nhận dạng giọng nói theo thời gian thực và hoàn thành một sản phẩm có thể được sử dụng làm portfolio đơn giản trong một thời gian ngắn.

Cơ bản

Next.js, FastAPI, whisper

Vibe Coding: Tạo ứng dụng ghi nhớ giọng nói bằng Next.js + FastAPI + Faster-Whisper

ludgi

Tạo Claude Code bằng TypeScript từ con số 0

Hiro Son

"Tại sao AI lại viết đoạn mã này?", "Tại sao nó không nhớ những gì vừa nói?" Sự ức chế mà bạn gặp phải khi sử dụng các công cụ AI như Claude Code bắt nguồn từ việc không hiểu cách chúng vận hành. Khóa học này sẽ mở toang "chiếc hộp đen" đó một cách minh bạch. Xuyên suốt 25 bài giảng, chúng ta sẽ trực tiếp gắn cho LLM "đôi mắt" để xem tệp (Read), "đôi tay" để sửa mã (Edit) và "đôi chân" để thực thi lệnh (Bash), từ đó xây dựng nên một Coding Agent của riêng bạn hoạt động y hệt như các công cụ thực tế trong công việc từ con số không. Đây không đơn thuần là học cách sử dụng thư viện. Bạn sẽ trực tiếp lập trình để hiểu cách AI nắm bắt cấu trúc dự án, tại sao nó mất trí nhớ trong các cuộc hội thoại dài và cách giải quyết vấn đề đó về mặt kỹ thuật (Sliding Window, Summary). Thông qua quá trình này, bạn sẽ từ một "người dùng" công cụ AI đơn thuần trở thành một người có tầm nhìn của "nhà cung cấp AI" – người thấu hiểu nguyên lý vận hành, có thể tùy chỉnh và đánh giá công cụ theo ý muốn của mình.

Cơ bản

React, TypeScript, vercel

Tạo Claude Code bằng TypeScript từ con số 0

Hiro Son

[PROKIT] Vibe Coding/Bộ bài tập thực hành Frontend: Tạo ứng dụng hẹn giờ

nybs

Đây là nội dung nhiệm vụ dành cho dự án phát triển. Chúng tôi cung cấp tài liệu kế hoạch PRD, thiết kế Figma và các điểm cuối API (API endpoints) để bạn có thể thực hành dự án bằng cách tự mình triển khai ứng dụng hẹn giờ có tên là DevTime. Hãy biến những kiến thức đã học thành của riêng mình một cách hoàn hảo thông qua việc thực hiện một dự án có cấp độ tương đương với dịch vụ thực tế nhé 🚀

Nhập môn

React

[PROKIT] Vibe Coding/Bộ bài tập thực hành Frontend: Tạo ứng dụng hẹn giờ

nybs

Nhân bản Chat GPT với Cursor trong 1 giờ (lớp học một ngày)

dodocoding

Bạn có thể có khả năng triển khai một chương trình chat bằng Next.js + Cursor IDE chỉ trong một giờ.

Nhập môn

nextjs, ChatGPT, React

Nhân bản Chat GPT với Cursor trong 1 giờ (lớp học một ngày)

dodocoding

[Code Camp] Khóa học Frontend 'Hoàn hảo' được tạo ra tại Bootcamp

Bạn sẽ nhận được điều này sau khi học.

'Khóa học Frontend hoàn hảođược tạo ra từ bootcamp 'thực thụ'

Bắt đầu với Precamp

CSS&JS Master🆕

Bootcamp Phát triển Web Frontend 🆕

Bootcamp Ứng dụng Hybrid🆕

Khóa học này hoàn hảo chonhững ai đang tìm kiếm điều này

Để có bước nhảy vọt trong sự nghiệp cao hơnchúng tôi cung cấp tài liệu học tập và bài tập của bootcamp

Hoàn thành portfolio của bạnbằng code do chính tay bạn viết.

Bắt đầu từ Free Camp

CSS&JS Master

Bootcamp Phát triển Web Frontend

Bootcamp Ứng dụng Hybrid

Công nghệ cốt lõi của FrontendTại sao chúng ta nên sử dụng React.js và Next.js?

Hơn nữa, chỉ với một khóa học Full-stackcó thể nắm được nhiều công nghệ như vậy cùng một lúc!

Chương trình đào tạo Frontend Bootcamp 'vượt ranh giới'không bỏ sót một kẽ hở nào

#01. React và Next.js

#02. JS và Bất đồng bộ cốt lõi

#03. Thiết kế Component

#04. Bộ nhớ đệm (Cache)

#05. Đăng nhập và Bảo mật

#06. Tính năng nâng cao

#07. Tối ưu hóa hiệu suất

#08. Máy chủ Frontend

#09. Kiểm thử

#10. Triển khai Web

# 01. Cấu trúc CSS cho Mobile

#02. Giao tiếp Web/App

#03. Tính năng nâng cao

#04. Micro Frontend

#05. Đăng nhập ứng dụng

#06. Triển khai ứng dụng

[Khóa học Frontend hoàn hảo]Sau khi học xong, tôi cũng là developer!

Để có bước nhảy vọt cao hơn trong sự nghiệpchúng tôi cũng đã chuẩn bị khóa học [Vibe Coding] ứng dụng thực tế.

Khóa học liên quan được đề xuất:

Chờ đã!Vui lòng kiểm tra trước khi học.

Bạn cócâu hỏi nào không?

Hỏi: Tôi có thể học khóa này mà không cần bất kỳ kiến thức nào không?

Câu hỏi: Nếu đã có kiến thức cơ bản thì nên bắt đầu học từ đâu?

Câu hỏi: Có cách nào để học khóa học bootcamp phát triển web frontend một cách hiệu quả không?

Hỏi: Chương trình giảng dạy theo bậc thang là gì?

Q. Tôi có thắc mắc trong quá trình học.

Giới thiệu vềTeam Codecamp.

Khuyến nghị cho những người này

Xin chàoĐây là codecamp

Chương trình giảng dạy

Đánh giá

Khóa học khác của codecamp

Khóa học tương tự

'Khóa học Frontend hoàn hảo
được tạo ra từ bootcamp 'thực thụ'

Khóa học này hoàn hảo cho
những ai đang tìm kiếm điều này

Để có bước nhảy vọt trong sự nghiệp cao hơn
chúng tôi cung cấp tài liệu học tập và bài tập của bootcamp

Hoàn thành portfolio của bạn
bằng code do chính tay bạn viết.

Công nghệ cốt lõi của Frontend
Tại sao chúng ta nên sử dụng React.js và Next.js?

Hơn nữa, chỉ với một khóa học Full-stack
có thể nắm được nhiều công nghệ như vậy cùng một lúc!

Chương trình đào tạo Frontend Bootcamp 'vượt ranh giới'
không bỏ sót một kẽ hở nào

[Khóa học Frontend hoàn hảo]
Sau khi học xong, tôi cũng là developer!

Để có bước nhảy vọt cao hơn trong sự nghiệp
chúng tôi cũng đã chuẩn bị khóa học [Vibe Coding] ứng dụng thực tế.

Chờ đã!
Vui lòng kiểm tra trước khi học.

Bạn có
câu hỏi nào không?

Giới thiệu về
Team Codecamp.

Khuyến nghị cho
những người này

Xin chào
Đây là codecamp