Skip to content
JavaScript Fundamentals: Build Your First Web App
Understand JavaScript from its origins to your first useful app. Learn values, functions, collections, DOM events, storage, and async data by building Pocket Ledger.
From the language’s origins to an app of your own
Discover why JavaScript was created, how its influences still shape everyday code, and how to turn small experiments into a working browser app. Build confidence through explanations, predictions, hands-on practice, and clear checks.
Build Pocket Ledger
Create a small expense app with a form, categories, filtering, totals, browser-local saving, and sample-data import. The project grows across seven complete versions so every new idea has a visible purpose. Use fictional records and personalize the result.
What you will learn
Explain why JavaScript exists and connect an HTML button to a named JavaScript function.
Distinguish text from numbers, choose let or const, and write explicit conditions for a small expense rule.
Implement an amount parser, explain function scope and callbacks, and check edge cases with console.assert.
Model a list of expense objects and explain filtering, iteration, record identity, and data validation.
Build add, delete, and filter interactions using state and DOM rendering with clear validation feedback.
Persist a validated expense list in localStorage and explain the limits and recovery path.
Use async/await and fetch to import validated data, handle errors, prevent duplicate imports, and review the finished project.
History that helps the code make sense
Begin with the 1995 origin story and the distinction between JavaScript, ECMAScript, and the browser. Revisit useful connections as you practice: functions as values, the typeof null surprise, numeric precision, array ordering, serialization, and asynchronous behavior. Short fact boxes link to primary sources and official documentation.
Practice with a clear way to check your work
28 text-and-code lessons across seven modules.
14 hands-on labs and seven debugging situations.
42 knowledge checks with answer commentary.
Complete, copyable files for seven independent project stages.
Expected results, a final behavior checklist, and a manual self-review rubric.
Allow approximately 16–24 hours for reading, experiments, labs, and customization. This is a hands-on estimate, not video duration. Pause, repeat, and keep your own test notes.
Your learning path
1. How JavaScript Happened
Meet the language’s origins and influences, distinguish the language from the browser, and make your first page respond.
2. Values, Variables, and Decisions
Make text, numbers, booleans, and conditions predictable before collecting expenses.
3. Functions, Scope, and Small Tests
Turn repeated calculations into named functions with clear inputs, outputs, and checks.
4. Arrays, Objects, and Useful Collections
Represent expenses as records, select useful subsets, and calculate totals without losing track of identity.
5. DOM, Events, and Forms
Connect the data model to an accessible form, expense list, category filter, and visible total.
6. State That Survives a Reload
Serialize records, restore browser-local data, and handle unavailable or malformed storage honestly.
7. Asynchronous Data and Your Finished App
Import JSON with clear loading and error states, then demonstrate an app you can explain and extend.
A small, approachable toolset
A current desktop browser, its Developer Tools, and a code editor.
Plain HTML, CSS, and JavaScript with no framework or package installation required for the app.
A guided local HTTP server setup for storage and data fetching; an editor preview extension is one option.
An optional static HTTPS host if you want to share a demonstration.
Finish with something you can explain
Demonstrate adding, filtering, deleting, saving, and importing records. Submit the project to your own self-review: keep a README, a test record, an original improvement, and the explanation of a defect you repaired. This foundation prepares you for deeper JavaScript practice and later React, TypeScript, and backend work.