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

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

We measure success by how many students come back and tell their friends. Lifetime access means you can revisit lessons whenever you need a refresher. The mobile app downloads lessons, so you can learn on the train.

Details

We keep things simple, so you can focus on what matters to you. Earn a certificate at the end of each course and share it with employers. Start in minutes and get help from a real person whenever you need it. Study groups and a friendly forum keep you motivated along the way.

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

Pricing

Clear prices, honest advice and no surprises along the way. Thousands of students already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need. 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. Mentors review your projects and give feedback within two days. Learn on your schedule, with lessons that fit into a lunch break.

<nav id="spy-nav-1121" class="navbar bg-body-tertiary px-3 mb-3 rounded">
  <a class="navbar-brand" href="#">Cora Nest</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">Instructors are working professionals who teach what they use every day. 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.</p>
    <p class="small">We measure success by how many students come back and tell their friends. Lifetime access means you can revisit lessons whenever you need a refresher. The mobile app downloads lessons, so you can learn on the train.</p>
  </div>
  <div id="spy-1123" class="pb-3">
    <h3 class="h6">Details</h3>
    <p class="small">We keep things simple, so you can focus on what matters to you. Earn a certificate at the end of each course and share it with employers. Start in minutes and get help from a real person whenever you need it. Study groups and a friendly forum keep you motivated along the way.</p>
    <p class="small">Career coaches help with your CV, portfolio and interview practice. Our team has done this many times, so you never have to guess. Short quizzes after each lesson help new knowledge stick.</p>
  </div>
  <div id="spy-1124" class="pb-3">
    <h3 class="h6">Pricing</h3>
    <p class="small">Clear prices, honest advice and no surprises along the way. Thousands of students already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right.</p>
    <p class="small">Every course is built around hands-on projects you can add to your portfolio. Mentors review your projects and give feedback within two days. Learn on your schedule, with lessons that fit into a lunch break.</p>
  </div>
</div>

2Horizontal pills

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

Step one

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

Step two

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. Clear prices, honest advice and no surprises along the way. Earn a certificate at the end of each course and share it with employers.

Step three

Short quizzes after each lesson help new knowledge stick. Our team has done this many times, so you never have to guess. Try the first lesson of any course for free before you decide. Every course is built around hands-on projects you can add to your portfolio.

Step four

Instructors are working professionals who teach what they use every day. Lifetime access means you can revisit lessons whenever you need a refresher. Career coaches help with your CV, portfolio and interview practice. We keep things simple, so you can focus on what matters to you.

<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">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. Study groups and a friendly forum keep you motivated along the way.</p>
  </div>
  <div id="spy-1127" class="pb-3">
    <h3 class="h6">Step two</h3>
    <p class="small">We measure success by how many students come back and tell their friends. 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.</p>
  </div>
  <div id="spy-1128" class="pb-3">
    <h3 class="h6">Step three</h3>
    <p class="small">Short quizzes after each lesson help new knowledge stick. Our team has done this many times, so you never have to guess. 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-1129" class="pb-3">
    <h3 class="h6">Step four</h3>
    <p class="small">Instructors are working professionals who teach what they use every day. Lifetime access means you can revisit lessons whenever you need a refresher. Career coaches help with your CV, portfolio and interview practice. We keep things simple, so you can focus on what matters to you.</p>
  </div>
</div>

3Vertical pills

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

Online courses

Every detail is handled by people who care about getting it right. Mentors review your projects and give feedback within two days. Learn on your schedule, with lessons that fit into a lunch break.

Mentoring

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

Live workshops

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.

Questions

Start in minutes and get help from a real person whenever you need it. Career coaches help with your CV, portfolio and interview practice. The mobile app downloads lessons, so you can learn on the train. Clear prices, honest advice and no surprises along the way.

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-1130" class="nav nav-pills flex-column">
      <a class="nav-link" href="#spy-1131">Online courses</a><a class="nav-link" href="#spy-1132">Mentoring</a><a class="nav-link" href="#spy-1133">Live workshops</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">Online courses</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Mentors review your projects and give feedback within two days. Learn on your schedule, with lessons that fit into a lunch break.</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. Thousands of students already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1133" class="pb-3">
        <h3 class="h6">Live workshops</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.</p>
      </div>
      <div id="spy-1134" class="pb-3">
        <h3 class="h6">Questions</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. The mobile app downloads lessons, so you can learn on the train. Clear prices, honest advice and no surprises along the way.</p>
      </div>
    </div>
  </div>
</div>

4Nested navigation

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

Getting started

Thousands of students already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need. Instructors are working professionals who teach what they use every day. Friendly people answer your questions quickly, by phone, chat or email.

Install

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

Configure

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

Usage

Every detail is handled by people who care about getting it right. We measure success by how many students come back and tell their friends. Learn on your schedule, with lessons that fit into a lunch break.

Examples

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

<div class="row g-3">
  <div class="col-sm-4">
    <nav id="spy-nav-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">Thousands of students already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need. 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-1137" class="pb-3">
        <h3 class="h6">Install</h3>
        <p class="small">Lifetime access means you can revisit lessons whenever you need a refresher. Guided learning paths take you from beginner to job-ready step by step. Earn a certificate at the end of each course and share it with employers.</p>
      </div>
      <div id="spy-1138" class="pb-3">
        <h3 class="h6">Configure</h3>
        <p class="small">Mentors review your projects and give feedback within two days. Try the first lesson of any course for free before you decide. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1139" class="pb-3">
        <h3 class="h6">Usage</h3>
        <p class="small">Every detail is handled by people who care about getting it right. We measure success by how many students come back and tell their friends. Learn on your schedule, with lessons that fit into a lunch break.</p>
      </div>
      <div id="spy-1140" class="pb-3">
        <h3 class="h6">Examples</h3>
        <p class="small">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. Mentors review your projects and give feedback within two days. Earn a certificate at the end of each course and share it with employers.</p>
      </div>
    </div>
  </div>
</div>

5List group

List group items as the spy menu - clear active state with no extra styling.

Morning Midday Afternoon Evening

Morning

Midday

Friendly people answer your questions quickly, by phone, chat or email. Try the first lesson of any course for free before you decide. Start in minutes and get help from a real person whenever you need it.

Afternoon

Clear prices, honest advice and no surprises along the way. Guided learning paths take you from beginner to job-ready step by step. Career coaches help with your CV, portfolio and interview practice. We measure success by how many students come back and tell their friends.

Evening

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

<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">Thousands of students already trust us, and we work hard to keep it that way. We listen first, then build a plan around what you actually need. Instructors are working professionals who teach what they use every day.</p>
      </div>
      <div id="spy-1143" class="pb-3">
        <h3 class="h6">Midday</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Try the first lesson of any course for free before you decide. Start in minutes and get help from a real person whenever you need it.</p>
      </div>
      <div id="spy-1144" class="pb-3">
        <h3 class="h6">Afternoon</h3>
        <p class="small">Clear prices, honest advice and no surprises along the way. Guided learning paths take you from beginner to job-ready step by step. Career coaches help with your CV, portfolio and interview practice. We measure success by how many students come back and tell their friends.</p>
      </div>
      <div id="spy-1145" class="pb-3">
        <h3 class="h6">Evening</h3>
        <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. 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.</p>
      </div>
    </div>
  </div>
</div>

6Simple anchors

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

Alpha Beta Gamma

Alpha

The mobile app downloads lessons, so you can learn on the train. We keep things simple, so you can focus on what matters to you. Learn on your schedule, with lessons that fit into a lunch break.

Beta

Short quizzes after each lesson help new knowledge stick. Lifetime access means you can revisit lessons whenever you need a refresher. Our team has done this many times, so you never have to guess. Earn a certificate at the end of each course and share it with employers.

Gamma

Learn on your schedule, with lessons that fit into a lunch break. Every course is built around hands-on projects you can add to your portfolio. 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">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. Learn on your schedule, with lessons that fit into a lunch break.</p>
      </div>
      <div id="spy-1148" class="pb-3">
        <h3 class="h6">Beta</h3>
        <p class="small">Short quizzes after each lesson help new knowledge stick. Lifetime access means you can revisit lessons whenever you need a refresher. Our team has done this many times, so you never have to guess. Earn a certificate at the end of each course and share it with employers.</p>
      </div>
      <div id="spy-1149" class="pb-3">
        <h3 class="h6">Gamma</h3>
        <p class="small">Learn on your schedule, with lessons that fit into a lunch break. Every course is built around hands-on projects you can add to your portfolio. 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

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

Features

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

Reviews

Instructors are working professionals who teach what they use every day. We listen first, then build a plan around what you actually need. Career coaches help with your CV, portfolio and interview practice. The mobile app downloads lessons, so you can learn on the train.

FAQ

Guided learning paths take you from beginner to job-ready step by step. Short quizzes after each lesson help new knowledge stick. Study groups and a friendly forum keep you motivated along the way. Lifetime access means you can revisit lessons whenever you need a refresher.

<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">Start in minutes and get help from a real person whenever you need it. Clear prices, honest advice and no surprises along the way. 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.</p>
  </div>
  <div id="spy-1152" class="pb-3">
    <h3 class="h6">Features</h3>
    <p class="small">Friendly people answer your questions quickly, by phone, chat or email. 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. Every detail is handled by people who care about getting it right.</p>
  </div>
  <div id="spy-1153" class="pb-3">
    <h3 class="h6">Reviews</h3>
    <p class="small">Instructors are working professionals who teach what they use every day. We listen first, then build a plan around what you actually need. Career coaches help with your CV, portfolio and interview practice. The mobile app downloads lessons, so you can learn on the train.</p>
  </div>
  <div id="spy-1154" class="pb-3">
    <h3 class="h6">FAQ</h3>
    <p class="small">Guided learning paths take you from beginner to job-ready step by step. Short quizzes after each lesson help new knowledge stick. 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>

8Table of contents on the right

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

Summary

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. We keep things simple, so you can focus on what matters to you. Every course is built around hands-on projects you can add to your portfolio.

Background

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

Method

Study groups and a friendly forum keep you motivated along the way. Lifetime access means you can revisit lessons whenever you need a refresher. Friendly people answer your questions quickly, by phone, chat or email.

Results

Clear prices, honest advice and no surprises along the way. Mentors review your projects and give feedback within two days. Earn a certificate at the end of each course and share it with employers.

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">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. We keep things simple, so you can focus on what matters to you. Every course is built around hands-on projects you can add to your portfolio.</p>
      </div>
      <div id="spy-1157" class="pb-3">
        <h3 class="h6">Background</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. Short quizzes after each lesson help new knowledge stick.</p>
      </div>
      <div id="spy-1158" class="pb-3">
        <h3 class="h6">Method</h3>
        <p class="small">Study groups and a friendly forum keep you motivated along the way. Lifetime access means you can revisit lessons whenever you need a refresher. Friendly people answer your questions quickly, by phone, chat or email.</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. Mentors review your projects and give feedback within two days. Earn a certificate at the end of each course and share it with employers.</p>
      </div>
    </div>
  </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

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

Set up your profile

Our team has done this many times, so you never have to guess. Try the first lesson of any course for free before you decide. Career coaches help with your CV, portfolio and interview practice. We listen first, then build a plan around what you actually need.

Invite the team

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

Go live

Guided learning paths take you from beginner to job-ready step by step. Lifetime access means you can revisit lessons whenever you need a refresher. Short quizzes after each lesson help new knowledge stick.

<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">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. Thousands of students already trust us, and we work hard to keep it that way.</p>
      </div>
      <div id="spy-1162" class="pb-3">
        <h3 class="h6">Set up your profile</h3>
        <p class="small">Our team has done this many times, so you never have to guess. Try the first lesson of any course for free before you decide. Career coaches help with your CV, portfolio and interview practice. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1163" class="pb-3">
        <h3 class="h6">Invite the team</h3>
        <p class="small">Friendly people answer your questions quickly, by phone, chat or email. Every detail is handled by people who care about getting it right. We keep things simple, so you can focus on what matters to you.</p>
      </div>
      <div id="spy-1164" class="pb-3">
        <h3 class="h6">Go live</h3>
        <p class="small">Guided learning paths take you from beginner to job-ready step by step. Lifetime access means you can revisit lessons whenever you need a refresher. Short quizzes after each lesson help new knowledge stick.</p>
      </div>
    </div>
  </div>
</div>

10Timeline by year

Year buttons follow a scrolling company timeline.

2023

How to choose the right course

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

2024

How to stay motivated when learning online

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

2025

Five things we learned this year

Try the first lesson of any course for free before you decide. Every course is built around hands-on projects you can add to your portfolio. Learn on your schedule, with lessons that fit into a lunch break.

2026

Tips for learning while working full time

Study groups and a friendly forum keep you motivated along the way. We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess.

<nav id="spy-nav-1165" class="nav nav-pills nav-fill mb-2 small">
  <a class="nav-link" href="#spy-1166">2023</a><a class="nav-link" href="#spy-1167">2024</a><a class="nav-link" href="#spy-1168">2025</a><a class="nav-link" href="#spy-1169">2026</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1165" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1166" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2023</span>
    <h3 class="h6">How to choose the right course</h3>
    <p class="small mb-0">Instructors are working professionals who teach what they use every day. Earn a certificate at the end of each course and share it with employers. Start in minutes and get help from a real person whenever you need it.</p>
  </div>
  <div id="spy-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 to stay motivated when learning online</h3>
    <p class="small mb-0">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. The mobile app downloads lessons, so you can learn on the train. We measure success by how many students come back and tell their friends.</p>
  </div>
  <div id="spy-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">Try the first lesson of any course for free before you decide. Every course is built around hands-on projects you can add to your portfolio. Learn on your schedule, with lessons that fit into a lunch break.</p>
  </div>
  <div id="spy-1169" class="ps-3 pb-4 border-start border-2 border-primary-subtle">
    <span class="badge text-bg-primary mb-2">2026</span>
    <h3 class="h6">Tips for learning while working full time</h3>
    <p class="small mb-0">Study groups and a friendly forum keep you motivated along the way. We listen first, then build a plan around what you actually need. Our team has done this many times, so you never have to guess.</p>
  </div>
</div>

11FAQ sections

Question groups in a scrollable panel with topic links.

Orders

A beginner's guide to getting started?: Clear prices, honest advice and no surprises along the way.
Five study habits that actually work?: Mentors review your projects and give feedback within two days.
How we build a course, start to finish?: Try the first lesson of any course for free before you decide.

Shipping

Looking back at a busy season?: The mobile app downloads lessons, so you can learn on the train.
Our most popular courses this year?: Career coaches help with your CV, portfolio and interview practice.
Building a portfolio that gets interviews?: Short quizzes after each lesson help new knowledge stick.

Returns

The small habits that make a big difference?: Start in minutes and get help from a real person whenever you need it.
What our students asked us most?: Study groups and a friendly forum keep you motivated along the way.
Our favourite tips for busy weeks?: Clear prices, honest advice and no surprises along the way.

<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">A beginner&#39;s guide to getting started?</dt>
          <dd class="small text-body-secondary">Clear prices, honest advice and no surprises along the way.</dd>
          <dt class="small">Five study habits that actually work?</dt>
          <dd class="small text-body-secondary">Mentors review your projects and give feedback within two days.</dd>
          <dt class="small">How we build a course, start to finish?</dt>
          <dd class="small text-body-secondary">Try the first lesson of any course for free before you decide.</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">Looking back at a busy season?</dt>
          <dd class="small text-body-secondary">The mobile app downloads lessons, so you can learn on the train.</dd>
          <dt class="small">Our most popular courses this year?</dt>
          <dd class="small text-body-secondary">Career coaches help with your CV, portfolio and interview practice.</dd>
          <dt class="small">Building a portfolio that gets interviews?</dt>
          <dd class="small text-body-secondary">Short quizzes after each lesson help new knowledge stick.</dd>
        </dl>
      </div>
      <div id="spy-1173" class="pb-3">
        <h3 class="h6"><i class="bi bi-question-circle" aria-hidden="true"></i> Returns</h3>
        <dl>
          <dt class="small">The small habits that make a big difference?</dt>
          <dd class="small text-body-secondary">Start in minutes and get help from a real person whenever you need it.</dd>
          <dt class="small">What our students asked us most?</dt>
          <dd class="small text-body-secondary">Study groups and a friendly forum keep you motivated along the way.</dd>
          <dt class="small">Our favourite tips for busy weeks?</dt>
          <dd class="small text-body-secondary">Clear prices, honest advice and no surprises along the way.</dd>
        </dl>
      </div>
    </div>
  </div>
</div>

12Icon menu

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

Performance

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

Battery

Every detail is handled by people who care about getting it right. Thousands of students already trust us, and we work hard to keep it that way. Lifetime access means you can revisit lessons whenever you need a refresher.

Connectivity

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

Security

We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you. Learn on your schedule, with lessons that fit into a lunch break. 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-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">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. Every course is built around hands-on projects you can add to your portfolio.</p>
      </div>
      <div id="spy-1176" class="pb-3">
        <h3 class="h6">Battery</h3>
        <p class="small">Every detail is handled by people who care about getting it right. Thousands of students already trust us, and we work hard to keep it that way. Lifetime access means you can revisit lessons whenever you need a refresher.</p>
      </div>
      <div id="spy-1177" class="pb-3">
        <h3 class="h6">Connectivity</h3>
        <p class="small">Mentors review your projects and give feedback within two days. 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-1178" class="pb-3">
        <h3 class="h6">Security</h3>
        <p class="small">We listen first, then build a plan around what you actually need. We keep things simple, so you can focus on what matters to you. Learn on your schedule, with lessons that fit into a lunch break. Guided learning paths take you from beginner to job-ready step by step.</p>
      </div>
    </div>
  </div>
</div>

13Pricing plans

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

Starter

$9.95 / mo

Mobile learning
Hands-on projects
Quizzes

Team

$41.08 / mo

Community forum
Lifetime access
Mobile learning

Business

$68.81 / mo

Mobile learning
Hands-on projects
Expert mentors

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

14Chapter reader

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

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

Our team has done this many times, so you never have to guess. 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. We listen first, then build a plan around what you actually need.

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

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

Try the first lesson of any course for free before you decide. We keep things simple, so you can focus on what matters to you. Every course is built around hands-on projects you can add to your portfolio.

Chapter 3: What employers look for in junior analysts

Lifetime access means you can revisit lessons whenever you need a refresher. Study groups and a friendly forum keep you motivated along the way. Instructors are working professionals who teach what they use every day. 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. We measure success by how many students come back and tell their friends. Clear prices, honest advice and no surprises along the way.

Chapter 4: Headlines people actually click

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

<nav id="spy-nav-1183" class="nav nav-tabs mb-0 small">
  <a class="nav-link" href="#spy-1184">Chapter 1</a><a class="nav-link" href="#spy-1185">Chapter 2</a><a class="nav-link" href="#spy-1186">Chapter 3</a><a class="nav-link" href="#spy-1187">Chapter 4</a>
</nav>
<div class="position-relative border rounded p-3 border-top-0 rounded-top-0 lh-lg" style="height:240px;overflow-y:auto" data-ui-spy="scroll" data-ui-target="#spy-nav-1183" data-ui-smooth-scroll="true" tabindex="0">
  <div id="spy-1184" class="pb-3">
    <h3 class="h6">Chapter 1: How to learn a new skill in 30 days</h3>
    <p class="small">Our team has done this many times, so you never have to guess. Short quizzes after each lesson help new knowledge stick. 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. Learn on your schedule, with lessons that fit into a lunch break. We listen first, then build a plan around what you actually need.</p>
  </div>
  <div id="spy-1185" class="pb-3">
    <h3 class="h6">Chapter 2: From teacher to UX designer: a career story</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. The mobile app downloads lessons, so you can learn on the train.</p>
    <p class="small">Try the first lesson of any course for free before you decide. We keep things simple, so you can focus on what matters to you. Every course is built around hands-on projects you can add to your portfolio.</p>
  </div>
  <div id="spy-1186" class="pb-3">
    <h3 class="h6">Chapter 3: What employers look for in junior analysts</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. Instructors are working professionals who teach what they use every day. Thousands of students already trust us, and we work hard to keep it that way.</p>
    <p class="small">Every detail is handled by people who care about getting it right. We measure success by how many students come back and tell their friends. Clear prices, honest advice and no surprises along the way.</p>
  </div>
  <div id="spy-1187" class="pb-3">
    <h3 class="h6">Chapter 4: Headlines people actually click</h3>
    <p class="small">Our team has done this many times, so you never have to guess. Start in minutes and get help from a real person whenever you need it. Mentors review your projects and give feedback within two days. Start in minutes and get help from a real person whenever you need it.</p>
    <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. 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>

15Settings form

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

Profile Notifications Privacy

Profile

Display name

City

Study groups and a friendly forum keep you motivated along the way. Clear prices, honest advice and no surprises along the way. Guided learning paths take you from beginner to job-ready step by step.

Notifications

Product news

Weekly digest

We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right. Thousands of students already trust us, and we work hard to keep it that way. Earn a certificate at the end of each course and share it with employers.

Privacy

Hide my profile from search

Short quizzes after each lesson help new knowledge stick. The mobile app downloads lessons, so you can learn on the train. Career coaches help with your CV, portfolio and interview practice.

<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="Tariq Ashford">
        </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">Study groups and a friendly forum keep you motivated along the way. Clear prices, honest advice and no surprises along the way. Guided learning paths take you from beginner to job-ready step by step.</p>
      </div>
      <div id="spy-1190" class="pb-3">
        <h3 class="h6">Notifications</h3>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1194" checked>
          <label class="form-check-label small" for="spy-sw-1194">Product news</label>
        </div>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch" id="spy-sw-1195">
          <label class="form-check-label small" for="spy-sw-1195">Weekly digest</label>
        </div>
        <p class="small">We listen first, then build a plan around what you actually need. Every detail is handled by people who care about getting it right. Thousands of students already trust us, and we work hard to keep it that way. Earn a certificate at the end of each course and share it with employers.</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">Short quizzes after each lesson help new knowledge stick. The mobile app downloads lessons, so you can learn on the train. Career coaches help with your CV, portfolio and interview practice.</p>
      </div>
    </div>
  </div>
</div>

16Team directory

Department links track a scrolling list of people.

Human Resources

Amara Novak
Product Designer
Ravi Fischer
QA Engineer
Kai Alvarez
Frontend Engineer

Design

Nora Okafor
Art Director
Diego Kowalski
Backend Engineer
Leo Hughes
Art Director

Marketing

Ivy Brennan
Operations Manager
Chloe Morgan
Support Specialist
Samir Delgado
Product Designer

<nav id="spy-nav-1197" class="nav nav-pills mb-2 small flex-wrap">
  <a class="nav-link" href="#spy-1198">Human Resources</a><a class="nav-link" href="#spy-1199">Design</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">Human Resources</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="Amara Novak"><div><div class="small fw-semibold">Amara Novak</div><div class="small text-body-secondary">Product Designer</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-4.svg" class="rounded-circle" width="36" height="36" alt="Ravi Fischer"><div><div class="small fw-semibold">Ravi Fischer</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-11.svg" class="rounded-circle" width="36" height="36" alt="Kai Alvarez"><div><div class="small fw-semibold">Kai 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">Design</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="Nora Okafor"><div><div class="small fw-semibold">Nora Okafor</div><div class="small text-body-secondary">Art Director</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="36" height="36" alt="Diego Kowalski"><div><div class="small fw-semibold">Diego Kowalski</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-12.svg" class="rounded-circle" width="36" height="36" alt="Leo Hughes"><div><div class="small fw-semibold">Leo Hughes</div><div class="small text-body-secondary">Art Director</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-7.svg" class="rounded-circle" width="36" height="36" alt="Ivy Brennan"><div><div class="small fw-semibold">Ivy Brennan</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-6.svg" class="rounded-circle" width="36" height="36" alt="Chloe Morgan"><div><div class="small fw-semibold">Chloe Morgan</div><div class="small text-body-secondary">Support Specialist</div></div></li>
      <li class="d-flex align-items-center gap-2 mb-2"><img src="../assets/img/avatar-12.svg" class="rounded-circle" width="36" height="36" alt="Samir Delgado"><div><div class="small fw-semibold">Samir Delgado</div><div class="small text-body-secondary">Product Designer</div></div></li>
    </ul>
  </div>
</div>

17Catalogue categories

Category pills over a scrolling price list.

Business

Copywriting$86.00
Public speaking$80.99
Python basics$129.00

Marketing

Digital marketing$138.00
UX fundamentals$154.99
Photography$92.99

Development

Leadership skills$149.00
Web development$224.00
Photography$88.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">Marketing</a><a class="nav-link" href="#spy-1204">Development</a>
</nav>
<div class="position-relative border rounded p-3" style="height:220px;overflow-y:auto" data-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>Copywriting</span><span class="fw-semibold">$86.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Public speaking</span><span class="fw-semibold">$80.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Python basics</span><span class="fw-semibold">$129.00</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>Digital marketing</span><span class="fw-semibold">$138.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>UX fundamentals</span><span class="fw-semibold">$154.99</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Photography</span><span class="fw-semibold">$92.99</span></li>
    </ul>
  </div>
  <div id="spy-1204" class="pb-3">
    <h3 class="h6">Development</h3>
    <ul class="list-unstyled">
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Leadership skills</span><span class="fw-semibold">$149.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Web development</span><span class="fw-semibold">$224.00</span></li>
      <li class="d-flex justify-content-between border-bottom py-2 small"><span>Photography</span><span class="fw-semibold">$88.99</span></li>
    </ul>
  </div>
</div>

18Inside a card

Card header pills spy on the scrolling card body.

Today

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. Mentors review your projects and give feedback within two days. Instructors are working professionals who teach what they use every day.

This week

Learn on your schedule, with lessons that fit into a lunch break. Friendly people answer your questions quickly, by phone, chat or email. The mobile app downloads lessons, so you can learn on the train. We listen first, then build a plan around what you actually need.

Later

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

<div class="card">
  <div class="card-header">
    <nav id="spy-nav-1205" class="nav nav-pills card-header-pills">
      <a class="nav-link" href="#spy-1206">Today</a><a class="nav-link" href="#spy-1207">This week</a><a class="nav-link" href="#spy-1208">Later</a>
    </nav>
  </div>
  <div class="card-body p-0">
    <div class="position-relative border rounded p-3 border-0 rounded-0" style="height:200px;overflow-y:auto" data-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">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. 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-1207" class="pb-3">
        <h3 class="h6">This week</h3>
        <p class="small">Learn on your schedule, with lessons that fit into a lunch break. Friendly people answer your questions quickly, by phone, chat or email. The mobile app downloads lessons, so you can learn on the train. We listen first, then build a plan around what you actually need.</p>
      </div>
      <div id="spy-1208" class="pb-3">
        <h3 class="h6">Later</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. Short quizzes after each lesson help new knowledge stick.</p>
      </div>
    </div>
  </div>
</div>

19Dark theme

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

Launch

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

Orbit

Mentors review your projects and give feedback within two days. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you.

Landing

Study groups and a friendly forum keep you motivated along the way. Lifetime access means you can revisit lessons whenever you need a refresher. Thousands of students already trust us, and we work hard to keep it that way. Try the first lesson of any course for free before you decide.

<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">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. Our team has done this many times, so you never have to guess.</p>
    </div>
    <div id="spy-1211" class="pb-3">
      <h3 class="h6">Orbit</h3>
      <p class="small">Mentors review your projects and give feedback within two days. Every detail is handled by people who care about getting it right. Clear prices, honest advice and no surprises along the way. We keep things simple, so you can focus on what matters to you.</p>
    </div>
    <div id="spy-1212" class="pb-3">
      <h3 class="h6">Landing</h3>
      <p class="small">Study groups and a friendly forum keep you motivated along the way. Lifetime access means you can revisit lessons whenever you need a refresher. 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 Oct 27, 2025

NewGuided learning paths take you from beginner to job-ready step by step.
ImprovedWe measure success by how many students come back and tell their friends.
FixedFriendly people answer your questions quickly, by phone, chat or email.

v3.1 Jan 15, 2026

NewLearn on your schedule, with lessons that fit into a lunch break.
ImprovedEarn a certificate at the end of each course and share it with employers.
FixedShort quizzes after each lesson help new knowledge stick.

v3.0 Jun 10, 2026

NewThousands of students already trust us, and we work hard to keep it that way.
ImprovedThe mobile app downloads lessons, so you can learn on the train.
FixedEvery course is built around hands-on projects you can add to your portfolio.

v2.9 Sep 20, 2026

NewWe keep things simple, so you can focus on what matters to you.
ImprovedLearn on your schedule, with lessons that fit into a lunch break.
FixedStudy groups and a friendly forum keep you motivated along the 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">Oct 27, 2025</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Guided learning paths take you from beginner to job-ready step by step.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>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>Friendly people answer your questions quickly, by phone, chat or email.</li>
        </ul>
      </div>
      <div id="spy-1215" class="pb-3">
        <h3 class="h6">v3.1 <small class="text-body-secondary fw-normal">Jan 15, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>Learn on your schedule, with lessons that fit into a lunch break.</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>Short quizzes after each lesson help new knowledge stick.</li>
        </ul>
      </div>
      <div id="spy-1216" class="pb-3">
        <h3 class="h6">v3.0 <small class="text-body-secondary fw-normal">Jun 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>The mobile app downloads lessons, so you can learn on the train.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Every course is built around hands-on projects you can add to your portfolio.</li>
        </ul>
      </div>
      <div id="spy-1217" class="pb-3">
        <h3 class="h6">v2.9 <small class="text-body-secondary fw-normal">Sep 20, 2026</small></h3>
        <ul class="list-unstyled small">
          <li class="mb-1"><span class="badge text-bg-success me-1">New</span>We keep things simple, so you can focus on what matters to you.</li>
          <li class="mb-1"><span class="badge text-bg-primary me-1">Improved</span>Learn on your schedule, with lessons that fit into a lunch break.</li>
          <li class="mb-1"><span class="badge text-bg-danger me-1">Fixed</span>Study groups and a friendly forum keep you motivated along the way.</li>
        </ul>
      </div>
    </div>
  </div>
</div>