Decent Computer Institute
HTML & CSS Practical Examples Tutorial
Step-by-step examples with code and output placeholders
Decent Computer Institute • FF-12, Amber Complex, Ajwa Road, Vadodara-19 • +91 98257 54652 / 93761 69952 Page 1
Example 6 — Responsive Navbar
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Responsive Navbar</title>
<style>
body{font-family:Arial;margin:0}
.nav{background:#263238;padding:12px;display:flex;align-items:center;justify-content:space-between;
.nav .menu{display:flex;gap:12px}
.nav a{color:#fff;text-decoration:none;padding:6px 10px;border-radius:6px}
@media (max-width:600px){
.nav .menu{display:none}
}
</style>
</head>
<body>
<header class="nav">
<div class="brand">MySite</div>
<nav class="menu">
<a href="#">Home</a><a href="#">Courses</a><a href="#">Contact</a>
</nav>
</header>
<main style="padding:20px"><h2>Responsive Navbar Example</h2><p>Resize window to see behavior.</p><
</body>
</html>
Output (Screenshot Placeholder):
[ Insert screenshot here after running in browser ]
Decent Computer Institute • FF-12, Amber Complex, Ajwa Road, Vadodara-19 • +91 98257 54652 / 93761 69952 Page 2
Example 7 — Responsive Image Gallery
Code:
<!doctype html>
<html>
<head><meta charset="utf-8"><title>Responsive Gallery</title>
<style>
body{font-family:Arial;margin:0;padding:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.grid img{width:100%;height:100px;object-fit:cover;border-radius:6px}
.card{border:1px solid #eee;padding:6px;border-radius:6px;background:#fff}
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<div class="grid">
<div class="card"><img src="[Link] alt="1"></div>
<div class="card"><img src="[Link] alt="2"></div>
<div class="card"><img src="[Link] alt="3"></div>
<div class="card"><img src="[Link] alt="4"></div>
</div>
</body></html>
Output (Screenshot Placeholder):
[ Insert screenshot here after running in browser ]
Decent Computer Institute • FF-12, Amber Complex, Ajwa Road, Vadodara-19 • +91 98257 54652 / 93761 69952 Page 3
Example 8 — Modal Dialog
Code:
<!doctype html>
<html><head><meta charset="utf-8"><title>Modal</title>
<style>
body{font-family:Arial;margin:20px}
.btn{padding:8px 12px;background:#1E88E5;color:#fff;border:none;border-radius:6px;cursor:pointer}
.modal{display:none;position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.5);a
.modal .dialog{background:#fff;padding:20px;border-radius:8px;max-width:400px;width:90%}
.show{display:flex}
</style>
</head>
<body>
<h2>Modal Dialog Example</h2>
<button class="btn" id="open">Open Modal</button>
<div class="modal" id="modal"><div class="dialog"><h3>Modal Title</h3><p>This is a simple modal.</p
<script>
[Link]('open').addEventListener('click',function(){[Link]('modal'
[Link]('close').addEventListener('click',function(){[Link]('modal
</script>
</body></html>
Output (Screenshot Placeholder):
[ Insert screenshot here after running in browser ]
Decent Computer Institute • FF-12, Amber Complex, Ajwa Road, Vadodara-19 • +91 98257 54652 / 93761 69952 Page 4
Example 9 — Simple Form with Validation
Code:
<!doctype html>
<html><head><meta charset="utf-8"><title>Form Validation</title>
<style>body{font-family:Arial;padding:20px}input,textarea{display:block;margin:8px 0;padding:8px;wi
</head>
<body>
<h2>Simple Form (HTML5 Validation)</h2>
<form>
<label>Name <input type="text" name="name" required></label>
<label>Email <input type="email" name="email" required></label>
<label>Message <textarea name="msg" rows="4" required></textarea></label>
<button type="submit">Submit</button>
</form>
</body></html>
Output (Screenshot Placeholder):
[ Insert screenshot here after running in browser ]
Decent Computer Institute • FF-12, Amber Complex, Ajwa Road, Vadodara-19 • +91 98257 54652 / 93761 69952 Page 5
Example 10 — CSS Animation
Code:
<!doctype html>
<html><head><meta charset="utf-8"><title>CSS Animation</title>
<style>
body{font-family:Arial;padding:40px;text-align:center}
.box{width:150px;height:150px;margin:20px auto;background:#42A5F5;border-radius:12px;animation:floa
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-12px)}100%{transform:translat
</style>
</head>
<body>
<h2>CSS Animation: Floating Box</h2>
<div class="box"></div>
</body></html>
Output (Screenshot Placeholder):
[ Insert screenshot here after running in browser ]
Decent Computer Institute • FF-12, Amber Complex, Ajwa Road, Vadodara-19 • +91 98257 54652 / 93761 69952 Page 6
End of Examples
Decent Computer Institute • FF-12, Amber Complex, Ajwa Road, Vadodara-19 • +91 98257 54652 / 93761 69952 Page 7