inflearn logo

Giao diện người dùng Frontend cốt lõi - Phần 2

Hãy thử tạo các thành phần UI tiêu biểu bằng cả phiên bản React và JavaScript thuần túy, trải nghiệm các góc nhìn và phương pháp đa dạng sử dụng Web API, từ đó nâng cao hơn nữa kỹ năng phát triển frontend của bạn.

(5.0) 8 đánh giá

316 học viên

Độ khó Cơ bản

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

React
React
TypeScript
TypeScript
DOM
DOM
ui
ui
vanilla-js
vanilla-js
React
React
TypeScript
TypeScript
DOM
DOM
ui
ui
vanilla-js
vanilla-js

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

5.0

5.0

신원세

7% đã tham gia

Đó là bài giảng đã giúp tôi tập trung tốt hơn vì tôi cảm thấy như mình đang giao tiếp với học sinh hơn là chỉ cung cấp thông tin!! Tôi cũng thích rằng có một phần được triển khai trong phiên bản JavaScript vanilla 👍

5.0

withkey

32% đã tham gia

Các vấn đề mà tôi đã suy nghĩ trong vài tháng khi xây dựng hệ thống thiết kế, đặc biệt là những vấn đề liên quan đến không có đầu và phức hợp, đều đã được giải quyết trong Phần 7. Đặc biệt là ở phần sử dụng Generics trong createContext, tôi rất vui mừng 🫨 Core JavaScript Bắt đầu với. nhiều nghiên cứu tài liệu chính thức về TypeScript, React và các bài giảng thành phần hiệu quả... Cảm ơn bạn rất nhiều vì những bài giảng và tài liệu tuyệt vời. 😭👍

5.0

eddie

100% đã tham gia

Đây là một bài giảng giúp tôi hiểu về cách và tiêu chuẩn để tận dụng trình duyệt, HTML, React, Vanilla khi phát triển UI. Ngoài ra, việc xem bài giảng cũng giúp tôi nắm bắt được quy trình phát triển UI, điều này rất hữu ích.

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

  • Kiến thức thực tiễn React

  • DOM API

  • Khả năng vận dụng các Web API đa dạng khác

🎉Giảm giá 25% khi đăng ký qua lộ trình học🎉

Link lộ trình: https://inf.run/cNuxY

(Ngay cả khi bạn đã tham gia một trong hai khóa học, ưu đãi giảm giá 25% vẫn được áp dụng cho khóa học còn lại.)

Hãy cùng tự tay tạo ra các yếu tố UI đa dạng nhé!

Chúng ta sẽ tạo phiên bản bằng JavaScript thuần (vanilla-js) và phiên bản React, đồng thời áp dụng đa dạng các phương pháp nhất có thể.

  • Hãy viết các thành phần với nhiều phiên bản khác nhau và trải nghiệm so sánh các đặc điểm của từng loại.


  • Hãy nâng cao cảm quan thực tế bằng cách áp dụng các API được sử dụng nhiều trong công việc chuyên môn.

Khuyên dùng cho những đối tượng sau

Nhà phát triển Frontend thiếu tự tin trong việc phát triển vì chỉ phụ thuộc vào các thư viện UI component

Những người chưa quen thuộc với các HTML5 API và DOM API mới nhất

Những người đang khao khát cải thiện kỹ năng phát triển thành phần UI

Sau khi hoàn thành khóa học,

  • Chỉ với một khóa học này, các thành phần UI sẽ được giải quyết triệt để! Riêng về các thành phần UI, bạn có thể tích lũy kiến thức phát triển tương đương với trình độ của một nhà phát triển Front-end cấp cao.

  • Nếu bạn kết hợp và phát triển các yếu tố được đề cập trong bài giảng này, bạn sẽ có đủ tự tin để tự mình tạo ra bất kỳ yếu tố UI mới nào.

Bạn sẽ học những nội dung này.

Part 2 là bài giảng tập trung vào việc suy nghĩ cách để có thể tái sử dụng các thành phần (components) đã có sẵn.

Phần 1

  1. Accordion

  2. Menu tab

  3. Tooltip

  4. TextBox đáp ứng (Responsive Textbox)

  5. Rút gọn văn bản nhiều dòng

  6. Lazy loading

  7. Cuộn vô hạn

  8. Hộp cuộn ngang

  9. Scroll Spy

Part 2 (Bài học này)

  1. Snackbar

  2. Modal

  3. Popover

  4. Slide hình ảnh

  5. Carousel

  6. Bộ sưu tập

  7. Hộp chọn (Select box)

  8. Tự động hoàn thành

  9. Danh sách kéo và thả

Đặc điểm của khóa học này

Coding trực tiếp sinh động

Đây là bài giảng được ghi hình và biên tập lại từ buổi live coding trong chương trình học trực tuyến, với ưu điểm là mang lại cảm giác sống động tại hiện trường và phản hồi nhanh chóng. Tôi sẽ đưa ra nhiều góc nhìn đa dạng không bị gò bó trong khuôn mẫu nhất định, đồng thời bạn cũng có thể trải nghiệm các phương án giải quyết cho những vấn đề phát sinh ngoài dự kiến.

Điều chỉnh độ khó theo từng bước, giới thiệu và áp dụng các API mới nhất

Tôi đã cấu trúc bài giảng bằng cách nhóm các yếu tố có kỹ năng yêu cầu tương tự nhau lại với nhau và tăng dần độ khó theo từng bước. Ngoài ra, tôi cũng tập trung vào việc giúp người học trở nên quen thuộc thông qua việc giới thiệu và áp dụng rộng rãi các HTML5 và DOM API mới nhất.

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

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

Chỉ cần chuẩn bị sẵn môi trường từ các phiên bản sau trở lên là được.

  • Node.js 16

  • React 18

  • Next.js 13

  • TypeScript 4

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

  • Cung cấp mã ví dụ dưới dạng tệp nén.

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

  • Khóa học được tiến hành dựa trên tiền đề là bạn đã nắm vững cú pháp HTML/CSS cơ bản, cú pháp JavaScript và cú pháp React.

  • Next.js và TypeScript chỉ được sử dụng như những công cụ để thuận tiện cho công việc, nên sẽ không được đề cập chi tiết.

  • Bài giảng này là bài giảng được ghi hình và biên tập lại từ buổi học nhóm do người chia sẻ kiến thức thực hiện.


Các bài giảng liên quan 📺

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

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

  • Người định hướng trở thành nhà phát triển Front-end

  • Lập trình viên Front-end Junior

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

  • HTML

  • CSS

  • JavaScript (ES6+)

  • React

  • TypeScript

Xin chào
Đây là jaenam

33,461

Học viên

703

Đánh giá

395

Trả lời

4.8

Xếp hạng

11

Các khóa học

Xin chào, tôi là Jung Jae-nam, một nhà phát triển Front-end cấp cao.
Tôi đang thực hiện nhiều hoạt động khác nhau với mục tiêu hướng tới một văn hóa chia sẻ lành mạnh, nơi chúng ta cùng giúp đỡ và phát triển lẫn nhau.

Sách đã xuất bản: Core JavaScript

Kênh YouTube: FE Jaenam

Bài viết và video phỏng vấn:

Thêm

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

Tất cả

42 bài giảng ∙ (10giờ 35phú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ả

8 đánh giá

5.0

8 đánh giá

  • wonse님의 프로필 이미지
    wonse

    Đánh giá 6

    Đánh giá trung bình 5.0

    5

    7% đã tham gia

    Đó là bài giảng đã giúp tôi tập trung tốt hơn vì tôi cảm thấy như mình đang giao tiếp với học sinh hơn là chỉ cung cấp thông tin!! Tôi cũng thích rằng có một phần được triển khai trong phiên bản JavaScript vanilla 👍

    • jaenam
      Giảng viên

      Cảm ơn bạn Wonse! Các nghiên cứu và video có hơi khác một chút phải không? cười

  • tladud1125661님의 프로필 이미지
    tladud1125661

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    31% đã tham gia

    Nó rất hữu ích khi thiết kế giao diện người dùng.

    • eddie85님의 프로필 이미지
      eddie85

      Đánh giá 8

      Đánh giá trung bình 5.0

      5

      100% đã tham gia

      Đây là một bài giảng giúp tôi hiểu về cách và tiêu chuẩn để tận dụng trình duyệt, HTML, React, Vanilla khi phát triển UI. Ngoài ra, việc xem bài giảng cũng giúp tôi nắm bắt được quy trình phát triển UI, điều này rất hữu ích.

      • withkey님의 프로필 이미지
        withkey

        Đánh giá 3

        Đánh giá trung bình 5.0

        5

        32% đã tham gia

        Các vấn đề mà tôi đã suy nghĩ trong vài tháng khi xây dựng hệ thống thiết kế, đặc biệt là những vấn đề liên quan đến không có đầu và phức hợp, đều đã được giải quyết trong Phần 7. Đặc biệt là ở phần sử dụng Generics trong createContext, tôi rất vui mừng 🫨 Core JavaScript Bắt đầu với. nhiều nghiên cứu tài liệu chính thức về TypeScript, React và các bài giảng thành phần hiệu quả... Cảm ơn bạn rất nhiều vì những bài giảng và tài liệu tuyệt vời. 😭👍

        • jaenam
          Giảng viên

          Tôi không biết phải làm gì với tất cả những lời khen ngợi không đáng có 😅 Tôi rất vui vì bạn thấy nó hữu ích và chúng tôi sẽ cố gắng tạo ra nhiều nội dung thú vị và hữu ích hơn trong tương lai!

      • zimablue14님의 프로필 이미지
        zimablue14

        Đánh giá 14

        Đánh giá trung bình 4.4

        5

        100% đã tham gia

        Thời gian học hơi thất vọng và nội dung trị giá 100 điểm.

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

        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!

        Giảm 25% cho thành viên mới

        1.090.030 ₫

        25%

        1.453.380 ₫