12 Web Projects with Javascript

Module Description

This course is designed for students who want to learn how to do Web Programming with Javascript. Over the course of 12 sessions, you will learn the fundamentals of web programming using Javascript by building 12 different projects.

What You’ll Learn?
  • Fundamentals of programming with Javascript
  • How to use Javascript to manipulate web page content
  • How to build interactive web applications with Javascript
  • Best practices for programming websites with Javascript

This course is suitable for learners with prior coding experience with HTML and CSS. Students should be comfortable creating web pages with semantic structure and applying basic styling using CSS. Familiarity with concepts like classes, IDs, and the box model will help learners focus on understanding JavaScript interactions. No prior JavaScript knowledge is required, as core concepts will be introduced progressively through hands-on projects.

Module Curriculum

Lesson 1: Introduction to the DOM

  • Project: Click Counter Button
  • Concepts: querySelector, event listeners, innerText
Lesson 2: Color Changer App

  • Project: Change Background Color
  • Concepts: onclick vs addEventListener, style manipulation
Lesson 3: Digital Clock

  • Project: Live Updating Clock
  • Concepts: Date object, setInterval, dynamic updates
Lesson 4: Image Slider

  • Project: Carousel with Previous/Next
  • Concepts: Arrays, src manipulation, toggling classes
Lesson 5: To-Do List App

  • Project: Add/Delete/Complete Tasks
  • Concepts: createElement, appendChild, removeChild
Lesson 6: Modal Popup

  • Project: Show and Hide Modal Window
  • Concepts: classList.toggle, event.target, overlays
Lesson 7: Accordion/FAQ Section

  • Project: Expandable FAQs
  • Concepts: DOM traversal, toggling height, classList
Lesson 8: Form Validation

  • Project: Live Signup Form Validation
  • Concepts: input/submit events, error display logic
Lesson 9: Calculator

  • Project: Simple Arithmetic Calculator
  • Concepts: button clicks, display updates, conditionals
Lesson 10: Tabs Component

  • Project: Switchable Content Tabs
  • Concepts: data-* attributes, DOM mapping, active state
Lesson 11: Dynamic List Filter

  • Project: Searchable Item List
  • Concepts: input event, filtering elements, includes()
Lesson 12: Final Interactive Portfolio

  • Project: Mini Portfolio with Theme Toggle
  • Concepts: integrating learned skills, modular JS

Module Summary:

  • Price:KES 7,499
  • Duration:12 Sessions
  • Age Group:13-18 Years
  • Level:Explorer
  • Language:Javascript
  • Certificate:Yes