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

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

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

Details

Our team has done this many times, so you never have to guess. Instructors are working professionals who teach what they use every day. Every detail is handled by people who care about getting it right.

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. Career coaches help with your CV, portfolio and interview practice. Mentors review your projects and give feedback within two days.

Pricing

Study groups and a friendly forum keep you motivated along the way. Lifetime access means you can revisit lessons whenever you need a refresher. Earn a certificate at the end of each course and share it with employers.

The mobile app downloads lessons, so you can learn on the train. We keep things simple, so you can focus on what matters to you. Guided learning paths take you from beginner to job-ready step by step.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Rallyix Labs</a>
  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link" href="#spy-1122">Intro</a></li>
    <li class="nav-item"><a class="nav-link" href="#spy-1123">Details</a></li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-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">Every course is built around hands-on projects you can add to your portfolio. Start in minutes and get help from a real person whenever you need it. We measure success by how many students come back and tell their friends.</p>
    <p class="small">Learn on your schedule, with lessons that fit into a lunch break. We keep things simple, so you can focus on what matters to you. Friendly people answer your questions quickly, by phone, chat or email. The mobile app downloads lessons, so you can learn on the train.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">Our team has done this many times, so you never have to guess. Instructors are working professionals who teach what they use every day. Every detail is handled by people who care about getting it right.</p>
    <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. Career coaches help with your CV, portfolio and interview practice. Mentors review your projects and give feedback within two days.</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. Lifetime access means you can revisit lessons whenever you need a refresher. Earn a certificate at the end of each course and share it with employers.</p>
    <p class="small">The mobile app downloads lessons, so you can learn on the train. We keep things simple, so you can focus on what matters to you. Guided learning paths take you from beginner to job-ready step by step.</p>
  </div>
</div>

2Horizontal pills

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

Step one

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

Step two

We measure success by how many students come back and tell their friends. 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.

Step three

Clear prices, honest advice and no surprises along the way. Career coaches help with your CV, portfolio and interview practice. Try the first lesson of any course for free before you decide.

Step four

Mentors review your projects and give feedback within two days. 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. Friendly people answer your questions quickly, by phone, chat or email.

<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">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. Every course is built around hands-on projects you can add to your portfolio.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">We measure success by how many students come back and tell their friends. 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 id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">Clear prices, honest advice and no surprises along the way. Career coaches help with your CV, portfolio and interview practice. Try the first lesson of any course for free before you decide.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">Mentors review your projects and give feedback within two days. 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. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
</div>

3Vertical pills

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

Certificates

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

Online courses

Short quizzes after each lesson help new knowledge stick. Our team has done this many times, so you never have to guess. Short quizzes after each lesson help new knowledge stick. Career coaches help with your CV, portfolio and interview practice.

Study groups

Thousands of students already trust us, and we work hard to keep it that way. Guided learning paths take you from beginner to job-ready step by step. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.

Questions

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

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1130" class="nav nav-pills flex-column">
      <a class="nav-link" href="#spy-1131">Certificates</a><a class="nav-link" href="#spy-1132">Online courses</a><a class="nav-link" href="#spy-1133">Study groups</a><a class="nav-link" href="#spy-1134">Questions</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1130" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1131" class="pb-3">
        <h3 class="h6">Certificates</h3>
        <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. Study groups and a friendly forum keep you motivated along the way.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Online courses</h3>
        <p class="small">Short quizzes after each lesson help new knowledge stick. Our team has done this many times, so you never have to guess. Short quizzes after each lesson help new knowledge stick. Career coaches help with your CV, portfolio and interview practice.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Study groups</h3>
        <p class="small">Thousands of students already trust us, and we work hard to keep it that way. Guided learning paths take you from beginner to job-ready step by step. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">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. 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>
  </div>
</div>

4Nested navigation

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

Getting started

Every detail is handled by people who care about getting it right. Learn on your schedule, with lessons that fit into a lunch break. Instructors are working professionals who teach what they use every day. Mentors review your projects and give feedback within two days.

Install

Our team has done this many times, so you never have to guess. Study groups and a friendly forum keep you motivated along the way. The mobile app downloads lessons, so you can learn on the train.

Configure

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

Usage

Start in minutes and get help from a real person whenever you need it. Mentors review your projects and give feedback within two days. Clear prices, honest advice and no surprises along the way.

Examples

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. Try the first lesson of any course for free before you decide. Every course is built around hands-on projects you can add to your portfolio.

<div class="row g-3">
  <div class="col-sm-4">
    <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">Every detail is handled by people who care about getting it right. Learn on your schedule, with lessons that fit into a lunch break. Instructors are working professionals who teach what they use every day. Mentors review your projects and give feedback within two days.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Study groups and a friendly forum keep you motivated along the way. The mobile app downloads lessons, so you can learn on the train.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">Every course is built around hands-on projects you can add to your portfolio. Try the first lesson of any course for free before you decide. Lifetime access means you can revisit lessons whenever you need a refresher.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Mentors review your projects and give feedback within two days. Clear prices, honest advice and no surprises along the way.</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. 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. Every course is built around hands-on projects you can add to your portfolio.</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

Start in minutes and get help from a real person whenever you need it. Thousands of students already trust us, and we work hard to keep it that way. Short quizzes after each lesson help new knowledge stick.

Midday

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. Study groups and a friendly forum keep you motivated along the way. Learn on your schedule, with lessons that fit into a lunch break.

Afternoon

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

Evening

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

<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">Start in minutes and get help from a real person whenever you need it. Thousands of students already trust us, and we work hard to keep it that way. Short quizzes after each lesson help new knowledge stick.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">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. Study groups and a friendly forum keep you motivated along the way. Learn on your schedule, with lessons that fit into a lunch break.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Our team has done this many times, so you never have to guess. 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 id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Guided learning paths take you from beginner to job-ready step by step. Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Instructors are working professionals who teach what they use every day.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

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

Beta

Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. The mobile app downloads lessons, so you can learn on the train.

Gamma

Learn on your schedule, with lessons that fit into a lunch break. Mentors review your projects and give feedback within two days. Instructors are working professionals who teach what they use every day.

<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">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. Every course is built around hands-on projects you can add to your portfolio.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. The mobile app downloads lessons, so you can learn on the train.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">Learn on your schedule, with lessons that fit into a lunch break. Mentors review your projects and give feedback within two days. Instructors are working professionals who teach what they use every day.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

We measure success by how many students come back and tell their friends. Career coaches help with your CV, portfolio and interview practice. Earn a certificate at the end of each course and share it with employers.

Features

Thousands of students already trust us, and we work hard to keep it that way. Short quizzes after each lesson help new knowledge stick. Every detail is handled by people who care about getting it right.

Reviews

We keep things simple, so you can focus on what matters to you. Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need.

FAQ

Try the first lesson of any course for free before you decide. Friendly people answer your questions quickly, by phone, chat or email. Study groups and a friendly forum keep you motivated 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-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">We measure success by how many students come back and tell their friends. Career coaches help with your CV, portfolio and interview practice. Earn a certificate at the end of each course and share it with employers.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">Thousands of students already trust us, and we work hard to keep it that way. 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-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">We keep things simple, so you can focus on what matters to you. Start in minutes and get help from a real person whenever you need it. We listen first, then build a plan around what you actually need.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">Try the first lesson of any course for free before you decide. Friendly people answer your questions quickly, by phone, chat or email. Study groups and a friendly forum keep you motivated 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

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

Background

We measure success by how many students come back and tell their friends. 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.

Method

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

Results

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

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">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. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">We measure success by how many students come back and tell their friends. 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.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Short quizzes after each lesson help new knowledge stick. 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.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">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. Our team has done this many times, so you never have to guess.</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

Guided learning paths take you from beginner to job-ready step by step. We listen first, then build a plan around what you actually need. Study groups and a friendly forum keep you motivated along the way. Career coaches help with your CV, portfolio and interview practice.

Set up your profile

Clear prices, honest advice and no surprises along the way. Learn on your schedule, with lessons that fit into a lunch break. 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.

Invite the team

Mentors review your projects and give feedback within two days. Every detail is handled by people who care about getting it right. Study groups and a friendly forum keep you motivated along the way. Every detail is handled by people who care about getting it right.

Go live

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

<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">Guided learning paths take you from beginner to job-ready step by step. We listen first, then build a plan around what you actually need. Study groups and a friendly forum keep you motivated along the way. Career coaches help with your CV, portfolio and interview practice.</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. Learn on your schedule, with lessons that fit into a lunch break. Instructors are working professionals who teach what they use every day. Every course is built around hands-on projects you can add to your portfolio.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">Mentors review your projects and give feedback within two days. Every detail is handled by people who care about getting it right. Study groups and a friendly forum keep you motivated along the way. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">We measure success by how many students come back and tell their friends. Every course is built around hands-on projects you can add to your portfolio. Learn on your schedule, with lessons that fit into a lunch break.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Five things we learned this year

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. Career coaches help with your CV, portfolio and interview practice. Lifetime access means you can revisit lessons whenever you need a refresher.

2024

What employers look for in junior analysts

Short quizzes after each lesson help new knowledge stick. Clear prices, honest advice and no surprises 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.

2025

Building a portfolio that gets interviews

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

2026

The small habits that make a big difference

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

<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">Five things we learned this year</h3>
    <p class="small mb-0">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. 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 id="spy-1167" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2024</span>
    <h3 class="h6">What employers look for in junior analysts</h3>
    <p class="small mb-0">Short quizzes after each lesson help new knowledge stick. Clear prices, honest advice and no surprises 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.</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">Building a portfolio that gets interviews</h3>
    <p class="small mb-0">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. Earn a certificate at the end of each course and share it with employers.</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">The small habits that make a big difference</h3>
    <p class="small mb-0">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. Mentors review your projects and give feedback within two days.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

Our favourite tips for busy weeks?: Instructors are working professionals who teach what they use every day.
A beginner's guide to getting started?: We keep things simple, so you can focus on what matters to you.
How to stay motivated when learning online?: We listen first, then build a plan around what you actually need.

Shipping

How to choose the right course?: Start in minutes and get help from a real person whenever you need it.
Looking back at a busy season?: Mentors review your projects and give feedback within two days.
Headlines people actually click?: Short quizzes after each lesson help new knowledge stick.

Returns

From teacher to UX designer: a career story?: Clear prices, honest advice and no surprises along the way.
Five study habits that actually work?: Earn a certificate at the end of each course and share it with employers.
What our students asked us most?: Try the first lesson of any course for free before you decide.

<div class="row g-3">
  <div class="col-sm-3">
    <nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
      <a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
    </nav>
  </div>
  <div class="col-sm-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1170" data-ui-smooth-scroll="true" tabindex="0">
      <div id="spy-1171" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">Our favourite tips for busy weeks?</dt>
          <dd class="small text-body-secondary">Instructors are working professionals who teach what they use every day.</dd>
          <dt class="small">A beginner&#39;s guide to getting started?</dt>
          <dd class="small text-body-secondary">We keep things simple, so you can focus on what matters to you.</dd>
          <dt class="small">How to stay motivated when learning online?</dt>
          <dd class="small text-body-secondary">We listen first, then build a plan around what you actually need.</dd>
        </dl>
      </div>
      <div id="spy-1172" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Shipping</h3>
        <dl>
          <dt class="small">How to choose the right course?</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">Looking back at a busy season?</dt>
          <dd class="small text-body-secondary">Mentors review your projects and give feedback within two days.</dd>
          <dt class="small">Headlines people actually click?</dt>
          <dd class="small text-body-secondary">Short quizzes after each lesson help new knowledge stick.</dd>
        </dl>
      </div>
      <div id="spy-1173" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">From teacher to UX designer: a career story?</dt>
          <dd class="small text-body-secondary">Clear prices, honest advice and no surprises along the way.</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>
          <dt class="small">What our students asked us most?</dt>
          <dd class="small text-body-secondary">Try the first lesson of any course for free before you decide.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

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

Battery

Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. We measure success by how many students come back and tell their friends.

Connectivity

Study groups and a friendly forum keep you motivated along the way. Thousands of students already trust us, and we work hard to keep it that way. Lifetime access means you can revisit lessons whenever you need a refresher.

Security

The mobile app downloads lessons, so you can learn on the train. Career coaches help with your CV, portfolio and interview practice. Instructors are working professionals who teach what they use every day. 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" 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">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. Every course is built around hands-on projects you can add to your portfolio.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right. 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">Study groups and a friendly forum keep you motivated along the way. Thousands of students already trust us, and we work hard to keep it that way. Lifetime access means you can revisit lessons whenever you need a refresher.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">The mobile app downloads lessons, so you can learn on the train. Career coaches help with your CV, portfolio and interview practice. Instructors are working professionals who teach what they use every day. 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

$15.83 / mo

Quizzes
Mobile learning
Mobile learning

Team

$47.08 / mo

Lifetime access
Hands-on projects
Hands-on projects

Business

$77.90 / mo

Expert mentors
Lifetime access
Hands-on projects

<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">$15.83<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Quizzes</li>
        <li>Mobile learning</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">$47.08<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Lifetime access</li>
        <li>Hands-on projects</li>
        <li>Hands-on projects</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">$77.90<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Expert mentors</li>
        <li>Lifetime access</li>
        <li>Hands-on projects</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

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

Guided learning paths take you from beginner to job-ready step by step. Instructors are working professionals who teach what they use every day. Guided learning paths take you from beginner to job-ready step by step.

Mentors review your projects and give feedback within two days. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.

Chapter 2: Tips for learning while working full time

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

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

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

Study groups and a friendly forum keep you motivated along the way. Thousands of students already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it.

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

Chapter 4: Our most popular courses this year

Lifetime access means you can revisit lessons whenever you need a refresher. We measure success by how many students come back and tell their friends. Career coaches help with your CV, portfolio and interview practice.

We listen first, then build a plan around what you actually need. Learn on your schedule, with lessons that fit into a lunch break. We keep things simple, so you can focus on what matters to you. Guided learning paths take you from beginner to job-ready step by step.

<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: How to learn a new skill in 30 days</h3>
    <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. 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. Our team has done this many times, so you never have to guess. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: Tips for learning while working full time</h3>
    <p class="small">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. Every detail is handled by people who care about getting it right.</p>
    <p class="small">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. Short quizzes after each lesson help new knowledge stick. We listen first, then build a plan around what you actually need.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: How we build a course, start to finish</h3>
    <p class="small">Study groups and a friendly forum keep you motivated along the way. Thousands of students already trust us, and we work hard to keep it that way. Start in minutes and get help from a real person whenever you need it.</p>
    <p class="small">Career coaches help with your CV, portfolio and interview practice. Learn on your schedule, with lessons that fit into a lunch break. 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: Our most popular courses this year</h3>
    <p class="small">Lifetime access means you can revisit lessons whenever you need a refresher. We measure success by how many students come back and tell their friends. Career coaches help with your CV, portfolio and interview practice.</p>
    <p class="small">We listen first, then build a plan around what you actually need. Learn on your schedule, with lessons that fit into a lunch break. We keep things simple, so you can focus on what matters to you. Guided learning paths take you from beginner to job-ready step by step.</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

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

Notifications

Product news

Weekly digest

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

Privacy

Hide my profile from search

Friendly people answer your questions quickly, by phone, chat or email. Study groups and a friendly forum keep you motivated along the way. The mobile app downloads lessons, so you can learn on the train.

<div class="row g-3">
  <div class="col-sm-4">
    <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="Mateo Rossi">
        </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="Toronto">
        </div>
        <p class="small">Mentors review your projects and give feedback within two days. 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-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">Lifetime access means you can revisit lessons whenever you need a refresher. 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-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">Friendly people answer your questions quickly, by phone, chat or email. Study groups and a friendly forum keep you motivated along the way. The mobile app downloads lessons, so you can learn on the train.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Marketing

Sofia Duarte
HR Partner
Tariq Brennan
Product Designer
Kenji Kim
Data Analyst

Sales

Elena Haddad
Customer Success
Chloe Varga
Data Analyst
Theo Whitaker
Sales Executive

Engineering

Ava Moreau
Support Specialist
Ethan Okafor
Operations Manager
Lucas Ortega
Data Analyst

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Marketing</a><a class="nav-link" href="#spy-1199">Sales</a><a class="nav-link" href="#spy-1200">Engineering</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1197" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1198" class="pb-3">
    <h3 class="h6">Marketing</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="Sofia Duarte"><div><div class="small fw-semibold">Sofia Duarte</div><div class="small text-body-secondary">HR Partner</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="Tariq Brennan"><div><div class="small fw-semibold">Tariq Brennan</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-5.svg" class="rounded-circle" width="36" height="36" alt="Kenji Kim"><div><div class="small fw-semibold">Kenji Kim</div><div class="small text-body-secondary">Data Analyst</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Sales</h3>
    <ul class="list-unstyled">
      <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="Elena Haddad"><div><div class="small fw-semibold">Elena Haddad</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-7.svg" class="rounded-circle" width="36" height="36" alt="Chloe Varga"><div><div class="small fw-semibold">Chloe Varga</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="Theo Whitaker"><div><div class="small fw-semibold">Theo Whitaker</div><div class="small text-body-secondary">Sales Executive</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-3">
    <h3 class="h6">Engineering</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-3.svg" class="rounded-circle" width="36" height="36" alt="Ava Moreau"><div><div class="small fw-semibold">Ava Moreau</div><div class="small text-body-secondary">Support Specialist</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-6.svg" class="rounded-circle" width="36" height="36" alt="Ethan Okafor"><div><div class="small fw-semibold">Ethan Okafor</div><div class="small text-body-secondary">Operations Manager</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-circle" width="36" height="36" alt="Lucas Ortega"><div><div class="small fw-semibold">Lucas Ortega</div><div class="small text-body-secondary">Data Analyst</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Development

Brand design$128.99
Project management$164.00
Web development$224.00

Lifestyle

Video editing$106.00
Brand design$129.00
Copywriting$85.00

Design

Project management$178.99
Data analysis$209.00
Public speaking$85.00

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Development</a><a class="nav-link" href="#spy-1203">Lifestyle</a><a class="nav-link" href="#spy-1204">Design</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1201" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1202" class="pb-3">
    <h3 class="h6">Development</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Brand design</span><span class="fw-semibold">$128.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Project management</span><span class="fw-semibold">$164.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Web development</span><span class="fw-semibold">$224.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>Video editing</span><span class="fw-semibold">$106.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Brand design</span><span class="fw-semibold">$129.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Copywriting</span><span class="fw-semibold">$85.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-3">
    <h3 class="h6">Design</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Project management</span><span class="fw-semibold">$178.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Data analysis</span><span class="fw-semibold">$209.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Public speaking</span><span class="fw-semibold">$85.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. Short quizzes after each lesson help new knowledge stick. Our team has done this many times, so you never have to guess. Instructors are working professionals who teach what they use every day.

This week

Thousands of students already trust us, and we work hard to keep it that way. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.

Later

Every detail is handled by people who care about getting it right. Study groups and a friendly forum keep you motivated along the way. Career coaches help with your CV, portfolio and interview practice. Learn on your schedule, with lessons that fit into a lunch break.

<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. Short quizzes after each lesson help new knowledge stick. 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-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">Thousands of students already trust us, and we work hard to keep it that way. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Study groups and a friendly forum keep you motivated along the way. Career coaches help with your CV, portfolio and interview practice. Learn on your schedule, with lessons that fit into a lunch break.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

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

Orbit

We listen first, then build a plan around what you actually need. Earn a certificate at the end of each course and share it with employers. Short quizzes after each lesson help new knowledge stick.

Landing

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

<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">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. Try the first lesson of any course for free before you decide.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">We listen first, then build a plan around what you actually need. Earn a certificate at the end of each course and share it with employers. Short quizzes after each lesson help new knowledge stick.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</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. 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.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Jul 4, 2026

NewGuided learning paths take you from beginner to job-ready step by step.
ImprovedThe mobile app downloads lessons, so you can learn on the train.
FixedEvery course is built around hands-on projects you can add to your portfolio.

v3.1 May 22, 2026

NewFriendly people answer your questions quickly, by phone, chat or email.
ImprovedMentors review your projects and give feedback within two days.
FixedClear prices, honest advice and no surprises along the way.

v3.0 Feb 26, 2026

NewInstructors are working professionals who teach what they use every day.
ImprovedLifetime access means you can revisit lessons whenever you need a refresher.
FixedEvery detail is handled by people who care about getting it right.

v2.9 Mar 20, 2026

NewOur team has done this many times, so you never have to guess.
ImprovedTry the first lesson of any course for free before you decide.
FixedThe mobile app downloads lessons, so you can learn on the train.

<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">Jul 4, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Guided learning paths take you from beginner to job-ready step by step.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>The mobile app downloads lessons, so you can learn on the train.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Every course is built around hands-on projects you can add to your portfolio.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">May 22, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Friendly people answer your questions quickly, by phone, chat or email.</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>Clear prices, honest advice and no surprises along the way.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Feb 26, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Instructors are working professionals who teach what they use every day.</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>Every detail is handled by people who care about getting it right.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Mar 20, 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>Try the first lesson of any course for free before you decide.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>The mobile app downloads lessons, so you can learn on the train.</li>
        </ul>
      </div>
    </div>
  </div>
</div>