If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

Unit: HTML/JS: Making webpages interactive

Get ready to make your webpages interactive

Learn
Welcome to making webpages interactive
(Opens a modal)
Review HTML/CSS
(Opens a modal)
Review JavaScript
(Opens a modal)
Practice
HTML/CSS recap
5 questions
JavaScript recap
12 questions

JS and the DOM

Learn
Putting JS in a webpage
(Opens a modal)
Challenge: A scripted script tag
(Opens a modal)
The DOM (Document Object Model)
(Opens a modal)
Debugging webpages with the browser console
(Opens a modal)
Practice
Understanding the DOM
4 questions

DOM access methods

Learn
Finding elements by ID
(Opens a modal)
Challenge: ID changer
(Opens a modal)
Finding multiple DOM elements by tag or class name
(Opens a modal)
Challenge: Custom name tags
(Opens a modal)
Finding elements by CSS selector
(Opens a modal)
Challenge: Query modernizer
(Opens a modal)
Summary: DOM access methods
(Opens a modal)

DOM modification

Learn
Changing attributes
(Opens a modal)
Challenge: Avatar attributes
(Opens a modal)
Changing styles
(Opens a modal)
Challenge: Style guide
(Opens a modal)
Changing CSS classes
(Opens a modal)
Challenge: Classification
(Opens a modal)
Setting innerHTML and textContent
(Opens a modal)
Challenge: The inside story
(Opens a modal)
Creating elements from scratch
(Opens a modal)
Challenge: Create a solar system
(Opens a modal)
Summary: DOM modification techniques
(Opens a modal)

DOM events

Learn
Making webpages interactive with events
(Opens a modal)
Adding an event listener
(Opens a modal)
Challenge: Cat Clicker
(Opens a modal)
DOM event types
(Opens a modal)
Using the event properties
(Opens a modal)
Challenge: Cat-stache
(Opens a modal)
Processing forms with events
(Opens a modal)
Challenge: Mad Libs
(Opens a modal)
Preventing default behavior of events
(Opens a modal)
Summary: DOM events
(Opens a modal)

DOM animation

Learn
The window object
(Opens a modal)
Animating DOM with setInterval
(Opens a modal)
Challenge: Stopwatch
(Opens a modal)
Animating styles with requestAnimationFrame
(Opens a modal)
Challenge: Catwalk
(Opens a modal)
Animating styles with CSS animations
(Opens a modal)
What DOM animation technique should you use?
(Opens a modal)

Using JS libraries in your webpage

Learn
What's a JS library?
(Opens a modal)
Using a JS library: Slideshow library
(Opens a modal)
Where are JS libraries hosted?
(Opens a modal)
The world of JS libraries
(Opens a modal)
Which JS library should you use?
(Opens a modal)
Practice
Using JS libraries
5 questions

Further learning

Learn
What to learn next
(Opens a modal)

About this unit

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.