Chessboard using HTML and CSS | HTML CSS | by Rahul Cha… — Transcript

इस वीडियो में HTML और CSS की मदद से सिंपल कीबोर्ड डिजाइन करना सिखाया गया है।

Key Takeaways

  • HTML और CSS की बेसिक समझ से कीबोर्ड डिज़ाइन करना आसान है।
  • फ्लेक्सबॉक्स का उपयोग कर एलिमेंट्स को आसानी से केंद्रित और व्यवस्थित किया जा सकता है।
  • क्लास आधारित स्टाइलिंग से अलग-अलग रंग और लेआउट बनाना संभव है।
  • स्टेप-बाय-स्टेप कोडिंग से जटिल डिज़ाइन भी सरल बन जाती है।
  • बैकग्राउंड कलर और बॉर्डर के साथ विज़ुअल क्लैरिटी बढ़ाई जा सकती है।

Summary

  • वेब डेवलपमेंट के फ्री कोर्स में HTML और CSS से कीबोर्ड डिजाइन करना सिखाया गया।
  • कीबोर्ड के लिए कंटेनर और सेक्शन बनाना समझाया गया, जिसमें आठ डिव कंटेनर होते हैं।
  • क्लास A और B के माध्यम से व्हाइट और ब्लैक बॉक्सेस को अलग-अलग स्टाइल करना बताया गया।
  • CSS में बॉर्डर, विड्थ, हाइट, और फ्लेक्सबॉक्स का उपयोग कर कीबोर्ड को केंद्र में लाना सिखाया गया।
  • डिव एलिमेंट्स को हॉरिजॉन्टल और वर्टिकल फॉर्मेट में व्यवस्थित करने के लिए फ्लेक्स और फ्लेक्स-रैप का उपयोग समझाया गया।
  • हर डब्बे के लिए सही साइज और बॉर्डर देने की प्रक्रिया विस्तार से बताई गई।
  • बैकग्राउंड कलर और टेक्स्ट शैडो के माध्यम से विज़ुअल डिफरेंस क्रिएट करना सिखाया गया।
  • कीबोर्ड के हर सेक्शन को स्टेप-बाय-स्टेप कोडिंग के साथ समझाया गया।
  • वीडियो में नोटपैड++ का उपयोग करते हुए लाइव कोडिंग डेमो दिया गया।
  • अंत में यूनिकोड और टेक्स्ट एलाइन्मेंट के बारे में भी जानकारी दी गई।

Full Transcript — Download SRT & Markdown

00:00
Speaker A
दोस्तों, वेब डेवलपमेंट के फ्री कोर्स में आप सबका स्वागत है, जहां पर आज हम सीखेंगे HTML की मदद से कीबोर्ड डिजाइन करना। नॉर्मली, आप इसके अंदर देख रहे हो कि मैंने यहां पे एक प्रॉपर कीबोर्ड डिजाइन किया हुआ है, जिसमें जो जो एलिमेंट्स होते हैं जैसे कि हम बात करें घोड़ा हो गया, ऊंट हो गया, राजा, मंत्री, ये सभी चीजें भी हमने वहां पे फोटों किया हुआ है। और मैं आपको बता दूं, ये जितना भी मैंने डिजाइन किया हुआ है, ये बहुत ही ज्यादा सिंपल है। सिर्फ आपको कुछ टर्म्स को इसमें फॉलो करना है और आप बड़ी आसानी से एक कीबोर्ड HTML की मदद से बड़ी आसानी से डिज़ाइन कर पाओगे। सो मिक्सर जिसे क्या?
00:11
Speaker A
इस वीडियो को पूरा देखिए क्योंकि वीडियो आपके लिए फुल फॉर्म इनफॉर्मेशन होने वाला है। शादी आपसे एक छोटी सी रिक्वेस्ट है कि अगर ये वीडियो आपको अच्छी लगे तो प्लीज इस वीडियो को लाइक और शेयर जरूर करें। तो बिना
00:21
Speaker A
किसी देर के शुरू करते हैं इस वीडियो को। तो नॉर्मल ही आते हैं कंप्यूटर स्क्रीन पे, जहां पे आप देख रहे हो कि एक तरफ है हमारा कीबोर्ड का आउटपुट और जिस से रिलेटेड कोड मैंने नोटपैड प्लस प्लस पर
00:33
Speaker A
किया हुआ है। साथ ही यहां पे CSS का जो कोड है वो ये रहा। तो यहां पे जितना भी टर्म है हम सबको डिलीट करने वाले हैं और बिल्कुल स्टेप बाय स्टेप कुछ चीजों को समझने वाले हैं। तो यहां पर करते हैं सिंपली कंट्रोल ए
00:43
Speaker A
और इसे करते हैं डिलीट। कंट्रोल एस कर देते हैं। यहां पर आते हैं, इसे भी सिलेक्ट किया पूरे इस टर्म को यहां से लेकर यहां तक और इसको भी मैं कर देता हूं डिलीट। कंट्रोल एस करेंगे। यहां पे आएंगे लोड और ये हो जाएगा
00:53
Speaker A
पूरा का पूरा ब्लैक मतलब यहां पे अब कुछ भी नहीं है। अब यहां पे सबसे पहले हम शुरुआत करेंगे एक बड़े कंटेनर के साथ जिसमें जितने भी हमारा कीबोर्ड है वो सब कुछ आने वाला है। तो सबसे पहले हम यहां
01:03
Speaker A
करेंगे क्या? हमने लिखा सिंपल और इसको हमने क्लास दे दिया। क्या क्लास देंगे? हम कीबोर्ड कुछ इस तरीके से। और इस डिव को क्लोज किया है। फिर यहां पे आएंगे सिंपल, हमने यहां पे इस डिव को हम क्लोज कर देते हैं।
01:14
Speaker A
इसके बाद यहां पे एक मिंट टर्म को समझना है। अगर मैं यहां पे आपको एग्जांपल दूं एक कीबोर्ड का जो कि हो इसके ना आप देख रहे हो तो सबसे पहले यहां पे एक रो है ये।
01:25
Speaker A
एक सेक्शन। इस सेक्शन में टोटल कितने डब्बे हैं? एक, दो, तीन, चार, पांच, छे, सात, आठ। राइट? यानी कि हमें एक सेक्शन में कितने कंटेनर चाहिए? आठ कंटेनर चाहिए। तो सबसे पहले यहां पे मैंने लिखा एक डिव और जो व्हाइट चैनल
01:36
Speaker A
है इसको हम दे देते क्लास ए। ब्लैक वाले को हमने दे दिया क्लास बी। तो यहां पर मैंने दिया क्लास इक्वल ए। ठीक है? समझना है यहां पे ध्यान से। और इस डिव को हमने क्लोज। अब एक ही बार दूसरा कौन सा आएगा? ब्लैक यानी
01:46
Speaker A
की बी। तो हम यहां पे कंट्रोल डी करते हैं। डुप्लीकेट बन गया और इसका क्लास बस मैं यहां पे कर देता हूं चेंज। इसके बाद इसी को हमने किया कॉपी। यहां पे आए सिंपल, हमने किया कंट्रोल वी, कंट्रोल वी, कंट्रोल वी। तो
02:00
Speaker A
टोटल हमारा जो पहला सेक्शन है वो यहां पे क्रिएट हो गया। राइट? इसके बाद एक टर्म को समझना। देखो ये है ए, ये है बी, ए, बी, ए, बी, ए, बी। और फिर क्या ए गया? ए जबकि मैं बात करूं
02:12
Speaker A
ए, मैंने किसको दिया? व्हाइट कलर को। और इसका क्या दिया है? बी ब्लैक वाले को। क्या दिया है हमने? क्लास बी दिया है। तो यहां पे जो दूसरा रो वो किस से शुरू होगा? क्लास बी से। अगर मैं इसको व्हाइट कलर दे रहा हूं, इसको
02:24
Speaker A
ब्लैक दे रहा हूं तो दूसरा सेक्शन हमारा किस से शुरू होगा? क्लास बी से। अगर आप थोड़ा-बहुत कंफ्यूज हो तो टेंशन मत लो। ये कन्फ्यूजन अपने आप छोड़ दे रहा है, क्लियर हो जाएगा। तो सबसे पहले यहां पे थोड़ा सा चेंज
02:37
Speaker A
करना है। हम यहां पर आएंगे दूसरे सेक्शन के लिए। हमने लिया डिव क्लास इक्वल टू बी और फिर हमने इस डिव को क्लोज किया। सिंपल। और फिर यहां पे हमने दिया डिव क्लास इक्वल ए और फिर यहां पे हमने डिव को क्लोज कर
02:49
Speaker A
दिया। अब यहां पे सिंपल टर्म क्या है? क्लास ए मतलब हमने बोला है ए और क्लास बी मतलब हमने बोला है बी। तो यहां पे अगर ए है तो ऑटोमेटिकली यहां पे शुरुआत किस से होनी चाहिए? बी से। तो पहला वाला रो होगा सीधा
03:00
Speaker A
पॉर्शन में और दूसरा वाला जो रो है वो होगा बी के साथ शुरू। मतलब अगर ये ए से शुरू किया हमने तो ये बी के साथ हम इसको कर लेते हैं। यहां पे कॉपी। यहां पे आते हैं। इसके भी आठ हमें कंटेनर बनाने हैं। तो ये
03:14
Speaker A
आठ कंटेनर बन गया। ये बना लिया हमने दो सेक्शन। इसको करेंगे कॉपी। दो सेक्शन बन गए। अब ये दो सेक्शन बनाने हैं। फिर यहां पे आते हैं। हमने लिया, हमने किया कॉपी पेस्ट। फिर हमने क्या? यहां पे कॉपी पेस्ट। और फिर
03:25
Speaker A
क्या? कॉपी पेस्ट। टोटल यहां पे हमने आठ सेक्शन बना दिया। एक, दो, तीन, चार, पांच, छे, सात और ये आठ। तो यहां पे जो हमारा कंटेनर पॉर्शन है वो यहां पे रेडी हो गया है। सिंपल। अब मैं इसको सिंपल कंट्रोल करूंगा और
03:37
Speaker A
सिंपली मैं इसको रीलोड करूंगा। तो आप देखोगे यहां पे कुछ भी अभी आउटपुट हमें नजर नहीं आ रहा क्योंकि अभी ये जो डिव है वो सारे के सारे क्या हैं? खाली हैं। इनसे रिलेटेड कोई भी एडिटिंग हमने अप्लाई नहीं
03:49
Speaker A
किया हुआ। तो सिंपल आते हैं अपनी CSS फाइल में और सबसे पहले जो हमारा पूरा में कंटेनर है वो है क्या? कीबोर्ड। तो यहां पे डालेंगे हम डॉट कीबोर्ड। इसके बाद यहां पे आते हैं। हमने क्या? यहां पे सिंपल बॉर्डर
04:02
Speaker A
और हम दे देते हैं। बॉर्डर क्या दें? हम देते हैं 2px सॉलिड ब्लैक ताकि हम आइडेंटिफाई कर सके कि हमारा कीबोर्ड का जो डाइमेंशन है वो कितना है। तो कंट्रोल करेंगे। यहां पे रीलोड करेंगे तो एक सिंपल
04:12
Speaker A
सी लाइन आ रही है क्योंकि इसकी विथ और हाइट हमने बता ही नहीं। तो हम बता देते हैं कि जो इसकी विथ है वो कर दो 80%। ठीक है? और जो इसकी हाइट है वो कर दो 640px अभी।
04:26
Speaker A
हाइट को मैं परसेंटेज में इसलिए नहीं दे रहा क्योंकि ये कैलकुलेट ही नहीं करेगा कुछ। तो इसीलिए हम यहां परसेंटेज में नहीं दे रहे हैं। और हम इसको कर देंगे। ये आ गया। देखो एक डाइमेंशन डाइमेंशन में हमारे
04:39
Speaker A
सामने। अब मुझे उसको बीच में लाना है। तो बीच में लाने के लिए हम सिंपल यहां पर आते हैं ऊपर और हम डालेंगे बॉडी की। बॉडी के अंदर जो एलिमेंट हम ले रहे हैं उसको मुझे बीच में लेके आना है। तो सबसे पहले जो बॉडी
04:51
Speaker A
का फॉर्मेट है वो मुझे चेंज करना है। मैंने कर दिया डिस्प्ले फ्लेक्स। नंबर वैन फ्लेक्स करने के बाद आप उसे सेंटर में आसानी से कर सकते हो और उसके कंटेंट को भी। इसके बाद यहां पे हम सिंपली डालेंगे
05:01
Speaker A
आलाइंन आइटम सेंटर। कंट्रोल एस क्या है? यहां पे क्या? रीलोड। तो देखो ये सेंटर में आ गया बीच में। और इसके बाद यहीं पे आते हैं। हमने यहां पे लिखा जस्टिफाई कंटेंट सेंटर। जैसे हम करेंगे तो यह जो टर्म है
05:13
Speaker A
पूरा का पूरा बीच में आ जाएगा दाएं-बाएं, ऊपर नीचे हर जगह से। अब यहां पे हमने दो चीजों को एडिट कर दिया। अब आते हैं तीसरे टर्म पे जो कि है ये वाले डिव कंटेनर्स। अब हम इनको एडिट करने वाले हैं। तो सबसे पहले
05:23
Speaker A
यहां पे आते हैं और मैं बोल रहा हूं डॉट कीबोर्ड के जो डिव हैं सिंपल हमने क्या लिखा है? डॉट कीबोर्ड के जो डिव हैं उसको मैं एडिट कर रहा हूं। हम उसको टारगेट कर रहे हैं। हम यहां पे आए। अब इसमें जो हमने
05:39
Speaker A
डब्बे लिए हैं उसको हम क्या? विड्थ से दे रहे हैं, क्या हाइट दे रहे हैं क्योंकि हर एक डब्बे का और हाइट होगा। तो यहां पे मैं क्या बोल रहा हूं? यहां पे सबसे पहले तो हम इसके जो विड्थ है उसको हम कर देंगे। यहां पे
05:50
Speaker A
विड्थ मैंने किया 80%। तो आठ डब्बे हम लेने वाले हैं। तो एक डब्बे का कितना हुआ? 10%। तो हमने सिंपल यहां पे लिखा 10%। इसके बाद हाइट डाल देते हैं। तो हाइट मैंने लिया यहां पे 640px। तो एक की हाइट कितनी हुई? अगर
06:01
Speaker A
आप इसे डिवाइड करोगे तो वो होगा 80px। ठीक है? एक डब्बे का। तो हमने यहां पे कंट्रोल एस। यहां पे आते हैं करते हैं। तो अभी यहां पे कुछ नहीं आया। क्यों नहीं आया? क्योंकि उससे रिलेटेड नाम ने बॉर्डर
06:14
Speaker A
अप्लाई किया हुआ है ना। हमने बैकग्राउंड कलर दिया तो हम उसे देख ही नहीं पा रहे हैं। तो हम यहां पे दे देते हैं बॉर्डर 1px सॉलिड ब्लैक। अब आपको ये दिखाई देगा। देखो ये आ गया इस तरीके से। लेकिन अभी
06:28
Speaker A
ये कैसे आ रहा है? वर्टिकल पॉर्शन में आ रहा है। मुझे कैसे चाहिए? हॉरिजॉन्टल पॉर्शन में कि पहले यहां पे लाइन से आ जाए फिर उसके बाद अपने आप नीचे आ जाए फिर अपने आप नीचे आ जाए। राइट? तो इसके लिए मैं करना
06:39
Speaker A
क्या है? हम आएंगे कीबोर्ड यानी कि ये जो में टर्म है इसमें आएंगे और इसका फॉर्मेट हम चेंज करेंगे। जैसे ऊपर गया था बॉडी का ऐसे कर देंगे डिस्प्ले फ्लेक्स और फ्लेक्स रैप कर देंगे। देखो जब आप डिस्प्ले फ्लेक्स
06:52
Speaker A
लेते हो तो आपको और भी जो CSS एलिमेंट्स होते हैं जैसे एलाइन आइटम, जस्टिफाई कंटेंट है, फिर फ्लेक्स रैप इन तरीके के टर्म्स को आप उसे कर सकते हो। तो जैसे आप करोगे रैप कंट्रोल एक्स करोगे यहां पे आके रीलोड
07:02
Speaker A
करोगे तो आप देखोगे कीबोर्ड के फॉर्मेट में यहां पे अप्लाई हो गया है। लेकिन अभी आप क्या देख रहे हो कि यहां पे थोड़ा सा गया। अब बचा हुआ है प्रॉपर तरीके से एडजस्ट हुआ नहीं। प्लस में अगर मैं दो काउंट करूं 1,
07:15
Speaker A
2, 3, 4, 5, 6, 7, 8, 9, 1 सेक्शन 129। मुझे कितने चाहिए? आठ। तो अब ये चीज हमें इसको बतानी पड़ेगी। तो सबसे पहले तो यहां पे मैं आता हूं और मैंने लिखा डॉट का जो बैकग्राउंड कलर है वो हम अलग रखेंगे और बी का
07:26
Speaker A
बैकग्राउंड कलर हम अलग रखेंगे। तो मैंने डॉट ए का बैकग्राउंड कलर किया व्हाइट। सिंपल। यहां पे आते हैं कर देते हैं व्हाइट इस तरीके से। ठीक है? इसके बाद इसी को किया कॉपी। यहां पे आएंगे और यहां पे इसका
07:38
Speaker A
बैकग्राउंड कलर हमने किया ब्लैक। अब यहां पे सिंपली मैंने दिया बैकग्राउंड कलर व्हाइट और बैकग्राउंड कलर ब्लैक। अगर मैं इसको यहां
07:54
Speaker A
बैकग्राउंड कलर हम अलग रखेंगे तो मैंने डॉट ए का बैकग्राउंड कलर किया व्हाइट सिंबल यहां पे आते हैं कर देते हैं व्हाइट इस तरीके से ठीक है इसके बाद इसी को किया कॉपी यहां पे आएंगे और यहां पे इसका
08:07
Speaker A
बैकग्राउंड कलर हमने किया ब्लैक अब यहां पे सिंपली मैंने दिया बैकग्राउंड कलर व्हाइट और बैकग्राउंड कलर ब्लैक अगर मैं इसको यहां पे लोड करूं तो आउटपुट कुछ इस तरीके से आएगा ऐसा क्यों ए रहा है क्योंकि एक सीरीज में हमारे बॉक्स कितने होने
08:20
Speaker A
चाहिए आठ लेकिन यहां ए रहे हैं नो इस वजह से गड़बड़ हो रही है तो सबसे पहले यहां पे आओ यहां आने के बाद आपको यहां पे ये बोलना है की ये जो इसकी हाइट है एक सेक्शन के
08:30
Speaker A
इसमें सिर्फ आठ एलिमेंट ये आने चाहिए तो मैं बोल रहा हूं जो इसकी विथ है इसका जो भी पूरा डाइमेंशन है 100% इसको 8 हसन में बांट दो मतलब यह जो विथ है 100% इसको आर्टिस्ट में बांट दो मतलब एक सेक्शन में
08:44
Speaker A
कितने दीव आने चाहिए आठ तो हमने क्या इसको बंद और बंद करने के बाद यहां पे ये इक्वेशन अप्लाई हो इसके लिए हम दे देंगे कैलकुलेट कालिक मतलब कैलकुलेशन इसको क्या बंद कंट्रोल्स करते हैं रीलोड करते हैं तो
08:55
Speaker A
ये आगे कुछ इस तरीके से एक दो तीन चार पंच छे सात अभी कितने ए रहे हैं सात ए रहे हैं क्यों ए रहे हैं क्योंकि हमने दे रखा है बॉर्डर वैन पे एक सॉलिड ब्लैक तो जो ये 1
09:05
Speaker A
पिक्स है सबका अगर 1 पीस 1px जोड़ेंगे तो यहां पे हो जाएगा कम पद जाती है तो इसकी वजह से हम इस बॉर्डर वाले एलिमेंट को काट दो यहां पे कंट्रोल लांस केरल और क्या जैसे आप रीलोड करोगे आप देखोगे की आपका के
09:17
Speaker A
बोर्ड यहां पे रेडी हो जाता है सिंपल और उसके नाम के सामने अब यहां पे थोड़ा सा गड़बड़ लग रहा है क्योंकि ये जो डॉट ए है वो भी व्हाइट है और जो डॉट ए है वो भी ब्लैक है यहां पे तो डॉट ए डॉट ए कर रखा
09:30
Speaker A
है इसको डॉट बी करना है कंट्रोलर्स करते हैं रीलोड करते हैं अब देखो प्रॉपर वे में पहला व्हाइट फिर ब्लैक फिर व्हाइट फिर ब्लैक है और इस तरीके से आपको जो प्रॉपर के बोर्ड है वह यहां पर रेडी हो जाता है
09:40
Speaker A
अब ये होने के बाद में क्या करता हूं की यहां पे जो इसकी विथ है उसको भी मैं कर देता हूं 90% यहां पे आता हूं सिंपल विथ को मैंने क्या 90% कुछ इस तरीके से और जो हाइट है इसको भी मैं कर देता हूं 90% ये
09:53
Speaker A
क्या है कंट्रोल एसके यहां पे आएंगे कर देंगे तो ये थोड़ा थोड़ा गैप ए रहे हैं यहां पे आप देख का रहे हो इसके बाद सिंपली करते क्या है यहां से इस विथ और हाइट को हटा देते हैं इस तरीके से और हटाने के बाद
10:04
Speaker A
यहां पे आते हैं ये दोबारा मैं यहां पे ले आता हूं मेहनत ना करनी पड़े मैं दोबारा से कंट्रोल एक्स कर लेते यहां से यहां पे आते हैं इसके विपरीत हम अलग से मेंशन कर देते हैं जिससे इसकी विथ है तो विथ सैम ने कर
10:15
Speaker A
दिया 100% और हाइट जो है वो हम बोल रहे हैं की मैन लो 100% विथ है तो 100% को अगर आप आठ हिस्से में बांट दोगे डिवाइड करके देख लेना तो वो आएगा 12.5% कंट्रोल एक्स करते हैं यहां पे से इसी को हमने किया
10:30
Speaker A
कॉपी और यही टर्म अप्लाई कर देंगे हम डॉट बी वाले सेक्शन में कंट्रोलर्स करेंगे यहां पे क्या रीलोड अब आप देखो जो भी एक्स्ट्रा गैप ए रहा था वो यहां से है गया है अब आता है में टर्म जो हमें इसमें क्या
10:41
Speaker A
अप्लाई करना है जो भी इसके हम बात करें जो भी पीस होते हैं जैसे हाथी हो गया घोड़ा हो गया ऊंट हो गया तो वो आप कैसे डालोगे देखो इसके लिए करना क्या है सिंपल आते हैं इस वाले सेक्शन में ये जो दीप सेक्शन है
10:51
Speaker A
और साइड में आप गूगल खोल लो तो ज्यादा बढ़िया रहेगा और यहां पे हम डालते हैं एचटीएमएल कोड फॉर के पीस है ये हम दल देते हैं इस तरीके से ठीक है ये हमने डाला डालने के बाद आप देखो यहां पे के सिंबल्स
11:06
Speaker A
इन यूनिकोड विकिपीडिया इस पे क्लिक कर दो क्लिक करने के बाद आप देखो हर एक एलिमेंट के लिए यहां पे एक यूनिकोड आपको दिया हुआ है आप यहां पे देख का रहे होंगे तो आपको सिंपल करना क्या है जैसे सबसे पहला जो
11:16
Speaker A
प्लेस होता है वो होता है हाथी का तो हम यहां से इसको करते हैं कॉपी 20 को हमने यहां पे किया फेस फिर इसके बाद आए यहां पे दूसरा टर्म होता है यहां पे आता है घोड़ा ये तो हम यहां पे हमने क्या पेस्ट यहां पे
11:29
Speaker A
हमने इसको कर दिया 22 ठीक है इसके बाद फिर आते हैं यहां पे फिर आता है तो इस नंबर पे ऊंट तो हमने यहां पे 21 चौथे नंबर पर आपका यहां पर ए जाता है मैन लो राजा है या फिर
11:40
Speaker A
रानी है तो इसको की है कॉपी कॉपी करने के बाद यहां आते हैं हमने क्या पेस्ट और फिर पांचवे नंबर पे दोबारा क्या करेंगे हम इस मंत्री या फिर रानी जो भी बोल लो आप इसको कर देंगे पेस्ट सिंपल से कॉपी करना है पेश
11:52
Speaker A
करना है इसके अलावा कोई टर्म नहीं है अब मैं यहां तक का डेमो आपको शो कर देता हूं या फिर ये जो फिल है इसको भी हम ले लेते हैं ताकि एक सेक्शन गोरा भर जाए हमारा यहां क्या पेस्ट यहां पे भी आई क्या पेस्ट
12:03
Speaker A
पेस्ट और यहां पे सब में हमने फिल किया कंट्रोल लांस किया है यहां पे आएंगे और क्या रीलोड अब जैसे मैं लोड करूंगा अब देखो की जितने भी एलिमेंट्स हैं वहां पे ए गए हैं लेकिन देखने में बहुत छोटे लग रहे
12:13
Speaker A
हैं तो आपको सिंपल करना है क्या आपको आना है ये जो डॉट के बोर्ड देव है इसी के अंदर ये सारे के सारे फॉन्ट है तो ये फॉन्ट की कैटिगरी में आते हैं आपको सिंपल करना है फॉन्ट साइज मैं कर देता हूं 30 भी एक्स इस
12:25
Speaker A
तरीके से कंट्रोल एस के रीलोड किया 30 का हम लग रहा है तो हम क्या कर देते हैं 50 इस तरीके से हमने कर दिया रूट अब ये सही साइज ए रहा है इसको कर लेते हैं बीच में
12:33
Speaker A
तो हमने क्या टेक्स्ट लाइन सेंटर कंट्रोलर्स क्या रीलोड कर दिया आगे बीच में लेकिन जो ब्लैक पे वो तो नजर ही नहीं ए रहा तो आपको करना क्या है सिंपल यहां पे करना है टैक्स शैडो ठीक है और 2px हमने
12:47
Speaker A
किया 1 पीस और मैं कर देता हूं व्हाइट अब यहां पर यह सब आपको नजर आएंगे वो भी काफी अच्छे लुक में जो की हो इसके नाप देख का रहे हो ठीक है तो बेसिकली हमने क्या किया पीछे से व्हाइट ग्लो दे दिया जिसकी वजह से
12:59
Speaker A
वो अट्रैक्टिव लुक भी रिप्रेजेंट करें और जो ब्लैक पे एलिमेंट हमने डाला है वो भी हमें नजर आए अब यही से चीज करनी है आपको नीचे भी तो सिंपल में इसको कर लेता हूं यहां पे कॉपी सिंबल कॉपी किया और सबसे
13:10
Speaker A
लास्ट वाली सेक्शन में सेकंड लास्ट में ये वाला यहां पे क्या पेस्ट और सिंपल यहां पे कर दिया इसको पेस्ट इसके बाद ए जाते हैं दूसरे सेक्शन में ये वाला जो 20 21 ये वाला तो हमने किया इसको कॉपी कॉपी करने के
13:23
Speaker A
बाद सबसे पहला वाला प्लेयर कौन सा है हमारा हाथी हमने कहा यहां पे हाथी [संगीत] इसको हमें बीच में लाना था इसलिए हमने यहां पे बॉडी में डिस्प्ले फ्लेक्स किया आलिंगन आइटम सेंटर जस्टिफाई कंटेंट सेंटर फिर ए जाते हैं डॉट के बोर्ड तो इसके
14:36
Speaker A
बॉर्डर हमने दे दी ताकि हमें दिखाई दे इस तरीके से विथ हमने कर दिया 90% और हाइट कर देना 94% ताकि ये स्क्वायर डाइमेंशन में हमें नजर आए इसके बाद हमने किया डिस्प्ले फ्लेक्स और क्या है फ्लेक्स ये क्यों किया
14:48
Speaker A
था हमने क्योंकि ये जितने भी बॉक्स तैयार रहते हैं वर्टिकल मतलब सीधे ए रहे द और हमें चाहिए द ऐसे हॉरिजॉन्टल तो इसके लिए हमने डिस्प्ले फ्लेक्स के और फ्लेक्स किया इसके बाद आपने देखा की एक सेक्शन में 8 से
15:01
Speaker A
ज्यादा बॉक्स ए रहे द तो हमने ये बताने के लिए की भाई जो इसकी पुरी विथ है 100% इसमें सिर्फ आठ ही एलिमेंट आना चाहिए इसलिए हमने इसे आठ से डिवाइड कर दिया और कालिक को जो हमने यहां पे लिखा है इसका
15:11
Speaker A
मतलब है कैलकुलेट है फॉन्ट साइज ये जो आपके टेक्स्ट हैं जो आपने यहां पे ये सिंबल्स लिए हैं ये आज अन फॉन्ट यहां काउंट हो रहे हैं तो हमने फॉन्ट साइज दे दिया और टेक्स्ट लाइन हमने कर दिया सेंटर
15:22
Speaker A
और ये हमें दिखाई दे ब्लैक पे भी इसके लिए हमने यहां पे टैक्स शैडो दे दिए ठीक है और इसके बाद ये जितने भी डॉट ए बॉक्स वगैरा है इनके विथ को हमने यहां पे 100% कर दिया और हाइट को हमने यहां पे 12.5% कर
15:34
Speaker A
दिया ताकि ये हर केसेस में जब हम इसे छोटा बड़ा करें तो हमें प्रॉपर वे में ये नजर आए आशा करता हूं दोस्तों ट्यूटोरियल आपको पसंद आया होगा अगर ये वीडियो आपको अच्छा लगा है तो प्लीज इस वीडियो को लाइक करें
15:45
Speaker A
शेयर करें साथ ही कमेंट करके अपना फीडबैक जरूर दें थैंक यू
Topics:HTMLCSSकीबोर्ड डिजाइनफ्लेक्सबॉक्सवेब डेवलपमेंटनोटपैड++बैकग्राउंड कलरबॉर्डरडिव कंटेनरस्टेप-बाय-स्टेप कोडिंग

Frequently Asked Questions

इस वीडियो में HTML और CSS से कीबोर्ड कैसे बनाया जाता है?

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

कीबोर्ड के डिव एलिमेंट्स को हॉरिजॉन्टल कैसे व्यवस्थित किया जाता है?

CSS में डिस्प्ले फ्लेक्स और फ्लेक्स-रैप का उपयोग कर डिव एलिमेंट्स को हॉरिजॉन्टल लाइन में व्यवस्थित किया जाता है ताकि वे लाइन से नीचे की ओर स्वचालित रूप से जाएं।

कीबोर्ड के लिए क्लास A और B का क्या महत्व है?

क्लास A और B का उपयोग व्हाइट और ब्लैक रंगों के डिव एलिमेंट्स को अलग-अलग स्टाइल करने के लिए किया जाता है, जिससे कीबोर्ड का सही रंग पैटर्न बनता है।

Get More with the Söz AI App

Transcribe recordings, audio files, and YouTube videos — with AI summaries, speaker detection, and unlimited transcriptions.

Or transcribe another YouTube video here →