HTML/JS: Making webpages interactive

Contents

Once you've taken both Intro to JS and Intro to HTML/CSS, take this course to learn how use HTML/CSS with the JavaScript DOM API to make your webpages interactive.

Test yourself

See how you score on these 8 practice questions

Get ready to make your webpages interactive

Are you ready to learn how to make your webpages interactive with HTML, JavaScript, and the DOM API? You'll find out with our review quizzes in this tutorial. Get pumped!

Welcome to making webpages interactive

Quiz: JavaScript recap

Practice

JS and the DOM

Learn how to use JavaScript to control the "DOM" (Document Object Model) of a webpage.

Putting JS in a webpage

Challenge: A scripted script tag

The DOM (Document Object Model)

Quiz: What is DOM?

Practice

Debugging webpages with the browser console

DOM access methods

Learn how to use the DOM API from JavaScript to access elements in your webpages.

Finding elements by ID

Challenge: ID changer

Finding multiple DOM elements by tag or class name

Challenge: Custom name tags

Finding elements by CSS selector

Challenge: Query modernizer

Summary: DOM access methods

DOM modification

Learn how to use the DOM API from JavaScript to modify aspects of your webpage elements like their styles and attributes, plus create new elements from scratch.

Changing attributes

Challenge: Avatar attributes

Changing styles

Challenge: Style guide

Changing CSS classes

Challenge: Classification

Setting innerHTML and textContent

Challenge: The inside story

Creating elements from scratch

Challenge: Create a solar system

Summary: DOM modification techniques

DOM events

Learn how to use the DOM API from JavaScript to make your webpage react to user events, like clicking, scrolling, and entering fields in forms.

Making webpages interactive with events

Adding an event listener

Challenge: Cat Clicker

DOM event types

Using the event properties

Challenge: Cat-stache

Processing forms with events

Challenge: Mad Libs

Preventing default behavior of events

Summary: DOM events

DOM animation

Learn how to animate parts of your webpage, using three different techniques- window.setInterval, window.requestAnimationFrame, and CSS animations/transitions.

The window object

Animating DOM with setInterval

Challenge: Stopwatch

Animating styles with requestAnimationFrame

Challenge: Catwalk

Animating styles with CSS animations

What DOM animation technique should you use?