Up next in 10
Our First Tailwind CSS Website_ Tailwind Tutorial #2
14 views
Feb 21, 2024
"Our First Tailwind CSS Website: Tailwind Tutorial #2" is a tutorial video designed for developers diving deeper into Tailwind CSS. In this video, viewers embark on the journey of creating their first website using Tailwind CSS. The tutorial walks through the process step-by-step, demonstrating how to leverage Tailwind's utility-first approach to efficiently style various elements of the website. From layout design to typography and responsive styling, viewers learn practical techniques to implement Tailwind CSS effectively in their projects. By the end of the video, viewers gain a solid foundation in using Tailwind CSS to build visually appealing and responsive websites.
View Video Transcript
0:00
Tailwind CSS की साहिता से अपनी websites को बनाना बेहद आसान है�
0:03
अब simply Tailwind की place IDN को include करो अपनी HTML फाइल में और Tailwind की classes यूज़ करना start कर दो�
0:09
पिछले वीडियो में जो मैंने आप लोगों को Visual Studio Code Extension बताई थी, वो तो Cherry on the Cake है, मज़ा आ जाता है उसको लगाने के बाद, क्योंकि आपको Classes याद रखने की ज़रूरत भी नहीं पड़ती है�
0:19
आप बाद शुरू करेंगे और आपको वाले प्रवाण बनाएगी इस वीडियो में हम अपनी पहली वेबसाइट बनाएंगे जो एक पेज होग�
0:29
तो चलते हैं कंप्यूटर स्क्रीन के अंदर और अपनी पहली वेबसाइट को बनाना चलते है�
0:34
अब मैं करूंगा क्या यहां पर मैं कोशिश करूंगा एक लेंडिंग पीछ बनाने की टेलविंड सीएसस की साइजर से अच्छा टेलविंड सीएसस के बारे में एक बात और मैं आप लोगों को बताना चाहता हूं वो यह है कि जैसे कि आप लोग यहां पर टैक्स देख रहे �
1:04
आप प्रॉब्लम इस वीडियो के इस सारा से इसको सेट अप किया जा सकता है तो यहां पर मैं यह बताना था कि आ�
1:10
किसी भी क्लास पर होवर करते हो अपने माउस एरो को लेकर जाते हो तो यहां पर यह बताएगा कि कौन सी क्लास क्य�
1:16
रही है यानि कि आप लोगों को यह बताएगा कि पीएक्स फोर्स से कौन सी सी एस प्रॉपर्टी को अप्लाई किया जा रह�
1:22
है ठीक है तो यहां पर दल्दी से एक बार और सेट अप बताऊंगा और सेट अप बना देंगे पहले मैं क्या करूंगा यहा�
1:28
अपना सेट अप बिकारण होंगा कहने का मतलब यह है कि मैं यह फाइल सारी डिलीट करते हुए आपको यह क्या करत�
1:34
लिए तो बड़ी मेहनत से सेट अप हुआ था तो यहीं तो प्रूव करना चाहता हूं मैं ज्यादा मेहनत से सेट अप नही�
1:38
बदल मैंने क्या किया था तब से पहले तो मैं टेल विंड सर्च करूंगा यहां पर आऊंगा और एकदम शुरू से आ�
1:45
लोगों को बता रहा हूं कि क्या कर रहा है आपको टेल विंड सही से सेट अप करना है तो तो मैं यूजिंग पॉजि�
1:49
वाले section में जाकर यहाँ पर यह सारे packages install कर लूँगा लेकिन उससे भी पहल�
1:53
मैं क्या करूँगा npm init कर लूँगा ठीक है और npm init और यह लिखन�
2:01
के बाद मैं क्या करूँगा कुछ इस तरह से सब कुछ खाली छोड़ दूँग�
2:05
और वैसे आप नियुक्त कर दो यह सब्सक्राइब पूछे नहीं आते हैं पर अभी के लिए याद छोड़ देता हूं मैं इसको ठीक ह�
2:17
मुझे यह नहीं आ रहा है किसी को याद आए तो कमेंट में बताना क्या होता है एंट्रीम के बाद एंट्रीम ने के बा�
2:22
लिखते हैं कि एकदम से सारी फाइल बन जाती है सारे क्वेश्चन पूछे नहीं जाते हैं तो यहाँ पर मैं क्य�
2:27
करूंगा अभी जल्दी से यह पेस्ट करूंगा जो कि मैं कॉपी करके लाया था यहां से राइट लिख कॉपी करूंगा त�
2:33
मैंने कॉपी नहीं किया था इसको और एक चीज और यहां पर आड़ करना हूं वह है विट विट ठीक है एंटर बारूंगा औ�
2:40
यह एंटर मारने के बाद यह सारे पैकेज इंस्टॉल हो जाएंगे यह सारे के सारे पैकेजेस के साथ साथ विट मैंन�
2:45
इस टॉल किया कि मैं एक सर्वर स्टार्ट करना चाहता हूं जो ऑटोमाटिकली रिफ्रेश हो ठीक है अब यहां पर देख�
2:51
जैसे मैं चेंज करूंगा वैसे वैसे ऑटोमाटिकली जो है यह रिफ्रेश होता जाएगा इसके बाद यह एंटी एक्स टेलविं�
2:58
इसे से नेट मुझे चलाना है ठीक है यह मैं कर दूंगा ठीक है एंटर बारूंगा और यहां पर एक पेल में डॉ�
3:04
कॉनफिक डॉट जिस पाइल आ जाएगी एक कम और यहां पर मैं करूंगा कि यहां पर स्टार्ट लगा दूंगा यह सारी फाइलो�
3:09
तो आप लोग बड़े आराम से यहां पर यह देखो अगर मैं आप टेक्स्ट रेड करना चाहता हूं तो इस तरह स�
3:28
टेक्स ट्रेट कर दूंगा अब एक चीज यहां पर देखो यहां पर टेक्स वाइट भी कह रहे हो टेक्स रेड भी कह रहे हो एक बात कह लो न�
3:33
दोनों एक ही तो चीज होगा एक ही तो प्रॉपर्टी को चेंज कर रहे हैं text red और text white का क्या मतलब ह�
3:37
एक ही तो color हो सकता है text का तो मैं text white वाली glass अटा दूँगा मैं जिस्ट आप लोगों को यह दिखाना चाहता थ�
3:42
कि यहाँ पर आप लोग इसको use कर सकते हो और एक चीज और मैं यहाँ पर करूंगा मैं यहाँ पर अपने सर्वर को स्टार्ट करने की एक स्क्रिप्ट आड़ करूंगा और यहाँ पर एक ऑटोमाटिकली स्क्रिप्ट एड़ होती है टेस्ट तो मैं इसको वीड कर दूँगा और यहाँ पर मैं स्टार्ट कर दूँगा �
4:14
तो यह दोगों रिलोड हुआ सर्वर हमारा क्योंकि हमने चेंज करी हैं एंडेक्स और एसटीमल और यहां पर देखो यह भी रिफ्रेश हो गया तो डेवलपमेंट एक्सपीरियंस बहुत बढ़ीया होने वाला है ठीक है तो इस तरह से हम लोग डेवलप करेंगे और यह बात �
4:44
बनाए नहीं, ज़्यादा कोई लंबी चौड़ी rocket science है नहीं, ठीक है, एक wheat package मैंने extra install किया है
4:49
server को start करने के लिए, ठीक है, तो यह जो setup है, सबको समझ में आ गया
4:53
आशा यही करता हूँ, और यहाँ पर आप लोग अब देखो, पी एक्स वर पी वाई फोर क्या करता है यह भी आपको समझ में आ गया अब बनाऊंगा यहां पर लैंडिंग पेज और किसी भ�
5:01
मैपसेट को बनाने से पहले जो काम आप लोगों को करना चाहिए पता है क्या है आप लोगों को लैंडिंग पेज टेंपले�
5:08
देखना चाहता हूँ कि net पर landing page की कैसी कैसी template पड़ी हुई है क्या मैं को�
5:13
template देखकर उससे inspiration ले सकता हूँ अगर हाँ ले सकता हूँ तो मैं उससे inspiration लेने के बाद ह�
5:19
template को बनाओंगा ठीक है अब कभी कभी designing बहुत लंबा चौड़ा time ले लेती है लेकिन अभी के लि�
5:24
हम लोग क्या करेंगे बहुत ही basic से designing करेंगे एक landing page की और जस्ट आप लोगों दिखाना ये चाहता हूँ कि एक काम कितना जादा असाने tailwind की साइटस है तो मैं जस्ट एक roughly इसको बनाने की कोशिश करूँगा मैं पूरा clone नहीं करूँगा लेकिन मैं roughly ये landing page बनाने की कोशिश �
5:54
लिख दूंगा यह फिर मैं काम करूंगा मान लेते हैं कि हम फोन सेल करते हैं ठीक है बेस्ट फोन इन लकन�
6:05
ठीक है ग्राब द डील ना ठीक है मान लोग हम यूज़ फोन सेल करते ठीक है और अच्छी डिल प्रोवाइड करते है�
6:16
पर तो मैंने यहां पर लिए बेस्ट यूज़ पॉन से लखनो ग्राब्ड डिल ना हो ठीक है तो मैं यहां पर यह करूंगा इन नेव�
6:22
बनाऊंगा नवार के अंदर यूएल बनाऊंगा यूएल के अंदर एलाई बनाऊंगा कुछ प्लास अब ऐड करूंगा ठीक है त�
6:27
मैं यहां पर ट्रासेस आड करूंगा मान लो मैं पीएक्स टू पी वाइ फोर ठीक है कुछ इस तरह से आड करता हूं मै�
6:34
लेव करूंगा यह देखो लैंडिंग टॉट स्टीज है तो हमारा सर्वर रिलोड हो गया ठीक है तो मैं एक चीज करत�
6:40
हूं मैं एंटीएम रेस्ट टाइप करके स्लाइट लैंडिंग टॉट एसटीएमल पर आना चाहता हूं विशेष लिए तो मै�
6:46
लैंडिंग टॉट एचटीएमल पर आऊंगा और यहाँ पर देखो कुछ हमने लिखा नहीं है ठीक है अभी तक तो यहाँ प�
6:52
contact us phone gallery
7:06
ठीक है phone gallery नहीं लिखेंगे यार लिखेंगे catalog ठीक है phone catalog और फिर contact us
7:17
ठीक है और यह करने के बाद मैं क्या करूँगा save करूँग�
7:21
और यहाँ पर देखूँगा कि क्या हुआ अभी तक कुछ भी नहीं हुआ यार यह तो बड़ा अजीब सा system यहाँ पर हमको देखने को मिल रहा है ठीक है अब यहाँ पर एक चीज और जो आपको बताना चाहता हूँ मैं वो यह है कि मैंने CDN जो है वो add नहीं कर रही है tailwind की अ�
7:51
कि इसके सारे items को अब यहाँ पर tailment में class होती ह�
7:55
जो कि मैं use कर सकता हूँ और वो है space x3
7:59
तो मैं अगर space x3 को use करूँगा तो होगा क्या कि सारे के सार�
8:03
child elements में space लग जाएगी ठीक है अब अगर मैं चाहता हूँ कि जो मेरा nav bar ह�
8:07
इसका जो background हो वो purple हो ठीक है तो अगर मैं को जिस तरह से purple लिखूंगा कभी कभी suggestion ना है तो आप लो�
8:14
control space bar दबा सकते हो तो यार पता नहीं क्यों मेरा screencast mode क्यों turn off हो गय�
8:19
screencast mode को मैं on करूँगा तो मैं basically space control space bar दबा रहा हूँ और ये space bar
8:25
दबाने के बाद यहाँ पर देखो सारे suggestions मुझे मिल रहे हैं तो मैं थोड़ा सा dark purple रखूँगा और dark purple रखने पर यह देखो मुझे इसक�
8:31
text को white करना पड़ेगा ठीक है तो text white मैंने कर दिया और यहाँ पर देखो यह अभी बढ़िया दिख रहा है ठीक ह�
8:36
अब मैं अगर इसको चाहता हूँ कि ये एकदम extreme right पर पहुँच जा�
8:40
तो मैं यापर simply justify end कर दूँगा और सारे के सारे ये यापर at the end चले जाएंग�
8:45
अब मैं चाहता हूँ कि थोड़ी बहुत space भी छोड़े चुकी मैं नहीं चाहता कि एकदम एकदम end में चिपक जाए जाकर ठीक ह�
8:51
तो मैं क्या कर सकता हूँ ऐसा करने के लिए जो x की margin है sorry padding है उसको लोड़ा बढ़ा सकता हू�
8:57
तो मैं यहाँ पर px देखूँगा कि px 20 है हाँ है 28 है हा�
9:01
28 रखता हूँ ठीक है तोड़ी ज्यादा 28 बट ठीक है यहाँ पर चलेगा मुझे ठीक है तो यहाँ प�
9:06
अगर मैं कोई जिस तरह का landing page बनाना चाहता हूँ तो मैंने कुछ ऐसा कर दिया मैं और भी यहाँ पर बढ़ा सकता हूँ space क�
9:11
जैसे कि यहाँ पर अगर मैंने space x3 दी हुई है तो मैं space को और भी बढ़ा सकता हू�
9:17
जैसे मैं अगर space x11 दे दूं तो यह बहुत जादा space हो जाएगी बट अगर मैं अगर जिस तरह की चीज़ mimic करना जाता हू�
9:22
तो मैं कर सकता हूँ ठीक है अब मैं एक चीज और कर सकता हूँ कि लोगो लगा सकता हूँ और लोगो को मैं लगा सकता हूँ अट द स्टार्ट ठीक है मान लो मैं यहाँ पर एक इमेज लगाना चाहता हूँ और वो इमेज अभी मेरे पास है नहीं मान लो मैं यहाँ पर अन स्�
9:52
यहां पर देखो रैन्डम यूजर की एपिआई यहां पर आप लोग यूज कर सकते हैं मैं देखता हूं कि क्या यहां पर मुझ�
9:59
कुछ मिलता है अब कॉड इट और मुझे यहां पर बिसीटी इमेज का यूअरल चाहिए और इस ज्यादा कुछ नहीं चाहिए ठीक ह�
10:05
तो मैं देख रहा हूँ यहाँ पर शायद मुझे कुछ मिले और यहाँ पर मुझे एक image मिल गई है शायद हां मिल गई है ठीक ह�
10:13
इस एमेज को यूज करूंगा और यहां पर डाल दूंगा यह ठीक है और यह डालने के बाद आप लोग देखो कि मेरा ज�
10:20
डॉक्यूमेंट वह कुछ इस तरह से दिख रहे ठीक है डेफिनेटली अच्छा नहीं दिख रहा है बहुत ज्यादा क्योंकि य�
10:24
बहुत ज्यादा बड़ा हो गया है तो मैं क्या करूंगा कि इसमें क्लास है दरूंगा और क्लास में एड अड�
10:30
करूंगा डब्ली फॉर्टी के मार्टिवेज की विड्स को फॉर कर दूंगा पता है बहुत अच्छा नहीं दिख रहा है इकदम ऊप�
10:35
पग गया विट फोर करने से और मुझे इसको क्या करना पड़ेगा नीचे लाना पड़ेगा ठीक है तो इसको नीचे लान�
10:40
के लिए मैं इस नाव को एक फ्लैक्स बना दूंगा फ्लैक्स बनाने के बाद मैं जस्टिफाई स्पेस बिट्वीन कर दूंग�
10:47
जस्टिफाई बिट्वीन कर दूंगा तो यहां वह जस्टिफाई रंड स्पेस बिट्वीन आ जाएगा तो ऐसा करने से आप देख�
10:52
कि यह कुछ इस तरह से हो गया ठीक है एंड एविडिटली इसके विट खराब हुई है मुझे मालूम है तो मैं क्या करूंग�
10:58
इसकी विड्ड को आटोमाटिक करूंगा तो मैं इसको यहां पर अभी हटा देता हूं यह विड्ड वाली ग्लासेस मे�
11:04
और इसकी हाइट को चेंज करूंगा तो मैं इसकी हाइट को फोर करूंगा ठीक है और विड्ड ऑटोमाटिक हो जाएगी फिर हाइट को फोर करえ�
11:11
थोड़ा बढ़ाता हूं हाइट को और यहां पर देखो हाइट को टेन करूंगा तो यह कुछ इस तरह से दिखा रहा है मुझे ठीक ह�
11:17
एक्स वाइ में पैडिंग दे दूंगा पी वाइ फाइव करके देखता हूं और मैं यहां पर पी वाइ टू कर दूंगा क्योंकि मैंने कुछ ज्यादा ही पैडिंग दे दी थी तो मैं पी वाइ टू पी वाइ फोर ऐसे धीरी धीरी करके पैडिंग बढ़ाऊंगा जब तक म�
11:47
ट्री टीक है अब मैं इसको राउंडेट करना चाहता हूं इसे मेच को तो मैं से मेच को राउंडेट करने के लि�
11:51
अर्ड राउंडेट टू एक्स एल एक क्लास होती है वह यूज करूंगा राउंडेट ट्री एक्स एल नहीं राउंडेट टू एक्�
11:58
एक्सेल ठीक है और अंड टू एक्सेल करने के बाद यह कुछ ऐसे दिख रही है ती एक्सेल ट्राइड करते हैं त�
12:03
एक्सेल से पूरे सर्कुलर हो जाइए और ती एक्सेल से थोड़ी सी है डिस्टॉर्टेड हो गई है तो मैं एक काम करत�
12:10
तो मैं इसकी height को 12, pt 3, px 3, round rate 2, excel कर देता हूँ अभी के लिए, ठीक है, और यह कुछ भी इस तरह से दिखाई पढ़ रहा है, अब मैं एक काम और करूँगा, यहाँ पर जल्दी से cursor pointer लगाऊँगा, सारे li's में, सारे li's में मैं क्या लगाऊँगा, class is equal to cursor pointer, cursor pointer, ठीक है, ऐस�
12:40
डिव डॉट मेन लिखूंगा और इसकी हाइट जो है सबसे पहले इसका एक बैकग्राउंड दूंगा और बहुत ही लाइट स�
12:46
बैकग्राउंड दूंगा यह वाला बैकग्राउंड दूंगा ठीक है और देखो यह वाला बैकग्राउंड देने पर यह कुछ इ�
12:51
इन पर इसके अंदर मैं क्या कर सकता हूं एक लास्ट कर सकता हूं ठीक है और मैं लिख सकता हूं दी बेस्�
13:19
फोन इन दी टाउन ठीक है और यहां पर देखो जब मैं ऐसा करूंगा तो यहां पर दिवेस फोन से इन टाउन आ गय�
13:27
काफी बड़े-बड़े अक्षरों में अमानों मैं चाहता हूं कि इस डिव की हाइट को मैं थोड़ा से ज्यादा कर दो ठीक ह�
13:32
H44 H44 11 height apply 44 height control space control space 80 padding space
14:07
अब मैं यहाँ पर लिख सकता हूँ the best phone in the town phones in the town और मैं यहाँ पर क्या करूँग�
14:12
इसके अंदर का जो यह जो best phones in the town है इसमें padding left दूँगा ठीक ह�
14:17
और padding left कितनी दूँगा थोड़ी बाद दूँगा नौकी देता हूँ ठीक ह�
14:21
तो trial and error से मैं इसको बहुत बढ़िया बना सकता हूँ ठीक है तो यहाँ पर देखो text 3 excel है औ�
14:26
मालू मैं यहाँ पर text 9 excel कर दू या 8 excel कर द�
14:31
तो यह इतना बड़ा हो जाएगा तो मैं इतना बड़ा तक कर सकता हूँ इसको ठीक है तो मैं यहाँ पर text 6 excel
14:36
try करता हूँ 6xl xl alt नहीं x xl ठीक है और यहाँ पर देख�
14:43
text 6xl the best phones in the town और इसके बाद मैं एक और div लगाऊँगा यहाँ प�
14:48
और मैं लिखूँगा lorem 23 यानि कि कुछ phones के बारे में लिख दो क�
14:53
हम ऐसे सब phones देते हैं वगेरा वगेरा ठीक है तो मैं एक काम और करूँगा यहाँ पर क्योंकि मैंने मैं जल्दी से command buses करके टॉप ड्राप कर लेता हूं थोड़ा से जो मिनट भी कर लेता है तो यह लोग दिखाई पड़े मैं कर गया रहा हूं यहाँ पर ठीक है फॉरमेट डॉक्यूमेंट करने से थोड़ी सी ख�
15:25
देखूंगा क्लास इस इक्वल टू पी वाइ थ्री ताकि यह थोड़ी सी तूरिया मनालेश से और यहां पर क्या हुआ मै�
15:33
इसको सेव करूंगा उप्स मैंने गलत जगह पर ग्लास लगा दिया तो मुझे यहां पर लगानी थी क्लास मैं ट्रोजिन टैप मे�
15:39
लगा रहा हूं क्लास और यह यहां पर काफी गड़ बड़े कर दी मैंने बट अभी यहां पर समाल लिया सब कुछ बढ़िया दिख रह�
15:49
है विडियो तो यहां पर अभी भी एरर डॉक्यूमेंट में यह कैसा मजाक है यह कैसा मजाक है यहां पर डिप खुला यहा�
15:55
दूआ या पी खुला या पी बंद हुआ तो अभी तो कोई एरर नहीं रॉक्यूमेंट में बढ़िया ठीक है अब मैं क्या करूंग�
16:01
इसकी विड को भी रिस्ट्रिक्ट कर दूंगा इस पराग्राफ की विड को और इसकी विड को रिस्ट्रिक्ट करने से देखो य�
16:06
थोड़ी कम कुछ ज्यादा ही कम मैंने कर दी विड्थ इसकी तो मैं यहां पर क्या करूंगा कि इसकी विड्ड को व�
16:13
बाय थ्री कर दूंगा ठीक है इसकी विड्ड को अनवाइट रिकरने से इतनी विड्ड में आ जाएगा और यहां पर द बेस्�
16:17
फोन से न टाउन और यहां पर फोन के बारे में आप कुछ लिख सकते हो और इसके बाद आप दो बटन लगा सकते ह�
16:23
मान लो मैं आप पर डिव डॉट बटन लिखो वैसे डॉट बटन लिखने का कोई मतलब नहीं है आप aroma.com इस क्लास मे�
16:31
डालने वाला तो नहीं हूँ, बस मैंने dot buttons, div dot buttons इसलिए लिखा, ताकि मुझे बता चल जाए कि
16:36
दो buttons यहाँ पर आने वाले हैं, ठीक है, तो मैं लिखूंगा, button, dot, और मैं लिखूंगा
16:42
PG, इसका background दे रहता हूँ, purple, ठीक है, 800, और यहाँ पर save करूँगा, और मान लो
16:51
तो मैं यहाँ पर लिखता हूँ क्लिक मी सेव करता हूँ और यहाँ पर देखो क्लिक मी यह बटन आ गय�
16:56
और मालो एक और बटन मैं यहाँ पर लगाना चाहता हूँ ठीक है तो मैं एक काम करता हूँ अब बाय नाओ और मै�
17:04
के बाद करूंगा कॉन्टेक्ट अस ठीक है कॉन्टेक्ट अस ठीक है अब मैं क्या करूंगा यहां पर सबसे पहले पी एक्�
17:13
थ्री दूंगा फिर पी वाइट थ्री दूंगा या फिर पी वाइट में थोड़ी सी ज्यादा दूंगा उल्टा कर दिया मैंने एक्�
17:18
थोड़ी ज्यादा देनी थी वाइट थोड़ी कम देनी थी तो मैं इसको टू कर दूंगा ठीक है देट शुट पी फाइन और इसक�
17:26
बाद मैं क्या करूंगा इसमें राउंड टू एक्सएल कर दूंगा थोड़ा-बहुत राउंड हो जाएंगे बटन इसके बाद यहा�
17:32
टेक्स्ट को वाइट कर दूंगा ठीक है टेक्स्ट मेरा यहां पर वाइट हो लेकिन वह कितना आसान है बनाना फिर मैं चाहूंगा कि अगर मैं होवर करूं इस बटन पर तो जो टेक्स्ट है वो हो जाएं स्लेट नो सौ ठीक है और जो बीजी है होवर करने पर जो बीजी है �
18:02
इस सारी के सारी क्लासेस कॉपी करके कुछ यहां पर पेस करूंगा ठीक है और यह पर देखो बाय नाओ कंटेक्टर्स और कितना बढ़िया पेज बन गया यार अब एक चीज मुझे रिएलाइज हो रही है कि जो एच नाइन्टी सेक्स में दिया था ना इसको थोड़ा कम किय�
18:32
चुट्टेव है यह फ्लॉ हो रहा है गर्म इसकी हाइट हटाई दूंगा यहां से कुछ इस तरह से कर दो तब भी को�
18:37
टेंशन होने वाली नहीं है मुझे ठीक है तो मैं क्या करूंगा यह पैरिंग वायरसी दे रखी है मैंने और इ�
18:44
यादि अगर मैं 40 कर दूं तो थोड़ा ऊपर पहुंच जाएगा ठीक है यह थोड़ा सा ठीक लग रहा है अभी और मैं इसक�
18:49
एक्स एक्स में थोड़ी बहुत स्पेसेज देना चाहता हूं तो मैं क्या करूंगा मार्जिन आइट करूंगा दोनों बटन क�
18:54
x में mx4 कर दूँगा तो यह दूरी बना लेंगे एक दूसरे से शेयर मैं भी बड़ा जादा कर दिया ह�
18:59
mx2 ठीक था ठीक है अगर सिफ left में या सिफ right में आप देना चाते हो तो दे सकते ह�
19:04
और मैं यहाँ पर क्या करूँगा जो class is equal to buttons मैंने बनाये थे मैं यहाँ पर m by 4 दूँग�
19:09
मैं चाहता हूँ यह थोड़ा से दूरी बना कर रखे तो by now contact us कुछ इस तरह स�
19:13
आप लोग काम कर सकते हो यहाँ पर एक फोटो भी लगा सकते हो आप ठीक है तो मैं यहाँ पर man
19:18
talking on phone png यहाँ पर लिखूँगा और यहाँ पर किसी भाई की फोटो अगर मिल जाए जो भी बात कर रहा है फोन मे�
19:27
तो हम लोग उसको use कर सकते हैं ठीक है तो थोड़ी बहुत net पर छानमीन के बाद मैंने ये bg.png जो है पसंद करी ह�
19:36
और bg.png को मैं क्या करने वाला हूँ लगाने वाला हूँ इस div के right side प�
19:41
तो यहाँ पर देखो यह जो मेरा main div है इसके right side पर मैं लगाने वाला हू�
19:45
तो मैं एक div बनाओंगा और इसके अंदर मैं एक img डालूँग�
19:48
और img का जो src है वो मैं क्या करूँगा src के अंदर मैं bg.png डालूँगा b gee n g नहीं bg b g dot p n g ठीक है और यहाँ पर मैं देखत�
20:03
हूं क्या हुआ कुछ ज्यादा ही बड़े नहीं हो गए भाइया तो भाइया जी आप इतना बड़े मत होईए आप थोड़ा स�
20:09
छोड़े हो जाइए क्योंकि हमारे पेज में जगह थोड़ी सी कम है तो आप अपनी विड को थ्री बाइ फाइव कर लीजिए थ्री बा�
20:16
भी बहुत ज्यादा है भाईया तो भाईया थोड़ा सा और कम कर लीजिए आप अपनी विट को इतना रखे देखिए अरे आ�
20:25
तो ज्यादा ही छोटे हो गए भाईया कितनी विट अप्लाई कर दिया डेवल टू ने 0.5 रेम अप्लाई कर दिया ठीक ह�
20:30
इस सेटिंग्स को लिया कुछ ज्यादा मजाग हो गया कंट्रोल अ स्पेस बर देखने स्क्रीन में लिखा रहा होगा ठीक है व�
20:38
प्रेस कर रहा हूं तो इसलिए में स्क्रीन का इसमोड आड़ करता हूं तो यहां पर देखो एक काम मैं करूंगा यह जो मेर�
20:44
नहीं है इसके अंदर यह बैकरांड ऐड कर दूंगा और इसके अंदर बैकरांड ऐड करोगा थोड़ा सा अच्छा रहेगा और यहा�
21:07
अब अगर मैं इस div के अंदर भाईया जी को center करना चाहता हूँ vertically वो भी तो मैं कैसे कर सकता हू�
21:12
मैं भाईया जी का जो यहाँ पर div है इसकी जो class है इसमें एक flex डाल दूँग�
21:17
इसको एक flex box बना दूँगा content center के class होती ह�
21:21
जो की flex box के align content वाली property को center कर देती ह�
21:26
ठीक है तो वो use कर लूँगा मैं और यहाँ पर थोड़ी सी दिक्कत हो गई ह�
21:29
भाईया जी को content center करने पर क्योंकि जो width 12 ह�
21:33
यहाँ पर भाईया जी को apply करने में दिक्कत हो रही है ठीक है तो मैंने विड थवेल्व हटा दिये ठीक है तो मैं यहाँ पर सिंपली करूँगा क्या यह क्लास हटाक�
21:41
आइटम सेंटर लगा दूँगा ठीक है और यह आइटम सेंटर मैं लगाऊंगा यहाँ पर यार इस वाली पर नहीं मैं आइट�
21:49
यहां पर लगाऊंगी एक फ्लेक्स बॉक्स कोंटेंट सेंटर लड़ाऊंगा आइटम सेंटर लगाऊंगा ताकि सारे आइटम सेंटर पर �
21:55
और उसी के साथ साथ item center लगाने के साथ साथ इसकी इसकी विट भी मुझे थोड़ी छोटी करन�
22:02
पड़ेगी ठीक है तो मैं एक काम करता हूँ यहाँ पर मैं एक काम करता हूँ इसकी height को देता हू�
22:06
लेट एस से एच ट्वेल्ड ठीक है और छोटी हो गई थोड़ी सी तो मैं थोड़ी सी बड़ी करूंगा हिट इसकी ठीक है क्या करूंग�
22:14
इसकी 34 32 देखता हूं पता नहीं 32 भी बहुत छोटी लग रही है इसको ठीक है आईडेटी करके देखता हूं ठीक ह�
22:24
मैं trial and error कर रहा हूँ simply trial and error कर रहा हूँ कोई जाधा लंबी चोड़ा काम नहीं कर रहा हू�
22:28
और यहाँ पर देखो यह कुछ इस तरह से भाईया जी आ चुके हैं तो यह best phones in the town एक भाईया जी आ गए है�
22:34
और यहाँ पर buy now, contact us और यहाँ पर click करो तो आप navigate कर सकते ह�
22:54
स्पेस अराउंड वाली लास्ट यहां पर में टाइम में आट कर दूंगा स्पेस अराउंड कौन सी ग्लास होगी टेल में जस्टिफा�
23:02
अराउंड जस्टिफाई रॉन काफी इंट्यूटिव क्लास नेम्स यूज करता है टेल मेंедь जो कि मुझे बहुत बढ़िया बा�
23:07
चाहिए टेलमेंट के बारे में तो देखो यार इतना बढ़िया हमने बना दिया है यहां पर और यहां पर एक अच्छा स�
23:13
लोगों लगा देते तो शायद थोड़ा और बढ़िया हो जाता बट अभी के लिए रहने देते हैं इसको मैंने इस यूज कर लि�
23:18
ठीक है मान लो मैं क्या करूंगा कि यहाँ पर फोन्स मैनिया इसका नाम रखना चाहता हूं मान लो मैं तो मैं इस इमेज को अटाऊंगा और यहाँ पर मैं let us say एक span add करूँगा और span में मैं एक class दूँगा और मैं text excel दूँगा और मैं यहाँ पर लिख दूँगा फोन्स मैनि�
23:48
है तो मैं क्या कर सकता हूं डिस्प्लेड फ्लेक्स और अलाइन आइटम सेंटर ठीक है और उसी के साथ साथ मार्जि�
23:58
तो मैं काम करता हूं तो मैंצ्चर क्यों आट कर रहा हूं फ्लेक्स आइटम सेंटर ठीक है और mx3 एस सिंपल एस डाट औ�
24:08
विवरफोंस में नहीं आ गया थोड़ा बोल्ड कर देता हूं उसको इसको बोल्ड कैसे करूंगा मैं एक्स बोल्ड ठीक ह�
24:13
टेक्स्ट एक्स्ट्रा बोल्ड भी होता है टेक्स्ट बोल्ड भी होता है एक्स बोल्ड होता है कि फॉर्ट बोल्ड होता है इसलि�
24:19
फॉन बोल्ड येस फॉन बोल्ड फॉन एक्स्ट्रा बोल्ड ठीक है फॉन बोल्ड यहाँ पर देखो ये हमारा लैंडिंग पेज बन गया ह�
24:25
अब नीचे comment में मुझे बताओगी यार ये मज़ेदार चीज है की नहीं है tailwind CSS
24:29
क्या इसको इस तरह से यूज़ करने में मज़ा आएगा की नहीं आएग�
24:33
अब यहाँ पर देखो मैं इसको इस तरह से करके अलग अलग colors भी दे सकता थ�
24:37
मैं इसके background को white और इसके color को purple भी कर सकता था मुझे आपको करके दिखा देता हू�
24:41
मालो मैं जाता हूँ कि text white हो जाए hover करने पर जो text है वो purple हो जाए ठीक ह�
24:47
तो मैं slate 900 की जगा purple 900 करता हूँ purple 900 करता हू�
24:54
और जो background है उसको मैं white कर देता हूँ ठीक ह�
24:58
बैक्राउंड को वाइट कर देता हूं बीची वाइट ठीक है और अब देखो यहां पर मैं ऐसे कर रहा हूं तो यह ऐस�
25:07
आ रहा है देखो देख रहे हूं आप कैसे आ रहा है इस तरह से आ रहा है ठीक है और एक चीज और की जा सकती ह�
25:11
अब होवर करने पर होवर करने पर क्या करो बॉडर एड करते हैं ठीक है बॉडर ऐड कर दो वर्ड करने वर्�
25:20
प्लास ऐड करने पर और यहां पर बॉडर दिखा नहीं तो मुझे यहां पर लगता है बॉडर टू बॉडर फूल ऐसे करन�
25:28
और यहां पर अब बॉडर विट टू पिक्सल और यहां पर इसको ऐड करूंगा तो बॉडर विट टू पिक्सल यहां पर ऐड होगी ह�
25:37
तो यह ऐड क्यों नहीं हुई इसको देखना पड़ेगा बॉडर विट टू पिक्सल और यह इसलिए नहीं होगी कि मैंने यहां पर ऐड किया है तो मैं काम करूँगा होवर पर बॉडर टू करूँगा और होवर पर बॉडर ब्लाक भी करूँगा ठीक है ताकि ब्लाक लगा�
26:07
पर बना दी बैठे-बैठे चेयर पर ठीक है तो यहां पर बॉडर परपल नौ सौ बना पड़ेगा और यहां पर नौ स�
26:16
है और यहां पर अब देखो यार इतना बढ़िया लग रहा है इतना बढ़िया लग रहा है यह आपको पर नौ सौ किया थ�
26:21
नहीं चल क्यों नहीं रहा है इसको देखना पड़ेगा यार हो वर्डर परपल परपल नॉस और बॉडर टू व के अब मैंन�
26:29
बॉडर टू नहीं लगाया है बॉडर टू ठीक है वह सेव करूंगा इसको और देखो यार कितना बढ़िया लग रहा ह�
26:38
लग रहा है इस तरह से मैं ऑफ कर सकता हूं इस पर भी और करके इसके लाख चेंज कर सकता हूं पॉसिबिलिटीज आ�
26:46
एंडलेस मज़ेदार वेबसाइट बन चुकी है कुल मिला के बाद अभी यह ठीक है और इसके बाद आप यहां पर जो मेर�
26:52
main है यह जो मैंने div class is equal to main बनाया है फिर यह main tag जो बनाया है मैंन�
26:56
इसके बाद आप एक horizontal line लेकर और अपना content नीचे बना सकते हो ठीक है त�
27:01
possibilities are endless एक basic सा landing page जो है वो मैंने यहाँ पर बना दिया है I hope क�
27:06
आप लोगों को पसंद आएगी लैंडिंग पेज अब टेलविंट सीएसस को हम लोग अच्छी तरह से समझेंगे स्टार्टिंग टू द वेरी एंड हम लोग समझेंगे कि चीज समझेंगे मार्� stirring फ्लेक्स बॉक्स सब कुछ को हम लोग बहुत ही नजीकी के साथ देखेंग�
27:36
लेना अभी के लिए इस वीडियो में इतना है guys thank you so much guys for watching this video
27:40
and I will see you next time
#Web Design & Development