EaseBrainACADEMY
← All technology pathways
FROM A PAGE TO A USEFUL TOOL

Web & app builder

Build an accessible club website with a calculator, validation and a repeatable test log.

Build it. Try it. Change one thing.What would you test when the easy example works?Illustrated learning characters · fictional scene
STARTER MATERIAL / FICTIONAL SCENARIO

Make a first version.

<!doctype html>
<html lang="en"><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>River Club cost tool</title>
<main><h1>Plan club materials</h1>
<label for="units">Whole units needed</label>
<input id="units" type="number" min="0" step="1">
<button id="calculate">Calculate</button>
<p id="result" role="status"></p></main>
<script>
document.querySelector('#calculate').addEventListener('click', () => {
 const raw = document.querySelector('#units').value.trim();
 const units = Number(raw);
 document.querySelector('#result').textContent =
  raw === '' || !Number.isInteger(units) || units < 0
   ? 'Enter a whole number of units, zero or more.'
   : 'Materials cost: KES ' + (units * 170).toFixed(2);
});
</script></html>

Copy this into your chosen tool or trace it on paper. Do not enter passwords, private learner data or API keys.

STAGE 1 / 6

Structure a page for a real task

HTML gives content meaning. A heading names a section; a label names an input; a button performs an action. A clickable-looking div does not automatically have keyboard behaviour.

Build & try

Save the starter as index.html in a new folder and open it in a browser. Add the fictional club purpose, meeting time and joining instruction. Use one h1 and descriptive h2 headings.

Show that it works

Someone can find the meeting time without your explanation. Every form input has a visible label.

STAGE 2 / 6

Make layout adapt

Responsive CSS uses the available space instead of assuming one screen width. Reading order should stay meaningful when columns become a single column.

Build & try

Add a style block: body {font-family:system-ui;line-height:1.6;margin:auto;padding:1rem;max-width:65rem} input,button {font:inherit;padding:.65rem}. Add a two-column layout only when space allows. Keep visible focus outlines.

Show that it works

At 320 CSS pixels and at 200% zoom, content is readable with no page-wide horizontal scrolling or hidden controls.

STAGE 3 / 6

Follow the event and the data

An event listener runs when an action occurs. The input value begins as text; conversion and validation happen before arithmetic. textContent displays a result as text without interpreting it as HTML.

Build & try

Trace the starter with 3 units: read '3', convert to 3, validate, multiply by 170, display KES 510. Add a labelled price input and pass both values to a calculateCost function.

Show that it works

You can explain every variable and predict what happens before pressing Calculate.

STAGE 4 / 6

Handle invalid input

Validation protects meaning, not only the application. Number('') is 0, so checking empty input first prevents a misleading result. A quantity may be a whole number while a price may have decimals.

Build & try

Create a test table for 0, 3, blank, −1, 1.5 and a very large value. Set a justified upper bound. Display an error that explains how to correct the input.

Show that it works

Valid zero remains valid; blank, negative and fractional quantities never produce an apparently successful total.

STAGE 5 / 6

Test with another way of using it

Accessibility testing checks whether people can perceive information and operate the interface. Keyboard, zoom and text alternatives catch different problems.

Build & try

Use only Tab, Shift+Tab, Enter and Space. Check focus order and visibility. Test enlarged text and a narrow viewport. Ask a supervised reviewer to complete one task without hints.

Show that it works

The button works from the keyboard, the result is announced through role=status, and your log records observed failures and fixes.

STAGE 6 / 6

Build independently and hand over

Transfer means applying the method to a different problem, not copying the same numbers. Documentation lets another person verify the result.

Build & try

Build a fictional club time planner or materials estimator with at least two inputs. Include setup, calculations, five tests, limitations and credits. Keep it local; public hosting is optional.

Show that it works

A reviewer can open the folder, reproduce your tests and explain one limitation. No API key, personal data or paid hosting is required.

A DIFFERENT WAY TO TRY IT

Make the idea your own.

Choose a twist. Use paper, a sketch or a conversation.

Optional practice. Copy useful observations into your workbook; choosing a twist does not record completion.

Compare ideas with someone you know. Sharing is optional.