Web Development with JavaScript

Programme overview

Go beyond a first website to the kind of page businesses depend on. You'll build the pay-an-invoice page of Tallybook's customer portal, talking to the API from Databases and APIs for Developers. You'll learn JavaScript's essentials and its money traps (why Math.floor(8.95 * 100) loses a kobo), reshape API data with map, filter and reduce and format it for Nigerian users with Intl, write semantic, accessible HTML, lay it out mobile-first with CSS grid and media queries, update the balance live as customers type, validate with clear messages that screen readers announce, handle every outcome of a payment request including a dropped connection, and test the logic. Everything runs in the browser you already have. Every JavaScript example's output is checked, and the finished page is tested in a real browser for layout, keyboard use and accessible errors.

Curriculum

1. 01How the Web Works10 min

   • How the web worksWhat happens when someone opens a web page, what HTML, CSS and JavaScript each do, and how to run your first JavaScript in the browser you already have, with nothing to install.
2. 02JavaScript Essentials25 min

   • JavaScript essentialsVariables, functions and numbers in JavaScript, and the money traps they hide (floating point and rounding), by writing the invoice total function the payment page needs.
3. 03Arrays, Objects and Formatting10 min

   • Arrays, objects and formattingWork with lists of records the way web pages do (objects, arrays, map, filter, reduce and sort), find a customer's overdue invoices, and format money and dates for Nigerian users with Intl.
4. 04HTML and Accessibility15 min

   • HTML and accessibilityWrite semantic HTML for the payment page (landmarks, headings, a proper table and a labelled form) so it works for everyone, including people using screen readers or keyboards, and check it.
5. 05CSS Layout and Responsive Design15 min

   • CSS layout and responsive designStyle the payment page with CSS, lay it out with flexbox and grid, design for phones first, and use a media query so it adapts to wider screens without separate pages.
6. 06The DOM and Events15 min

   • The DOM and eventsFind elements with querySelector, react to typing and clicks with event listeners, and update the page live (the balance after a payment) while keeping the calculation in a plain, testable function.
7. 07Form Validation25 min

   • Form validationValidate a form in the browser so people get fast, clear, accessible error messages, and understand why the server must validate everything again anyway.
8. 08Fetch and Async Code15 min

   • Fetch and async codeCall an API from the page with fetch, async and await, handle every kind of response (success, 400, 409, 404 and network failure), and show loading and error states so customers always know what happened.
9. 09Testing JavaScript20 min

   • Testing JavaScriptTest the page's logic (totals, validation and API handling) with small automated tests, using a tiny test runner you can run in the browser console, and see how real projects do the same with Vitest or Jest.
10. 10Final Project20 min

    • Final project: Tallybook's pay-an-invoice pagePlan your final project, an accessible, responsive payment page that calculates exactly, validates clearly, talks to the API safely and is backed by tests.

Assessment and certificate

You are assessed with a final assessment (pass mark 60%) and a final project. Your certificate is awarded when you meet those requirements. Paying for the programme does not award it on its own.