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

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!
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 how to use JavaScript to control the "DOM" (Document Object Model) of a webpage.
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 how to use the DOM API from JavaScript to access elements in your webpages.
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 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.
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 how to use the DOM API from JavaScript to make your webpage react to user events, like clicking, scrolling, and entering fields in forms.
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 how to animate parts of your webpage, using three different techniques- window.setInterval, window.requestAnimationFrame, and CSS animations/transitions.
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 how to include JS libraries on your webpage, so that you can use functionality built by other web developers.
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

Now that you've learned how to manipulate your webpages with JavaScript, what else could you learn?
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.