How HTML, CSS and JavaScript work together
Build one small page from structure, style and behavior.
- Explain the jobs of HTML, CSS and JavaScript
- Connect a script to a page
- Recognize the DOM as the browser representation of HTML
A web page has three cooperating layers. HTML supplies meaningful elements; CSS controls presentation; JavaScript responds to events and changes the page. The browser turns the HTML into a Document Object Model (DOM): a tree of objects that JavaScript can read and update. You can study the companion HTML and CSS tracks alongside this one.
Try it
Up to 15 XPAssemble the page
Assign each mission to a web layer. Watch the live page change, then click the button after you add its behavior.
Page recipe
<h2>Visit counter</h2>
<button>Count visit</button>
.card { background: lavender; padding: 1rem; }
button.addEventListener('click', countVisit)
Choose the layer that creates the page elements.
One page, three files
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>Visit counter</title>
6 <link rel="stylesheet" href="style.css">
7 <script src="app.js" defer></script>
8 </head>
9 <body>
10 <h1>Visit counter</h1>
11 <button id="count" type="button">Count visit</button>
12 <p id="result" role="status">Visits: 0</p>
13 </body>
14</html>body { font: 1rem system-ui; max-width: 32rem; margin: 3rem auto; }
button { background: rebeccapurple; color: white; padding: .75rem 1rem; }1let visits = 0;
2const button = document.querySelector("#count");
3const result = document.querySelector("#result");
4button.addEventListener("click", () => {
5 visits += 1;
6 result.textContent = "Visits: " + visits;
7});The defer attribute downloads the script while HTML is parsed and runs it after the document is ready. The button works with a keyboard as well as a pointer. The status paragraph announces the changed count to assistive technology. CSS can change without changing the script, and the HTML still communicates meaning when the script is unavailable.
Key takeaways
HTML is structure and meaning; CSS is presentation; JavaScript is behavior.
The DOM lets JavaScript find and update HTML elements.
Use a deferred script, semantic controls and a status region for updates.
Lesson quiz
2 questions · pass with 2 correct · up to 50 XP
Passing this quiz completes the lesson and keeps your streak going. Questions you miss come back in review sessions later.
Practice: write JavaScript
Write the program, run it against the test cases, and use the feedback to build your JavaScript skills.
Choose the right web layer
Input is a comma-separated list of tasks. For each task print HTML, CSS, or JavaScript: heading and button create elements; color and spacing style them; click and update add behavior.
- All layers
- Another order
JavaScript runs in a sandboxed browser frame with a 1.5 second time limit. Input is available as the string variable input.
Questions about this lesson
Stuck? Ask. Figured something out? Share it. Explaining is one of the best ways to learn.
Loading posts…