강의

N
챌린지

멘토링

N
클립

로드맵

BEST
Programming

/

Front-end

[Code Camp] The 'Perfect' Frontend Course Created at Bootcamp

This is the perfect frontend curriculum from a 'real' bootcamp that has produced hundreds of developers. With this single course, you can grow to the level of a junior developer in the field, and you'll gain the ability and knowledge to utilize frontend technology stacks. [Code Camp] has prepared this so that anyone can build their career regardless of their social, economic, or educational background :)

(5.0) 15 reviews

463 learners

Level Beginner

Course period Unlimited

React
React
Next.js
Next.js
GraphQL
GraphQL
React Native
React Native
Hybrid App
Hybrid App
React
React
Next.js
Next.js
GraphQL
GraphQL
React Native
React Native
Hybrid App
Hybrid App

What you will gain after the course

  • Preparing for Advanced Courses with Kind [CSS&Javascript]

  • Utilizing the Latest Tech Stack for [Web Frontend]

  • Practical Skills for [Hybrid App Frontend]

  • 2 mini portfolios, 2 professional portfolios

  • Complete Understanding of the Overall Development Cycle

Even non-majors with no background
⭐ Career jump to frontend developer ⭐

비주얼배너(격자 3개)

💥Attention!

This course is actually used in coding bootcamps, so 'you may feel some of the real-world atmosphere.'
The curriculum is designed to be accessible to everyone from complete beginners and non-majors to junior developers.

Created in a 'real' bootcamp
[The Perfect Frontend Course] is

"I don't know the first thing about coding... Can I get a job as a developer?" Put those worries aside right now.
This course starts with solid foundational lessons so that even complete beginners can grow to the level of professional developers!

The 'High-Concentration Frontend Course' chosen by over 2,000 students both online and offline
has been updated even more powerfully and returns as the 'Perfect Frontend Course'😀

🎯With just the 'Complete Pro' course, you can learn from the basics to web and even hybrid apps through a perfect course.

3. 시작은 프리캠프 커버이미지

The beginning was Free Camp

  • Over 4,000 students have taken this best beginner-friendly course.

  • What is coding? From program installation to building foundations

  • Learn the basics and application of web structure, HTML, CSS, and Javascript.


    ✅ Project: Sign Up, Mini Homepage


CSS&JS Master 커버이미지

CSS&JS Master🆕

  • Beyond the basics, learn CSS and Javascript that you can apply in real-world projects.

  • You can master CSS through over 60 of the latest properties.

  • You can master Javascript through practical feature implementation.


    ✅ Project: Trendy Dashboard Diary

WEB FRONT-END 커버이미지

Web Frontend Bootcamp 🆕

  • Providing the representative frontend lecture from the coding bootcamp 'Code Camp' as is

  • Learn the latest React, Next, and libraries for 2025.


  • Over 100 hours of meticulous and systematic step-by-step practical curriculum


    ✅ Project: Community and Product Purchase Platform for Travelers 'Travel Platform'

Hybrid App 커버이미지

Hybrid App Bootcamp🆕

  • We offer the first-ever bootcamp hybrid app course!

  • Implement hybrid apps using React Native and Expo.

  • Meet the best portfolio builder and your own hybrid app mentor.


    ✅ Project:Complete a 'Travel Platform' with a Hybrid App

For these people,
it's absolutely perfect

A to Z
Not just a 10-hour conceptual lecture
I want a 'real' professional course.

Development..?
I don't know anything, but I want to grow properly to employment level.

Huh?! Forbidden~
I really need
my own mentor who teaches me thoroughly.

For a higher career jump,
we provide bootcamp course materials and assignments

Are you taking online classes but feel like there aren't enough assignments?
We provide the same learning materials and assignments used in bootcamps.

If you follow the lectures, review the learning materials, and complete the section assignments well, you can expect tremendous growth😁

섹션별 학습자료 이미지

Providing Detailed Learning Materials (Notion)

📑Learning Materials by Section

This is material that helps you understand the content while taking the course. Since it's the actual material used in the bootcamp, if you use it well, it will be a great help to ensure you don't miss anything.

디자인 가이드

Design materials provided for the class (Figma)

📑Design Guide

We provide essential designs that are crucial for frontend classes. You can build your portfolio by following the designs exactly, and if you can add additional features, you'll be able to achieve even greater growth.

섹션별 과제 이미지

Tasks clearly divided by section

📑Clear Assignments for Each Section

We guide you through clear assignments for each section, just like a bootcamp at home. Follow the assignments diligently and add practical projects to your portfolio!

✅Reference code is also provided for basic assignments.

Complete your portfolio
with code written by your own hands.

In 'Perfect Frontend', the curriculum is structured so that you can complete a project for each course, enabling focused growth. With a step-by-step curriculum that everyone can understand, as you follow along with the lectures while building actual projects, not only will you gain a sense of achievement, but your skills will also improve, right?

시작은 프리캠프 포폴 이미지 (1)

The beginning is Free Camp

Complete a Cyworld project to practice basic HTML, CSS, and JavaScript.

CSS&JS 포폴 이미지 (1)

CSS&JS Master

Complete a trendy dashboard journal where you can record your emotions.

숙소예약 포폴 이미지 (1)

Web Frontend Bootcamp

Complete the traveler bulletin board 'TripTalk' faithful to CRUD and the 'Travel Platform' where you can purchase accommodation products.

하이브리드앱 포폴 이미지 (1)

Hybrid App Bootcamp

Now, complete the 'Travel Platform' as a hybrid app.

Core Technologies of Frontend
Why Should We Use React.js and Next.js?


Next.js is a framework for the React library. Unlike React, Next.js fundamentally performs Server-Side Rendering (SSR), making it great for Search Engine Optimization (SEO). Additionally, through pre-rendering, it allows you to fetch pages with data rendered in advance, which is also advantageous in terms of user experience.

In addition to this, it provides page-based routing, image optimization, built-in CSS, and more to improve project performance, and offers a developer-friendly environment, enabling efficient and high-performance development 😊

Finally, now is the era of hybrid apps!
Based on React and Next, you can develop hybrid apps more conveniently and efficiently using React Native and Expo, and build services for Android and iOS.

Moreover, with just one full-package course
you can get this much of a stack all at once!

In this course, you'll learn by working on projects that utilize not only React and Next.js, but also various major stacks such as TypeScript and GraphQL. As you implement each feature, you'll learn how to use organically connected languages, naturally gaining an understanding of diverse technology stacks.

Because in real-world work, you need to be able to use various languages and technology stacks appropriately to achieve maximum efficiency!


*version: These are the main stack versions used in the course. (Please refer to them if needed!)

-"next": "14.2.13",
-"react": "^18",
-"react-dom": "^18",
-"typescript": "^5"
-"@apollo/client": "^3.11.8",
-"graphql": "^16.9.0",
-"react-hook-form": "^7.53.1",
-"zod": "^3.23.8",
-"zustand": "^5.0.0",
-"tailwindcss": "^3.4.1",

It's okay if you don't understand 'Version' and these tech stacks. I'll explain everything thoroughly and kindly in the course 😊

A 'Boundary-Pushing' Frontend Bootcamp Curriculum
That Doesn't Miss a Single Gap

💡It covers everything from React basics to core concepts. Check out the key content of the web curriculum💡

1. React와 Next.js

#01. React and Next.js

You can learn React 18 from the basics to the core concepts with significant upgrades. You'll install various packages, understand Node.js as a JavaScript runtime environment, and create projects with React and Next.

2. JS와 비동기핵심

#02. JS and Asynchronous Core

Let's learn about scope, closure, hoisting, event loop, the relationship between await and microtask queue, and state rendering through browser practice.

3. 컴포넌트 설계

#03. Component Design

Design and implement shared components using TypeScript and utility/generic types, and deploy them via npm to enable sharing between user and admin projects.

4. 캐시

#04. Cache

Learn about server data caching practices based on fetch policies and Shallow-Routing to optimize local data caching.

5. 로그인과 보안

# #05. Login and Security

You can practice using accessToken and refreshToken, defending against localStorage token theft and XSS attacks, and create a proxy API based on understanding CORS and CSRF.

6. 심화기능1

#06. Advanced Features

We'll practice payment, maps and postal codes, and editors. We also provide backend APIs for real-world practice.

7. 성능 최적화

#07. Performance Optimization

You can learn and apply 10 performance optimization techniques for frontend development. (Memoization, prefetch, preload, windowing, etc.)

8. 프론트엔드 서버

#08. Frontend Server

Based on understanding SSR/CSR and hydration,
we'll proceed with React 18 RCC/RSC refactoring and apply it to the project.

9. 테스트

#09. Test

You can perform API mocking tests using MSW and E2E tests using Playwright.

10. 웹 배포

#10. Web Deployment

We'll practice deploying static sites to AWS S3 and dynamic sites to EC2 with HTTPS, based on browser operation principles, networking, and Docker.

⭐Now is the era of hybrid apps! Check out the key content of the [Android/iOS] app curriculum⭐

11. 모바일 CSS 구조

# 01. Mobile CSS Structure

You can learn CSS structure design for handling various device sizes, common headers, scroll-based footer responses, and tablet expansion.

12웹_앱 통신

#02. Web/App Communication

Learn how to design and implement API structures for communication between apps and web applications.

13. 심화기능2

# 03. Advanced Features

You can learn and practice app notifications, location information, device information, camera, Android back button, and permission changes.

14. 마이크로 프론트엔드

#04. Micro Frontends

Based on an understanding of various micro-frontend approaches, you can learn and practice domain separation in webviews and cache sharing between webviews.

15. 앱 로그인

#05. App Login

You can learn and practice how to use accessToken and refreshToken, practice token theft from asyncStorage using rooting, and securely store tokens in SharedPreference and keychain.

16. 앱 배포

#06. App Deployment

We will understand the hybrid app deployment process and practice test deployment.

[The Perfect Frontend Course]
After completing it, I'm a developer too!

[[SPAN_1]]🙆🏻‍♀️ 실무에 바로 활용할 수 있는 [[/SPAN_1]][[STRONG_2]]포트폴리오 2개[[/STRONG_2]]

👨🏻‍🎓 Building solid development knowledge that enables self-growth (especially growing to know what to search and which keywords to use!)

💁🏻‍♀️ A junior developer who practices smooth communication in the workplace

🙋🏻‍♀️ You can do it alone Web Platform Development

👨🏻‍💻 Hybrid App Development You Can Do Alone (Android, iOS)

For a higher career jump,
we've also prepared practical [Vibe Coding] courses.

Related Recommended Courses:

If you've understood the latest frontend technology stack and development cycle using the practice API, now it's time to learn how to develop frontend quickly and reliably with systematic vibe coding! Vibe coding applicable to real work is essential both for practical application and as a job portfolio🚀

Wait!
Please check before enrolling.

💡 Please check your computer specifications.

· Mac OS works regardless of specifications.
· If using Windows OS, git-bash installation is required.
 - Please refer to Course Materials > Environment Setup.
 - Intel Core i5 9th generation or higher / AMD RYZEN 5 2nd generation or higher

- 16GB RAM or more recommended

💡We recommend creating a daily schedule to study regularly and consistently.
💡Please create a 'Notion' account to receive learning materials.
💡Learning materials required for the course are provided via Notion (link).
※ The copyright of the learning materials belongs to Code Camp. Unauthorized use, distribution, and reproduction are prohibited.

Do you have
any questions?

Q. Can I take the course without any prior knowledge?

Yes. It's okay even if you don't know the first thing about coding. We provide 'Start with Free Camp', a complete beginner's course to help you understand more deeply and broadly, and 'CSS&JS Master Course', an intermediate course to prepare you for the bootcamp.


Q. If I have basic knowledge, where should I start taking the course?

If you understand basic HTML, CSS, and Javascript, I recommend starting with the 'CSS&JS Master Course'. However, if you have a solid foundation in CSS and Javascript from government-funded education or other online courses, you can start directly with the 'Web Frontend Bootcamp'.


Q. Is there an efficient way to take the Web Frontend Bootcamp course?

  1. Please take the lectures section by section! On average, each section is divided into 3-5 subtopics. Since this is a systematic course, I recommend creating a daily schedule and studying regularly!

  2. If there are learning assignments, please complete them! Learning assignments are divided into sections with and without them. Completing the learning assignments before working on your portfolio project will be helpful!

  3. Please complete the required assignments (portfolio projects)! The required assignments provided for each section based on the section content are essential for creating your portfolio! However, reference code is only provided up to the midpoint! Please keep in mind that after that point, you must be able to write all the code yourself to truly use it as a portfolio.



Q. What is a stepped curriculum?

The Perfect Frontend curriculum has a continuous lecture structure that builds upon each other!
For example, to take [Section 26-02 Refresh Token], you need to copy the code written in [Section 23-07] and continue the lesson. In other words, you must have taken [Section 23-07] to write the code, and you should also have reviewed it to understand what that code is, right?

Don't worry if you want to skip certain sections and take the sections you're curious about! The instructor's lesson code is provided separately for download! However, if you downloaded the code instead of writing it yourself through the lessons, please keep in mind that you must be able to understand that code to follow along well!


Q. I have questions while taking the course.

Please leave your question in the community. I'll provide you with a satisfying answer as soon as possible😁

Introducing
Team Code Camp.

14.코드캠프 소개이미지
15. 노원두 소개이미지

Recommended for
these people

Who is this course right for?

  • Anyone who wants to grow properly with a professional curriculum

  • Anyone who feels that government-funded programs or other courses are insufficient

  • Anyone who wants to study coding systematically with sufficient assignments

  • The Junior Developer That Senior Developers Need

  • Job seekers who want to build a portfolio that matches current trends

Need to know before starting?

  • Passion and determination for coding💪🏻

Hello
This is codecamp

Inflearn Verified

15,869

Learners

502

Reviews

232

Answers

4.8

Rating

15

Courses

"Try anything, Try everything!"

Code Camp aims to cultivate competent developers and change the future of development. We have arrived on Inflearn to provide career transition opportunities to everyone, regardless of their social, economic, or educational background. Take on the challenge of a career jump with Code Camp!

More

Co-instructor

Curriculum

All

444 lectures ∙ (162hr 6min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

15 reviews

5.0

15 reviews

  • starmagic22066311님의 프로필 이미지
    starmagic22066311

    Reviews 21

    ∙

    Average Rating 4.8

    5

    30% enrolled

    Because you explained much more thoroughly and in detail than other lectures, I think I was able to follow along well!!! I'll power through the remaining lectures!!!

    • arnold4778님의 프로필 이미지
      arnold4778

      Reviews 5

      ∙

      Average Rating 5.0

      5

      50% enrolled

      I'm really enjoying the content! I have 50% of the course left, but I'm going to conquer it all the way to the end.

      • saintjoker040059님의 프로필 이미지
        saintjoker040059

        Reviews 6

        ∙

        Average Rating 4.5

        5

        60% enrolled

        • wltjd20268146님의 프로필 이미지
          wltjd20268146

          Reviews 2

          ∙

          Average Rating 5.0

          5

          60% enrolled

          • jolo님의 프로필 이미지
            jolo

            Reviews 4

            ∙

            Average Rating 5.0

            5

            30% enrolled

            codecamp's other courses

            Check out other courses by the instructor!

            [Code Camp] Warm JavascriptCourse Thumbnail

            [Code Camp] Warm Javascript

            codecamp

            There are many other languages.. Why JavaScript? JavaScript is the most widely used language in the world, and it has an easy-to-understand structure that even non-majors can learn quickly. In addition, famous companies such as Google, PayPal, and Amazon use it! Do you need to think any further?

            Beginner

            Beginner

            JavaScript

            [Code Camp] Warm JavascriptCourse Thumbnail

            [Code Camp] Warm Javascript

            codecamp

            Hybrid App with Expo Framework to Increase Web Developer's SalaryCourse Thumbnail

            Hybrid App with Expo Framework to Increase Web Developer's Salary

            codecamp

            This course will help you develop mobile apps that can be serviced on Android and iOS using web development.

            Basic

            Basic

            React, Next.js, expo

            Hybrid App with Expo Framework to Increase Web Developer's SalaryCourse Thumbnail

            Hybrid App with Expo Framework to Increase Web Developer's Salary

            codecamp

            [VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)Course Thumbnail

            [VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)

            codecamp

            Throw away those simple services you can make with vibe coding in just 10 minutes! You can learn 'real' practical vibe coding. Let's create advanced services at the level of actual services according to planning and design with Cursor AI NCOP. No Code, Only Prompt

            Intermediate

            Intermediate

            React, Next.js, cursor

            [VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)Course Thumbnail

            [VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)

            codecamp

            [CSS&JS Master] - Create a trendy emotional diaryCourse Thumbnail

            [CSS&JS Master] - Create a trendy emotional diary

            codecamp

            You can learn the latest CSS properties and practical Javascript while working on a project.

            Beginner

            Beginner

            HTML/CSS, JavaScript, vanilla-javascript

            [CSS&JS Master] - Create a trendy emotional diaryCourse Thumbnail

            [CSS&JS Master] - Create a trendy emotional diary

            codecamp

            [Code Camp] Javascript Algorithm Theory + Practice for BeginnersCourse Thumbnail

            [Code Camp] Javascript Algorithm Theory + Practice for Beginners

            codecamp

            Algorithms seem so difficult... Even students who are not good at math can finish the basics of algorithms in one go with this class! We will teach you the basic concepts needed to solve algorithms step by step, and even Codecamp's know-how on applying them to problems :)

            Basic

            Basic

            JavaScript

            [Code Camp] Javascript Algorithm Theory + Practice for BeginnersCourse Thumbnail

            [Code Camp] Javascript Algorithm Theory + Practice for Beginners

            codecamp

            [Code Camp] Highly concentrated backend course created at boot campCourse Thumbnail

            [Code Camp] Highly concentrated backend course created at boot camp

            codecamp

            This is a curriculum full of Captain's personal feelings, an 8-year full-stack developer who fell in love with coding. It is filled with Captain's desire to teach everything about the backend! As you listen to this lecture, you will find yourself thinking, 'Does he really teach this much?' Let's start with this lecture that thoroughly explains even the parts that everyone finds difficult.

            Beginner

            Beginner

            NestJS, Node.js, JavaScript

            [Code Camp] Highly concentrated backend course created at boot campCourse Thumbnail

            [Code Camp] Highly concentrated backend course created at boot camp

            codecamp

            [Code Camp] A highly concentrated front-end course created at BootcampCourse Thumbnail

            [Code Camp] A highly concentrated front-end course created at Bootcamp

            codecamp

            This is a highly concentrated curriculum from a ‘real’ bootcamp that has produced over 300 developers in a year. With just this one class, you will be able to grow to the level of a junior developer in the field and gain the ability and knowledge to use the front-end technology stack. [InflearnX Code Camp] has prepared this so that anyone can build a career regardless of their social, economic, or educational background :)

            Beginner

            Beginner

            React, Next.js, GraphQL

            [Code Camp] A highly concentrated front-end course created at BootcampCourse Thumbnail

            [Code Camp] A highly concentrated front-end course created at Bootcamp

            codecamp

            [Code Camp] Powerful CSSCourse Thumbnail

            [Code Camp] Powerful CSS

            codecamp

            Have you seen a lecture that only collects CSS? In this lecture, you will implement everything from the most basic layout composition to responsiveness while working on a total of two projects! Now, if you are ready, let's get started.

            Basic

            Basic

            HTML/CSS

            [Code Camp] Powerful CSSCourse Thumbnail

            [Code Camp] Powerful CSS

            codecamp

            [Code Camp] Start with Pre-CampCourse Thumbnail

            [Code Camp] Start with Pre-Camp

            codecamp

            This course is made with the exclusive curriculum of Coding Bootcamp. It consists of the most basic and practical contents. Start with this course, ‘Anyone can change careers to become a developer.’

            Beginner

            Beginner

            HTML/CSS, JavaScript

            [Code Camp] Start with Pre-CampCourse Thumbnail

            [Code Camp] Start with Pre-Camp

            codecamp

            Similar courses

            Explore other courses in the same field!

            [Code Camp] A highly concentrated front-end course created at BootcampCourse Thumbnail

            [Code Camp] A highly concentrated front-end course created at Bootcamp

            codecamp

            This is a highly concentrated curriculum from a ‘real’ bootcamp that has produced over 300 developers in a year. With just this one class, you will be able to grow to the level of a junior developer in the field and gain the ability and knowledge to use the front-end technology stack. [InflearnX Code Camp] has prepared this so that anyone can build a career regardless of their social, economic, or educational background :)

            Beginner

            Beginner

            React, Next.js, GraphQL

            [Code Camp] A highly concentrated front-end course created at BootcampCourse Thumbnail

            [Code Camp] A highly concentrated front-end course created at Bootcamp

            codecamp

            Bite-sized Next.jsCourse Thumbnail

            Bite-sized Next.js

            winterlood

            The 3rd installment of the "One Bite" series! This is the world's most friendly and detailed Next.js course. We will explore not only the App Router but also the Page Router through hands-on projects.

            Basic

            Basic

            React, TypeScript, Next.js

            Bite-sized Next.jsCourse Thumbnail

            Bite-sized Next.js

            winterlood

            Hybrid App with Expo Framework to Increase Web Developer's SalaryCourse Thumbnail

            Hybrid App with Expo Framework to Increase Web Developer's Salary

            codecamp

            This course will help you develop mobile apps that can be serviced on Android and iOS using web development.

            Basic

            Basic

            React, Next.js, expo

            Hybrid App with Expo Framework to Increase Web Developer's SalaryCourse Thumbnail

            Hybrid App with Expo Framework to Increase Web Developer's Salary

            codecamp

            [VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)Course Thumbnail

            [VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)

            codecamp

            Throw away those simple services you can make with vibe coding in just 10 minutes! You can learn 'real' practical vibe coding. Let's create advanced services at the level of actual services according to planning and design with Cursor AI NCOP. No Code, Only Prompt

            Intermediate

            Intermediate

            React, Next.js, cursor

            [VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)Course Thumbnail

            [VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)

            codecamp

            Practical React Native for iOS/Android App Development - BasicCourse Thumbnail

            Practical React Native for iOS/Android App Development - Basic

            Wintho

            The goal is to acquire basic knowledge of React Native for mobile app front-end development. This course is designed to enable non-experts to easily develop native mobile apps by utilizing languages/APIs with low entry barriers.

            Basic

            Basic

            React Native, React, ES6

            Practical React Native for iOS/Android App Development - BasicCourse Thumbnail

            Practical React Native for iOS/Android App Development - Basic

            Wintho

            [Full-Stack Completion] Clone 3 Websites with Supabase (Next.js 14)Course Thumbnail

            [Full-Stack Completion] Clone 3 Websites with Supabase (Next.js 14)

            lopun

            Supabase, the wings for your full-stack development! Through three clone projects, you will quickly learn how to perform professional-level full-stack development using Next.js 14 and Supabase.

            Basic

            Basic

            Next.js, supabase, TailwindCSS

            [Full-Stack Completion] Clone 3 Websites with Supabase (Next.js 14)Course Thumbnail

            [Full-Stack Completion] Clone 3 Websites with Supabase (Next.js 14)

            lopun

            A real introductory all-in-one development boot camp for non-majorsCourse Thumbnail

            A real introductory all-in-one development boot camp for non-majors

            grab

            The ultimate full-stack course that teaches even beginners about web, server, mobile apps, and machine learning!! If you're not sure where to start with development, I highly recommend this course. It's all done with just Javascript!

            Beginner

            Beginner

            JavaScript, React, Node.js

            A real introductory all-in-one development boot camp for non-majorsCourse Thumbnail

            A real introductory all-in-one development boot camp for non-majors

            grab

            SEO Optimized Landing Page Solution & Exposure Strategy: Complete with Vibe Coding using Next.jsCourse Thumbnail

            SEO Optimized Landing Page Solution & Exposure Strategy: Complete with Vibe Coding using Next.js

            ludgi

            Complete a company introduction landing page with hands-on vibe coding. Using Cursor AI + Next.js + TypeScript + TailwindCSS + shadcn/ui + MCP stack, proceed from design to deployment all at once. The key is "fast implementation + SEO foundation that performs well in search engines." 🏁 Course Objectives Landing creation → Performance optimization → SEO implementation → Deployment/Indexing Real-time coding (vibe coding) to immediately check completed sections Direct experience including search indexing 🛠️ Practice Stack Cursor AI, Next.js(App Router), TypeScript TailwindCSS, shadcn/ui, MCP workflow 🔍 SEO Practice Apply SEO optimization MD files provided by instructor Metadata, OG/Twitter cards, robots/sitemap, structured data (JSON-LD) Optional multilingual routing implementation 🎯 Final Product Responsive company introduction landing + contact form Target Lighthouse 95+ Vercel deployment followed by Search Console registration and indexing request 📚 What You'll Learn from This Course How to quickly compose hero/trust/features/FAQ sections Clean UI composition with shadcn/ui Form validation and basic conversion tracking point design Boosting SEO scores with structured data + multilingual routing Understanding the indexing process through Search Console after deployment 💡 Industry Insights (Course Bonus) Beyond just code implementation, we'll briefly cover marketing and exposure methods actually used in the real market. Realistic pricing ranges for advertising, blog posting, and comment work How outsourcing and contracting companies actually proceed with SEO and exposure work Cost/efficiency differences between direct developer participation and outsourcing Through this section, you can develop a sense of how technology is actually utilized in real industry work and what cost structures drive it, beyond just the technical aspects. One-Line Summary Following the flow of "implementation → optimization → deployment → indexing," learn the web creation process that connects to actual search exposure and real industry market structures.

            Beginner

            Beginner

            React, Node.js, cursor

            SEO Optimized Landing Page Solution & Exposure Strategy: Complete with Vibe Coding using Next.jsCourse Thumbnail

            SEO Optimized Landing Page Solution & Exposure Strategy: Complete with Vibe Coding using Next.js

            ludgi

            # [Electron #1] Building a Timer App with Electron + React (With Zustand)Course Thumbnail

            # [Electron #1] Building a Timer App with Electron + React (With Zustand)

            dakgangjung123

            This is a practical course where you will directly create a timer app using React, Electron, and Zustand, and even deploy it to cross-platforms (Windows, macOS, Linux). Starting with familiar React web development, you can learn the entire flow of desktop app development, including global state management via Zustand and final GUI deployment!

            Basic

            Basic

            React, Electron, GUI

            # [Electron #1] Building a Timer App with Electron + React (With Zustand)Course Thumbnail

            # [Electron #1] Building a Timer App with Electron + React (With Zustand)

            dakgangjung123

            Things They Don't Teach You in Bootcamps (React Rendering Optimization) Part 2Course Thumbnail

            Things They Don't Teach You in Bootcamps (React Rendering Optimization) Part 2

            aftercamp

            Master React rendering principles and optimization to apply them in real-world situations and prepare for interviews!

            Intermediate

            Intermediate

            React, react-usememo, Tech Interview

            Things They Don't Teach You in Bootcamps (React Rendering Optimization) Part 2Course Thumbnail

            Things They Don't Teach You in Bootcamps (React Rendering Optimization) Part 2

            aftercamp

            Creating Web Services with Vibe Coding With Claude CodeCourse Thumbnail

            Creating Web Services with Vibe Coding With Claude Code

            ref63184917

            A current startup CTO will share vibe coding knowledge gained through actual services and various outsourcing projects.

            Beginner

            Beginner

            HTML/CSS, JavaScript, Next.js

            Creating Web Services with Vibe Coding With Claude CodeCourse Thumbnail

            Creating Web Services with Vibe Coding With Claude Code

            ref63184917

            OK even if you only know HTML/CSS/JS! A hands-on project completed with React and FirebaseCourse Thumbnail

            OK even if you only know HTML/CSS/JS! A hands-on project completed with React and Firebase

            ezweb

            This course teaches you how to build a web application using React and Firebase, implementing core features used in real-world services such as login, post management, file uploading, and profile management. You will build a complete web service step-by-step, implementing email and social login via Firebase Authentication, Firestore-based data storage and real-time data processing, file uploading using Firebase Storage, and profile management features. This course is designed for frontend developers to understand how to quickly implement web services using Firebase without the need for complex server construction.

            Basic

            Basic

            React, Firebase, firebase-firestore

            OK even if you only know HTML/CSS/JS! A hands-on project completed with React and FirebaseCourse Thumbnail

            OK even if you only know HTML/CSS/JS! A hands-on project completed with React and Firebase

            ezweb

            The Complete Guide to Python/Django Web Service Development with React (Based on Django 4.2)Course Thumbnail

            The Complete Guide to Python/Django Web Service Development with React (Based on Django 4.2)

            pyhub

            Solidify your foundation in Python/Django web service development. Learning Django takes time, but you can maximize your productivity through iterative development. Turn your imagination into reality.

            Basic

            Basic

            Python, Django, React

            The Complete Guide to Python/Django Web Service Development with React (Based on Django 4.2)Course Thumbnail

            The Complete Guide to Python/Django Web Service Development with React (Based on Django 4.2)

            pyhub

            Complete Mastery of GraphQL (Full-stack Course Learning by Building a Kiosk) - [2024 Partial Renewal]Course Thumbnail

            Complete Mastery of GraphQL (Full-stack Course Learning by Building a Kiosk) - [2024 Partial Renewal]

            Indie Coder

            You will learn the basics and advanced usage of GraphQL, the next-generation API control technology, and gain real-world project experience through a virtual kiosk service created with GraphQL. The course has been partially updated to the latest version, apollo-server v4, as of February 2024.

            Basic

            Basic

            GraphQL, Svelte, MongoDB

            Complete Mastery of GraphQL (Full-stack Course Learning by Building a Kiosk) - [2024 Partial Renewal]Course Thumbnail

            Complete Mastery of GraphQL (Full-stack Course Learning by Building a Kiosk) - [2024 Partial Renewal]

            Indie Coder

            Database Learning through Practice: Building a Medication Reminder App (SQLite & React Native Expo)Course Thumbnail

            Database Learning through Practice: Building a Medication Reminder App (SQLite & React Native Expo)

            Kyo

            We are developing a medication reminder app using React Native. Based on learning the basics of databases and SQL syntax, we will build an app that manages data using SQLite and proceed all the way to store deployment.

            Basic

            Basic

            React Native, SQLite, database

            Database Learning through Practice: Building a Medication Reminder App (SQLite & React Native Expo)Course Thumbnail

            Database Learning through Practice: Building a Medication Reminder App (SQLite & React Native Expo)

            Kyo

            From MVP to Deployment and Monetization! Next.js × LLM API Practical SeriesCourse Thumbnail

            From MVP to Deployment and Monetization! Next.js × LLM API Practical Series

            dxers

            While LLMs are currently transforming the development environment, what truly matters is not just "writing code on your behalf" but integrating them as features into a service. This course provides a step-by-step guide to implementing a lightweight yet polished Tarot reading service using Next.js and the OpenAI API. In the first stage, we will build an MVP that works without a backend, connecting the user input flow (questions/threads/card selection) to result generation. In subsequent stages, we will expand the functionality by building a backend, implementing general login and OAuth, adding community features, and creating a reading dashboard. Finally, we will conclude by deploying to AWS and integrating Google AdSense to complete a service ready for actual operation. Additionally, we will cover understanding pricing structures and cost optimization strategies to ensure that LLM API usage costs do not become a burden.

            Basic

            Basic

            AWS, Google Ads, Next.js

            From MVP to Deployment and Monetization! Next.js × LLM API Practical SeriesCourse Thumbnail

            From MVP to Deployment and Monetization! Next.js × LLM API Practical Series

            dxers

            Vibe Coding: Building a Voice Memo App with Next.js + FastAPI + Faster-WhisperCourse Thumbnail

            Vibe Coding: Building a Voice Memo App with Next.js + FastAPI + Faster-Whisper

            ludgi

            This is a practical project course on running Whisper locally and quickly developing an AI speech recognition app using FastAPI and Next.js. You'll implement real-time speech recognition and complete a project that can be used as a simple portfolio piece in a short amount of time.

            Basic

            Basic

            Next.js, FastAPI, whisper

            Vibe Coding: Building a Voice Memo App with Next.js + FastAPI + Faster-WhisperCourse Thumbnail

            Vibe Coding: Building a Voice Memo App with Next.js + FastAPI + Faster-Whisper

            ludgi

            Building Claude Code with TypeScript from ScratchCourse Thumbnail

            Building Claude Code with TypeScript from Scratch

            Hiro Son

            "Why did the AI write this code?" or "Why can't it remember what I just said?" The frustration you encounter when using AI tools like Claude Code stems from not knowing how the tool actually works. This course flings open that black box. Over 25 lessons, we will build our own Coding Agent from scratch that functions exactly like real-world professional tools—giving the LLM 'eyes' to see files (Read), 'hands' to fix code (Edit), and 'feet' to execute commands (Bash). This isn't just about learning how to use a library. You will gain hands-on experience by implementing code to understand how AI perceives project structures, why it loses its memory during long conversations, and how to solve those issues technically (Sliding Window, Summary). Through this process, you will evolve from being a mere 'user' of AI tools to an 'AI provider' who understands the underlying principles and can customize and evaluate tools to fit your specific needs.

            Basic

            Basic

            React, TypeScript, vercel

            Building Claude Code with TypeScript from ScratchCourse Thumbnail

            Building Claude Code with TypeScript from Scratch

            Hiro Son

            [PROKIT] Vibe Coding/Frontend Practice Workbook: Building a Timer AppCourse Thumbnail

            [PROKIT] Vibe Coding/Frontend Practice Workbook: Building a Timer App

            nybs

            This is mission content for a development project. We provide a PRD planning document, Figma designs, and API endpoints so that you can practice by implementing a timer app called DevTime yourself. Make the knowledge you have learned completely your own by implementing a project at a level similar to an actual service 🚀

            Beginner

            Beginner

            React

            [PROKIT] Vibe Coding/Frontend Practice Workbook: Building a Timer AppCourse Thumbnail

            [PROKIT] Vibe Coding/Frontend Practice Workbook: Building a Timer App

            nybs

            Chat GPT Clone in 1 Hour with Cursor (One-Day Class)Course Thumbnail

            Chat GPT Clone in 1 Hour with Cursor (One-Day Class)

            dodocoding

            You can gain the ability to implement a chat program in just one hour using Next.js + Cursor IDE.

            Beginner

            Beginner

            nextjs, ChatGPT, React

            Chat GPT Clone in 1 Hour with Cursor (One-Day Class)Course Thumbnail

            Chat GPT Clone in 1 Hour with Cursor (One-Day Class)

            dodocoding