First Website

🌐 Website Kaise Banti Hai?

Hindi

Ek basic website banane ke liye hum mainly HTML, CSS aur JavaScript ka use karte hain.

HTML website ka structure banata hai, CSS website ko design karta hai aur JavaScript website ko interactive banata hai.

English

A basic website can be created using HTML, CSS and JavaScript.

HTML creates the structure, CSS creates the design, and JavaScript adds interaction.

🧱 Step 1 — HTML Structure

Hindi

Sabse pehle website ka basic HTML structure banate hain.

<!DOCTYPE html>

<html>

<head>

    <title>My First Website</title>

</head>

<body>

    <h1>Welcome to My Website</h1>

    <p>
        This is my first website.
    </p>

</body>

</html>

English

First, we create the basic HTML structure of the webpage.

🎨 Step 2 — Add CSS

Hindi

Ab CSS ki help se website ko attractive banate hain.

<style>

body{
    font-family:Arial;
    background:#f5f7fa;
    text-align:center;
}

h1{
    color:#008bb0;
}

p{
    color:#475569;
}

</style>

English

CSS is used to improve the visual appearance of the webpage.

🖱️ Step 3 — Add a Button

Hindi

Website mein ek button add karte hain.

<button onclick="welcome()">
    Click Me
</button>

English

We can add a button to make the webpage interactive.

⚡ Step 4 — Add JavaScript

Hindi

Ab JavaScript se button ko action dete hain.

<script>

function welcome(){

    alert("Welcome to my website!");

}

</script>

English

JavaScript gives the button an action. When the user clicks it, a message appears.

💻 Complete First Website

Hindi

Ab HTML, CSS aur JavaScript ko ek hi file mein combine karke complete website banate hain.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport"
content="width=device-width, initial-scale=1.0">

<title>My First Website</title>

<style>

body{
    font-family:Arial,sans-serif;
    background:#f5f7fa;
    text-align:center;
    padding:60px 20px;
}

.box{
    max-width:600px;
    margin:auto;
    background:white;
    padding:40px;
    border-radius:15px;
}

h1{
    color:#008bb0;
    margin-bottom:15px;
}

p{
    color:#475569;
    line-height:1.7;
}

button{
    margin-top:20px;
    padding:12px 25px;
    border:none;
    border-radius:8px;
    background:#00b8df;
    color:#001018;
    cursor:pointer;
}

</style>

</head>

<body>

<div class="box">

    <h1>
        Welcome to My Website
    </h1>

    <p>
        This is my first professional website.
    </p>

    <button onclick="welcome()">
        Click Me
    </button>

</div>


<script>

function welcome(){

    alert("Welcome to my first website!");

}

</script>


</body>

</html>

English

This example combines HTML, CSS and JavaScript to create a simple interactive webpage.

🧩 Website Ke Main Parts

Hindi

Ek professional website mein commonly ye parts ho sakte hain:

Navbar
Hero Section
About Section
Services
Projects
Contact
Footer

English

A professional website commonly contains a navbar, hero section, about section, services, projects, contact section and footer.

🎓 Web Development Basics Complete

Hindi

Lesson 01 se Lesson 11 tak aapne website development ke important basics seekhe.

Ab aap OMI ke through apni learning ko continue karke aur advanced web development concepts seekh sakte hain.

English

You have now completed the basic web development lessons. These lessons introduced the core concepts needed to start building websites.