강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Front-end

A beginner's front-end project using React and Next.js: Complete with Tailwind CSS and static deployment

This is an introductory course to the front end using Next.js and Tailwind CSS. It is designed to complete static deployment without a backend, so even beginners can experience the satisfaction of completion.

(4.0) 4 reviews

57 learners

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

What you will learn!

  • nextjs

  • tailwindcss

  • react

  • typescript

  • Static deployment to aws s3

Beginner Front-End Project with React and Next.js: Tailwind CSS and Static Deployment!



  • In this course, you will learn how to use TypeScript to build a Next.js and React-based front-end project reliably and efficiently.


  • TailwindCSS provides an experience that allows you to design quickly and easily and publish your own projects to the world through static deployment.


  • In this course, you will learn how to deploy a static website with AWS S3 . We will walk through setting up S3, uploading files, and deploying them in a simple way.


  • Many novice developers either fail to start a project or give up midway due to the burden of perfection and the huge amount of learning to do.

    This course is designed to address these issues by focusing on a simple, yet complete front-end project .

  • Next.js, TailWindCSS, aws-s3, TypeScript, React It provides a sense of accomplishment and the experience of static deployment by creating a project that can be completed without a backend.

  • The goal of this course is to help beginners experience the joy of development and find a direction to move forward .

  • This course is conducted in English , and all videos have Korean subtitles . With clear pronunciation and clear delivery, it is easy for beginners to understand, and it is also helpful for learning simple English . It provides a good opportunity to become familiar with the global development environment.


After taking the lecture, you can create results like this.

Main screen

This is the main screen of the lottery number draw machine designed with a simple UI. Learn how to style the main screen with Tailwind CSS.

Loading screen

Create a loading screen to display while the user waits for data to load or a specific task to complete.

Generate numbers and render data after loading is complete

After loading, you will learn how to generate random numbers, normalize them into a list, and render them on the screen.

Static deployment to S3 bucket

Learn how to statically deploy your completed project to AWS S3 .


  • Understanding the basics of React and Next.js
    You can design and implement a front-end project from start to finish using Next.js.

  • Quickly Styling Your UI with Tailwind CSS
    Design your UI quickly and efficiently with utility-based Tailwind CSS, without the hassle of complex CSS work.

  • Static deployment experience
    You can deploy your project using AWS S3 and check the actual deployed results with a URL.

  • The sense of accomplishment of completing a project
    The experience of completing and deploying a project gives you a sense of accomplishment in development.


Learning Contents

  • Please tell me what I will learn in the course. It would be good to explain what I will learn in each section.

  • If you have example images of what you'll learn in each section, you can create a much more engaging lecture introduction.

Introduce the objectives and vision of the course.

1. Lecture introduction and basic setup

  • Lecture introduction

  • How to install and set up Node.js, VSCode, and Next.js.

  • Basic concepts of Git and simple version control methods.

2. Next.js and Project Basics

  • How to set up and run Next.js.

  • Introduction to basic state management (useState) and page routing.

  • Structure description excluding SSR for a front-end-only project.


Next.js first steps and basic configuration

Lotto Number Drawer Project

3. Project implementation and UI design


  • Basic UI Design : Responsive UI composition and component design with Tailwind CSS.

  • State Management and Data Binding : Implementing number generation logic and managing state.

  • Loading handling : Managing loading state and animation effects using useEffect.

  • Dynamic styling : Rendering data using conditional rendering and map functions.

  • Improved user experience : randomized loading text, adjusted animation timing, and optimized UX.

4. Preparing static deployment

  • Settings for static deployment and basic SEO settings.

  • Apply logo and configure layout.

  • Preparing for distribution through bundling (generating static files).

Default settings for static deployment

Complete static deployment using S3

5. AWS S3 static deployment

  • Create an AWS S3 bucket and set up static web hosting.


  • Re-verify build file upload and static deployment.

  • How to check the deployed project in S3.

Things to note before taking the class

  • This course is conducted in English, and all videos include Korean subtitles.

    • The clean and clear English pronunciation makes it easy for beginners to follow, and it can also help you get used to English terms and learn simple English.

    • The clean and clear English pronunciation makes it easy for beginners to follow, and it can also help you get used to English terminology and learn simple English.


  • This course is an introductory course for beginners.

    • Perfect for those who are new to web development or want to complete a simple project using Next.js and Tailwind CSS.

    • Even if you have never worked with JavaScript before, you can get started without any pressure as the course covers the basics.

  • Development environment to prepare in advance

    • Personal computer (Windows, macOS).

    • Tools required for installation: Node.js, VSCode, Git (installation instructions are provided in the lecture).

  • This course focuses on the front end.

    • The project is implemented using only Next.js and Tailwind CSS, without any backend .

    • It only covers the basic deployment process (AWS S3) for static deployment and does not cover advanced server settings.

  • An Internet connection is required.

    • You will need an internet connection to follow the static deployment process using AWS S3.

  • Providing additional learning opportunities

    • Additional tasks not covered in the course (domain setup, Route 53 and CloudFront integration) can be covered in separate courses.

    • This course provides an opportunity to take what you have learned to the next level.

Practice environment

1. Operating System and Version (OS)

  • Windows : Windows 10 or higher recommended (this course is primarily conducted in a Windows environment).

  • macOS : macOS Catalina or later recommended.

  • Linux and other OS are supported, but the course content is centered around Windows.

2. Tools to use

  • Visual Studio Code (VSCode) : Free to download and install.

  • Node.js : The latest LTS (Long-Term Support) version is recommended.

  • Git : Basic version control tool (installation method is explained in the lecture).

  • AWS S3 : Requires an AWS account for static deployment (can proceed with free tier).

  • Billing: AWS is available for initial use through a free account, and any additional costs will be separately notified in the course.

3. PC specifications (recommended specifications)

  • CPU : Intel i5 or higher or M1 chip or higher (multi-core recommended).

  • Memory : Minimum 8GB RAM (Recommended: 16GB RAM).

  • Disk : At least 20GB free space.

  • Graphics Card : No separate high-performance GPU required (integrated graphics are sufficient).

Learning Materials

  • Reference source code used in the lecture is provided in ZIP file format or via GitHub repository link .

  • We will also share the materials as Google Drive download links as needed.


Player Knowledge and Notes

1. Essential Player Knowledge

  • This course is designed for complete beginners .

  • If you have a basic understanding of HTML, CSS, and JavaScript, you will find it easier to follow, but the lectures will briefly explain the necessary content, so you can learn without prior knowledge.


2. Lecture video quality and recommended learning methods

  • Video Quality : All lectures are produced in 1080p HD quality with clear audio .

    • A stable internet connection is recommended for smooth viewing.

  • Recommended study method :

    • I recommend that you follow the lecture and practice it yourself.

    • Learn by referring to the provided source code and comparing it with your own code.

    • If necessary, watch the lecture content repeatedly and practice until you fully understand it.


3. Future updates

  • Future updates :

    • The lecture content will be continuously supplemented according to technological updates or changes.

    • The updated source code is available on GitHub.


Recommended for
these people

Who is this course right for?

  • People who want to learn web development with Next.js, React, and Tailwind CSS

  • People who are new to coding

  • People who want to start with a simple web development project

Hello
This is

462

Learners

19

Reviews

8

Answers

4.1

Rating

7

Courses

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


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

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

 

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


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

 

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

Curriculum

All

15 lectures ∙ (43min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

4 reviews

4.0

4 reviews

  • 대성님의 프로필 이미지
    대성

    Reviews 2

    Average Rating 5.0

    5

    33% enrolled

    • 김태령님의 프로필 이미지
      김태령

      Reviews 9

      Average Rating 5.0

      5

      33% enrolled

      • Jang Jaehoon님의 프로필 이미지
        Jang Jaehoon

        Reviews 525

        Average Rating 4.8

        5

        20% enrolled

        리액트 프론트엔드 학습에 참조하겠습니다! 감사합니다!

        • ludgi
          Instructor

          감사합니다. 앞으로 더 좋은강의를 제공하겠습니다.

      • rimbaud13님의 프로필 이미지
        rimbaud13

        Reviews 1

        Average Rating 1.0

        1

        40% enrolled

        입문자용이라고 하나 내용 중 입문용은 프로그램 설치 뿐...

        • ludgi
          Instructor

          소중한 수강평 감사합니다. 해당 내용을 개선하도록 노력하겠습니다.

      $8.80

      ludgi's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!