Build a Responsive Website | HTML, CSS Grid, Flexbox & More

What You Will Learn

• इस वीडियो में, आप एक मॉडर्न वेबसाइट बनाने सीखेंगे जिसमें HTML, CSS Grid, Flexbox, और अन्य आधुनिक तकनीकों का उपयोग किया जाता है।
• आप सीखेंगे कि कैसे एक रिस्पॉन्सिव वेबसाइट बनाना है जो विभिन्न डिवाइसों पर अच्छी तरह से काम करे।
• आप यह भी सीखेंगे कि कैसे एक फॉर्म को सबमिट करना है और उसे नेटलाइफ पर डिप्लॉय करना है।

Key Concepts

• CSS Grid: एक शक्तिशाली लेआउट सिस्टम जो आपको वेब पेज के विभिन्न तत्वों को ग्रिड के रूप में व्यवस्थित करने की अनुमति देता है।
• Flexbox: एक लेआउट मॉडल जो आपको वेब पेज के तत्वों को फ्लेक्सिबल और रिस्पॉन्सिव बनाने की अनुमति देता है।
• Pseudo Selectors: विशेष प्रकार के सेलेक्टर जो आपको वेब पेज के तत्वों को विशिष्ट स्थितियों में स्टाइल करने की अनुमति देते हैं।
• Responsive Design: एक डिज़ाइन दृष्टिकोण जो वेब पेज को विभिन्न डिवाइसों और स्क्रीन आकारों पर अच्छी तरह से काम करने के लिए बनाता है।

Code Examples

• box-sizing: border-box; - यह प्रॉपर्टी आपको एलिमेंट के आकार को नियंत्रित करने की अनुमति देती है जब आप पैडिंग और बॉर्डर जोड़ते हैं।
• font-family: Lato, sans-serif; - यह प्रॉपर्टी आपको वेब पेज के फ़ॉन्ट परिवार को सेट करने की अनुमति देती है।
• <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> - यह लिंक टैग आपको फ़ॉन्ट ऑसम आइकन को अपने वेब पेज में जोड़ने की अनुमति देता है।

Lesson Summary

इस वीडियो में, हमने एक मॉडर्न वेबसाइट बनाने सीखा जिसमें HTML, CSS Grid, Flexbox, और अन्य आधुनिक तकनीकों का उपयोग किया जाता है। हमने सीखा कि कैसे एक रिस्पॉन्सिव वेबसाइट बनाना है जो विभिन्न डिवाइसों पर अच्छी तरह से काम करे। हमने यह भी सीखा कि कैसे एक फॉर्म को सबमिट करना है और उसे नेटलाइफ पर डिप्लॉय करना है। इस वीडियो के माध्यम से, आप एक वास्तविक दुनिया की वेबसाइट बनाने के लिए आवश्यक कौशल सीखेंगे।

Practice Exercise

एक रिस्पॉन्सिव वेबसाइट बनाएं जिसमें एक नेविगेशन बार, एक हीरो सेक्शन, और एक फुटर हो। वेबसाइट को विभिन्न डिवाइसों पर अच्छी तरह से काम करना चाहिए।

What Is Next

अगले वीडियो में, हम वेबसाइट के फीचर्स पेज बनाने सीखेंगे जिसमें हम सीखेंगे कि कैसे एक टेबल और एक फॉर्म को बनाना है। हम यह भी सीखेंगे कि कैसे वेबसाइट को और भी रिस्पॉन्सिव बनाना है।