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

Instructors are working professionals who teach what they use every day. 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. Guided learning paths take you from beginner to job-ready step by step.

Mentors review your projects and give feedback within two days. Short quizzes after each lesson help new knowledge stick. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.

Details

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. Try the first lesson of any course for free before you decide. We measure success by how many students come back and tell their friends.

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

Pricing

Lifetime access means you can revisit lessons whenever you need a refresher. Career coaches help with your CV, portfolio and interview practice. Every detail is handled by people who care about getting it right. Mentors review your projects and give feedback within two days.

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

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Fableova Co</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">Instructors are working professionals who teach what they use every day. 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. Guided learning paths take you from beginner to job-ready step by step.</p>
    <p class="small">Mentors review your projects and give feedback within two days. Short quizzes after each lesson help new knowledge stick. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way.</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. Start in minutes and get help from a real person whenever you need it. Try the first lesson of any course for free before you decide. We measure success by how many students come back and tell their friends.</p>
    <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. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Lifetime access means you can revisit lessons whenever you need a refresher. Career coaches help with your CV, portfolio and interview practice. Every detail is handled by people who care about getting it right. Mentors review your projects and give feedback within two days.</p>
    <p class="small">Short quizzes after each lesson help new knowledge stick. 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.</p>
  </div>
</div>

2Horizontal pills

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

Step one

Every course is built around hands-on projects you can add to your portfolio. Study groups and a friendly forum keep you motivated along the way. We keep things simple, so you can focus on what matters to you. Instructors are working professionals who teach what they use every day.

Step two

Clear prices, honest advice and no surprises along the way. We measure success by how many students come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email. Career coaches help with your CV, portfolio and interview practice.

Step three

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

Step four

Every detail is handled by people who care about getting it right. The mobile app downloads lessons, so you can learn on the train. We listen first, then build a plan around what you actually need.

<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">Every course is built around hands-on projects you can add to your portfolio. Study groups and a friendly forum keep you motivated along the way. We keep things simple, so you can focus on what matters to you. Instructors are working professionals who teach what they use every day.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">Clear prices, honest advice and no surprises along the way. We measure success by how many students come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email. Career coaches help with your CV, portfolio and interview practice.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <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. Lifetime access means you can revisit lessons whenever you need a refresher. Thousands of students already trust us, and we work hard to keep it that way.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">Every detail is handled by people who care about getting it right. The mobile app downloads lessons, so you can learn on the train. We listen first, then build a plan around what you actually need.</p>
  </div>
</div>

3Vertical pills

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

Online courses

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. Career coaches help with your CV, portfolio and interview practice. We keep things simple, so you can focus on what matters to you.

Mentoring

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

Study groups

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

Questions

Short quizzes after each lesson help new knowledge stick. Mentors review your projects and give feedback within two days. Start in minutes and get help from a real person whenever you need it. 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">Online courses</a><a class="nav-link" href="#spy-1132">Mentoring</a><a class="nav-link" href="#spy-1133">Study groups</a><a class="nav-link" href="#spy-1134">Questions</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-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">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. Career coaches help with your CV, portfolio and interview practice. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Mentoring</h3>
        <p class="small">Thousands of students already trust us, and we work hard to keep it that way. Learn on your schedule, with lessons that fit into a lunch break. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Study groups</h3>
        <p class="small">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. The mobile app downloads lessons, so you can learn on the train.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">Short quizzes after each lesson help new knowledge stick. Mentors review your projects and give feedback within two days. Start in minutes and get help from a real person whenever you need it. 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

Instructors are working professionals who teach what they use every day. Clear prices, honest advice and no surprises along the way. Earn a certificate at the end of each course and share it with employers.

Install

Try the first lesson of any course for free before you decide. We measure success by how many students come back and tell their friends. Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email.

Configure

Lifetime access means you can revisit lessons whenever you need a refresher. Study groups and a friendly forum keep you motivated along the way. The mobile app downloads lessons, so you can learn on the train. Every course is built around hands-on projects you can add to your portfolio.

Usage

Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need. Learn on your schedule, with lessons that fit into a lunch break.

Examples

Friendly people answer your questions quickly, by phone, chat or email. Short quizzes after each lesson help new knowledge stick. Instructors are working professionals who teach what they use every day.

<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">Instructors are working professionals who teach what they use every day. Clear prices, honest advice and no surprises along the way. Earn a certificate at the end of each course and share it with employers.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Try the first lesson of any course for free before you decide. We measure success by how many students come back and tell their friends. Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">Lifetime access means you can revisit lessons whenever you need a refresher. Study groups and a friendly forum keep you motivated along the way. The mobile app downloads lessons, so you can learn on the train. Every course is built around hands-on projects you can add to your portfolio.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need. 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">Friendly people answer your questions quickly, by phone, chat or email. Short quizzes after each lesson help new knowledge stick. Instructors are working professionals who teach what they use every day.</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

Lifetime access means you can revisit lessons whenever you need a refresher. Career coaches help with your CV, portfolio and interview practice. Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you.

Midday

Try the first lesson of any course for free before you decide. Guided learning paths take you from beginner to job-ready step by step. 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.

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

Evening

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

<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">Lifetime access means you can revisit lessons whenever you need a refresher. Career coaches help with your CV, portfolio and interview practice. Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">Try the first lesson of any course for free before you decide. Guided learning paths take you from beginner to job-ready step by step. 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.</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. Study groups and a friendly forum keep you motivated along the way.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Mentors review your projects and give feedback within two days. 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.</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. We keep things simple, so you can focus on what matters to you. Learn on your schedule, with lessons that fit into a lunch break.

Beta

Clear prices, honest advice and no surprises along the way. 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. The mobile app downloads lessons, so you can learn on the train.

Gamma

Every course is built around hands-on projects you can add to your portfolio. Thousands of students already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need.

<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. We keep things simple, so you can focus on what matters to you. Learn on your schedule, with lessons that fit into a lunch break.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. 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. The mobile app downloads lessons, so you can learn on the train.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">Every course is built around hands-on projects you can add to your portfolio. Thousands of students already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

Try the first lesson of any course for free before you decide. We measure success by how many students come back and tell their friends. Short quizzes after each lesson help new knowledge stick. Friendly people answer your questions quickly, by phone, chat or email.

Features

Every detail is handled by people who care about getting it right. Career coaches help with your CV, portfolio and interview practice. Mentors review your projects and give feedback within two days. Study groups and a friendly forum keep you motivated along the way.

Reviews

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

FAQ

The mobile app downloads lessons, so you can learn on the train. Every course is built around hands-on projects you can add to your portfolio. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.

<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">Try the first lesson of any course for free before you decide. We measure success by how many students come back and tell their friends. Short quizzes after each lesson help new knowledge stick. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</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. Mentors review your projects and give feedback within two days. Study groups and a friendly forum keep you motivated along the way.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">Earn a certificate at the end of each course and share it with employers. 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>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">The mobile app downloads lessons, so you can learn on the train. Every course is built around hands-on projects you can add to your portfolio. 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>

8Table of contents on the right

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

Summary

Career coaches help with your CV, portfolio and interview practice. We measure success by how many students come back and tell their friends. Mentors review your projects and give feedback within two days. Study groups and a friendly forum keep you motivated along the way.

Background

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. Short quizzes after each lesson help new knowledge stick. Instructors are working professionals who teach what they use every day.

Method

Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email. Earn a certificate at the end of each course and share it with employers.

Results

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. Learn on your schedule, with lessons that fit into a lunch break. We listen first, then build a plan around what you actually need.

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">Career coaches help with your CV, portfolio and interview practice. We measure success by how many students come back and tell their friends. Mentors review your projects and give feedback within two days. Study groups and a friendly forum keep you motivated along the way.</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. Guided learning paths take you from beginner to job-ready step by step. 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-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email. Earn a certificate at the end of each course and share it with employers.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</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. Learn on your schedule, with lessons that fit into a lunch break. We listen first, then build a plan around what you actually need.</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

We keep things simple, so you can focus on what matters to you. 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. Every detail is handled by people who care about getting it right.

Set up your profile

Clear prices, honest advice and no surprises along the way. 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.

Invite the team

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

Go live

Guided learning paths take you from beginner to job-ready step by step. Lifetime access means you can revisit lessons whenever you need a refresher. 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">We keep things simple, so you can focus on what matters to you. 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. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. 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.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">Try the first lesson of any course for free before you decide. 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. Thousands of students already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">Guided learning paths take you from beginner to job-ready step by step. Lifetime access means you can revisit lessons whenever you need a refresher. 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

How to choose the right course

Start in minutes and get help from a real person whenever you need it. Short quizzes after each lesson help new knowledge stick. Mentors review your projects and give feedback within two days. Career coaches help with your CV, portfolio and interview practice.

2024

Tips for learning while working full time

Friendly people answer your questions quickly, by phone, chat or email. Study groups and a friendly forum keep you motivated along the way. Instructors are working professionals who teach what they use every day.

2025

A beginner's guide to getting started

Learn on your schedule, with lessons that fit into a lunch break. Try the first lesson of any course for free before you decide. Instructors are working professionals who teach what they use every day. Study groups and a friendly forum keep you motivated along the way.

2026

Looking back at a busy season

Short quizzes after each lesson help new knowledge stick. 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. Our team has done this many times, so you never have to guess.

<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-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">How to choose the right course</h3>
    <p class="small mb-0">Start in minutes and get help from a real person whenever you need it. Short quizzes after each lesson help new knowledge stick. Mentors review your projects and give feedback within two days. Career coaches help with your CV, portfolio and interview practice.</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">Tips for learning while working full time</h3>
    <p class="small mb-0">Friendly people answer your questions quickly, by phone, chat or email. Study groups and a friendly forum keep you motivated along the way. Instructors are working professionals who teach what they use every day.</p>
  </div>
  <div id="spy-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">A beginner&#39;s guide to getting started</h3>
    <p class="small mb-0">Learn on your schedule, with lessons that fit into a lunch break. Try the first lesson of any course for free before you decide. Instructors are working professionals who teach what they use every day. Study groups and a friendly forum keep you motivated along the 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">Looking back at a busy season</h3>
    <p class="small mb-0">Short quizzes after each lesson help new knowledge stick. 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. Our team has done this many times, so you never have to guess.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

What employers look for in junior analysts?: Every course is built around hands-on projects you can add to your portfolio.
Our favourite tips for busy weeks?: Start in minutes and get help from a real person whenever you need it.
From teacher to UX designer: a career story?: Mentors review your projects and give feedback within two days.

Shipping

Five things we learned this year?: Clear prices, honest advice and no surprises along the way.
Building a portfolio that gets interviews?: We listen first, then build a plan around what you actually need.
Five study habits that actually work?: Earn a certificate at the end of each course and share it with employers.

Returns

How to stay motivated when learning online?: Career coaches help with your CV, portfolio and interview practice.
Headlines people actually click?: Lifetime access means you can revisit lessons whenever you need a refresher.
The small habits that make a big difference?: We measure success by how many students come back and tell their friends.

<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-fill" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">What employers look for in junior analysts?</dt>
          <dd class="small text-body-secondary">Every course is built around hands-on projects you can add to your portfolio.</dd>
          <dt class="small">Our favourite tips for busy weeks?</dt>
          <dd class="small text-body-secondary">Start in minutes and get help from a real person whenever you need it.</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>
        </dl>
      </div>
      <div id="spy-1172" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Shipping</h3>
        <dl>
          <dt class="small">Five things we learned this year?</dt>
          <dd class="small text-body-secondary">Clear prices, honest advice and no surprises along the way.</dd>
          <dt class="small">Building a portfolio that gets interviews?</dt>
          <dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
          <dt class="small">Five study habits that actually work?</dt>
          <dd class="small text-body-secondary">Earn a certificate at the end of each course and share it with employers.</dd>
        </dl>
      </div>
      <div id="spy-1173" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">How to stay motivated when learning online?</dt>
          <dd class="small text-body-secondary">Career coaches help with your CV, portfolio and interview practice.</dd>
          <dt class="small">Headlines people actually click?</dt>
          <dd class="small text-body-secondary">Lifetime access means you can revisit lessons whenever you need a refresher.</dd>
          <dt class="small">The small habits that make a big difference?</dt>
          <dd class="small text-body-secondary">We measure success by how many students come back and tell their friends.</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. The mobile app downloads lessons, so you can learn on the train.

Battery

We keep things simple, so you can focus on what matters to you. 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.

Connectivity

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. Every detail is handled by people who care about getting it right.

Security

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

<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-fill" 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. The mobile app downloads lessons, so you can learn on the train.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. 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.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</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. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email.</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.39 / mo

Community forum
Quizzes
Mobile learning

Team

$34.54 / mo

Community forum
Mobile learning
Lifetime access

Business

$50.60 / mo

Quizzes
Expert mentors
Quizzes

<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.39<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 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">$34.54<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Community forum</li>
        <li>Mobile learning</li>
        <li>Lifetime access</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">$50.60<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Quizzes</li>
        <li>Expert mentors</li>
        <li>Quizzes</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: What our students asked us most

Instructors are working professionals who teach what they use every day. We keep things simple, so you can focus on what matters to you. The mobile app downloads lessons, so you can learn on the train.

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

Chapter 2: How to learn a new skill in 30 days

Career coaches help with your CV, portfolio and interview practice. 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. Short quizzes after each lesson help new knowledge stick.

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. Clear prices, honest advice and no surprises along the way. Every course is built around hands-on projects you can add to your portfolio.

Chapter 3: Our most popular courses this year

Lifetime access means you can revisit lessons whenever you need a refresher. Mentors review your projects and give feedback within two days. Career coaches help with your CV, portfolio and interview practice. 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. Guided learning paths take you from beginner to job-ready step by step. Short quizzes after each lesson help new knowledge stick. Earn a certificate at the end of each course and share it with employers.

Chapter 4: How we build a course, start to finish

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

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

<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: What our students asked us most</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. The mobile app downloads lessons, so you can learn on the train.</p>
    <p class="small">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. Try the first lesson of any course for free before you decide.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: How to learn a new skill in 30 days</h3>
    <p class="small">Career coaches help with your CV, portfolio and interview practice. 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. Short quizzes after each lesson help new knowledge stick.</p>
    <p class="small">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. Clear prices, honest advice and no surprises along the way. Every course is built around hands-on projects you can add to your portfolio.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: Our most popular courses this year</h3>
    <p class="small">Lifetime access means you can revisit lessons whenever you need a refresher. Mentors review your projects and give feedback within two days. Career coaches help with your CV, portfolio and interview practice. We keep things simple, so you can focus on what matters to you.</p>
    <p class="small">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. Short quizzes after each lesson help new knowledge stick. Earn a certificate at the end of each course and share it with employers.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: How we build a course, start to finish</h3>
    <p class="small">Study groups and a friendly forum keep you motivated along the way. 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>
    <p class="small">Learn on your schedule, with lessons that fit into a lunch break. 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>

15Settings form

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

Profile Notifications Privacy

Profile

Display name

City

Notifications

Product news

Weekly digest

We listen first, then build a plan around what you actually need. Instructors are working professionals who teach what they use every day. 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.

Privacy

Hide my profile from search

Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess. 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 Novak">
        </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="Lisbon">
        </div>
        <p class="small">Clear prices, honest advice and no surprises along the way. We measure success by how many students come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email.</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">We listen first, then build a plan around what you actually need. Instructors are working professionals who teach what they use every day. 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.</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">Every detail is handled by people who care about getting it right. Our team has done this many times, so you never have to guess. 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.

Legal

Kenji Ibrahim
QA Engineer
Isla Morgan
Product Designer
Omar Sato
Art Director

Customer Support

Arjun Haddad
QA Engineer
Kai Nguyen
Backend Engineer
Samir Silva
Backend Engineer

Design

Freya Alvarez
Product Designer
Jonah Lindqvist
Frontend Engineer
Lucas Moreau
Marketing Lead

<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">Customer Support</a><a class="nav-link" href="#spy-1200">Design</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-3.svg" class="rounded-circle" width="36" height="36" alt="Kenji Ibrahim"><div><div class="small fw-semibold">Kenji Ibrahim</div><div class="small text-body-secondary">QA Engineer</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="Isla Morgan"><div><div class="small fw-semibold">Isla Morgan</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-4.svg" class="rounded-circle" width="36" height="36" alt="Omar Sato"><div><div class="small fw-semibold">Omar Sato</div><div class="small text-body-secondary">Art Director</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Customer Support</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Arjun Haddad"><div><div class="small fw-semibold">Arjun Haddad</div><div class="small text-body-secondary">QA Engineer</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="Kai Nguyen"><div><div class="small fw-semibold">Kai Nguyen</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-circle" width="36" height="36" alt="Samir Silva"><div><div class="small fw-semibold">Samir Silva</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" 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-9.svg" class="rounded-circle" width="36" height="36" alt="Freya Alvarez"><div><div class="small fw-semibold">Freya Alvarez</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-4.svg" class="rounded-circle" width="36" height="36" alt="Jonah Lindqvist"><div><div class="small fw-semibold">Jonah Lindqvist</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-10.svg" class="rounded-circle" width="36" height="36" alt="Lucas Moreau"><div><div class="small fw-semibold">Lucas Moreau</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Design

Video editing$100.00
Web development$234.00
Copywriting$89.00

Lifestyle

Data analysis$206.99
Public speaking$78.99
Project management$166.00

Development

Python basics$124.99
Brand design$128.00
Public speaking$82.00

<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">Lifestyle</a><a class="nav-link" href="#spy-1204">Development</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>Video editing</span><span class="fw-semibold">$100.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Web development</span><span class="fw-semibold">$234.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Copywriting</span><span class="fw-semibold">$89.00</span></li>
    </ul>
  </div>
  <div id="spy-1203" class="pb-3">
    <h3 class="h6">Lifestyle</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Data analysis</span><span class="fw-semibold">$206.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Public speaking</span><span class="fw-semibold">$78.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Project management</span><span class="fw-semibold">$166.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" 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">$124.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Brand design</span><span class="fw-semibold">$128.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Public speaking</span><span class="fw-semibold">$82.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

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. Mentors review your projects and give feedback within two days. Every course is built around hands-on projects you can add to your portfolio.

This week

Friendly people answer your questions quickly, by phone, chat or email. Clear prices, honest advice and no surprises along the way. Try the first lesson of any course for free before you decide. We keep things simple, so you can focus on what matters to you.

Later

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. Instructors are working professionals who teach what they use every day. Short quizzes after each lesson help new knowledge stick.

<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">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. Mentors review your projects and give feedback within two days. Every course is built around hands-on projects you can add to your portfolio.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</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. Try the first lesson of any course for free before you decide. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <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. Instructors are working professionals who teach what they use every day. Short quizzes after each lesson help new knowledge stick.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

The mobile app downloads lessons, so you can learn on the train. Lifetime access means you can revisit lessons whenever you need a refresher. Study groups and a friendly forum keep you motivated along the way.

Orbit

We measure success by how many students come back and tell their friends. Career coaches help with your CV, portfolio and interview practice. Thousands of students already trust us, and we work hard to keep it that way.

Landing

Clear prices, honest advice and no surprises along the way. Study groups and a friendly forum keep you motivated along the way. Try the first lesson of any course for free before you decide.

<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">The mobile app downloads lessons, so you can learn on the train. Lifetime access means you can revisit lessons whenever you need a refresher. Study groups and a friendly forum keep you motivated along the way.</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. Career coaches help with your CV, portfolio and interview practice. Thousands of students already trust us, and we work hard to keep it that way.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Clear prices, honest advice and no surprises along the way. Study groups and a friendly forum keep you motivated along the way. Try the first lesson of any course for free before you decide.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Apr 18, 2026

NewWe measure success by how many students come back and tell their friends.
ImprovedEarn a certificate at the end of each course and share it with employers.
FixedWe keep things simple, so you can focus on what matters to you.

v3.1 Apr 12, 2026

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

NewOur team has done this many times, so you never have to guess.
ImprovedStart in minutes and get help from a real person whenever you need it.
FixedWe listen first, then build a plan around what you actually need.

v2.9 Feb 3, 2026

NewShort quizzes after each lesson help new knowledge stick.
ImprovedEvery detail is handled by people who care about getting it right.
FixedGuided learning paths take you from beginner to job-ready step by step.

<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">Apr 18, 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>Earn a certificate at the end of each course and share it with employers.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>We keep things simple, so you can focus on what matters to you.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Apr 12, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>The mobile app downloads lessons, so you can learn on the train.</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">Jan 3, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Our team has done this many times, so you never have to guess.</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>We listen first, then build a plan around what you actually need.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Feb 3, 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>Every detail is handled by people who care about getting it right.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Guided learning paths take you from beginner to job-ready step by step.</li>
        </ul>
      </div>
    </div>
  </div>
</div>