How to make simple website using HTML and CSS with source code?

by

नमस्कार दोस्तों! इस लेख में हम How to make simple website using HTML and CSS with source code? के बारे में बात करने वाले है। इसमें आपको source code दिया जायेगा।

How to make simple website using HTML and CSS with source code?

इसके लिए आपको निचे दिए steps को follow करना होगा जो इस प्रकार है:

  • अपने पसंद का कोई text editor को open करे।
  • index.html नाम से एक file बनाये।
  • निचे दिए code को उसमे लिखे 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Simple Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Welcome to My Simple Website</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>About Me</h2>
            <p>This is a simple website created using HTML and CSS. I'm learning web development and this is my first project.</p>
        </section>

        <section>
            <h2>My Hobbies</h2>
            <ul>
                <li>Reading</li>
                <li>Coding</li>
                <li>Traveling</li>
            </ul>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 My Simple Website</p>
    </footer>
</body>
</html>
  • अब styles.css नाम का एक और file बनाये।
  • इसमें निचे दिए गए code को लिखे। 
/* Reset some default browser styles */
body, h1, h2, p, ul {
    margin: 0;
    padding: 0;
}

/* Set the font family and a basic layout */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    padding: 20px;
    background-color: #f4f4f4;
}

/* Header styling */
header {
    background: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

header h1 {
    margin-bottom: 10px;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

/* Main content styling */
main {
    margin-top: 20px;
}

section {
    margin-bottom: 20px;
}

h2 {
    margin-bottom: 10px;
    color: #333;
}

p {
    margin-bottom: 10px;
}

/* Footer styling */
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
}
  • दोनों file को save करे।
  • index.html को किसी भी web browser को ओपन करे।

How to make simple website using HTML and CSS with source code? को अच्छे से समझने के लिए अगर आप चाहे तो निचे दिए गए वीडियो को देख सकते है।

By- Praroz 

कम आशा करते है की आपको आपके सवाल How to make simple website using HTML and CSS with source code? का जवाब मिल गया होगा।

related post:

Leave a comment