Overview

Google, IBM & Meta Certificates – 40% Off

One plan covers every Professional Certificate on Coursera.

Static webpages limit your ability to engage your users on a deeper level. In "Building Interactive Web Applications," you’ll elevate your engineering skills by learning to build highly responsive, dynamic web applications. Designed for developers who are comfortable with basic HTML, CSS, and introductory programming, this course emphasizes dynamic user interactions, asynchronous operations, and the architectural patterns that power modern web applications. Through hands-on exercises and examples, you’ll learn how to write interactive JavaScript code, manipulate the Document Object Model (DOM), handle events, and work with asynchronous data using Promises. You’ll also explore how JavaScript is used to build responsive user interfaces, animations, and custom visualizations using technologies like Canvas and SVG. By the end of the course, you’ll be equipped to build richer, more interactive web experiences and be prepared for more advanced front-end development. This is the second course in a four-part series, “Practical JavaScript: From Scratch to React,” that provides you with hands-on experience in creating seamless front- and back-end applications.

Syllabus

Manipulating the DOM (Document Object Model)

This module will expand our understanding of how we can make pages interactive by updating the content of the page, as specified by the DOM. The DOM is a structured representation of what browsers will show and JavaScript allows us to change it dynamically, which in turn makes our pages dynamic. You will learn how to use JavaScript to select page elements, add or remove elements, and modify existing elements.

Building Interactive Applications

This module will focus on a foundational concept of interactive systems programming: events and callback functions. Events allow programs to respond to user actions like clicks, key presses, and mouse movements, while callback functions define what should happen in response to those actions. You will learn how to detect and handle events in JavaScript and attach listeners to DOM elements. This module will also help build an understanding of how JavaScript engines handle events internally. By completing it, you will be able to write interactive applications that respond dynamically to user inputs.

Asynchronous Code and Data Fetching

This module explores how to build applications with functionality that is run asynchronously (meaning that the operations take time). You will learn the essentials of asynchronous programming, which allows your applications to remain responsive even while waiting for external resources. We will focus on using Promises and fetch() to work with external data sources, including public APIs. By the end of this module, you will be able to write code that can retrieve third-party data.

Animations and Custom Graphics

The last module introduces how to bring your web pages to life with animations and custom graphics. You will learn how to write efficient animation code in JavaScript to create smooth, interactive experiences which is essential for everything from subtle UI effects to full-blown web games. We will explore key animation concepts such as frame updates, easing functions, and performance considerations. You’ll also gain hands-on experience generating and manipulating SVG (Scalable Vector Graphics) with JavaScript, giving you precise control over visuals and interactivity. By the end of this module, you’ll be able to build animated elements, dynamic interfaces, and custom game components directly in the browser.