Skip to content
Sign in Go

Glosperos · coding lessons after dark

Pick a track, write the code and keep the project.

Six tracks of bite-sized lessons, from your first page layout to your own API online. They all leave from Begin here, so you can start with zero experience, and each one finishes with something you made.

See the passesOpen the playground
Network of six coding tracks that branch out from the Begin here interchange. LS1 LS2 LS3 LS4 LS5 LS6 LST A one-page site about you PJ1 PJ2 PJ3 PJ4 PJ5 PJ6 PJT A puzzle logbook CD1 CD2 CD3 CD4 CD5 CD6 CDT An interactive chart page SA1 SA2 SA3 SA4 SA5 SA6 SAT A notes API of your own SC1 SC2 SC3 SC4 SC5 SC6 SCT A project anyone can open PR1 PR2 PR3 PR4 PR5 PR6 PRT A portfolio you can talk through

Interchange

Begin here

Every track branches out from this point, and the first lesson on each one starts from scratch. Tap a coloured line to see its stops.

Now boarding

Six tracks are waiting on the board.

A track is a set of short lessons in a fixed order, finishing with a project for your portfolio. Tap a row to open its full list of stops.

Stop by stop

One idea at each stop, then your turn.

A lesson explains a single idea and then hands you the keyboard. Follow a track stop by stop until you reach its project.

Line LS · Platform 1

Layouts for Every Screen

Build pages that look right on a phone and on a wide monitor, starting with clean HTML and finishing with careful CSS.

  • HTML
  • CSS
  • Flexbox
  • Grid

  1. LS1

    The page skeleton

    Header, main, sections and footer: tags that say what each part is for.

  2. LS2

    Spacing that behaves

    Padding, margins and borders, and how box-sizing keeps widths honest.

  3. LS3

    Rows that flex

    Align items, share leftover space and let a row wrap when it runs short.

  4. LS4

    Grids in two directions

    Rows and columns at once, with tracks and gaps you set yourself.

  5. LS5

    Breakpoints from small up

    Design for the narrow screen first and widen only where the content needs it.

  6. LS6

    A keyboard and contrast pass

    Visible focus, readable colours and tab order checked by hand.

  7. LST · Terminus

    A one-page site about you

    Your own sections, laid out with Grid and Flexbox, that adapt from phone to desktop.

Code playground

Edit a line, press Run, watch it change.

Lessons work the same way: you write, you run, you look. Try one of the three starters below. Everything runs inside your browser and nothing is sent anywhere.

Spread the links across the bar and let them drop to a second row when space runs out. Try another justify-content value.

Ctrl/⌘ + Enter to run · Tab to indent · Esc, then Tab, to leave the editor

Result

Console

    Signal check

    Spot the line that turns the signal red.

    Every track includes guidance on debugging, because finding a bug is a skill you can practise. Read what went wrong, tap the line you suspect, and the signal answers with the reason.

    total.js The console prints 0 instead of 18.

    Tap the line that causes the problem.

    Final stops

    Each track finishes with a build of yours.

    The last stop is a project you make from start to finish. It stays yours to improve and show in your portfolio.

    • A sketchbook open on a wooden table, filled with hand-drawn page wireframes

      LST · Terminus

      A one-page site about you

      Your own sections, laid out with Grid and Flexbox, that adapt from phone to desktop.

      TrackLayouts for Every Screen Plat.1 Stops6
    • A hand drawing a flowchart of boxes and arrows on a whiteboard

      PJT · Terminus

      A puzzle logbook

      Your own solutions to a run of challenges, each with a short note on how you got there.

      TrackProblem Solving in JavaScript Plat.2 Stops6
    • A woman studying a web page on a large monitor at a busy desk

      CDT · Terminus

      An interactive chart page

      A page of SVG charts fed by a JSON file, with hover details and a filter.

      TrackCharts from Raw Data Plat.3 Stops6
    • A close-up of dense JavaScript code on a screen

      SAT · Terminus

      A notes API of your own

      Endpoints that create, list and delete notes as JSON, written and tested by you.

      TrackServers & APIs Plat.4 Stops6
    • Hands on a laptop showing code, with a phone held beside it on a round table

      SCT · Terminus

      A project anyone can open

      One of your builds under version control and published at a real address.

      TrackShipping Your Code Plat.5 Stops6
    • Hands typing on a laptop at a wooden desk

      PRT · Terminus

      A portfolio you can talk through

      Your projects, each with a clear write-up and a story about how you built it.

      TrackPortfolio Ready Plat.6 Stops6
    A young man writing notes by hand next to his open laptop

    Platform 0 · every track

    No experience? Board here.

    1. 01

      The first lesson on every track assumes you have never written code.

    2. 02

      Lessons are short: one idea, a clear explanation, then code you type yourself.

    3. 03

      Stuck on a concept or a bug? Guidance on both comes with the tracks.

    4. 04

      The final stop on each track is a project that goes straight into your portfolio.

    Reading about code is good. Writing it is better.

    See the passes

    Passes

    A single pass opens all six tracks.

    Choose the pass that fits how you learn. Subscriptions can be cancelled from your profile whenever you like.

    • Track pass

      Good first stop

      Demo Lite

      €59.59

      Runs 28 days · renews

      3-day trial | €0.10

      • Test Benefit 1
      • Test Benefit 2
      Choose this pass

    Station notices

    Before you board, a few answers.

    Still unsure? Send us a message from the contact page.

    Write to us
    Bulletin 01 I have never coded. Can I still join?

    Yes. Each track opens with the basics and adds one idea per lesson, so you never need to know anything in advance.

    Bulletin 02 Which topics do the tracks cover?

    Page layouts with HTML and CSS, problem solving in JavaScript, charts from data, servers and APIs, putting code online, and preparing a portfolio.

    Bulletin 03 How long is a lesson?

    Short. Each one covers a single idea, then asks you to write the code for it yourself.

    Bulletin 04 Do I really type the code?

    You do. Watching is not the same as writing, so every lesson ends with you at the keyboard. The playground above gives you a taste.

    Bulletin 05 What do I end up with?

    A project at the end of each track that you can keep working on and add to your portfolio.

    Bulletin 06 What if a bug has me stuck?

    The tracks include guidance on concepts and on debugging, so you can work out what went wrong and keep going.

    Bulletin 07 Where do I cancel?

    In your profile, whenever you want. The subscription policy sets out how billing and cancelling work.