रेसिपी वेबसाइट बनाने का ट्यूटोरियल

परिचय

• वीडियो में रेसिपी वेबसाइट बनाने की प्रक्रिया दिखाई जाएगी।
• केवल HTML और CSS का उपयोग करके फ्रंट-एंड डिज़ाइन किया जाएगा।
• वेबसाइट रिस्पॉन्सिव होगी।

शुरूआत

• VS Code में एक फोल्डर बनाना।
• इमेजेस फोल्डर में वेबसाइट के लिए आवश्यक इमेजेज जोड़ना।
• HTML और CSS फाइल्स बनाना।

HTML फाइल सेटअप

• HTML बॉयलरप्लेट जोड़ना।
• टाइटल सेट करना।
• CSS फाइल लिंक करना।

CSS फाइल सेटअप

• यूनिवर्सल सेलेक्स्टर का उपयोग करते हुए डिफॉल्ट मार्जिन और पैडिंग को रिसेट करना।
• बॉक्स साइजिंग सेट करना।
• फॉन्ट फैमिली सेट करना।

वेबसाइट का हेडर डिज़ाइन

• हेडर टैग बनाना।
• एक कंटेनर डिव जोड़ना और नेविगेशन बार डिज़ाइन करना।
• लोगो और नेव लिस्ट आइटम्स का सेटअप करना।

CSS में हेडर स्टाइलिंग

• हेडर की ऊँचाई और बैकग्राउंड कलर सेट करना।
• कंटेनर की स्पेसिंग सेट करना।
• डिस्प्ले फ्लेक्स का उपयोग करना।

हीरो सेक्शन डिज़ाइन

• हीरो सेक्शन का सेटअप करना।
• कंटेंट और फॉर्म जोड़ना।
• CSS में हीरो सेक्शन को स्टाइल करना।

सर्च बॉक्स और बटन सेटअप

• सर्च इनपुट और बटन डिज़ाइन करना।
• स्टाइलिंग में बॉर्डर, बैकग्राउंड और फॉन्ट सेट करना।

रेसिपी सेक्शन डिज़ाइन

• रेसिपी सेक्शन का सेटअप करना।
• मल्टीपल रेसिपी कार्ड जोड़ना।
• रेसिपी कार्ड का स्टाइलिंग।

CSS में रेसिपी कार्ड स्टाइलिंग

• बैकग्राउंड, मार्जिन, और बॉर्डर सेट करना।
• इमेज का विड्थ 100% करना।

फुटर सेक्शन डिज़ाइन

• फुटर टैग और पैराग्राफ जोड़ना।
• स्टाइलिंग में बैकग्राउंड और टेक्स्ट सेट करना।

रिस्पॉन्सिव डिज़ाइन

• मीडिया क्वेरी सेट करना।
• स्क्रीन साइज के अनुसार नेविगेशन लिस्ट और मेन्यू आइकन को हाइड और दिखाना।

रेस्पॉन्सिव स्टाइलिंग

• हीरो सेक्शन के टेक्स्ट के फॉन्ट साइज को एडजस्ट करना।

निष्कर्ष

• वेबसाइट का समापन और कोड का अवलोकन।
• HTML और CSS के माध्यम से वेबसाइट डिज़ाइन करने की प्रक्रिया।
• वीडियो को पसंद करने और सब्सक्राइब करने की अपील।

---

• इस वीडियो में सिखाए गए संसाधनों को विवरण में साझा किया जाएगा।
• अगली वीडियो में और प्रोजेक्ट के साथ मिलने की उम्मीद।