Stories

Sample Code: My First Silly Website

August 7, 2025 design, Footer, photos, Technology by VKULJAK

Here’s a playful, beginner-friendly Bootstrap website that introduces HTML, CSS, and JavaScript in a lighthearted way. It’s called “My First Silly Website”—complete with a dancing button, a color-changing header, and a surprise alert.

🧩 Files Included:

index.html (main page)
style.css (custom styles)
script.js (JavaScript fun)

Index:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>My First Silly Website</title>
<link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css” rel=”stylesheet”>
<link rel=”stylesheet” href=”style.css”>
</head>
<body class=”text-center mt-5″>

<h1 id=”main-header” class=”text-primary”>Welcome to My Silly Site!</h1>
<p class=”lead”>Click the button below to unleash chaos.</p>

<button id=”silly-button” class=”btn btn-warning btn-lg”>Do Not Click Me</button>

<div class=”mt-5″>
<img src=”https://placekitten.com/300/200″ alt=”Random Kitten” class=”img-fluid rounded shadow”>
<p class=”text-muted mt-2″>Because every site needs a kitten.</p>
</div>

CSS:

body {
background-color: #f0f8ff;
font-family: ‘Comic Sans MS’, cursive, sans-serif;
}

#silly-button {
animation: wiggle 1s infinite;
}

@keyframes wiggle {
0% { transform: rotate(0deg); }
25% { transform: rotate(5deg); }
50% { transform: rotate(-5deg); }
75% { transform: rotate(5deg); }
100% { transform: rotate(0deg); }
}

JS:

document.getElementById(“silly-button”).addEventListener(“click”, function() {
alert(“You clicked the forbidden button! Now the header changes color.”);
const header = document.getElementById(“main-header”);
header.style.color = “hotpink”;
header.textContent = “Chaos Unleashed!”;
});

🛠 What This Teaches:

HTML: Structure of a webpage (headings, buttons, images)
Bootstrap: Quick styling with classes like btn, text-center, img-fluid
CSS: Custom styles and animations
JavaScript: Interactivity (click events, DOM manipulation)