inflearn logo

Lớp học chuyên sâu về Frontend

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

(4.7) 13 đánh giá

229 học viên

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

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

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 phát triển Frontend nâng cao

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

Chào mừng bạn đến với lớp học Frontend Master Class

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


Khóa học Frontend Master kết hợp tất cả các mô-đun và phương pháp lập trình tương ứng với hầu hết các khung sườn cấu thành nên sự phát triển frontend hiện đại, bắt đầu từ những điều cơ bản. Thông qua bài giảng này, bạn sẽ được tiếp cận các nội dung giúp phát triển từ một nhà phát triển sơ cấp thành trung cấp và cao cấp, bắt đầu từ phương pháp GoF cho đến các mẫu mã nguồn và cách sử dụng hiện đại của React và Next.js, chiến lược quản lý trạng thái, mẫu thiết kế, cấu trúc mã, thư viện hoạt ảnh và công cụ kiểm thử. Khóa học đi sâu vào JavaScript, React, lập trình hàm, hướng đối tượng, Next.js và hầu như không đề cập đến Vue.js cũng như Svelte.

Được bình chọn là Tân binh xuất sắc nhất năm 2025, xin chân thành cảm ơn tất cả các học viên.

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

1. Những người có ít nhất 1 năm kinh nghiệm học tập hoặc làm việc trong lĩnh vực Front-end.

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


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

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


3. Những người có nhu cầu tìm hiểu về các đặc tả chuyên sâu và mô hình 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 mã 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 ta sẽ tìm hiểu chi tiết 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 và các mẫu thiết kế (design patterns) thông qua các ví dụ thực tế.

Chương trình học chi tiết

Javascript chuyên sâu

  • 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 trong phần giải thích về 'this'

Các 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 (GoF Programming Design Patterns)

  • Lập trình hướng chức năng

  • Cách sử dụng Generator

Bài giảng về Builder Pattern

Thiết kế mẫu

  • Mô hình thiết kế Atomic (Atomic Design Pattern)

  • Mô hình Presentational & Container

  • Mô hình FSD (Feature-Sliced Design)

  • Custom Hooks

  • Compound Components

  • Mẫu Render Props

  • Higher-Order Components(HOCs)

  • Ghi nhớ (Memoization)

  • Ảo hóa (Virtualization)

  • Props Collections & Getters

  • Slot

  • State Reducer

  • Lifted State

Bài giảng về Memoization

Quản lý trạng thái

  • Bối cảnh ra đời 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 trong phần giải thích về Jotai

Hệ sinh thái React/Next.js 

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

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

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

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

  • Chiến lược data fetching SSR

  • Chiến lược data fetching ISR

  • SEO của Next.js

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

Styling

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

  • Tailwind

  • Emotion.js

  • CSS Modules

Styling

Quản lý Form

  • Xử lý Form

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

  • UX của người dùng Form

Quản lý Form

Kiểm thử

  • Unit Test

  • Chiến lược kiểm thử Integration (Tích hợp)

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

Kiểm thử (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 hoạt hình

Cú búng tay của Thanos

Chứng thực và Bảo mật

  • OAuth 2.0, NextAuth.js, OpenID Connect

  • Quản lý Session và Token

  • Chiến lược Token trong Next.js

  • Payload mã hóa hai chiều

NextAuth.js

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

  • Core Web Vitals

  • Critical CSS

  • Chia tách mã (Code Splitting)

  • Tải chậm (Lazy Load)

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

Safari

Xử lý song song

  • Cách sử dụng Web Worker

  • Nâng cao hiệu suất xử lý song song của trình duyệt

  • Chiến lược ngoại tuyến cho trình duyệt

Worker là tự phục vụ

Truy cập và Quốc tế hóa

  • Tiêu chuẩn tiếp cận nội dung web WCAG 2.1

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

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

  • 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ụ dành cho nhà 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á đóng gói (bundling)

Thay đổi bố cục

Tài liệu bài giảng đồ sộ

Tài liệu bài giảng bao gồm rất nhiều ví dụ mã nguồn, giải thích và câu trả lời cho các câu hỏi dự kiến.

Một phần của tài liệu bài giảng

Lưu ý trước khi khóa học bắt đầu

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ấ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.

  • Số lượng và dung lượng: Cung cấp tài liệu học tập cho từng phần cụ thể

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

  • Bạn càng có nhiều trải nghiệm tự mình suy nghĩ để giải quyết các vấn đề lập trình, việc nghe giảng sẽ càng có ích hơn.

  • Sẽ càng hữu ích hơn nếu bạn có kinh nghiệm về Backend và DevOps bên cạnh Frontend.

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

Gửi tới tất cả 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 vào năm lớp 8. Lúc đó, tôi không hề biết rằng trang web mình tạo ra lại trở thành bước ngoặt của cuộc đời. Ngay ngày đầu tiên, trang web đầu tay ấy đã có hơn một nghìn lượt truy cập, và tôi đã nhận được sự khích lệ cũng như khen ngợi từ hàng chục người dùng trực tuyến không quen biết. Không thể quên được trải nghiệm đó, tôi đã tiếp tục thực hiện vô số thử nghiệm trong lĩnh vực web.


Kể từ 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 mình mong muốn, tôi đã miệt mài lập trình trong căn phòng nhỏ suốt nhiều năm, và qua quá trình đó, tôi thấu hiểu nỗi đau cũng như sự khó khăn khi phải phát triển một mình hơn bất kỳ ai khác. Vì thấu hiểu những cảm xúc và sự cô đơn đó, tôi đã kiên trì ghi chép và chia sẻ con đường mình đã đi với thế giới trong suốt hơn 10 năm qua. Tôi muốn gửi gắm một thông điệp đến những người đang làm việc trong môi trường cô độc giống như tôi, nơi không có ai chỉ dạy. Tôi muốn nói với họ rằng: 'Bạn không hề đơn độc'.


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


Nếu những ai đang đọc bài viết này đang dẫn dắt dự án tại một doanh nghiệp nhỏ, hoặc đang cảm thấy nghi ngờ và bất an về phương pháp phát triển mà bản thân đã thực hiện từ trước đến nay, thì bài giảng này sẽ giúp ích cho bạn. Tôi không cố chấp chỉ theo đuổi duy nhất phương pháp mà mình đã hướng dẫn. Tôi muốn kể cho bạn nghe câu chuyện của một nhà phát triển đi trước, về những ghi chép trong quá trình học hỏi, suy ngẫm về mã nguồn và trăn trở về những đoạn mã tốt hơn mà tôi đã trải qua trong đời.


Không có mã nguồn nào là chân lý tuyệt đối. Các nhà phát triển phải thực hiện vô số sự đánh đổi và tìm ra lựa chọn tốt hơn tùy theo tình huống. Trong quá trình đó, nếu các nhà phát triển cấp thấp (Junior) chỉ đưa ra quyết định dựa trên một vài lựa chọn, thì khi tiến tới cấp cao (Senior), họ có thể giải quyết vấn đề với sự thấu hiểu sâu sắc hơn. Việc viết mã theo những hình thức khác nhau và dễ đọc hơn, ngay cả khi chúng có vẻ hoạt động giống nhau, là điều đạt được thông qua sự trăn trở và kinh nghiệm.


Thông qua khóa học này, khi nhìn lại những dòng mã bạn đã viết trong quá khứ, bạn sẽ thấy chúng bằng một đôi mắt khác. Khi nhìn mã nguồn bằng một đôi mắt khác, bạn sẽ bắt đầu trăn trở về những điều mà trước đây chưa từng nghĩ tới, và trong quá trình giải quyết những trăn trở đó, bạn có thể tạo ra những đoạn mã tốt hơn. Tôi đã đưa vào bài giảng những trăn trở và giải pháp mà rất nhiều thế hệ lập trình viên đi trước đã từng trải qua. Hy vọng rằng khi xem những giải pháp của những người đã trăn trở trước đó, các bạn sẽ rút ra được những hiểu biết sâu sắc cho riêng mình.

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

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

  • Nhà phát triển Frontend đang ở giai đoạn chững lại về kỹ năng

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

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

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

  • Có ít nhất 1 năm kinh nghiệm phát triển web

  • Hiểu biết về cú pháp HTML và 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à hoonyhan

229

Học viên

13

Đánh giá

13

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ả

436 bài giảng ∙ (56giờ 33phú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á

  • 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.

    • 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!

      • 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!

        • 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ở

            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!

            17.616.405 ₫