---
title: Tutorials - Done
slug: tutorials-done
createdAt: 2025-02-03T18:36:51.456Z
---

```html
<div data-w-tab="Tutorials" class="tab-pane w-tab-pane">
    <div class="tab-content-container">
        <div class="tab-heading-container-for-button">
            <div>
                <h2>Tutorials</h2>
                <div class="subheading">Watch guided tutorials on key features.</div>
            </div>
            <div>
                <div class="tutorial-search-box">
                    <div class="search-icon w-embed">
                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewbox="0 -960 960 960" width="24px" fill="currentColor"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"></path></svg>
                    </div>
                    <div class="form-block w-form">
                        <!-- as people type in this box, filter the tutorials nav list on the left size -->
                        <form id="tutorial-filter" name="tutorial-filter" data-name="tutorial-filter" method="get" class="form">
                            <input class="text-field w-input" maxlength="256" name="filter-tutorials" data-name="filter-tutorials" placeholder="Search Documentation" type="text" id="filter-tutorials">
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="space-1rem"></div>

        <!-- START Tutorials Nav Container Left -->
        <div class="w-layout-grid documentation-nav-grid">
            <div class="documentation-nav">

                <!-- START Tutorials Category - Repeat per Category --> 
                <div class="documentation-nav-category">
                    <div class="documentation-nav-category-name">{Category Name}</div>
                    <ul role="list" class="documentation-nav-list">

                        <!-- START Tutorials Items - Repeat for each document in Category-->
                        <li class="documentation-nav-list-item">
                            <a href="#" class="documentation-nav-link">Introduction to EveryAnswer</a>
                        </li> 
                        <!-- END Tutorials Documents -->

                    </ul>
                </div>
                <!-- END Tutorials Category -->

            </div>
            <!-- END Tutorials Nav Container Left -->

            <div class="documentation-container">
                <h1 class="documentation-h1">Tutorial Title</h1>
                <div class="tutorial-video w-embed">
                    <iframe width="560" height="315" src="(Video URL)" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope" referrerpolicy="strict-origin-when-cross-origin" scrolling="no"  allowfullscreen></iframe>
                </div>
                <h2 class="documentation-h2">H2 Styling for documentation</h2>
                <h3 class="documentation-h3">H3 Styling for documentation</h3>
                <div class="documentation-text">P Styling for Documentation</div>
                <div class="last-updated">
                    <div class="last-updated-icon w-embed">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 stroke-current"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                    </div>
                    <div>Last Updated: January 11, 2024</div>
                </div>
            </div>
        </div>
    </div>
</div>
```