Scrollspy

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

1In a navbar

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

Intro

Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it. Learn on your schedule, with lessons that fit into a lunch break.

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

Details

Clear prices, honest advice and no surprises along the way. Guided learning paths take you from beginner to job-ready step by step. We keep things simple, so you can focus on what matters to you. We listen first, then build a plan around what you actually need.

Every detail is handled by people who care about getting it right. Earn a certificate at the end of each course and share it with employers. 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.

Pricing

Study groups and a friendly forum keep you motivated along the way. The mobile app downloads lessons, so you can learn on the train. 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. 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.

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

2Horizontal pills

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

Step one

Mentors review your projects and give feedback within two days. 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. Try the first lesson of any course for free before you decide.

Step two

Guided learning paths take you from beginner to job-ready step by step. Short quizzes after each lesson help new knowledge stick. Our team has done this many times, so you never have to guess.

Step three

Career coaches help with your CV, portfolio and interview practice. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.

Step four

We listen first, then build a plan around what you actually need. The mobile app downloads lessons, so you can learn on the train. We measure success by how many students come back and tell their friends.

<nav id="spy-nav-1125" class="nav nav-pills mb-2 flex-wrap">
  <a class="nav-link" href="#spy-1126">Step one</a><a class="nav-link" href="#spy-1127">Step two</a><a class="nav-link" href="#spy-1128">Step three</a><a class="nav-link" href="#spy-1129">Step four</a>
</nav>
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1125" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1126" class="pb-3">
    <h3 class="h6">Step one</h3>
    <p class="small">Mentors review your projects and give feedback within two days. 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. Try the first lesson of any course for free before you decide.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">Guided learning paths take you from beginner to job-ready step by step. Short quizzes after each lesson help new knowledge stick. Our team has done this many times, so you never have to guess.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">Career coaches help with your CV, portfolio and interview practice. Clear prices, honest advice and no surprises along the way. Every detail is handled by people who care about getting it right.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <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. We measure success by how many students come back and tell their friends.</p>
  </div>
</div>

3Vertical pills

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

Live workshops

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

Study groups

Learn on your schedule, with lessons that fit into a lunch break. 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. Our team has done this many times, so you never have to guess.

Online courses

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

Questions

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

<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">Live workshops</a><a class="nav-link" href="#spy-1132">Study groups</a><a class="nav-link" href="#spy-1133">Online courses</a><a class="nav-link" href="#spy-1134">Questions</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1130" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1131" class="pb-3">
        <h3 class="h6">Live workshops</h3>
        <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. Lifetime access means you can revisit lessons whenever you need a refresher.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Study groups</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. 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.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Online courses</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. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">Study groups and a friendly forum keep you motivated along the way. 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.</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. 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.

Install

Try the first lesson of any course for free before you decide. Learn on your schedule, with lessons that fit into a lunch break. We measure success by how many students come back and tell their friends.

Configure

Short quizzes after each lesson help new knowledge stick. Lifetime access means you can revisit lessons whenever you need a refresher. Career coaches help with your CV, portfolio and interview practice.

Usage

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

Examples

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

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1135" class="h-100 flex-column align-items-stretch">
      <nav class="nav nav-pills flex-column">
        <a class="nav-link" href="#spy-1136">Getting started</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#spy-1137">Install</a><a class="nav-link ms-3 my-1" href="#spy-1138">Configure</a>
        </nav>
        <a class="nav-link" href="#spy-1139">Usage</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#spy-1140">Examples</a>
        </nav>
      </nav>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:260px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1135" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1136" class="pb-3">
        <h3 class="h6">Getting started</h3>
        <p class="small">Mentors review your projects and give feedback within two days. 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.</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. Learn on your schedule, with lessons that fit into a lunch break. We measure success by how many students come back and tell their friends.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">Short quizzes after each lesson help new knowledge stick. Lifetime access means you can revisit lessons whenever you need a refresher. Career coaches help with your CV, portfolio and interview practice.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">The mobile app downloads lessons, so you can learn on the train. Start in minutes and get help from a real person whenever you need it. Every course is built around hands-on projects you can add to your portfolio.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</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. Try the first lesson of any course for free before you decide.</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

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

Midday

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

Afternoon

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

Evening

Short quizzes after each lesson help new knowledge stick. Career coaches help with your CV, portfolio and interview practice. 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-ui-spy="scroll" data-ui-target="#spy-nav-1141" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1142" class="pb-3">
        <h3 class="h6">Morning</h3>
        <p class="small">We keep things simple, so you can focus on what matters to you. Mentors review your projects and give feedback within two days. Thousands of students already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</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. 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 id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</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. Instructors are working professionals who teach what they use every day.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Short quizzes after each lesson help new knowledge stick. Career coaches help with your CV, portfolio and interview practice. 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

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

Beta

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. Mentors review your projects and give feedback within two days. Earn a certificate at the end of each course and share it with employers.

Gamma

Every course is built around hands-on projects you can add to your portfolio. Start in minutes and get help from a real person whenever you need it. The mobile app downloads lessons, so you can learn on the train.

<div class="row g-3 cb-spy-plain">
  <div class="col-4">
    <div id="spy-nav-1146" class="d-flex flex-column gap-2 small">
      <a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1147">Alpha</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1148">Beta</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1149">Gamma</a>
    </div>
  </div>
  <div class="col-8">
    <div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1146" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1147" class="pb-3">
        <h3 class="h6">Alpha</h3>
        <p class="small">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. Guided learning paths take you from beginner to job-ready step by step. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">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. Mentors review your projects and give feedback within two days. Earn a certificate at the end of each course and share it with employers.</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. 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>
  </div>
</div>

7Underline tabs

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

Overview

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.

Features

Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need.

Reviews

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

FAQ

Career coaches help with your CV, portfolio and interview practice. Our team has done this many times, so you never have to guess. 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.

<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-bottom">
  <a class="nav-link" href="#spy-1151">Overview</a><a class="nav-link" href="#spy-1152">Features</a><a class="nav-link" href="#spy-1153">Reviews</a><a class="nav-link" href="#spy-1154">FAQ</a>
</nav>
<div class="position-relative border rounded p-3 border-0 px-0" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1150" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1151" class="pb-3">
    <h3 class="h6">Overview</h3>
    <p class="small">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-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. We listen first, then build a plan around what you actually need.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</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. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">Career coaches help with your CV, portfolio and interview practice. Our team has done this many times, so you never have to guess. 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.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

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

Background

We measure success by how many students come back and tell their friends. Guided learning paths take you from beginner to job-ready step by step. We keep things simple, so you can focus on what matters to you.

Method

Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. Learn on your schedule, with lessons that fit into a lunch break.

Results

Try the first lesson of any course for free before you decide. The mobile app downloads lessons, so you can learn on the train. Clear prices, honest advice and no surprises along the way.

On this page

<div class="row g-3">
  <div class="col-md-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1155" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1156" class="pb-3">
        <h3 class="h6">Summary</h3>
        <p class="small">Instructors are working professionals who teach what they use every day. 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-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">We measure success by how many students come back and tell their friends. Guided learning paths take you from beginner to job-ready step by step. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. Learn on your schedule, with lessons that fit into a lunch break.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">Try the first lesson of any course for free before you decide. The mobile app downloads lessons, so you can learn on the train. Clear prices, honest advice and no surprises along the way.</p>
      </div>
    </div>
  </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

Career coaches help with your CV, portfolio and interview practice. Lifetime access means you can revisit lessons whenever you need a refresher. Short quizzes after each lesson help new knowledge stick.

Set up your profile

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. Mentors review your projects and give feedback within two days. Start in minutes and get help from a real person whenever you need it.

Invite the team

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

Go live

Every course is built around hands-on projects you can add to your portfolio. 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. Earn a certificate at the end of each course and share it with employers.

<div class="row g-3">
  <div class="col-sm-5">
    <div id="spy-nav-1160" class="list-group list-group-numbered">
      <a class="list-group-item list-group-item-action" href="#spy-1161">Create an account</a><a class="list-group-item list-group-item-action" href="#spy-1162">Set up your profile</a><a class="list-group-item list-group-item-action" href="#spy-1163">Invite the team</a><a class="list-group-item list-group-item-action" href="#spy-1164">Go live</a>
    </div>
  </div>
  <div class="col-sm-7">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1160" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1161" class="pb-3">
        <h3 class="h6">Create an account</h3>
        <p class="small">Career coaches help with your CV, portfolio and interview practice. Lifetime access means you can revisit lessons whenever you need a refresher. Short quizzes after each lesson help new knowledge stick.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <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. Mentors review your projects and give feedback within two days. Start in minutes and get help from a real person whenever you need it.</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. 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.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">Every course is built around hands-on projects you can add to your portfolio. 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. Earn a certificate at the end of each course and share it with employers.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

How to choose the right course

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

2024

Five study habits that actually work

Instructors are working professionals who teach what they use every day. Study groups and a friendly forum keep you motivated along the way. We listen first, then build a plan around what you actually need.

2025

A beginner's guide to getting started

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

2026

Tips for learning while working full time

The mobile app downloads lessons, so you can learn on the train. Try the first lesson of any course for free before you decide. Clear prices, honest advice and no surprises along the way.

<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1165" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1166" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2023</span>
    <h3 class="h6">How to choose the right course</h3>
    <p class="small mb-0">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. Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right.</p>
  </div>
  <div id="spy-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">Five study habits that actually work</h3>
    <p class="small mb-0">Instructors are working professionals who teach what they use every day. Study groups and a friendly forum keep you motivated along the way. We listen first, then build a plan around what you actually need.</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">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. Learn on your schedule, with lessons that fit into a lunch break. Short quizzes after each lesson help new knowledge stick.</p>
  </div>
  <div id="spy-1169" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2026</span>
    <h3 class="h6">Tips for learning while working full time</h3>
    <p class="small mb-0">The mobile app downloads lessons, so you can learn on the train. Try the first lesson of any course for free before you decide. Clear prices, honest advice and no surprises along the way.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

Building a portfolio that gets interviews?: Career coaches help with your CV, portfolio and interview practice.
What employers look for in junior analysts?: Mentors review your projects and give feedback within two days.
How to stay motivated when learning online?: Every course is built around hands-on projects you can add to your portfolio.

Shipping

Headlines people actually click?: Start in minutes and get help from a real person whenever you need it.
How to learn a new skill in 30 days?: Thousands of students already trust us, and we work hard to keep it that way.
How we build a course, start to finish?: Every course is built around hands-on projects you can add to your portfolio.

Returns

Our most popular courses this year?: Learn on your schedule, with lessons that fit into a lunch break.
The small habits that make a big difference?: Guided learning paths take you from beginner to job-ready step by step.
Five things we learned this year?: Every detail is handled by people who care about getting it right.

<div class="row g-3">
  <div class="col-sm-3">
    <nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
      <a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
    </nav>
  </div>
  <div class="col-sm-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1171" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle-fill" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">Building a portfolio that gets interviews?</dt>
          <dd class="small text-body-secondary">Career coaches help with your CV, portfolio and interview practice.</dd>
          <dt class="small">What employers look for in junior analysts?</dt>
          <dd class="small text-body-secondary">Mentors review your projects and give feedback within two days.</dd>
          <dt class="small">How to stay motivated when learning online?</dt>
          <dd class="small text-body-secondary">Every course is built around hands-on projects you can add to your portfolio.</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">Headlines people actually click?</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">How to learn a new skill in 30 days?</dt>
          <dd class="small text-body-secondary">Thousands of students already trust us, and we work hard to keep it that way.</dd>
          <dt class="small">How we build a course, start to finish?</dt>
          <dd class="small text-body-secondary">Every course is built around hands-on projects you can add to your portfolio.</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">Our most popular courses this year?</dt>
          <dd class="small text-body-secondary">Learn on your schedule, with lessons that fit into a lunch break.</dd>
          <dt class="small">The small habits that make a big difference?</dt>
          <dd class="small text-body-secondary">Guided learning paths take you from beginner to job-ready step by step.</dd>
          <dt class="small">Five things we learned this year?</dt>
          <dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

Friendly people answer your questions quickly, by phone, chat or email. The mobile app downloads lessons, so you can learn on the train. We measure success by how many students come back and tell their friends.

Battery

Our team has done this many times, so you never have to guess. We listen first, then build a plan around what you actually need. Short quizzes after each lesson help new knowledge stick.

Connectivity

Lifetime access means you can revisit lessons whenever you need a refresher. Career coaches help with your CV, portfolio and interview practice. Clear prices, honest advice and no surprises along the way.

Security

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. 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-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-ui-spy="scroll" data-ui-target="#spy-nav-1174" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1175" class="pb-3">
        <h3 class="h6">Performance</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. The mobile app downloads lessons, so you can learn on the train. We measure success by how many students come back and tell their friends.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">Our team has done this many times, so you never have to guess. We listen first, then build a plan around what you actually need. Short quizzes after each lesson help new knowledge stick.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</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. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">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. 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

$18.20 / mo

Quizzes
Community forum
Community forum

Team

$44.98 / mo

Lifetime access
Community forum
Quizzes

Business

$51.05 / mo

Community forum
Community forum
Community forum

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

14Chapter reader

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

Chapter 1: Looking back at a busy season

Try the first lesson of any course for free before you decide. Earn a certificate at the end of each course and share it with employers. Mentors review your projects and give feedback within two days. Study groups and a friendly forum keep you motivated along the way.

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

Chapter 2: From teacher to UX designer: a career story

Career coaches help with your CV, portfolio and interview practice. Clear prices, honest advice and no surprises along the way. Earn a certificate at the end of each course and share it with employers. 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. We keep things simple, so you can focus on what matters to you. Thousands of students already trust us, and we work hard to keep it that way. Study groups and a friendly forum keep you motivated along the way.

Chapter 3: Our favourite tips for busy weeks

Try the first lesson of any course for free before you decide. Mentors review your projects and give feedback within two days. Every course is built around hands-on projects you can add to your portfolio.

Short quizzes after each lesson help new knowledge stick. We measure success by how many students come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email.

Chapter 4: What our students asked us most

Instructors are working professionals who teach what they use every day. 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. Learn on your schedule, with lessons that fit into a lunch break.

The mobile app downloads lessons, so you can learn on the train. We listen first, then build a plan around what you actually need. Study groups and a friendly forum keep you motivated along the way. Mentors review your projects and give feedback within two days.

<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
  <a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="position-relative border rounded p-3 border-top-0 rounded-top-0 lh-lg" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1183" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1184" class="pb-3">
    <h3 class="h6">Chapter 1: Looking back at a busy season</h3>
    <p class="small">Try the first lesson of any course for free before you decide. Earn a certificate at the end of each course and share it with employers. Mentors review your projects and give feedback within two days. Study groups and a friendly forum keep you motivated along the way.</p>
    <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. We listen first, then build a plan around what you actually need.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: From teacher to UX designer: a career story</h3>
    <p class="small">Career coaches help with your CV, portfolio and interview practice. Clear prices, honest advice and no surprises along the way. Earn a certificate at the end of each course and share it with employers. The mobile app downloads lessons, so you can learn on the train.</p>
    <p class="small">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. Thousands of students already trust us, and we work hard to keep it that way. Study groups and a friendly forum keep you motivated along the way.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: Our favourite tips for busy weeks</h3>
    <p class="small">Try the first lesson of any course for free before you decide. Mentors review your projects and give feedback within two days. Every course is built around hands-on projects you can add to your portfolio.</p>
    <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. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: What our students asked us most</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. Lifetime access means you can revisit lessons whenever you need a refresher. Learn on your schedule, with lessons that fit into a lunch break.</p>
    <p class="small">The mobile app downloads lessons, so you can learn on the train. We listen first, then build a plan around what you actually need. Study groups and a friendly forum keep you motivated along the way. Mentors review your projects and give feedback within two days.</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

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

Notifications

Product news

Weekly digest

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

Privacy

Hide my profile from search

Guided learning paths take you from beginner to job-ready step by step. Instructors are working professionals who teach what they use every day. Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1188" class="list-group list-group-flush border rounded">
      <a class="list-group-item list-group-item-action" href="#spy-1189">Profile</a><a class="list-group-item list-group-item-action" href="#spy-1190">Notifications</a><a class="list-group-item list-group-item-action" href="#spy-1191">Privacy</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1188" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1189" class="pb-3">
        <h3 class="h6">Profile</h3>
        <div class="mb-2">
          <label for="spy-in-1192" class="form-label small">Display name</label>
          <input class="form-control form-control-sm" id="spy-in-1192" value="Sofia Ibrahim">
        </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="Austin">
        </div>
        <p class="small">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. Try the first lesson of any course for free before you decide.</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">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. 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-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">Guided learning paths take you from beginner to job-ready step by step. Instructors are working professionals who teach what they use every day. Start in minutes and get help from a real person whenever you need it. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Customer Support

Priya Okafor
Data Analyst
Ethan Harlow
Customer Success
Luna Kim
Project Manager

Engineering

Nadia Moreau
Data Analyst
Finn Patel
QA Engineer
Owen Ortega
Art Director

Legal

Elena Rossi
Marketing Lead
Kenji Mensah
Art Director
Sofia Alvarez
Support Specialist

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Customer Support</a><a class="nav-link" href="#spy-1199">Engineering</a><a class="nav-link" href="#spy-1200">Legal</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1197" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1198" class="pb-3">
    <h3 class="h6">Customer Support</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="Priya Okafor"><div><div class="small fw-semibold">Priya Okafor</div><div class="small text-body-secondary">Data Analyst</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-10.svg" class="rounded-circle" width="36" height="36" alt="Ethan Harlow"><div><div class="small fw-semibold">Ethan Harlow</div><div class="small text-body-secondary">Customer Success</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Luna Kim"><div><div class="small fw-semibold">Luna Kim</div><div class="small text-body-secondary">Project Manager</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Engineering</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-8.svg" class="rounded-circle" width="36" height="36" alt="Nadia Moreau"><div><div class="small fw-semibold">Nadia Moreau</div><div class="small text-body-secondary">Data Analyst</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-11.svg" class="rounded-circle" width="36" height="36" alt="Finn Patel"><div><div class="small fw-semibold">Finn Patel</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-1.svg" class="rounded-circle" width="36" height="36" alt="Owen Ortega"><div><div class="small fw-semibold">Owen Ortega</div><div class="small text-body-secondary">Art Director</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" 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-10.svg" class="rounded-circle" width="36" height="36" alt="Elena Rossi"><div><div class="small fw-semibold">Elena Rossi</div><div class="small text-body-secondary">Marketing Lead</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-5.svg" class="rounded-circle" width="36" height="36" alt="Kenji Mensah"><div><div class="small fw-semibold">Kenji Mensah</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-5.svg" class="rounded-circle" width="36" height="36" alt="Sofia Alvarez"><div><div class="small fw-semibold">Sofia Alvarez</div><div class="small text-body-secondary">Support Specialist</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Lifestyle

Video editing$102.00
Data analysis$187.00
UX fundamentals$147.99

Development

Public speaking$76.00
Video editing$108.99
Project management$183.99

Business

Web development$229.00
Video editing$116.00
Project management$172.00

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Lifestyle</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-ui-spy="scroll" data-ui-target="#spy-nav-1201" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1202" class="pb-3">
    <h3 class="h6">Lifestyle</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">$102.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Data analysis</span><span class="fw-semibold">$187.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>UX fundamentals</span><span class="fw-semibold">$147.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">$76.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Video editing</span><span class="fw-semibold">$108.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Project management</span><span class="fw-semibold">$183.99</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>Web development</span><span class="fw-semibold">$229.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Video editing</span><span class="fw-semibold">$116.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Project management</span><span class="fw-semibold">$172.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

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. Short quizzes after each lesson help new knowledge stick. Every detail is handled by people who care about getting it right.

This week

Clear prices, honest advice and no surprises along the way. Career coaches help with your CV, portfolio and interview practice. We listen first, then build a plan around what you actually need.

Later

Thousands of students already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email. Try the first lesson of any course for free before you decide. The mobile app downloads lessons, so you can learn on the train.

<div class="card">
  <div class="card-header">
    <nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
      <a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
    </nav>
  </div>
  <div class="card-body p-0">
    <div class="position-relative border rounded p-3 border-0 rounded-0" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1205" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1206" class="pb-3">
        <h3 class="h6">Today</h3>
        <p class="small">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. Short quizzes after each lesson help new knowledge stick. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Career coaches help with your CV, portfolio and interview practice. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">Thousands of students already trust us, and we work hard to keep it that way. Friendly people answer your questions quickly, by phone, chat or email. Try the first lesson of any course for free before you decide. The mobile app downloads lessons, so you can learn on the train.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

Earn a certificate at the end of each course and share it with employers. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.

Orbit

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. Instructors are working professionals who teach what they use every day. Career coaches help with your CV, portfolio and interview practice.

Landing

Mentors review your projects and give feedback within two days. Lifetime access means you can revisit lessons whenever you need a refresher. Start in minutes and get help from a real person whenever you need it. Study groups and a friendly forum keep you motivated along the way.

<div data-ui-theme="dark" class="bg-dark text-body rounded p-3">
  <nav id="spy-nav-1209" class="nav nav-pills mb-2">
    <a class="nav-link" href="#spy-1210">Launch</a><a class="nav-link" href="#spy-1211">Orbit</a><a class="nav-link" href="#spy-1212">Landing</a>
  </nav>
  <div class="position-relative border rounded p-3 border-secondary" style="height:200px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1209" data-ui-smooth-scroll="true" tabindex="0">
    <div id="spy-1210" class="pb-3">
      <h3 class="h6">Launch</h3>
      <p class="small">Earn a certificate at the end of each course and share it with employers. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises 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. Our team has done this many times, so you never have to guess. Instructors are working professionals who teach what they use every day. Career coaches help with your CV, portfolio and interview practice.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Mentors review your projects and give feedback within two days. Lifetime access means you can revisit lessons whenever you need a refresher. Start in minutes and get help from a real person whenever you need it. Study groups and a friendly forum keep you motivated along the way.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 May 13, 2026

NewShort quizzes after each lesson help new knowledge stick.
ImprovedGuided learning paths take you from beginner to job-ready step by step.
FixedLearn on your schedule, with lessons that fit into a lunch break.

v3.1 Nov 19, 2025

NewEvery course is built around hands-on projects you can add to your portfolio.
ImprovedWe keep things simple, so you can focus on what matters to you.
FixedThousands of students already trust us, and we work hard to keep it that way.

v3.0 Mar 2, 2026

NewEvery course is built around hands-on projects you can add to your portfolio.
ImprovedLifetime access means you can revisit lessons whenever you need a refresher.
FixedTry the first lesson of any course for free before you decide.

v2.9 Sep 8, 2026

NewShort quizzes after each lesson help new knowledge stick.
ImprovedMentors review your projects and give feedback within two days.
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-ui-spy="scroll" data-ui-target="#spy-nav-1213" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1214" class="pb-3">
        <h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">May 13, 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>Guided learning paths take you from beginner to job-ready step by step.</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-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Nov 19, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</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-primary me-1">Improved</span>We keep things simple, so you can focus on what matters to you.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Thousands of students already trust us, and we work hard to keep it that way.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Mar 2, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Every course is built around hands-on projects you can add to your portfolio.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Lifetime access means you can revisit lessons whenever you need a refresher.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Try the first lesson of any course for free before you decide.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <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>Short quizzes after each lesson help new knowledge stick.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Mentors review your projects and give feedback within two days.</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>