Overview:

The Svelte Tutorial is a series of projects designed to help users practice working with Svelte, a popular JavaScript framework. Each project focuses on a specific feature or concept and includes a live demo for users to explore. Additionally, users have the option to set up a local development environment to run the projects themselves. This tutorial covers a wide range of topics, from basic arithmetic operations to creating interactive contact cards and even developing a single page app with multiple routes.

Features:

Light Bright: Toggle colorful, bright lights on and off.
Strongman: Raise a small mallet to hit a receptive surface.
Tournament Bracket: Highlight stages for a hypothetical tournament-based sport competition.
Key Value Pairs: Add, update, and delete key value pairs and visualize the values.
Stopwatch: Track the passing of time and the gap between successive laps.
Word Frequency: Estimate the absolute frequency of words in input text.
Wind Chill Index: Highlight the wind chill index.
Concentration: Match cards in pairs.
Infinity Maze: Navigate within the boundaries of an endless maze.
Smart Watch: Tinker with several applications in a hypothetical smart watch.
Picross: Create pixelated figures using a grid.
Markdown Editor: Compose and preview markdown syntax in an online editor.
Tweet Component: Display a tweet in a reusable component.
Typing Adventure: Track keystrokes and their correctness against a provided string.
Line Charts: Highlight Google Trends for the Tour de France.
Roman Clock: Display the current time in a classic visual.
Star Wars Crawl: Edit and animate the opening crawls from a Star Wars movie.
Contact Us: Edit an interactive contact card.
Basic Arithmetic: Compute and animate basic arithmetic operations.
Icon Maker: Create icons of different sizes and color.
Bug Feature: Animate a small visual with spring motion.
Thermometer App: Describe temperature in a given range.
Bit Shifting: Illustrate a binary counter and how bitwise operators work.
Line Drawing Grid: Draw lines in a grid with limited resolution.
Single Page App: Develop a single page app with multiple routes using Sapper and SvelteKit.
School Closures Maps: Highlight school closures worldwide with a choropleth map and interactive dashboard.
Pixelated SVG: Create vector graphics with a pixelated look.
Colorful Building Bl.ocks: Celebrate the anniversary of D3 library with colored bl.ocks from blockbuilder.org.
Two Way Binding: Illustrate how Svelte binds state to HTML elements.
Repeating Color Scheme: Toggle between two color schemes without user input.
Await: Explore the await block to fetch world data or search for a specific pokemon.
Github Contributions: Highlight contributions to a public repository with area charts.
Actions: Use Svelte actions to lazy load images, show tooltips, and share text on Twitter.
Countdown App: Count down an arbitrary number of hours, minutes, and seconds.
Loto Seal: Search for Loto seal on the page.
Binding Typewriter: Explore input binding with checkbox and radio elements.
Premier League Season: Highlight the 2020-2021 Premier League season with a regular table and custom features.

Summary:

The Svelte Tutorial offers a comprehensive collection of projects to help users practice Svelte development. With a wide range of topics covered, users can explore and gain hands-on experience with various features and concepts. Whether it's creating interactive components, building single page apps, or visualizing data, this tutorial provides a diverse set of projects to enhance user skills in Svelte.

Borntofrappe

Svelte Tutorial