1. Linking CSS to HTML
<head>
<link rel="stylesheet" href="style.css">
</head>What does this do?
This connects your CSS style sheet so your HTML can look cool!
2. Using IDs
<body id="page">
<h1 id="title">My Page</h1>
<h2 id="subheading">Welcome</h2>
<p id="paragraph">Hello, world!</p>
<img src="">
</body>What does this do?
IDs help you find and change things on your web page using code. Put the URL of an image from Google Images inside the src="" to show a picture! (Right-click an image on Google Images, choose "Copy image address", then paste it between the quotes.)
3. Making a Button with an ID
<button id="myButton">Click me!</button>What does this do?
We use ids to talk to buttons with JavaScript.
4. Styling a Button in CSS
#myButton {
background-color: blue;
color: white;
border: 2px solid black;
padding: 10px 20px;
font-size: 16px;
}What does this do?
This is how you make your button look awesome!
5. Button Hover Effect
#myButton:hover {
background-color: red;
}What does this do?
When you move your mouse over the button, the color changes.
6. Alert Function (showAlert)
// In script.js
function showAlert() {
alert("Hello! You clicked the button!");
}What does this do?
Clicking a button can show a pop-up message!
7. What is a Function?
A function is like a mini program inside your big program. It's a set of instructions that does something when you ask for it. For example, you could have a function that shows a message, changes a color, or swaps a picture!
8. Linking JavaScript to HTML
<body>
<!-- your content here -->
<script src="script.js"></script>
</body>What does this do?
This connects your JavaScript file so your page can do cool things!
9. Using getElementById & changeText Function
<p id="myText">Original text</p>
<button onclick="changeText()">Change the text!</button>
// In script.js
function changeText() {
document.getElementById("myText").innerHTML = "The text changed!";
}What does this do?
This is how you use JavaScript to change words on your page.
9a. What does getElementById mean?
Think of your web page like a big Lego city.
Every piece (a title, a paragraph, a picture, a button) is one Lego block called an element.
When you give one block a special name using id="something", it’s like putting a name tag on that block.
document means “the whole web page.”
getElementById("myText") means “go into the page and find the one element with the id of myText.”
After JavaScript finds that element, you can change its words with .innerHTML or change how it looks with .style.
So in this line: document.getElementById("myText").innerHTML = "The text changed!";
JavaScript is: 1) looking at the page (document), 2) finding the element named myText, and 3) changing the words inside it.
10. Changing CSS with a Button (changeStyle Function)
<p id="styleParagraph">Watch me change!</p>
<button onclick="changeStyle()">Change the style!</button>
// In script.js
function changeStyle() {
var el = document.getElementById("styleParagraph");
el.style.color = "purple";
el.style.fontSize = "24px";
}What does this do?
JavaScript can even change the way things look!
11. Changing Background & Title Colors
// In script.js
function changeColors() {
document.body.style.backgroundColor = "lightblue";
document.getElementById("title").style.color = "darkgreen";
}What does this do?
Your page colors can change when you want!
12. Changing Image When Clicked
<img id="myImage" src="" onclick="changeImage()">
// In script.js
function changeImage() {
var img = document.getElementById("myImage");
img.src = "";
}What does this do?
Even pictures can change with JavaScript! Put URLs from Google Images in the src="" (right-click an image on Google Images and "Copy image address") to swap between pictures when you click!