Programming

Web Development

Learn Svelte (SvelteKit + Supabase) easily with projects

Name: Learn Svelte (SvelteKit + Supabase) easily with projects
Price: 49500 KRW

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) 9 reviews

79 learners

csslick

실습 중심

Svelte

sveltekit

supabase

Reviews from Early Learners

What you will learn!

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!

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

216

Learners

Reviews

Answers

5.0

Rating

Courses

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

- 저서 -

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

Curriculum

All

104 lectures ∙ (8hr 23min)

Course Materials:

Lecture resources

Section 1. Movie information homepage

27 lectures ∙ (2hr 8min)

1. introduction
03:15
2. Setting up the development environment
01:29
3. Create a Project (Vite)
04:50
4. Displaying data in a document
07:41
5. Displaying movie information using a loop
04:14
6. Creating a Like Button with the Event Feature 1/2
04:23
7. Creating a Like Button with the Event Feature 2/2
03:05
8. Change style
04:40
9. Adding dynamic content with conditional statements
03:31
10. Import movie data from outside
05:43
11. Show modal window information dynamically
03:42
12. Separating UI by function with components
04:00
13. Passing data to subcomponents (Props)
04:17
14. Changing the data of the parent component
04:50
15. Creating a movie list component
05:25
16. Dealing with dynamic classes and effects 1/2
06:02
17. Dealing with dynamic classes and effects 2/2
05:55
18. Search box input function
05:52
19. Validate input values
05:45
20. Movie title search function 1/2
07:34
21. Movie title search function 2/2
01:41
22. Show search results
05:22
23. Add a View All button
02:10
24. Problem with Like not being clicked (Giving unique ID to data)
06:42
25. Lifecycle
05:55
26. Change event window text over time 1/2
05:16
27. Change event window text over time 2/2
04:41

Section 2. Branding Homepage

15 lectures ∙ (1hr 17min)

28. Project Introduction
03:13
29. Project setup
05:19
30. Sass Grammar Core Summary
08:17
31. Add Media
01:30
32. Home Area
10:18
33. About Area
06:37
34. Routing Pages
03:26
35. News area
10:28
36. Display news information with a loop
02:16
37. Detail page area
05:01
38. Passing data to the detail page
05:34
39. Display information on the details page
03:23
40. contact area
03:53
41. Building and Deploying 1/2
02:02
42. Building and Deploying 2/2
05:55

Section 3. Creating casual games

27 lectures ∙ (2hr 9min)

43. Preview
00:31
44. Project Introduction
02:05
45. Project setup
01:48
46. Defining game screens by function
03:53
47. How to connect pages without a router
06:16
48. Font and Screen Design
07:03
49. Game Play Area (GameInfo)
05:53
50. Placing Cards in the Game Grid Area
09:22
51. Flip and Shuffle the Cards
04:52
52. Review the game rules and logic
01:34
53. Initialize and flip the card
04:29
54. Resolving A11y Accessibility Warning
55. Card Matching Decision 1/2
04:55
56. Card Matching Decision 2/2
07:18
57. Card decision screen processing
04:33
58. Determine if the game is cleared
03:45
59. Display game clear results window
06:22
60. Show game over results screen
07:11
61. How to manage game scores in store
03:28
62. Create a store to handle game information
04:58
63. Reflect the score in the game result window and assign button functions
03:59
64. Connecting the Home button to the game results window
04:55
65. Set a game time limit using a timer
05:40
66. Assignment explanation
67. Save and display game score records
06:21
68. Manage game score reset in store
07:28
69. Add sound effects and background music (BGM)
10:59

Section 4. Diary app (SvelteKit + Supabase)

35 lectures ∙ (2hr 48min)

Published:

Last updated:

Reviews

All

9 reviews

5.0

9 reviews

이종수
Reviews 5
∙
Average Rating 4.6
5
100% enrolled
기능 단위 구현으로 짧게 강의를 구성해서 술술 배울 수 있었습니다.
- Michael Kwon
  Instructor
  이종수님, 소중한 의견 감사드립니다~
슈퍼아스라다
Reviews 4
∙
Average Rating 4.0
5
100% enrolled
svelte의 매력을 느낄수 있게 차근차근 잘 설명해주시네요. 감사합니다.
- Michael Kwon
  Instructor
  소중한 평가와 의견 감사드립니다~
흔들거북이
Reviews 10
∙
Average Rating 5.0
5
100% enrolled
svelte를 처음 입문하시는 분들에게 워밍업으로 좋은 강의가 될 것이라 생각합니다. 프로젝트 단위로 진행하면서 배우는것이다보니 지루하지 않고 단기간에 빠르게 완강 할 수 있어서 좋았네요.
- Michael Kwon
  Instructor
  흔들거북이님, 소중한 평가 감사드립니다!
antk7894
Reviews 1
∙
Average Rating 5.0
5
100% enrolled
스벨트와 스벨트키트를 사용해보고 싶어서 수강했는데 기본기와 응용 모두 잘 학습할 수 있었던 것 같습니다. 실제 레퍼런스와 함께 설명해주시는 부분들이 좋았고 강의 별 브랜치로 깃헙을 참고할 수 있는 부분들도 매우 만족스러웠습니다. 벨류 높은 강의 감사합니다!!
- Michael Kwon
  Instructor
  적극적인 수업 참여와 소중한 의견 감사드립니다 ^^;
kimks01
Reviews 1
∙
Average Rating 5.0
5
92% enrolled
이 강의를 통해 Svelte와 SvelteKit, 그리고 Supabase의 매력을 제대로 느꼈습니다! 기초부터 응용까지 커리큘럼이 간결하면서도 체계적으로 짜여 있고, 특히 프로젝트 덕분에 학습한 내용을 바로 적용해 볼 수 있어 이해가 훨씬 수월했습니다. 다른 프레임워크를 사용한 경험이 있어 비교가 되는데 Svelte의 간결함과 효율성에 푹 빠지게 되네요. Supabase를 이용한 백엔드 통합도 전혀 어렵지 않게 설명해주셔서, 처음에는 생소했던 부분도 자연스럽게 익힐 수 있었습니다. 강사님의 설명이 명확하고 친절해 쉽게 이해할 수 있었고, 수업 중간중간 실제 오류를 수정하는 부분이나 팁도 유용했습니다~
- Michael Kwon
  Instructor
  스벨트의 간결함은 큰 매력이죠. 저희 강의도 그렇답니다. 소중한 의견 감사드립니다~

$38.50

csslick's other courses

Check out other courses by the instructor!

Figma 디자인부터 퍼블리싱까지

Michael Kwon

디자이너와 개발자를 위한 올인원 강좌! 새로운 UI3 반영

Basic

Figma, HTML/CSS

Figma 디자인부터 퍼블리싱까지

Michael Kwon

프로젝트로 쉽게 배우는 TypeScript 기초

Michael Kwon

타입스크립트의 핵심 개념을 기초부터 실습까지 한 번에! 프로젝트를 통해 실무 활용까지

Basic

JavaScript, TypeScript, TailwindCSS

프로젝트로 쉽게 배우는 TypeScript 기초

Michael Kwon

바닐라 자바스크립트 & Tailwind CSS

Michael Kwon

AI 활용과 컴포넌트 중심 UI 제작으로 배우는 실무형 웹 UI 개발, 디자이너+개발자 필수 코스!

Basic

JavaScript, vanilla-javascript, frontend

바닐라 자바스크립트 & Tailwind CSS

Michael Kwon

Vue3와 Supabase로 구인구직 사이트 만들기

Michael Kwon

나만의 풀스택 애플리케이션 개발에서 프로그래시브 웹앱(PWA)까지!

Basic

Vue.js, supabase, Vue 3

Vue3와 Supabase로 구인구직 사이트 만들기

Michael Kwon

Similar courses

Explore other courses in the same field!

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

로펀

풀스택 개발에 날개를 달아줄 Supabase! 3가지의 클론 프로젝트를 통해 Next.js 14와 Supabase로 실무 수준의 풀스택 개발을 하는 법을 속성으로 배우게 됩니다.

Basic

Next.js, supabase, TailwindCSS

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

로펀

Vue3와 Supabase로 구인구직 사이트 만들기

Michael Kwon

나만의 풀스택 애플리케이션 개발에서 프로그래시브 웹앱(PWA)까지!

Basic

Vue.js, supabase, Vue 3

Vue3와 Supabase로 구인구직 사이트 만들기

Michael Kwon

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

도도(코딩루팡)

Firebase의 SQL버전! Supabase를 통해 Next.js 풀 스택 기초를 마스터 할 수 있어요.!

Basic

Next.js, supabase, React

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

도도(코딩루팡)

만들면서 배우는 Svelte

Indie Coder

최신 프론트엔드 프레임워크 Svelte(스벨트)를 배워보는 강좌입니다. Svelte 기본 사용법을 익힌 후 Todo 앱을 함께 만들면서 실제 프로젝트에서 어떻게 Svelte를 사용할 수 있는지 익혀보는 강좌입니다.

Basic

Svelte

만들면서 배우는 Svelte

Indie Coder

GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]

Indie Coder

차세대 API 제어 기술인 GraphQL의 기본과 고급 사용법 그리고 GraphQL로 만들어 가는 가상의 키오스크 서비스를 통해서 실제 프로젝트 경험을 학습하게 됩니다. 강좌는 2024년 2월 기준 가장 최신 버전인 apollo-server v4로 강좌를 부분 업데이트 했습니다.

Basic

GraphQL, Svelte, MongoDB

GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]

Indie Coder

Svelte.js SPA 영화 검색 프로젝트

HEROPY

Svelte 기반의 SPA 영화 검색 사이트를 만들어 배포합니다!

Intermediate

Svelte, SPA

Svelte.js SPA 영화 검색 프로젝트

HEROPY

Svelte REST-API 프로젝트

Indie Coder

이 강의는 제가 집필한 ‘스벨트로 시작하는 웹 프런트엔드’ 라는 책의 후반부 SLOG 프로젝트 만들기 부분에 대한 영상 강의입니다. 책에서 조금 부족했던 부분들을 보완해, 좀 더 많은 분들이 Svelte라는 프런트엔드 프레임워크에 대해 관심을 갖길 바라는 마음에서 이 강의를 마련했습니다.

Basic

Svelte, REST API

Svelte REST-API 프로젝트

Indie Coder

비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

딩코딩코

코딩 몰라도 OK! 당신의 아이디어를 단 4주 만에 실제 수익으로 바꿔보세요. AI와 최신 도구를 활용해, 웹사이트와 앱을 동시에 만들고 바로 서비스까지 연결합니다.

Beginner

Flutter, Next.js, cursor

비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

딩코딩코