We may earn an affiliate commission when you visit our partners.
Course image
Eincode by Filip Jerga and Filip Jerga

Is this course right for you?

Read more

Is this course right for you?

This course covers creating two applications with Svelte. Most of the features are made from scratch without any dependency package. This covers - Form Validation, Pagination, Modal, Popups,  Snackbar and many others. You will learn how to create everything from the ground up.

The course covers the explanation of Svelte by working on actual projects. This course will give you the confidence and skills required to start any project.

Students should have basic javascript knowledge to start working on this course.

What is Svelte?

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

What are you going to work on?

The first application explains base Svelte features by working on the real project - Trello clone, a simple task management application

In the second application, students will build a Twitter-like app from scratch - the HTML layout part is not part of the course (This will be provided in the course materials to save time and focus purely on  Svelte). The focus of this course is coding and not writing HTML content. 

The course starts with the preparation of the base layout of the application. All designs - images, and content are provided by the instructor.

Content can be briefly summarized in these points:

  • Layout preparation - A few lectures to prepare the HTML for your application. Separation of layout into the Svelte components. 

  • Template syntax - Use special syntax inside of HTML

  • Directives & Events - Value binding of variables.

  • Svelte Kit Routing - This part explains creating a "multi-page" application. Students will learn how to create a routing with different routing strategies and navigation to the routes. 

  • Reactivity - Explains how to create and manage reactive data

  • Lifecycle function - How to use onMount and onDestroy

  • Stores - More complex reactive data

  • Transitions - Fancy effects with Svelte

  • Auth Forms - Students will learn how to create a reactive form and bind the data to form inputs.

  • Custom Form Validation - Covers creating a custom input/form validation and error handling from scratch.

  • Firebase/Firestore - Initialization of Firebase application (data storage)

  • Store Functions - Important part of the projects. Allows the feature-related code to be separated into its context. 

  • Authentication - This part covers creating a login, register, and logout functionality. Students will learn how to authenticate a user upon the application visit.

  • Provider and Context - This creates a provider component, which can hold the data on the root level and provide them to underlying components. 

  • Snackbars - App-wise functionality created with Provider to display any message as a toast popup.

  • Glide Creation - Covers how to create a new glide and display it on the main page. From this point on, students will often work with Firebase/Firestore.

  • Follow Functionality - Follow functionality allows users to subscribe to other users. 

  • Display Glides from Following - Subscription (Following) to other users will allow seeing the Glides (messages) they post.

  • Paginate Glides - It would be inefficient to fetch/display all of the glides on the initial load. Students will learn how to implement their lazy loaded pagination when data are loaded as the users browse the application.

  • Create Sub-Glides - It's essential to have a way to respond to glides. This feature enables a user to create subglides, which is an answer to the glide.

  • Modal Messenger - Students will learn how to create a modal component from scratch. This will be used to display a messenger component on any page.

  • Image Upload - Deployment to Firebase Storage

  • Deployment to Vercel - Finally, the application will be live hosted on Vercel. Anybody on the internet will be able to visit your application.

While working on the features above, the students will learn and understand Svelte features. They will know how to architecture applications and will be able to create their applications with Svelte.

Enroll now

What's inside

Learning objectives

  • Learn to program with svelte and create two amazing web apps.
  • Get an understanding of how to create a web app - explained practically.
  • Use firebase services - firestore storage, authentication and more.
  • Establish yourself in the field of the web development.

Syllabus

Introduction
How to get a help
Github repo tricks
P1: Init Project
Read more
Init Project
Coding Editor Setup
Folder Structure
Src Folder
Layout
Quiz
Tailwind
Tailwind Correction
Additional CSS Improvements
P1: Pages & Reactivity
New Route
More about layouts
Sub Page
Cleanup
Svelte Reactivity
Reactive statement
Reactive declarations
Tips
P1: Task Item & List
Copy/Paste Layout
Task Item
Task List
Props
Formatting Options
Task List Data
P1: Template Syntax
Each Loop
Iterate Tasks
Editable Component
If Block
Button Formatting
Editing Mode
P1: Value binding and Events
Value binding
Default Value
Bind to Component
Dispatch Event
Rename event
Pass Data in Events
P1: Stores
Stores
Sub to Store
Update Store
Unsub
Auto Subscription
Start Function
Stop Function
Readable Store
Task List Store Data
Event Forwarding
P1: Task Update
Revert Update Task
Pass List Index
Find Task Idx
Update Task
Return subscribe only
Move update to store
Code Exercise
P1: Add List and Task
Add List Prep
Add new list
Allow X Scrolling
Add Task
Make list full height
P1: Drag & Drop
Drag Start
Drop Item
Event data transfer
Move code to store
Move Item
Refactor Props
List Hover Id
Hovering Effect
Script Module
P1: Transitions
Crossfade Transition
Animate Flip
More Transitions
P1: Persistence
Persistence
Store Data
P1: Finish Store API
Remove item function
Remove Task
Remove List

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Helps learners develop essential skills in state management, transitions, and dynamic user interfaces
Offers hands-on practice in building two full-fledged web applications, providing practical experience and deeper understanding of Svelte
Covers modern concepts such as reactive data and component-based architecture, which are highly relevant in today's web development landscape
Taught by experienced instructors with a strong track record in web development, providing you with valuable insights and guidance
May require basic JavaScript knowledge to fully grasp the concepts and code examples presented in the course
The course's focus is primarily on coding and implementing Svelte, so learners with a desire to focus on UI design may need to supplement with additional resources

Save this course

Save Svelte and Firebase - The Complete Guide (2023) to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Svelte and Firebase - The Complete Guide (2023) with these activities:
Complete the Svelte Tutorial from scratch
Completing this full tutorial will ensure that you fully understand the basic concepts of Svelte
Show steps
  • Follow along with the Svelte tutorial from the provided link
  • Complete the tasks provided by the tutorial
  • Experiment with the code and try to create your own Svelte application
Join a Svelte study group or online community
Joining a study group or online community will give you the opportunity to connect with other students and collaborate on projects
Show steps
  • Join a Svelte study group or online community
  • Participate in discussions and ask questions
  • Work on Svelte projects with other members of the group
Create a simple svelte application from scratch
Creating this small project will ensure you understand all of the base Svelte syntax concepts
Show steps
  • Watch the first few Unreal Engine 5 video tutorials
  • Install and run Unreal Engine 5 on your machine
  • Create a small game level as instructed in the tutorial
  • Iterate on game level to apply more advanced features and customize it
Six other activities
Expand to see all activities and additional details
Show all nine activities
Attend a Svelte workshop or conference
Workshops and conferences help you stay up to date on the latest Svelte trends and connect with other professionals
Show steps
  • Research Svelte workshops and conferences online
  • Register for and attend a workshop or conference
  • Participate in discussions and ask questions
Create a collection of Svelte resources
This will help you organize and share your Svelte knowledge
Show steps
  • Gather resources such as tutorials, articles, and code snippets
  • Organize the resources into a collection
  • Share the collection with other Svelte learners
Create a Twitter clone with Svelte
Creating this medium sized project will help you master Firebase integration and many other features of Svelte
Show steps
  • Utilize Firebase API documentation to connect your application with Firebase
  • Implement the database, storage, and authentication features into your application
  • Create reusable UI components to be used throughout your application
  • Design and implement the user interface for your application
Contribute to an open source Svelte project on GitHub
This will help you apply your Svelte skills outside of the classroom
Show steps
  • Find an open source Svelte project on GitHub
  • Read the project's documentation and contribute to the code base
  • Submit a pull request with your changes and collaborate with other contributors
Write a blog post or article about Svelte
This will help you solidify your understanding of Svelte and share your knowledge with others
Show steps
  • Choose a topic related to Svelte that you are passionate about
  • Research your topic and write an outline
  • Write a draft of your blog post or article
  • Edit and proofread your work
  • Publish your blog post or article online
Volunteer as a Svelte mentor or tutor
This will help you solidify your understanding of Svelte and share your knowledge with others
Show steps
  • Find opportunities to volunteer as a Svelte mentor or tutor
  • Prepare materials and resources for your sessions
  • Meet with mentees or students and provide guidance and support

Career center

Learners who complete Svelte and Firebase - The Complete Guide (2023) will develop knowledge and skills that may be useful to these careers:

Reading list

We haven't picked any books for this reading list yet.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to Svelte and Firebase - The Complete Guide (2023).
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser