Modules
Open a module to see its topics and everything in it.
-
Module 1
GitHub, GitHub Pages, and Your First HTML Page
Students set up a GitHub account and repository, deploy a GitHub Pages site, and write a basic 'Hello, World' HTML document to establish the development workflow used throughout the course.
12 items -
Module 2
Building a Full Website with HTML, Images, and Links
This lesson covers the essential HTML elements for constructing a multi-page website, including semantic markup, embedding images, and creating internal and external hyperlinks.
16 items -
Module 3
Styling Web Pages with CSS
Students learn Cascading Style Sheets fundamentals including selectors, the box model, typography, colors, and layout techniques to visually design the websites built in the previous lesson.
14 items -
Module 4
Introduction to the Document Object Model (DOM)
This lesson introduces the DOM tree structure and explains how browsers parse HTML into a programmable object model, covering basic DOM selection and manipulation using vanilla JavaScript.
13 items -
Module 5
Creating and Validating HTML Forms
Students learn to build HTML forms using input types, labels, and fieldsets, then implement both built-in HTML5 validation attributes and custom JavaScript validation logic.
16 items -
Module 6
External Libraries: jQuery, Bootstrap, and Plotting Tools
This lesson demonstrates how to integrate third-party libraries via CDN, covering jQuery for DOM manipulation, Bootstrap for responsive layout and components, and a plotting library such as Chart.js for data visualization.
16 items -
Module 7
Drawing and Graphics with the HTML5 Canvas
Students explore the HTML5 Canvas API to programmatically draw shapes, paths, text, and images using JavaScript, laying the foundation for interactive graphics in the browser.
13 items -
Module 8
Introduction to JSON and Using It in the Browser
This lesson explains the JSON data format, how to parse and stringify JSON in JavaScript, and how to fetch and display JSON data in a web page using the Fetch API or XMLHttpRequest.
16 items -
Module 9
Implementing Drag and Drop Interactions
Students implement native HTML5 drag-and-drop functionality and explore JavaScript event handling for dragstart, dragover, and drop events to create interactive UI components.
13 items -
Module 10
Animation Techniques in the Browser
This lesson covers CSS transitions and keyframe animations as well as JavaScript-driven animation using requestAnimationFrame, enabling students to create smooth, performant browser animations.
12 items -
Module 11
Designing Mobile-Ready and Responsive Websites
Students learn responsive design principles including fluid grids, flexible images, and CSS media queries, along with the mobile-first design philosophy and viewport configuration for various screen sizes.
14 items -
Module 12
Dynamic Objects and Controls with JavaScript and the DOM
This lesson covers advanced DOM manipulation to dynamically create, modify, and remove HTML elements and event listeners at runtime, building interactive UI controls entirely through JavaScript.
13 items -
Module 13
Building a Browser-Embedded Game
Students apply Canvas drawing, animation, event handling, and game-loop logic to design and build a simple interactive browser game, integrating skills from previous lessons into a complete project.
14 items -
Module 14
Content Management Systems, Webmaster Roles, and Site Maintenance
This lesson surveys popular CMS platforms, their features and limitations, and when to use them versus custom builds, while also covering the professional responsibilities of managing, maintaining, and running production websites and working with clients.
13 items