강의

N
챌린지

멘토링

N
클립

커뮤니티

Programming

/

Web Development

Learn Svelte (SvelteKit + Supabase) easily with projects

Systematic step-by-step project practice and deployment, built-in store utilization, full-stack application with SvelteKit and Supabase, all in one go!

(5.0) 10 reviews

85 learners

  • Michael Kwon
실습 중심
Svelte
sveltekit
supabase

Reviews from Early Learners

What you will gain after the course

  • You will learn core front-end features and develop problem-solving skills through projects on a variety of topics, from homepages to casual games and full-stack applications.

  • Build component-based architectures using Svelte's concise and intuitive syntax, covering key topics like state management, event handling, and routing.

  • Create and build projects with Vite, then easily deploy them to the web with GitHub and Vercel.

  • Learn how to easily handle global state management through the built-in store.

  • Develop full-stack applications easily with SvelteKit and Supabase.

  • You can learn a lot in a minimal amount of time.

Systematic step-by-step project practice and deployment, built-in store utilization, and full-stack application development with SvelteKit and Supabase—all in one place!

This course aims to provide a practical understanding of the fundamentals of Svelte , which aligns with the latest web development trends. Svelte boasts intuitiveness, lightweight design, excellent performance, and efficient compile-time optimizations to reduce code size and deliver exceptional performance.

For beginners who have learned the basics of HTML, CSS, and JavaScript and now want to learn a framework (library), it can spark their interest in development, and for developers who have already used other frameworks, it is the best second choice to experience the simplicity and flexibility of Svelte compared to existing UI frameworks!

More and more developers and companies are using Svelte (SvelteKit) to develop web applications, and projects built with Svelte are running successfully. Don't just learn the syntax and give up out of boredom. Learn by building!

💡 Hands-on, project-based learning

  • You can experience interesting classes where you gradually acquire knowledge through projects rather than focusing on grammar.

  • Visual aids and concise, no-frills explanations make learning easy even for beginners.

Learn about these things

1⃣ Movie Information Homepage

You will learn the fundamentals of front-end application development, including components, data binding, handling state variables, dynamic content, and lifecycles.

1

Movie Information Homepage

2⃣ Branding Homepage

You can implement dynamic pages by using routing features to connect pages and passing data to pages using URL parameters. Finally, you can deploy the results to the web.

2.branding-home

Branding Homepage

3⃣ Creating a Casual Game

We will comprehensively cover the core development skills we have learned so far, such as functional development at the component level, state management, events, and lifecycle, and fully utilize global state management for game score management.

3.card game

Casual game (matchmaking)

4⃣ Diary App (SvelteKit + Supabase)

Through the SvelteKit project, which extends Svelte's functionality, you'll learn how to handle file-based routing, server-side logic, and even build a full-stack application that integrates with a real database. With Supabase, you can easily handle cloud-based databases.

4.diary app

Diary app

Things to note before taking the course

Practice environment

  • Operating System and Version (OS): All OS are supported, including Windows, macOS, and Linux.

  • Tools used: Visual Studio Code, GitHub account

  • PC specifications: PC with basic specifications capable of Internet access

Learning Materials

  • Learning material formats provided: GitHub link sharing, text, source code, etc.

  • Amount and Capacity: Learning materials provided for each section

Player Knowledge and Precautions

  • HTML, CSS, JavaScript basics


  • This lecture is copyrighted by the author, and unauthorized distribution and duplication are prohibited. The learning materials are also copyrighted, and any use for purposes other than personal learning is prohibited.

Recommended for
these people

Who is this course right for?

  • People who have a basic understanding of HTML, CSS, and JavaScript, but little experience using frameworks or libraries.

  • For those who want to learn the basics of front-end

  • For those who want to study quickly with a focus on practice

  • Developers who want quick results relative to their investment

Need to know before starting?

  • Basics of HTML, CSS, and JavaScript

Hello
This is

231

Learners

29

Reviews

17

Answers

4.9

Rating

5

Courses

스타트업에서 멀티미디어 콘텐츠 크리에이터로 입문하여 한 분야에만 머물지 않고 게임과 웹, 멀티미디어 분야에서 기획과 개발을 주도하며 현업에서 다양한 상용 작품을 런칭했습니다. 대학에서 디지털 미디어와 영상학을 전공했으며 주요 교육기관에서 웹 디자인과 프론트엔드 개발 및 미디어 교육(10년 이상) 등을 진행하면서 튜토리얼도 제작하고 있습니다.

- 저서 -

자바스크립트 프로젝트북(한빛미디어,2017)

Curriculum

All

104 lectures ∙ (8hr 23min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

10 reviews

5.0

10 reviews

  • leaguematter7718님의 프로필 이미지
    leaguematter7718

    Reviews 5

    ∙

    Average Rating 4.6

    5

    100% enrolled

    The lectures are structured in short, functional units, making it easy to learn.

    • csslick
      Instructor

      Mr. Lee Jong-su, thank you for your valuable feedback~

  • startop10님의 프로필 이미지
    startop10

    Reviews 4

    ∙

    Average Rating 4.0

    5

    100% enrolled

    You explain the charm of svelte in a clear and easy-to-understand way. Thank you.

    • csslick
      Instructor

      Thank you for your valuable evaluation and comments~

  • grooveturtle290048님의 프로필 이미지
    grooveturtle290048

    Reviews 10

    ∙

    Average Rating 5.0

    5

    100% enrolled

    I think this will be a good warm-up lecture for those who are new to Svelte. Since you learn by progressing through projects, it is not boring and you can quickly finish the course in a short period of time, which is good.

    • csslick
      Instructor

      Mr. Rocking Turtle, thank you for your valuable feedback!

  • antk7894님의 프로필 이미지
    antk7894

    Reviews 1

    ∙

    Average Rating 5.0

    5

    100% enrolled

    I took the course because I wanted to try out Svelte and SvelteKit, and I think I was able to learn both the basics and applications well. I liked the parts that were explained with actual references, and I was also very satisfied with the parts where I could refer to GitHub as a branch for each lecture. Thank you for the valuable lecture!!

    • csslick
      Instructor

      Thank you for your active participation in class and valuable opinions ^^;

  • kimks018540님의 프로필 이미지
    kimks018540

    Reviews 1

    ∙

    Average Rating 5.0

    5

    92% enrolled

    Through this lecture, I was able to truly feel the charm of Svelte, SvelteKit, and Supabase! The curriculum is concise and systematic, from the basics to the application, and especially thanks to the project, I was able to apply what I learned right away, which made it much easier to understand. I have experience using other frameworks, so I can compare, but I am completely immersed in the simplicity and efficiency of Svelte. The backend integration using Supabase was explained in an easy-to-understand manner, so I was able to naturally learn the parts that were unfamiliar at first. The instructor's explanations were clear and kind, so it was easy to understand, and the parts that corrected actual errors and tips in the middle of the class were also useful~

    • csslick
      Instructor

      The simplicity of Svelte is a big attraction. Our lectures are the same. Thank you for your valuable opinion~

$38.50

Michael Kwon's other courses

Check out other courses by the instructor!

From Figma design to publishing강의 썸네일

From Figma design to publishing

Michael Kwon

All-in-one course for designers and developers! New UI3 included

초급

초급

HTML/CSS, Figma

From Figma design to publishing강의 썸네일

From Figma design to publishing

Michael Kwon

Creating a job search site with Vue3 and Supabase강의 썸네일

Creating a job search site with Vue3 and Supabase

Michael Kwon

From developing your own full-stack application to a Progressive Web App (PWA)!

초급

초급

Vue.js, PWA, supabase

Creating a job search site with Vue3 and Supabase강의 썸네일

Creating a job search site with Vue3 and Supabase

Michael Kwon

Learning TypeScript Basics Easily Through Projects강의 썸네일

Learning TypeScript Basics Easily Through Projects

Michael Kwon

TypeScript: Core concepts, from basic to practical, all at once! Practical application through a project.

초급

초급

JavaScript, TypeScript, TailwindCSS

Learning TypeScript Basics Easily Through Projects강의 썸네일

Learning TypeScript Basics Easily Through Projects

Michael Kwon

Vanilla JavaScript & Tailwind CSS강의 썸네일

Vanilla JavaScript & Tailwind CSS

Michael Kwon

Practical web UI development using AI and component-centric UI creation, An essential course for Designers + Developers!

초급

초급

JavaScript, vanilla-javascript, frontend

Vanilla JavaScript & Tailwind CSS강의 썸네일

Vanilla JavaScript & Tailwind CSS

Michael Kwon

Similar courses

Explore other courses in the same field!

Creating a job search site with Vue3 and Supabase강의 썸네일

Creating a job search site with Vue3 and Supabase

Michael Kwon

From developing your own full-stack application to a Progressive Web App (PWA)!

초급

초급

Vue.js, PWA, supabase

Creating a job search site with Vue3 and Supabase강의 썸네일

Creating a job search site with Vue3 and Supabase

Michael Kwon

Getting Started with Supabase and Next Full Stack (feat. Supabase OAuth, Next.js 14)강의 썸네일

Getting Started with Supabase and Next Full Stack (feat. Supabase OAuth, Next.js 14)

dodocoding

Firebase's SQL version! You can master the basics of Next.js full-stack development through Supabase!

초급

초급

Next.js, supabase, React

Getting Started with Supabase and Next Full Stack (feat. Supabase OAuth, Next.js 14)강의 썸네일

Getting Started with Supabase and Next Full Stack (feat. Supabase OAuth, Next.js 14)

dodocoding

[Fullstack Introduction] Supabase, 10x Better Than Firebase강의 썸네일

[Fullstack Introduction] Supabase, 10x Better Than Firebase

lopun

Supabase to give wings to full-stack development! Complete full-stack development in 2 hours with Supabase, a superset of Firebase.

초급

초급

PostgreSQL, Next.js, TailwindCSS

[Fullstack Introduction] Supabase, 10x Better Than Firebase강의 썸네일

[Fullstack Introduction] Supabase, 10x Better Than Firebase

lopun

Inflearn Clone Coding All-in-One LMS Solution: Multilingual HLS Streaming-Based MVP Project Built with Next.js·Flutter·AWS·Supabase·Prisma강의 썸네일

Inflearn Clone Coding All-in-One LMS Solution: Multilingual HLS Streaming-Based MVP Project Built with Next.js·Flutter·AWS·Supabase·Prisma

ludgi

This course is not just simple clone coding or a basic tutorial. By implementing an LMS (Learning Management System) platform like Inflearn from start to finish at an MVP level, it provides an all-in-one solution that freelancers, solo developers, and early-stage startup members can immediately apply in real-world projects. We cover the entire tech stack used in actual production environments at once: Next.js, Flutter, Supabase, Firebase (FCM), AWS, Vercel, Xcode, Android Studio, ElevenLabs, and Toss Payments. You'll experience the complete process of simultaneously developing web and mobile apps, including social login, automatic multilingual dubbing, HLS streaming-based lecture playback, payment integration, and deployment to the App Store and Play Store. This course focuses on the important workflows, configurations, and deployment processes that matter in real-world development, rather than detailed line-by-line coding. Therefore, it's suitable for developers looking to become independent freelancers, teams that need to quickly validate MVPs at startups, and junior developers who want to experience the full scope of real-world development.

중급이상

중급이상

Flutter, AWS, supabase

Inflearn Clone Coding All-in-One LMS Solution: Multilingual HLS Streaming-Based MVP Project Built with Next.js·Flutter·AWS·Supabase·Prisma강의 썸네일

Inflearn Clone Coding All-in-One LMS Solution: Multilingual HLS Streaming-Based MVP Project Built with Next.js·Flutter·AWS·Supabase·Prisma

ludgi

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

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.

초급

초급

GraphQL, Svelte, MongoDB

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

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

Indie Coder

Bite-sized Real-world Projects - SNS Edition강의 썸네일

Bite-sized Real-world Projects - SNS Edition

winterlood

Now it's time to take on the real challenge 🔥 Let's develop a professional-grade SNS together using React.js + TypeScript + Supabase, creating features like authentication & authorization, infinite scroll, image upload, likes, infinite nested comments, dark mode, and more. Throughout this process, we'll also explore server and global state management techniques using Zustand and Tanstack Query.

중급이상

중급이상

supabase, zustand, react-query

Bite-sized Real-world Projects - SNS Edition강의 썸네일

Bite-sized Real-world Projects - SNS Edition

winterlood

Svelte.js SPA movie search project강의 썸네일

Svelte.js SPA movie search project

HEROPY

We're building and deploying a Svelte-based SPA movie search site!

중급이상

중급이상

Svelte, SPA

Svelte.js SPA movie search project강의 썸네일

Svelte.js SPA movie search project

HEROPY

Learn Svelte by Building강의 썸네일

Learn Svelte by Building

Indie Coder

This course will teach you the latest front-end framework, Svelte. After learning the basics of Svelte, you will learn how to use Svelte in real projects by creating a Todo app.

초급

초급

Svelte

Learn Svelte by Building강의 썸네일

Learn Svelte by Building

Indie Coder

Svelte REST-API project강의 썸네일

Svelte REST-API project

Indie Coder

This lecture is a video lecture on the latter part of the book, ‘Web Frontend with Svelte’, which I wrote, about creating a SLOG project. I prepared this lecture in the hope that it would supplement the parts that were a bit lacking in the book and make more people interested in the frontend framework called Svelte.

초급

초급

Svelte, REST API

Svelte REST-API project강의 썸네일

Svelte REST-API project

Indie Coder

Non-Developer Creates Profitable Service in Just 4 Weeks: AI Vibe Coding Web + App ALL IN ONE

dingcodingco

Don't know coding? OK! Turn your ideas into real revenue in just 4 weeks. Using AI and the latest tools, create websites and apps simultaneously and connect them directly to services.

입문

입문

Flutter, Next.js, cursor

Non-Developer Creates Profitable Service in Just 4 Weeks: AI Vibe Coding Web + App ALL IN ONE

dingcodingco