HTML Se Diwali Greeting Page Kaise Banaye? Beginner-Friendly Step-by-Step Guide

September 21, 2026

HTML Se Diwali Greeting Page Kaise Banaye? Beginner-Friendly Step-by-Step Guide

Agar aap coding nahi jaante hain aur apne friends ya family ke liye ek simple Diwali greeting webpage banana chahte hain, to aap basic HTML, CSS aur JavaScript ki help le sakte hain.

Is project ki खास बात यह है कि इसे बनाने के लिए आपको कोई बड़ा software या advanced coding knowledge की जरूरत नहीं है।

इस article में हम एक simple Diwali Greeting Page बनाएंगे जिसमें greeting message, diya effect, colorful design और एक button शामिल होगा।

HTML Se Diwali Greeting Page Kaise Banaye? Beginner-Friendly Step-by-Step Guide

Diwali Greeting Page Banane Ke Liye Kya Chahiye?

इस project के लिए आपको केवल:

HTML
CSS
थोड़ी JavaScript
कोई भी text/code editor
Mobile या computer browser

की जरूरत होगी।

अगर आपको coding का बिल्कुल भी experience नहीं है, तब भी नीचे दिए गए steps follow करके इसे बनाया जा सकता है।

Step 1: Ek HTML File Banaye

सबसे पहले अपने computer या mobile में एक नई file बनाएं।

File का नाम रखें:

diwali.html

ध्यान रखें कि file का extension .html होना चाहिए।

Step 2: Ye Complete Code Paste Karein

नीचे दिया गया code copy करके diwali.html file में paste करें।

<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Happy Diwali</title>

<style>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #16002b, #4b0082);
    color: white;
    text-align: center;
}

.card {
    width: 90%;
    max-width: 500px;
    padding: 35px 20px;
    border-radius: 20px;
    background: rgba(255,255,255,0.10);
    box-shadow: 0 10px 35px rgba(0,0,0,0.35);
    backdrop-filter: blur(8px);
}

.diya {
    font-size: 70px;
    animation: glow 1.5s infinite alternate;
}

h1 {
    margin: 15px 0 10px;
    font-size: 42px;
}

p {
    font-size: 18px;
    line-height: 1.6;
}

button {
    border: none;
    padding: 13px 24px;
    border-radius: 30px;
    background: #ffb300;
    color: #25003d;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

button:hover {
    transform: scale(1.05);
}

#message {
    margin-top: 20px;
    display: none;
    font-size: 20px;
    font-weight: bold;
}

@keyframes glow {
    from {
        filter: drop-shadow(0 0 5px orange);
    }

    to {
        filter: drop-shadow(0 0 25px yellow);
    }
}
</style>
</head>

<body>

<div class="card">

    <div class="diya">🪔</div>

    <h1>Happy Diwali</h1>

    <p>
        आपके जीवन में खुशियां, सफलता और
        समृद्धि हमेशा बनी रहे।
    </p>

    <button onclick="showMessage()">
        शुभकामना देखें
    </button>

    <div id="message">
        🪔 शुभ दीपावली 🪔
    </div>

</div>

<script>
function showMessage() {
    document.getElementById("message").style.display = "block";
}
</script>

</body>
</html>

Step 3: Page Ko Open Karein

Code save करने के बाद diwali.html file पर double-click करें।

यह आपके browser में open हो जाएगी।

अब आपको एक simple Diwali greeting card दिखाई देगा।

इसमें:

Diya दिखाई देगा
Happy Diwali heading होगी
Greeting message होगा
Button होगा
Button दबाने पर additional शुभकामना दिखाई देगी

Page Ka Design Kaise Change Karein?

आप इस page को अपनी पसंद के हिसाब से आसानी से customize कर सकते हैं।

Greeting Text Change Karna

Code में:

Happy Diwali

की जगह आप लिख सकते हैं:

शुभ दीपावली

या:

आपको और आपके परिवार को दीपावली की हार्दिक शुभकामनाएं

Background Change Karna

CSS में background वाली line बदलकर आप page का background बदल सकते हैं।

Example:

background: linear-gradient(135deg, #16002b, #4b0082);

आप अपनी पसंद के colors इस्तेमाल कर सकते हैं।

Button Ka Text Change Karna

इस text को:

शुभकामना देखें

बदलकर:

मेरी शुभकामना

या कोई दूसरा message रख सकते हैं।

Mobile Mein Kaise Check Karein?

आजकल ज्यादातर लोग webpages mobile पर देखते हैं।

इसलिए page को अपने phone पर भी test करना जरूरी है।

अगर आप computer पर बना रहे हैं, तो browser window को छोटा करके देख सकते हैं।

अगर page mobile पर properly दिखाई देता है, तो आपका responsive design ठीक है।

Is Page Ko Online Kaise Share Karein?

अगर आप चाहते हैं कि दूसरे लोग भी आपका greeting page खोल सकें, तो HTML file को किसी web hosting service पर upload करना होगा।

Upload करने के बाद आपको एक public webpage URL मिल सकता है जिसे WhatsApp या social media पर share किया जा सकता है।

Blogger Par Iska Kya Use Hai?

अगर आपका Blogger blog है, तो आप इसी concept को अपने blog content में tutorial के रूप में use कर सकते हैं।

Example:

“HTML Se Diwali Greeting Page Kaise Banaye”

ऐसे article में आप:

Complete code
Code explanation
Customization tips
Screenshot
Mobile testing
Common problems
FAQs

add कर सकते हैं।

ध्यान रखें कि Blogger के normal post editor में पूरा HTML page डालना और standalone webpage की तरह चलाना अलग चीजें हैं। इसलिए अपने blog article में code को tutorial के रूप में दिखाना आसान विकल्प है।

Beginners Ke Liye Aur Kaun Se Greeting Pages Ban Sakte Hain?

एक बार Diwali greeting page बनाना समझने के बाद आप इसी idea से कई छोटे projects बना सकते हैं:

1. Birthday Greeting Page

नाम और birthday message के साथ एक simple animated webpage।

2. Anniversary Greeting Page

Couples के लिए personalized greeting page।

3. New Year Greeting Page

Countdown और New Year message वाला page।

4. Holi Greeting Page

Colorful background और Holi wishes के साथ webpage।

5. Raksha Bandhan Greeting Page

Rakhi theme और personalized message वाला page।

6. Independence Day Page

Indian flag theme और Independence Day message वाला simple webpage।

7. Teachers Day Greeting Page

Teacher के नाम के साथ personalized greeting card।

AI Ki Help Se Aise HTML Pages Kaise Banaye?

अगर आपको HTML coding नहीं आती, तो आप AI की मदद से code समझने और modify करने की कोशिश कर सकते हैं।

उदाहरण के लिए AI को यह prompt दे सकते हैं:

मेरे लिए beginner-friendly HTML, CSS और JavaScript से एक Diwali greeting webpage बनाओ। इसमें responsive design, diya animation और एक button हो। पूरा code एक ही HTML file में दो और हर important section को simple Hindi में explain करो।

इसके बाद मिले code को blindly use करने के बजाय browser में test करें और errors check करें।

Common Problems

Page Open Nahi Ho Raha

Check करें कि file का नाम सही है:

diwali.html

कहीं ऐसा तो नहीं कि file का नाम:

diwali.html.txt

हो गया है।

Design Mobile Par Sahi Nahi Hai

Check करें कि HTML में viewport meta tag मौजूद है:

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

Button Kaam Nahi Kar Raha

JavaScript function और button का onclick नाम एक जैसा होना चाहिए।

Conclusion

एक simple Diwali greeting webpage बनाने के लिए आपको advanced coding सीखने की जरूरत नहीं है। Basic HTML, CSS और थोड़ी JavaScript से आप एक छोटा interactive greeting page बना सकते हैं।

अगर आप beginner हैं, तो पहले इस simple project को बनाकर देखें। इसके बाद इसमें अपना नाम, photo, animation, background music या दूसरा design जोड़कर इसे customize कर सकते हैं।

FAQs

Kya HTML seekhe bina Diwali greeting page bana sakte hain?

हाँ, AI की मदद से basic code generate किया जा सकता है, लेकिन HTML और CSS की basic समझ होने से code को customize करना आसान हो जाता है।

Kya ye page mobile par chalega?

हाँ, दिए गए code में responsive viewport setting है, इसलिए इसे mobile browser के लिए भी design किया गया है।

Kya is page mein apna naam add kar sakte hain?

हाँ। Greeting message में अपना नाम या किसी दूसरे व्यक्ति का नाम आसानी से add किया जा सकता है।

Kya is greeting page ko WhatsApp par share kar sakte hain?

HTML file को सीधे webpage की तरह share करने के बजाय उसे online hosting पर publish करके उसका webpage link WhatsApp पर share किया जा सकता है।

Kya is project ke liye paid software chahiye?

नहीं। Basic HTML page बनाने के लिए किसी expensive software की जरूरत नहीं है।

Search This Blog