HTML Step-by-Step Guide (HTML सीखने की स्टेप-बाय-स्टेप गाइड)...

HTML Step-by-Step Guide HTML सीखें हमारे स्टेप-बाय-स्टेप गाइड के साथ! बेसिक टैग्स से लेकर एडवांस्ड वेब डेवलपमेंट तक, यह गाइड शुरुआत करने वालों के लिए बिल्कुल सही है।”

अब तक आपने HTML और CSS की बेसिक्स सीख लिए हैं और एक स्टाइलिश फॉर्म भी बना लिया है। अब अगला स्टेप है लेआउट डिज़ाइनिंग सीखना, जिससे आप अपने वेबपेज को और भी आकर्षक और प्रोफेशनल बना सकते हैं। 🚀

1️⃣ CSS लेआउट क्या होता है?

वेबपेज को सही तरीके से डिज़ाइन करने के लिए हमें लेआउट सेट करना पड़ता है। इसके लिए CSS में दो मुख्य टेक्निक्स होती हैं:
✅ Flexbox – एलिमेंट्स को स्ट्रक्चर्ड और रेस्पॉन्सिव बनाने के लिए।
✅ CSS Grid – वेबपेज के कंप्लीट लेआउट को बेहतर तरीके से मैनेज करने के लिए।

आज हम Flexbox सीखेंगे और इससे फॉर्म को और भी सुंदर और प्रोफेशनल लुक देंगे।

2️⃣ Flexbox के साथ फॉर्म को और आकर्षक बनाएं

📌 पहले का फॉर्म सिंपल था, अब इसे सही से अलाइन करेंगे।

नीचे दिए गए कोड में हमने Flexbox का उपयोग किया है ताकि फॉर्म सेंटर में और बेहतर तरीके से अलाइन हो।

<!DOCTYPE html>
<html>
<head>
    <title>Flexbox फॉर्म</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }

        form {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px gray;
            width: 350px;
            display: flex;
            flex-direction: column;
        }

        label {
            font-weight: bold;
            margin-bottom: 5px;
        }

        input[type="text"], 
        input[type="email"], 
        input[type="password"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        input[type="submit"] {
            background-color: #007bff;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            width: 100%;
            font-size: 16px;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>

    <div class="container">
        <form>
            <label>नाम:</label>
            <input type="text" name="name" placeholder="अपना नाम दर्ज करें">

            <label>ईमेल:</label>
            <input type="email" name="email" placeholder="अपना ईमेल दर्ज करें">

            <label>पासवर्ड:</label>
            <input type="password" name="password" placeholder="अपना पासवर्ड दर्ज करें">

            <input type="submit" value="सबमिट करें">
        </form>
    </div>

</body>
</html>

HTML Step-by-Step Guide

3️⃣ Flexbox का फायदा क्या हुआ?

✅ फॉर्म पूरी स्क्रीन पर सेंट्रलाइज़ हो गया।

#✅ हर एलिमेंट सही ढंग से अलाइन हुआ।
✅ बॉक्स का शेप और बटन का डिज़ाइन प्रोफेशनल लग रहा है।

✅ अगर स्क्रीन साइज़ बदलेगा तो फॉर्म ऑटोमेटिकली एडजस्ट हो जाएगा।

4️⃣ अगला स्टेप: CSS Grid सीखना!

✅ अब तक हमने Flexbox से फॉर्म को सुंदर बनाया।
#✅ अब हम CSS Grid सीखेंगे, जिससे पूरे वेबपेज को लेआउट कर सकें।
✅ Grid से हम पूरा वेबपेज डिवाइड कर सकते हैं (Header, Sidebar, Main Content, Footer)।