FreeLevel 2 · Practical Skills

Web Development with JavaScript

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.

About 7 hours
10 modules
1 badge
Final project
Optional verified certificate

Curriculum

01How 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.10 min
02JavaScript 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.25 min
03Arrays, 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.10 min
04HTML 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.15 min
05CSS 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.15 min
06The 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.15 min
07Form ValidationValidate a form in the browser so people get fast, clear, accessible error messages, and understand why the server must validate everything again anyway.25 min
08Fetch 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.15 min
09Testing 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.20 min
10Final ProjectPlan your final project, an accessible, responsive payment page that calculates exactly, validates clearly, talks to the API safely and is backed by tests.20 min
Final assessmentPass it (60% or more) to earn the Web Development with JavaScript course completion badge.

Loading…

Web Development with JavaScript

About 7 hours

10 modules

1 badge

Final project

Optional verified certificate

Curriculum

01How 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.10 min

02JavaScript 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.25 min

03Arrays, 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.10 min

04HTML 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.15 min

05CSS 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.15 min

06The 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.15 min

07Form ValidationValidate a form in the browser so people get fast, clear, accessible error messages, and understand why the server must validate everything again anyway.25 min

08Fetch 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.15 min

09Testing 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.20 min

10Final ProjectPlan your final project, an accessible, responsive payment page that calculates exactly, validates clearly, talks to the API safely and is backed by tests.20 min

Final assessmentPass it (60% or more) to earn the Web Development with JavaScript course completion badge.