[संगीत] हेलो एवरीवन वेलकम बैक टू दिस चैनल तो जैसा कि आप लोगों ने देख ही लिया होगा आज के इस वीडियो में हम लोग यह रेसिपी वेबसाइट बनाने वाले हैं बट हम लोग इसे सिर्फ एल और सीएसएस का यूज करके बना रहे हैं मींस की सिर्फ फ्रंट एंड हम लोग डिजाइन कर रहे हैं यहां पे एंड यह जो वेबसाइट है बिल्कुल रिस्पांसिस है आप लोगों ने ऑलरेडी देख ही लिया है बट फिर भी मैं यहां पर आपको दिखा दे रही हूं एक बार यह देख सकते हो आप लार्ज स्क्रीन साइज प कुछ इस तरह से दिख रही है हमारी वेबसाइट एंड जैसे ही हम लोग स्क्रीन साइज यहां पर कम कर रहे हैं तो यह देख सकते हो यह इस तरह से चेंज हो जा रहा है तो यह सारी चीजें हम लोग एचटीएमएल और सीएसएस को यूज करके ही करेंगे इट मींस कि आज हम लोग अपने एचटीएमएल और सीएसएस स्ल को और इंप्रूव करेंगे थोड़ा इस वेबसाइट को डिजाइन करते हुए तो चलिए वीडियो को स्टार्ट करते हैं सबसे पहले तो आते हैं हम लोग वीएस कोड पे तो यहां पे मैंने एक फोल्डर बना के रखा था रेसिपी वेबसाइट इसके अंदर मैंने एक इमेजेस फोल्डर बनाया है जिसमें वो सारे इमेज ऐड किए मैंने जो हम लोग वेबसाइट में यूज करने वाले हैं तो ये सारे इमेज मैं आप लोगों को डिस्क्रिप्शन में दे दूंगी आप लोग वहां से ले सकते हैं अभी यहां इस फोल्डर के अंदर राइट क्लिक करके ओपन विथ कोड पे क्लिक करना है और ये बीएस कोड यहां पे ओपन हो चुका है तो यहां पे इस फोल्डर के अंदर हम लोग दो फाइल्स क्रिएट करेंगे हमेशा की तरह इक्ड सीएसएस तो ये दो फाइल्स यहां पे क्रिएट हो चुकी है आते हैं index.htm में और यहां पे जो बेसिक स्टेप हम लोग फॉलो करते हैं हमेशा वो ऐड कर लेते हैं ये एटीएमएल का बॉयलर प्लेट ऐड हो गया इसे थोड़ा ज़ूम करते हैं हम लोग और यहां पे टाइटल ऐड कर देते हैं तो यहां पे मैंने एक टाइटल ऐड किया नाउ हम लोगों ने जो सीएसएस फाइल बनाई है इसे भी हम लोग लिंक कर लेते हैं यहां पे लिंक कलन सीएसएस एंटर किया य फाइल यहां पे लिंक हो चुकी है तो इतना काम हो चुका है अभी हम लोग आ जाते हैं सीएसएस में और यहां पर जो हम लोग यूनिवर्सल लेक्टर ऐड करते हैं ये यहां पर ऐड कर लेते हैं इसमें हम लोग क्या करते हैं जो भी डिफॉल्ट मार्जिन और पडि होती है उन सबको हम लोग यहां पे रिसेट करते हैं मार्जिन जीरो किया पडि जीरो किया बॉक्स साइजिंग करेंगे यहां पे बॉर्डर बॉक्स एंड यहां पे हम लोग एक फॉन्ट भी यूज करने वाले हैं तो फंट फैमिली सेलेक्ट करेंगे हम लोग से शरिफ तो ये इतना हो चुका है अभी हम लोग वापस आते हैं इक्सड एटीएमएल में और यहां पे हम लोग पहले एटीएमएल के कोड को कंप्लीट करेंगे तो सबसे पहले तो हम लोग वेबसाइट के हेडर को डिजाइन करते हैं तो यहां पर एक हेडर टैग लिया मैंने एंड इसके अंदर एक डिव लेंगे और इसमें क्लास दे देते है कंटेनर एंड इस कंटेनर के अंदर हम लोग अपना नेविगेशन बार डिजाइन करेंगे तो नेविगेशन बार में हम लोगों को एक लोगो चाहिए तो लोगो के लिए यहां पे टेक्स्ट यूज कर ले रहे हैं तो ए1 टेक्स्ट का यूज करेंगे और इसमें क्लास दे देते हैं क्लास देते हैं इसमें लोगो ठीक है और यहां पे नेक्स्ट ऐड कर देते हैं तो यह हमारा लोगो होगा तो लोगो नेविगेशन के लेफ्ट साइड में होगा एंड राइट साइड में यहां पे पहले एक नेफ टैग ऐड कर रही हूं मैं राइट साइड में हम लोगों को अपने नेव लिस्ट जो आइटम्स होते हैं वह ऐड करने हैं तो ने के अंदर एक यल लेंगे इसके अंदर एई लेंगे और इसे मल्टीप्लाई कर देते हैं फोर से तो यह इस तरह का स्ट्रक्चर यहां पे ऐड हो गया यह सारे शॉर्टकट होते हैं वीएस कोड के तो यहां पे ए के अंदर हम लोग सबसे पहले तो सारे आइटम्स ऐड करते हैं यहां पे होम अबाउट एंड यहां पे ऐड कर देते हैं रेसिपीज एंड यहां पे ऐड कर देते हैं कांटेक्ट बस ये चार ही नव आइटम्स यहां पे रखेंगे हम लोग एंड यहां पे हम लोग यल के अंदर भी एक क्लास ऐड कर देते हैं ताकि हम लोग इसे क्लास के थ्रू स्टाइल कर पाए तो क्लास ऐड करते हैं नेव लिस्ट तो इतनी चीजें हमने ऐड कर ली html5 में देते हैं 100% एंड हाइट यहां पे यूज़ करते हैं मिनिमम हाइट तो मेन हाइट यूज़ करेंगे और 100 बए ऐड करेंगे एंड यहां पे बैकग्राउंड कलर एक ऐड करेंगे ये हो गया नाउ हम लोगों ने हेडर ऐड किया है तो यहां पे सबसे पहले हेडर में हम लोग कुछ सीएसएस ऐड करेंगे तो हेडर में सबसे पहले तो हम लोग एक हाइट ऐड करते हैं तो यहां पे 60 पिक्सल की हाइट हम लोग लेते हैं नॉर्मली नेफ बार के लिए इतने सारे नेफ बार मैंने ऑलरेडी अपलोड किए हैं अपने इस चैनल पे आप लोग देख सकते हो एंड यहां पे इसकी विड्थ को मैं कर दूंगी 100% अभी ये बिल्कुल भी विजिबल नहीं है यहां पे तो हम लोग क्या करेंगे इसमें एक बैकग्राउंड कलर ऐड करेंगे उसके बाद ही हमें ये दिखेगा तो ये देखो कलर ब्लैक किया मैंने अब ये दिख रहा है बट ये पूरा ब्लैक हो गया है इतना ब्लैक नहीं चाहिए तो इसे थोड़ा लाइट कर लेते हैं एंड यहां पे हम लोग कलर यूज कर लेते हैं वाइट जिससे कि हमारा टेक्स्ट विजिबल हो जाए सॉरी वाइट करना था तो इसे मैं इस तरह से यहां पे फुल स्क्रीन करके आपको दिखाती हूं यह जो टॉप में ब्लैक कलर का पैनल ऐड हुआ है यही हमारा हेडर है इस वेबसाइट का तो अभी के लिए इसे इतना ही रखते हैं एंड नेक्स्ट हम लोगों ने कंटेनर क्लास बनाया है तो इसे यहां पे ऐड करते हैं डॉट कंटेनर एंड इसके अंदर हम लोग सबसे पहले विड्थ ऐड करेंगे तो हेडर में हमने 100% विड्थ दी है कंटे नर में मैं 90 पर की विड्थ देती हूं एंड यहां पे हम लोग मार्जिन ऐड करेंगे टॉप और बॉटम से जीरो और लेफ्ट राइट से ऑटो जिससे क्या होगा लेफ्ट और राइट में इक्वल स्पेस ऐड हो जाएगा नाउ इस कंटेनर के अंदर हम लोगों ने दो एलिमेंट ऐड किए हैं एक लोगो और एक नेव लिस्ट तो दोनों को हमें एक लाइन में लेके आना है तो यहां पे डिस्प्ले फ्लेक्स का यूज कर लेंगे हम लोग डिस्प्ले फ्लेक्स किया मैंने ये देखो ये एक लाइन में आ गया यहां पे अलाइन आइटम्स करेंगे सेंटर एंड जस्टिफाई कंटेंट कर देंगे स्पेस बिटवीन तो ये दोनों आइटम आपस में सेपरेट हो जाएंगे देखो एक लेफ्ट में आ गया एक राइट में आ गया तो इतनी चीजें तो क्लियर हो गई होगी आप लोगों को अभी हम लोगों को इन सारे नेव लिस्ट को एक लाइन में लेके आना है तो यहां पे हम लोग सीएसएस में सबसे पहले नेव टैग को सेलेक्ट करते हैं एंड इसके अंदर जो यूल है एंड इसके अंदर जो एआई है तो यहां पे सबसे पहले इसमें लिस्ट स्टाइल हम लोग कर देंगे नन जिससे ये बुलेट्स जो है ये चले जाएंगे एंड अब इसे एक लाइन में लेके आना है तो यहां पे डिस्प्ले हम लोग कर देंगे इनलाइन तो अभी ये ब्लॉक में था अभी ये इनलाइन हो जाएगा एंड इन सारे आइटम्स के बीच में हमें स्पेस ऐड करना है तो यहां पे हम लोग मार्जिन ऐड कर देते हैं राइट साइड से 20 पिक्सेल अभी हम लोग एक काम करते हैं यह जो हमारा प्रीव्यू है इसे अपने ब्राउजर पे ओपन कर लेते हैं तो अभी आप लोग देख सकते हो यह जो कंटेनर है जिसमें यह सारे आइटम्स ऐड है ये बिल्कुल टॉप में चिपके हुए हैं हेडर के तो हम लोगों को इसे वर्टिकली अलाइन करना होगा मींस हम लोगों को इसे वर्टिकली सेंटर में लेके आना है तो इसके लिए क्या करेंगे आइए देखते हैं तो इसके लिए हम लोग यहां पे हेडर के अंदर फ्लेक्स का यूज करेंगे डिस्प्ले फ्लेक्स करेंगे सबसे पहले यहां पे एंड अलाइन आइटम्स करेंगे सेंटर जिससे ये वर्टिकली सेंटर हो जाएगा यहां पे फ्लेक्सस लिखना था मुझे तो ये सेंटर में हो चुका है अभी हम लोगों ने ये जो लोगो किया है इसे थोड़ा छोटा करेंगे यहां पे डायरेक्ट हम लोग h1 टैग के थ्रू इसे सेलेक्ट कर सकते हैं या फिर हमने जो क्लास ऐड किया है लोगो इसके थ्रू भी इसे सेलेक्ट कर सकते हैं फॉन साइज कर देते हैं 30 पिक्सल अ ये थोड़ा ज्यादा ही बड़ा लग रहा है तो 24 पिक्सेल करते हैं ओके इतना सही है ये सही दिख रहा है हमारा ये हो गया यहां पे ये जो लिस्ट आइटम है इसे हम लोग थोड़ा बोल्ड कर सकते हैं यहां पे तो फॉन्ट वेट यूज कर लेते हैं एआई के अंदर एंड इसे कर देते हैं 600 अगर इतना नहीं करना है तो इसे 500 कर देते हैं या 550 कर देते हैं तो यह देख सकते हो ये कुछ इस तरह का यहां यहां पे नेप बार हमारा रेडी हो चुका है नाउ हम लोग आगे के सेक्शन डिजाइन करेंगे तो आ जाते हैं index.htm में और ये जो हमारा यहां पे हेडर क्लोज हो रहा है इसके जस्ट बाद हम लोग सेक्शन टैग का यूज करेंगे यहां पे एंड इसके अंदर हम लोग एक क्लास ऐड करेंगे एंड क्लास नेम देंगे हीरो हीरो सेक्शन हम लोग डिजाइन करने वाले हैं तो आइए देखते हैं कि हीरो सेक्शन क्या होता है तो यहां पे सबसे पहले हम लोग क्लास को सेलेक्ट करते हैं एंड अब हम लोग यहां पे कुछ प्रॉपर्टीज ऐड करेंगे सबसे पहले तो इसकी विड्थ को कर देते हैं 100% सबसे पहले यहां पे हम लोग एक बैकग्राउंड ऐड करेंगे तो बैकग्राउंड में मुझे एक इमेज ऐड करना है तो यहां पे यूआरएल का यूज करते हैं और इमेज मैंने ऑलरेडी ऐड करके रखा है अपने फोल्डर में इमेजेस के अंदर इसे मैंने यहां पे सेलेक्ट किया है तो अभी हमारा इमेज यहां पे डिस्प्ले नहीं हो रहा है क्योंकि हम लोगों ने हाइट ऐड नहीं किया है तो किसी डीविया सेक्शन में जब तक हम लोग हाइट ऐड नहीं करते हमारा कंटेंट डिस्प्ले नहीं होता है तो मैं यहां पे फिलहाल के लिए 400 पिक्सल की हाइट ऐड कर दे रही हूं तो इसे फुल स्क्रीन पे देख लेते हैं ये देख सकते हो ये जो इमेज है यहां पे रिपीट हो रहा है तो इसके लिए हम लोगों को पता ही है बहुत सारे प्रॉपर्टीज होते हैं बैकग्राउंड के अंदर सबसे पहले बैकग्राउंड रिपीट को हम लोग कर देंगे नो रिपीट अभी एक सिंगल इमेज यहां पे ऐड हो जाएगा ये देख सकते हो अभी हम लोगों को इसे पूरे स्क्रीन पे लेके आना है तो यहां पे हम लोग करेंगे बैकग्राउंड साइज कवर तो ये देखो ये पूरे स्क्रीन पे कवर हो गया है बट हमारा जो इमेज है ये स्ट्रेच हो गया है तो इसके लिए यहां पे क्या करेंगे हम लोग बैकग्राउंड पोजीशन एक प्रॉपर्टी होती है इसे कर देंगे सेंटर एंड यहां पे हम लोग कलर ऐड कर देते हैं जिससे कि हीरो सेक्शन में जो भी टेक्स्ट होंगे उसका कलर जो भी हम यहां पे ऐड करेंगे वही ऐड हो जाएगा तो ये वाइट कलर यहां पे ऐड किया मैंने नाउ हम लोग आते हैं index.htm में और यहां पे बा के कंटेंट ऐड करते हैं इस सेक्शन में एंड यहां पे हम लोगों को हीरो सेक्शन में कुछ कंटेंट ऐड करने है सबसे पहले तो यहां पे ले लेते हैं इसमें क्लास दे देते हैं हीरो सेक्शन तो ये डिप क्रिएट हो गया यहां पे सबसे पहले हम लोग एक हेडिंग ऐड करेंगे ए2 टैग का यूज करते हैं यहां पे एंड यहां पे हम लोग एक टेक्स्ट ऐड करेंगे मैं जल्दी से ऐड कर रही हूं आप लोग अपने अकॉर्डिंग कुछ भी टेक्स्ट यहां पे ऐड कर सकते हो तो ये यहां पे एक हेडिंग ऐड किया मैंने इसके बाद एक पैराग्राफ लेंगे एंड यहां पर भी कुछ कंटेंट ऐड करेंगे अगेन मैं यहां पर एक टेक्स्ट ऐड कर रही हूं सर्च एंड इसके बाद हम लोगों को यहां पर एक सर्च बॉक्स बनाना है तो उसके लिए यहां पर फॉर्म टैग ले लेते हैं एंड फॉर्म के अंदर हम लोग क्लास दे देते हैं कुछ भी क्लास दे देते हैं यहां पर फिलहाल में सर्च बॉक्स ही लिख देती हूं तो इसके अंदर हम लोग एक इनपुट बॉक्स लेंगे और एक सर्च बटन लेंगे तो इनपुट टाइप टेक्स्ट और यहां पर प्लेस होल्डर ऐड कर देते हैं सर्च रेसिपी ये इनपुट हो गया एंड इसके बाद हम लोग ले लेते हैं बटन ए यहां पे बटन में टेक्स्ट ऐड करते हैं सर्च बटन के अंदर हम लोग टाइप एट्रिल ऐड करेंगे सबमिट तो यहां पे हीरो सेक्शन के अंदर हम लोगों ने कंटेंट ऐड कर लिए है अब हम लोगों को इसे स्टाइल करना है आ जाते हैं हम लोग सीएसएस में एंड यहां पे हम लोगों को करना क्या है इन सारे कंटेंट को इस हीरो सेक्शन के सेंटर में लेके आना है तो यहां पे हम लोग इस क्लास के अंदर जो सीएसएस ऐड की है हीरो क्लास के अंदर यहां पे हम लोग टेक्स्ट अलाइन करेंगे सेंटर जिससे क्या होगा ये सारे टेक्स्ट यहां पे सेंटर में आ जाएंगे अभी मुझे इसे सेंटर में लेके आना है तो यहां पे हम लोग डिंग का यूज कर लेते हैं यहां पे हम लोग एक आईडिया ले सकते हैं कि टॉप से और बॉटम से अगर इक्वल पैडिट करें तो ये सेंटर में यहां पे आ जाएगा लेफ्ट से हमें पैडिट ऐड नहीं करनी है क्योंकि हमने ऑलरेडी टेक्स्ट लाइन सेंटर कर लिया है यहां पे तो अगर मैं 100 पिक्सेल की पैडिट ऐड करूं टॉप और बॉटम से एंड लेफ्ट राइट से जीरो इस पडि को थोड़ा और बढ़ा लिया जाए अगर 40 कर दूं तो ये सेंटर में आ चुका है ये देख सकते हो ये बिल्कुल सेंटर में आ चुका है यहां पे अभी हम लोग इन सारे टेक्स्ट को स्टाइल करेंगे तो यहां पे हम लोग इन कंटेंट को भी टारगेट करते हैं सबसे पहले इसी क्लास को सेलेक्ट कर लेते हैं हीरो एंड यहां पे h2 टैग हमने लिया है इस वाले टेक्स्ट के लिए तो इसके फॉन्ट साइज को यहां पे हम लोग बंगे फॉन्ट साइज मैं 35 36 पिक्सेल करती हूं तो ये इतना बड़ा टेक्स्ट यहां पे ऐड हो गया है एंड यहां बॉटम से मार्जिन ऐड करते हैं 10 पिक्सल की जिससे ये पैराग्राफ और टेक्स्ट के बीच में स्पेस ऐड हो जाएगा ये हो गया अब इसी कोड को मैं यहां पे डुप्लीकेट करूंगी शिफ्ट अल्ट डाउन एरो के साथ और h2 के जगह पे ऐड करेंगे हम लोग p मार्जिन बॉटम रहने देते हैं और इसके फॉन्ट साइज को यहां पे हम लोग कम करेंगे तो फॉन्ट साइज मैं सपोज यहां पे 20 पिक्सल करती हूं तो आई थिंक इतना सही है तो ये हो चुका है अभी हम लोगों को ये जो सर्च स बॉक्स हमने बनाया था इसे स्टाइल करना है हम लोगों को तो सर्च बॉक्स में मैंने क्लास ऐड किया है सर्च बॉक्स तो यहां पर सेलेक्ट किया मैंने सबसे पहले इसमें हम लोग विड्थ ऐड करेंगे तो यहां पे मैक्स विड्थ का यूज कर रही हूं मैं सो दैट कि ये रिस्पांसिस भी हो जाए तो ये विड्थ ऐड हो गया यहां पे एंड इसमें भी हम लोग मार्जिन ऐड करेंगे टॉप और बॉटम से 15 पिक्सेल लेफ्ट राइट से जीरो एंड यहां पे हम लोग यूज करेंगे डिस्प्ले फ्लेक्स का डिस्प्ले फ्लेक्सस किया मैंने अलाइन आइटम्स करेंगे सेंटर एंड यहां पर जस्टिफाई कंटेंट भी कर लेंगे सेंटर अगर आपको क्लियर नहीं हो रहा है कि ये फॉर्म का विड्थ ऐड हुआ या नहीं तो यहां पे अगर मैं बैकग्राउंड रेड कर दूं तो ये देख सकते हो ये जो रेड एरिया पूरा दिख रहा है ये हमारा सर्च बॉक्स है यहां पे एक बार फुल स्क्रीन पे देखते हैं ये सेंटर अलाइन नहीं हुआ है यहां पे हमने मार्जिन ओके लेफ्ट और राइट से जीरो किया है इसे ऑटो कर देते हैं ताकि लेफ्ट और राइट में इक्वल मार्जिन ऐड हो जाए और ये सेंटर में आ चुका है तो ये हो गया सबसे पहले यहां पे सर्च बॉक्स सेलेक्ट करते हैं एंड देन यहां पे सेलेक्ट करेंगे इनपुट एंड इसमें हम लोग कुछ सीएसएस ऐड करेंगे तो सबसे पहले तो यहां पे इनपुट में हम लोग विड्थ ऐड करते हैं तो इस सर्च बॉक्स की जितनी विड्थ है उसका 70 पर विड्थ हम लोग इनपुट को देंगे और बाकी के जो विड्थ होंगे वो इस सर्च बटन को मिल जाएगा एंड इसमें पैडिट ऐड कर देते हैं जिससे कि एक सर्च बॉक्स की तरह हमें यहां पे दिखे तो पैडिट मैंने किया 10 पिक्सल ये देख सकते हो एंड यहां पे जो भी आउटलाइन क्या होता है जब भी हम लोग इस पे क्लिक करेंगे तो एक बॉर्डर ऐड हो जाता है ये देख सकते हो ब्लैक कलर का बॉर्डर तो उसके लिए हम लोग यहां पे क्या करते हैं आउटलाइन नन करेंगे तो ये बॉर्डर हमें अब नहीं दिखेगा जब भी हम क्लिक करेंगे एंड अभी इसमें एक बॉर्डर भी ऐड किया गया है इस बॉर्डर को भी यहां पे जीरो कर देते हैं एंड यहां पे हम लोग बॉर्डर रेडियस ऐड करेंगे तो बॉर्डर रेडियस मुझे दो ही साइड से चाहिए सबसे पहले तो टॉप से चाहिए फाइव पिक्सेल राइट और बॉटम से मुझे बॉर्डर रेडियस नहीं चाहिए एंड देन मुझे लेफ्ट से भी फ पिक्सेल का बॉर्डर रेडियस चाहिए तो ये यहां पे ऐड हो चुका है एंड इसमें हम लोग फंट साइज भी यूज कर लेते हैं तो यहां पे रेम का यूज करती हूं मैं रेस्पों सिव के लिए तो यह हो चुका है अभी इस बैकग्राउंड को मैं यहां से हटा सकती हूं नाउ हम लोग इस सर्च बटन को स्टाइल करेंगे तो इस पूरे क्लास को मैं यहां से पहले तो डुप्लीकेट कर लेती हूं शिफ्ट डाउन एरो के साथ और जैसे हमने यहां पे इनपुट को स्टाइल किया उसी तरह से यहां पे बटन को स्टाइल करेंगे तो बटन में मुझे विड्थ ऐड नहीं करना है इसे हटाते हैं यहां से एंड यहां पे बटन में हम लोग एक बैकग्राउंड ंड ऐड करेंगे सबसे पहले तो रेड कलर का बैकग्राउंड चाहिए मुझे बट बिल्कुल रेड नहीं चाहिए इसे थोड़ा इस तरह से यहां पे लाइट कलर करेंगे तो ये यहां पे कलर चेंज हो चुका है बैकग्राउंड का एंड टेक्स्ट कलर को चेंज करने के लिए यहां पे कलर का यूज करेंगे एंड वाइट कलर करते हैं इसे एंड यहां पे जो बॉर्डर रेडियस थी इसमें हम लोग अ भी क्या करेंगे जहां पर मैंने फाइव पिक्सल किया था इनपुट में इसे जीरो कर देंगे एंड जहां पे हमने जीरो किया था मींस राइट और बॉटम से कर देंगे फ पिक्सल एंड लास्ट में यहां पे हम लोग ऐड कर देंगे कर्सर पॉइंटर जिससे क्या होगा ये एक फिंगर की तरह यहां पे पॉइंट होगा इस बटन को थोड़ा और हम लोग स्टाइल करते हैं तो यहां पे टॉप और बॉटम से 10 पिक्सेल ऐड करते हैं और लेफ्ट राइट से कर देते हैं 20 पिक्सेल तो इस तरह से कुछ स्पेस यहां पे ऐड हो जाएगा लेफ्ट राइट में इतना हो चुका है यहां पे इस इनपुट के अंदर भी हम लोग एक काम करते हैं यहां पे हम लोग बॉर्डर ऐड कर देते हैं वन पिक्सेल सॉलिड रेड तो यहां पे हम लोग क्या करेंगे जो बटन के अंदर जो हम लोगों ने कलर ऐड किया है इसे यहां से कॉपी करके इस इनपुट के बॉर्डर में ऐड कर देंगे एंड अभी फुल स्क्रीन पे देखते हैं तो ये देख सकते हो कितना सही दिख रहा है हमारा हीरो सेक्शन अभी एंड अभी हम लोग चाहे तो इस हीरो सेक्शन के अंदर जो हमने हाइट ऐड की है 400 पिक्सल इसे यहां से हटा सकते हैं या फिर हाइट कर सकते हैं ऑटो तो ये हमारा हो चुका है नाउ हम लोगों को रेसिपी सेक्शंस बनाने हैं तो यहां पे आते हैं हम लोग वापस से एटीएमएल फाइल में और इस सेक्शन के बाद अगेन हम लोग एक सेक्शन लेंगे और इसके अंदर भी क्लास ऐड कर देते हैं एंड यहां पे क्लास देंगे हम लोग रेसिपीज तो रेसिपी सेक्शन में सबसे पहले हम लोगों को क्या करना है यहां पे एक h2 टैग ले लेते हैं और इसमें हम लोग टाइटल ऐड करते हैं फीचर्ड रेसिपीज ये देख सकते हो य पे टाइटल ऐड हो चुका है अब हम लोग को यहां पे बनाने है मल्टीपल रेसिपी कार्ड तो सबसे पहले तो एक डिब लेते हैं और इसमें क्लास देते हैं रेसिपी सेक्शन एंड इसके अंदर एक और डिब लेंगे और यहां पे हम लोग क्लास देंगे रेसिपी कार्ड तो अब यह हमारा एक रेसिपी कार्ड होगा और रेसिपी कार्ड के अंदर हम लोगों को सबसे पहले तो रेसिपी के इमेज ऐड करने हैं तो यहां पे मैंने इमेज ऐड करके रखा है ऑलरेडी अपने फोल्डर में इमेजेस फोल्डर के अंदर तो यहां पे मैं वन बाय वन इमेज ऐड करूंगी ये देख सकते हो एक इमेज यहां पे ऐड हो गया है एंड उसके बाद इस रेसिपी के नेम को हमें दिखाना है तो यहां पे मैं h2 टैग का यूज कर लेती हूं मैं यहां पे कुछ भी नाम ऐड कर रही हूं अपने अकॉर्डिंग आप लोग चाहे तो कोई भी रेसिपी ऐड कर सकते हो यहां पे विथ इमेज एंड नेम एंड इसमें हमें कुछ डिस्क्रिप्शन भी ऐड करना है तो यहां पे मैं पैराग्राफ टैग का यूज करूंगी और कुछ डमी सा टेक्स्ट यहां पे ऐड कर देते हैं ये देख सकते हो सारी चीजें यहां पे ऐड हो रही है एंड इसके रेसिपी को देखने के लिए हम लोगों को एक बटन की जरूरत होगी तो एंकर टैग का यूज करते हैं यहां पे एंड यहां पे टेक्स्ट ऐड कर देते हैं व्यू रेसिपी आर कैपिटल करते हैं तो ये हमारा एक कार्ड यहां पे ऐड हो चुका है अब इस तरह से हम लोग चाहे तो जितने चाहे मल्टीपल कार्ड यहां पे ऐड कर सकते हैं अगर मैं इसी डीप को यहां से डुप्लीकेट करूं शिफ्ट अल्ट डाउन एरो के साथ अभी मैं यहां पे थ्री टाइम्स इसे कॉपी कर रही हूं तो ये चार कार्ड यहां पे ऐड हो गए हैं अभी सब में एक ही इमेज है और एक ही टेक्स्ट है इसे हम लोग यहां पे चेंज कर लेते हैं मैं यहां पे बस इमेज चेंज कर रही हूं आप लोग अपने अकॉर्डिंग टेक्स्ट भी यहां पे चेंज कर लेना तो डिश टू सेलेक्ट करते हैं यहां पे एंड इसमें सेलेक्ट करते हैं थ्री यहां पे सेलेक्ट करते हैं फोर तो यहां पे देख सकते हो ये सारे इमेज चेंज हो गए हैं ये थ्री वाले में डॉट जेपीजी ऐड नहीं किया मैंने तो अभी फुल स्क्रीन पे देखते हैं हम लोग ये देख सकते हो कुछ इस तरह से यहां पे रेसिपी कार्ड ऐड हो गया है अभी इन सारे कार्ड को हम लोगों को स्टाइल करना होगा मैं यहां पे इस सेक्शन के ऊपर एक कमेंट ऐड कर देती हूं सबसे पहले तो ये यहां पे कमेंट ऐड हो गया है उसी तरह से इस कमेंट को मैं यहां से कॉपी करूंगी और ये जो हीरो सेक्शन बनाया था इसके भी जस्ट ऊपर मैं इसे ऐड कर दूंगी और यहां पे रेसिपी की जगह हम लोग कर देंगे रो इस तरह से सारे सेक्शन यहां पे सेपरेट हो जाएंगे तो कोई भी कंफ्यूजन नहीं होगा तो ऑलरेडी मैंने इस कमेंट को कॉपी किया है आते हैं सीएसएस में और यहां पे इस कमेंट को फिर से मैं ऐड करती हूं और यहां पे सीएसएस में कमेंट ऐड करने का सिंटेक्स अलग होता है तो इसे यहां से चेंज कर लिया मैंने तो अब इसके बाद हम लोग रेसिपी सेक्शन को स्टाइल करेंगे तो सबसे पहले हम लोग स्टार्ट करते हैं इस टाइटल के साथ रेसिपीज टाइटल के साथ तो सेक्शन के अंदर हम लोगों ने क्लास दिया है रेसिपीज इस क्लास को मैं कॉपी कर लेती हूं यहां पे और डॉट के साथ इसे ऐड किया यहां पे एंड इसमें टाइटल में h2 टैग का यूज किया मैंने तो इसे यहां पे सेलेक्ट किया मैंने तो सबसे पहले पहले तो इसे हम लोग टेक्स्ट अलाइन करेंगे सेंटर और इसमें बॉटम से मार्जिन ऐड कर देते हैं सॉरी बॉटम से मार्जिन ऐड करते हैं 30 पिक्सल एंड यहां पे ये जो रेसिपीज है मींस जो हमारा रेसिपी सेक्शन है तो इसमें सबसे पहले तो पडि ऐड करेंगे तो टॉप और बॉटम से 50 पिक्सल की पैडिट ऐड करती हूं एंड लेफ्ट राइट से जीरो एंड इस टाइटल के फॉन्ट साइज को भी हम लोग यहां पे चेंज कर सकते हैं फॉन्ट साइज मैं कर देती हूं 28 पिक्सेल तो ये देख सकते हो ये परफेक्टली यहां पे ऐड हो चुका है अभी इसमें हमें और कुछ करने की जरूरत नहीं है ये जो हमारा हीरो सेक्शन है इसमें हम लोग बॉटम से मार्जिन ऐड कर सकते हैं यहां पे 20 पिक्सल तो यह टाइटल थोड़ा और नीचे आ जाएगा तो अभी इतना हो चुका है अब हम लोगों ने रेसिपीज के अंदर ये रेसिपी सेक्शन बनाया है तो हम लोग इसे स्टाइल करेंगे इस क्लास को भी मैंने कॉपी किया यहां पे और यहां पे इसे ऐड करेंगे डॉट के साथ एंड सबसे पहले तो इसमें विड्थ ऐड करेंगे तो विड्थ मैं देती हूं 90 पर एंड यहां पे हम लोग मार्जिन ऐड करेंगे तो टॉप और बॉटम से जीरो करते हैं एंड लेफ्ट राइट से कर देते हैं ऑटो जिससे लेफ्ट और राइट में इक्वल स्पेस ऐड हो जाएगा ये देख सकते हो ये कुछ इस तरह से यहां पे ऐड हो गया है यहां पे हम लोगों ने रेसिपी कार्ड के अंदर जो नेम ऐड किया है रेसिपी का इसके लिए h2 टैग का यूज किया है और इस टाइटल के लिए भी h2 टैग का यूज किया है तो ये दोनों यहां पे सेलेक्ट हो जा रहा है रेसिपी h2 के अंदर हम लोग एक काम करते हैं इस टाइटल को हम लोग h1 क्लास के अंदर ले लेते हैं यहां पे h1 कर रहे हैं फिलहाल और इंक्ड htl1041 और रिस्पांसिस भी बनाना है तो यहां पे हम लोग ग्रीड का यूज़ करेंगे जब भी हम लोगों को रिस्पांसिस कार्ड्स बनाना होता है तो ग्रीड जो होता है सबसे बेस्ट होता है अगर आप लोगों को ग्रीड नहीं पता है क्या होता है तो आप लोग मेरे सीएसएस ग्रिड की वीडियो देख सकते हो वहां पे बहुत ही बेसिक वे में मैंने आप लोगों को सारी चीजें एक्सप्लेन की है तो अगर आप लोगों ने नहीं देखा है अभी तक तो आप लोग देख लेना एक बार लिंक आप लोगों को आई बटन में मिल जाएगा तो यहां पे मैंने डिस्प्ले ग्रीड किया और कॉलम हमें बनाना है तो ग्रीड टेंप्लेट कॉलम का यूज़ करते हैं एंड जब भी हम लोग रिस्पांसिस बनाते हैं तो यहां पे हम लोग रिपीट ऑटो फिट और मीन मैक्स फंक्शन का यूज करते हैं तो यहां पे सबसे पहले रिपीट फंक्शन ऐड करेंगे एंड इसके अंदर हम लोग ऐड करेंगे ऑटो फिट एंड यहां पे मीन मैक्स फंक्शन यूज करेंगे एंड इसके अंदर हम लोग दो वैल्यू ऐड करेंगे मिनिमम वैल्यू और मैक्सिमम वैल्यू मींस मिनिमम विड्थ और मैक्सिमम विड्थ तो मिनिमम विड्थ जो होगी एक कार्ड की वो होगी 250 पिक्सेल और मैक्सिमम विड्थ 1fr तो ये कुछ इस तरह से यहां पे वैल्यू ऐड की मैंने कोर्ट को थोड़ा छोटा किया मैंने तो ये देख सकते हो तो अभी दिखाती हूं मैं आपको ये देखो अभी सारे एक लाइन में यहां पे आ चुके हैं ग्रिड के अंदर कॉलम गैप एक प्रॉपर्टी होती है वो ऐड करेंगे तो 10 पिक्सल का कॉलम गैप ऐड करते हैं यहां पे तो अभी के लिए इस सेक्शन में इतना ही रखते हैं नेक्स्ट हम लोगों ने क्लास बनाया है रेसिपी कार्ड तो रेसिपी कार्ड को सेलेक्ट करते हैं एंड इसमें हम लोग कुछ सीएसएस ऐड करते हैं तो यहां पे सबसे पहले तो बैकग्राउंड मैं कर देती हूं वाइट एंड इसमें हम लोग मार्जिन ऐड करते हैं तो टॉप और बॉटम से 30 पिक्सेल करते हैं एंड लेफ्ट राइट से 10 पिक्सेल तो अभी के लिए इतना ही रखते हैं एंड इस सेम क्लास को मैं यहां पे कॉपी करती हूं एंड रेसिपी कार्ड के अंदर ही हम लोगों ने इमेजेस ऐड किए हैं और ये सारे कंटेंट ऐड किए हैं तो यहां से इस सीएसएस को अभी हटाते हैं सबसे पहले रेसिपी कार्ड के अंदर जो इमेज है इसे सेलेक्ट करते हैं एंड इसके विड्थ को यहां पे कर देते हैं 100% जिससे क्या होगा ये जो कार्ड का जो विड्थ है हमारे इमेज का विड्थ भी उतना ही हो जाएगा तो आप देख सकते हो ये कितना सेपरेट यहां पे दिख रहा है और काफी सही भी दिख रहा है हमारा कार्ड तो ये हो चुका है अब हम लोग यहां पे कार्ड के अंदर जो बाकी के सीएसएस थे ये हम लोग ऐड कर सकते हैं तो यहां पे बॉर्डर रेडियस ऐड करते हैं 10 पिक्सल एंड इसमें हम लोग एक बॉर्डर भी ऐड कर देते हैं वन पिक्सेल का बॉर्डर ऐड करेंगे सॉलिड और बिल्कुल लाइट सा कलर ऐड करना है तो ग्रे कलर का बॉर्डर यहां पे ऐड किया मैंने ये हो चुका है नाउ इस इमेज में हमने विड्थ तो ऐड कर दिया है इसमें हम लोगों को हाइट भी ऐड करनी है तो हाइट मैं यहां पे करती हूं 200 पिक्सेल तो अब हमारा इमेज कुछ इस तरह से दिख रहा है एंड यहां पे इमेज के अंदर हम लोग ऑब्जेक्ट फिट कर देते हैं कवर अभी हम लोग इसमें एक और चीज कर सकते हैं हमने यहां पे रेसिपी कार्ड के अंदर बॉर्डर रेडियस ऐड किया है दोनों टॉप वाले जो कॉर्नर है ये यहां पे राउंड नहीं दिख रहे है तो हम लोगों को क्या करना होगा इस इमेज के अंदर भी बॉर्डर रेडियस ऐड करना होगा मुझे सिर्फ ये दोनों टॉप वाले जो कॉर्नर है इसे यहां पे राउंड करना है तो हम लोग यहां पे बॉर्डर रेडियस नहीं करके हम लोग ऐड करें देंगे बॉर्डर टॉप लेफ्ट रेडियस 10 पिक्सेल एंड इसी लाइन को मैं यहां पे डुप्लीकेट करती हूं एंड यहां पे सेकंड वाले में लेफ्ट की जगह करेंगे राइट फिफ दोनों टॉप कॉर्नर यहां पे इस तरह से राउंड हो गए तो अभी हमारा कार्ड बिल्कुल परफेक्ट हो चुका है इसके अंदर के जो कंटेंट है इसे हम लोग स्टाइल कर लेते हैं तो यहां पे जिस तरह से रेसिपी कार्ड के अंदर जो इमेज था इसे हम लोगों ने स्टाइल किया है उसी तरह से यहां पे जो बाकी के कंटेंट है इसे हम लोग स्टाइल करेंगे तो इस रेसिपी नेम के लिए हम लोगों ने h2 टैग का यूज किया है तो यहां पे इमेज को मैंने हटा दिया था h2 टैग को सेलेक्ट किया इसमें हम लोग लोगों को क्या करना है सिर्फ फॉन्ट साइज हम लोग यहां पे चेंज करेंगे तो 24 पिक्सल करते हैं या फिर 22 पिक्सेल कर लेते हैं और इसमें पैडिट ऐड कर देते हैं टॉप बॉटम लेफ्ट राइट से 20 पिक्सल इसी तरह से सेम इसी कोड को मैं यहां पे डुप्लीकेट करूंगी और यहां पे h2 के जगह ऐड करेंगे प जो इस पैराग्राफ टैग को सेलेक्ट करेगा तो यहां पे फॉन्ट साइज करेंगे 18 पिक्सल एंड इसमें भी सेम पैडिट ऐड करेंगे एंड नाउ हम लोग ये जो व्यू रेसिपी वाला जो बटन बनाया है इसे स्टाइल करेंगे तो अगेन यहां पे सबसे पहले तो रेसिपी कार्ड को सेलेक्ट करेंगे और इस व्यू रेसिपी को हमने एर टैग के अंदर ऐड किया था तो यहां पे एंकर टैग सेलेक्ट करते हैं और इसमें हम लोग करते हैं डिस्प्ले ब्लॉक तो हम लोगों को करना क्या है इसे हम लोगों को एक बटन का लुक देना है तो सबसे पहले तो यहां पे टेक्स्ट लाइन हम लोग करेंगे सेंटर एंड यहां पे टेक्स्ट डेकोरेशन करेंगे नन जैसे अंडरलाइन जो है ये चली जाएगी तो ये हो चुका है अब यहां पे एक बैकग्राउंड कलर ऐड कर देते हैं तो एक ग्रे कलर मुझे ऐड करना है तो मैं यहां पे कोड यूज कर रही हूं एंड इसके अंदर जो टेक्स्ट है इसके कलर को भी चेंज करना है तो कलर प्रॉपर्टी ऐड करेंगे और कलर देंगे वाइट ये हो गया अब इसमें ऐड करते हैं पडि तो टॉप और बॉटम से देते हैं पैडिट सिर्फ 15 पिक्सेल एंड लेफ्ट राइट से जीरो अभी आप एक चीज नोटिस कर सकते हो इस बटन का जो कॉर्नर है यह भी यहां पे राउंड नहीं हुआ तो ये हम लोगों को बार-बार इस तरह से सब में बॉर्डर रेडियस ऐड करना पड़ रहा है तो हम लोग क्या कर सकते हैं ये सारे जो कंटेंट है इस रेसिपी कार्ड के अंदर ही है एंड रेसिपी कार्ड में हम लोगों ने ऑलरेडी बॉर्डर रेडियस ऐड किया है 8 पिक्सल तो यहां पे हम लोग क्या कर सकते हैं इसमें हम लोग एक ओवरफ्लो प्रॉपर्टी होती है इसे हम लोग यहां पे कर देंगे हिडन तो जिससे क्या होगा इस रेसिपी कार्ड के बाहर जो भी कंटेंट ऐड होगा वो हाइड हो जाएगा और यह बॉर्डर रेडियस अब सारे एलिमेंट पे इक्वल हमें दिखेगा तो अगर मैं इस इमेज के अंदर जो बॉर्डर रेडियस मैंने ऐड किया अगर इसे भी मैं यहां से हटा दूं अभी तो भी आप देखो कोई चेंजेज नहीं मिलेगा आपको तो अभी ये सही है हर जगह हमें बॉर्डर रेडियस ऐड करने की जरूरत नहीं है अब यहां पे व्यू रेसिपी में भी हम लोग ऐड कर देते हैं कर्सर पॉइंटर एंड एक बार फुल स्क्रीन प देखते हैं तो देख सकते हो कितना परफेक्ट दिख रहा है हमारा ये कार्ड यहां पे हम लोग चाहे तो इस कार्ड में कुछ शैडो भी ऐड कर सकते हैं जिससे ये थोड़ा और हाईलाइट हो जाए यहां पे तो एक बार हम लोग देखते हैं ऐड करके रेसिपी कार्ड के अंदर बॉक्स शैडो तो जीरो पिक्सेल फव पिक्सेल 8 पिक्सेल एंड कुछ ब्लैक कलर का सेइड चाहिए मुझे तो आरजीबी यूज करेंगे सबसे पहले तो एंड ब्लैक कलर के लिए कोड यूज करते हैं हम लोग ि एंड ब्लर वैल्यू दे देते हैं 0.1 यहां पे वर्टिकल के लिए हम लोग फोर पिक्सेल यूज कर लेते हैं तो ये सेक्शन भी हमारा यहां पे ऐड हो चुका है अब हम लोग यहां पे डिजाइन करेंगे फुटर सेक्शन तो आते हैं index.htm में और इस सेक्शन के बाद यहां पे सबसे पहले तो फूटर टैग ऐड करते हैं एंड इसके अंदर लेंगे एक डिव एंड इस डिव के अंदर एक पैराग्राफ टैग लेंगे और इसके अंदर हम लोग फुटर में जो टेक्स्ट ऐड करने वाले वो ऐड करेंगे तो सबसे पहले एक कॉपीराइट सिंबल चाहिए तो उसके लिए यहां पर हम लोग कुछ इस तरह से ऐड करते हैं एंटिटीज मैं यहां पर टेक्स्ट भी ऐड कर देती हूं 2024 तो यह देख सकते हो हमारा फूटर यहां पर ऐड हो चुका है अब हम लोग इसे स्टाइल कर लेते हैं जल्दी से यहां पर हम लोग फुटर को स्टाइल करना बहुत सिंपल है डायरेक्टली इसे टैग के थ्रू यहां पे सेलेक्ट किया मैंने एंड इसमें सबसे पहले तो एक बैकग्राउंड ऐड कर देंगे तो इस व्यू रेसिपी के अंदर जो बैकग्राउंड ऐड किया था वही बैकग्राउंड इसमें भी ऐड करेंगे ये ऐड हो गया इसमें पैडिट कर देते हैं टॉप और बॉटम से 20 पिक्सल लेफ्ट राइट से जीरो तो ये देख सकते हो एंड नाउ इसके अंदर जो टेक्स्ट है इसके कलर को यहां पे हम लोगों को वाइट करना होगा कलर वाइट हो गया एंड यहां पे टेक्स्ट अलाइन करेंगे सेंटर जिससे क्या होगा ये टेक्स्ट सेंटर में आ जाएगा ये देख सकते हो एंड चाहे तो यहां पे हम लोग फॉन्ट साइज वगैरह भी दे सकते हैं बट इतना काफी है इसे इतना ही रहने देते हैं तो हमारा देख सकते हो ये वेबसाइट बिल्कुल कंप्लीट हो चुका है तो यहां पे मैंने चार ही आइटम्स ऐड किए हैं आप लोग चाहे तो और भी यहां पे आइटम्स ऐड कर सकते हैं एंड अब हम लोग जो मेन पार्ट है इस वेबसाइट का ये है इसे रिस्पांसिस बनाना तो अब हम लोग इसे रिस्पांसिस कैसे बनाएंगे ये देखते हैं तो सबसे पहले यहां पे इसे इंस्पेक्ट प क्लिक करती हूं मैं तो ये देख सकते हो आप कि हमारी वेबसाइट कहां तक रिस्पांसिस है ये देखो क्योंकि हमने ग्रिड का यूज किया है तो हमारा ये जो फीचर्ड रेसिपी वाला सेक्शन है ये ऑलरेडी रिस्पांसिस ही होगा इसमें हमें कुछ भी करने की जरूरत ही नहीं है यह देख सकते हो य किस तरह से यहां पर चेंज हो जा रहा है स्क्रीन के अकॉर्डिंग इसमें हमें कुछ भी नहीं करना है हम लोगों को बस इसने बार को रिस्पांस बनाना होगा क्योंकि यहां पर देखो यह इस तरह से चेंज हो रहा है तो हम लोग यहां पर क्या करेंगे एक मिनिमम विड्थ य पर हम लोग सेलेक्ट कर लेंगे जैसे 768 की स्क्रीन साइज हम लोग ऐड कर सकते हैं तो यहां पर हम लोग आ जाते हैं वापस से सीएस कोड प इसे मैं यहां से कट करती हूं पहले आते हम लोग स्टाइल ड सीएसएस में एंड यहां पर हम लोग ऐड करेंगे मीडिया क्वेरी तो मीडिया क्वेरी को लिखने का जो सिंटेक्स होता है वो होता है रेट मीडिया ओनली स्क्रीन एंड यहां पर हम लोग मिनिमम विड्थ का यूज करेंगे तो मीन विड्थ ऐड करती हूं मैं एंड मिनिमम विड्थ हम लोग ले लेते हैं 768 पिक्सल एंड इसमें हम लोगों को क्या क्या चेंज करना होगा तो इसमें सबसे पहले तो हम लोगों को यह जो नेव लिस्ट हमने ऐड कि ये सारे जो आइटम्स है ये हमें डिस्प्ले नहीं होने चाहिए 768 पिक्सल के नीचे तो यहां पर हम लोगों को एक मेन्यू आइकॉन डिस्प्ले कराना होगा आते हैं index.htm में और यहां पे हम लोगों ने जो लिस्ट आइटम ऐड किया है इसके जस्ट ऊपर मैं एक डिव लूंगी और इसमें क्लास दे देते हैं मेन्यू आइकन एंड इसके अंदर हम लोग चाहे तो आइकन का भी यूज कर सकते हैं बट उसके लिए हम लोगों को फंट ऑसम का यूज करना होगा एंड देन हम लोगों को उसके सीडीएन को लिंक करना होगा तो इतना करने से अच्छा है मैं यहां पे एंटिटी कोड का यूज कर ले रही हूं जो कि मेन्यू आइकन का कोड होता है तो वो कोड है पहले तो यहां पे हम लोग एंटिटीज इसको नंबर के थ्रू ऐड करने के लिए एंड एंड है सिंबल का यूज करते हैं देन हम लोग यहां पे नंबर ऐड करते हैं तो मेन्यू आइकन का जो कोड होता है वो कुछ ऐसा होता है ये देख सकते हो मेन्यू आइकन यहां पे ऐड हो गया है एंड अब वापस आते हैं हम लोग सीएसएस में और ये जो मीडिया क्वेरी हमने ऐड की है इसके जस्ट ऊपर यहां पे इस मेन्यू आइकन को हम लोग सबसे पहले तो स्टाइल कर लेते हैं बाद में हम इसे हाइड और डिस्प्ले करेंगे तो सबसे पहले यहां पे हम लोग इसके साइज को चेंज करते हैं फंट साइज मैं कर देती हूं 30 पिक्सेल 30 पिक्सेल बहुत ज्यादा लग रहा है 24 पिक्सेल करते हैं एंड यहां पर हम लोग पडि ऐड कर लेते हैं इस डिफ के अंदर 20 पिक्सल एंड इसमें हम लोग टेक्स्ट अलाइन कर देते हैं राइट एंड इसमें हम लोग कर्सर पॉइंटर भी ऐड करेंगे एंड ये ऑलरेडी वाइट कलर ही है तो इसमें कलर ऐड करने की जरूरत नहीं है एंड नाउ यहां पर हम लोग ऐड करेंगे डिस्प्ले ब्लॉक सॉरी ब्लॉक तो यहां प हम लोग एक बार फुल स्क्रीन प देखते हैं तो यह देख सकते हो यह जो आइकन है ये यहां पे ऐड हो रहा है बट यहां पर हम लोगों को क्या करना है ये जो मेन्यू आइकन है इस आइकन को हम लोग को हाइड करना है 768 पिक्सल के विड्थ से अगर स्क्रीन साइज हमारी बड़ी होगी तो तो इसके लिए हम लोग यहां पर क्या करेंगे यहां पे हम लोग मिनिमम विड्थ का यूज कर रहे हैं 760 पिक्सल इट मींस कि इसके अंदर जो हम लोग सीएसएस ऐड करेंगे वो 768 पिक्सल के ऊपर के स्क्रीन साइज प अप्लाई होगी तो यहां पे इसमें न्यू आइकन को सेलेक्ट करेंगे एंड यहां पे इसके डिस्प्ले में हम लोग कर देंगे नन स्टार्टिंग में हमने इसके डिस्प्ले को ब्लॉक किया था यहां पे इसके डिस्प्ले को हम लोग कर देंगे नन अभी हम लोग फुल स्क्रीन प देखते हैं ये देख सकते हो ये आइकन हमें नहीं दिख रहा है ये हमें कब दिख रहा है जब से 68 पिक्सल से कम हो रहा है हमारा स्क्रीन साइज बब तो इतना हो चुका है अब हम लोगों को क्या करना है कि जब य आइकन य पर अयर हो रहा है छोटे स्क्रीन साइज प तो इन सारे न लिस्ट आइटम जो है इसे हम लोगों को यहां से हाइड कर देना है तो इसके लिए हम लोग क्या करेंगे इन सारे लिस्ट आइटम को हमने यूल के अंदर ऐड किया है और यूल में हमने क्लास ऐड किया है ने लिस्ट तो यहां पर इसे सेलेक्ट करते हैं तो क्योंकि हम लोग यहां पर मिनिमम विथ का यूज कर रहे हैं मीस की 768 से ऊपर के स्क्रीन साइज पर यह प्रॉपर्टी अप्लाई होगी तो यहां पे इसमें हम लोग डिस्प्ले करेंगे ब्लॉक बट स्टार्टिंग में इसी क्लास को मैं यहां से कॉपी करती हूं कंट्रोल c किया मैंने और यहां पे जहां हमने यूल को स्टाइल किया है या तो उसके अंदर या फिर डायरेक्टली हम लोग इस पूरे कोड को ऐड कर सकते हैं यहां पे यूल को हमने कहां पे स्टाइल किया है ल को हमने यहां पे स्टाइल नहीं किया है इस कंटेनर के बाद इस पूरे कोड को मैं यहां पे ऐड कर रही हूं एंड यहां पे ब्लॉक की जगह कर देंगे नन तो यह देख सकते हो यह अभी यहां से यह सारे लिस्ट आइटम चले गए हैं अभी फुल स्क्रीन पे देखते हैं तो फुल स्क्रीन पर ये सारे लिस्ट आइटम मुझे दिख रहे हैं ए इंस्पेक्ट पर क्लिक करके देख लेते हैं हम लोग यह देख सकते हो जैसे ही 768 के ऊपर आ रहा है स्क्रीन यह सारे लिस्ट आइटम यहां पर दिख रहे हैं जैसे ही 768 के नीचे आ रहे है तो यह मेन्यू आइकन यहां प दिख रहा है और जो लिस्ट आइटम्स थे वो यहां से हाइड हो जा रहे है तो ये हमारा बिल्कुल रिस्पांसिस को थोड़ा रिस्पांस कर सकते हैं मीस इसके टेक्स्ट साइज वगैरह को हम लोग चेंज कर सकते हैं यहां पे तो यह भी कर लेते हैं हम लोग बाकी के जो सेक्शन है हमारे ये ऑलरेडी यहां पे रिस्पांस ही है इसमें हमें कुछ भी करने की जरूरत नहीं है ये देख सकते हो आप ये स्क्रीन के अकॉर्डिंग यहां पे ऑटोमेटिक एडजस्ट हो जा रहा है तो अभी हम लोग सिर्फ ये जो हीरो सेक्शन के अंदर कंटेंट है इसे हम लोग थोड़ा चेंज करेंगे स्मॉलर स्क्रीन साइज के लिए तो यहां पे हम लोग आते हैं वापस से मीडिया क्वेरी में एंड ये जो मैंने मीडिया क्वेरी ऐड की थी इसे लार्ज स्क्रीन साइज के लिए ऐड किया था इस पूरे कोड को मैं डुप्लीकेट करती हूं एंड यहां मैक्स विड्थ का यूज कर लेते हैं 768 मैक्स विड्थ 768 का मतलब है 768 से कम वाले स्क्रीन साइज के लिए क्या करना है हमें तो इन सबको यहां से हटाते हैं एंड यहां पे हीरो क्लास को करते सबसे पहले ए इसके अंदर जो h2 टैग है इसे सेलेक्ट करते हैं तो स्टार्टिंग में हमने फंट साइज शायद 36 पिक्सल रखा है यहां पर 25 पिक्सल कर लेते हैं 25 काफी कम हो गया है 28 पिक्सल कर लेते हैं इसी तरह से अगेन इसे यहां पर डुप्लीकेट करेंगे एंड इसके अंदर जो पैराग्राफ है इसे भी सेलेक्ट करते हैं एंड इसके फंट साइज को यहां पर कर देते हैं 15 पिक्सेल तो यह हमारा वेबसाइट यहां पर कंप्लीट हो चुका है इस मीडिया क्वेरी के बाद एक कमेंट ऐड कर देते हैं मीडिया क्वेरी इससे हमारा कोड नीट एंड क्लीन लगे थोड़ा तो यह हो चुका है यहां पे अभी एक बार पूरे वेबसाइट को हम लोग गो थ्रू कर लेते हैं ये देख सकते हो हमारे डेस्कटॉप स्क्रीन साइज प हमारी वेबसाइट कुछ इस तरह से दिख रही है एंड हम लोगों ने फूटर डिजाइन किया है ने ब डिजाइन किया एंड हीरो सेक्शन डिजाइन किया तो टोटल यहां पे चार सेक्शन हम लोगों ने डिजाइन किया है एंड हम लोगों ने इसके अंदर फॉर्म भी बनाया तो काफी चीजें हम लोगों ने सीखी है इसके अंदर एटीएमएल और सीएसएस की इसे इंस्पेक्ट प क्लिक कर लेते हैं एंड हम लोगों ने जो मीडिया क्वेरी यूज किया है उसे भी यहां पर देख लेते हैं थोड़ा ये देख सकते हो कितनी अच्छी तरह से सारी चीजें यहां चेंज हो रही है स्क्रीन के अकॉर्डिंग तो यह वेबसाइट कंप्लीट हो चुकी है एंड यह कैसी लगी आप लोगों को मुझे कमेंट करके जरूर बताना आई होप अच्छी लगी होगी एंड इस वेबसाइट में जो भी मैंने रिसोर्सेस यूज किए मी जो भी इमेजेस यूज किए यह सारे मैं आप लोगों को डिस्क्रिप्शन में दे दूंगी तो आ जाते हैं वीएस कोड प एंड यहां पर हम लोग फुल स्क्रीन पर देख लेते हैं इसे तो यह हमारी एचटीएमएल की फाइल यह देख सकते हो आप लोग काफी छोटा सा कोड है बट काफी अच्छी वेबसाइट हम लोगों ने डिजाइन कर ली है इसको यूज करके यह देख सकते हो आप ये रहा हमारा कोड एटीएमएल का सिर्फ 76 लाइन ऑफ कोड हमने लिखा है एटीएमएल के लिए एंड आते हैं सीएसएस में एंड स्टार्टिंग में आते हैं हम लोग और यहां से देख सकते हो आप लोग सीएसएस के कोड को 183 लाइन ऑफ कोड हमने सीएसएस के लिए यूज किया है बट इसमें काफी ब्लैंक लाइन भी हमने छोड़ा है तो यह और भी कमी लाइन में हमने लिखा है कोड को तो आई होप आप लोगों को काफी कुछ सीखने को मिला होगा इस वीडियो से और मैं उम्मीद करती हूं कि आप लोग अब एचटीएमएल और सीएसएस को यूज करके काफी अच्छे वेबसाइट डिजाइन कर सकते हो मेरी वीडियोस के थ्रू तो अगर वीडियो अच्छी लगी हो तो इसे लाइक कर देना एंड इसे खूब सारा शेयर करो एंड अभी तक अगर मेरे चैनल को सब्सक्राइब नहीं किया तो प्लीज चैनल को सब्सक्राइब कर लेना ताकि इस तरह के वीडियोस आप लोगों को मिलती रहे और आप लोग नई-नई चीजें सीखते रहो तो मिलते हैं नेक्स्ट वीडियो में कुछ और भी प्रोजेक्ट के साथ तब तक के लिए थैंक यू सो मच गाइस फॉर वाचिंग दिस वीडियो बा बाय