Building Reactive Apps with Svelte and Tailwind - AI-Powered Learning for Developers

Home>

Courses>

Building Reactive Apps with Svelte and Tailwind

Learn how you can build reactive single-page apps with Svelte and Tailwind from start to finish.

Beginner

31 Lessons

Certificate of Completion

Learn how you can build reactive single-page apps with Svelte and Tailwind from start to finish.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

1 Assessment

67 Playgrounds

This course includes

1 Assessment

67 Playgrounds

Course Overview

Svelte is a popular JavaScript compiler for front-end developers who want to take their applications to the next level from React, make it slimmer with less code, and enable better performance. Tailwind is a utility-first CSS framework that has a single class for each CSS property. In this interactive course, you'll work with Svelte and Tailwind in real-world applications and build a user management system from scratch. You'll also learn the basic syntax of Svelte—templating, conditions, loops, and event ...Show More

TAKEAWAY SKILLS

Javascript

Css

What You'll Learn

Learn how to build reactive single-page applications using Svelte from scratch

Familiarity with the basic syntax of Svelte, including templating, conditions, and event listeners

Hands-on experience with building various customizable components and working with lifecycle events

The ability to implement routing, sorting, filtering, modifying, or duplicating data sets in Svelte

An understanding of how to utilize Tailwind to reduce the amount of CSS in your bundles

Hands-on experience building a fully functional user management system from scratch using Svelte and Tailwind

What You'll Learn

Learn how to build reactive single-page applications using Svelte from scratch

Course Content

Introduction

Before We Begin

Why Svelte?What We Will Be Building

Getting Started with Svelte

Hello World: Svelte Introduction to Tailwind Using Local Storage for a Persisting State

Setting Up The Project

Creating the Initial State of the Application Integrating Tailwind Quiz

Building the List View

Displaying Table Entries from the State Styling Table Entries with Tailwind Implementing the Sorting Functionality Implementing the Filtering Functionality Adding New Entries Deleting Existing Entries Adding Support for Pagination Adding the "Items per Page" Functionality Quiz

Building the Details View

Implementing Routing in Svelte Displaying Entry Details Styling the Details View with Tailwind Editing Existing Entries Adding Support for Deleting Items Adding Support for Duplicating Entries Quiz

Export and Import Data

2 Lessons

Master Svelte and Tailwind

Assessment

Conclusion

2 Lessons

Appendix

2 Lessons

Course Author

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Souvik Kundu

Front-end Developer

Eric Downs

Musician/Entrepeneur

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath