All Project Templates

Primer

by Yard
Primer preview
Gallery image 0
Gallery image 1
Gallery image 2
Gallery image 3
Gallery image 4
Gallery image 5

An online course site for math and the sciences. Learners browse a catalog of short courses, sign in, and work through each one section by section, with formulas and code rendered properly and progress saved to their account. Some courses are free and some need Premium, and the project's team writes and publishes everything from a built-in admin panel. It ships with sign-in, a database, a Free and Premium plan, 25 sample courses, and a polished landing page, all running on Yard.

Features

  • Course catalog: every course is a card with its subject, title, the first few things you'll learn, its length, and your progress once you've started
  • Search and subject filters: every word you type has to match a course's title, summary, subject, or section titles. Searches and filters live in the URL, so any page can link straight to a filtered view
  • A syllabus anyone can read: visitors see every course and its list of sections before signing in. Signing in opens the sections themselves
  • Progress on every section: each section is not started, in progress, or done. Opening one starts it, Mark complete finishes it, and reopening a finished section never undoes it
  • Continue learning: the courses you're partway through sit at the top of the catalog, most recent first, with the next section one click away
  • A focused reader: the course outline sits beside the lesson, with previous and next links, a reading time for each section, and a note when the whole course is done
  • Math, code, and callouts: lessons are Markdown with inline and display formulas, fenced code, tables, images, and Note, Tip, Watch out, and Example callouts
  • Back where you were: signing in from any page brings you back to that page
  • Admin panel: create courses, write sections, reorder both, and publish when a course is ready. Drafts stay hidden from learners, and a course needs at least one section before it can go live
  • Section editor: Write and Preview tabs with a live preview, a character counter, Ctrl/Cmd + S to save, and a warning before you leave with unsaved changes
  • Learner stats: the admin dashboard counts learners, and how many people started and finished each course
  • 25 sample courses: across Physics, Mathematics, Chemistry, Biology, Computer Science, Engineering, and Astronomy, 16 free and 9 Premium, so the catalog is full from the first deploy. Edit them, or delete them and write your own
  • Subjects with their own look: each subject has a color and a cover illustration, used on its course cards, progress bars, and section icons
  • Catalog-style landing page: search, live course cards with All, Free, and Premium tabs, explore by subject, how it works, pricing, and an FAQ, all filled from the real catalog
  • Light and dark themes: follows the system setting, with a toggle that remembers your choice

Free and Premium

Primer comes with two plans ready to sell:

Free Premium
Browse the catalog and every syllabus Yes Yes
Free courses, with progress saved Yes Yes
Premium courses No Yes

Premium is $20 a month. Free needs no checkout: signing in is enough to start learning. A Premium course still shows its syllabus to everyone, and its sections explain what's locked and link to the upgrade. Everyone on the project's team gets every course. A free trial or a yearly price is one setting on the Premium tier.

Built on Yard

  • Yard Auth: learners sign in with their Yard account. Primer never handles a password, and after the first consent screen, sign-in is silent
  • Your team is the admin list: everyone on the project's Yard team is an admin, and nobody else can be. To add an instructor, invite them to the team. There is no roles table to manage
  • Hosted service: the entire backend is a single fetch handler with no server to run or scale
  • Database: courses, sections, and progress live in the project's own SQLite database, and schema migrations apply themselves on deploy
  • Pricing: Free and Premium tiers, with each visitor's plan checked on every request

Technical details

  • Plain HTML, CSS, and JavaScript: no framework, no build step, no dependencies. KaTeX typesets the math, loaded from jsDelivr at a pinned version with an integrity hash, and formulas stay readable as TeX if it can't load
  • The server is the paywall. A locked course shows its section titles, but section text is never sent to anyone without the plan
  • A small Markdown renderer treats every lesson as untrusted: code and math are set aside, everything else is escaped, and links and images must use http, https, mailto, or a relative URL
  • No users table: identity, plan, and admin status arrive with every request as trusted headers, so there is no copy to go stale
  • Progress is one row per learner per section. The client only says whether a section is done, and the server decides what gets stored
  • A reorder sent from an out-of-date list is refused rather than applied, so two admins working at once never end up with duplicate positions
  • The app re-reads the visitor's plan when its window regains focus, so a new Premium purchase opens every course without a reload
  • One structured log line per event, readable with yard service logs, which never records emails or lesson text
  • Relative URLs throughout, so the same bundle works on a yard.sh subdomain, inside a sandbox, or on a custom domain
  • Instrument Sans and JetBrains Mono typefaces, loaded from Google Fonts

Requirements

A Pro plan, for the hosted service, database, and custom landing page. Yard Auth is included.