WEB103 · JavaScript Fundamentals

Categories: Cloud & Software
Wishlist Share

About Course

Learn modern JavaScript from the ground up: values, functions, arrays and objects, then the DOM, events and fetching data from an API. You will make a static page interactive for a real small-business use case.

Build · 6 hours · 4 lessons, a lab, an assessed assignment and a portfolio piece

Who it is for

Learners who can write HTML and CSS and want to add behavior and data to their pages.

Prerequisites

Complete WEB102 or be comfortable writing semantic HTML and basic CSS.

What you will be able to do

  • Write JavaScript using variables, conditionals, loops and functions with clear names.
  • Transform arrays of objects with map, filter, reduce and find.
  • Select and update DOM elements and respond to user events.
  • Fetch JSON data asynchronously with async/await and handle errors gracefully.

Lessons

  • Lesson 1 · Values, variables and functions
  • Lesson 2 · Arrays, objects and data transformation
  • Lesson 3 · The DOM, events and asynchronous code
  • Lesson 4 · Lab and assignment

Lab: Build an interactive product list

You will load a JSON file of products with fetch, render cards into the page, and add a search box and a category filter. You will use the Console and breakpoints to debug at least one problem and add a loading and error state.

Free tools: VS Code with Live Server, browser DevTools (Console and Sources panels), and a local JSON file

Assessed assignment

Create an interactive menu or catalog page for a small business, such as a coffee shop or a hardware store. Load at least 12 items from a JSON file, render them with JavaScript, and add search by name, filtering by category and a running total for items the user adds to an order list. Show a friendly message when nothing matches and when the data fails to load. Include a README explaining how your code is organized into functions.

Criterion Weight What excellent work looks like
Correct functionality 35% Loading, rendering, search, filter and total all work, including empty and error states.
Code quality 25% Uses const and let correctly, small named functions, array methods and no repeated blocks of code.
DOM and events 20% Events are attached cleanly, the page updates without reloading and user input is never inserted as raw HTML.
Documentation and debugging notes 20% The README explains structure and describes one bug found with DevTools and how it was fixed.

Portfolio piece

An interactive JavaScript catalog page driven by JSON data, ready to extend with a real API.

Self-paced, 12-month access. Questions are answered in writing through the student panel. A completion record is issued when you finish the course.

Next step

Continue with WEB104 · Responsive Interfaces and Front-End Frameworks · 6 hours · $42.00

Continue to the next course

Prefer the whole program? Program in Full-Stack Web & Mobile Development · $378.00 (10% less than buying the courses separately)

Show More

What Will You Learn?

  • Write JavaScript using variables, conditionals, loops and functions with clear names.
  • Transform arrays of objects with map, filter, reduce and find.
  • Select and update DOM elements and respond to user events.
  • Fetch JSON data asynchronously with async/await and handle errors gracefully.

Course Content

WEB103 · JavaScript Fundamentals (6 h)
Learn modern JavaScript from the ground up: values, functions, arrays and objects, then the DOM, events and fetching data from an API. You will make a static page interactive for a real small-business use case.

  • Lesson 1 · Values, variables and functions
  • Lesson 2 · Arrays, objects and data transformation
  • Lesson 3 · The DOM, events and asynchronous code
  • Lesson 4 · Lab and assignment
  • WEB103 Assessment · JavaScript Fundamentals
Scroll to Top