Day 1 – How to Make My First Webpage (HTML)
How to:
-
Open your code editor (Notepad or any editor).
-
Write your HTML structure:
<html>,<head>,<body>. -
Add a title inside
<head>:<title>My First Webpage</title>. -
Add your name as a heading:
<h1>Hello, my name is Ada</h1>. -
Add paragraphs for age and favorite food:
<p>I am 9 years old.</p> -
Save the file as
day1.htmland open it in a browser.
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, my name is Ada</h1>
<p>I am 9 years old.</p>
<p>My favorite food is rice and chicken.</p>
</body>
</html>
Day 2 – How to Add Pictures & Lists (HTML)
How to:
-
Start a new HTML file.
-
Add a heading:
<h1>My Favorite Animals</h1>. -
Create a list using
<ul>and<li>for animals. -
Add a picture of one animal using
<img src="link" alt="description">. -
Save and open it to see your list and picture.
<!DOCTYPE html>
<html>
<head>
<title>My Favorite Animals</title>
</head>
<body>
<h1>My Favorite Animals</h1>
<ul>
<li>Dog</li>
<li>Cat</li>
<li>Elephant</li>
</ul>
<img src="https://place-puppy.com/200x200" alt="Cute Puppy">
</body>
</html>
Day 3 – How to Color Text (CSS)
How to:
-
Open a new HTML file.
-
Add
<style>inside<head>to write CSS. -
Change the heading color and size:
h1 { color: blue; font-size: 50px; }. -
Change paragraph color and background:
p { color: green; background-color: yellow; }. -
Add your heading and paragraph inside
<body>.
<!DOCTYPE html>
<html>
<head>
<title>Colorful Name</title>
<style>
h1 { color: blue; font-size: 50px; }
p { color: green; background-color: yellow; }
</style>
</head>
<body>
<h1>My Name is Ada</h1>
<p>I love learning coding!</p>
</body>
</html>
Day 4 – How to Decorate a Picture (CSS)
How to:
-
Add a picture using
<img src="link">. -
Inside
<style>, add CSS:-
border: 5px solid red;→ red border -
border-radius: 15px;→ rounded corners -
padding: 10px;→ space around picture
-
-
Center everything using
body { text-align: center; }.
<!DOCTYPE html>
<html>
<head>
<title>Decorated Picture</title>
<style>
img {
border: 5px solid red;
border-radius: 15px;
padding: 10px;
}
body { text-align: center; }
</style>
</head>
<body>
<h1>This is me!</h1>
<img src="https://placekitten.com/200/200" alt="Kitten">
</body>
</html>
Day 5 – How to Make a Button Pop Up a Message (JS)
How to:
-
Add a button with
<button onclick="sayHello()">Click Me</button>. -
Write a
<script>inside<body>or<head>. -
Create a function:
function sayHello() { alert("Hello!"); }. -
Save and click the button to see the message.
<!DOCTYPE html>
<html>
<head>
<title>Button Example</title>
<style>
button { font-size: 20px; padding: 10px; background-color: lightblue; }
</style>
</head>
<body>
<h1>Click the Button!</h1>
<button onclick="sayHello()">Click Me</button>
<script>
function sayHello() {
alert("Hello, I am learning coding!");
}
</script>
</body>
</html>
Day 6 – How to Change Background Color (JS)
How to:
-
Add a button:
<button onclick="changeColor()">Change Color</button>. -
Inside
<script>write:
function changeColor() {
document.body.style.backgroundColor = "lightgreen";
}
-
Add CSS to style the button.
-
Save and click to change the page background.
<!DOCTYPE html>
<html>
<head>
<title>Background Color Changer</title>
<style>
button { font-size: 18px; padding: 10px; background-color: yellow; }
</style>
</head>
<body>
<h1>Click to Change Background</h1>
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor() {
document.body.style.backgroundColor = "lightgreen";
}
</script>
</body>
</html>
Day 7 – How to Make a Click Counter Game (JS)
How to:
-
Create a
<span id="count">0</span>to show clicks. -
Add a button with
onclick="addClick()". -
Inside
<script>write:
let count = 0;
function addClick() {
count = count + 1;
document.getElementById("count").innerText = count;
}
-
Style the button and counter using
<style>.
<!DOCTYPE html>
<html>
<head>
<title>Click Counter</title>
<style>
button { font-size: 20px; padding: 10px; background-color: pink; }
span { font-weight: bold; font-size: 25px; color: red; }
</style>
</head>
<body>
<h1>Click the Button!</h1>
<p>Clicks: <span id="count">0</span></p>
<button onclick="addClick()">Click Me</button>
<script>
let count = 0;
function addClick() {
count = count + 1;
document.getElementById("count").innerText = count;
}
</script>
</body>
</html>
Day 8 – How to Make a Mini Quiz Game (JS)
How to:
-
Add a button:
<button onclick="startQuiz()">Start Quiz</button>. -
Inside
<script>write a function:
function startQuiz() {
let answer = prompt("What is 2 + 2?");
if(answer == "4") {
alert("Correct!");
} else {
alert("Try again!");
}
}
-
Style the button in
<style>. -
Save and click to play the quiz.
<!DOCTYPE html>
<html>
<head>
<title>Mini Quiz</title>
<style>
button { font-size: 20px; padding: 10px; background-color: orange; }
</style>
</head>
<body>
<h1>Mini Quiz</h1>
<button onclick="startQuiz()">Start Quiz</button>
<script>
function startQuiz() {
let answer = prompt("What is 2 + 2?");
if(answer == "4") {
alert("Correct!");
} else {
alert("Try again!");
}
}
</script>
</body>
</html
0 comments:
Post a Comment