Scrollspy

Scrollspy watches a scrolling area and highlights the menu link of the section currently in view. Every example below uses a fixed-height scrollable box with data-ui-spy, a target nav and tabindex for keyboard users; scroll inside the boxes to see the navigation follow.

1In a navbar

Scroll the box: the navbar pill for the visible section becomes active.

Intro

We keep things simple, so you can focus on what matters to you. Instructors are working professionals who teach what they use every day. Clear prices, honest advice and no surprises along the way. Study groups and a friendly forum keep you motivated along the way.

We measure success by how many students come back and tell their friends. We listen first, then build a plan around what you actually need. Short quizzes after each lesson help new knowledge stick. Career coaches help with your CV, portfolio and interview practice.

Details

Earn a certificate at the end of each course and share it with employers. Every detail is handled by people who care about getting it right. Guided learning paths take you from beginner to job-ready step by step. Start in minutes and get help from a real person whenever you need it.

Every course is built around hands-on projects you can add to your portfolio. Mentors review your projects and give feedback within two days. Thousands of students already trust us, and we work hard to keep it that way.

Pricing

Try the first lesson of any course for free before you decide. Lifetime access means you can revisit lessons whenever you need a refresher. Our team has done this many times, so you never have to guess. Learn on your schedule, with lessons that fit into a lunch break.

Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. Mentors review your projects and give feedback within two days.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Hiveia</a>
  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link" href="#spy-1122">Intro</a></li>
    <li class="nav-item"><a class="nav-link" href="#spy-1123">Details</a></li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-ui-toggle="dropdown" href="#" role="button" aria-expanded="false">More</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#spy-1124">Pricing</a></li></ul></li>
  </ul>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1121" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1122" class="pb-3">
    <h3 class="h6">Intro</h3>
    <p class="small">We keep things simple, so you can focus on what matters to you. Instructors are working professionals who teach what they use every day. Clear prices, honest advice and no surprises along the way. Study groups and a friendly forum keep you motivated along the way.</p>
    <p class="small">We measure success by how many students come back and tell their friends. We listen first, then build a plan around what you actually need. Short quizzes after each lesson help new knowledge stick. Career coaches help with your CV, portfolio and interview practice.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">Earn a certificate at the end of each course and share it with employers. Every detail is handled by people who care about getting it right. Guided learning paths take you from beginner to job-ready step by step. Start in minutes and get help from a real person whenever you need it.</p>
    <p class="small">Every course is built around hands-on projects you can add to your portfolio. Mentors review your projects and give feedback within two days. Thousands of students already trust us, and we work hard to keep it that way.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Try the first lesson of any course for free before you decide. Lifetime access means you can revisit lessons whenever you need a refresher. Our team has done this many times, so you never have to guess. Learn on your schedule, with lessons that fit into a lunch break.</p>
    <p class="small">Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. Mentors review your projects and give feedback within two days.</p>
  </div>
</div>

2Horizontal pills

A row of pills above the box tracks the four steps.

Step one

We keep things simple, so you can focus on what matters to you. Career coaches help with your CV, portfolio and interview practice. Clear prices, honest advice and no surprises along the way.

Step two

Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it. The mobile app downloads lessons, so you can learn on the train. Instructors are working professionals who teach what they use every day.

Step three

Learn on your schedule, with lessons that fit into a lunch break. Try the first lesson of any course for free before you decide. Lifetime access means you can revisit lessons whenever you need a refresher. Thousands of students already trust us, and we work hard to keep it that way.

Step four

We measure success by how many students come back and tell their friends. Short quizzes after each lesson help new knowledge stick. Earn a certificate at the end of each course and share it with employers.

<nav id="spy-nav-1125" class="nav nav-pills mb-2 flex-wrap">
  <a class="nav-link" href="#spy-1126">Step one</a><a class="nav-link" href="#spy-1127">Step two</a><a class="nav-link" href="#spy-1128">Step three</a><a class="nav-link" href="#spy-1129">Step four</a>
</nav>
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1125" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1126" class="pb-3">
    <h3 class="h6">Step one</h3>
    <p class="small">We keep things simple, so you can focus on what matters to you. Career coaches help with your CV, portfolio and interview practice. Clear prices, honest advice and no surprises along the way.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">Every detail is handled by people who care about getting it right. Start in minutes and get help from a real person whenever you need it. The mobile app downloads lessons, so you can learn on the train. Instructors are working professionals who teach what they use every day.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">Learn on your schedule, with lessons that fit into a lunch break. Try the first lesson of any course for free before you decide. Lifetime access means you can revisit lessons whenever you need a refresher. Thousands of students already trust us, and we work hard to keep it that way.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">We measure success by how many students come back and tell their friends. Short quizzes after each lesson help new knowledge stick. Earn a certificate at the end of each course and share it with employers.</p>
  </div>
</div>

3Vertical pills

A column of pills beside the content; on phones the menu sits above.

Career coaching

Every course is built around hands-on projects you can add to your portfolio. Guided learning paths take you from beginner to job-ready step by step. Study groups and a friendly forum keep you motivated along the way. Instructors are working professionals who teach what they use every day.

Online courses

Start in minutes and get help from a real person whenever you need it. Try the first lesson of any course for free before you decide. We measure success by how many students come back and tell their friends.

Study groups

Career coaches help with your CV, portfolio and interview practice. Every course is built around hands-on projects you can add to your portfolio. Friendly people answer your questions quickly, by phone, chat or email.

Questions

Our team has done this many times, so you never have to guess. Learn on your schedule, with lessons that fit into a lunch break. Thousands of students already trust us, and we work hard to keep it that way. Mentors review your projects and give feedback within two days.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1130" class="nav nav-pills flex-column">
      <a class="nav-link" href="#spy-1131">Career coaching</a><a class="nav-link" href="#spy-1132">Online courses</a><a class="nav-link" href="#spy-1133">Study groups</a><a class="nav-link" href="#spy-1134">Questions</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1130" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1131" class="pb-3">
        <h3 class="h6">Career coaching</h3>
        <p class="small">Every course is built around hands-on projects you can add to your portfolio. Guided learning paths take you from beginner to job-ready step by step. Study groups and a friendly forum keep you motivated along the way. Instructors are working professionals who teach what they use every day.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Online courses</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Try the first lesson of any course for free before you decide. We measure success by how many students come back and tell their friends.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Study groups</h3>
        <p class="small">Career coaches help with your CV, portfolio and interview practice. Every course is built around hands-on projects you can add to your portfolio. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Learn on your schedule, with lessons that fit into a lunch break. Thousands of students already trust us, and we work hard to keep it that way. Mentors review your projects and give feedback within two days.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

Sub-items are indented under their parent and both highlight while you scroll.

Getting started

Lifetime access means you can revisit lessons whenever you need a refresher. Clear prices, honest advice and no surprises along the way. Earn a certificate at the end of each course and share it with employers.

Install

Every detail is handled by people who care about getting it right. Short quizzes after each lesson help new knowledge stick. We keep things simple, so you can focus on what matters to you. Study groups and a friendly forum keep you motivated along the way.

Configure

We listen first, then build a plan around what you actually need. Guided learning paths take you from beginner to job-ready step by step. The mobile app downloads lessons, so you can learn on the train.

Usage

We measure success by how many students come back and tell their friends. Clear prices, honest advice and no surprises along the way. Guided learning paths take you from beginner to job-ready step by step.

Examples

Career coaches help with your CV, portfolio and interview practice. Learn on your schedule, with lessons that fit into a lunch break. Friendly people answer your questions quickly, by phone, chat or email. The mobile app downloads lessons, so you can learn on the train.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1135" class="h-100 flex-column align-items-stretch">
      <nav class="nav nav-pills flex-column">
        <a class="nav-link" href="#spy-1136">Getting started</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#spy-1137">Install</a><a class="nav-link ms-3 my-1" href="#spy-1138">Configure</a>
        </nav>
        <a class="nav-link" href="#spy-1139">Usage</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#spy-1140">Examples</a>
        </nav>
      </nav>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:260px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1135" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1136" class="pb-3">
        <h3 class="h6">Getting started</h3>
        <p class="small">Lifetime access means you can revisit lessons whenever you need a refresher. Clear prices, honest advice and no surprises along the way. Earn a certificate at the end of each course and share it with employers.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Short quizzes after each lesson help new knowledge stick. We keep things simple, so you can focus on what matters to you. Study groups and a friendly forum keep you motivated along the way.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Guided learning paths take you from beginner to job-ready step by step. The mobile app downloads lessons, so you can learn on the train.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">We measure success by how many students come back and tell their friends. Clear prices, honest advice and no surprises along the way. Guided learning paths take you from beginner to job-ready step by step.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">Career coaches help with your CV, portfolio and interview practice. Learn on your schedule, with lessons that fit into a lunch break. Friendly people answer your questions quickly, by phone, chat or email. The mobile app downloads lessons, so you can learn on the train.</p>
      </div>
    </div>
  </div>
</div>

5List group

List group items as the spy menu - clear active state with no extra styling.

Morning Midday Afternoon Evening

Morning

Thousands of students already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you. Lifetime access means you can revisit lessons whenever you need a refresher.

Midday

We listen first, then build a plan around what you actually need. Study groups and a friendly forum keep you motivated along the way. Every course is built around hands-on projects you can add to your portfolio.

Afternoon

Try the first lesson of any course for free before you decide. Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess.

Evening

Mentors review your projects and give feedback within two days. Instructors are working professionals who teach what they use every day. Start in minutes and get help from a real person whenever you need it.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1141" class="list-group">
      <a class="list-group-item list-group-item-action" href="#spy-1142">Morning</a><a class="list-group-item list-group-item-action" href="#spy-1143">Midday</a><a class="list-group-item list-group-item-action" href="#spy-1144">Afternoon</a><a class="list-group-item list-group-item-action" href="#spy-1145">Evening</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1141" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1142" class="pb-3">
        <h3 class="h6">Morning</h3>
        <p class="small">Thousands of students already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you. Lifetime access means you can revisit lessons whenever you need a refresher.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Study groups and a friendly forum keep you motivated along the way. Every course is built around hands-on projects you can add to your portfolio.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Try the first lesson of any course for free before you decide. Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Mentors review your projects and give feedback within two days. Instructors are working professionals who teach what they use every day. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

Any links work as targets; style the active one with a scoped class.

Alpha Beta Gamma

Alpha

Earn a certificate at the end of each course and share it with employers. Short quizzes after each lesson help new knowledge stick. Lifetime access means you can revisit lessons whenever you need a refresher. Our team has done this many times, so you never have to guess.

Beta

Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Guided learning paths take you from beginner to job-ready step by step.

Gamma

Try the first lesson of any course for free before you decide. We measure success by how many students come back and tell their friends. Start in minutes and get help from a real person whenever you need it.

<div class="row g-3 cb-spy-plain">
  <div class="col-4">
    <div id="spy-nav-1146" class="d-flex flex-column gap-2 small">
      <a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1147">Alpha</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1148">Beta</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1149">Gamma</a>
    </div>
  </div>
  <div class="col-8">
    <div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1146" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1147" class="pb-3">
        <h3 class="h6">Alpha</h3>
        <p class="small">Earn a certificate at the end of each course and share it with employers. Short quizzes after each lesson help new knowledge stick. Lifetime access means you can revisit lessons whenever you need a refresher. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Guided learning paths take you from beginner to job-ready step by step.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">Try the first lesson of any course for free before you decide. We measure success by how many students come back and tell their friends. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

An underline nav as a sticky-looking section switcher above a product page.

Overview

Instructors are working professionals who teach what they use every day. Every course is built around hands-on projects you can add to your portfolio. Earn a certificate at the end of each course and share it with employers.

Features

Learn on your schedule, with lessons that fit into a lunch break. Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you.

Reviews

Mentors review your projects and give feedback within two days. The mobile app downloads lessons, so you can learn on the train. Study groups and a friendly forum keep you motivated along the way. Thousands of students already trust us, and we work hard to keep it that way.

FAQ

Career coaches help with your CV, portfolio and interview practice. We listen first, then build a plan around what you actually need. Short quizzes after each lesson help new knowledge stick.

<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-bottom">
  <a class="nav-link" href="#spy-1151">Overview</a><a class="nav-link" href="#spy-1152">Features</a><a class="nav-link" href="#spy-1153">Reviews</a><a class="nav-link" href="#spy-1154">FAQ</a>
</nav>
<div class="position-relative border rounded p-3 border-0 px-0" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1150" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1151" class="pb-3">
    <h3 class="h6">Overview</h3>
    <p class="small">Instructors are working professionals who teach what they use every day. Every course is built around hands-on projects you can add to your portfolio. Earn a certificate at the end of each course and share it with employers.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">Learn on your schedule, with lessons that fit into a lunch break. Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">Mentors review your projects and give feedback within two days. The mobile app downloads lessons, so you can learn on the train. Study groups and a friendly forum keep you motivated along the way. Thousands of students already trust us, and we work hard to keep it that way.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">Career coaches help with your CV, portfolio and interview practice. We listen first, then build a plan around what you actually need. Short quizzes after each lesson help new knowledge stick.</p>
  </div>
</div>

8Table of contents on the right

Documentation layout: content first, a small contents list on the right on larger screens.

Summary

Our team has done this many times, so you never have to guess. The mobile app downloads lessons, so you can learn on the train. Clear prices, honest advice and no surprises along the way. Career coaches help with your CV, portfolio and interview practice.

Background

Thousands of students already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email. Earn a certificate at the end of each course and share it with employers.

Method

Lifetime access means you can revisit lessons whenever you need a refresher. Guided learning paths take you from beginner to job-ready step by step. We listen first, then build a plan around what you actually need. Study groups and a friendly forum keep you motivated along the way.

Results

Every course is built around hands-on projects you can add to your portfolio. Try the first lesson of any course for free before you decide. Short quizzes after each lesson help new knowledge stick. Learn on your schedule, with lessons that fit into a lunch break.

On this page

<div class="row g-3">
  <div class="col-md-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1155" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1156" class="pb-3">
        <h3 class="h6">Summary</h3>
        <p class="small">Our team has done this many times, so you never have to guess. The mobile app downloads lessons, so you can learn on the train. Clear prices, honest advice and no surprises along the way. Career coaches help with your CV, portfolio and interview practice.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">Thousands of students already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email. Earn a certificate at the end of each course and share it with employers.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Lifetime access means you can revisit lessons whenever you need a refresher. Guided learning paths take you from beginner to job-ready step by step. We listen first, then build a plan around what you actually need. Study groups and a friendly forum keep you motivated along the way.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">Every course is built around hands-on projects you can add to your portfolio. Try the first lesson of any course for free before you decide. Short quizzes after each lesson help new knowledge stick. Learn on your schedule, with lessons that fit into a lunch break.</p>
      </div>
    </div>
  </div>
  <div class="col-md-3 order-first order-md-last">
    <p class="small fw-semibold text-uppercase text-body-secondary mb-2">On this page</p>
    <nav id="spy-nav-1155" class="nav nav-pills flex-column small">
      <a class="nav-link py-1" href="#spy-1156">Summary</a><a class="nav-link py-1" href="#spy-1157">Background</a><a class="nav-link py-1" href="#spy-1158">Method</a><a class="nav-link py-1" href="#spy-1159">Results</a>
    </nav>
  </div>
</div>

9Numbered steps

<code>.list-group-numbered</code> turns the spy menu into a step counter.

Create an account Set up your profile Invite the team Go live

Create an account

Mentors review your projects and give feedback within two days. We keep things simple, so you can focus on what matters to you. Instructors are working professionals who teach what they use every day.

Set up your profile

We measure success by how many students come back and tell their friends. Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right.

Invite the team

Try the first lesson of any course for free before you decide. Instructors are working professionals who teach what they use every day. We measure success by how many students come back and tell their friends. We keep things simple, so you can focus on what matters to you.

Go live

Mentors review your projects and give feedback within two days. Every course is built around hands-on projects you can add to your portfolio. Learn on your schedule, with lessons that fit into a lunch break. Career coaches help with your CV, portfolio and interview practice.

<div class="row g-3">
  <div class="col-sm-5">
    <div id="spy-nav-1160" class="list-group list-group-numbered">
      <a class="list-group-item list-group-item-action" href="#spy-1161">Create an account</a><a class="list-group-item list-group-item-action" href="#spy-1162">Set up your profile</a><a class="list-group-item list-group-item-action" href="#spy-1163">Invite the team</a><a class="list-group-item list-group-item-action" href="#spy-1164">Go live</a>
    </div>
  </div>
  <div class="col-sm-7">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1160" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1161" class="pb-3">
        <h3 class="h6">Create an account</h3>
        <p class="small">Mentors review your projects and give feedback within two days. We keep things simple, so you can focus on what matters to you. Instructors are working professionals who teach what they use every day.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">We measure success by how many students come back and tell their friends. Start in minutes and get help from a real person whenever you need it. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">Try the first lesson of any course for free before you decide. Instructors are working professionals who teach what they use every day. We measure success by how many students come back and tell their friends. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">Mentors review your projects and give feedback within two days. Every course is built around hands-on projects you can add to your portfolio. Learn on your schedule, with lessons that fit into a lunch break. Career coaches help with your CV, portfolio and interview practice.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Our most popular courses this year

Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need. Start in minutes and get help from a real person whenever you need it.

2024

From teacher to UX designer: a career story

Every detail is handled by people who care about getting it right. Thousands of students already trust us, and we work hard to keep it that way. Earn a certificate at the end of each course and share it with employers.

2025

How we build a course, start to finish

The mobile app downloads lessons, so you can learn on the train. Friendly people answer your questions quickly, by phone, chat or email. Short quizzes after each lesson help new knowledge stick.

2026

How to learn a new skill in 30 days

Guided learning paths take you from beginner to job-ready step by step. Lifetime access means you can revisit lessons whenever you need a refresher. Our team has done this many times, so you never have to guess.

<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1165" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1166" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2023</span>
    <h3 class="h6">Our most popular courses this year</h3>
    <p class="small mb-0">Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
  <div id="spy-1167" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2024</span>
    <h3 class="h6">From teacher to UX designer: a career story</h3>
    <p class="small mb-0">Every detail is handled by people who care about getting it right. Thousands of students already trust us, and we work hard to keep it that way. Earn a certificate at the end of each course and share it with employers.</p>
  </div>
  <div id="spy-1168" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2025</span>
    <h3 class="h6">How we build a course, start to finish</h3>
    <p class="small mb-0">The mobile app downloads lessons, so you can learn on the train. Friendly people answer your questions quickly, by phone, chat or email. Short quizzes after each lesson help new knowledge stick.</p>
  </div>
  <div id="spy-1169" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2026</span>
    <h3 class="h6">How to learn a new skill in 30 days</h3>
    <p class="small mb-0">Guided learning paths take you from beginner to job-ready step by step. Lifetime access means you can revisit lessons whenever you need a refresher. Our team has done this many times, so you never have to guess.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

A beginner's guide to getting started?: Study groups and a friendly forum keep you motivated along the way.
Headlines people actually click?: Learn on your schedule, with lessons that fit into a lunch break.
Looking back at a busy season?: Career coaches help with your CV, portfolio and interview practice.

Shipping

Five things we learned this year?: The mobile app downloads lessons, so you can learn on the train.
The small habits that make a big difference?: Instructors are working professionals who teach what they use every day.
Five study habits that actually work?: We measure success by how many students come back and tell their friends.

Returns

Building a portfolio that gets interviews?: We listen first, then build a plan around what you actually need.
What our students asked us most?: Friendly people answer your questions quickly, by phone, chat or email.
Tips for learning while working full time?: Clear prices, honest advice and no surprises along the way.

<div class="row g-3">
  <div class="col-sm-3">
    <nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
      <a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
    </nav>
  </div>
  <div class="col-sm-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1171" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">A beginner&#39;s guide to getting started?</dt>
          <dd class="small text-body-secondary">Study groups and a friendly forum keep you motivated along the way.</dd>
          <dt class="small">Headlines people actually click?</dt>
          <dd class="small text-body-secondary">Learn on your schedule, with lessons that fit into a lunch break.</dd>
          <dt class="small">Looking back at a busy season?</dt>
          <dd class="small text-body-secondary">Career coaches help with your CV, portfolio and interview practice.</dd>
        </dl>
      </div>
      <div id="spy-1172" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Shipping</h3>
        <dl>
          <dt class="small">Five things we learned this year?</dt>
          <dd class="small text-body-secondary">The mobile app downloads lessons, so you can learn on the train.</dd>
          <dt class="small">The small habits that make a big difference?</dt>
          <dd class="small text-body-secondary">Instructors are working professionals who teach what they use every day.</dd>
          <dt class="small">Five study habits that actually work?</dt>
          <dd class="small text-body-secondary">We measure success by how many students come back and tell their friends.</dd>
        </dl>
      </div>
      <div id="spy-1173" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">Building a portfolio that gets interviews?</dt>
          <dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
          <dt class="small">What our students asked us most?</dt>
          <dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</dd>
          <dt class="small">Tips for learning while working full time?</dt>
          <dd class="small text-body-secondary">Clear prices, honest advice and no surprises along the way.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

Each spy link starts with an icon - nice for spec sheets.

Performance

Start in minutes and get help from a real person whenever you need it. Mentors review your projects and give feedback within two days. Every course is built around hands-on projects you can add to your portfolio. Try the first lesson of any course for free before you decide.

Battery

Short quizzes after each lesson help new knowledge stick. Study groups and a friendly forum keep you motivated along the way. Every detail is handled by people who care about getting it right.

Connectivity

Guided learning paths take you from beginner to job-ready step by step. Lifetime access means you can revisit lessons whenever you need a refresher. Earn a certificate at the end of each course and share it with employers.

Security

Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you. Thousands of students already trust us, and we work hard to keep it that way.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1174" class="nav nav-pills flex-column">
      <a class="nav-link d-flex align-items-center gap-2" href="#spy-1175"><i class="bi bi-cpu" aria-hidden="true"></i>Performance</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1178"><i class="bi bi-shield-check" aria-hidden="true"></i>Security</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1174" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1175" class="pb-3">
        <h3 class="h6">Performance</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Mentors review your projects and give feedback within two days. Every course is built around hands-on projects you can add to your portfolio. Try the first lesson of any course for free before you decide.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">Short quizzes after each lesson help new knowledge stick. Study groups and a friendly forum keep you motivated along the way. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">Guided learning paths take you from beginner to job-ready step by step. Lifetime access means you can revisit lessons whenever you need a refresher. Earn a certificate at the end of each course and share it with employers.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you. Thousands of students already trust us, and we work hard to keep it that way.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

Spy over a stack of plan cards; the pill row shows which plan is in view.

Starter

$9.45 / mo

Hands-on projects
Community forum
Lifetime access

Team

$41.24 / mo

Hands-on projects
Mobile learning
Community forum

Business

$75.82 / mo

Quizzes
Expert mentors
Mobile learning

<nav id="spy-nav-1179" class="nav nav-pills justify-content-center mb-2">
  <a class="nav-link" href="#spy-1180">Starter</a><a class="nav-link" href="#spy-1181">Team</a><a class="nav-link" href="#spy-1182">Business</a>
</nav>
<div class="position-relative border rounded p-3 bg-body-tertiary" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1179" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1180" class="card mb-3">
    <div class="card-body">
      <h3 class="h6 card-title">Starter</h3>
      <p class="fs-4 fw-bold mb-1">$9.45<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Hands-on projects</li>
        <li>Community forum</li>
        <li>Lifetime access</li>
      </ul>
    </div>
  </div>
  <div id="spy-1181" class="card mb-3">
    <div class="card-body">
      <h3 class="h6 card-title">Team</h3>
      <p class="fs-4 fw-bold mb-1">$41.24<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Hands-on projects</li>
        <li>Mobile learning</li>
        <li>Community forum</li>
      </ul>
    </div>
  </div>
  <div id="spy-1182" class="card mb-3">
    <div class="card-body">
      <h3 class="h6 card-title">Business</h3>
      <p class="fs-4 fw-bold mb-1">$75.82<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Quizzes</li>
        <li>Expert mentors</li>
        <li>Mobile learning</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

A reading pane with chapter links in a small dropdown-free list above.

Chapter 1: What employers look for in junior analysts

Try the first lesson of any course for free before you decide. Mentors review your projects and give feedback within two days. Guided learning paths take you from beginner to job-ready step by step.

We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.

Chapter 2: How to stay motivated when learning online

The mobile app downloads lessons, so you can learn on the train. Earn a certificate at the end of each course and share it with employers. We measure success by how many students come back and tell their friends.

Learn on your schedule, with lessons that fit into a lunch break. Lifetime access means you can revisit lessons whenever you need a refresher. Clear prices, honest advice and no surprises along the way. Every course is built around hands-on projects you can add to your portfolio.

Chapter 3: How to choose the right course

Friendly people answer your questions quickly, by phone, chat or email. Short quizzes after each lesson help new knowledge stick. Career coaches help with your CV, portfolio and interview practice. Study groups and a friendly forum keep you motivated along the way.

Thousands of students already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you. Start in minutes and get help from a real person whenever you need it.

Chapter 4: Our favourite tips for busy weeks

Instructors are working professionals who teach what they use every day. Career coaches help with your CV, portfolio and interview practice. Instructors are working professionals who teach what they use every day. We measure success by how many students come back and tell their friends.

Friendly people answer your questions quickly, by phone, chat or email. The mobile app downloads lessons, so you can learn on the train. Learn on your schedule, with lessons that fit into a lunch break.

<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
  <a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="position-relative border rounded p-3 border-top-0 rounded-top-0 lh-lg" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1183" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1184" class="pb-3">
    <h3 class="h6">Chapter 1: What employers look for in junior analysts</h3>
    <p class="small">Try the first lesson of any course for free before you decide. Mentors review your projects and give feedback within two days. Guided learning paths take you from beginner to job-ready step by step.</p>
    <p class="small">We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: How to stay motivated when learning online</h3>
    <p class="small">The mobile app downloads lessons, so you can learn on the train. Earn a certificate at the end of each course and share it with employers. We measure success by how many students come back and tell their friends.</p>
    <p class="small">Learn on your schedule, with lessons that fit into a lunch break. Lifetime access means you can revisit lessons whenever you need a refresher. Clear prices, honest advice and no surprises along the way. Every course is built around hands-on projects you can add to your portfolio.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: How to choose the right course</h3>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Short quizzes after each lesson help new knowledge stick. Career coaches help with your CV, portfolio and interview practice. Study groups and a friendly forum keep you motivated along the way.</p>
    <p class="small">Thousands of students already trust us, and we work hard to keep it that way. We keep things simple, so you can focus on what matters to you. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: Our favourite tips for busy weeks</h3>
    <p class="small">Instructors are working professionals who teach what they use every day. Career coaches help with your CV, portfolio and interview practice. Instructors are working professionals who teach what they use every day. We measure success by how many students come back and tell their friends.</p>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. The mobile app downloads lessons, so you can learn on the train. Learn on your schedule, with lessons that fit into a lunch break.</p>
  </div>
</div>

15Settings form

A long settings form split into sections with a side menu that follows along.

Profile Notifications Privacy

Profile

Display name

City

Try the first lesson of any course for free before you decide. Thousands of students already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess. Earn a certificate at the end of each course and share it with employers.

Notifications

Product news

Weekly digest

Short quizzes after each lesson help new knowledge stick. Every course is built around hands-on projects you can add to your portfolio. Study groups and a friendly forum keep you motivated along the way.

Privacy

Hide my profile from search

Lifetime access means you can revisit lessons whenever you need a refresher. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1188" class="list-group list-group-flush border rounded">
      <a class="list-group-item list-group-item-action" href="#spy-1189">Profile</a><a class="list-group-item list-group-item-action" href="#spy-1190">Notifications</a><a class="list-group-item list-group-item-action" href="#spy-1191">Privacy</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1188" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1189" class="pb-3">
        <h3 class="h6">Profile</h3>
        <div class="mb-2">
          <label for="spy-in-1192" class="form-label small">Display name</label>
          <input class="form-control form-control-sm" id="spy-in-1192" value="Ivy Delgado">
        </div>
        <div class="mb-2">
          <label for="spy-in-1193" class="form-label small">City</label>
          <input class="form-control form-control-sm" id="spy-in-1193" value="Barcelona">
        </div>
        <p class="small">Try the first lesson of any course for free before you decide. Thousands of students already trust us, and we work hard to keep it that way. Our team has done this many times, so you never have to guess. Earn a certificate at the end of each course and share it with employers.</p>
      </div>
      <div id="spy-1190" class="pb-3">
        <h3 class="h6">Notifications</h3>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1194" checked>
          <label class="form-check-label small" for="spy-sw-1194">Product news</label>
        </div>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1195">
          <label class="form-check-label small" for="spy-sw-1195">Weekly digest</label>
        </div>
        <p class="small">Short quizzes after each lesson help new knowledge stick. Every course is built around hands-on projects you can add to your portfolio. Study groups and a friendly forum keep you motivated along the way.</p>
      </div>
      <div id="spy-1191" class="pb-3">
        <h3 class="h6">Privacy</h3>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="spy-sw-1196">
          <label class="form-check-label small" for="spy-sw-1196">Hide my profile from search</label>
        </div>
        <p class="small">Lifetime access means you can revisit lessons whenever you need a refresher. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Legal

Isla Duarte
Operations Manager
Amara Novak
Project Manager
Kenji Patel
Customer Success

Design

Jonah Mensah
Customer Success
Diego Larsen
Data Analyst
Elena Morgan
HR Partner

Engineering

Arjun Brennan
Art Director
Mateo Delgado
Frontend Engineer
Freya Varga
Art Director

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Legal</a><a class="nav-link" href="#spy-1199">Design</a><a class="nav-link" href="#spy-1200">Engineering</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1197" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1198" class="pb-3">
    <h3 class="h6">Legal</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Isla Duarte"><div><div class="small fw-semibold">Isla Duarte</div><div class="small text-body-secondary">Operations Manager</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Amara Novak"><div><div class="small fw-semibold">Amara Novak</div><div class="small text-body-secondary">Project Manager</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-circle" width="36" height="36" alt="Kenji Patel"><div><div class="small fw-semibold">Kenji Patel</div><div class="small text-body-secondary">Customer Success</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Design</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Jonah Mensah"><div><div class="small fw-semibold">Jonah Mensah</div><div class="small text-body-secondary">Customer Success</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Diego Larsen"><div><div class="small fw-semibold">Diego Larsen</div><div class="small text-body-secondary">Data Analyst</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Elena Morgan"><div><div class="small fw-semibold">Elena Morgan</div><div class="small text-body-secondary">HR Partner</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-3">
    <h3 class="h6">Engineering</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Arjun Brennan"><div><div class="small fw-semibold">Arjun Brennan</div><div class="small text-body-secondary">Art Director</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Mateo Delgado"><div><div class="small fw-semibold">Mateo Delgado</div><div class="small text-body-secondary">Frontend Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Freya Varga"><div><div class="small fw-semibold">Freya Varga</div><div class="small text-body-secondary">Art Director</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Marketing

Leadership skills$156.99
Public speaking$82.00
Data analysis$204.99

Development

Project management$176.00
Digital marketing$131.99
UX fundamentals$140.00

Design

Public speaking$75.00
Leadership skills$153.00
Copywriting$96.99

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Marketing</a><a class="nav-link" href="#spy-1203">Development</a><a class="nav-link" href="#spy-1204">Design</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1201" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1202" class="pb-3">
    <h3 class="h6">Marketing</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Leadership skills</span><span class="fw-semibold">$156.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Public speaking</span><span class="fw-semibold">$82.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Data analysis</span><span class="fw-semibold">$204.99</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-3">
    <h3 class="h6">Development</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Project management</span><span class="fw-semibold">$176.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Digital marketing</span><span class="fw-semibold">$131.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>UX fundamentals</span><span class="fw-semibold">$140.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-3">
    <h3 class="h6">Design</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Public speaking</span><span class="fw-semibold">$75.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Leadership skills</span><span class="fw-semibold">$153.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Copywriting</span><span class="fw-semibold">$96.99</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need. Guided learning paths take you from beginner to job-ready step by step.

This week

Mentors review your projects and give feedback within two days. We keep things simple, so you can focus on what matters to you. Earn a certificate at the end of each course and share it with employers.

Later

Instructors are working professionals who teach what they use every day. Career coaches help with your CV, portfolio and interview practice. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.

<div class="card">
  <div class="card-header">
    <nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
      <a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
    </nav>
  </div>
  <div class="card-body p-0">
    <div class="position-relative border rounded p-3 border-0 rounded-0" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1205" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1206" class="pb-3">
        <h3 class="h6">Today</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need. Guided learning paths take you from beginner to job-ready step by step.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">Mentors review your projects and give feedback within two days. We keep things simple, so you can focus on what matters to you. Earn a certificate at the end of each course and share it with employers.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">Instructors are working professionals who teach what they use every day. Career coaches help with your CV, portfolio and interview practice. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

The whole widget inside <code>data-ui-theme="dark"</code>.

Launch

Mentors review your projects and give feedback within two days. Friendly people answer your questions quickly, by phone, chat or email. Learn on your schedule, with lessons that fit into a lunch break.

Orbit

Guided learning paths take you from beginner to job-ready step by step. The mobile app downloads lessons, so you can learn on the train. Our team has done this many times, so you never have to guess.

Landing

Study groups and a friendly forum keep you motivated along the way. Every course is built around hands-on projects you can add to your portfolio. Start in minutes and get help from a real person whenever you need it. We measure success by how many students come back and tell their friends.

<div data-ui-theme="dark" class="bg-dark text-body rounded p-3">
  <nav id="spy-nav-1209" class="nav nav-pills mb-2">
    <a class="nav-link" href="#spy-1210">Launch</a><a class="nav-link" href="#spy-1211">Orbit</a><a class="nav-link" href="#spy-1212">Landing</a>
  </nav>
  <div class="position-relative border rounded p-3 border-secondary" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1209" data-ui-smooth-scroll="true" tabindex="0">
    <div id="spy-1210" class="pb-3">
      <h3 class="h6">Launch</h3>
      <p class="small">Mentors review your projects and give feedback within two days. Friendly people answer your questions quickly, by phone, chat or email. Learn on your schedule, with lessons that fit into a lunch break.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">Guided learning paths take you from beginner to job-ready step by step. The mobile app downloads lessons, so you can learn on the train. Our team has done this many times, so you never have to guess.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Study groups and a friendly forum keep you motivated along the way. Every course is built around hands-on projects you can add to your portfolio. Start in minutes and get help from a real person whenever you need it. We measure success by how many students come back and tell their friends.</p>
    </div>
  </div>
</div>

20Changelog

Version links on the left follow release notes with coloured change badges.

v3.2 May 19, 2026

NewThousands of students already trust us, and we work hard to keep it that way.
ImprovedTry the first lesson of any course for free before you decide.
FixedLifetime access means you can revisit lessons whenever you need a refresher.

v3.1 Oct 3, 2025

NewShort quizzes after each lesson help new knowledge stick.
ImprovedWe keep things simple, so you can focus on what matters to you.
FixedWe listen first, then build a plan around what you actually need.

v3.0 Mar 12, 2026

NewThousands of students already trust us, and we work hard to keep it that way.
ImprovedInstructors are working professionals who teach what they use every day.
FixedWe keep things simple, so you can focus on what matters to you.

v2.9 Nov 20, 2025

NewEvery detail is handled by people who care about getting it right.
ImprovedLifetime access means you can revisit lessons whenever you need a refresher.
FixedOur team has done this many times, so you never have to guess.

<div class="row g-3">
  <div class="col-3">
    <nav id="spy-nav-1213" class="nav nav-pills flex-column small">
      <a class="nav-link" href="#spy-1214">v3.2</a><a class="nav-link" href="#spy-1215">v3.1</a><a class="nav-link" href="#spy-1216">v3.0</a><a class="nav-link" href="#spy-1217">v2.9</a>
    </nav>
  </div>
  <div class="col-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1213" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1214" class="pb-3">
        <h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">May 19, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Thousands of students already trust us, and we work hard to keep it that way.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Try the first lesson of any course for free before you decide.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Lifetime access means you can revisit lessons whenever you need a refresher.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Oct 3, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Short quizzes after each lesson help new knowledge stick.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We keep things simple, so you can focus on what matters to you.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We listen first, then build a plan around what you actually need.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Mar 12, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Thousands of students already trust us, and we work hard to keep it that way.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Instructors are working professionals who teach what they use every day.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We keep things simple, so you can focus on what matters to you.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Nov 20, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Every detail is handled by people who care about getting it right.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Lifetime access means you can revisit lessons whenever you need a refresher.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Our team has done this many times, so you never have to guess.</li>
        </ul>
      </div>
    </div>
  </div>
</div>