JavaScript From Zero: Make Web Pages Come Alive
Learn the core of JavaScript by building one small app, a task list that adds, filters, saves and loads data, with a built-in check after every exercise.
One payment of $39. Instant online access to the full written course. No subscription. Refund policy.
You start with an HTML page that cannot react. You finish with a working task list app that you built, tested and reviewed yourself: it adds, marks, deletes and filters tasks, saves them in the browser, loads sample data from the internet and proves itself with automatic checks every time it opens. You will understand each part well enough to start a second app on your own.
Who it is for. People who can write basic HTML (headings, paragraphs, lists, buttons and a simple form) and want their pages to react to clicks, forms and live data. No programming experience is needed.
You finish with. My Task List: an app that remembers. Assemble one folder that holds a complete, interactive web app. The app is a task list with a form, a list you can tick and delete from, filter buttons, a menu, saved data and a Load sample tasks button that fetches live data. Two check files prove it works every time the page opens. Everything is code you wrote and understand. As a stretch goal, build a small quiz from the same parts.
Certificate. Finish every lesson, resolve every quiz question with at least 50% right on the first try, and tick the capstone checklist — Apex Flow Academy issues a verifiable Certificate of Completion with a unique ID and a public verification page. It is a certificate of completion, not a degree, licence, accreditation or exam result.
01 · Your First Working JavaScript4 lessons
Set up a project folder, run code in the browser, store values in variables, work with numbers and text, and write your first functions. You finish with the first pieces of your task list app.
- 1.1Run your first JavaScriptFREE
- 1.2Store values in variables
- 1.3Work with numbers and text
- 1.4Write your own functions
02 · Decisions, Lists and Records4 lessons
Make code choose between paths, keep collections of values in arrays, repeat work with loops, and describe a task as an object. You finish with a text version of the task list that runs in the console.
- 2.1Make decisions with if and else
- 2.2Keep lists in arrays
- 2.3Repeat work with loops
- 2.4Describe things with objects
03 · The Brain of Your App4 lessons
Use filter and map to work with lists of tasks, update data by making new copies instead of editing, and write checks before code. You finish with the complete, tested logic file for the task list.
- 3.1Pick items with filter
- 3.2Transform lists with map
- 3.3Update data without editing it
- 3.4Write the check before the code
04 · Connect Your Code to the Page4 lessons
Learn what the DOM is, find and change elements, build list items from data, and react to clicks. You finish with a page that draws your tasks and adds a new one when you press a button.
- 4.1Find elements on the page
- 4.2Change what the page shows
- 4.3Build list items from data
- 4.4React to clicks
05 · Forms, Buttons and Menus4 lessons
Handle a form safely, use one listener for many buttons, build a menu that opens and closes, and keep the whole page in step with one state object. You finish with a task list you can add to, tick off, delete, filter and clear.
- 5.1Handle a form
- 5.2Use one listener for many buttons
- 5.3Build a menu that opens and closes
- 5.4Keep the page in step with one state object
06 · Save It, Load It, Ship It4 lessons
Save tasks so they survive a reload, load live data from the internet, find and fix bugs like a professional, and finish your capstone app with a full test run.
- 6.1Save tasks with localStorage
- 6.2Load live data with fetch
- 6.3Find and fix bugs
- 6.4Finish, test and share your app
Run your first JavaScript
You will be able to
- Open the browser console and run a line of JavaScript.
- Load your own script file from an HTML page.
- Read a PASS or FAIL line from the
checkhelper.
Why this matters
HTML puts things on a page. CSS makes them look good. JavaScript makes them react: a click adds an item, a form checks itself, a list remembers what you typed. Before any of that, you need one habit. Write a little code, run it, and read what happened. This lesson builds the place where you will do that for the whole course.
Learn it
JavaScript is a programming language. That means it is a way to give the computer exact instructions. Every modern web browser can run it, so you install nothing.
You can run JavaScript in two places.
The first is the console. It is a scratch pad built into the browser. You type one line, press Enter, and the browser runs it at once.
The second is a script file. It is a text file that ends in .js. Your HTML page loads it with a <script> tag. The browser then runs the file from top to bottom every time the page opens. Your project will live in script files.
The line console.log('hi') writes a message to the console. Think of it as a window into your code. You will use it all the time to see what your program is doing.
A test helper saves you from guessing. Ours is called check. You give it a name, the answer your code produced, and the answer you expected. It prints PASS when they match and FAIL when they do not. Every exercise in this course ends with checks, so you always know if you got it right.
Set up your project:
- Make a folder called
task-list. - Inside it, create three plain text files:
index.html,app.jsandcheck.js. Any text editor works. A free code editor such as Visual Studio Code is more comfortable (check its current download page). - Copy the code from the next section into the three files and save them.
- Open
index.htmlin your browser by double-clicking it. - Open the console. Right-click the page, choose Inspect, then click the Console tab. In Chrome you can also press Ctrl+Shift+J on Windows and Linux, or Command+Option+J on a Mac.
If your screen looks different, look in the browser menu for "developer tools".
See it in action
Here is index.html. The two script tags sit at the bottom of the page. The order matters: check.js loads first because app.js uses it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Task List</title>
</head>
<body>
<h1>My Task List</h1>
<script src="check.js"></script>
<script src="app.js"></script>
</body>
</html>Next is check.js. Treat it as a black box for now and copy it exactly. By the end of Module 2 you will be able to read every line.
Last is app.js:
Save, then reload the page. The console shows:
Hello from app.js
PASS: two plus three
PASS: joined text
Checks passed: 2, failed: 0Now break a check on purpose. Add this line at the very bottom of app.js and reload:
FAIL: two plus three | expected 6 but got 5A FAIL line gives the check name, the answer you expected, and the answer your code gave. That is the loop for the whole course: change code, reload, read the console.
Common mistakes
- The console is empty. You saved the file but did not reload the page, or the console was filtered. Press F5 to reload and make sure the Console tab is selected.
- A red message says a file failed to load. A file name is spelled differently in the script tag, or the file is in another folder. Keep all three files together and match the names exactly.
- An error says
console.Log is not a function. JavaScript treats capital letters as different letters. Typeconsole.logwith a smalll.
You are done when
The console shows Hello from app.js, two PASS lines and the summary line. You have also seen one FAIL line by breaking a check on purpose, and you know which part of that line was your code's answer.
You finished the free lesson
That is one lesson from the course. The full course gives you every remaining lesson, a quick check and a hands-on task in each one, and the workbook of templates and checklists.
Full course$39
- A computer (Windows, Mac or Linux) and a current desktop web browser such as Chrome, Edge, Firefox or Safari. The steps name Chrome shortcuts. Other browsers have similar developer tools under similar menu names, so look for Developer tools or Inspect if your screen looks different
- A plain text editor. Notepad or TextEdit in plain text mode works. A free code editor such as Visual Studio Code is more comfortable; check its current download page
- A folder on your computer called task-list, where you will keep every file of the project
- An internet connection for Lesson 6.2 and for looking things up. Every other lesson works offline
- Nothing in the core lessons costs money. Optional and free at the time of writing, but check current terms: a live-preview extension for your code editor (for example Live Server for Visual Studio Code) or Python, if you need to serve the folder because saving does not work when you open the file directly; and a free file host if you choose to publish your finished app
- Basic HTML: you can make an .html file with headings, paragraphs, lists, buttons and a form with a text box, and open it in a browser
- You can create folders and save plain text files on your computer
- No prior programming and no CSS knowledge are needed; the style sheet you need is given to you
My Task List: an app that remembers
Assemble one folder that holds a complete, interactive web app. The app is a task list with a form, a list you can tick and delete from, filter buttons, a menu, saved data and a Load sample tasks button that fetches live data. Two check files prove it works every time the page opens. Everything is code you wrote and understand. As a stretch goal, build a small quiz from the same parts.
- index.html and style.css with a form, a summary line, filter buttons, a task list, a More menu and a status line
- check.js exactly as given, and tasks.js holding the rules of the app with no page code
- tests.js with at least twenty checks for the rules, all printing PASS
- app.js that connects the rules to the page using one state object, one render function, one listener on the list and a single function for the menu
- Saving and loading with localStorage that survives a reload and does not break on missing or corrupt saved data
- A Load sample tasks button that uses fetch, checks response.ok, shows a loading message and shows a clear message on failure
- app-tests.js, an end-to-end test that puts your real data back when it finishes and prints all PASS lines
- A short README.txt that says what the app does, how to open it and how to run the checks, plus your notes from the keyboard pass and the bad input pass
- JavaScript
- The language browsers understand for making a page react, such as answering a click or checking a form.
- Console
- A panel in the browser's developer tools where you can type code and where your program can print messages.
- Script file
- A text file ending in .js that holds your code. The page loads it with a script tag and the browser runs it.
- Variable
- A name attached to a value, so you can use and change the value later.
- Value
- A piece of information your code works with, such as a piece of text, a number or true.
- String
- Text inside quotes, such as 'Buy milk'.
- Boolean
- A value that is either true or false and nothing else.
- Function
- A named set of steps that you write once and run whenever you need it.
- Parameter and argument
- A parameter is a name for an input inside a function. An argument is the real value you pass in when you call it.
- Return value
- The result a function sends back to the code that called it.
- Array
- An ordered list of values in square brackets. The first position is 0.
- Object
- A bundle of named values in curly brackets, such as a task with an id, a text and a done flag.
Browse the full Academy encyclopedia
41 checks were run and recorded while writing this course (code, formulas, commands and facts), and it lists 19 official sources it was checked against. Prices, features and policies of outside tools can change, so check each tool's own website.
Created by Apex Flow Academy with AI assistance. For education only; not legal, tax, financial or medical advice. Results depend on your effort and circumstances.
HTML and CSS: Build and Launch Your First Website
You hand-build a clean, mobile-friendly site and put it online.
React and Next.js: Build Modern Web Apps
You start with basic JavaScript. You finish with a multi-page Next.js app that you built, tested and put on a public web address: a catalog with search and filters, a saved list that remembers, a page for every book, a small JSON API, a form that checks its input on the server, page titles, an optimized image and automatic tests. You will understand each part well enough to start a second app on your own.
UX Design With Figma: Design Apps People Love
You research, sketch, prototype and test a real app design. You finish with a clickable prototype, the research and test notes behind it, and a written spec a developer could build from.