Overview

Client-side development focuses on building the user interface and interactivity of web applications. In this part, we take the first steps into building client-side functionality with Svelte, learning how to create components and pages and how to add interactivity and logic to them.

Svelte is a component-based framework, where the application is built from components. A component is a self-contained piece of code that can be reused in different parts of the application.

The structure of this part is as follows:

• Brief introduction to HyperText Markup Language (HTML) outlines the very basics of HTML and the Document Object Model needed to understand client-side development with Svelte.
• Svelte pages and layouts starts our journey to learning Svelte, discussing what pages and layouts are and outlines how to add them to a Svelte application.
• Adding components describes the core idea of components, shows how to create them, and shows how to add them to an application.
• Events and reactivity introduces the power-feature of Svelte called reactivity, and shows how to create interactive applications that respond to events.
• Template logic and reactivity describes how to add logic to Svelte components, including conditional rendering and looping over collections.
• Routing and dynamic pages shows how to define dynamic pages that are created based on user request.
• Components and properties revisits components, discussing the relationship of components and pages, and shows how to pass data to components properties.
• Sharing state between components shows how to separate state from components so that the same state can be shared between multiple components.
• Persisting state with LocalStorage discusses localStorage, which is a browser feature for storing data on the client side, and shows how to use it in Svelte applications.
• Overarching project starts an overarching project that will be worked on throughout the course.

Finally, at the end of the part, there is a recap and feedback chapter that briefly summarizes the part and asks for feedback on the part.