borntofrappeborntofrappe
95

Svelte Tutorial

screenshot of Svelte Tutorial

Practice with Svelte.js with a series of applications.

Github

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.