Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Front-end

Dự án front-end dành cho người mới bắt đầu học React và Next.js: Hoàn thành Tailwind CSS và triển khai tĩnh

Đây là khóa học giới thiệu về front-end sử dụng Next.js và Tailwind CSS. Khóa học hoàn thành việc triển khai tĩnh mà không cần backend và được thiết kế để người mới bắt đầu cũng có thể cảm nhận được thành tựu khi hoàn thành.

(4.0) 4 đánh giá

57 học viên

  • ludgi
영어
global
Next.js
TailwindCSS
aws-s3
TypeScript
React

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

  • nextjs

  • gió đuôi

  • phản ứng

  • bản đánh máy

  • phân phối tĩnh trên aws s3

Một dự án giao diện người dùng giới thiệu để tìm hiểu với React và Next.js: CSS Tailwind và triển khai tĩnh!



  • Trong bài giảng này, bạn sẽ tìm hiểu quy trình hoàn thành các dự án front-end dựa trên Next.js và React một cách ổn định và hiệu quả bằng cách sử dụng TypeScript .


  • Chúng tôi cung cấp trải nghiệm thiết kế nhanh chóng và dễ dàng bằng TailwindCSS và phát hành các dự án của riêng bạn ra thế giới thông qua triển khai tĩnh.


  • Trong bài học này, bạn sẽ tìm hiểu cách triển khai một trang web tĩnh bằng AWS S3 . Chúng ta sẽ thực hành ngắn gọn cách thiết lập S3, tải tệp lên và triển khai chúng.


  • Nhiều nhà phát triển mới vào nghề không thể bắt đầu một dự án hoặc bỏ cuộc giữa chừng do áp lực về sự hoàn hảo và khối lượng học tập lớn cần phải học.

    Để giải quyết vấn đề này, khóa học này được thiết kế để tập trung vào một dự án giao diện người dùng đơn giản nhưng đầy đủ .

  • Next.js, TailWindCSS, aws-s3, TypeScript, React Bằng cách sử dụng nó để tạo một dự án có thể được hoàn thành mà không cần phụ trợ, nó mang lại cảm giác hoàn thànhtrải nghiệm triển khai tĩnh .

  • Mục tiêu của khóa học này là giúp những người mới bắt đầu cảm nhận được niềm vui của sự phát triển và tìm ra con đường tiến lên trong quá trình này.

  • Bài giảng này sẽ được thực hiện bằng tiếng Anh và tất cả các video sẽ có phụ đề tiếng Hàn . Cách phát âm rõ ràng và cách diễn đạt rõ ràng giúp ngay cả người mới bắt đầu cũng dễ hiểu và cũng hữu ích cho việc học tiếng Anh đơn giản . Nó cung cấp một cơ hội tuyệt vời để làm quen với môi trường phát triển toàn cầu.


Sau khi nghe bài giảng bạn có thể tạo ra kết quả như thế này.

Màn hình chính

Đây là màn hình chính của máy xổ số được thiết kế với giao diện người dùng đơn giản. Tìm hiểu cách tạo kiểu cho màn hình chính bằng CSS Tailwind.

màn hình tải

Hãy thử tạo màn hình tải để hiển thị trong khi người dùng đang chờ tải dữ liệu hoặc chờ một tác vụ cụ thể hoàn thành.

Tạo số và hiển thị dữ liệu sau khi tải xong

Sau khi tải, bạn sẽ học cách tạo số ngẫu nhiên, chuẩn hóa chúng thành danh sách và hiển thị chúng trên màn hình.

Triển khai tĩnh vào nhóm S3

Tìm hiểu quy trình triển khai tĩnh một dự án đã hoàn thành lên AWS S3 .


  • Hiểu biết cơ bản về React và Next.js
    Bạn có thể thiết kế và triển khai các dự án giao diện người dùng bằng Next.js từ đầu đến cuối.

  • Nhanh chóng tạo kiểu cho giao diện người dùng của bạn bằng CSS Tailwind
    Bạn có thể thiết kế giao diện người dùng nhanh chóng và hiệu quả với CSS Tailwind dựa trên tiện ích mà không cần thực hiện các thao tác CSS phức tạp.

  • Trải nghiệm triển khai tĩnh
    Bạn có thể triển khai dự án bằng AWS S3 và kiểm tra kết quả triển khai thực tế thông qua URL.

  • Cảm giác thành tựu khi hoàn thành một dự án
    Thông qua trải nghiệm hoàn thành và phân phối một dự án đến cùng, bạn sẽ cảm nhận được cảm giác thành tựu trong quá trình phát triển.


Những gì bạn học

  • Hãy cho chúng tôi biết bạn sẽ học được gì trong khóa học. Sẽ là một ý kiến ​​hay nếu bạn giải thích những gì bạn đang học trong mỗi phần.

  • Nếu bạn có hình ảnh ví dụ về những gì bạn đang học trong mỗi phần, bạn có thể tạo phần giới thiệu bài giảng hấp dẫn hơn nhiều.

Giới thiệu mục tiêu và tầm nhìn của bài giảng.

1. Giới thiệu bài giảng và các thiết lập cơ bản

  • Giới thiệu bài giảng

  • Cách cài đặt và định cấu hình Node.js, VSCode và Next.js.

  • Các khái niệm cơ bản về Git và các phương pháp kiểm soát phiên bản đơn giản.

2. Next.js và những điều cơ bản về dự án

  • Phương thức thực thi và cài đặt ban đầu của Next.js.

  • Giới thiệu về quản lý trạng thái cơ bản (useState) và định tuyến trang.

  • Mô tả cấu trúc loại trừ SSR dưới dạng dự án chỉ dành cho giao diện người dùng.


Các bước đầu tiên và cấu hình cơ bản của Next.js

Dự án máy vẽ số xổ số

3. Triển khai dự án và thiết kế giao diện người dùng


  • Thiết kế giao diện người dùng cơ bản : Thiết kế thành phần và thành phần giao diện người dùng đáp ứng với CSS Tailwind.

  • Quản lý trạng thái và liên kết dữ liệu : Thực hiện logic tạo số và quản lý trạng thái.

  • Đang tải xử lý : Đang tải các hiệu ứng hoạt hình và quản lý trạng thái bằng useEffect.

  • Kiểu dáng động : Kết xuất dữ liệu bằng cách sử dụng các chức năng kết xuất và bản đồ có điều kiện.

  • Cải thiện trải nghiệm người dùng : tải ngẫu nhiên các cụm từ, điều chỉnh thời gian hoạt ảnh và tối ưu hóa UX.

4. Chuẩn bị triển khai tĩnh

  • Cài đặt để triển khai tĩnh và cài đặt cơ bản về SEO.

  • Áp dụng logo và cấu hình bố cục.

  • Chuẩn bị triển khai thông qua gói (tạo tệp tĩnh).

Tùy chọn triển khai tĩnh

Hoàn thành triển khai tĩnh bằng S3

5. Triển khai tĩnh AWS S3

  • Tạo nhóm AWS S3 và thiết lập dịch vụ lưu trữ web tĩnh.


  • Tải tệp bản dựng lên và kiểm tra kỹ quá trình triển khai tĩnh.

  • Cách kiểm tra các dự án đã triển khai trong S3.

Những lưu ý trước khi tham gia khóa học

  • Bài giảng này được thực hiện bằng tiếng Anh và tất cả các video đều có phụ đề tiếng Hàn.

    • Nhờ cách phát âm tiếng Anh rõ ràng và rõ ràng, ngay cả những người mới bắt đầu cũng có thể dễ dàng theo dõi và nó có thể giúp bạn làm quen với thuật ngữ tiếng Anh và học tiếng Anh đơn giản.

    • Nhờ cách phát âm tiếng Anh rõ ràng và rõ ràng, ngay cả những người mới bắt đầu cũng có thể dễ dàng theo dõi và điều này có thể giúp họ làm quen với thuật ngữ tiếng Anh và học tiếng Anh đơn giản.


  • Khóa học này là khóa học cơ bản dành cho người mới bắt đầu.

    • Nó phù hợp cho những người mới bắt đầu phát triển web hoặc muốn hoàn thành một dự án đơn giản bằng Next.js và Tailwind CSS.

    • Ngay cả khi bạn chưa bao giờ làm quen với JavaScript trước đây, bạn vẫn có thể bắt đầu mà không gặp bất kỳ gánh nặng nào vì những điều cơ bản đã được giải thích trong bài giảng.

  • Môi trường phát triển cần chuẩn bị trước

    • Máy tính cá nhân (Windows, macOS).

    • Các công cụ cần thiết để cài đặt: Node.js, VSCode, Git (khóa học sẽ hướng dẫn bạn cài đặt).

  • Bài giảng này tập trung vào mặt trước.

    • Dự án được triển khai chỉ bằng CSS Next.js và Tailwind mà không có phần phụ trợ .

    • Nó chỉ bao gồm quy trình triển khai cơ bản (AWS S3) để triển khai tĩnh và không bao gồm thiết lập máy chủ nâng cao.

  • Cần có kết nối Internet.

    • Cần có kết nối Internet để thực hiện quy trình triển khai tĩnh bằng AWS S3.

  • Cung cấp thêm cơ hội học tập

    • Bạn có thể học các nhiệm vụ bổ sung không có trong bài giảng (thiết lập miền, Route 53 và tích hợp CloudFront) trong các bài giảng riêng biệt.

    • Điều này mang đến cho bạn cơ hội phát triển dựa trên những gì bạn đã học được trong khóa học này và đưa nó lên cấp độ tiếp theo.

Môi trường phòng thí nghiệm

1. Hệ điều hành và phiên bản (OS)

  • Windows : Khuyến nghị sử dụng Windows 10 trở lên (bài giảng này chủ yếu được thực hiện trong môi trường Windows).

  • macOS : khuyến nghị dùng macOS Catalina hoặc cao hơn.

  • Linux và các hệ điều hành khác được hỗ trợ nhưng nội dung bài giảng tập trung vào Windows.

2. Công cụ sử dụng

  • Visual Studio Code (VSCode) : Tải xuống và cài đặt miễn phí.

  • Node.js : Nên sử dụng phiên bản LTS (Hỗ trợ dài hạn) mới nhất.

  • Git : Một công cụ kiểm soát phiên bản cơ bản (bài giảng hướng dẫn bạn cài đặt).

  • AWS S3 : Yêu cầu tài khoản AWS để triển khai tĩnh (có thể sử dụng bậc miễn phí).

  • Thanh toán: Ban đầu, bạn có thể sử dụng AWS thông qua tài khoản miễn phí và nếu phát sinh thêm chi phí, thông tin riêng sẽ được cung cấp trong bài giảng.

3. Thông số kỹ thuật của PC (thông số kỹ thuật được khuyến nghị)

  • CPU : Intel i5 trở lên hoặc chip M1 trở lên (khuyên dùng đa lõi).

  • Bộ nhớ : RAM ít nhất 8GB (khuyến nghị: RAM 16GB).

  • Đĩa : Ít nhất 20GB dung lượng trống.

  • Card đồ họa : Không cần GPU hiệu suất cao riêng biệt (đồ họa tích hợp là đủ).

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

  • Mã nguồn tham chiếu được sử dụng trong khóa học có sẵn ở định dạng tệp ZIP hoặc thông qua liên kết kho lưu trữ GitHub .

  • Nếu cần, chúng tôi cũng sẽ chia sẻ tài liệu thông qua liên kết tải xuống Google Drive .


Kiến thức và biện pháp phòng ngừa của người chơi

1. Kiến thức cần thiết của người chơi

  • Khóa học này được thiết kế dành cho người mới bắt đầu hoàn thành .

  • Sẽ dễ dàng theo dõi hơn nếu bạn biết các khái niệm cơ bản về HTML, CSS và JavaScript cơ bản, nhưng vì các bài giảng chỉ giải thích nội dung cần thiết nên bạn có thể học ngay cả khi không có kiến ​​thức trước.


2. Chất lượng video bài giảng và phương pháp học được đề xuất

  • Chất lượng Video : Tất cả các bài giảng đều được sản xuất với chất lượng HD 1080pchất lượng âm thanh rõ ràng .

    • Nên kết nối internet ổn định để xem mượt mà.

  • Phương pháp học tập được đề xuất :

    • Chúng tôi khuyên bạn nên theo dõi các bài giảng và tự mình thực hành.

    • Vui lòng tham khảo mã nguồn được cung cấp và tìm hiểu bằng cách so sánh nó với mã của riêng bạn.

    • Nếu cần, hãy xem lại nội dung bài giảng nhiều lần và thực hành cho đến khi bạn hiểu hết nội dung bài giảng.


3. Cập nhật trong tương lai

  • Cập nhật trong tương lai :

    • Nội dung khóa học sẽ được bổ sung liên tục theo những cập nhật hoặc thay đổi kỹ thuật.

    • Mã nguồn cập nhật có sẵn trên GitHub.


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

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

  • Những người muốn học phát triển web bằng Next.js, React và Tailwind CSS

  • Người mới bắt đầu học lập trình

  • 간단한 웹 phát triển dự án muốn bắt đầu

Xin chào
Đây là

444

Học viên

17

Đánh giá

8

Trả lời

4.2

Xếp hạng

7

Các khóa học

안녕하세요, 주식회사 럿지의 대표입니다.


저는 스타트업, 금융권, 공공기관 등 다양한 분야에서 프로젝트를 진행하며,

개발뿐만 아니라 서비스를 직접 운영하는 경험을 쌓아왔습니다.

 

이 과정에서 팀원 및 프리랜서들과 협업하며 문제를 해결하고 프로젝트를 완성하는 능력을 길렀습니다.


특히, 단순히 개발자로서의 역할을 넘어서 자신의 서비스를 운영하고자 하는 꿈을 가진 분들께 더 많은 도움을 드릴 수 있다고 생각합니다.

 

완성의 즐거움과 성취감을 함께 경험하며 성장해 나가길 기대합니다. 감사합니다.

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

Tất cả

15 bài giảng ∙ (43phú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ả

4 đánh giá

4.0

4 đánh giá

  • ssmktr9286님의 프로필 이미지
    ssmktr9286

    Đánh giá 9

    Đánh giá trung bình 5.0

    5

    33% đã tham gia

    • jjhgwx님의 프로필 이미지
      jjhgwx

      Đánh giá 495

      Đánh giá trung bình 4.8

      5

      20% đã tham gia

      I will refer to this for learning React frontend! Thank you!

      • ludgi
        Giảng viên

        Thank you. I will provide better lectures in the future.

    • rimbaud131530님의 프로필 이미지
      rimbaud131530

      Đánh giá 1

      Đánh giá trung bình 1.0

      1

      40% đã tham gia

      入門者向けとあるが、内容で入門向けと言えるのはプログラムのインストールくらい…。

      • ludgi
        Giảng viên

        貴重な受講レビューありがとうございます。 いただいた内容を改善するよう努めます。

    238.791 ₫

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

    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!