html-lab/. Inside it create index.html and style.css. Open index.html in your browser. Refresh after every change.Exercises 1–5: HTML Basics
Exercise 1 — Your First Page
Create a valid HTML5 page with: a title ("My First Page"), a main heading with your name, a paragraph describing yourself, and a link to any website.
Show Answer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>My First Page</title>
</head>
<body>
<h1>Uzair Varsaji</h1>
<p>Hi! I'm a cybersecurity student learning to code.</p>
<a href="https://kalirange.com">Visit KaliRange</a>
</body>
</html>Exercise 2 — Formatting & Lists
Create a page about your top 3 skills. Use: an ordered list for your skills, an unordered list for your hobbies, bold text for each skill name, and an italic description for each.
Show Answer
<h2>My Skills</h2>
<ol>
<li><strong>Python</strong> — <em>scripting and automation</em></li>
<li><strong>Cybersecurity</strong> — <em>ethical hacking and defence</em></li>
<li><strong>Networking</strong> — <em>TCP/IP and Cisco devices</em></li>
</ol>
<h2>Hobbies</h2>
<ul>
<li>CTF competitions</li>
<li>Gym</li>
<li>Reading</li>
</ul>Exercise 3 — Images & Links
Add to your page: a profile image (use any URL or local file), a navigation bar with 3 links (Home, About, Contact), and each link should open in a new tab.
Show Answer
<nav>
<a href="index.html" target="_blank">Home</a> |
<a href="about.html" target="_blank">About</a> |
<a href="contact.html" target="_blank">Contact</a>
</nav>
<img src="https://via.placeholder.com/200" alt="Profile Photo" width="200"/>Exercise 4 — Contact Form
Build a contact form with: name (text), email, message (textarea), subject dropdown (General / Bug Report / Feature Request), an "I agree to terms" checkbox, and a submit button.
Show Answer
<form action="#" method="POST">
<label>Name: <input type="text" name="name" required/></label><br/><br/>
<label>Email: <input type="email" name="email" required/></label><br/><br/>
<label>Subject:
<select name="subject">
<option>General</option>
<option>Bug Report</option>
<option>Feature Request</option>
</select>
</label><br/><br/>
<label>Message:<br/>
<textarea name="message" rows="5" cols="40"></textarea>
</label><br/><br/>
<label><input type="checkbox" required/> I agree to the terms</label><br/><br/>
<button type="submit">Send Message</button>
</form>Exercise 5 — Data Table
Create an HTML table showing your weekly study schedule (7 days × 3 time slots: Morning, Afternoon, Evening). Use proper thead/tbody, and merge the weekend cells with colspan.
Show Answer
<table border="1">
<thead>
<tr>
<th>Day</th><th>Morning</th><th>Afternoon</th><th>Evening</th>
</tr>
</thead>
<tbody>
<tr><td>Monday</td><td>Python</td><td>Networking</td><td>CTF Practice</td></tr>
<tr><td>Tuesday</td><td>HTML/CSS</td><td>JavaScript</td><td>Review</td></tr>
<tr><td>Saturday</td><td colspan="3">Rest / Personal Projects</td></tr>
<tr><td>Sunday</td><td colspan="3">Review Week / Plan Next Week</td></tr>
</tbody>
</table>Exercises 6–10: CSS Styling
Exercise 6 — Basic Styling
Create a style.css and link it to your HTML. Style the body: dark background (#0d1117), light text (#e6edf3), font-family Inter, padding 20px. Style h1 to be red (#dc2626).
Show Answer
/* style.css */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: #0d1117;
color: #e6edf3;
font-family: 'Inter', sans-serif;
padding: 20px;
}
h1 { color: #dc2626; margin-bottom: 16px; }Exercise 7 — Navigation Bar
Style a navigation bar: dark background, links displayed horizontally with flexbox, no underline, white links that turn red on hover, fixed at top of page.
Show Answer
nav {
background: #161b22;
padding: 16px 32px;
display: flex;
gap: 24px;
position: fixed;
top: 0; left: 0; right: 0;
border-bottom: 1px solid #30363d;
}
nav a {
color: #e6edf3;
text-decoration: none;
font-size: 14px;
}
nav a:hover { color: #dc2626; }Exercise 8 — Card Component
Create a card with: dark background, rounded corners (8px), subtle border, padding, a title, description, and a "Read More" button. The card should have a hover effect (lift with box-shadow).
Show Answer
.card {
background: #161b22;
border: 1px solid #30363d;
border-radius: 8px;
padding: 24px;
max-width: 360px;
transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.card h3 { color: #e6edf3; margin-bottom: 8px; }
.card p { color: #8b949e; font-size: 14px; margin-bottom: 16px; }
.card .btn {
background: #dc2626;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
}
.card .btn:hover { background: #b91c1c; }Exercise 9 — CSS Grid Layout
Create a 3-column grid of cards that collapses to 2 columns on tablets and 1 column on mobile. Use CSS Grid with media queries.
Show Answer
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
padding: 32px;
}
@media (max-width: 768px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.grid { grid-template-columns: 1fr; }
}<!-- HTML -->
<div class="grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>Exercise 10 — Progress Bars
Create skill progress bars for 4 skills (Python 90%, Networking 75%, Web Dev 60%, C++ 40%). Each bar should animate from 0% to the target width when the page loads (use CSS animations).
Show Answer
<style>
.skill { margin-bottom: 20px; }
.skill-name { display: flex; justify-content: space-between; margin-bottom: 6px; }
.bar-bg { background: #21262d; border-radius: 4px; height: 8px; }
.bar-fill {
height: 8px; border-radius: 4px; background: #dc2626;
width: 0; animation: fill 1.5s ease forwards;
}
@keyframes fill { to { width: var(--w); } }
</style>
<div class="skill">
<div class="skill-name"><span>Python</span><span>90%</span></div>
<div class="bar-bg"><div class="bar-fill" style="--w:90%"></div></div>
</div>
<div class="skill">
<div class="skill-name"><span>Networking</span><span>75%</span></div>
<div class="bar-bg"><div class="bar-fill" style="--w:75%"></div></div>
</div>Exercises 11–15: Final Projects
Exercise 11 — Resume Page
Build a one-page resume with sections: Header (name, title, contacts), About Me, Skills (with progress bars), Experience, Education, and Projects. Style with a clean two-column layout.
Exercise 12 — Product Landing Page
Create a product landing page with: hero section (big headline, subtext, CTA button), features section (3 columns of icons + text), pricing section (3 cards), and a footer.
Exercise 13 — Dark Mode Toggle
Create a page with a toggle button that switches between dark and light mode. Store the user's preference in localStorage so it persists on refresh.
Show Answer
<style>
body { background: #0d1117; color: #e6edf3; transition: 0.3s; }
body.light { background: #ffffff; color: #1a1a1a; }
</style>
<button id="toggle">🌙 Dark Mode</button>
<script>
const btn = document.getElementById("toggle");
if (localStorage.getItem("mode") === "light") {
document.body.classList.add("light");
btn.textContent = "☀️ Light Mode";
}
btn.addEventListener("click", () => {
document.body.classList.toggle("light");
const isLight = document.body.classList.contains("light");
btn.textContent = isLight ? "☀️ Light Mode" : "🌙 Dark Mode";
localStorage.setItem("mode", isLight ? "light" : "dark");
});
</script>Exercise 14 — CSS Animation Gallery
Create a gallery with 6 images that appear with a fade-in animation, have a zoom effect on hover, show an overlay with title and link on hover, and a lightbox when clicked.
Exercise 15 — Final: Full Portfolio
Combine everything: multi-page portfolio with Home, Projects, Blog, and Contact pages. Consistent nav and footer. Mobile-responsive. Smooth scroll. Dark theme. At least one animated element.
username.github.io) and share the URL!