강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Front-end

[CodeCamp] Khóa học frontend 'hoàn hảo' được tạo ra từ bootcamp

Đây là lộ trình học Frontend hoàn hảo từ một boot camp "thực thụ" đã đào tạo ra 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 độ của một lập trình viên Junior đang làm việc thực tế, đồng thời có được khả năng ứng dụng và kiến thức về các kỹ năng Frontend. [Code Camp] đã chuẩn bị để bất kỳ ai cũng có thể xây dựng sự nghiệp, bất kể nền tảng xã hội, kinh tế hay giáo dục :)

(5.0) 10 đánh giá

366 học viên

이론 실습 모두
코드캠프
코딩독학
React
Next.js
GraphQL
React Native
Hybrid App

Dịch cái này sang tiếng Việt

  • Lớp học [CSS & Javascript] thân thiện, chuẩn bị cho khóa học nâng cao

  • [Giao diện người dùng web] sử dụng các kỹ thuật và công nghệ mới nhất

  • [Frontend Ứng dụng Hybrid] để nâng cao năng lực thực tế

  • Danh mục đầu tư mini 2 cái, danh mục đầu tư thực tế 2 cái

  • Hiểu biết hoàn hảo về toàn bộ vòng đời phát triển

Ngay cả những người không chuyên ngành không có cơ sở
Chuyển đổi nghề nghiệp thành Nhà phát triển Front-End

💥 Chú ý!

Khóa học này dựa trên các bài giảng thực tế được sử dụng trong các trại huấn luyện lập trình , do đó bạn có thể cảm nhận được tính thực tế .
Chương trình giảng dạy được thiết kế để phù hợp với mọi người, từ người mới bắt đầu đến người không chuyên và nhà phát triển mới vào nghề.

Được thực hiện trong một trại huấn luyện 'thực sự'
[Khóa học Front-End hoàn chỉnh]

"Tôi thậm chí còn không biết gì về lập trình... Liệu tôi có bao giờ có thể xin được việc làm lập trình viên không?" Hãy gạt những lo lắng đó sang một bên ngay bây giờ.
Khóa học này bắt đầu với nền tảng vững chắc để ngay cả những người mới bắt đầu cũng có thể phát triển lên trình độ lập trình viên chuyên nghiệp!

'Khóa học Front-End tập trung cao độ' được hơn 2.000 học viên lựa chọn cả trực tuyến và ngoại tuyến.
Chúng tôi trở lại với bản cập nhật mạnh mẽ hơn, 'Khóa học Front-End hoàn hảo' 😀

🎯 ' Wanp ' cung cấp một khóa học hoàn chỉnh , nơi bạn có thể học mọi thứ từ kiến thức cơ bản đến ứng dụng web và ứng dụng lai chỉ trong một bài giảng.

Bắt đầu với trại huấn luyện trước

  • Đây là khóa học dành cho người mới bắt đầu tốt nhất với hơn 4.000 học viên đăng ký.

  • Lập trình là gì? Từ cài đặt chương trình đến xây dựng những điều cơ bản.

  • Tìm hiểu cấu trúc web, ngữ pháp cơ bản và cách sử dụng HTML, CSS và Javascript.


    Dự án: Đăng ký thành viên, trang chủ mini


Bậc thầy CSS&JS 🆕

  • Học CSS và Javascript thực tế ngoài những kiến thức cơ bản.

  • Nắm vững CSS với hơn 60 thuộc tính tiên tiến.

  • Bạn có thể thành thạo Javascript bằng cách triển khai các hàm thực tế.


    Dự án: Nhật ký bảng điều khiển thời thượng

Khóa đào tạo Web Front-End 🆕

  • Chúng tôi cung cấp các bài giảng về front-end tương tự như trại huấn luyện lập trình 'Codecamp'.

  • Tìm hiểu React, Next và các thư viện mới nhất cho năm 2025.


  • Chương trình giảng dạy thực hành từng bước tỉ mỉ và có hệ thống với hơn 100 giờ đào tạo


    Dự án: Nền tảng du lịch: Nền tảng cộng đồng và mua sản phẩm dành cho khách du lịch

Khóa đào tạo ứng dụng lai 🆕

  • Lần đầu tiên có chương trình trại huấn luyện! Chúng tôi cung cấp khóa học ứng dụng kết hợp.

  • Triển khai ứng dụng lai bằng React.Native và Expo .

  • Xây dựng danh mục đầu tư tốt nhất và gặp gỡ nhà xây dựng ứng dụng lai của riêng bạn.


    Dự án: Một 'nền tảng du lịch' hoàn thiện với ứng dụng lai

Đối với những người này
Nó hoàn toàn vừa vặn

Từ A đến Z
Ngoài bài giảng khái niệm kéo dài 10 giờ
Tôi muốn một bài giảng chuyên nghiệp 'thực sự'.

phát triển..?
Tôi không biết gì cả, nhưng tôi muốn phát triển đúng mức để có thể kiếm được việc làm.

Hả?! Cấm à~
Nó thực sự giải thích mọi thứ một cách chi tiết
Tôi cần một tay súng riêng.

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

Bạn đã bao giờ cảm thấy như mình đang học một lớp học trực tuyến nhưng lại không có đủ bài tập về nhà chưa?
Chúng tôi cung cấp các tài liệu học tập và bài tập giống như trong trại huấn luyện.

Nếu bạn theo dõi các bài giảng, xem lại tài liệu học tập và làm bài tập theo từng phần , bạn có thể mong đợi sự tiến bộ vượt bậc 😁

Cung cấp tài liệu học tập chi tiết (Notion)

📑 Tài liệu học tập theo từng phần

Tài liệu này sẽ giúp bạn hiểu nội dung trong khi học. Vì nó thực sự được sử dụng trong các trại huấn luyện, nếu bạn tận dụng tốt, nó sẽ giúp ích rất nhiều, đảm bảo bạn không bỏ lỡ bất kỳ nội dung nào.

Cung cấp các thiết kế cần thiết cho lớp học (Figma)

📑 Hướng dẫn thiết kế

Chúng tôi cung cấp các bài học thiết kế thiết yếu cho các lớp front-end. Bạn có thể xây dựng portfolio của mình bằng cách tuân thủ các nguyên tắc thiết kế, và bằng cách bổ sung các tính năng bổ sung, bạn sẽ đạt được sự phát triển vượt bậc hơn nữa.

Phân chia nhiệm vụ rõ ràng thành các phần

📑 Phân công nhiệm vụ rõ ràng cho từng phần

Giống như một trại huấn luyện tại nhà, chúng tôi cung cấp các bài tập rõ ràng cho từng phần. Hãy theo dõi sát sao các bài tập và thêm các dự án thực tế vào hồ sơ của bạn!

Mã tham chiếu cũng được cung cấp cho các bài tập cơ bản.

Với mã tôi tự tay điền vào
Hoàn thiện hồ sơ của bạn.

"Perfect Frontend" được thiết kế với chương trình giảng dạy cho phép bạn hoàn thành một dự án cho mỗi khóa học, giúp bạn tập trung vào sự phát triển của bản thân. Bằng cách theo dõi các bài giảng và tạo ra các dự án thực tế thông qua chương trình giảng dạy từng bước, dễ tiếp cận với tất cả mọi người, bạn sẽ không chỉ cảm thấy tự hào về thành tựu mà còn cải thiện kỹ năng của mình.

Bắt đầu với trại huấn luyện trước

Hoàn thành Cyworld để thực hành HTML, CSS và Javascript cơ bản.

Thạc sĩ CSS&JS

Hoàn thành nhật ký bảng điều khiển thời thượng của bạn để ghi lại cảm xúc.

Trại huấn luyện Web Front-End

Hoàn thành 'Trip Talk', một bảng thông báo dành cho du khách theo CRUD, và 'Nền tảng du lịch' nơi bạn có thể mua các sản phẩm lưu trú.

Trại huấn luyện ứng dụng lai

Bây giờ, hãy hoàn thiện nền tảng du lịch của bạn bằng một ứng dụng kết hợp.

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


Next.js là một framework cho thư viện React . Không giống như React, Next.js mặc định sử dụng render phía máy chủ (SSR), lý tưởng cho việc tối ưu hóa công cụ tìm kiếm (SEO) . Nó cũng cho phép render trước, cho phép các trang được tải với dữ liệu render trước , cải thiện trải nghiệm người dùng.

Ngoài ra , nó còn cung cấp tính năng định tuyến dựa trên trang, tối ưu hóa hình ảnh, CSS tích hợp, v.v. để cải thiện hiệu suất dự án và cung cấp môi trường phát triển thuận tiện cho các nhà phát triển, để bạn có thể phát triển hiệu quả và với hiệu suất cao :)

Cuối cùng, đây là thời đại của ứng dụng lai!
Dựa trên React và Next, bạn có thể phát triển các ứng dụng lai 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 các dịch vụ cho Android và iOS .

Ngoài ra, một trong những bài giảng Wanp
Nhận được nhiều ngăn xếp này cùng một lúc!

Trong khóa học này, bạn sẽ được học thông qua các dự án sử dụng nhiều nền tảng công nghệ chính, bao gồm React và Next.js, cũng như TypeScript và GraphQL. Bạn sẽ học cách sử dụng các ngôn ngữ này một cách tự nhiên để triển khai một hàm duy nhất, từ đó tự nhiên hiểu sâu hơn về các nền tảng công nghệ khác nhau.

Trong thực tế, bạn cần có khả năng sử dụng nhiều ngôn ngữ và công nghệ khác nhau một cách phù hợp để đạt hiệu quả tối đa!


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

- "tiếp theo" : "14.2.13" , - "phản ứng" : "^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" , Đừng lo lắng nếu bạn không hiểu "Phiên bản" và công nghệ tương ứng. Tôi sẽ giải thích kỹ lưỡng và hữu ích trong bài giảng :)

Không bỏ sót một khoảng trống nào
Chương trình giảng dạy trại huấn luyện front-end 'vượt qua ranh giới'

💡 Bao gồm mọi thứ từ cơ bản đến cốt lõi của React. Hãy xem những điểm nổi bật của chương trình giảng dạy trên web của chúng tôi 💡

#01. React và Next.js

Bạn có thể tìm hiểu những kiến ​​thức cơ bản và cốt lõi của React18 đã được nâng cấp đáng kể. Cài đặt nhiều gói khác nhau, hiểu về Node.js, môi trường chạy Javascript và tạo các dự án bằng React và Next.

#02. JS và Async Core

Tìm hiểu về phạm vi, đóng, nâng, vòng lặp sự kiện, mối quan hệ await và microqueue, và hiển thị trạng thái thông qua thực hành trên trình duyệt.

#03. Thiết kế thành phần

Chúng tôi triển khai các dự án người dùng/quản trị viên dùng chung bằng TypeScript và các kiểu tiện ích/chung để thiết kế các thành phần dùng chung và phân phối npm.

#04. Tiền mặt

Tìm hiểu về bộ nhớ đệm dữ liệu máy chủ theo chính sách truy xuất và Định tuyến nông để cải thiện hiệu quả bộ nhớ đệm dữ liệu cục bộ.

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

Bạn có thể học cách sử dụng accessToken và refreshToken, thực hành đánh cắp token localStorage và phòng thủ trước XSS, đồng thời tạo API proxy dựa trên hiểu biết về CORS và CSRF.

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

Thanh toán, Bản đồ và Mã bưu chính, Thực hành biên tập. Chúng tôi cũng cung cấp API phụ trợ cho việc thực hành thực tế.

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

Tìm hiểu và áp dụng 10 cách tối ưu hóa hiệu suất cho giao diện người dùng của bạn. (ghi nhớ, tải trước, tải trước, làm một việc, v.v.)

#08. Máy chủ Frontend

Dựa trên sự hiểu biết về SSR/CSR và hydrat hóa
Chúng tôi đang tái cấu trúc React 18 RCC/RSC và áp dụng vào dự án của mình.

#09. Bài kiểm tra

Bạn có thể thực hiện các thử nghiệm mô phỏng API bằng MSW và thử nghiệm E2E bằng Playwright.

#10. Phân phối web

Chúng tôi sẽ thực hành triển khai các trang web tĩnh trên AWS S3 và các trang web động HTTPS trên EC2 dựa trên nguyên tắc hoạt động của trình duyệt, mạng và Docker.

Bây giờ là thời đại của ứng dụng lai! [Android/IOS] Xem qua nội dung chính của chương trình giảng dạy trên ứng dụng

#01. Cấu trúc CSS di động

Bạn có thể học thiết kế cấu trúc CSS cho nhiều kích cỡ thiết bị khác nhau, các tiêu đề, chân trang phổ biến phản hồi khi cuộn và khả năng mở rộng trên máy tính bảng.

#02. Giao tiếp Web/Ứng dụng

Tìm hiểu cách thiết kế và áp dụng kiến ​​trúc API để giao tiếp giữa ứng dụng và web.

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

Bạn có thể tìm hiểu và thực hành về thông báo ứng dụng, thông tin vị trí, thông tin thiết bị, camera, nút quay lại Android và thay đổi quyền.

#04. Micro Frontend

Bạn có thể tìm hiểu và thực hành phân tách miền và chia sẻ bộ nhớ đệm giữa các WebView dựa trên sự hiểu biết về nhiều phương pháp tiếp cận vi mô khác nhau.

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

Bạn có thể tìm hiểu và thực hành cách sử dụng accessToken và refreshToken, đánh cắp mã thông báo asyncStorage bằng cách sử dụng root và lưu trữ chúng một cách an toàn trong SharedPreference và keychain.

#06. Phân phối ứng dụng

Chúng ta sẽ tìm hiểu về quy trình triển khai ứng dụng lai và tiến hành thực hành triển khai thử nghiệm.

[Khóa học Frontend hoàn chỉnh]
Sau khi hoàn thành khóa học, tôi cũng có thể trở thành một nhà phát triển!

🙆🏻‍♀️ 2 danh mục đầu tư có thể sử dụng ngay trong thực tế

👨🏻‍🎓 Xây dựng nền tảng kiến ​​thức phát triển vững chắc có thể tự phát triển (đặc biệt là phát triển để có thể tìm kiếm nội dung gì và bằng từ khóa gì!)

💁🏻‍♀️ Nhà phát triển cơ bản có khả năng giao tiếp trôi chảy trong thực tế

🙋🏻‍♀️ Phát triển nền tảng web bạn có thể tự làm

👨🏻‍💻 Phát triển ứng dụng lai mà bạn có thể tự làm (Android, IOS)

Để có bước nhảy vọt trong sự nghiệp
[Khóa học nền tảng] cũng đã được chuẩn bị.

hình thu nhỏ-quay lại

Khóa học Backend Bootcamp

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

Nếu bạn đã học được công nghệ front-end mới nhất và chu trình phát triển bằng cách sử dụng API thực hành, hãy tìm hiểu thêm về back-end, tập trung vào Node.js và Nest. Chúng tôi sẽ hướng dẫn bạn cách tạo API cần thiết, cách xử lý dữ liệu và mọi thứ khác về phần phụ trợ, bao gồm tìm kiếm, thanh toán và phân phối. Hoàn thành khóa học back-end và thăng tiến trong sự nghiệp với tư cách là một lập trình viên full-stack 🚀

trong chốc lát!
Vui lòng kiểm tra trước khi tham gia lớp học.

💡 Vui lòng kiểm tra thông số kỹ thuật máy tính của bạn .

· Thông số kỹ thuật của Mac OS không liên quan. · Nếu bạn đang sử dụng hệ điều hành Windows, bạn cần cài đặt git-bash. - Vui lòng tham khảo Tài liệu lớp học > Cài đặt môi trường. - Intel Core i5 thế hệ thứ 9 trở lên / AMD RYZEN 5 thế hệ thứ 2 trở lên - Khuyến nghị RAM 16GB trở lên

💡 Tôi khuyên bạn nên lập một lịch trình và học tập thường xuyên và liên tục .
💡 Vui lòng tạo tài khoản cho công cụ cộng tác ‘Notion’ để 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 được cung cấp thông qua Notion (liên kết) .
※ Bản quyền tài liệu học tập thuộc về CodeCamp. Nghiêm cấm sử dụng, phân phối hoặc sao chép trái phép.

nếu như
Bạn có thắc mắc nào không?

H. Tôi có thể tham gia khóa học mà không cần biết gì không?

Đúng. Không sao nếu bạn không biết phần 'mã' của mã hóa. Để giúp bạn hiểu sâu hơn và rộng hơn, chúng tôi cung cấp 'Bắt ​​đầu với trại hè miễn phí' , khóa học dành cho người mới bắt đầu, và 'Khóa học nâng cao CSS&JS', khóa học trung cấp để tham gia trại hè.


H. Nếu tôi có kiến ​​thức cơ bản, tôi nên bắt đầu học khóa học từ đâu?

Nếu bạn chỉ hiểu cơ bản về HTML, CSS và Javascript, tôi khuyên bạn nên bắt đầu với 'Khóa học nâng cao về CSS&JS '. Nếu bạn nắm vững kiến ​​thức về CSS và Javascript thông qua chương trình giáo dục do chính phủ tài trợ hoặc chương trình giáo dục trực tuyến khác, bạn có thể bắt đầu với 'Web Front-End Bootcamp' .


H. Có cách nào hiệu quả để tham gia khóa học Web Front-End Bootcamp không?

  1. Vui lòng học bài giảng theo từng phần! Trung bình, mỗi phần được chia thành 3 đến 5 chủ đề phụ. Vì đây là lớp học có hệ thống nên tôi khuyên bạn nên lập thời gian biểu và học thường xuyên!

  2. Nếu bạn có bài tập nào cần học, hãy hoàn thành nhé! Các nhiệm vụ 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. Sẽ hữu ích hơn nếu bạn làm một số bài tập học tập trước khi làm bài tập về danh mục đầu tư!

  3. Hãy hoàn thành bài tập bắt buộc (bài tập danh mục đầu tư)! 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ắt buộc để tạo nên một danh mục đầu tư! Tuy nhiên, mã tham chiếu chỉ được cung cấp đến phần giữa! Xin lưu ý rằng từ đó trở đi bạn sẽ phải tự viết toàn bộ mã để sử dụng nó như một danh mục đầu tư thực sự.



H. Chương trình giảng dạy theo từng bước là gì?

Chương trình giảng dạy của Perfect Front-End có cấu trúc bài giảng liên tục và kéo dài !
Ví dụ, để lấy [Phần 26-02 Mã thông báo làm mới], hãy sao chép mã được viết trong [Phần 23-07] và tiếp tục lớp học. Điều đó có nghĩa là bạn phải lấy [Phần 23-07] và viết mã, đồng thời xem lại để biết mã là gì, đúng không?

Đừng lo lắng nếu bạn muốn bỏ qua một số phần nhất định và chọn những phần mà bạn tò mò! Mã lớp của người hướng dẫn được cung cấp để bạn có thể tải xuống riêng! Tuy nhiên, hãy nhớ rằng nếu bạn tải xuống mã thay vì tự viết mã trong lớp học, bạn sẽ cần phải hiểu mã để có thể theo dõi!


H. Tôi có một câu hỏi trong lớp học.

Hãy để lại câu hỏi của bạn trong cộng đồng. Tôi sẽ trả lời bạn sớm nhất có thể 😁

Trại huấn luyện mã nhóm
Giới thiệu.

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 hướng với một chương trình giảng dạy chuyên nghiệp

  • Bất kỳ ai cảm thấy thiếu sót từ các khóa học do chính phủ tài trợ 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 các bài tập đầy đủ.

  • Lập trình viên mới vào nghề mà người hướng dẫn mong muốn

  • Sinh viên mới tốt nghiệp muốn xây dựng một danh mục đầu tư phù hợp với xu hướng

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

  • Niềm đam mê và ý chí mạnh mẽ đối với việc lập trình 💪🏻

Xin chào
Đây là

13,497

Học viên

384

Đánh giá

200

Trả lời

4.8

Xếp hạng

12

Các khóa học

"Try anything, Try everything!"

코드캠프는 유능한 개발자를 양성하며 개발의 미래를 바꾸고자 하는 목표를 가지고 있습니다. 사회적, 경제적, 교육적 배경에 상관없이 누구에게나 커리어 전환의 기회를 제공하기 위해 인프런에 나타났답니다. 코캠과 함께 커리어 점프에 도전하세요!

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
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

10 đánh giá

5.0

10 đánh giá

  • devwon1004님의 프로필 이미지
    devwon1004

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    30% đã tham gia

    • topjhoh20님의 프로필 이미지
      topjhoh20

      Đánh giá 1

      Đánh giá trung bình 5.0

      5

      30% đã tham gia

      • skykwj04228556님의 프로필 이미지
        skykwj04228556

        Đánh giá 1

        Đánh giá trung bình 5.0

        5

        30% đã tham gia

        • ivoryma9ic6362님의 프로필 이미지
          ivoryma9ic6362

          Đánh giá 3

          Đánh giá trung bình 5.0

          5

          30% đã tham gia

          • fkdldjzlr6017님의 프로필 이미지
            fkdldjzlr6017

            Đánh giá 1

            Đánh giá trung bình 5.0

            5

            31% đã tham gia

            8.280.695 ₫

            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!

            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!