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

Short quizzes after each lesson help new knowledge stick. 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. We measure success by how many students come back and tell their friends.

The mobile app downloads lessons, so you can learn on the train. Every course is built around hands-on projects you can add to your portfolio. Mentors review your projects and give feedback within two days.

Details

Career coaches help with your CV, portfolio and interview practice. Every detail is handled by people who care about getting it right. Learn on your schedule, with lessons that fit into a lunch break.

Try the first lesson of any course for free before you decide. Clear prices, honest advice and no surprises along the way. Friendly people answer your questions quickly, by phone, chat or email.

Pricing

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

Instructors are working professionals who teach what they use every day. We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Fluxio Works</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">Short quizzes after each lesson help new knowledge stick. 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. We measure success by how many students come back and tell their friends.</p>
    <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. Mentors review your projects and give feedback within two days.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">Career coaches help with your CV, portfolio and interview practice. 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>
    <p class="small">Try the first lesson of any course for free before you decide. 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-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">We listen first, then build a plan around what you actually need. 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. Study groups and a friendly forum keep you motivated along the way.</p>
    <p class="small">Instructors are working professionals who teach what they use every day. We keep things simple, so you can focus on what matters to you. Our team has done this many times, so you never have to guess.</p>
  </div>
</div>

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

Step two

Clear prices, honest advice and no surprises along the way. Earn a certificate at the end of each course and share it with employers. We keep things simple, so you can focus on what matters to you. Try the first lesson of any course for free before you decide.

Step three

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. Guided learning paths take you from beginner to job-ready step by step. Study groups and a friendly forum keep you motivated along the way.

Step four

We measure success by how many students come back and tell their friends. Instructors are working professionals who teach what they use every day. Mentors review your projects and give feedback within two days.

<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. 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. Learn on your schedule, with lessons that fit into a lunch break.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">Clear prices, honest advice and no surprises along the way. Earn a certificate at the end of each course and share it with employers. We keep things simple, so you can focus on what matters to you. Try the first lesson of any course for free before you decide.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">Every course is built around hands-on projects you can add to your portfolio. Friendly people answer your questions quickly, by phone, chat or email. Guided learning paths take you from beginner to job-ready step by step. Study groups and a friendly forum keep you motivated along the way.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">We measure success by how many students come back and tell their friends. Instructors are working professionals who teach what they use every day. Mentors review your projects and give feedback within two days.</p>
  </div>
</div>

3Vertical pills

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

Live workshops

The mobile app downloads lessons, so you can learn on the train. Our team has done this many times, so you never have to guess. Short quizzes after each lesson help new knowledge stick.

Certificates

Start in minutes and get help from a real person whenever you need it. Career coaches help with your CV, portfolio and interview practice. Lifetime access means you can revisit lessons whenever you need a refresher.

Online courses

We listen first, then build a plan around what you actually need. Every course is built around hands-on projects you can add to your portfolio. Short quizzes after each lesson help new knowledge stick. Instructors are working professionals who teach what they use every day.

Questions

Thousands of students already trust us, and we work hard to keep it that way. The mobile app downloads lessons, so you can learn on the train. 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-1130" class="nav nav-pills flex-column">
      <a class="nav-link" href="#spy-1131">Live workshops</a><a class="nav-link" href="#spy-1132">Certificates</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">The mobile app downloads lessons, so you can learn on the train. Our team has done this many times, so you never have to guess. Short quizzes after each lesson help new knowledge stick.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Certificates</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. 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-1133" class="pb-3">
        <h3 class="h6">Online courses</h3>
        <p class="small">We listen first, then build a plan around what you actually need. Every course is built around hands-on projects you can add to your portfolio. Short quizzes after each lesson help new knowledge stick. Instructors are working professionals who teach what they use every day.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">Thousands of students already trust us, and we work hard to keep it that way. The mobile app downloads lessons, so you can learn on the train. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
    </div>
  </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. Study groups and a friendly forum keep you motivated along the way. Our team has done this many times, so you never have to guess.

Install

Earn a certificate at the end of each course and share it with employers. We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. We measure success by how many students come back and tell their friends.

Configure

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

Usage

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

Examples

We listen first, then build a plan around what you actually need. Lifetime access means you can revisit lessons whenever you need a refresher. We measure success by how many students come back and tell their friends. 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-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. Study groups and a friendly forum keep you motivated along the way. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Earn a certificate at the end of each course and share it with employers. We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way. 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">Start in minutes and get help from a real person whenever you need it. 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-1139" class="pb-3">
        <h3 class="h6">Usage</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. Guided learning paths take you from beginner to job-ready step by step.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">We listen first, then build a plan around what you actually need. 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. Friendly people answer your questions quickly, by phone, chat or email.</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

Our team has done this many times, so you never have to guess. The mobile app downloads lessons, so you can learn on the train. Every detail is handled by people who care about getting it right.

Midday

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. Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way.

Afternoon

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

Evening

Thousands of students already trust us, and we work hard to keep it that way. Every course is built around hands-on projects you can add to your portfolio. 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">Our team has done this many times, so you never have to guess. The mobile app downloads lessons, so you can learn on the train. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">Lifetime access means you can revisit lessons whenever you need a refresher. We 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. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Short quizzes after each lesson help new knowledge stick. Guided learning paths take you from beginner to job-ready step by step. Earn a certificate at the end of each course and share it with employers. Learn on your schedule, with lessons that fit into a lunch break.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Thousands of students already trust us, and we work hard to keep it that way. Every course is built around hands-on projects you can add to your portfolio. 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

Study groups and a friendly forum keep you motivated along the way. We listen first, then build a plan around what you actually need. Try the first lesson of any course for free before you decide.

Beta

Career coaches help with your CV, portfolio and interview practice. Mentors review your projects and give feedback within two days. Instructors are working professionals who teach what they use every day.

Gamma

Clear prices, honest advice and no surprises along the way. Study groups and a friendly forum keep you motivated along the way. We listen first, then build a plan around what you actually need. Mentors review your projects and give feedback within two days.

<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">Study groups and a friendly forum keep you motivated along the way. We listen first, then build a plan around what you actually need. Try the first lesson of any course for free before you decide.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">Career coaches help with your CV, portfolio and interview practice. Mentors review your projects and give feedback within two days. Instructors are working professionals who teach what they use every day.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Study groups and a friendly forum keep you motivated along the way. 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>
  </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. 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. The mobile app downloads lessons, so you can learn on the train.

Features

Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you. Lifetime access means you can revisit lessons whenever you need a refresher. Career coaches help with your CV, portfolio and interview practice.

Reviews

Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess. Short quizzes after each lesson help new knowledge stick. Earn a certificate at the end of each course and share it with employers.

FAQ

Learn on your schedule, with lessons that fit into a lunch break. Guided learning paths take you from beginner to job-ready step by step. 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.

<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. 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. The mobile app downloads lessons, so you can learn on the train.</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. We keep things simple, so you can focus on what matters to you. Lifetime access means you can revisit lessons whenever you need a refresher. Career coaches help with your CV, portfolio and interview practice.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">Start in minutes and get help from a real person whenever you need it. Our team has done this many times, so you never have to guess. Short quizzes after each lesson help new knowledge stick. Earn a certificate at the end of each course and share it with employers.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">Learn on your schedule, with lessons that fit into a lunch break. Guided learning paths take you from beginner to job-ready step by step. 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>

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. Friendly people answer your questions quickly, by phone, chat or email. Try the first lesson of any course for free before you decide.

Background

Every detail is handled by people who care about getting it right. Short quizzes after each lesson help new knowledge stick. Study groups and a friendly forum keep you motivated along the way.

Method

Our team has done this many times, so you never have to guess. We measure success by how many students come back and tell their friends. Career coaches help with your CV, portfolio and interview practice.

Results

Clear prices, honest advice and no surprises along the way. Every course is built around hands-on projects you can add to your portfolio. We listen first, then build a plan around what you actually need.

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. Friendly people answer your questions quickly, by phone, chat or email. Try the first lesson of any course for free before you decide.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Short quizzes after each lesson help new knowledge stick. Study groups and a friendly forum keep you motivated along the way.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Our team has done this many times, so you never have to guess. We measure success by how many students come back and tell their friends. Career coaches help with your CV, portfolio and interview practice.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Every course is built around hands-on projects you can add to your portfolio. We listen first, then build a plan around what you actually need.</p>
      </div>
    </div>
  </div>
  <div class="col-md-3 order-first order-md-last">
    <p class="small fw-semibold text-uppercase text-body-secondary mb-2">On this page</p>
    <nav id="spy-nav-1155" class="nav nav-pills flex-column small">
      <a class="nav-link py-1" href="#spy-1156">Summary</a><a class="nav-link py-1" href="#spy-1157">Background</a><a class="nav-link py-1" href="#spy-1158">Method</a><a class="nav-link py-1" href="#spy-1159">Results</a>
    </nav>
  </div>
</div>

9Numbered steps

<code>.list-group-numbered</code> turns the spy menu into a step counter.

Create an account Set up your profile Invite the team Go live

Create an account

Guided learning paths take you from beginner to job-ready step by step. The mobile app downloads lessons, so you can learn on the train. Learn on your schedule, with lessons that fit into a lunch break.

Set up your profile

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

Invite the team

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

Go live

Lifetime access means you can revisit lessons whenever you need a refresher. Study groups and a friendly forum keep you motivated along the way. We listen first, then build a plan around what you actually need.

<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. The mobile app downloads lessons, so you can learn on the train. Learn on your schedule, with lessons that fit into a lunch break.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">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. Start in minutes and get help from a real person whenever you need it. Mentors review your projects and give feedback within two days.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">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. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">Lifetime access means you can revisit lessons whenever you need a refresher. Study groups and a friendly forum keep you motivated along the way. We listen first, then build a plan around what you actually need.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Tips for learning while working full time

Every course is built around hands-on projects you can add to your portfolio. We keep things simple, so you can focus on what matters to you. Instructors are working professionals who teach what they use every day.

2024

Our most popular courses this year

Learn on your schedule, with lessons that fit into a lunch break. Start in minutes and get help from a real person whenever you need it. Thousands of students already trust us, and we work hard to keep it that way.

2025

Five things we learned this year

Guided learning paths take you from beginner to job-ready step by step. The mobile app downloads lessons, so you can learn on the train. Short quizzes after each lesson help new knowledge stick.

2026

How we build a course, start to finish

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

<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">Tips for learning while working full time</h3>
    <p class="small mb-0">Every course is built around hands-on projects you can add to your portfolio. We keep things simple, so you can focus on what matters to you. Instructors are working professionals who teach what they use every day.</p>
  </div>
  <div id="spy-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">Our most popular courses this year</h3>
    <p class="small mb-0">Learn on your schedule, with lessons that fit into a lunch break. Start in minutes and get help from a real person whenever you need it. Thousands of students already trust us, and we work hard to keep it that way.</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">Five things we learned this year</h3>
    <p class="small mb-0">Guided learning paths take you from beginner to job-ready step by step. The mobile app downloads lessons, so you can learn on the train. 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">How we build a course, start to finish</h3>
    <p class="small mb-0">Friendly people answer your questions quickly, by phone, chat or email. 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. Career coaches help with your CV, portfolio and interview practice.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

Looking back at a busy season?: Mentors review your projects and give feedback within two days.
How to choose the right course?: Every detail is handled by people who care about getting it right.
How to learn a new skill in 30 days?: Clear prices, honest advice and no surprises along the way.

Shipping

The small habits that make a big difference?: Earn a certificate at the end of each course and share it with employers.
Building a portfolio that gets interviews?: Try the first lesson of any course for free before you decide.
Five study habits that actually work?: Lifetime access means you can revisit lessons whenever you need a refresher.

Returns

How to stay motivated when learning online?: We keep things simple, so you can focus on what matters to you.
From teacher to UX designer: a career story?: Learn on your schedule, with lessons that fit into a lunch break.
Headlines people actually click?: Guided learning paths take you from beginner to job-ready step by step.

<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">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">How to choose the right course?</dt>
          <dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
          <dt class="small">How to learn a new skill in 30 days?</dt>
          <dd class="small text-body-secondary">Clear prices, honest advice and no surprises along the way.</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">The small habits that make a big difference?</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">Building a portfolio that gets interviews?</dt>
          <dd class="small text-body-secondary">Try the first lesson of any course for free before you decide.</dd>
          <dt class="small">Five study habits that actually work?</dt>
          <dd class="small text-body-secondary">Lifetime access means you can revisit lessons whenever you need a refresher.</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">How to stay motivated when learning online?</dt>
          <dd class="small text-body-secondary">We keep things simple, so you can focus on what matters to you.</dd>
          <dt class="small">From teacher to UX designer: a career story?</dt>
          <dd class="small text-body-secondary">Learn on your schedule, with lessons that fit into a lunch break.</dd>
          <dt class="small">Headlines people actually click?</dt>
          <dd class="small text-body-secondary">Guided learning paths take you from beginner to job-ready step by step.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

Mentors review your projects and give feedback within two days. We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email.

Battery

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

Connectivity

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

Security

Instructors are working professionals who teach what they use every day. Short quizzes after each lesson help new knowledge stick. Study groups and a friendly forum keep you motivated along the way. Career coaches help with your CV, portfolio and interview practice.

<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">Mentors review your projects and give feedback within two days. We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</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. 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-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <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. 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">Instructors are working professionals who teach what they use every day. Short quizzes after each lesson help new knowledge stick. 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>
  </div>
</div>

13Pricing plans

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

Starter

$12.19 / mo

Hands-on projects
Hands-on projects
Mobile learning

Team

$35.65 / mo

Lifetime access
Expert mentors
Expert mentors

Business

$67.06 / mo

Lifetime access
Quizzes
Lifetime access

<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">$12.19<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Hands-on projects</li>
        <li>Hands-on projects</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">$35.65<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Lifetime access</li>
        <li>Expert mentors</li>
        <li>Expert mentors</li>
      </ul>
    </div>
  </div>
  <div id="spy-1182" class="card mb-3">
    <div class="card-body">
      <h3 class="h6 card-title">Business</h3>
      <p class="fs-4 fw-bold mb-1">$67.06<small class="fs-6 text-body-secondary"> / mo</small></p>
      <ul class="small mb-0">
        <li>Lifetime access</li>
        <li>Quizzes</li>
        <li>Lifetime access</li>
      </ul>
    </div>
  </div>
</div>

14Chapter reader

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

Chapter 1: What our students asked us most

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. Mentors review your projects and give feedback within two days. 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 listen first, then build a plan around what you actually need. Clear prices, honest advice and no surprises along the way. Try the first lesson of any course for free before you decide.

Chapter 2: What employers look for in junior analysts

Earn a certificate at the end of each course and share it with employers. We keep things simple, so you can focus on what matters to you. Lifetime access means you can revisit lessons whenever you need a refresher. Study groups and a friendly forum keep you motivated along the way.

Every course is built around hands-on projects you can add to your portfolio. We measure success by how many students come back and tell their friends. Thousands of students already trust us, and we work hard to keep it that way.

Chapter 3: A beginner's guide to getting started

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

Guided learning paths take you from beginner to job-ready step by step. Career coaches help with your CV, portfolio and interview practice. Learn on your schedule, with lessons that fit into a lunch break. The mobile app downloads lessons, so you can learn on the train.

Chapter 4: Our favourite tips for busy weeks

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

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

<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: What our students asked us most</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. Mentors review your projects and give feedback within two days. Our team has done this many times, so you never have to guess.</p>
    <p class="small">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. Clear prices, honest advice and no surprises along the way. Try the first lesson of any course for free before you decide.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: What employers look for in junior analysts</h3>
    <p class="small">Earn a certificate at the end of each course and share it with employers. We keep things simple, so you can focus on what matters to you. Lifetime access means you can revisit lessons whenever you need a refresher. Study groups and a friendly forum keep you motivated along the way.</p>
    <p class="small">Every course is built around hands-on projects you can add to your portfolio. We measure success by how many students come back and tell their friends. Thousands of students already trust us, and we work hard to keep it that way.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: A beginner&#39;s guide to getting started</h3>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Instructors are working professionals who teach what they use every day. Short quizzes after each lesson help new knowledge stick.</p>
    <p class="small">Guided learning paths take you from beginner to job-ready step by step. Career coaches help with your CV, portfolio and interview practice. Learn on your schedule, with lessons that fit into a lunch break. The mobile app downloads lessons, so you can learn on the train.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: Our favourite tips for busy weeks</h3>
    <p class="small">Try the first lesson of any course for free before you decide. Clear prices, honest advice and no surprises along the way. Career coaches help with your CV, portfolio and interview practice.</p>
    <p class="small">The mobile app downloads lessons, so you can learn on the train. We measure success by how many students come back and tell their friends. Every course is built around hands-on projects you can add to your portfolio.</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

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

Notifications

Product news

Weekly digest

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

Privacy

Hide my profile from search

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

<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="Maya Brennan">
        </div>
        <div class="mb-2">
          <label for="spy-in-1193" class="form-label small">City</label>
          <input class="form-control form-control-sm" id="spy-in-1193" value="Barcelona">
        </div>
        <p class="small">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. Lifetime access means you can revisit lessons whenever you need a refresher.</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. 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.</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">Mentors review your projects and give feedback within two days. 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.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Finance

Owen Rossi
Marketing Lead
Felix Okafor
Operations Manager
Nora Alvarez
Frontend Engineer

Human Resources

Liam Patel
Content Writer
Isla Brennan
Sales Executive
Freya Morgan
Content Writer

Marketing

Mateo Ashford
Data Analyst
Mason Harlow
HR Partner
Lucas Tanaka
Finance Lead

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Finance</a><a class="nav-link" href="#spy-1199">Human Resources</a><a class="nav-link" href="#spy-1200">Marketing</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">Finance</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="36" height="36" alt="Owen Rossi"><div><div class="small fw-semibold">Owen 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-6.svg" class="rounded-circle" width="36" height="36" alt="Felix Okafor"><div><div class="small fw-semibold">Felix 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="Nora Alvarez"><div><div class="small fw-semibold">Nora Alvarez</div><div class="small text-body-secondary">Frontend Engineer</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Human Resources</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Liam Patel"><div><div class="small fw-semibold">Liam Patel</div><div class="small text-body-secondary">Content Writer</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="Isla Brennan"><div><div class="small fw-semibold">Isla Brennan</div><div class="small text-body-secondary">Sales Executive</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="Freya Morgan"><div><div class="small fw-semibold">Freya Morgan</div><div class="small text-body-secondary">Content Writer</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" 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-8.svg" class="rounded-circle" width="36" height="36" alt="Mateo Ashford"><div><div class="small fw-semibold">Mateo Ashford</div><div class="small text-body-secondary">Data Analyst</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Mason Harlow"><div><div class="small fw-semibold">Mason Harlow</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="Lucas Tanaka"><div><div class="small fw-semibold">Lucas Tanaka</div><div class="small text-body-secondary">Finance Lead</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Business

Digital marketing$119.00
Data analysis$203.00
UX fundamentals$148.00

Lifestyle

Copywriting$89.00
Photography$94.00
Brand design$134.99

Marketing

Project management$162.00
Photography$103.00
Public speaking$84.99

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Business</a><a class="nav-link" href="#spy-1203">Lifestyle</a><a class="nav-link" href="#spy-1204">Marketing</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">Business</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Digital marketing</span><span class="fw-semibold">$119.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Data analysis</span><span class="fw-semibold">$203.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>UX fundamentals</span><span class="fw-semibold">$148.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>Copywriting</span><span class="fw-semibold">$89.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Photography</span><span class="fw-semibold">$94.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Brand design</span><span class="fw-semibold">$134.99</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-3">
    <h3 class="h6">Marketing</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">$162.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Photography</span><span class="fw-semibold">$103.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Public speaking</span><span class="fw-semibold">$84.99</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

Study groups and a friendly forum keep you motivated along the way. Guided learning paths take you from beginner to job-ready step by step. Instructors are working professionals who teach what they use every day.

This week

Friendly people answer your questions quickly, by phone, chat or email. Short quizzes after each lesson help new knowledge stick. 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.

Later

Clear prices, honest advice and no surprises along the way. Career coaches help with your CV, portfolio and interview practice. The mobile app downloads lessons, so you can learn on the train. Friendly people answer your questions quickly, by phone, chat or email.

<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">Study groups and a friendly forum keep you motivated along the way. Guided learning paths take you from beginner to job-ready step by step. 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">Friendly people answer your questions quickly, by phone, chat or email. Short quizzes after each lesson help new knowledge stick. 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 id="spy-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Career coaches help with your CV, portfolio and interview practice. The mobile app downloads lessons, so you can learn on the train. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

Study groups and a friendly forum keep you motivated along the way. Instructors are working professionals who teach what they use every day. Lifetime access means you can revisit lessons whenever you need a refresher.

Orbit

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

Landing

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

<div 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">Study groups and a friendly forum keep you motivated along the way. Instructors are working professionals who teach what they use every day. Lifetime access means you can revisit lessons whenever you need a refresher.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</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. Guided learning paths take you from beginner to job-ready step by step. We listen first, then build a plan around what you actually need.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</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. Thousands of students already trust us, and we work hard to keep it that way. Try the first lesson of any course for free before you decide.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Feb 20, 2026

NewEvery detail is handled by people who care about getting it right.
ImprovedMentors review your projects and give feedback within two days.
FixedShort quizzes after each lesson help new knowledge stick.

v3.1 Feb 8, 2026

NewEarn a certificate at the end of each course and share it with employers.
ImprovedEvery detail is handled by people who care about getting it right.
FixedThe mobile app downloads lessons, so you can learn on the train.

v3.0 Sep 14, 2026

NewMentors review your projects and give feedback within two days.
ImprovedGuided learning paths take you from beginner to job-ready step by step.
FixedFriendly people answer your questions quickly, by phone, chat or email.

v2.9 Oct 7, 2026

NewWe listen first, then build a plan around what you actually need.
ImprovedTry the first lesson of any course for free before you decide.
FixedThousands of students already trust us, and we work hard to keep it that way.

<div class="row g-3">
  <div class="col-3">
    <nav id="spy-nav-1213" class="nav nav-pills flex-column small">
      <a class="nav-link" href="#spy-1214">v3.2</a><a class="nav-link" href="#spy-1215">v3.1</a><a class="nav-link" href="#spy-1216">v3.0</a><a class="nav-link" href="#spy-1217">v2.9</a>
    </nav>
  </div>
  <div class="col-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-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">Feb 20, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Every detail is handled by people who care about getting it right.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>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>Short quizzes after each lesson help new knowledge stick.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Feb 8, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Earn a certificate at the end of each course and share it with employers.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Every detail is handled by people who care about getting it right.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>The mobile app downloads lessons, so you can learn on the train.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Sep 14, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Mentors review your projects and give feedback within two days.</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>Friendly people answer your questions quickly, by phone, chat or email.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Oct 7, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We listen first, then build a plan around what you actually need.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>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>Thousands of students already trust us, and we work hard to keep it that way.</li>
        </ul>
      </div>
    </div>
  </div>
</div>