> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Tutorials Overview

## Article: Tutorials Overview

## Article Link: https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/tutorials-overview.md

## Article Content:

# Tutorials Overview

Step-by-step tutorials for building functionality into your Wix site. Each tutorial covers a complete implementation from setup to testing.

## Bookings

### [Block Off Time in the Bookings Calendar](https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/bookings/tutorial-block-off-time-in-the-bookings-calendar.md)

Build an interface that allows Wix users to programmatically manage staff availability by blocking time slots in Bookings calendars. Learn to handle single time slots and recurring blocked time patterns for scenarios like staff vacation, equipment maintenance, or training sessions.

### [Create a Custom Bookings Experience for Appointment Services](https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/bookings/tutorial-create-a-custom-bookings-experience-for-appointment-services.md)

Create a complete custom booking flow for appointment-based services that integrates with Wix eCommerce for payment processing. Learn to display available services, check slot availability, handle bookings, and manage the entire customer booking experience.

## Data

### [Add Data Search and Filtering Functionality](https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/data/tutorial-add-data-search-and-filtering-functionality.md)

Transform static content displays into interactive experiences by adding real-time text search and dropdown filtering to your site. Learn to query collections, handle user input, and dynamically display matching results as visitors type or select filters.

### [Add Navigation to a Dynamic Page](https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/data/tutorial-add-navigation-to-a-dynamic-page.md)

Learn to implement navigation between dynamic pages, allowing site visitors to move seamlessly through your content. Master the techniques for linking dynamic items and creating intuitive browsing experiences.

### [Create Dynamic Pages with Custom Router](https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/data/tutorial-create-dynamic-pages-with-custom-router.md)

Build a custom router to create and manage dynamic pages with full control over how incoming requests are handled. Learn to set up router code, create index and item pages, and implement sitemaps for SEO using a real estate property listing example.

### [Display Database Collection Content in a Repeater](https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/data/tutorial-display-database-collection-content-in-a-repeater.md)

Query a database collection and display the results in a repeater element. Learn the fundamentals of connecting your data to the frontend and creating dynamic, data-driven layouts.

## Integrations

### [Call APIs with Secrets](https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/integrations/tutorial-call-apis-with-secrets.md)

Learn to securely call external APIs using API keys stored in the Secrets Manager. Build a working web method that retrieves weather data from OpenWeatherMap while keeping sensitive information safe and confidential.

### [Call External APIs with Fetch](https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/integrations/tutorial-call-external-apis-with-fetch.md)

Use the fetch API to connect to external services and display retrieved data on your site. Learn to make HTTP requests, handle responses, and display collections of data using repeater elements.

## Members & Contacts

### [Create a Custom Registration Form](https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/members-contacts/tutorial-create-a-custom-registration-form.md)

Build a fully customized registration form that matches your site's branding and collects specific information during the signup process. Learn to validate confirmation fields and integrate with Wix's Members Area functionality.

### [Send a Triggered Email to Members](https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/members-contacts/tutorial-send-a-triggered-email-to-members.md)

Create and send personalized triggered emails to site members based on specific actions or events. Learn to set up email templates, trigger sending based on user behavior, and communicate effectively with your members.

### [Send Emails with the SendGrid npm Package](https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/members-contacts/tutorial-send-emails-with-the-send-grid-npm-package.md)

Integrate the SendGrid npm package to send custom emails from your Wix site. Learn to configure SendGrid, work with npm packages in Wix, and implement professional email functionality.

## Monitoring

### [Generate Logs to Debug a Site](https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/monitoring/tutorial-generate-logs-to-debug-a-site.md)

Learn to generate and view logs from your site code using Wix Logs. Master essential debugging techniques that help you track code execution and troubleshoot issues in both page and backend code.

### [Send Tracking and Analytics Events](https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/monitoring/tutorial-send-tracking-and-analytics-events.md)

Implement tracking and analytics events to monitor user behavior and site performance. Learn to capture meaningful data about how visitors interact with your site and use it to make informed decisions.

## User Interface

### [Create a One-Time Popup](https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/user-interface/tutorial-create-a-one-time-popup.md)

Build a popup that appears only on a visitor's first page load during a browser session. Learn to use popups and the Storage API to create user-friendly announcements, special offers, or welcome messages without repeatedly showing them.

### [Customize a Wix Form](https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/user-interface/tutorial-customize-a-wix-form.md)

Extend the functionality of Wix Forms by displaying custom thank you messages using user input from form submissions. Learn to work with form events and create personalized user experiences.

### [Display Elements in Mobile Only](https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/user-interface/tutorial-display-elements-in-mobile-only.md)

Control element visibility based on device type to create optimized experiences for mobile users. Learn to detect device types and show or hide content appropriately for different screen sizes.

### [Hide a Video Player When There's No Video](https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/user-interface/tutorial-hide-a-video-player-when-there-s-no-video.md)

Create a cleaner user experience by conditionally hiding video player elements when no video is available. Learn to check for video content and dynamically control element visibility.

### [Use the Upload Button with Code](https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/user-interface/tutorial-use-the-upload-button-with-code.md)

Implement file upload functionality using the upload button element. Learn to handle file uploads, process uploaded files, and create interactive file management features.

### [Work with Multi-State Boxes](https://dev.wix.com/docs/develop-websites-sdk/get-started/tutorials/user-interface/tutorial-work-with-multi-state-boxes.md)

Learn to set up multi-state boxes that display different content based on specific conditions or user interactions. Master state management techniques for creating dynamic interfaces like toggles, multi-step forms, and status-based displays.