97Prerequisites

The other half of the promise, and the half that gets left out: what you need BEFORE this course. Each row states the condition and — this is the whole point — where to go if you do not meet it. A prerequisite with no route to meeting it is a wall, not a warning.

Use it for

Course and training-module pages, directly after What you'll learn
Anywhere a course assumes earlier work

Not for

Selling. This block exists to let people leave, which is what makes the ones who stay finish
Rendering as ticked outcomes — a promise and a condition must not look alike

With a route out

The default: condition, one line of why, and the fix. Deliberately not ticked and not green — outcomes are promises, prerequisites are conditions, and rendering them alike is how entry requirements read as features.

Comfortable in Lightning Experience You can find setup, create a custom object and add a field without following a screenshot. Admin fundamentals

Any programming language, at all Variables, loops and if-statements. It does not have to be Apex — JavaScript or Python is plenty. Free primer

A developer org Free, takes two minutes, and every lab in this course runs in it. Sign up

markup

<div class="ns-prereq" style="max-inline-size:34rem;inline-size:100%">
  <div class="ns-prereq__item">
    <i class="ph ph-circle ns-prereq__icon" aria-hidden="true"></i>
    <span>
      <span class="ns-prereq__title">Comfortable in Lightning Experience</span>
      <span class="ns-prereq__note">You can find setup, create a custom object and add a field without following a screenshot.</span>
    </span>
    <a class="ns-prereq__fix" href="#0">Admin fundamentals</a>
  </div>
  <div class="ns-prereq__item">
    <i class="ph ph-circle ns-prereq__icon" aria-hidden="true"></i>
    <span>
      <span class="ns-prereq__title">Any programming language, at all</span>
      <span class="ns-prereq__note">Variables, loops and if-statements. It does not have to be Apex — JavaScript or Python is plenty.</span>
    </span>
    <a class="ns-prereq__fix" href="#0">Free primer</a>
  </div>
  <div class="ns-prereq__item">
    <i class="ph ph-circle ns-prereq__icon" aria-hidden="true"></i>
    <span>
      <span class="ns-prereq__title">A developer org</span>
      <span class="ns-prereq__note">Free, takes two minutes, and every lab in this course runs in it.</span>
    </span>
    <a class="ns-prereq__fix" href="#0">Sign up</a>
  </div>
</div>

Known state

When the product already knows — a signed-in learner who finished the earlier course should not be asked to check. Met and unmet differ by glyph AND word, not by colour.

Admin fundamentals Completed Finished in March. Nothing to do here.

Apex basics 4 lessons left You can start this course now, but lesson 05 assumes the collections lesson. Resume

markup

<div class="ns-prereq" style="max-inline-size:34rem;inline-size:100%">
  <div class="ns-prereq__item" data-met="true">
    <i class="ph ph-check-circle ns-prereq__icon" aria-hidden="true"></i>
    <span>
      <span class="ns-prereq__title">Admin fundamentals <span class="ns-laccess ns-laccess--free">Completed</span></span>
      <span class="ns-prereq__note">Finished in March. Nothing to do here.</span>
    </span>
  </div>
  <div class="ns-prereq__item" data-met="false">
    <i class="ph ph-warning-circle ns-prereq__icon" aria-hidden="true"></i>
    <span>
      <span class="ns-prereq__title">Apex basics <span class="ns-laccess ns-laccess--soon">4 lessons left</span></span>
      <span class="ns-prereq__note">You can start this course now, but lesson 05 assumes the collections lesson.</span>
    </span>
    <a class="ns-prereq__fix" href="#0">Resume</a>
  </div>
</div>

Accessibility contract

Met / unmet is data-met plus a different glyph and word, never colour alone
The escape link names its destination — "Start Apex basics", not "here"