First App.
Your learning space A little progress, every day
CHAPTER 05Lesson 13 of 20

Test on a laptop and a phone-sized screen

You do not need to read code to check whether your website does the right thing.

In your browser10 min read & do
By the end of this lesson

Try the main journey, narrow layouts and a production build before publishing.

Let’s do this

  1. 1
    In your browser

    Run through the main journey

    Start with an empty list or a new visitor. Try the main action and check the result. Reload, use Back, open every page and follow every link. Confirm what happens when something is blank or unavailable.

  2. 2
    In your browser

    Try a small screen and larger text

    Narrow your browser window to roughly a phone’s width. Make sure text and buttons fit without sideways scrolling. Zoom to 200% and use Tab, Shift + Tab, Enter and Escape. Check visible keyboard focus and that a dialog can be closed.

    W3C: easy accessibility checks (opens a new tab)
  3. 3
    In your AI helper

    Ask the AI to test the important behaviour

    Ask it to run available checks and add focused tests for things people rely on, such as saving a list or controlling access. Have it use browser testing if supported and tell you what it could not test. You should still try the result yourself.

  4. 4
    In your AI helper

    Build the version Cloudflare will publish

    Ask the AI to run npm run build. For the basic Vite route, the public files go into dist. npm run preview serves that built version locally; use the address it prints. Check the key journey again there, including directly opening an inner page.

    npm run build
npm run preview

A message for your AI helper

Test my first website before publishing. Check the main visitor journey, empty and invalid input, reload, links, keyboard use, narrow screens and 200% zoom. Run the existing checks and a production build. Add focused tests for meaningful behaviour where needed. If browser tools are available, use them. Report what passed, what failed and anything untested in plain English. Fix real failures, then retest those parts.

Make this message fit your idea.

What you should see

The built version works for the main task, and you have a short list of any remaining issues.

If you get stuck

Go at your own pace. There is no test to pass.

Checked 7 September 2026. Screens can change; the official guides below have the latest steps.

Vite: getting startedW3C: easy accessibility checks