Complete Professional Website
Ab HTML, CSS aur JavaScript ko combine karke ek complete professional website banana seekhen.
📘 Final Lesson
Hindi: Ab tak humne HTML, CSS, Responsive Design, JavaScript, Forms, Flexbox, Grid, Animation, Events, DOM, Navbar, Hero aur Contact Form ke baare mein seekha hai.
Ab in sab concepts ko ek saath use karke ek complete professional website banayenge.
English: In this final lesson, we will combine the concepts learned throughout the course to create a complete professional website.
1️⃣ Website Structure
Ek professional website ko different sections mein divide kiya ja sakta hai.
• Navbar
• Hero Section
• About Section
• Services Section
• Projects Section
• Contact Section
• Footer
2️⃣ Navbar
Navbar website ke different pages ya sections ke beech navigation provide karta hai.
<nav class="navbar">
<h2>OMI</h2>
<div>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
</nav>3️⃣ Hero Section
Hero website ka main introduction hota hai.
<section class="hero">
<div>
<h1>
Build Your Digital Future
</h1>
<p>
We create modern websites
for businesses.
</p>
<a href="#contact">
Contact Us
</a>
</div>
</section>4️⃣ About Section
About section mein business, person ya company ke baare mein information di ja sakti hai.
<section class="about">
<h2>About Us</h2>
<p>
We provide professional digital
solutions for modern businesses.
</p>
</section>5️⃣ Services Section
Services section mein website par available services display ki ja sakti hain.
<section class="services">
<h2>Our Services</h2>
<div class="service-grid">
<div class="card">
Web Design
</div>
<div class="card">
E-Commerce
</div>
<div class="card">
Digital Marketing
</div>
</div>
</section>6️⃣ Projects Section
Projects section mein apne completed work ya portfolio projects show kar sakte hain.
<section class="projects">
<h2>Our Projects</h2>
<div class="project-grid">
<div class="project-card">
Food Website
</div>
<div class="project-card">
Clothing Website
</div>
<div class="project-card">
Business Website
</div>
</div>
</section>7️⃣ Contact Section
Contact section mein user ko business se contact karne ka option diya ja sakta hai.
<section id="contact">
<h2>Contact Us</h2>
<form id="contactForm">
<input
type="text"
placeholder="Your Name"
required>
<input
type="email"
placeholder="Your Email"
required>
<textarea
placeholder="Your Message"
required></textarea>
<button type="submit">
Send Message
</button>
</form>
</section>8️⃣ Footer
Footer website ka bottom section hota hai. Isme copyright, links aur contact information di ja sakti hai.
<footer>
<p>
© 2026 OMI. All Rights Reserved.
</p>
</footer>9️⃣ Website Layout
CSS se website ke sections ko professional layout diya ja sakta hai.
.container{
max-width:1100px;
margin:auto;
padding:60px 20px;
}
.grid{
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:20px;
}🔟 Responsive Website
Website ko mobile, tablet aur desktop sabhi devices par properly work karna chahiye.
@media(max-width:700px){
.grid{
grid-template-columns:1fr;
}
h1{
font-size:32px;
}
}1️⃣1️⃣ JavaScript Add Karna
JavaScript se website ko interactive banaya ja sakta hai.
const button =
document.querySelector(".hero-btn");
button.addEventListener("click", function(){
alert("Welcome to OMI!");
});💻 Complete Website Example
Ab ek simple complete website ko ek hi HTML file mein combine karte hain.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>
OMI Professional Website
</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:Arial;
color:#172033;
}
.navbar{
padding:20px 7%;
display:flex;
justify-content:space-between;
align-items:center;
background:#07111f;
}
.navbar h2{
color:#00d9ff;
}
.navbar a{
color:white;
text-decoration:none;
margin-left:20px;
}
.hero{
min-height:500px;
display:flex;
align-items:center;
padding:70px 7%;
background:#07111f;
color:white;
}
.hero h1{
font-size:50px;
margin-bottom:15px;
}
.hero p{
color:#b5c3d0;
margin-bottom:25px;
}
.hero a{
display:inline-block;
padding:13px 22px;
background:#00d9ff;
color:#07111f;
text-decoration:none;
border-radius:8px;
}
.section{
padding:70px 7%;
text-align:center;
}
.cards{
max-width:1000px;
margin:35px auto;
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:20px;
}
.card{
padding:30px;
background:#f5f7fa;
border-radius:12px;
}
.contact{
background:#f5f7fa;
}
form{
max-width:600px;
margin:30px auto;
}
input,
textarea{
width:100%;
padding:13px;
margin-bottom:15px;
border:1px solid #ddd;
border-radius:8px;
}
textarea{
min-height:130px;
}
button{
padding:13px 22px;
border:0;
background:#00d9ff;
border-radius:8px;
font-weight:bold;
cursor:pointer;
}
footer{
padding:25px;
text-align:center;
background:#07111f;
color:white;
}
@media(max-width:700px){
.navbar{
flex-direction:column;
gap:15px;
}
.hero h1{
font-size:34px;
}
.cards{
grid-template-columns:1fr;
}
}
</style>
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar">
<h2>OMI</h2>
<div>
<a href="#home">
Home
</a>
<a href="#about">
About
</a>
<a href="#services">
Services
</a>
<a href="#contact">
Contact
</a>
</div>
</nav>
<!-- HERO -->
<section class="hero"
id="home">
<div>
<h1>
Build Your Digital Future
</h1>
<p>
Modern and professional
websites for businesses.
</p>
<a href="#contact">
Contact Us
</a>
</div>
</section>
<!-- ABOUT -->
<section class="section"
id="about">
<h2>
About Us
</h2>
<p>
We create modern digital
solutions for businesses.
</p>
</section>
<!-- SERVICES -->
<section class="section"
id="services">
<h2>
Our Services
</h2>
<div class="cards">
<div class="card">
Web Design
</div>
<div class="card">
E-Commerce
</div>
<div class="card">
Digital Marketing
</div>
</div>
</section>
<!-- CONTACT -->
<section class="section contact"
id="contact">
<h2>
Contact Us
</h2>
<form id="contactForm">
<input
type="text"
placeholder="Your Name"
required>
<input
type="email"
placeholder="Your Email"
required>
<textarea
placeholder="Your Message"
required>
</textarea>
<button type="submit">
Send Message
</button>
</form>
</section>
<!-- FOOTER -->
<footer>
© 2026 OMI.
All Rights Reserved.
</footer>
<script>
const form =
document.getElementById("contactForm");
form.addEventListener(
"submit",
function(event){
event.preventDefault();
alert(
"Thank you for contacting OMI!"
);
}
);
</script>
</body>
</html>🎓 Course Complete
Is course ke through aapne website development ke important basics seekhe:
✅ HTML
✅ CSS
✅ Responsive Design
✅ Flexbox
✅ CSS Grid
✅ CSS Animation
✅ JavaScript
✅ JavaScript Events
✅ DOM
✅ Forms
✅ Navbar
✅ Hero Section
✅ Contact Form
✅ Complete Website Structure
⚠️ Important Note
Ab aapke paas ek website ko zero se build karne ke liye basic foundation hai.
🚀 Congratulations!
Aapne Web Development Basics ke 21 lessons complete kar liye hain.
Ab next step mein in concepts ko use karke real-world websites ko samajhna aur banana start kiya ja sakta hai.