Discover how to build reactive apps using Svelte and Tailwind. Gain insights into Svelte syntax, lifecycle events, and Tailwind styling. Delve into creating customizable components and user management systems.

Building Reactive Apps With Svelte + Tailwind.png

tarball.tar.gz

Svelte

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 listeners. Next, you'll build different customizable components and work with lifecycle events. You'll also learn to implement routing and many other things, such as sorting, filtering, modifying, or duplicating datasets. You'll also learn how Tailwind works, as well as how to style components using Tailwind directives. 

By the end of this course, you'll have a solid foundation to build your dream application in Svelte with Tailwind, and provide a slimmer, better performing web application for your users.

Building Reactive Apps with Svelte and Tailwind

**(Select all that apply.)** Which options are valid Svelte blocks?

(Select all that apply.) Which options are valid Svelte blocks?

Using import statements from the `src` directory

Uploading the images to the `public` folder

Using Svelte's built-in `Image` component

What is the proper way to use static images in Svelte?

What is the proper way to use static images in Svelte?

Which option is the valid format for the  `{#each}` block?

Which option is the valid format for the <code>{#each}</code> block?

Using bracket notation, for example: `text-[#FFF]`

Using parentheses, for example: `text-(#FFF)`

How can you create arbitrary styles in Tailwind?

How can you create arbitrary styles in Tailwind?

`py` sets horizontal margins, while `px` sets vertical.

`py` sets vertical margins, while `px` sets vertical.

`py` sets horizontal paddings, while `px` sets vertical.

`py` sets vertical paddings, while `px` sets horizontal.

What is the difference between `py` and `px` in Tailwind?

What is the difference between <code>py</code> and <code>px</code> in Tailwind?

How do you hide an element using Tailwind?

How do you hide an element using Tailwind?

It acts as a way to sort elements inside an `{#each}` block.

It acts as a way to add dynamic classes to an element.

It acts as a way to attach JavaScript classes to the element.

What does <code>class:sorted</code> do in Svelte?

**(Select all that apply.)** Which options are valid event handlers in Svelte?

(Select all that apply.) Which options are valid event handlers in Svelte?

It’s a special type of object with an `update`, `set`, and `subscribe` method.

It’s a special type of object with an `update`, `set`, and `get` method.

It's a built-in database used for storing data.

Which option is the correct way to define `border-radius` in Tailwind?

Which option is the correct way to define <code>border-radius</code> in Tailwind?

Test your knowledge of how to work with Svelte and Tailwind classes.

Introduction

Getting Started with Svelte

Setting Up The Project

Building the List View

Building the Details View

Export and Import Data

Master Svelte and Tailwind

Conclusion

Appendix

Quiz