COURSE OVERVIEW:

This course is designed for students who want to move from static web pages to truly interactive web pages.

Students will learn how JavaScript works with the DOM to read page content, change styles, create and remove elements, respond to user actions, validate forms, and load external data.

Through structured examples and hands-on mini projects, students will also learn modern asynchronous programming with callbacks, promises, async/await, fetch, and useful browser APIs.

After finishing this course, students will be able to build rich client-side web applications and will be well integrated for full-stack web development courses such as Web301 and Web302.

WHAT YOU'LL LEARN:

• DOM fundamentals: document structure, selecting elements, reading content, attributes, and styling with JavaScript
• Creating, updating, deleting, and traversing elements and nodes in the DOM tree
• Event-driven programming: mouse, keyboard, scroll, load, bubbling, capturing, delegation, and preventing default actions
• Form handling: inputs, checkboxes, radio buttons, select boxes, file reading, validation, and submit behavior
• Browser Object Model topics such as location, history, dimensions, and editable content
• Web APIs including cookies, sessionStorage, localStorage, dialog, and file-related browser features
• AJAX and fetch for loading HTML, JSON, and external data into web pages
• Asynchronous JavaScript: synchronous vs asynchronous code, callback patterns, promises, and async/await
• Useful advanced JavaScript ideas for frontend work, including closure, call/apply, and regular expressions
• Debugging techniques for interactive pages and browser-based applications

PROJECTS:

• Resizable split view
• Interactive UI effects such as parallax, drag, and scroll-based behavior
• TodoMVC
• Work-relax timer

WHO SHOULD ENROLL?

• Students who have completed Web101 and Web201/fun201
• Students who want to build interactive front-end projects instead of static pages only
• Students preparing for Web302, Co-ops, or personal portfolio projects
• Students who want stronger JavaScript problem-solving and debugging skills

FREE RETAKE: If you've already paid for the course, you are welcome to retake the class for free each time it is offered.