Svelte - Crash Course

Install svelte, create a new app from the template, install dependencies, and run dev server to see an app built with vanilla JavaScript, no dependencies, and simple reactivity and props.

Master the basics of Svelte by creating components, exporting props, and building functions, variables, and methods, then implement reactivity, events, and loops with if statements to render dynamic content.

Build a simple notes app in Svelte by creating a notes array, adding, editing, and deleting notes, and rendering them with a form and text area.

Discover how to enable communication between Svelte components by using props and event dispatchers to handle create, edit, and delete actions across node and form components.

Explore slots in svelte components to insert custom content into a header, including named slots like menu and subtitle for flexible component composition.

Learn to use the dollar sign as a reactive statement in Svelte by binding inputs to a variable and observing changes in the console while updating the page title dynamically.

Learn how to fetch data in a Svelte app using the on mount lifecycle function, call an API like JSON placeholder, parse JSON, and render results.

Learn how to use Svelte stores by building a counter with a writable store, subscribing to updates, and implementing increment and decrement with local storage options for persistence.

Set up a new SvelteKit application by choosing a template and installing dependencies. Run the local dev server and scaffold routes, layouts, and slots for dynamic pages.

Fetch data from a web API using dynamic routes in Svelte by building a planet detail page that retrieves and displays planet name, population, gravity, and terrain.

Explore the essentials of Svelte in this crash course conclusion: master events, handle input fields and text areas, leverage reactivity, and apply common lifecycle hooks to build real projects.