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 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. Short quizzes after each lesson help new knowledge stick. Learn on your schedule, with lessons that fit into a lunch break.

We keep things simple, so you can focus on what matters to you. Try the first lesson of any course for free before you decide. Instructors are working professionals who teach what they use every day.

Details

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. Study groups and a friendly forum keep you motivated along the way.

Guided learning paths take you from beginner to job-ready step by step. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.

Pricing

Thousands of students already trust us, and we work hard to keep it that way. 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.

Friendly people answer your questions quickly, by phone, chat or email. Career coaches help with your CV, portfolio and interview practice. 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="#">Nimbus Labs</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 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. Short quizzes after each lesson help new knowledge stick. Learn on your schedule, with lessons that fit into a lunch break.</p>
    <p class="small">We keep things simple, so you can focus on what matters to you. Try the first lesson of any course for free before you decide. Instructors are working professionals who teach what they use every day.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</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. Study groups and a friendly forum keep you motivated along the way.</p>
    <p class="small">Guided learning paths take you from beginner to job-ready step by step. 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 id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Thousands of students already trust us, and we work hard to keep it that way. 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>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Career coaches help with your CV, portfolio and interview practice. 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 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. Learn on your schedule, with lessons that fit into a lunch break.

Step two

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

Step three

Instructors are working professionals who teach what they use every day. 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.

Step four

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. Career coaches help with your CV, portfolio and interview practice.

<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">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. Learn on your schedule, with lessons that fit into a lunch break.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</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. Mentors review your projects and give feedback within two days.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">Instructors are working professionals who teach what they use every day. 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-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">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. Career coaches help with your CV, portfolio and interview practice.</p>
  </div>
</div>

3Vertical pills

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

Online courses

Clear prices, honest advice and no surprises along the way. The mobile app downloads lessons, so you can learn on the train. Thousands of students already trust us, and we work hard to keep it that way.

Live workshops

We listen first, then build a plan around what you actually need. Study groups and a friendly forum keep you motivated along the way. Start in minutes and get help from a real person whenever you need it.

Mentoring

Guided learning paths take you from beginner to job-ready step by step. Friendly people answer your questions quickly, by phone, chat or email. Lifetime access means you can revisit lessons whenever you need a refresher.

Questions

Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Career coaches help with your CV, portfolio and interview practice.

<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">Online courses</a><a class="nav-link" href="#spy-1132">Live workshops</a><a class="nav-link" href="#spy-1133">Mentoring</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">Online courses</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. The mobile app downloads lessons, so you can learn on the train. Thousands of students already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Live workshops</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. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Mentoring</h3>
        <p class="small">Guided learning paths take you from beginner to job-ready step by step. Friendly people answer your questions quickly, by phone, chat or email. Lifetime access means you can revisit lessons whenever you need a refresher.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Career coaches help with your CV, portfolio and interview practice.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

Mentors review your projects and give feedback within two days. Study groups and a friendly forum keep you motivated along the way. Friendly people answer your questions quickly, by phone, chat or email.

Install

We measure success by how many students come back and tell their friends. 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. Every course is built around hands-on projects you can add to your portfolio.

Configure

Start in minutes and get help from a real person whenever you need it. Short quizzes after each lesson help new knowledge stick. The mobile app downloads lessons, so you can learn on the train.

Usage

Learn on your schedule, with lessons that fit into a lunch break. Instructors are working professionals who teach what they use every day. We keep things simple, so you can focus on what matters to you.

Examples

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. Thousands of students already trust us, and we work hard to keep it that way. 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">Mentors review your projects and give feedback within two days. Study groups and a friendly forum keep you motivated along the way. 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">We measure success by how many students come back and tell their friends. 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. Every course is built around hands-on projects you can add to your portfolio.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Short quizzes after each lesson help new knowledge stick. 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">Learn on your schedule, with lessons that fit into a lunch break. Instructors are working professionals who teach what they use every day. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</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. Thousands of students already trust us, and we work hard to keep it that way. 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

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

Midday

Lifetime access means you can revisit lessons whenever you need a refresher. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email.

Afternoon

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

Evening

Thousands of students already trust us, and we work hard to keep it that way. 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. Try the first lesson of any course for free before you decide.

<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">Every detail is handled by people who care about getting it right. Try the first lesson of any course for free before you decide. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">Lifetime access means you can revisit lessons whenever you need a refresher. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">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. Short quizzes after each lesson help new knowledge stick.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Thousands of students already trust us, and we work hard to keep it that way. 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. Try the first lesson of any course for free before you decide.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

Instructors are working professionals who teach what they use every day. Guided learning paths take you from beginner to job-ready step by step. Learn on your schedule, with lessons that fit into a lunch break. Study groups and a friendly forum keep you motivated along the way.

Beta

Career coaches help with your CV, portfolio and interview practice. Mentors review your projects and give feedback within two days. Clear prices, honest advice and no surprises along the way.

Gamma

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. Every course is built around hands-on projects you can add to your portfolio.

<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">Instructors are working professionals who teach what they use every day. Guided learning paths take you from beginner to job-ready step by step. 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-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">Career coaches help with your CV, portfolio and interview practice. Mentors review your projects and give feedback within two days. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</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. Every course is built around hands-on projects you can add to your portfolio.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you. Try the first lesson of any course for free before you decide.

Features

We listen first, then build a plan around what you actually need. 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.

Reviews

Instructors are working professionals who teach what they use every day. Career coaches help with your CV, portfolio and interview practice. Guided learning paths take you from beginner to job-ready step by step. Mentors review your projects and give feedback within two days.

FAQ

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

<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">Clear prices, honest advice and no surprises along the way. Start in minutes and get help from a real person whenever you need it. We keep things simple, so you can focus on what matters to you. Try the first lesson of any course for free before you decide.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">We listen first, then build a plan around what you actually need. 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.</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. Career coaches help with your CV, portfolio and interview practice. Guided learning paths take you from beginner to job-ready step by step. Mentors review your projects and give feedback within two days.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">Learn on your schedule, with lessons that fit into a lunch break. 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>

8Table of contents on the right

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

Summary

Every detail is handled by people who care about getting it right. Short quizzes after each lesson help new knowledge stick. We measure success by how many students come back and tell their friends.

Background

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

Method

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. Lifetime access means you can revisit lessons whenever you need a refresher.

Results

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. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.

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">Every detail is handled by people who care about getting it right. Short quizzes after each lesson help new knowledge stick. We measure success by how many students come back and tell their friends.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">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. 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">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. Lifetime access means you can revisit lessons whenever you need a refresher.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">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. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.</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

The mobile app downloads lessons, so you can learn on the train. 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.

Set up your profile

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

Invite the team

Instructors are working professionals who teach what they use every day. Career coaches help with your CV, portfolio and interview practice. Try the first lesson of any course for free before you decide.

Go live

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

<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">The mobile app downloads lessons, so you can learn on the train. 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-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">Short quizzes after each lesson help new knowledge stick. 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. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</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. Try the first lesson of any course for free before you decide.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</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. 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>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Headlines people actually click

Every course is built around hands-on projects you can add to your portfolio. 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.

2024

How to stay motivated when learning online

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

2025

Looking back at a busy season

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. Thousands of students already trust us, and we work hard to keep it that way.

2026

Five things we learned this year

Earn a certificate at the end of each course and share it with employers. Career coaches help with your CV, portfolio and interview practice. Study groups and a friendly forum keep you motivated 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">Headlines people actually click</h3>
    <p class="small mb-0">Every course is built around hands-on projects you can add to your portfolio. 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-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">How to stay motivated when learning online</h3>
    <p class="small mb-0">Short quizzes after each lesson help new knowledge stick. 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.</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">Looking back at a busy season</h3>
    <p class="small mb-0">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. 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">Five things we learned this year</h3>
    <p class="small mb-0">Earn a certificate at the end of each course and share it with employers. Career coaches help with your CV, portfolio and interview practice. Study groups and a friendly forum keep you motivated along the way.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

Our favourite tips for busy weeks?: Friendly people answer your questions quickly, by phone, chat or email.
How to learn a new skill in 30 days?: Lifetime access means you can revisit lessons whenever you need a refresher.
From teacher to UX designer: a career story?: Guided learning paths take you from beginner to job-ready step by step.

Shipping

How we build a course, start to finish?: Our team has done this many times, so you never have to guess.
Five study habits that actually work?: Try the first lesson of any course for free before you decide.
A beginner's guide to getting started?: Mentors review your projects and give feedback within two days.

Returns

Tips for learning while working full time?: The mobile app downloads lessons, so you can learn on the train.
Building a portfolio that gets interviews?: Every detail is handled by people who care about getting it right.
How to choose the right course?: 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-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">Friendly people answer your questions quickly, by phone, chat or email.</dd>
          <dt class="small">How to learn a new skill in 30 days?</dt>
          <dd class="small text-body-secondary">Lifetime access means you can revisit lessons whenever you need a refresher.</dd>
          <dt class="small">From teacher to UX designer: a career story?</dt>
          <dd class="small text-body-secondary">Guided learning paths take you from beginner to job-ready step by step.</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 we build a course, start to finish?</dt>
          <dd class="small text-body-secondary">Our team has done this many times, so you never have to guess.</dd>
          <dt class="small">Five study habits that actually work?</dt>
          <dd class="small text-body-secondary">Try the first lesson of any course for free before you decide.</dd>
          <dt class="small">A beginner&#39;s guide to getting started?</dt>
          <dd class="small text-body-secondary">Mentors review your projects and give feedback within two days.</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">Tips for learning while working full time?</dt>
          <dd class="small text-body-secondary">The mobile app downloads lessons, so you can learn on the train.</dd>
          <dt class="small">Building a portfolio that gets interviews?</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">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

Learn on your schedule, with lessons that fit into a lunch break. 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.

Battery

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

Connectivity

Every detail is handled by people who care about getting it right. Career coaches help with your CV, portfolio and interview practice. Every course is built around hands-on projects you can add to your portfolio.

Security

Lifetime access means you can revisit lessons whenever you need a refresher. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you.

<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">Learn on your schedule, with lessons that fit into a lunch break. 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>
      </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. Clear prices, honest advice and no surprises along the way. Instructors are working professionals who teach what they use every day.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Career coaches help with your CV, portfolio and interview practice. Every course is built around hands-on projects you can add to your portfolio.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">Lifetime access means you can revisit lessons whenever you need a refresher. We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$16.26 / mo

Expert mentors
Expert mentors
Quizzes

Team

$29.54 / mo

Mobile learning
Lifetime access
Expert mentors

Business

$52.87 / mo

Community forum
Quizzes
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-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">$16.26<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Expert mentors</li>
        <li>Expert mentors</li>
        <li>Quizzes</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">$29.54<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Mobile learning</li>
        <li>Lifetime access</li>
        <li>Expert mentors</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">$52.87<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Community forum</li>
        <li>Quizzes</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: The small habits that make a big difference

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. Learn on your schedule, with lessons that fit into a lunch break.

Mentors review your projects and give feedback within two days. Friendly people answer your questions quickly, by phone, chat or email. Thousands of students already trust us, and we work hard to keep it that way. We measure success by how many students come back and tell their friends.

Chapter 2: What employers look for in junior analysts

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. Try the first lesson of any course for free before you decide.

Lifetime access means you can revisit lessons whenever you need a refresher. Short quizzes after each lesson help new knowledge stick. Learn on your schedule, with lessons that fit into a lunch break. Friendly people answer your questions quickly, by phone, chat or email.

Chapter 3: Our most popular courses this year

Study groups and a friendly forum keep you motivated along the way. Career coaches help with your CV, portfolio and interview practice. Clear prices, honest advice and no surprises along the way.

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

Chapter 4: What our students asked us most

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

Our team has done this many times, so you never have to guess. 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.

<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">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. Learn on your schedule, with lessons that fit into a lunch break.</p>
    <p class="small">Mentors review your projects and give feedback within two days. Friendly people answer your questions quickly, by phone, chat or email. Thousands of students already trust us, and we work hard to keep it that way. 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 employers look for in junior analysts</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. Try the first lesson of any course for free before you decide.</p>
    <p class="small">Lifetime access means you can revisit lessons whenever you need a refresher. Short quizzes after each lesson help new knowledge stick. Learn on your schedule, with lessons that fit into a lunch break. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: Our most popular courses this year</h3>
    <p class="small">Study groups and a friendly forum keep you motivated along the way. Career coaches help with your CV, portfolio and interview practice. Clear prices, honest advice and no surprises along the way.</p>
    <p class="small">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. 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>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: What our students asked us most</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. 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>
    <p class="small">Our team has done this many times, so you never have to guess. 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.</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

We listen first, then build a plan around what you actually need. 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.

Notifications

Product news

Weekly digest

Clear prices, honest advice and no surprises along the way. 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. Mentors review your projects and give feedback within two days.

Privacy

Hide my profile from search

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. The mobile app downloads lessons, so you can learn on the train.

<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="Isla Nguyen">
        </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">We listen first, then build a plan around what you actually need. 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-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">Clear prices, honest advice and no surprises along the way. 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. Mentors review your projects and give feedback within two days.</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. 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>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Legal

Arjun Carter
Frontend Engineer
Samir Ortega
Product Designer
Ella Varga
Frontend Engineer

Design

Ruby Moreau
Art Director
Leo Novak
Project Manager
Ethan Ibrahim
HR Partner

Research

Kenji Silva
Product Designer
Chloe Quinn
Art Director
Sofia Brennan
Data Analyst

<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">Research</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">Legal</h3>
    <ul class="list-unstyled">
      <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="Arjun Carter"><div><div class="small fw-semibold">Arjun Carter</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="Samir Ortega"><div><div class="small fw-semibold">Samir Ortega</div><div class="small text-body-secondary">Product Designer</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="Ella Varga"><div><div class="small fw-semibold">Ella Varga</div><div class="small text-body-secondary">Frontend Engineer</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-8.svg" class="rounded-circle" width="36" height="36" alt="Ruby Moreau"><div><div class="small fw-semibold">Ruby Moreau</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-4.svg" class="rounded-circle" width="36" height="36" alt="Leo Novak"><div><div class="small fw-semibold">Leo 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-7.svg" class="rounded-circle" width="36" height="36" alt="Ethan Ibrahim"><div><div class="small fw-semibold">Ethan Ibrahim</div><div class="small text-body-secondary">HR Partner</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" 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-5.svg" class="rounded-circle" width="36" height="36" alt="Kenji Silva"><div><div class="small fw-semibold">Kenji Silva</div><div class="small text-body-secondary">Product Designer</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="Chloe Quinn"><div><div class="small fw-semibold">Chloe Quinn</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-12.svg" class="rounded-circle" width="36" height="36" alt="Sofia Brennan"><div><div class="small fw-semibold">Sofia Brennan</div><div class="small text-body-secondary">Data Analyst</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Design

Public speaking$81.00
Photography$106.99
Leadership skills$145.99

Development

Public speaking$85.00
Copywriting$93.00
Digital marketing$139.00

Business

Project management$179.00
Python basics$131.00
Data analysis$180.99

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Design</a><a class="nav-link" href="#spy-1203">Development</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">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">$81.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Photography</span><span class="fw-semibold">$106.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Leadership skills</span><span class="fw-semibold">$145.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>Public speaking</span><span class="fw-semibold">$85.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Copywriting</span><span class="fw-semibold">$93.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>
    </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>Project management</span><span class="fw-semibold">$179.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Python basics</span><span class="fw-semibold">$131.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Data analysis</span><span class="fw-semibold">$180.99</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

Learn on your schedule, with lessons that fit into a lunch break. We listen first, then build a plan around what you actually need. Lifetime access means you can revisit lessons whenever you need a refresher. We keep things simple, so you can focus on what matters to you.

This week

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

Later

Try the first lesson of any course for free before you decide. Our team has done this many times, so you never have to guess. Instructors are working professionals who teach what they use every day.

<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">Learn on your schedule, with lessons that fit into a lunch break. We listen first, then build a plan around what you actually need. Lifetime access means you can revisit lessons whenever you need a refresher. We keep things simple, so you can focus on what matters to you.</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 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-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">Try the first lesson of any course for free before you decide. Our team has done this many times, so you never have to guess. Instructors are working professionals who teach what they use every day.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

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. Try the first lesson of any course for free before you decide. Our team has done this many times, so you never have to guess.

Orbit

We measure success by how many students come back and tell their friends. The mobile app downloads lessons, so you can learn on the train. Short quizzes after each lesson help new knowledge stick.

Landing

Instructors are working professionals who teach what they use every day. Friendly people answer your questions quickly, by phone, chat or email. 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.

<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">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. Try the first lesson of any course for free before you decide. Our team has done this many times, so you never have to guess.</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. The mobile app downloads lessons, so you can learn on the train. Short quizzes after each lesson help new knowledge stick.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Instructors are working professionals who teach what they use every day. Friendly people answer your questions quickly, by phone, chat or email. 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>
</div>

20Changelog

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

v3.2 Sep 8, 2026

NewWe listen first, then build a plan around what you actually need.
ImprovedThousands of students already trust us, and we work hard to keep it that way.
FixedMentors review your projects and give feedback within two days.

v3.1 Oct 6, 2026

NewEarn a certificate at the end of each course and share it with employers.
ImprovedEvery course is built around hands-on projects you can add to your portfolio.
FixedLifetime access means you can revisit lessons whenever you need a refresher.

v3.0 Sep 4, 2026

NewGuided learning paths take you from beginner to job-ready step by step.
ImprovedCareer coaches help with your CV, portfolio and interview practice.
FixedClear prices, honest advice and no surprises along the way.

v2.9 Jan 26, 2026

NewEvery detail is handled by people who care about getting it right.
ImprovedLearn on your schedule, with lessons that fit into a lunch break.
FixedStudy groups and a friendly forum keep you motivated along the way.

<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">Sep 8, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We listen first, then build a plan around what you actually need.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</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-danger me-1">Fixed</span>Mentors review your projects and give feedback within two days.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Oct 6, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Earn a certificate at the end of each course and share it with employers.</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>Lifetime access means you can revisit lessons whenever you need a refresher.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Sep 4, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Guided learning paths take you from beginner to job-ready step by step.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Career coaches help with your CV, portfolio and interview practice.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Clear prices, honest advice and no surprises along the way.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Jan 26, 2026</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>Learn on your schedule, with lessons that fit into a lunch break.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Study groups and a friendly forum keep you motivated along the way.</li>
        </ul>
      </div>
    </div>
  </div>
</div>