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-bs-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 listen first, then build a plan around what you actually need. Mentors review your projects and give feedback within two days. 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. Every detail is handled by people who care about getting it right. The mobile app downloads lessons, so you can learn on the train. Learn on your schedule, with lessons that fit into a lunch break.

Details

Study groups and a friendly forum keep you motivated along the way. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.

Friendly people answer your questions quickly, by phone, chat or email. 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. Career coaches help with your CV, portfolio and interview practice.

Pricing

Earn a certificate at the end of each course and share it with employers. We keep things simple, so you can focus on what matters to you. Short quizzes after each lesson help new knowledge stick.

We measure success by how many students come back and tell their friends. Instructors are working professionals who teach what they use every day. We listen first, then build a plan around what you actually need.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Novaera</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-bs-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-bs-spy="scroll" data-bs-target="#spy-nav-1121" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1122" class="pb-3">
    <h3 class="h6">Intro</h3>
    <p class="small">We listen first, then build a plan around what you actually need. Mentors review your projects and give feedback within two days. Try the first lesson of any course for free before you decide.</p>
    <p class="small">Thousands of students already trust us, and we work hard to keep it that way. Every detail is handled by people who care about getting it right. 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 id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">Study groups and a friendly forum keep you motivated along the way. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.</p>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. 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. Career coaches help with your CV, portfolio and interview practice.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Earn a certificate at the end of each course and share it with employers. We keep things simple, so you can focus on what matters to you. Short quizzes after each lesson help new knowledge stick.</p>
    <p class="small">We measure success by how many students come back and tell their friends. Instructors are working professionals who teach what they use every day. We listen first, then build a plan around what you actually need.</p>
  </div>
</div>

2Horizontal pills

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

Step one

Start in minutes and get help from a real person whenever you need it. Lifetime access means you can revisit lessons whenever you need a refresher. Career coaches help with your CV, portfolio and interview practice. Try the first lesson of any course for free before you decide.

Step two

Learn on your schedule, with lessons that fit into a lunch break. Lifetime access means you can revisit lessons whenever you need a refresher. Start in minutes and get help from a real person whenever you need it.

Step three

Every course is built around hands-on projects you can add to your portfolio. We listen first, then build a plan around what you actually need. Earn a certificate at the end of each course and share it with employers. Short quizzes after each lesson help new knowledge stick.

Step four

Thousands of students already trust us, and we work hard to keep it that way. Instructors are working professionals who teach what they use every day. Clear prices, honest advice and no surprises along the way. Guided learning paths take you from beginner to job-ready step by step.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1125" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1126" class="pb-3">
    <h3 class="h6">Step one</h3>
    <p class="small">Start in minutes and get help from a real person whenever you need it. Lifetime access means you can revisit lessons whenever you need a refresher. Career coaches help with your CV, portfolio and interview practice. Try the first lesson of any course for free before you decide.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <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. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">Every course is built around hands-on projects you can add to your portfolio. We listen first, then build a plan around what you actually need. Earn a certificate at the end of each course and share it with employers. Short quizzes after each lesson help new knowledge stick.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">Thousands of students already trust us, and we work hard to keep it that way. Instructors are working professionals who teach what they use every day. 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>

3Vertical pills

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

Certificates

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. Friendly people answer your questions quickly, by phone, chat or email.

Online courses

Mentors review your projects and give feedback within two days. Every detail is handled by people who care about getting it right. We measure success by how many students come back and tell their friends. Study groups and a friendly forum keep you motivated along the way.

Live workshops

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. Mentors review your projects and give feedback within two days.

Questions

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. Guided learning paths take you from beginner to job-ready step by step.

<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">Certificates</a><a class="nav-link" href="#spy-1132">Online courses</a><a class="nav-link" href="#spy-1133">Live workshops</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-bs-spy="scroll" data-bs-target="#spy-nav-1130" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1131" class="pb-3">
        <h3 class="h6">Certificates</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. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Online courses</h3>
        <p class="small">Mentors review your projects and give feedback within two days. Every detail is handled by people who care about getting it right. We measure success by how many students come back and tell their friends. Study groups and a friendly forum keep you motivated along the way.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Live workshops</h3>
        <p class="small">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. Mentors review your projects and give feedback within two days.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">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. Guided learning paths take you from beginner to job-ready step by step.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email.

Install

The mobile app downloads lessons, so you can learn on the train. Start in minutes and get help from a real person whenever you need it. Career coaches help with your CV, portfolio and interview practice.

Configure

Study groups and a friendly forum keep you motivated along the way. Instructors are working professionals who teach what they use every day. Every detail is handled by people who care about getting it right.

Usage

We measure success by how many students come back and tell their friends. 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. Learn on your schedule, with lessons that fit into a lunch break.

Examples

We listen first, then build a plan around what you actually need. Short quizzes after each lesson help new knowledge stick. Clear prices, honest advice and no surprises along the way.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1135" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1136" class="pb-3">
        <h3 class="h6">Getting started</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">The mobile app downloads lessons, so you can learn on the train. Start in minutes and get help from a real person whenever you need it. Career coaches help with your CV, portfolio and interview practice.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">Study groups and a friendly forum keep you motivated along the way. Instructors are working professionals who teach what they use every day. Every detail is handled by people who care about getting it right.</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. 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. Learn on your schedule, with lessons that fit into a lunch break.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Short quizzes after each lesson help new knowledge stick. Clear prices, honest advice and no surprises along the way.</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

The mobile app downloads lessons, so you can learn on the train. We measure success by how many students come back and tell their friends. Short quizzes after each lesson help new knowledge stick. Instructors are working professionals who teach what they use every day.

Midday

Mentors review your projects and give feedback within two days. Lifetime access means you can revisit lessons whenever you need a refresher. Learn on your schedule, with lessons that fit into a lunch break. Study groups and a friendly forum keep you motivated along the way.

Afternoon

Start in minutes and get help from a real person whenever you need it. Earn a certificate at the end of each course and share it with employers. We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way.

Evening

Friendly people answer your questions quickly, by phone, chat or email. Career coaches help with your CV, portfolio and interview practice. Try the first lesson of any course for free before you decide. Every course is built around hands-on projects you can add to your portfolio.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1141" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1142" class="pb-3">
        <h3 class="h6">Morning</h3>
        <p class="small">The mobile app downloads lessons, so you can learn on the train. We measure success by how many students come back and tell their friends. Short quizzes after each lesson help new knowledge stick. Instructors are working professionals who teach what they use every day.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">Mentors review your projects and give feedback within two days. Lifetime access means you can revisit lessons whenever you need a refresher. Learn on your schedule, with lessons that fit into a lunch break. Study groups and a friendly forum keep you motivated along the way.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Earn a certificate at the end of each course and share it with employers. We listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Career coaches help with your CV, portfolio and interview practice. Try the first lesson of any course for free before you decide. Every course is built around hands-on projects you can add to your portfolio.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

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. Guided learning paths take you from beginner to job-ready step by step. Our team has done this many times, so you never have to guess.

Beta

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. 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.

Gamma

Short quizzes after each lesson help new knowledge stick. Earn a certificate at the end of each course and share it with employers. Thousands of students already trust us, and we work hard to keep it that way. Try the first lesson of any course for free before you decide.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1146" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1147" class="pb-3">
        <h3 class="h6">Alpha</h3>
        <p class="small">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. Guided learning paths take you from beginner to job-ready step by step. 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">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. 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-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">Short quizzes after each lesson help new knowledge stick. Earn a certificate at the end of each course and share it with employers. Thousands of students already trust us, and we work hard to keep it that way. Try the first lesson of any course for free before you decide.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

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. Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right.

Features

Every course is built around hands-on projects you can add to your portfolio. Mentors review your projects and give feedback within two days. We measure success by how many students come back and tell their friends.

Reviews

Instructors are working professionals who teach what they use every day. Lifetime access means you can revisit lessons whenever you need a refresher. Learn on your schedule, with lessons that fit into a lunch break.

FAQ

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

<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-bs-spy="scroll" data-bs-target="#spy-nav-1150" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1151" class="pb-3">
    <h3 class="h6">Overview</h3>
    <p class="small">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. Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <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. We measure success by how many students come back and tell their friends.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">Instructors are working professionals who teach what they use every day. Lifetime access means you can revisit lessons whenever you need a refresher. Learn on your schedule, with lessons that fit into a lunch break.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. Study groups and a friendly forum keep you motivated along the way. Career coaches help with your CV, portfolio and interview practice.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

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. Guided learning paths take you from beginner to job-ready step by step. Friendly people answer your questions quickly, by phone, chat or email.

Background

We keep things simple, so you can focus on what matters to you. Every course is built around hands-on projects you can add to your portfolio. Short quizzes after each lesson help new knowledge stick.

Method

Career coaches help with your CV, portfolio and interview practice. Study groups and a friendly forum keep you motivated along the way. Earn a certificate at the end of each course and share it with employers. Instructors are working professionals who teach what they use every day.

Results

Mentors review your projects and give feedback within two days. 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.

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-bs-spy="scroll" data-bs-target="#spy-nav-1155" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1156" class="pb-3">
        <h3 class="h6">Summary</h3>
        <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. Guided learning paths take you from beginner to job-ready step by step. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Every course is built around hands-on projects you can add to your portfolio. Short quizzes after each lesson help new knowledge stick.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Career coaches help with your CV, portfolio and interview practice. Study groups and a friendly forum keep you motivated along the way. Earn a certificate at the end of each course and share it with employers. Instructors are working professionals who teach what they use every day.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">Mentors review your projects and give feedback within two days. 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.</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

Clear prices, honest advice and no surprises along the way. Try the first lesson of any course for free before you decide. Lifetime access means you can revisit lessons whenever you need a refresher.

Set up your profile

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. 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

Career coaches help with your CV, portfolio and interview practice. Earn a certificate at the end of each course and share it with employers. Every course is built around hands-on projects you can add to your portfolio. Mentors review your projects and give feedback within two days.

Go live

Study groups and a friendly forum keep you motivated along the way. We listen first, then build a plan around what you actually need. 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.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1160" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1161" class="pb-3">
        <h3 class="h6">Create an account</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Try the first lesson of any course for free before you decide. Lifetime access means you can revisit lessons whenever you need a refresher.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">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. 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">Career coaches help with your CV, portfolio and interview practice. Earn a certificate at the end of each course and share it with employers. Every course is built around hands-on projects you can add to your portfolio. Mentors review your projects and give feedback within two days.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">Study groups and a friendly forum keep you motivated along the way. We listen first, then build a plan around what you actually need. 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>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Looking back at a busy season

Friendly people answer your questions quickly, by phone, chat or email. Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess. Guided learning paths take you from beginner to job-ready step by step.

2024

What employers look for in junior analysts

Learn on your schedule, with lessons that fit into a lunch break. We measure success by how many students come back and tell their friends. Lifetime access means you can revisit lessons whenever you need a refresher.

2025

Headlines people actually click

Short quizzes after each lesson help new knowledge stick. 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.

2026

Tips for learning while working full time

Instructors are working professionals who teach what they use every day. The mobile app downloads lessons, so you can learn on the train. Clear prices, honest advice and no surprises along the way.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1165" data-bs-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">Looking back at a busy season</h3>
    <p class="small mb-0">Friendly people answer your questions quickly, by phone, chat or email. Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess. Guided learning paths take you from beginner to job-ready step by step.</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">What employers look for in junior analysts</h3>
    <p class="small mb-0">Learn on your schedule, with lessons that fit into a lunch break. We measure success by how many students come back and tell their friends. Lifetime access means you can revisit lessons whenever you need a refresher.</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">Headlines people actually click</h3>
    <p class="small mb-0">Short quizzes after each lesson help new knowledge stick. 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.</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">Tips for learning while working full time</h3>
    <p class="small mb-0">Instructors are working professionals who teach what they use every day. The mobile app downloads lessons, so you can learn on the train. Clear prices, honest advice and no surprises along the way.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

Our favourite tips for busy weeks?: Our team has done this many times, so you never have to guess.
Our most popular courses this year?: We keep things simple, so you can focus on what matters to you.
How we build a course, start to finish?: Short quizzes after each lesson help new knowledge stick.

Shipping

How to learn a new skill in 30 days?: Instructors are working professionals who teach what they use every day.
From teacher to UX designer: a career story?: Mentors review your projects and give feedback within two days.
Building a portfolio that gets interviews?: Thousands of students already trust us, and we work hard to keep it that way.

Returns

Five things we learned this year?: Every detail is handled by people who care about getting it right.
How to choose the right course?: We measure success by how many students come back and tell their friends.
How to stay motivated when learning online?: We listen first, then build a plan around what you actually need.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1170" data-bs-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">Our favourite tips for busy weeks?</dt>
          <dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</dd>
          <dt class="small">Our most popular courses this year?</dt>
          <dd class="small text-body-secondary">We keep things simple, so you can focus on what matters to you.</dd>
          <dt class="small">How we build a course, start to finish?</dt>
          <dd class="small text-body-secondary">Short quizzes after each lesson help new knowledge stick.</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">How to learn a new skill in 30 days?</dt>
          <dd class="small text-body-secondary">Instructors are working professionals who teach what they use every day.</dd>
          <dt class="small">From teacher to UX designer: a career story?</dt>
          <dd class="small text-body-secondary">Mentors review your projects and give feedback within two days.</dd>
          <dt class="small">Building a portfolio that gets interviews?</dt>
          <dd class="small text-body-secondary">Thousands of students already trust us, and we work hard to keep it that way.</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">Five things we learned this year?</dt>
          <dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
          <dt class="small">How to choose the right course?</dt>
          <dd class="small text-body-secondary">We measure success by how many students come back and tell their friends.</dd>
          <dt class="small">How to stay motivated when learning online?</dt>
          <dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

Career coaches help with your CV, portfolio and interview practice. Lifetime access means you can revisit lessons whenever you need a refresher. Every course is built around hands-on projects you can add to your portfolio.

Battery

Learn on your schedule, with lessons that fit into a lunch break. Earn a certificate at the end of each course and share it with employers. Start in minutes and get help from a real person whenever you need it. Study groups and a friendly forum keep you motivated along the way.

Connectivity

Guided learning paths take you from beginner to job-ready step by step. Try the first lesson of any course for free before you decide. The mobile app downloads lessons, so you can learn on the train.

Security

Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. 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-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-bs-spy="scroll" data-bs-target="#spy-nav-1174" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1175" class="pb-3">
        <h3 class="h6">Performance</h3>
        <p class="small">Career coaches help with your CV, portfolio and interview practice. Lifetime access means you can revisit lessons whenever you need a refresher. Every course is built around hands-on projects you can add to your portfolio.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">Learn on your schedule, with lessons that fit into a lunch break. Earn a certificate at the end of each course and share it with employers. Start in minutes and get help from a real person whenever you need it. Study groups and a friendly forum keep you motivated along the way.</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. Try the first lesson of any course for free before you decide. The mobile app downloads lessons, so you can learn on the train.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</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. The mobile app downloads lessons, so you can learn on the train.</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.12 / mo

Quizzes
Lifetime access
Expert mentors

Team

$37.70 / mo

Lifetime access
Expert mentors
Quizzes

Business

$57.08 / mo

Expert mentors
Quizzes
Expert mentors

<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-bs-spy="scroll" data-bs-target="#spy-nav-1179" data-bs-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.12<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Quizzes</li>
        <li>Lifetime access</li>
        <li>Expert mentors</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">$37.70<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Lifetime access</li>
        <li>Expert mentors</li>
        <li>Quizzes</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">$57.08<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Expert mentors</li>
        <li>Quizzes</li>
        <li>Expert mentors</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: The small habits that make a big difference

Earn a certificate at the end of each course and share it with employers. Learn on your schedule, with lessons that fit into a lunch break. Career coaches help with your CV, portfolio and interview practice.

Friendly people answer your questions quickly, by phone, chat or email. 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. We measure success by how many students come back and tell their friends.

Chapter 2: What our students asked us most

Our team has done this many times, so you never have to guess. Study groups and a friendly forum keep you motivated along the way. Try the first lesson of any course for free before you decide. Mentors review your projects and give feedback within two days.

Instructors are working professionals who teach what they use every day. Clear prices, honest advice and no surprises 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.

Chapter 3: A beginner's guide to getting started

We listen first, then build a plan around what you actually need. Short quizzes after each lesson help new knowledge stick. Thousands of students already trust us, and we work hard to keep it that way. 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. The mobile app downloads lessons, so you can learn on the train. We measure success by how many students come back and tell their friends.

Chapter 4: Five study habits that actually work

Mentors review your projects and give feedback within two days. Career coaches help with your CV, portfolio and interview practice. Friendly people answer your questions quickly, by phone, chat or email.

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. Study groups and a friendly forum keep you motivated along the way. Every detail is handled by people who care about getting it right.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1183" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1184" class="pb-3">
    <h3 class="h6">Chapter 1: The small habits that make a big difference</h3>
    <p class="small">Earn a certificate at the end of each course and share it with employers. Learn on your schedule, with lessons that fit into a lunch break. Career coaches help with your CV, portfolio and interview practice.</p>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. 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. We measure success by how many students come back and tell their friends.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: What our students asked us most</h3>
    <p class="small">Our team has done this many times, so you never have to guess. Study groups and a friendly forum keep you motivated along the way. Try the first lesson of any course for free before you decide. Mentors review your projects and give feedback within two days.</p>
    <p class="small">Instructors are working professionals who teach what they use every day. Clear prices, honest advice and no surprises 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.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: A beginner&#39;s guide to getting started</h3>
    <p class="small">We listen first, then build a plan around what you actually need. Short quizzes after each lesson help new knowledge stick. Thousands of students already trust us, and we work hard to keep it that way. Every detail is handled by people who care about getting it right.</p>
    <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. We measure success by how many students come back and tell their friends.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: Five study habits that actually work</h3>
    <p class="small">Mentors review your projects and give feedback within two days. Career coaches help with your CV, portfolio and interview practice. Friendly people answer your questions quickly, by phone, chat or email.</p>
    <p class="small">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. 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>

15Settings form

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

Profile Notifications Privacy

Profile

Display name

City

Clear prices, honest advice and no surprises along the way. Lifetime access means you can revisit lessons whenever you need a refresher. We listen first, then build a plan around what you actually need.

Notifications

Product news

Weekly digest

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. We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess.

Privacy

Hide my profile from search

Earn a certificate at the end of each course and share it with employers. 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.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1188" data-bs-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="Sofia Quinn">
        </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="Singapore">
        </div>
        <p class="small">Clear prices, honest advice and no surprises along the way. Lifetime access means you can revisit lessons whenever you need a refresher. We listen first, then build a plan around what you actually need.</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">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. We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess.</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">Earn a certificate at the end of each course and share it with employers. 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.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Research

Hana Mensah
Data Analyst
Mia Carter
Support Specialist
Chloe Fischer
Operations Manager

Marketing

Owen Delgado
Data Analyst
Lea Hughes
Frontend Engineer
Kai Moreau
Data Analyst

Operations

Nora Kowalski
Marketing Lead
Ivy Ortega
Support Specialist
Felix Morgan
Operations Manager

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Research</a><a class="nav-link" href="#spy-1199">Marketing</a><a class="nav-link" href="#spy-1200">Operations</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1197" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1198" class="pb-3">
    <h3 class="h6">Research</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Hana Mensah"><div><div class="small fw-semibold">Hana Mensah</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="Mia Carter"><div><div class="small fw-semibold">Mia Carter</div><div class="small text-body-secondary">Support Specialist</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Chloe Fischer"><div><div class="small fw-semibold">Chloe Fischer</div><div class="small text-body-secondary">Operations Manager</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Marketing</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="Owen Delgado"><div><div class="small fw-semibold">Owen Delgado</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-4.svg" class="rounded-circle" width="36" height="36" alt="Lea Hughes"><div><div class="small fw-semibold">Lea Hughes</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-6.svg" class="rounded-circle" width="36" height="36" alt="Kai Moreau"><div><div class="small fw-semibold">Kai Moreau</div><div class="small text-body-secondary">Data Analyst</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-3">
    <h3 class="h6">Operations</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Nora Kowalski"><div><div class="small fw-semibold">Nora Kowalski</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="36" height="36" alt="Ivy Ortega"><div><div class="small fw-semibold">Ivy Ortega</div><div class="small text-body-secondary">Support Specialist</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Felix Morgan"><div><div class="small fw-semibold">Felix Morgan</div><div class="small text-body-secondary">Operations Manager</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Development

Python basics$115.00
Digital marketing$139.00
Photography$101.99

Design

Brand design$135.99
Leadership skills$164.99
Python basics$130.00

Business

Public speaking$76.00
UX fundamentals$148.99
Copywriting$98.00

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Development</a><a class="nav-link" href="#spy-1203">Design</a><a class="nav-link" href="#spy-1204">Business</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1201" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1202" 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>Python basics</span><span class="fw-semibold">$115.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Digital marketing</span><span class="fw-semibold">$139.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Photography</span><span class="fw-semibold">$101.99</span></li>
    </ul>
  </div>
  <div id="spy-1203" 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>Brand design</span><span class="fw-semibold">$135.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Leadership skills</span><span class="fw-semibold">$164.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Python basics</span><span class="fw-semibold">$130.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-3">
    <h3 class="h6">Business</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">$76.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>UX fundamentals</span><span class="fw-semibold">$148.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Copywriting</span><span class="fw-semibold">$98.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

Instructors are working professionals who teach what they use every day. Short quizzes after each lesson help new knowledge stick. Clear prices, honest advice and no surprises along the way.

This week

Short quizzes after each lesson help new knowledge stick. We listen first, then build a plan around what you actually need. 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.

Later

Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. Lifetime access means you can revisit lessons whenever you need a refresher.

<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-bs-spy="scroll" data-bs-target="#spy-nav-1205" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1206" class="pb-3">
        <h3 class="h6">Today</h3>
        <p class="small">Instructors are working professionals who teach what they use every day. Short quizzes after each lesson help new knowledge stick. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">Short quizzes after each lesson help new knowledge stick. We listen first, then build a plan around what you actually need. 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-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. Lifetime access means you can revisit lessons whenever you need a refresher.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

We keep things simple, so you can focus on what matters to you. 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. The mobile app downloads lessons, so you can learn on the train.

Orbit

We measure success by how many students come back and tell their friends. Earn a certificate at the end of each course and share it with employers. Study groups and a friendly forum keep you motivated along the way.

Landing

Guided learning paths take you from beginner to job-ready step by step. Mentors review your projects and give feedback within two days. Career coaches help with your CV, portfolio and interview practice. Learn on your schedule, with lessons that fit into a lunch break.

<div data-bs-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-bs-spy="scroll" data-bs-target="#spy-nav-1209" data-bs-smooth-scroll="true" tabindex="0">
    <div id="spy-1210" class="pb-3">
      <h3 class="h6">Launch</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. 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.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">We measure success by how many students come back and tell their friends. Earn a certificate at the end of each course and share it with employers. Study groups and a friendly forum keep you motivated along the way.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Guided learning paths take you from beginner to job-ready step by step. Mentors review your projects and give feedback within two days. Career coaches help with your CV, portfolio and interview practice. Learn on your schedule, with lessons that fit into a lunch break.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Jan 6, 2026

NewThousands of students already trust us, and we work hard to keep it that way.
ImprovedOur team has done this many times, so you never have to guess.
FixedWe listen first, then build a plan around what you actually need.

v3.1 Sep 18, 2025

NewThousands of students already trust us, and we work hard to keep it that way.
ImprovedEvery course is built around hands-on projects you can add to your portfolio.
FixedLearn on your schedule, with lessons that fit into a lunch break.

v3.0 Mar 2, 2026

NewShort quizzes after each lesson help new knowledge stick.
ImprovedStart in minutes and get help from a real person whenever you need it.
FixedCareer coaches help with your CV, portfolio and interview practice.

v2.9 Apr 9, 2026

NewWe measure success by how many students come back and tell their friends.
ImprovedFriendly people answer your questions quickly, by phone, chat or email.
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-bs-spy="scroll" data-bs-target="#spy-nav-1213" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1214" class="pb-3">
        <h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">Jan 6, 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>Our team has done this many times, so you never have to guess.</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-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Sep 18, 2025</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>Every course is built around hands-on projects you can add to your portfolio.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Learn on your schedule, with lessons that fit into a lunch break.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Mar 2, 2026</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>Start in minutes and get help from a real person whenever you need it.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Career coaches help with your CV, portfolio and interview practice.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Apr 9, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We measure success by how many students come back and tell their friends.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Friendly people answer your questions quickly, by phone, chat or email.</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>