One Screen at a Time

A hands-on book for web developers

Build a swipe‑through learning feed from scratch.

One small, real app, built one component at a time with plain HTML, CSS and JavaScript. No framework. No build step. You write every line, and you understand every line.

Read Chapter 1 free Get the full book

About 23,000 words, seven chapters, and a tested checkpoint for every step.

That is the app you build. Scroll it, vote, and flip dark mode. Open it full screen

What you will build, chapter by chapter

Every chapter is one task you can see working. The next idea shows up when the app needs it, not when a syllabus says so.

  1. Put one fact on the screen

    Data in JSON, a page, and a fetch that joins them. The smallest thing that works.

  2. Turn one fact into a feed

    A loop, a shuffle, CSS scroll-snap for the physics, and IntersectionObserver to count what you have read.

  3. Stop repeating yourself

    Your first custom element. See exactly why the code started to hurt, and how <ml-card> fixes it.

  4. Add buttons that feel good

    Small components, properties down, events up. Vote, undo and copy, usable by mouse, finger, keyboard and screen reader.

  5. Remember you, and learn your taste

    localStorage that survives failure, a ranking that favours what you like (with the maths explained), an endless deck, and putting it on the web.

Plus two optional extras

  1. Dark mode, and a smooth switch

    Themes with CSS variables, no flash on reload, and a circular reveal with the View Transitions API.

  2. Taking it further

    Other hosts, caching and updates, and using your components on a site you do not control.

Who it is for

  • You know the basics of HTML, CSS and JavaScript and have never finished a whole app without a framework.
  • You work in an agency or a CMS (HubSpot, WordPress and the like) and want components that survive in a page you do not control.
  • You are a designer who codes a bit and wants to ship something real.

Not for absolute beginners, and not a framework comparison. There is a ten-minute self-test at the start so you can check before you commit.

How you read it

  • On the web, with a Copy button on every code block. No fighting a PDF to paste code.
  • A checkpoint for every chapter. If your version breaks, compare it with the working one.
  • Challenges, not lectures. Each chapter ends with an easy and a stretch exercise.

About the author

I am Andrzej Stacherski, a seasoned developer. I came to the web when Notepad was the editor of choice and Flash was a big deal. Then came advanced CSS, jQuery, PHP and a lot more, all of it needing setup, servers and the whole mythical shebang.

I always wanted control over my work and a deeper understanding of it. Web components gave me both. Teaching them to a colleague turned out to be the best way to learn them properly, and this book is the tutorial I wished I had found.

The app has a purpose too. Most of us work remotely now, locked to our screens, talking through Slack or Teams with the odd meeting. What I miss is the desk-by-desk side of the job: the shared jokes, the honest screw-ups, the real wins and the quirks you only learn by sitting next to someone. That "wait, look at this" moment. A small feed of one-screen discoveries is my way of getting a bit of that feeling back, and the book shows you how to build it yourself.

Get the full book

Chapter 1 is free to read right now. The full book is read online, with every code block copyable, and includes all seven chapters, the checkpoints and the vocabulary list.

Price to be announced

Why $19.42? A small nod to a certain galactic guide. The answer was 42. We think the question was how to build a feed.

Buy the full book Read Chapter 1 first

Checkout is not open yet.

14-day money-back guarantee. Payment is handled by Lemon Squeezy. By buying you accept the terms; see also refunds and privacy.

Already bought? Sign in with your email. After you pay, a one-time sign-in link arrives by email, and your browser stays signed in for 30 days.

Questions

Do I need to install anything?

A text editor, a modern browser, and Python 3 or Node to run a tiny local server. There is no npm install and no build step.

Does the app use AI?

No. The app you build does not need AI to run, and has no dependencies. It is plain files and the browser. It learns your taste with a small, readable ranking function that the book explains.

Which browsers does it work in?

Current Chrome, Edge, Firefox and Safari. The book points out the one or two newer features (such as View Transitions) and shows how the app behaves where they are missing.

Why read it online instead of a PDF?

Because the whole point is copying and running code. Every block has a Copy button, and every term links to the official documentation.

Will there be an EPUB or PDF?

That is planned as a later extra download for readers who want one. The online version stays the main way to read it.

What if a fact in the app is wrong?

Facts go stale, unlike frameworks. The book explains how to report one, and corrections are made in updates.