강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

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

Đâ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) 13 đánh giá

423 học viên

이론 실습 모두
코드캠프
코딩독학
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ể

Ngay cả người không có nền tảng, không chuyên ngành
Cũng có thể nhảy vọt sự nghiệp trở thành lập trình viên Frontend

💥Chú ý!

Khóa học này là khóa học thực tế được sử dụng tại coding bootcamp nên 'bạn có thể cảm nhận được phần nào bầu không khí thực tế'.
Chương trình học được thiết kế phù hợp cho tất cả mọi người từ người mới bắt đầu, người không chuyên ngành cho đến các lập trình viên junior.

'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'😀

🎯Với khóa học 'Hoàn Toàn', bạn có thể học từ cơ bản đến web và cả ứng dụng hybrid chỉ với một khóa học - đây là khóa học hoàn hảo dành cho bạn.

Bắt đầu với Precamp

  • Hơn 4.000 người đã tham gia khóa học cơ bản tốt nhất.

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

  • Học cấu trúc web và cú pháp cơ bản cũng như cách sử dụng HTML, CSS, Javascript.


    ✅ Dự án: Đăng ký thành viên, Mini Homepage


CSS&JS Master🆕

  • Học CSS và Javascript có thể áp dụng vào thực tế, vượt qua kiến thức cơ bản.

  • Bạn có thể thành thạo CSS thông qua hơn 60 thuộc tính mới nhất.

  • Bạn có thể thành thạo Javascript thông qua việc triển khai các tính năng thực tế.


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

Bootcamp Phát triển Web Frontend 🆕

  • Cung cấp nguyên bản khóa học Frontend đại diện của trại huấn luyện lập trình 'Code Camp'

  • Học 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 tế theo từng bước chi tiết và có hệ thống với hơn 100 giờ học


    ✅ Dự án: Cộng đồng và mua sắm sản phẩm cho du khách 'Nền tảng du lịch'

Bootcamp Ứng dụng Hybrid🆕

  • Bootcamp đầu tiên! Cung cấp khóa học ứng dụng Hybrid.

  • Triển khai ứng dụng hybrid sử dụng React Native và Expo.

  • Xây dựng portfolio tốt nhất và gặp gỡ mentor ứng dụng hybrid của riêng bạn.


    ✅ Dự án:Hoàn thiện 'Nền tảng du lịch' bằng ứng dụng hybrid

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

Từ A đến Z
Không phải bài giảng khái niệm 10 tiếng
Tôi muốn một khóa học 'thực sự' chuyên nghiệp.

Lập trình..?
Tôi chẳng biết gì cả nhưng muốn phát triển đúng đắn đến trình độ có thể xin việc.

Ơ?! Cấm~
Tôi cần một người hướng dẫn
riêng cho mình, người thực sự chỉ dạy tận tình.

Để 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

Bạn đang học Online Classes nhưng.. có bao giờ cảm thấy thiếu bài tập không?
Chúng tôi cung cấp nguyên bản tài liệu học tập và bài tập được sử dụng trong bootcamp.

Nếu bạn theo dõi tốt các bài giảng, ôn tập tài liệu học tập và hoàn thành bài tập theo từng phần, bạn có thể kỳ vọng một sự phát triển 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 phần

Đây là tài liệu giúp bạn hiểu rõ nội dung trong quá trình học. Vì đây là tài liệu thực tế được sử dụng trong bootcamp, nếu bạn tận dụng tốt, nó sẽ giúp ích rất nhiều để không bỏ sót bất kỳ phần nào.

Cung cấp thiết kế cần thiết cho khóa học (Figma)

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

Chúng tôi cung cấp thiết kế thiết yếu cho khóa học frontend. Bạn có thể tạo portfolio bằng cách làm theo thiết kế và nếu có thể thêm các tính năng bổ sung, bạn sẽ đạt được sự phát triển lớn hơn nữa.

Nhiệm vụ rõ ràng được chia theo từng phần

📑 Bài tập rõ ràng theo từng phần

Giống như tham gia bootcamp tại nhà, khóa học hướng dẫn rõ ràng các bài tập theo từng phần. Hãy hoàn thành các bài tập một cách chu đáo và thêm các dự án thực tế vào portfolio của bạn!

✅Các bài tập cơ bản cũng được cung cấp kèm code tham khả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?

Bắt đầu từ Free Camp

Hãy hoàn thành Cyworld để thực hành HTML, CSS và Javascript cơ bản.

CSS&JS Master

Hãy hoàn thành cuốn nhật ký bảng điều khiển thời thượng có thể ghi lại cảm xúc của bạn.

Bootcamp Phát triển Web Frontend

Hãy hoàn thành bảng thảo luận du lịch 'TripTalk' trung thành với CRUD và 'Nền tảng Du lịch' nơi bạn có thể mua sản phẩm lưu trú.

Bootcamp Ứng dụng Hybrid

Bây giờ hãy hoàn thành 'Nền tảng Du lịch' dưới dạng ứng dụng hybrid.

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 😊

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

💡React từ cơ bản đến nâng cao đều có đầy đủ. Hãy xem nội dung chính của chương trình học web💡

#01. React và Next.js

Bạn có thể học từ cơ bản đến cốt lõi của React18 đã được nâng cấp mạnh mẽ. Cài đặt các gói khác nhau, hiểu về môi trường runtime Javascript là Node.js, và tạo dự án với React và Next.

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

Học về scope, closure, hoisting, event loop, mối quan hệ giữa await và microtask queue cũng như state rendering thông qua thực hành trên trình duyệt.

#03. Thiết kế Component

Triển khai thiết kế component chung sử dụng TypeScript và Utility/Generic Types, đồng thời phân phối qua npm để có thể chia sẻ giữa dự án người dùng và quản trị viên.

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

Thực hành bộ nhớ đệm dữ liệu máy chủ theo chính sách fetch và học Shallow-Routing để tối ưu hóa bộ nhớ đệm dữ liệu cục bộ.

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

Bạn có thể thực hành sử dụng accessToken và refreshToken, thực hành phòng chống đánh cắp token từ localStorage và XSS, đồng thời tạo proxy API 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 điện, thực hành trình soạn thảo. Ngoài ra, chúng tôi cung cấp API backend để thực hành thực tế.

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

Bạn có thể học và áp dụng 10 kỹ thuật tối ưu hóa hiệu suất cho frontend. (memoization, prefetch, preload, windowing, v.v.)

#08. Máy chủ Frontend

Dựa trên hiểu biết về SSR/CSR và hydration,
tiến hành refactoring React 18 RCC/RSC và áp dụng vào dự án.

#09. Kiểm thử

Bạn có thể thực hiện API mocking test sử dụng MSW và E2E test sử dụng playwright.

#10. Triển khai Web

Chúng ta sẽ thực hành triển khai trang web tĩnh lên AWS S3 và triển khai trang web động HTTPS lên EC2 dựa trên nguyên lý 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 hybrid! Hãy xem nội dung chính của chương trình học [Android/IOS]

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

Bạn có thể học cách thiết kế cấu trúc CSS để đáp ứng nhiều kích thước thiết bị khác nhau, header chung, footer theo cuộn trang và mở rộng cho tablet.

#02. Giao tiếp Web/App

Học cách thiết kế cấu trúc API để giao tiếp giữa ứng dụng và web và cách áp dụng nó.

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

Bạn có thể học 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 back của Android và thay đổi quyền.

#04. Micro Frontend

Dựa trên sự hiểu biết về các phương pháp micro-frontend khác nhau, bạn có thể học và thực hành phân tách domain của webview cũng như chia sẻ cache giữa các webview.

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

Bạn có thể học và thực hành về cách sử dụng accessToken và refreshToken, thực hành tấn công lấy cắp token từ asyncStorage thông qua rooting, cũng như nội dung lưu trữ an toàn trong SharedPreference và keychain.

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

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

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

[[SPAN_1]]🙆🏻‍♀️ 실무에 바로 활용할 수 있는 [[/SPAN_1]][[STRONG_2]]포트폴리오 2개[[/STRONG_2]]

👨🏻‍🎓 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 khả năng tìm kiếm thông tin với từ khóa phù hợp!)

💁🏻‍♀️ Trong công việc thực tế, giao tiếp mượt mà là điều cần thiết cho lập trình viên junior

🙋🏻‍♀️ Phát triển Web Platform mà bạn có thể làm một mình

👨🏻‍💻 Phát triển ứng dụng Hybrid App (Android, IOS) mà bạn có thể làm một mình

Để 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ế.

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

Nếu bạn đã hiểu được công nghệ stack mới nhất của frontend và chu trình phát triển thông qua API thực hành, thì giờ là lúc học cách phát triển frontend nhanh chóng và ổn định với vibe coding có hệ thống! Vibe coding có thể áp dụng trong thực tế là điều cần thiết cho cả việc áp dụng vào công việc thực tế và portfolio xin việc🚀

Chờ đã!
Vui lòng kiểm tra trước khi 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.

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?

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?

  1. 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!

  2. 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!

  3. 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😁

Giới thiệu về
Team Codecamp.

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à

15,445

Học viên

454

Đánh giá

227

Trả lời

4.8

Xếp hạng

15

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ả

13 đánh giá

5.0

13 đánh giá

  • JOLO님의 프로필 이미지
    JOLO

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    30% đã tham gia

    • saintjoker04님의 프로필 이미지
      saintjoker04

      Đánh giá 6

      Đánh giá trung bình 4.5

      5

      60% đã tham gia

      • ADK123님의 프로필 이미지
        ADK123

        Đánh giá 326

        Đánh giá trung bình 5.0

        5

        5% đã tham gia

        • 김주원님의 프로필 이미지
          김주원

          Đánh giá 8

          Đánh giá trung bình 5.0

          5

          30% đã tham gia

          • mh님의 프로필 이미지
            mh

            Đánh giá 1

            Đánh giá trung bình 5.0

            5

            30% đã tham gia

            Ưu đãi có thời hạn

            297.000 ₫

            25%

            8.255.901 ₫

            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!