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.
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!