강의

멘토링

커뮤니티

BEST
Programming

/

Web Development

Masterclass Frontend

Đây là khóa học frontend nâng cao dành cho sinh viên và người đi làm có ít nhất 1 năm kinh nghiệm phát triển web. Đối tượng phù hợp nhất là những người có từ 2-3 năm kinh nghiệm thực tế trong ngành, đang gặp thời kỳ trì trệ về kỹ năng hoặc muốn học về cấu trúc sản phẩm cần được xem xét tại các doanh nghiệp lớn.

(4.7) 13 đánh giá

215 học viên

Độ khó Trung cấp trở lên

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

  • hoonyhan
JavaScript
JavaScript
React
React
Functional Programming
Functional Programming
oop
oop
Next.js
Next.js
JavaScript
JavaScript
React
React
Functional Programming
Functional Programming
oop
oop
Next.js
Next.js

Đánh giá từ những học viên đầu tiên

Đánh giá từ những học viên đầu tiên

4.7

5.0

관태

33% đã tham gia

Khóa học mà tôi muốn giữ riêng cho mình một cách ích kỷ.. Khóa học giúp level up cho những ai đang hướng tới frontend, ở cấp độ junior Khóa học tập trung vào phần nâng cao hơn là những kiến thức cơ bản Khuyến khích cho những ai muốn mở rộng tầm nhìn và không chỉ viết code chạy được mà còn muốn viết code tốt hơn!

5.0

mike1124

100% đã tham gia

Tôi định hoàn thành khóa học trong kỳ nghỉ lễ nhưng lượng nội dung thực sự rất nhiều. Đúng như tên gọi, đây là một khóa học như bộ quà tặng tổng hợp giúp có thể nhìn toàn cảnh frontend một cách tổng thể. Có thể nắm bắt được dòng chảy tổng thể, và những nội dung cốt lõi hay quan trọng được giải thích tập trung vào các ví dụ thực tế nên tôi có thể nghe một cách say mê đến mức nghĩ rằng "Mình phải thử dùng cái này ngay tại công ty sau khi hết nghỉ lễ". Vì đã làm backend ở mức độ nào đó nên việc hiểu bài giảng được hỗ trợ thêm. Những phần khó cũng rất tốt vì tài liệu bài giảng được chuẩn bị kỹ lưỡng. Và nhìn chung việc giải thích các khái niệm cũng được thực hiện song song nên tôi cảm thấy đây là một khóa học tốt phù hợp với thời đại AI. Sau khi nghe khóa học này, tôi có thể nhìn thấy những phần thiếu sót mà trước đây không nhìn thấy được, và cũng nghĩ rằng có thể cải thiện cái này theo cách như thế. Mục tiêu của khóa học này là có thể có được con mắt khác so với trước khi nhìn code, và thực sự giờ đây tôi có thể suy nghĩ nhiều điều chỉ từ việc nhìn một đoạn code. Cảm ơn vì khóa học tuyệt vời.

5.0

왕감자

100% đã tham gia

Cảm giác như được tổng hợp toàn bộ những nội dung chuyên sâu như hướng refactoring mà mình thường trăn trở

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

  • Phương pháp luận phát triển frontend nâng cao

  • Cấu trúc đối tượng GoF và ví dụ áp dụng thực tế

Chào mừng bạn đến với Frontend Master Class

Nhiều lập trình viên thường phát hiện ra rằng bản thân họ không thể phát triển thêm từ một thời điểm nhất định. Họ không biết nên học thêm gì, thiếu sót của mình là gì, hay các lập trình viên làm việc tại các công ty lớn hoặc công ty cung cấp dịch vụ hoàn toàn khác phát triển dựa trên những cân nhắc gì.


Khóa học Frontend Masterclass kết hợp tất cả các module và phương pháp lập trình cốt lõi cấu thành nên phát triển frontend hiện đại, bắt đầu từ những kiến thức cơ bản. Thông qua khóa học này, bạn sẽ tìm thấy nội dung giúp bạn phát triển từ một lập trình viên cấp độ sơ cấp lên trung cấp và cao cấp, bao gồm từ phương pháp GoF, các mẫu code hiện đại và cách sử dụng React và Next.js, chiến lược quản lý state, design pattern, cấu trúc code, thư viện animation và công cụ testing. Khóa học đi sâu vào JavaScript, React, lập trình hàm, lập trình hướng đối tượng, Next.js và hầu như không đề cập đến Vue.js và Svelte.

Được chọn là Tân binh mạnh nhất năm 2025, xin cảm ơn tất cả các học viên.

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

1. Người có ít nhất 1 năm kinh nghiệm học tập hoặc làm việc về frontend

Đây là khóa học nâng cao dành cho những người đã có hiểu biết cơ bản về HTML, CSS, JavaScript và đã có kinh nghiệm phát triển ứng dụng web đơn giản. Khóa học phù hợp với những ai muốn xây dựng năng lực phát triển frontend chuyên sâu hơn dựa trên nền tảng kiến thức cơ bản đã học.


2. Những người đang làm việc trong ngành cảm thấy không tiến bộ do các mẫu code lặp đi lặp lại

Bạn có cảm giác bị đình trệ trong sự phát triển khi viết những đoạn code tương tự mỗi ngày? Khóa học này sẽ giới thiệu các pattern và phương pháp tiếp cận đa dạng giúp giải quyết hiệu quả những vấn đề phức tạp thường gặp trong thực tế. Bạn sẽ học được các kỹ thuật nâng cao giúp nâng cao chất lượng code và cải thiện năng suất phát triển.


3. Những người cần học về đặc tả sâu và các mẫu phát triển của Javascript

Bạn có muốn thoát khỏi việc chỉ đơn thuần sử dụng JavaScript và viết code hiệu quả hơn dựa trên sự hiểu biết sâu sắc về ngôn ngữ này không? Trong khóa học này, chúng tôi sẽ đi sâu vào các khái niệm nâng cao như nguyên lý hoạt động bên trong của JavaScript, lập trình bất đồng bộ, lập trình hàm, design pattern cùng với các ví dụ thực tế chi tiết.

Chương trình giảng dạy chi tiết

JavaScript nâng cao

  • Cấu trúc Runtime

  • Hàm callback và Promise

  • Web API

  • Map / WeakMap

  • Set / WeakSet

  • Closure và quản lý bộ nhớ

Một phần giải thích về this

Mô hình lập trình

  • Lập trình hướng đối tượng

  • Các mẫu thiết kế lập trình GoF

  • Lập trình hàm

  • Cách sử dụng Generator

Bài giảng về Builder Pattern

Mẫu thiết kế

  • Mẫu thiết kế Atomic Design

  • Mẫu Presentational & Container

  • Mẫu FSD

  • Custom Hooks

  • Compound Components

  • Mẫu Render Props

  • Higher-Order Components(HOCs)

  • Memoization

  • Virtualization

  • Props Collections & Getters

  • Slot

  • State Reducer

  • State được nâng lên

Bài giảng về Memoization

Quản lý trạng thái

  • Bối cảnh xuất hiện của quản lý trạng thái

  • Quản lý trạng thái Redux

  • Quản lý trạng thái Recoil

  • Quản lý trạng thái Zustand

  • Quản lý trạng thái Jotai

  • Chiến lược sử dụng Context API

Một phần giải thích về Jotai

Hệ sinh thái React/Next.js

  • Đặc điểm theo phiên bản React

  • Đặc điểm theo phiên bản Next.js

  • Chiến lược Fetching (React-query, SWR, Axios)

  • Chiến lược fetching dữ liệu CSR

  • Chiến lược fetching dữ liệu SSR

  • Chiến lược fetching dữ liệu ISR

  • SEO của Next.js

Một phần trong hướng phát triển của React

Styling

  • Cách xây dựng hệ thống thiết kế

  • Tailwind

  • Emotion.js

  • CSS Modules

Styling

Quản lý form

  • Xử lý Form

  • Chiến lược validation đồng bộ/bất đồng bộ

  • Trải nghiệm người dùng (UX) của Form

Quản lý form

Kiểm thử

  • Unit test

  • Chiến lược kiểm thử tích hợp

  • Chiến lược kiểm thử E2E

Testing

Hoạt ảnh

  • Cách sử dụng GSAP

  • Cách sử dụng Motion

  • Cách sử dụng Anime.js

  • Tối ưu hóa UX Animation

Cú búng tay Thanos

Xác thực và bảo mật

  • OAuth 2.0, NextAuth.js, OpenID Connect

  • Quản lý phiên và token

  • Chiến lược token Next.js

  • Mã hóa hai chiều Payload

NextAuth.js

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

  • Core Web Vitals

  • CSS quan trọng

  • Chia tách mã

  • Lazy Load

  • Tối ưu hóa hình ảnh/font/bundle

Safari

Xử lý song song

  • Cách sử dụng Web Worker

  • Cải thiện hiệu suất xử lý song song trên trình duyệt

  • Chiến lược offline của trình duyệt

Worker là self

Khả năng truy cập và quốc tế hóa

  • WCAG 2.1 khả năng tiếp cận web

  • Các trường hợp sử dụng ARIA

  • Công cụ kiểm tra khả năng tiếp cận

  • Triển khai i18n và quản lý đa ngôn ngữ

  • Định dạng/RTL/Xử lý tiền tệ

  • Chiến lược hiệu suất bản địa hóa

Công cụ phát triển trình duyệt Firefox

Công cụ phát triển

  • Cách sử dụng công cụ phát triển

  • Cách sử dụng công cụ phân tích web

  • Cách sử dụng công cụ đánh giá bundling

Thay đổi bố cục

Tài liệu giảng dạy phong phú

Tài liệu giảng dạy được cấu trúc bao gồm vô số ví dụ code, giải thích và câu trả lời cho các câu hỏi dự kiến.

Một phần tài liệu giảng dạy

Lưu ý trước khi học

Môi trường thực hành

  • Hệ điều hành và phiên bản (OS): Có thể sử dụng tất cả các hệ điều hành như Windows, macOS, Linux, v.v.

  • Công cụ sử dụng: Cursor và trình duyệt internet

  • Cấu hình PC: PC có cấu hình cơ bản có thể kết nối internet

Tài liệu học tập

  • Định dạng tài liệu học tập cung cấp: Miro, v.v.

  • Khối lượng và dung lượng: Tài liệu học tập được cung cấp cho từng phần

Kiến thức tiên quyết và lưu ý

  • Càng có nhiều kinh nghiệm tự suy nghĩ để giải quyết các vấn đề lập trình thì càng có ích khi học khóa học này.

  • Nếu có kinh nghiệm về backend và DevOps ngoài frontend thì sẽ càng có ích hơn.

  • Bản quyền của khóa học này thuộc về gi강사 và nghiêm cấm phân phối cũng như sao chép trái phép. Tài liệu học tập cũng có bản quyền và nghiêm cấm sử dụng ngoài mục đích học tập cá nhân.

Gửi các học viên


Xin chào, tôi là Han Sang Hoon.


Tôi đã tạo ra sản phẩm đầu tiên của mình khi học lớp 8. Lúc đó tôi không ngờ rằng trang web mình tạo ra sẽ trở thành bước ngoặt trong cuộc đời. Trang web đầu tiên của tôi đã có hơn một nghìn người truy cập vào ngày đầu tiên, và lúc đó tôi đã nhận được sự động viên và khen ngợi từ hàng chục người dùng trực tuyến vô danh. Không thể quên trải nghiệm đó, tôi đã liên tục thử nghiệm vô số lần trong lĩnh vực web.


Sau khi nếm trải khoảnh khắc ngọt ngào đó, tôi đã không ngừng thử thách và thất bại. Để tạo ra sản phẩm mong muốn, tôi đã phát triển trong căn phòng nhỏ suốt nhiều năm, và trong quá trình đó, tôi hiểu rõ hơn ai hết nỗi đau và khó khăn của việc phát triển một mình. Vì tôi hiểu rõ cảm giác và sự cô đơn đó, nên tôi đã kiên trì ghi chép và chia sẻ với thế giới con đường mà tôi đã đi qua trong hơn 10 năm. Tôi muốn truyền tải thông điệp đến những người đang làm việc trong môi trường cô đơn như tôi, trong môi trường không có ai dạy dỗ mình. Tôi muốn nói với họ rằng 'Bạn không đơn độc'.


Tôi điều hành một công ty phát triển phần mềm, đã gặp gỡ hàng chục doanh nghiệp, thực hiện vô số giao dịch và tạo ra nhiều sản phẩm. Trong quá trình đó, tôi đã có thể thấy được hướng đi phát triển, triết lý và những điều mà mỗi công ty coi trọng. Tôi cũng đã thấy những người đang phải chịu đựng các mẫu code tồi và văn hóa phát triển không tốt dưới quyền của một số ít lập trình viên có tính quyền uy trong các công ty nhỏ. Thị trường phát triển phần mềm Hàn Quốc tuy có vẻ như đang làm cùng một công việc phát triển như vậy, nhưng thực tế đang phát triển theo những cách hoàn toàn khác nhau.


Nếu những người đang đọc bài viết này đang dẫn dắt dự án tại một công ty nhỏ hoặc đang có những nghi vấn, cảm thấy bất an về phương thức phát triển mà bản thân đã theo đuổi cho đến nay, thì khóa học này sẽ hữu ích cho bạn. Tôi không khăng khăng chỉ theo phương pháp mà tôi đã chia sẻ. Tôi muốn kể cho bạn nghe câu chuyện của một lập trình viên đã trải nghiệm trước, về những gì tôi đã học, suy nghĩ về code và những ghi chép về sự trăn trở tìm kiếm code tốt hơn trong suốt cuộc đời mình.


Không có code nào giống như chân lý tuyệt đối. Lập trình viên phải thực hiện vô số sự đánh đổi và tìm kiếm lựa chọn tốt hơn tùy theo từng tình huống. Trong quá trình đó, nếu lập trình viên junior chỉ nhìn thấy vài lựa chọn để đưa ra quyết định, thì khi trở thành senior, họ có thể giải thích vấn đề với cái nhìn sâu sắc hơn. Việc viết code dưới dạng khác và viết dưới dạng dễ đọc hơn, ngay cả khi cách hoạt động có vẻ giống nhau, đều đạt được thông qua sự suy nghĩ và kinh nghiệm.


Thông qua khóa học này, bạn sẽ có thể nhìn những đoạn code mà bạn đã viết trong quá khứ bằng một cái nhìn khác so với trước đây. Khi nhìn code bằng một cái nhìn khác so với trước, bạn sẽ có những suy nghĩ mà trước đây chưa từng nghĩ tới, và trong quá trình giải quyết những suy nghĩ đó, bạn có thể tạo ra code tốt hơn. Khóa học này chứa đựng những suy nghĩ và giải pháp mà vô số các lập trình viên tiền bối đã trải qua. Tôi hy vọng rằng các bạn sẽ có được những hiểu biết sâu sắc của riêng mình khi xem những giải pháp của những người đã suy nghĩ trước.

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

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

  • Lập trình viên frontend đang gặp phải thời kỳ trì trệ trong năng lực

  • Người có ít nhất 1 năm kinh nghiệm và thâm niên phát triển web trở lên

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

  • Kiến thức lập trình cơ bản

  • Tối thiểu 1 năm kinh nghiệm phát triển web

  • Hiểu biết về cú pháp HTML, CSS cơ bản

  • Hiểu biết cơ bản về Vanilla JavaScript

  • Có ít nhất 6 tháng kinh nghiệm sử dụng React.js và Next.js

Xin chào
Đây là

215

Học viên

13

Đánh giá

11

Trả lời

4.7

Xếp hạng

1

Khóa học

Tôi là Han Sang-hoon, một nhà phát triển Full-stack.

Youtube: https://www.youtube.com/@hoony_han

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

Tất cả

434 bài giảng ∙ (56giờ 10phút)

Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

13 đánh giá

4.7

13 đánh giá

  • tkyoun12409907님의 프로필 이미지
    tkyoun12409907

    Đánh giá 5

    Đánh giá trung bình 5.0

    Đã chỉnh sửa

    5

    33% đã tham gia

    Khóa học mà tôi muốn giữ riêng cho mình một cách ích kỷ.. Khóa học giúp level up cho những ai đang hướng tới frontend, ở cấp độ junior Khóa học tập trung vào phần nâng cao hơn là những kiến thức cơ bản Khuyến khích cho những ai muốn mở rộng tầm nhìn và không chỉ viết code chạy được mà còn muốn viết code tốt hơn!

    • knoa0405님의 프로필 이미지
      knoa0405

      Đánh giá 3

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      Tôi định hoàn thành khóa học trong kỳ nghỉ lễ nhưng lượng nội dung thực sự rất nhiều. Đúng như tên gọi, đây là một khóa học như bộ quà tặng tổng hợp giúp có thể nhìn toàn cảnh frontend một cách tổng thể. Có thể nắm bắt được dòng chảy tổng thể, và những nội dung cốt lõi hay quan trọng được giải thích tập trung vào các ví dụ thực tế nên tôi có thể nghe một cách say mê đến mức nghĩ rằng "Mình phải thử dùng cái này ngay tại công ty sau khi hết nghỉ lễ". Vì đã làm backend ở mức độ nào đó nên việc hiểu bài giảng được hỗ trợ thêm. Những phần khó cũng rất tốt vì tài liệu bài giảng được chuẩn bị kỹ lưỡng. Và nhìn chung việc giải thích các khái niệm cũng được thực hiện song song nên tôi cảm thấy đây là một khóa học tốt phù hợp với thời đại AI. Sau khi nghe khóa học này, tôi có thể nhìn thấy những phần thiếu sót mà trước đây không nhìn thấy được, và cũng nghĩ rằng có thể cải thiện cái này theo cách như thế. Mục tiêu của khóa học này là có thể có được con mắt khác so với trước khi nhìn code, và thực sự giờ đây tôi có thể suy nghĩ nhiều điều chỉ từ việc nhìn một đoạn code. Cảm ơn vì khóa học tuyệt vời.

      • jackson52723404님의 프로필 이미지
        jackson52723404

        Đánh giá 1

        Đánh giá trung bình 5.0

        5

        100% đã tham gia

        Cảm giác như được tổng hợp toàn bộ những nội dung chuyên sâu như hướng refactoring mà mình thường trăn trở

        • y2jnwo20031님의 프로필 이미지
          y2jnwo20031

          Đánh giá 3

          Đánh giá trung bình 5.0

          5

          8% đã tham gia

          Mặc dù mới chỉ học được khoảng 1 chương nên chưa thể đánh giá tổng thể, nhưng khóa học rất tốt. Có một cuốn sách tên là JavaScript Deep Dive và cảm giác khá tương tự. Cuốn sách này cũng gây tranh cãi vì những người thích học theo kiểu làm dự án thực hành thì đánh giá không tốt, còn khóa học này cũng tập trung chủ yếu vào lý thuyết và các ví dụ quan trọng.

          • wavyroom님의 프로필 이미지
            wavyroom

            Đánh giá 98

            Đánh giá trung bình 5.0

            5

            88% đã tham gia

            Trong kỳ nghỉ lễ đã chạy không ngừng nghỉ nhỉ. Đây là khóa học dành cho những ai muốn nhìn tổng quan về xu hướng của Frontend!

            17.428.282 ₫

            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!