Scrollspy

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

1In a navbar

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

Intro

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

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

Details

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

Short quizzes after each lesson help new knowledge stick. Study groups and a friendly forum keep you motivated along the way. Instructors are working professionals who teach what they use every day. The mobile app downloads lessons, so you can learn on the train.

Pricing

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. Lifetime access means you can revisit lessons whenever you need a refresher. Clear prices, honest advice and no surprises along the way.

Mentors review your projects and give feedback within two days. Short quizzes after each lesson help new knowledge stick. Friendly people answer your questions quickly, by phone, chat or email.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Haloara Kit</a>
  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link" href="#spy-1122">Intro</a></li>
    <li class="nav-item"><a class="nav-link" href="#spy-1123">Details</a></li>
    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">More</a><ul class="dropdown-menu"><li><a class="dropdown-item" href="#spy-1124">Pricing</a></li></ul></li>
  </ul>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1121" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1122" class="pb-3">
    <h3 class="h6">Intro</h3>
    <p class="small">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. Try the first lesson of any course for free before you decide. We measure success by how many students come back and tell their friends.</p>
    <p class="small">We listen first, then build a plan around what you actually need. Career coaches help with your CV, portfolio and interview practice. Every detail is handled by people who care about getting it right.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</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. Thousands of students already trust us, and we work hard to keep it that way.</p>
    <p class="small">Short quizzes after each lesson help new knowledge stick. Study groups and a friendly forum keep you motivated along the way. Instructors are working professionals who teach what they use every day. The mobile app downloads lessons, so you can learn on the train.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</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. Lifetime access means you can revisit lessons whenever you need a refresher. Clear prices, honest advice and no surprises along the way.</p>
    <p class="small">Mentors review your projects and give feedback within two days. Short quizzes after each lesson help new knowledge stick. Friendly people answer your questions quickly, by phone, chat or email.</p>
  </div>
</div>

2Horizontal pills

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

Step one

Our team has done this many times, so you never have to guess. Mentors review your projects and give feedback within two days. Instructors are working professionals who teach what they use every day.

Step two

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

Step three

Every detail is handled by people who care about getting it right. Career coaches help with your CV, portfolio and interview practice. 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.

Step four

Earn a certificate at the end of each course and share it with employers. Lifetime access means you can revisit lessons whenever you need a refresher. We listen first, then build a plan around what you actually need.

<nav id="spy-nav-1125" class="nav nav-pills mb-2 flex-wrap">
  <a class="nav-link" href="#spy-1126">Step one</a><a class="nav-link" href="#spy-1127">Step two</a><a class="nav-link" href="#spy-1128">Step three</a><a class="nav-link" href="#spy-1129">Step four</a>
</nav>
<div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1125" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1126" class="pb-3">
    <h3 class="h6">Step one</h3>
    <p class="small">Our team has done this many times, so you never have to guess. 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-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">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. Clear prices, honest advice and no surprises along the way.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">Every detail is handled by people who care about getting it right. Career coaches help with your CV, portfolio and interview practice. 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.</p>
  </div>
  <div id="spy-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">Earn a certificate at the end of each course and share it with employers. Lifetime access means you can revisit lessons whenever you need a refresher. We listen first, then build a plan around what you actually need.</p>
  </div>
</div>

3Vertical pills

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

Study groups

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

Mentoring

Guided learning paths take you from beginner to job-ready step by step. Try the first lesson of any course for free before you decide. Mentors review your projects and give feedback within two days.

Career coaching

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

Questions

The mobile app downloads lessons, so you can learn on the train. Instructors are working professionals who teach what they use every day. We measure success by how many students come back and tell their friends.

<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">Study groups</a><a class="nav-link" href="#spy-1132">Mentoring</a><a class="nav-link" href="#spy-1133">Career coaching</a><a class="nav-link" href="#spy-1134">Questions</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1130" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1131" class="pb-3">
        <h3 class="h6">Study groups</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. Learn on your schedule, with lessons that fit into a lunch break. Study groups and a friendly forum keep you motivated along the way.</p>
      </div>
      <div id="spy-1132" class="pb-3">
        <h3 class="h6">Mentoring</h3>
        <p class="small">Guided learning paths take you from beginner to job-ready step by step. Try the first lesson of any course for free before you decide. Mentors review your projects and give feedback within two days.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Career coaching</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. 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 id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</h3>
        <p class="small">The mobile app downloads lessons, so you can learn on the train. Instructors are working professionals who teach what they use every day. We measure success by how many students come back and tell their friends.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

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

Install

Every course is built around hands-on projects you can add to your portfolio. Short quizzes after each lesson help new knowledge stick. Earn a certificate at the end of each course and share it with employers. We listen first, then build a plan around what you actually need.

Configure

Lifetime access means you can revisit lessons whenever you need a refresher. 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. Clear prices, honest advice and no surprises along the way.

Usage

Our team has done this many times, so you never have to guess. Career coaches help with your CV, portfolio and interview practice. Learn on your schedule, with lessons that fit into a lunch break. Short quizzes after each lesson help new knowledge stick.

Examples

Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. Guided learning paths take you from beginner to job-ready step by step.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1135" class="h-100 flex-column align-items-stretch">
      <nav class="nav nav-pills flex-column">
        <a class="nav-link" href="#spy-1136">Getting started</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#spy-1137">Install</a><a class="nav-link ms-3 my-1" href="#spy-1138">Configure</a>
        </nav>
        <a class="nav-link" href="#spy-1139">Usage</a>
        <nav class="nav nav-pills flex-column">
          <a class="nav-link ms-3 my-1" href="#spy-1140">Examples</a>
        </nav>
      </nav>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:260px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1135" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1136" class="pb-3">
        <h3 class="h6">Getting started</h3>
        <p class="small">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. Every detail is handled by people who care about getting it right.</p>
      </div>
      <div id="spy-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Every course is built around hands-on projects you can add to your portfolio. Short quizzes after each lesson help new knowledge stick. Earn a certificate at the end of each course and share it with employers. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">Lifetime access means you can revisit lessons whenever you need a refresher. 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. Clear prices, honest advice and no surprises along the way.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</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. Learn on your schedule, with lessons that fit into a lunch break. Short quizzes after each lesson help new knowledge stick.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email. Guided learning paths take you from beginner to job-ready step by step.</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. 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. Every course is built around hands-on projects you can add to your portfolio.

Midday

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

Afternoon

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. We measure success by how many students come back and tell their friends. Mentors review your projects and give feedback within two days.

Evening

Start in minutes and get help from a real person whenever you need it. Instructors are working professionals who teach what they use every day. Career coaches help with your CV, portfolio and interview practice. Every detail is handled by people who care about getting it right.

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1141" class="list-group">
      <a class="list-group-item list-group-item-action" href="#spy-1142">Morning</a><a class="list-group-item list-group-item-action" href="#spy-1143">Midday</a><a class="list-group-item list-group-item-action" href="#spy-1144">Afternoon</a><a class="list-group-item list-group-item-action" href="#spy-1145">Evening</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1141" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1142" class="pb-3">
        <h3 class="h6">Morning</h3>
        <p class="small">Our team has done this many times, so you never have to guess. We keep things simple, so you can focus on what matters to you. 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 id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">The mobile app downloads lessons, so you can learn on the train. Clear prices, honest advice and no surprises along the way. 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.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</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. We measure success by how many students come back and tell their friends. Mentors review your projects and give feedback within two days.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <p class="small">Start in minutes and get help from a real person whenever you need it. Instructors are working professionals who teach what they use every day. Career coaches help with your CV, portfolio and interview practice. Every detail is handled by people who care about getting it right.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

Career coaches help with your CV, portfolio and interview practice. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. Lifetime access means you can revisit lessons whenever you need a refresher.

Beta

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

Gamma

Learn on your schedule, with lessons that fit into a lunch break. 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. Thousands of students already trust us, and we work hard to keep it that way.

<div class="row g-3 cb-spy-plain">
  <div class="col-4">
    <div id="spy-nav-1146" class="d-flex flex-column gap-2 small">
      <a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1147">Alpha</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1148">Beta</a><a class="p-1 rounded link-body-emphasis text-decoration-none" href="#spy-1149">Gamma</a>
    </div>
  </div>
  <div class="col-8">
    <div class="position-relative border rounded p-3" style="height:200px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1146" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1147" class="pb-3">
        <h3 class="h6">Alpha</h3>
        <p class="small">Career coaches help with your CV, portfolio and interview practice. Friendly people answer your questions quickly, by phone, chat or email. We listen first, then build a plan around what you actually need. Lifetime access means you can revisit lessons whenever you need a refresher.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</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. Our team has done this many times, so you never have to guess.</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. 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. Thousands of students already trust us, and we work hard to keep it that way.</p>
      </div>
    </div>
  </div>
</div>

7Underline tabs

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

Overview

Guided learning paths take you from beginner to job-ready step by step. Start in minutes and get help from a real person whenever you need it. Short quizzes after each lesson help new knowledge stick.

Features

Study groups and a friendly forum keep you motivated along the way. Instructors are working professionals who teach what they use every day. We measure success by how many students come back and tell their friends.

Reviews

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

FAQ

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

<nav id="spy-nav-1150" class="nav nav-underline mb-2 border-bottom">
  <a class="nav-link" href="#spy-1151">Overview</a><a class="nav-link" href="#spy-1152">Features</a><a class="nav-link" href="#spy-1153">Reviews</a><a class="nav-link" href="#spy-1154">FAQ</a>
</nav>
<div class="position-relative border rounded p-3 border-0 px-0" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1150" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1151" class="pb-3">
    <h3 class="h6">Overview</h3>
    <p class="small">Guided learning paths take you from beginner to job-ready step by step. Start in minutes and get help from a real person whenever you need it. Short quizzes after each lesson help new knowledge stick.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</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. We measure success by how many students come back and tell their friends.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <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. 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-1154" class="pb-3">
    <h3 class="h6">FAQ</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. 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.</p>
  </div>
</div>

8Table of contents on the right

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

Summary

Every detail is handled by people who care about getting it right. Earn a certificate at the end of each course and share it with employers. Friendly people answer your questions quickly, by phone, chat or email. Start in minutes and get help from a real person whenever you need it.

Background

Career coaches help with your CV, portfolio and interview practice. Thousands of students already trust us, and we work hard to keep it that way. Instructors are working professionals who teach what they use every day.

Method

Clear prices, honest advice and no surprises along the way. Learn on your schedule, with lessons that fit into a lunch break. Our team has done this many times, so you never have to guess.

Results

Every course is built around hands-on projects you can add to your portfolio. Study groups and a friendly forum keep you motivated along the way. We listen first, then build a plan around what you actually need.

On this page

<div class="row g-3">
  <div class="col-md-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1155" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1156" class="pb-3">
        <h3 class="h6">Summary</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Earn a certificate at the end of each course and share it with employers. Friendly people answer your questions quickly, by phone, chat or email. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</h3>
        <p class="small">Career coaches help with your CV, portfolio and interview practice. Thousands of students already trust us, and we work hard to keep it that way. Instructors are working professionals who teach what they use every day.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Learn on your schedule, with lessons that fit into a lunch break. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1159" class="pb-3">
        <h3 class="h6">Results</h3>
        <p class="small">Every course is built around hands-on projects you can add to your portfolio. Study groups and a friendly forum keep you motivated along the way. We 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

Mentors review your projects and give feedback within two days. Short quizzes after each lesson help new knowledge stick. 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.

Set up your profile

Learn on your schedule, with lessons that fit into a lunch break. Study groups and a friendly forum keep you motivated along the way. Short quizzes after each lesson help new knowledge stick. Our team has done this many times, so you never have to guess.

Invite the team

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

Go live

Career coaches help with your CV, portfolio and interview practice. Instructors are working professionals who teach what they use every day. We measure success by how many students come back and tell their friends. Mentors review your projects and give feedback within two days.

<div class="row g-3">
  <div class="col-sm-5">
    <div id="spy-nav-1160" class="list-group list-group-numbered">
      <a class="list-group-item list-group-item-action" href="#spy-1161">Create an account</a><a class="list-group-item list-group-item-action" href="#spy-1162">Set up your profile</a><a class="list-group-item list-group-item-action" href="#spy-1163">Invite the team</a><a class="list-group-item list-group-item-action" href="#spy-1164">Go live</a>
    </div>
  </div>
  <div class="col-sm-7">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1160" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1161" class="pb-3">
        <h3 class="h6">Create an account</h3>
        <p class="small">Mentors review your projects and give feedback within two days. Short quizzes after each lesson help new knowledge stick. 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-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">Learn on your schedule, with lessons that fit into a lunch break. Study groups and a friendly forum keep you motivated along the way. Short quizzes after each lesson help new knowledge stick. Our team has done this many times, so you never have to guess.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">Every course is built around hands-on projects you can add to your portfolio. Lifetime access means you can revisit lessons whenever you need a refresher. Try the first lesson of any course for free before you decide.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">Career coaches help with your CV, portfolio and interview practice. Instructors are working professionals who teach what they use every day. We measure success by how many students come back and tell their friends. Mentors review your projects and give feedback within two days.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

Headlines people actually click

Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. Guided learning paths take you from beginner to job-ready step by step.

2024

How we build a course, start to finish

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

2025

How to learn a new skill in 30 days

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

2026

What our students asked us most

Our team has done this many times, so you never have to guess. Instructors are working professionals who teach what they use every day. Study groups and a friendly forum keep you motivated along the way.

<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1165" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1166" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2023</span>
    <h3 class="h6">Headlines people actually click</h3>
    <p class="small mb-0">Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. Guided learning paths take you from beginner to job-ready step by step.</p>
  </div>
  <div id="spy-1167" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2024</span>
    <h3 class="h6">How we build a course, start to finish</h3>
    <p class="small mb-0">Clear prices, honest advice and no surprises along the way. 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.</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">How to learn a new skill in 30 days</h3>
    <p class="small mb-0">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. 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-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">What our students asked us most</h3>
    <p class="small mb-0">Our team has done this many times, so you never have to guess. 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>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

A beginner's guide to getting started?: Try the first lesson of any course for free before you decide.
Building a portfolio that gets interviews?: Every detail is handled by people who care about getting it right.
The small habits that make a big difference?: We measure success by how many students come back and tell their friends.

Shipping

From teacher to UX designer: a career story?: Guided learning paths take you from beginner to job-ready step by step.
How to stay motivated when learning online?: Lifetime access means you can revisit lessons whenever you need a refresher.
Five study habits that actually work?: Friendly people answer your questions quickly, by phone, chat or email.

Returns

What employers look for in junior analysts?: Every course is built around hands-on projects you can add to your portfolio.
Our favourite tips for busy weeks?: Short quizzes after each lesson help new knowledge stick.
Five things we learned this year?: We keep things simple, so you can focus on what matters to you.

<div class="row g-3">
  <div class="col-sm-3">
    <nav id="spy-nav-1170" class="nav nav-pills flex-sm-column">
      <a class="nav-link" href="#spy-1171">Orders</a><a class="nav-link" href="#spy-1172">Shipping</a><a class="nav-link" href="#spy-1173">Returns</a>
    </nav>
  </div>
  <div class="col-sm-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1170" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1171" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Orders</h3>
        <dl>
          <dt class="small">A beginner&#39;s guide to getting started?</dt>
          <dd class="small text-body-secondary">Try the first lesson of any course for free before you decide.</dd>
          <dt class="small">Building a portfolio that gets interviews?</dt>
          <dd class="small text-body-secondary">Every detail is handled by people who care about getting it right.</dd>
          <dt class="small">The small habits that make a big difference?</dt>
          <dd class="small text-body-secondary">We measure success by how many students come back and tell their friends.</dd>
        </dl>
      </div>
      <div 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">From teacher to UX designer: a career story?</dt>
          <dd class="small text-body-secondary">Guided learning paths take you from beginner to job-ready step by step.</dd>
          <dt class="small">How to stay motivated when learning online?</dt>
          <dd class="small text-body-secondary">Lifetime access means you can revisit lessons whenever you need a refresher.</dd>
          <dt class="small">Five study habits that actually work?</dt>
          <dd class="small text-body-secondary">Friendly people answer your questions quickly, by phone, chat or email.</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">What employers look for in junior analysts?</dt>
          <dd class="small text-body-secondary">Every course is built around hands-on projects you can add to your portfolio.</dd>
          <dt class="small">Our favourite tips for busy weeks?</dt>
          <dd class="small text-body-secondary">Short quizzes after each lesson help new knowledge stick.</dd>
          <dt class="small">Five things we learned this year?</dt>
          <dd class="small text-body-secondary">We keep things simple, so you can focus on what matters to you.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

The mobile app downloads lessons, so you can learn on the train. Clear prices, honest advice and no surprises along the way. Earn a certificate at the end of each course and share it with employers. Career coaches help with your CV, portfolio and interview practice.

Battery

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

Connectivity

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

Security

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

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1174" class="nav nav-pills flex-column">
      <a class="nav-link d-flex align-items-center gap-2" href="#spy-1175"><i class="bi bi-cpu" aria-hidden="true"></i>Performance</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1176"><i class="bi bi-battery-half" aria-hidden="true"></i>Battery</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1177"><i class="bi bi-wifi" aria-hidden="true"></i>Connectivity</a><a class="nav-link d-flex align-items-center gap-2" href="#spy-1178"><i class="bi bi-shield-check" aria-hidden="true"></i>Security</a>
    </nav>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1174" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1175" class="pb-3">
        <h3 class="h6">Performance</h3>
        <p class="small">The mobile app downloads lessons, so you can learn on the train. Clear prices, honest advice and no surprises along the way. Earn a certificate at the end of each course and share it with employers. Career coaches help with your CV, portfolio and interview practice.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">Thousands of students already trust us, and we work hard to keep it that way. Learn on your schedule, with lessons that fit into a lunch break. We listen first, then build a plan around what you actually need. Earn a certificate at the end of each course and share it with employers.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</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. Clear prices, honest advice and no surprises along the way. Learn on your schedule, with lessons that fit into a lunch break.</p>
      </div>
      <div id="spy-1178" class="pb-3">
        <h3 class="h6">Security</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. Every course is built around hands-on projects you can add to your portfolio. Try the first lesson of any course for free before you decide.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$17.47 / mo

Expert mentors
Hands-on projects
Lifetime access

Team

$47.63 / mo

Community forum
Quizzes
Community forum

Business

$67.85 / mo

Quizzes
Community forum
Community forum

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

14Chapter reader

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

Chapter 1: Tips for learning while working full time

Short quizzes after each lesson help new knowledge stick. Every detail is handled by people who care about getting it right. Career coaches help with your CV, portfolio and interview practice. We measure success by how many students come back and tell their friends.

Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess. Instructors are working professionals who teach what they use every day. We listen first, then build a plan around what you actually need.

Chapter 2: Looking back at a busy season

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

Try the first lesson of any course for free before you decide. Instructors are working professionals who teach what they use every day. Friendly people answer your questions quickly, by phone, chat or email.

Chapter 3: Our most popular courses this year

Short quizzes after each lesson help new knowledge stick. 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. 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. Thousands of students already trust us, and we work hard to keep it that way. Study groups and a friendly forum keep you motivated along the way. Lifetime access means you can revisit lessons whenever you need a refresher.

Chapter 4: How to choose the right course

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. Guided learning paths take you from beginner to job-ready step by step.

Career coaches help with your CV, portfolio and interview practice. We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way.

<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
  <a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="position-relative border rounded p-3 border-top-0 rounded-top-0 lh-lg" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1183" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1184" class="pb-3">
    <h3 class="h6">Chapter 1: Tips for learning while working full time</h3>
    <p class="small">Short quizzes after each lesson help new knowledge stick. Every detail is handled by people who care about getting it right. Career coaches help with your CV, portfolio and interview practice. We measure success by how many students come back and tell their friends.</p>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Our team has done this many times, so you never have to guess. Instructors are working professionals who teach what they use every day. We listen first, then build a plan around what you actually need.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: Looking back at a busy season</h3>
    <p class="small">Mentors review your projects and give feedback within two days. Study groups and a friendly forum keep you motivated along the way. Lifetime access means you can revisit lessons whenever you need a refresher. Start in minutes and get help from a real person whenever you need it.</p>
    <p class="small">Try the first lesson of any course for free before you decide. 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 id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: Our most popular courses this year</h3>
    <p class="small">Short quizzes after each lesson help new knowledge stick. We measure success by how many students come back and tell their friends. 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>
    <p class="small">The mobile app downloads lessons, so you can learn on the train. Thousands of students already trust us, and we work hard to keep it that way. Study groups and a friendly forum keep you motivated along the way. Lifetime access means you can revisit lessons whenever you need a refresher.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: How to choose the right course</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. Guided learning paths take you from beginner to job-ready step by step.</p>
    <p class="small">Career coaches help with your CV, portfolio and interview practice. We keep things simple, so you can focus on what matters to you. Clear prices, honest advice and no surprises along the way.</p>
  </div>
</div>

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. Every course is built around hands-on projects you can add to your portfolio. Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need.

Notifications

Product news

Weekly digest

Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. Career coaches help with your CV, portfolio and interview practice. Short quizzes after each lesson help new knowledge stick.

Privacy

Hide my profile from search

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

<div class="row g-3">
  <div class="col-sm-4">
    <div id="spy-nav-1188" class="list-group list-group-flush border rounded">
      <a class="list-group-item list-group-item-action" href="#spy-1189">Profile</a><a class="list-group-item list-group-item-action" href="#spy-1190">Notifications</a><a class="list-group-item list-group-item-action" href="#spy-1191">Privacy</a>
    </div>
  </div>
  <div class="col-sm-8">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1188" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1189" class="pb-3">
        <h3 class="h6">Profile</h3>
        <div class="mb-2">
          <label for="spy-in-1192" class="form-label small">Display name</label>
          <input class="form-control form-control-sm" id="spy-in-1192" value="Sofia Patel">
        </div>
        <div class="mb-2">
          <label for="spy-in-1193" class="form-label small">City</label>
          <input class="form-control form-control-sm" id="spy-in-1193" value="Austin">
        </div>
        <p class="small">Mentors review your projects and give feedback within two days. Every course is built around hands-on projects you can add to your portfolio. Every detail is handled by people who care about getting it right. We listen first, then build a plan around what you actually need.</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">Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. Career coaches help with your CV, portfolio and interview practice. Short quizzes after each lesson help new knowledge stick.</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">Study groups and a friendly forum keep you motivated along the way. Learn on your schedule, with lessons that fit into a lunch break. 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>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Engineering

Lucas Alvarez
QA Engineer
Felix Fischer
Backend Engineer
Leo Moreau
Product Designer

Legal

Diego Varga
QA Engineer
Lucas Okafor
Customer Success
Noah Larsen
Frontend Engineer

Design

Mateo Hughes
Product Designer
Ella Whitaker
Operations Manager
Finn Rossi
Customer Success

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Engineering</a><a class="nav-link" href="#spy-1199">Legal</a><a class="nav-link" href="#spy-1200">Design</a>
</nav>
<div class="position-relative border rounded p-3" style="height:230px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1197" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1198" class="pb-3">
    <h3 class="h6">Engineering</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="Lucas Alvarez"><div><div class="small fw-semibold">Lucas Alvarez</div><div class="small text-body-secondary">QA Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="36" height="36" alt="Felix Fischer"><div><div class="small fw-semibold">Felix Fischer</div><div class="small text-body-secondary">Backend Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-circle" width="36" height="36" alt="Leo Moreau"><div><div class="small fw-semibold">Leo Moreau</div><div class="small text-body-secondary">Product Designer</div></div></li>
    </ul>
  </div>
  <div id="spy-1199" class="pb-3">
    <h3 class="h6">Legal</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-9.svg" class="rounded-circle" width="36" height="36" alt="Diego Varga"><div><div class="small fw-semibold">Diego Varga</div><div class="small text-body-secondary">QA Engineer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-1.svg" class="rounded-circle" width="36" height="36" alt="Lucas Okafor"><div><div class="small fw-semibold">Lucas Okafor</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-5.svg" class="rounded-circle" width="36" height="36" alt="Noah Larsen"><div><div class="small fw-semibold">Noah Larsen</div><div class="small text-body-secondary">Frontend Engineer</div></div></li>
    </ul>
  </div>
  <div id="spy-1200" class="pb-3">
    <h3 class="h6">Design</h3>
    <ul class="list-unstyled">
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-7.svg" class="rounded-circle" width="36" height="36" alt="Mateo Hughes"><div><div class="small fw-semibold">Mateo Hughes</div><div class="small text-body-secondary">Product Designer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-2.svg" class="rounded-circle" width="36" height="36" alt="Ella Whitaker"><div><div class="small fw-semibold">Ella Whitaker</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-2.svg" class="rounded-circle" width="36" height="36" alt="Finn Rossi"><div><div class="small fw-semibold">Finn Rossi</div><div class="small text-body-secondary">Customer Success</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Design

Project management$155.00
Photography$93.99
Python basics$120.99

Marketing

Project management$152.00
UX fundamentals$160.99
Data analysis$219.00

Lifestyle

Video editing$113.99
Public speaking$72.00
Photography$102.00

<nav id="spy-nav-1201" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1202">Design</a><a class="nav-link" href="#spy-1203">Marketing</a><a class="nav-link" href="#spy-1204">Lifestyle</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1201" data-bs-smooth-scroll="true" tabindex="0">
  <div id="spy-1202" class="pb-3">
    <h3 class="h6">Design</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Project management</span><span class="fw-semibold">$155.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Photography</span><span class="fw-semibold">$93.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Python basics</span><span class="fw-semibold">$120.99</span></li>
    </ul>
  </div>
  <div id="spy-1203" 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">$152.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>UX fundamentals</span><span class="fw-semibold">$160.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Data analysis</span><span class="fw-semibold">$219.00</span></li>
    </ul>
  </div>
  <div id="spy-1204" 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">$113.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Public speaking</span><span class="fw-semibold">$72.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Photography</span><span class="fw-semibold">$102.00</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

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. The mobile app downloads lessons, so you can learn on the train. Instructors are working professionals who teach what they use every day.

This week

Mentors review your projects and give feedback within two days. Thousands of students already trust us, and we work hard to keep it that way. 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.

Later

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. 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-bs-spy="scroll" data-bs-target="#spy-nav-1205" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1206" class="pb-3">
        <h3 class="h6">Today</h3>
        <p class="small">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. The mobile app downloads lessons, so you can learn on the train. 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">Mentors review your projects and give feedback within two days. Thousands of students already trust us, and we work hard to keep it that way. 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-1208" class="pb-3">
        <h3 class="h6">Later</h3>
        <p class="small">Our team has done this many times, so you never have to guess. We listen first, then build a plan around what you actually need. Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

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

Orbit

Try the first lesson of any course for free before you decide. Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email.

Landing

Learn on your schedule, with lessons that fit into a lunch break. Study groups and a friendly forum keep you motivated along the way. Lifetime access means you can revisit lessons whenever you need a refresher. We listen first, then build a plan around what you actually need.

<div data-bs-theme="dark" class="bg-dark text-body rounded p-3">
  <nav id="spy-nav-1209" class="nav nav-pills mb-2">
    <a class="nav-link" href="#spy-1210">Launch</a><a class="nav-link" href="#spy-1211">Orbit</a><a class="nav-link" href="#spy-1212">Landing</a>
  </nav>
  <div class="position-relative border rounded p-3 border-secondary" style="height:200px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1209" data-bs-smooth-scroll="true" tabindex="0">
    <div id="spy-1210" class="pb-3">
      <h3 class="h6">Launch</h3>
      <p class="small">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. Mentors review your projects and give feedback within two days. Every course is built around hands-on projects you can add to your portfolio.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">Try the first lesson of any course for free before you decide. Our team has done this many times, so you never have to guess. Friendly people answer your questions quickly, by phone, chat or email.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Learn on your schedule, with lessons that fit into a lunch break. Study groups and a friendly forum keep you motivated along the way. Lifetime access means you can revisit lessons whenever you need a refresher. We listen first, then build a plan around what you actually need.</p>
    </div>
  </div>
</div>

20Changelog

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

v3.2 Apr 20, 2026

NewEvery detail is handled by people who care about getting it right.
ImprovedStart in minutes and get help from a real person whenever you need it.
FixedThe mobile app downloads lessons, so you can learn on the train.

v3.1 Apr 29, 2026

NewShort quizzes after each lesson help new knowledge stick.
ImprovedWe keep things simple, so you can focus on what matters to you.
FixedGuided learning paths take you from beginner to job-ready step by step.

v3.0 Aug 10, 2026

NewThousands of students already trust us, and we work hard to keep it that way.
ImprovedWe measure success by how many students come back and tell their friends.
FixedInstructors are working professionals who teach what they use every day.

v2.9 Jul 29, 2026

NewClear prices, honest advice and no surprises along the way.
ImprovedEarn a certificate at the end of each course and share it with employers.
FixedCareer coaches help with your CV, portfolio and interview practice.

<div class="row g-3">
  <div class="col-3">
    <nav id="spy-nav-1213" class="nav nav-pills flex-column small">
      <a class="nav-link" href="#spy-1214">v3.2</a><a class="nav-link" href="#spy-1215">v3.1</a><a class="nav-link" href="#spy-1216">v3.0</a><a class="nav-link" href="#spy-1217">v2.9</a>
    </nav>
  </div>
  <div class="col-9">
    <div class="position-relative border rounded p-3" style="height:240px;overflow-y:auto" data-bs-spy="scroll" data-bs-target="#spy-nav-1213" data-bs-smooth-scroll="true" tabindex="0">
      <div id="spy-1214" class="pb-3">
        <h3 class="h6">v3.2 <small class="text-body-secondary fw-normal">Apr 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>Start in minutes and get help from a real person whenever you need it.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>The mobile app downloads lessons, so you can learn on the train.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Apr 29, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Short quizzes after each lesson help new knowledge stick.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We keep things simple, so you can focus on what matters to you.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Guided learning paths take you from beginner to job-ready step by step.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Aug 10, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Thousands of students already trust us, and we work hard to keep it that way.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>We measure success by how many students come back and tell their friends.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Instructors are working professionals who teach what they use every day.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Jul 29, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Clear prices, honest advice and no surprises along the way.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Earn a certificate at the end of each course and share it with employers.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Career coaches help with your CV, portfolio and interview practice.</li>
        </ul>
      </div>
    </div>
  </div>
</div>