- 3 months ago
🎯 Today’s Learning Outcomes
By the end of today’s class, students will be able to:
✅ Understand how to set up the frontend project using React + Vite
✅ Integrate and configure Tailwind CSS properly
✅ Create the initial UI layout and folder structure
✅ Understand component-based design and project planning
✅ Build and test the first responsive UI section
By the end of today’s class, students will be able to:
✅ Understand how to set up the frontend project using React + Vite
✅ Integrate and configure Tailwind CSS properly
✅ Create the initial UI layout and folder structure
✅ Understand component-based design and project planning
✅ Build and test the first responsive UI section
Category
📚
LearningTranscript
00:00:00हेलो गाइज गुड इवनिंग एवरीवन गुड इवनिंग शैगल प्रिरीथ तानिया वायाकर अर्जून राजेंद्र
00:00:17के खो गिर Kara के अपने अपने अधर स्ट्रेंड्स जीतने भी अपने क्लास जोइंड इनकरेगा,,,,,,,,
00:00:24एक बार सब रइसपोंस कर सलोकी मीडी वाइस है और,, आपको स्क्रिीण भी विजीबलहने सीच का रएस्पॉंस भी कर देना ठीक है ?,,,
00:00:31तो एक बार सब रेसपोंस कर दो कि यह जर वाइस क्लियर है और स्क्रीन भी वीजीबल है एच्छे से परफेक्त ली सबकुछ परफेक्ट है
00:00:39तो देखो अपन जो discussion कर रहे थे वो अपन कर रहे थे अपने project क्यों पर और project में अपन यहाँ पर अपने अपना front end और back end का सिर्फ setup किया था
00:00:55उसको अपन complete 100% setup नहीं कह रहे हैं अभी क्योंकि अपने पुरा complete नहीं किया उसको ठीक है
00:01:01अब देखो अब अपन यहाँ पर सबसे पहले अपना front end का UI बनाएंगे क्योंकि उसी से अपने को clear होगा कि अपने को क्या काम करना है अपनी website के उपर
00:01:12तो सबसे पहले अपन यहाँ पर अपने frontend का UI बनाएंगे और उसके अंदर अपन यहाँ पर अपना जो react है उसी के उपर अपना आदे और react के साथ अपन टैल्विन CSS भी अपनी यूज करने वाले तो अपन टैल्विन CSS का setup भी करेंगे
00:01:29अरजुन करेंगी मैंने setup कर लिया है तो चलो बहुत अच्छी बात है बागी अपन इसका setup भी करेंगे अपने टैल्विन का भी चीक है तो चलो अपन अपनी class start करते हैं अपन आ जाते हैं अपने VS code के उपर और VS code पर आके अपन यहाँ पर open कर लेते हैं अपने उसी folder को जिस प
00:01:59मैं यहां पर आजता हुँ अपने front end के उपर और अपने C टी करके किसमें अपने front end के अंदर तो मैं यहां पर CD करके
00:02:06अपना जो front end है उसके उपर अपन आजाते है चीक, अब यहाँ पर
00:02:10मैं इसको run कर लेता हूँ, वोई अपन वीट के थुरो अपने develop कराता
00:02:13तो npm run और देख करके अपन यहाँ पर इसको run कर लेते हैं
00:02:18चीक, complete है इसको मैं इहाँ पर run कर लेता हूँ अपने front end को
00:02:21यह अपना front end यहाँ पर run हो चुका है
00:02:24अब देखो यहाँ पर जो अपन यूज़ करने वाले है
00:02:27वो अपन यूज़ करेंगे यहाँ पर अपनी tellwinds GSS
00:02:29क्योंकि अपन सबसे पहले अपना UI बनाने वाले है
00:02:32और UI के अंदर क्या-क्या चीज़े रहेगी अपनी
00:02:35जैसे nav bar हो गई आपकी उसके अलावा अगर अपन UI की बात करते हैं
00:02:39तो अपने पास अपना hero वाला section हो गया
00:02:41अपने पास अपने products हो गए जो अपन दिखाने वाले है
00:02:44उसके अलावा अपने पास categories वाला section आगया
00:02:47search bar अपने पास यहाँ पर आगई
00:02:48अपना फूटर वाला section आ गया contact us वाला section आ थीक है
00:02:53ऐसे ही अगर अपने को यहाँ पर about वाला लगाना है query वाला लगाना
00:02:59तो यह सारे section आने वाले हैं तो सबसे पहले पने यहाँ पर अपने
00:03:03tellwind CSS का setup अपन यहाँ पर कर लेते हैं मैं आ जाता हूं अपने tellwind CSS के
00:03:08यहां पर एक वर्ज़न नीचे ही चल रहे तो पर नीचे चल लेते हैं 3.4.1 और मैं यहां पर इसको
00:03:17स्टार्ट करता हूं अपने को यहां पर अपने फ्रेमवर्क काइट्स पर जाना है क्योंकि वीट के थूरू यहां पर
00:03:23का result इसलोब करने वाले सबसे सबसे गी है कि आपको करना है कि आपको की आपको पर किया करना ये comment आपको अपने टर्मेंड के अंदर लिखनी
00:03:29तो मैं यहां पर आप
00:03:36सयथिए
00:03:49स्टीक हुं
00:03:51तो वही अपने पास telwin.config.js फाइल अपनी जनरेट हो चुकी है
00:03:55अब उसके बाद अपने को next आगे क्या करना है
00:03:58next आगे अपनी process देख लो
00:04:00आपको यहाँ पर यह telwin.config.js में इसको paste करना है
00:04:04तो आजा अपने telwin.config.js वाली फाइल के अंदर
00:04:07और यहाँ पर आके मैं उसको कर देता हूँ अपने paste
00:04:10चीक है तो यहाँ पर अपने उसको paste कर दिया
00:04:13perfect उसके बाद next आपको यहाँ पर क्या करना है
00:04:16next आपको यहाँ पर index.css वाली फाइल के अंदर
00:04:19इसको paste करना है तो अपनी index.css के अंदर आ जाओ
00:04:22index.css src को open कर लो
00:04:25यह रही आपके index.css और इसके अंदर उसको paste कर दो
00:04:28उसके लाबाए app.css को भी अपने blank कर लो
00:04:31क्योंकि इसका कोई काम नहीं है
00:04:33app.gsx को भी मैं यहाँ से हटाता हूँ
00:04:35और इसको यहाँ पर वापस से create कर देता हूँ
00:04:37और उसके अंदर अपन यहाँ पर h1 tag ले लेते है
00:04:41जिसको मैं यहाँ पर कह देता हूँ project class करके
00:04:44तो यह आपको यहाँ पर दिखने वाला है project class
00:04:47अगर आप यहाँ पर इसको refresh करते हो तो
00:04:49अच्छा भी यह run नहीं है कोई बात नहीं
00:04:52run नहीं कर रहा है अपने उसको
00:04:53उसके बाद आपको npm run देव करके
00:04:56इसको run करना है तो मैं यहाँ पर इसको run कर लेता हूँ
00:04:58npm run और देव
00:05:01ठीक है npm run देव
00:05:04तो यहाँ पर अपन इसको run कर लिया
00:05:06और यहाँ पर इसको run कर लो
00:05:08ठीक है project class आ रहा है
00:05:10अपने पास अपनी tellwind apply हुई या नहीं हुई
00:05:12वो check करने के लिए
00:05:13एक कोई भी class यहाँ पर आप लगा दो
00:05:15आप बलूगे text और मैंने आपर बोला
00:05:18अपना center
00:05:20ठीक है
00:05:21text center मैंने यहाँ पर दिया और वो अपना text center में आ गया
00:05:25एक बार के लिए मैं अपने
00:05:26VS code को वापस से run कर लेता हूँ
00:05:28ताकि मेरे पास यहाँ पर
00:05:29suggestion भी आती रहे अपने extension के दुरूप
00:05:32तो यहाँ पर अपने इसको एक बार run कर लेते हैं
00:05:35ठीक है
00:05:35perfect कोई शुनी है
00:05:37अब मैं यहाँ पर इसको run कर लेता हूँ
00:05:39CD करके अपना जाते है किसके अंदर अपने
00:05:41CD करके अपना जाते है
00:05:44आपने यहाँ पर
00:05:46front end
00:05:47shopping की ऊपर फिर उसके बाद मैं
00:05:49यहाँ पर इसको run कर लेता हूँ
00:05:51NPM run और देवकर करके अपने यहाँ पर
00:05:53इसको run कर लेते हैं
00:05:55तो यह अपना run हो चुका है
00:05:57इसको मैं यहाँ पर run लेता हूँ
00:05:59यह अपना यहाँ पर completely
00:06:01perfectly अपना default का
00:06:02setup हो चुका है अब देखो यहाँ पर अपन और भी चीज़े install करने वाले है जैसे
00:06:08navbar होती है तो navbar अपना यहाँ पर common section होता है जो हर
00:06:11components में अपने को दिखाई देना चाहिए क्योंकि navbar top पे आनी चाहिए
00:06:14उसके लिए अपने को वही react router dom का setup करना रएथा है तो एक बार के
00:06:18लिए मैं यहाँ पर react router dom थी install कर लेता हूँ mentality
00:06:20install और अपन यह नहीं पर क्या आप exemplernet कर लेते हैं तो यह अपना
00:06:28बृपर क्या कर लेते हैं तो यह अपना react router dom भी यहाँ पर क्या हो
00:06:34इंस्टाल हो गया ठीक है फिर से इसको रन कर लो NPM रन देव करके और यहां पर अपने react router dom का setup कर दो
00:06:42बढ़ाई इजी सा setup है आप import करोगे किसको import करने वाले हो वो open कर लेंगे कहां से import करने वाले हो पहले वो बता दो
00:06:49react router dom में से आने वाला है और क्या क्या चीज़े अपन यहां पर import करेंगे एक तो मैं यहां पर बुलाओंगा अपने browser router को एक अपन यहां पर बुलाने वाले अपने routes को और एक अपन यहां पर बुलाने वाले अपने routes को चीक है तीन चीज़े मैं यहां पर बुला ली और यहां
00:07:19किरिए यहां पर पात देते हैं और दूसरा पन यहां पर अपना एलिमेंट देते है
00:07:27आपन यहां पर अपना element देते हैं और element में आपका component होता है ठीक है component अपन यहां पर एक homepage अपना component बना लेते हैं
00:07:37ठीक है तो मैं src के अंदर एक folder बना रहा हूं folder अपन यहां पर pages करके अपन एक folder बना लेते हैं
00:07:43इस pages के अंदर ही मैं यहाँ पर एक file बना लेता हूँ
00:07:47मतलब एक component बना लेता हूँ
00:07:48जिसको मैं यहाँ पर homepage.gsx कह रहा हूँ
00:07:52और यहाँ पर अपन इसको create कर लेते है
00:07:54rfc करके ठीक है
00:07:56और इसमें अपन अपना h1 tag भी लगा देते है
00:07:58जिसमें यहाँ पर बना homepage है
00:08:02homepage अपने यहाँ पर कह दिया इसको
00:08:05उसके अलावा app.gsx में आ जाओ
00:08:08और उस homepage को यहाँ पर लगा भी दो
00:08:10तो मैं यहाँ पर अपने homepage को लगा देता हूँ
00:08:13जो मेरे पास homepage वाला component है
00:08:15उस component को यहाँ पर लगा दो
00:08:17और इसका URL क्या रहेगा
00:08:18slash home ही रहेगा
00:08:20चेक करें perfect है या नहीं है
00:08:23तो अब यहाँ पर आगे अगर चेक करोगे
00:08:25तो आपको homepage यहाँ पर दिखाई दे रहा है
00:08:27यह तो अपने सिर्फ कुछ नहीं किया
00:08:30अपने react router dom का installation किया
00:08:32और अपने उसको set किया
00:08:34यहाँ तक की चीच किलियर है
00:08:35एक बार मैं चेक भी कर लेता हूँ
00:08:37voice voice सब किलियर है
00:08:38यहाँ तक की चीच किलियर है
00:08:41तो एक बार comment करके बताओ
00:08:42कि एसर यहाँ तक की चीच किलियर है
00:08:44आगे बढ़ सकते हैं पन
00:09:04ठीक है चलो अब देखो अपने को क्या करना है अपन जल्दी-जल्दी से अपना
00:09:22यूआई बनाते और अपनी टैल्विंट css की क्लासेज भी अपन लिखते और यूआई को अपन क्रियेट करते अपना मैं यहां पर आ जाता हूं और
00:09:30पेजेस अपने यहां पर बनाया इसी के अंदर src के अंदर मैं यहां पर एक फोल्डर बना लिता हूं जिसमें अपने अपने
00:09:36components रखने वाले हैं ठीक है components करके मैंने यहां पर एक फोल्डर बना लिया और इस components वाले
00:09:43फोल्डर में ही मैंने यहाँ पर एक component मनाया जिसको मैं यहाँ पर करा हूँ नयुबार.jsx
00:09:47तो सबसे पहले हैं अपनी नयुबार यहाँ पर अपनी create करते हैं
00:09:51मैं यहाँ पर इसको लिख लेता हूँ RFC करके create कर लेते हैं
00:09:54और बागी एक बार files को एक बार close कर दो जो काम नहीं आ रही
00:09:57उनको मैं एक बार close कर देता हूँ
00:10:00यह कोई काम की नहीं है, tell windows config कोई काम की नहीं है
00:10:03app.jsx काम पी यह, homepage नहीं है, यह भी नहीं है, बस इतना सा है
00:10:07ए और इस नयुबार को मैं यहाँ पर लगा वी देता हूँ
00:10:24लगानी है तो यहां पर अपनी classes लगा देते हैं यह जो जो में धीव है पहले स्कूपर मैं
00:10:29यहां पर एक class लगाता हूं सबसे पहले मैं एक बैग्राउंड करेप्त कर देते हैं स्कूपर मैं कहों बीजी और भीजी में आपको यहां पर क्या करना है अ
00:10:36जो gradient है वो आप यहाँ पर लगाओ बीजी में आप gradient करो और gradient पर 2
00:10:42right कर देते हैं चीक है टू राइट मैंने यहाँ पर बोला
00:10:45from और यहाँ पर अपन कहा देते हैं from और मैं यहाँ पर कहता हूं कि आपको यहाँ पर कौन सा
00:10:52कि इसाइब करना है ग्रीन कलर नहीं तो ग्रीन नहीं पर लेके चलते हैं मैं इसके इसके बाद यहाँ पर यहाँ पर लेके चलते हैं वाइट
00:11:08view white
00:11:13ठीक है और
00:11:14उसके बाद To
00:11:16जो है from से जो To जाएगा उसमें
00:11:18यहाँ पर यह white जाना चीछ यह
00:11:19इनिया यहाँ पर दिया है ठीक है
00:11:22फिर उसके बाद मैं यहाँ पर कह रहा हूँ
00:11:24कि आपको यहाँ पर क्या करना है
00:11:25shadow create करना है और shadow यहाँ पर
00:11:27medium device के एसाप से create कर देना
00:11:29md, md का मतलब यहाँ पर देखो इसमें पूरी देर की
00:11:31box shadow यहाँ पर बनने वाली है इसके उपर
00:11:33तो मैंने यहाँ पर बोल दिया shadow md
00:11:35आप इस पर create कर देना
00:11:37ठीक है, नव बार है तो अपन इसको fixed भी कर देता है
00:11:39मैं बोलता हूँ fix कर देना और
00:11:41top से आप इसको कितनी रख लेना, zero रख लेना
00:11:43यह position अपने लगा दी
00:11:45और left से भी आप इसको zero रख देना
00:11:47चीक है, उसके अलावा right से भी आप इसको
00:11:49zero assign कर देना, और
00:11:51यहाँ पर मैंने एक और चीज लगाई
00:11:53जिसको मैं यहाँ पर कर रहा हूँ, zap fifty
00:11:55zap fifty यहाँ पर कहा है, अपनी zap index है
00:11:57चीक है, zap index मैंने Keanu
00:11:5950 pass करी है, की इसके अदर
00:12:02अपनी zap index 50 रहनी चीए
00:12:03फिर उसके बाद, यह जो div है
00:12:05इसके अंदर में eco div ले रहा हूँ, जिसके अंदर
00:12:07अपन अपन लोगों यहाँ पर
00:12:09रसाइन करने वाले हैं मतलब एक तो लोगों लगएगा इसके अंदर इन
00:12:17पनदर लगा देंगे अपना लोगो पिर उसके बाद एक colors में नहीं नहीं बना यहाँ
00:12:33नहीं बना यहां पर कुछ भी नहीं देगने वाला को सब्सक्राइब नहीं पर यहां पर 7-00 करना उसके अलावा
00:12:479-10 महारजिन में हाँ पर लगा तब ना उट लगा देना एक बार के लिए इमक्स न हो पैडिंग लगा थे पन एक्स डाइरेक्शन में 4 की और
00:12:57जब small device से उपर आए तब मैं यहाँ पर padding कह देता हूं कि आप small device से उपर आए तब padding आप यहाँ पर क्या कर देना, 6 की कर देना, चीक है, उसके अलावा जब large device से उपर आए तब padding आपको यहाँ पर क्या करनी है, तब अपन कह देते हैं, जो padding है वो आप 8 कर देना, चीक है, 8 क
00:13:27नेव टैग ले लेता है क्योंकि डिवी डिव हो जाएंगे तो आपको लगएगी डिवी डिवी डिव ले लिए अपने मैं इसको नेव करते था हूँ ठीक है तो यहाँ पर पहला नेव अपने टैग लिया उसके अंदर अपने यह सिर्फ ग्रेडियन लगा है जिसके तूर अ
00:13:57इस डिव के अंदर ही मैं यहाँ पर क्या लगाँगा अपना लोगो लगाने वाला हूँ ठीक है मैं लोगो लिख देता हूँ ताकि आपको किलिए रहे और इस डिव के उपर अपन क्लास नीम लगाते है और क्लास नीम लगाके मैं यहाँ पर लिख देता हूँ अपना फ्ल
00:14:27कर दी हाइट जैसे मैं आपर इसको एक बार के लिए 17 असाइन करके देख लेता हूं चीक है 17 अपने आपर हाइट असाइन करिए अभी एक बिनिट अपने क्या क्या चीजे पास कर दी
00:14:36ठीक है कुछ मिस कर रहे हैं कि अपने इसके अंदर जैसे अपने बीजी लगा दिया विड़ तप अपने सैट कर दी हाइट अपने 17 यह देता है क्या 17 देता ही नहीं है अपन 17 लगा क्यों रहे हैं देखो मैंने 17 जैसे अट आई तो आपको यहाँ पर एक नव बार दिखाई �
00:15:06थोड़ा सा ब्लर एफेक्ट दिखे तो यहां पर यह एक नव बार बनने वाली है अभी बनी नहीं कंप्लीट अपन बनाते है इसको ठीक है तो यहां अब अपने यह चीज बास करी हाइट पास करते ही अपने को यह शो हो गया अब इसके अंदर अपन क्या लेने वाले पहल
00:15:36गहां हुआ है अपने को इस दौक ही बड़ति वजल्देश बना सता हूँआ कि ऑटल्ड अपने कर लायको बनाते है तो
00:15:58बहुत ही बड़ा लोगो आ रहा है एक काम करो इसके उपर क्लास लगा दो
00:16:05मैं यहाप लगाता हूं क्लास नेम और इसको मैं कहते हूं हाइट आप इसकी सैट कर देना जैसे 24 मैंने इस लोगों की हाइट सैट करी 24 24 तो सैट कर दी लेकिन एक काम करो यह जो लोगो अपन लेके आ रहे ना इसको अपन कहते हैं
00:16:21पी अजी ठीक है कोई पी अजी में लोगों हो तो वह अपने को मिल जाए तो बहुत अच्छी बात रहेगी कोपी मेज़ ड्रेस
00:16:32मेभी कॉपी मेज़ ड्रेस से सही नहीं आएगा वो लोगों एक बार अपन चेक कर लेते हैं इसको लगा के ठीक है मैं यहां आता हूं और यहां पर अपन इसको पेस्ट कर लेते हैं
00:16:42डाउनलोड ही कर ले क्यों ना
00:16:49जैसे यह लोगों है
00:16:53यह लोगों है यह पी एंजी ही है अपने पास इसको डाउनलोड कर लगते हैं अपने एक बार के लिए
00:17:15पास के लिए
00:17:39जेपी जी में हुआ है कि डाउनलोड है अपने पी एंजी चीए था
00:17:44कोई बात नहीं एक काम करो यहां पर आता हूं और अपन चलाते हैं अपना कैनवा
00:17:54और मैं यहां पर बोलता हूं लोगों शॉपिंग
00:18:01वेबसाइट ठीक है जैसे यह शॉप और बैग मार्केट पहले इस बहुत सारे यहां पर दे रखे कोई सा भी एक लोगो उटालो अपने तो यह ले ले लेता हूं जैसे मैं ठीक है इसको अपन कस्टमाइज इस टेंपलेट कर लेते एक बार के लिए
00:18:18इस पर इस हीलोगों को उपन योज कर लेते हैं शॉप बैग करके जो यह आ रहा है अपने पास इसी को यूज कर लेते हैं आप यी आपको जो असे स्फॉाला फोलडर उता हुछ में आपको प्रोवाig हो jाए यह जो ए तो वहां से आप मेद लेना अपनको डाउनलोड कर ल
00:18:48झाल झाल
00:19:18तरीके से क्यों देता है फाइल्स को एक्स्रेक्ट कर लेते हैं इनको या तो
00:19:21तो यह वाला आ रहा है अपने पास लोगो
00:19:40अपने को जो वाइट में आ रहा है वो चीए या फिर यह वाला चीए एक बार अपन जो
00:19:48बना रहे है उसको देखते हैं क्या बनाया अपने यह जो बनाया है इसमें वाइट नहीं इसमें ब्लैक चलेगा ना तो अपने एक काम करते हैं इसमें ब्लैक वाला ले ले लेते हैं यह जो ब्लैक अपने को दे रहा है इसको कॉपी कर लो और इसको यहां पर आके पीस्ट कर �
00:20:18इतना सा काम कर लो और फिर अपने इसको कर देते हैं एक बार के लिए जो भी जितने भी चीजे खोल रखें उसको एक बार क्लोज कर दो
00:20:23परफेक्ट यह असिस्ट वाले फोल्डर में अपना लोगो आ चुका है अब अपन यहाँ पर उसको इंपोर्ट कर लेते हैं मैं यहाँ पर अपने लोगो को इंपोर्ट कर लेता हूँ मैंने बुला इंपोर्ट ठीक है और आपको क्या करना है अपने लोगो को तो मैं यहाँ �
00:20:53logo.png
00:20:56ठीक है यही अपने पास
00:20:59इसी को पन लगा देते हैं यहाँ पर
00:21:00src के अंदर और इसको मैं यहाँ पर
00:21:02pass कर देता हूँ
00:21:03ठीक है लोगो shopping करके अपने
00:21:06यहाँ पर लिया है तो वो shop back करके
00:21:08आपको यहाँ पर आपका logo दिखाए दे रहा है
00:21:10परफेक्ट कोई दिक्कत नहीं है
00:21:11height change कर लो height 24
00:21:14ना करके थोड़ी सी height अपन यहाँ पर
00:21:16change कर देता है मैं कहतेता हूँ
00:21:17कि आप यहाँ पर 28 करो उसकी height
00:21:19ताकि वो लोगो थोड़ा बड़ा दिखे तो यहाँ पर
00:21:22वो shop back करके अपने पास यहाँ पर अपना
00:21:23लोगो आ रहा है ठीक है यहाँ तक की चीछ
00:21:26क्लिए रैक्या वैसे कुछ करा नहीं
00:21:33यहाँ तक की चीछ क्लिए रहे आप सभी को
00:21:35लोगो आपको assist आप उस लोगो को
00:21:39커피क लेना ना
00:21:41ऑस ही वाले फोलडर में मिल जएगा यह
00:21:43लोगों वहाँ से आप ले लेना इस लोगों को
00:22:03ठीक है चलो नेक्स अपन यहाँ पर एक काम करता है इसकी विर्थ भी मैं कहा देता हूं नहीं तो वह रेस्पॉंसिव में दिख्कता आईगी ओटो कर देता है अपन विर्थ को एक बार के लिए
00:22:10ठीक है तो अपने पास कंफ्लीट सिव रहने वाला है वह कोई दिक्कत वाली बात नहीं देनेवाल इसमें अप्ली चीज़े उसको करता दो नफ यहाँ पर आजाओ और इसको भीकश्त करदो चलें चलेंगे साथ के साथ कि रसंपॉंसिव बन रहा है है नहीं बन रहा आ आई
00:22:40से तक प्रोड़क्ट करें ओसके लिए अन्य थैय्ट को आपर क्लास आपने यहां पर यहां पर देंगे,
00:23:10और की डायरेक्शन का मतलब क्या हो गया वन और यह मतलब 16 पिक्सल 16 पिक्सल अप्लाइब हो जाएगी ठीक है फिर उसके बाद मैं यहां पर एक डिव लेता हूं एक डिव अपन यहां पर ले रहें और इस डिव के अंदर अपन यहां पर अपना इंपुट ले लेते हैं इं�
00:23:40जल्दी से इस डिव के उपर मैं हैं पर इक क्लास लगा जेता हूं और इसको अपन कर देना कर देना यहां पर फूल तो जो अपनने अपने 500 meal यहां यहां पर इसका जो बीजी है वहाँ आप यहां पर धालो
00:24:10ग्रे कलर का 200 इस पर बीची पास कर देता हूं उसके अलाव अपन इसको राउंडेड भी कर देते हैं
00:24:15Rounded में मैं यहाँ पर कहता हूं कि आप इसको Rounded कर देना अभी के लिए Full कर दो एक तो
00:24:19Rounded Full कर दो एक बार
00:24:21Rounded Full आएगा तो पुरा Rounded Full होके आने वाला है
00:24:25परफेक्ट फिर उसके बाद
00:24:27Next और कॉन कॉन सी Classes लगाए अपन इसके अंदर
00:24:29Rounded Full कर दिया
00:24:30ऐसे ही मैं यहाँ पर कहता हूं PL
00:24:33PL करके अपन यहाँ पर कहते है
00:24:36Padding Left और Left से अपन इसपे Padding लगा देते है
00:24:40और वो मैं लगाता हूं जिसे 4 की
00:24:424 की Padding Left हो जानी चाहिए
00:24:45और उसके अलावा अपन
00:24:47एक तो अपन ने क्या लगा दी इसके उपर अपनी Padding लगा दी Left से
00:24:51ऐसे ही P R लगा देता हूं मैं
00:24:54Right से और Right से जो अपन Padding लगा रहे है वो अपन 10 की लगा देते है
00:24:57और ऐसे ही P Y लगा देता हूं
00:25:01Y Direction में जो Padding है वो मैं यहाँ पर Apply कर देता हूं
00:25:04वो मैं यहाँ पर 2 की Apply कर देता हूं
00:25:05और एक Shadow भी इस पर बना देता हूं SM करके
00:25:07चीक है और Text को अपन यहाँ पर कहा देता है
00:25:10कि जो Text की Size है वो SM होनी चाहिए इसके अंदर
00:25:12और जो अपन जब इसके उपर Focus करें
00:25:15तो Focus के उपर अपन यहाँ पर क्या करेंगे
00:25:17उसकी Outline को None कर देंगे
00:25:19मैं कहा देता हूं कि Focus के उपर जो उसकी Outline है
00:25:21उसको आप None कर देना
00:25:22None क्यों कर रहा हूं क्यों कि मैं इसके उपर Ring Create करने वाला हूं
00:25:26क्योंकि Ring दिखेगी थोड़ा सा UI अपना अच्छा लगेगा
00:25:28वो यह Purple Color की Ring दिखा देंगे
00:25:30ताकि अपना यह जो सर्च वाला है वो थोड़ा सा अच्छा लगे
00:25:33जैसे मैं इसके उपर Purple Color की Ring दिखा देता हूं
00:25:36तो मैं यहाँ पर कहता हूं कि Focus के उपर Outline को None कर दो
00:25:39लेकिन Focus के उपर ही आपको क्या करना है
00:25:41Focus के उपर ही आपको यहाँ पर Ring बनानी है
00:25:44और वो टू की बना देना
00:25:45चीक है? Ring बनानी है और वो टू की बना देना
00:25:47और जो Ring का Color है वो ही Focus के उपर
00:25:50Ring का Color जो है वो आप क्या कर देना
00:25:52वो मैं कहा देता हूं कि Ring का जो Color है
00:25:53वो आप यहाँ पर Purple कर देना
00:25:55और Purple मैं अपन कहा देता है जैसे 500 कर देना
00:25:58यह इसके उपर कर देना, जैसे मैं इसके उपर क्लिक करूँगा, तो इसके उपर वो ring create होगी, और उसका जो color है, वो अपने पास कैसा रहेगा, purple color रहेगा, जैसे मैं इसके उपर क्लिक करूँगा, जैसे मैं इसके उपर क्लिक करूँगा, तो यह अपने पास क्या बन गई, �
00:26:28यहां पर यह प्लेस ओल्डर क्या लिए कर रहे है रहे हैं जैसे मैं यहां पर ब्लिंट पर आता हूं हो में अश्रॉट कर रह कर रहा है
00:26:53है ठीक है अपन भी कर देंगे अपडेट कोई बड़ी बात नहीं है बिल्कुल ईजी सा है यह काम अपडेट करने माला क्योंकि यह उसको रॉनिंग होते वे दिखा रहा है यह जैसे अपन
00:27:01अगे निएनिमेशण लगाना पड़ेगा अपने को इसमें थोड़ा सा कोई बात नहीं अभी के लिए तो सिर्फ मैं लिग देता हूं जैसे
00:27:08सर्च फूर अपन कहते हैं फ्रूट्स ठीक है फ्रूट्स और एंड मोर
00:27:17फ्रूट्स और और क्या चीजह है जैसे फ्रूट्स और मैं कहते हूं कि
00:27:24लेक्रोनिक्स sense फ्रूट से लाक्रोनिक्स और कि के लचे तो
00:27:52डॉट्ड द imperial दो इसकर आगे
00:27:54इसको अपन अपडेट करवा देंगे, अगर करवाना चाहे तो कोई बड़ी चीज नहीं है, उसके अलावा next अगे चलते हैं, यह तो अपन नहीं यहां पर क्लिक करें, तो अपनी सर्च बार यहां पर वर्क करनी चाहिए, ठीक है, और एक काम करो, इस सर्च बार के अंदर यह
00:28:24इंस्टलेशन करना पड़ता है, इंस्टलेशन उच्वा है, आपको कुछ नहीं करना न्दिन प्रेट एक इसको इंसौल �keर लो, फिर उसके बाद आप इसको जो भी यहां पर यूज करना चाते हैं, उसको इंपोर्ट करो और यहां पर ऊसको यूज करना है, कैंसा ने यहा
00:28:54मैं यहाँ पर आता हूँ मैं इंस्टॉल कर लेता हूँ npm इंस्टॉल और मैं यहाँ पर कहता हूँ react हाइफन करके था क्या वो
00:29:00react और अपने पास हाइफन आइकन्स ठीक है तो हाइफन और यहाँ पर बन कहते है अपना आइकन्स ठीक है
00:29:11तो मैंने कह दिया npm install react icons
00:29:14और मैं यहाँ पर इसको run कर लेता हूँ
00:29:15npm run
00:29:17देव
00:29:18perfect
00:29:20यहाँ पर आके check करोगे
00:29:24सही चल रहा है अब देखो यहाँ पर
00:29:25मैंने कौन सा search करा मैंने search करा
00:29:27यहाँ पर अपना search वाल आइकन में
00:29:29को यहाँ पर चीए
00:29:30wait a minute guys
00:29:35झाल
00:30:05झाल
00:30:35झाल
00:30:36झाल
00:30:37झाल
00:30:38झाल
00:30:39झाल
00:30:40झाल
00:30:41झाल
00:30:42झाल
00:30:43झाल
00:30:44झाल
00:30:45झाल
00:30:46झाल
00:30:47झाल
00:30:48झाल
00:30:49झाल
00:30:50झाल
00:30:51झाल
00:30:52झाल
00:30:53झाल
00:30:54झाल
00:30:55झाल
00:30:56झाल
00:30:57झाल
00:30:58झाल
00:30:59झाल
00:31:00झाल
00:31:01झाल
00:31:02झाल
00:31:03झाल
00:31:04झाल
00:31:05ठीक है अब देखो यहाँ पर अपन सर्च कर लेते हैं मैं यहाँ पर कहता हूँ अपना सर्च यह फार सर्च वाला में को यहाँ पर लगाना है इसको सबसे पहले इंपोर्ट कर लो वहाँ पर आके तो मैं यहाँ पर आके उसको इंपोर्ट कर लेता हूँ मैंने इंपोर्ट कर
00:31:35पासर्च वाला रहा है इसको अपने इसी डिव के अंदर लगा देते हैं अब देखो यहां पर अपने एक डिव लिया यह वाला जो डिव लिया है इस डिव के अंदर पास करता हूं इसको ठीक है ताकि अपने इस डिव के अंदर ही लगाया था उस आइकन को तो यह जो डिव
00:32:05करते मैं इसको एक पोजिशन इता हूं रियलेटिव चिक इसको मैंने पोजिशन दे दी और यह
00:32:11जो फास सर्च वावला आइकन है इसको इहां पर क्लास मैं यहां पर
00:32:14इसको क्या देता हूं कि आप डिरो चीक है उसको आपकल यहां पर किवी ऑपनी एप्सलुट अब
00:32:21अपने दी है तो अपने इसको एक बार सैट भी कर देते हैं एक बार अपने सही कर रहा हूं कि टॉप से आप इसको यहां पर क्या कर देना हाफ कर देना ठीक है
00:32:42अपने पास यहां पर हो गया ठीक है यह काम कर देना और चêsी काम कर देना और अभी यह आइकन अपने पास सहीं नहीं आ रहा ना
00:32:59और इकका में कॉपन भी खायर्ट में पू सिर्फ टम सब्सक्र Сп stamps लिए यहां पर करते हैं युवाय जो डाइक्शन इसमें शाले इन principe यह
00:33:20तो मैं यहाँ पर कहता हूं translate और y ठीक है translate y में अपन यहाँ पर इसको कह देते हैं half
00:33:31half कर दो लिखी लो half ठीक है translate और इसका जो text है वो आप यहाँ पर कर देना जैसे
00:33:42ग्रे कलर और ग्रे में अपन यहाँ पर देते हैं जैसे इसको 600 ठीक है और टेक्स्ट जो है वो SM रहना चाहिए छूटा आइकन अपने को यहाँ पर दिखाए देना चाहिए
00:33:51यहाँ पर आके चेक करो अभी भी सही नहीं आ रहा रहा रूको एक मिनट फिर चैक ही करना पड़ेगा अपने को इसको यह अपने यहाँ पर लिया और इसके उपर अपने जो सारी
00:34:02क्लासेज लगाई है वो कि एक काम करो इस ट्रांसलेट को इसी में मिक्स कर दो टॉप से ही तो क्या होगा
00:34:22और ज्यादा विगड़े गया तो तो ठीक है फा सर्च पने यहां पर ले लिया और
00:34:33राइट से त्री कर दिया टॉप से पने इसको गए दिया हाफ और ट्रांसलेट हुआ है अपने यहां पर
00:35:00फिर भी भार जा रहा है यह अपना है ना
00:35:15एक बार मैं देखता हूं यह इस इंपूट में अपने कुछ जो क्लासेज लगाई यह
00:35:29अपने इसको फिर तो क्योंकि ऐसे नहीं पता चलेगा क्या दिक्कत आ रही है इस आइकन को मैं यहां पर लेता
00:35:44अपने कलर फोन साइस यह अपने इसा कुछ नहीं लगा है इसमें अपने एपसलूट पोजिशन एपसलूट यहां पर इसको पास करीए ठीक है जिससे यहां पर यह आ गया और उसके अलावा अपने
00:35:58यह इंपुट है और
00:36:28यह इस त्रांसलेट की प्रॉपर्टी के लगत लगा रहा है कि अपनियाँ पर ट्रांसलेट हाइफन करके हुआ
00:36:46हाँ अब देखाओ परफेक्ट आ रहा है टेक्स को चेंज कर दो या तो आएसम ना करके अपनिया पर चेंज कर देते हैं मैं कह देता हूं
00:36:53टेक्स्ट करके अपनिया पर कहते हैं जैसे लगी करके देख लो कितना बड़ा आइकन दिखने वाला है परफेक्ट आइकन इस पर क्लिक करोगे तो इस तरीके से आपको यहां पर शूब होगा यह एक आइकन नहीं लगा अपने और कुछ नहीं किया अब देखो अपने कू
00:37:23तो डेक्स्टॉप मेन्यू दिखा दो मतलब लिंक आइटम आपके यहां पर क्या क्या रहने वाले वह पन यहां पर दिखा देते हैं
00:37:31ठीक है
00:37:36कैटेग्रीज में अपनी सारी कैटेग्रीज आ जाएगी ना एक बार के लिए मैं जैक्टो को देखता हूं कैसा है क्योंकि अपन कुछ कुछ सिमिलर सा ही बनाने वाले है
00:37:49कि युऑ थोड़ा चेंज करेंगे देखो यहां पर लॉग इन और काट दूचीज ही दिखा आरा तो अपन भी लॉग इन और काट ईरिकार्ज और कुछ शेंधाने वाले यहां पर जैसी काक्र दिखा रहा है नहीं यहां
00:38:10अपने जो मेन्यू है वो मैं यहां पर दिखा देता हूं ठीक है मैन्यू मैं यहां पर दिखा देता हूं मैन्यू अपने के दिया और इसके अंदर अपन यहां पर ले लेता अपना एक डिव और इस डिव के अंदर ही अपने जो लिंक आइटम है वो अपन यहां पर दिखा द
00:38:40चॉपिंग कार्ट का दिखा देता हूं और एक यूजर वाला दिखा देता है तो यहां पर आके अपन सर्च कर लेते हैं वो सारी चीजी होगी इसके अंदर जैसे मैं एक तो सर्च कर लेता है अपना होम अगर अगर अपन सर्च करेंगे तो यह अपना होम वाला इसको अपन �
00:39:10है सेम ऐसे ही अपन एक Scottish क ले ले लेते है जिसमें आपने यहाँ पर बिला देऊ अपने
00:39:15shopping Cart ओ ठीक है तो यहीं पर आओ और यहाँ पर मैं कहते हैं अपना जो
00:39:22Craft है वो सेर्च कर लो. वाली series मैं यहाँ पर ले लेता हूं जो F wilde
00:39:26सिरीस आ रही है और इसी को अपन ले लेते हां फार काट ब्लस करके तो यहांपर अपन Patriot कर लेते हैं यह लोग issue all
00:39:35Plus करके और इसको अपन यहां पर लकाने अपन एको लिंग टैक ले लो आप यहांँपर ठीकhouetteël
00:39:40और उस link tag के अंधर अपना लगा देते हैं इसको अपनी जो फा करा रहा है उसको अपन parapher लगा देते हैं उसके अलावा अपने पास यहांपर क्या है उसके अलावा
00:39:54पैजय कि और शॉपिंंग कार्ट का लगा दिया था एक अपन लगा दिया ऐसे ही अपन यूजर
00:40:01भी लगा देते हैं कुछ-कुछ चीजे लगा देते हैं मैं यहां पर कहता हूं ऐपना यूजर चिक है तो इसको भी मैं यहाँ पर लगाता हूं एक को लिंग ऐग अपन यहां पर ले
00:40:23ले लेते हैं एको link tag आपन यहाँ पर ले लेते हैं और यहाँ पर
00:40:27अपन के लेता है अपना for rg user circle चीख है perfect आपके चाकर हूँ हुआ क्या है
00:40:35यहाँ पर यहाँ पर तेखो तीन आइकन आपको दिखा दे रहे एक तो home एक
00:40:39और यहां पास है अपना यूजर वाला इसके उपर अपने पर लगाता हूं आप लिंक के उपर लगा रहेगा इसके उपर मैं लगा देता हूं
00:40:46जो भी अपने को यहाँ पर वो लगानी अपनी
00:40:50tellwin css वो लगा देता हूँ
00:40:52मैं यहाँ पर इसी के उपर लगा देता हूँ
00:40:54class link के उपर लगा देता है
00:40:58easy रहेगा
00:40:58इसके उपर मैं लगा देता हूँ class name
00:41:00class name अपने यहाँ पर करा इस link tag के उपर
00:41:03टीक है और इस पर मैं कर देता हूँ कि text को आप यहा पर क्या कर देना
00:41:06text को आप यहाँ पर क्रदेना
00:41:07gray और gray color के अंदर पर यहाँ पर क्रदेना
00:41:10चैसरे आप इसको 700
00:41:12ज launched similarity mix कर देना
00:41:14यह कर देना लिकिन जब मैं hover करू जब मैं
00:41:16is उपर क्या करू अवर
00:41:18पर आपको यहां पर क्या करना है, होवर करने पर आपको इसका text का color change कर देना, और वो आप कर देना purple, क्योंकि अपन पर पर यूज कर रहे हैं, तो purple color मैं पर यहां पर कह देते हैं, जैसे इसको 600 आप पास कर देना, ये काम हो जाना चाहिए, जैसे मैं इसके उपर होवर करो, �
00:41:48सब्सक्राइब
00:42:11यहाँ पर कहा काम यहाँ पर देना यहाँ पर एंदर नहीं ओपर यहाँ इस थरीके तो इस तरीकेश के पने पर जह देखाएं चुछा हूँ, usted
00:42:30अपने को यहाँ पर यह दिखाई दे रहा है अब वो hidden क्यों लगा है जैसे मैं इसको inspect करूँगा तो देखो inspect करते ही यहाँ पर जैसे 768 pixel से नीचे आएंगे तो वो आपके icons hide हो चुके हैं यहां से
00:42:40क्यों क्यों क्योंकि मैंने 768 pixel से उपर यहां पर flex लगा है md device लगा है अपने md से उपर flex कर देना उससे पहले hidden रहने देना क्योंकि अपन वहां पर फिर अपना toggle दिखाने वाला है जैसे click करूँगा तो अपने को सारे अपने यहां पर यहां पर यह लिंक आइटम है वो अ�
00:43:10के साथ अपने काम करते हैं अपना यह जुफा हो में इसकी size अपन इंक्रीज कर लेते टेक्स करके मैं यहां पर करता हूं कि आप इसको excel कर देना अभी के लिए एक बार excel करो तो यहां पर बड़ा दिखाय दे रहा है उपने को perfect same ऐसे ही अपन यह सारी classes किस पर लगा देते स
00:43:40एकसल लगाई है यह अपन सब के उपर लगा देते हैं ठीक है और भी कोई icons की जवत होगी तो उपन ले लेंगे यहां पर देखो अपने बास तीनों icons आ रहे हैं यह अपना यह बन गया और यह अपने कोई सथरीके से यहां पर शो हो रहा है ठीक है तो यह अपने सिर्फ य
00:44:10यहां तक की चीज के लिए रहे तो एक बार कमेंट करके बताओ कि यहां तक की चीज के लिए रहे
00:44:17चलो एक काम और कर लेते हैं जैसे ही मैं यहां पर इसमें medium device से नीचे जा रहा हूँ
00:44:45यहां आज़ा हूँ जैसे अपने सेंशे सेंशे हूं नीचे जारें तो यहां पर क्या आ जा
00:44:46आजाना ंच्ए आहां तो अपने को क्या लागाना है
00:45:05पर ने ने को अवे आप दिखा देना
00:45:08अब यह कब दिखाना है जब अपने पास को हो Russines
00:45:13एक डिव ले लो पहले तो और उसके अंदर अपन यहां पर अपना टॉगल दिखाने वाले है तो
00:45:19हुआ कि टॉगल के लिए तो यहां पर अपना आइकन होगा ना कोई तो यहां पर आओ
00:45:28कि क्या नाम से हो सकता है जैसे बार्स करके अगर सर्च करें तो यहां पर बार्स करके जैसे मैंने सर्च करा यह यह अपने पास बार आ रहा है तो इसको फा बार्स करके अपन यहां पर जो आ रहा है इसको मैं कर लेता हूँ अपना इंपोर्ट कंट्रूल सी और यहां पर कर ल
00:45:58यहां पर आके अपन किसको लगा देते है अपना यहां पर मैं एक बटन लगाता हूं उस बटन के अंदर अपन इसको लगा देते हैं मैंने यहां पर क्या लिया एक बटन लिया और उस बटन के अंदर अपन लगा देते हैं किसको अपने फा बार्स को चीक है अब यह कब दि�
00:46:28हमें यहां पर शो हो जाएगा शोग हो रहा मैं तो वह अपने को यहां पर शूओ रहा है फाब आयर rigor
00:46:33अब यहां पर आके ऐपन इसे उपकर थोड़ी सी Πार देते हैं मैं में इहां पर हाथ लगा ताहू ऊस बटन की उपकर लिए
00:46:42और यहाँ पर टों मैं आप two X ال ए और टेक्स्ट को आप यहां पर कर देए अपना
00:46:53फैल कुलर के अंदर आप यहाँ पर देना इसको 600 टीक है इतना सा काम आप इस इस कहीं पर कर देना कि
00:47:03कि वह इसकेपर applying हो जाए मैं इसके पर क्लिक करूं थित्रिय को फ़र्ड वाला बटन आ जाएं और क्लिक करना है था काम सिर्फ एक चीज से हो सकता है उर इसे
00:47:23हो सकता है और वो है आपका यूज स्टेट यहां पर यूज स्टेट के तुरू में काम करने वाला हूं समझना उस चीज को कोई बड़ा सा लॉजिक नहीं है छोटी सी चीज में आप लिग रहा हूं मैंने यहां पर एक यूज स्टेट लिया ठीक है अभी यूज स्टेट के अ
00:47:53संट्राइब आपको मैं यहां पर एक करता हूं इस उपन टिक है और में आपको क्लिक करो तब अपने को यह काम करवाना है जब इसके उपर क्लिक करें करें तब आपने को यह यकाम करवाना है
00:48:18टो
00:48:23यही बनाया था अपने इसी पर क्लिक करने पर करना है तो यहां पर अपन एक काम करते हैं अपना टॉगल मेन्यू भी अपने को बनाना पड़ेगा फिर होगा वो ठीक है अभी के लिए तो मैं एक काम करता हूं यहां पर
00:48:44अपन क्या करते हैं कंडिशन लगा देते हैं अभी के लिए तुका लिए तीक है मैं यहां पर सिफ झास करके आता हैं चुल्व करके आता हो वो
00:49:07इन आम करके भी नहीं आ रहा हां यह ले ले देए इंम यह ऐच्छा लग रहा है
00:49:12फार टाइम्स करके अपने पास यहां पर या रहा है इसको मैं यहां पर कॉपी कर लेता हूं और यहां पर ले ले इसको यह देखो मैं क्यों ले रहा हूं समझाता हूं इस चीज को यहां पर आ जाओ और यहां पर इसको लगा दो फार टाइम्स को अब बेसिकली अपने को क्य
00:49:42को यहां पर क्या दिखाना है जो आपका दूसरा वाला है वह कौन सा आपके पास फा बार्स यह काम कर देना अपने उस
00:49:49यूज स्टेट की कंडिशन की बेसिस पर वह उटमेटिकली होने वाला है जब मैं इस पर क्लिक करूंगा तो यहां पर आपन एक
00:49:54बनाएंगे भी अगर आप यहां पर आके चर्क करोगें तो अभी क्या है फॉल्स है जैसे में उसको यहां
00:50:04पर आकर चיंज कर देता हूं मैं यहां पर देता हूं क्या अपना पर क्यों पूल देता हूं मैं नहीं हापर गुला
00:50:09जैसे आप true कर दोगे तो वो icon यहाँ पर change हो जाएगा
00:50:11तो अपने इस पर click करने पर
00:50:13वो functionality work करनी चीए है
00:50:14वो काम अपन आगे करवाएंगे
00:50:16click करने वाला जो काम है click करने पर यह काम होगा अपना
00:50:19चीक है तो अपने को
00:50:20अपना एक toggle menu अलग से बनाना पड़ेगा
00:50:23तब यह काम होगा
00:50:24अपने को अलग से एक toggle menu बनाना पड़ेगा
00:50:27चीक है तो यहाँ तक की चीज clear है
00:50:34या तो अभी बनाए अपन toggle menu
00:50:37नहीं तो फिर अपन कल बना लेंगे
00:50:38कोई issue नहीं है उसके अंदर
00:50:39यहाँ तक की चीज आप सभी को clear है
00:50:43time कितना बचा अपने बास
00:50:45अभी बनाओ sir
00:50:53ठीक है चलो अभी बनाते है
00:50:55देखो यहाँ पर क्या करना है
00:50:56अपने को अपना toggle menu बनाना है
00:50:58जैसे मैं इसके उपर click करूँ
00:50:59जैसे अपने को इसके उपर click करें
00:51:02तो अपने को एक toggle menu बनाना है
00:51:03मतलब उने को एक और यहाँ पर
00:51:04code लिखना पड़ेगा
00:51:06एक और अपन यहाँ पर अपना div बना लेते है
00:51:09ठीक है जो अपने को mobile view के basis पर दिखाए दे
00:51:12तो इसको तो मैं करता हूँ
00:51:14यहाँ पर close
00:51:16और यहाँ पर अपन ले लेते हैं अपना एक mobile
00:51:18मैं यहाँ पर कहता हूँ
00:51:21कि यह mobile view के लिए है
00:51:23mobile view के लिए मतलब
00:51:27जैसे 768 pixel से नीच आ है
00:51:28तब अपन इसको यहाँ पर use करने वाले है
00:51:30perfect तो यहाँ पर अपन ले लेते अपना
00:51:32div और उस div के basis पर
00:51:35अपन यहाँ पर इसको
00:51:36design कर लेते हैं मैं यहाँ पर एक link tag ले लेता हूँ
00:51:38और उस link tag के अंदर अपन यहाँ पर कहते है
00:51:40एक तो अपने यहाँ पर home लिया था
00:51:43ठीक है क्या क्या चीज़े लीती एक बार देख लो
00:51:45यह नहीं है यह है
00:51:46एक तो आपने यहाँ पर कहते है लिया home लिया
00:51:48एक आपने यहाँ पर कहते है अपना cart
00:51:50और एक अपने यहाँ पर क्या लिया user
00:51:52चीक है, तो मैं यहाँ पर कहता हूँ
00:51:54home, same ऐसे ही है अपन यहाँ पर कहते है
00:51:56अपना, क्या अपना, cart
00:51:58और उसके अलावा अपन यहाँ पर
00:52:04एक ओ लिंक टैग ले ले लेते हैं
00:52:05कुप और उसमें अपन यहां पर क्या कहते है अपना Usor ठीक uh, टीक! इनों चीज हो गया अपने पास होंच एक तो क्या होगया अपने
00:52:14सो गया चाहँ में हो गया क्या अपनाकन बैइंग करेंगी डिशुक्अ है वो काम आज़ेगे आगे ओका ने फ sup
00:52:34मैं यहां पर अपना जो जर्ड़ी है इसका स्थज़ जो है
00:52:38यहां पर पूल केया रखतेते हुश के समय अपने बाइक से प्
00:52:55कि लगा देते च्थेर्च यहां पर उनके लिखाय करें Jook
00:53:05यहाँ पर लगा तो यहां पर इक छ्याइड़ कर देना। इसके
00:53:17पर यहां पर आपको इसारी के से दिखाई दे रहे यूँंगे छोम काट
00:53:22और यूजर जूम करने पर नहीं दिखेंगी क्या वो थोड़ा सा यूवाई में यहां से जूम नहीं होगा अगर नहीं है
00:53:32दिखो यहां पर आपको दिखाई दे रहोंगे इनको अपन लाइन बाइन करना चाहते तो लाइन बाइन भी कर लेंगे
00:53:44परफेक्ट यहां तक कोई दिक्कत नहीं है लाइन बाइन करने के लिए अपने को अपने लिस्ट आइटम है यह जो लिंक आ रहे इनके उपर अपने को क्लास लगानी पड़ेगी
00:53:53इसके उपर class लगा देता हूँ
00:53:54और class में मैं कहा देता हूँ
00:53:55कि आप इसको क्या कर देना
00:53:56block कर देना
00:53:57block करके आपको यहाँ पर क्या करना है
00:53:59इसका जो text है वो आप यहाँ पर कर देना
00:54:01gray color का और gray में मैं कहा देता हूँ
00:54:03800 कर देना
00:54:04and lower के उपर जो text है
00:54:06वह आप purple color का कर देना
00:54:08over के उपर text को आप यहाँ पर क्या कर देना
00:54:10purple और purple में 600 यहाँ पर पास कर देना
00:54:13perfect तो अभी आप देखोगे
00:54:15तो आपको home इस तरीके से दिखाई दे रहा है
00:54:17और ऐसे ही
00:54:18same ऐसे ही अपन यहाँ पर क्या दिखाने वाले
00:54:21है यह दो अपना home का वह नदा
00:54:22ऐसे ही इसको मैं यहाँ से कर लेता हो अपना
00:54:25copy
00:54:29copy कर लो और
00:54:30यहाँ पर आके
00:54:31और पेस्ट कर दो
00:54:32और इसको यहाँ पर आके भी Cut
00:54:33कर दो
00:54:36है ईशcket परफेक्ट
00:54:37तो तहुले कर होँ हूं पर
00:54:39इस तरीके से अपने को यहां पर दिखाई धे रहे है अब यह बाहर क्यों जा रहे है
00:54:45सा होम कान वुझर बाहर कैसे जारे अपने पोजिशन लगाने बुटेगी की अपने लगाने को
00:54:55है भीजी वाइट और यह पर अपनी सारी चीज लगा दी गया उन
00:55:01एक मिनिट अपन ने यहाँ पर यह काम किया
00:55:18इस टॉगल को पनने कहाँ पर बना है
00:55:48चीख है और यह जो बाक्स है
00:56:17यह अपना बॉक्स रहा चीख है और इसके उपर अपने कौन सी क्लास लगा दिये अपने हीडन लगा रखी अपनी
00:56:24ठीक है
00:56:45एक काम करूँ ना यह टॉगल वाला जो काम करा ना वो पन इसको इसके अंदर रख लेते एक बार के लिए
00:56:51इस टॉगल वाले काम को इसके अंदर रख लो
00:56:54नहीं नहीं इसके अंदर तो अपने हीडन इसके उपर पहले से लगा रहा है ना इसके अंदर मत रखो उसको तो फिर वो हीडन यहाँ पर वाक कैसे करेगा
00:57:03बहार ही रखते है अपन उसको
00:57:07चलो इसको UI को तो अपन कर देंगे एक बार के लिए मैं यहाँ एक काम करता हूं
00:57:28कंदिशन लगा दो यहाँ पर कंदिशन क्या लगा होगी कि जो अपने इस ओपन लिया है वो अगर टृठ कर दो deliberate देखो यहाँ पर अभी और अभी वह अपने पास त्रू आ है अ
00:57:52अब भी वो true आ रहा है इसका मतलब यहाँ पर work कर रहा है
00:57:55फिर मैं यहाँ पर कहता हूँ इसको false
00:57:57मैं यहाँ पर कहता हूँ false
00:57:59false करोगे नहीं देख रहा क्यों नहीं देख रहा
00:58:02क्योंकि अपने हमाँ पर condition लगा रखी है
00:58:04कि is open true होगा तो second condition true होगी
00:58:07क्योंकि end operator यहाँ पर क्या करता है
00:58:09दूनों condition true होना जरूरी
00:58:11तभी वो आपको true return करके देता है
00:58:13यह काम अपन on click के उपर करवाएंगे
00:58:15जो अपन next class में इसको complete कर लेंगे
00:58:17ठीक है
00:58:17हाँ position से हो जाएगा
00:58:27अपन कर लेंगे उसको set कल कर लेंगे
00:58:29पोजिशन से set हो जाएगा वैसे तो
00:58:34यहाँ तक के change के लिए रहे आप सभी को
00:58:38तो आज की class में पर ने सिर्फ इतना ही देखा है
00:58:49बाखे पन कल वाली class में complete बनाएंगे आगेगा
00:58:52hero section अपने और भी section है वो बनाते वे चलेंगे
00:58:54थाकि क्योंकि UI का ही काम थोड़ा सा landy रहेगा
00:58:58UI बनाने में ही थोड़ा सा time लग जाता है
00:59:00बाखे फिर कुछ नहीं है फिर बिल्कुल easy है
00:59:03ठीक है तो आज की class के जो attendance के point 1 है और point 2 है
00:59:10वो मैं आपको बता देता हूँ
00:59:11attendance के point 1 के अंदर आपको mention करना है
00:59:14आपको attendance के point 1 के अंदर mention करना है
00:59:18tellwind CSS यह attendance का point 1 है
00:59:21और इसी के साथ attendance के point 2 के अंदर आपको mention करना है
00:59:25जो अपने आज component बनाया अपना नयव बार
00:59:27तो आपको point 1 में tellwind CSS mention करना है
00:59:31और point 2 के अंदर आपको mention करना है नयव बार
00:59:34ठीक है तो यही attendance के point 1 और point 2 है
00:59:37जो आप fill कर देना
00:59:39अगर कोई doubt हो तो अपने doubt आप बताओ
00:59:46नहीं तो फिर अपन आज की class इतनी ही रखेंगे
00:59:48बागे फिर अपन कल वाली class में discuss करेंगे
01:00:07देखो UI में ही टाइम लगता बागी तो फिर वैसे अपने को टाइम नहीं लगेगा
01:00:29सर बैकेंड के topic सब हो गए नहीं सब नहीं हुए कई जो topics है वो अपने
01:00:36किसी के अंदर होंगे project के अंदर सारी चीजे नहीं हुई है ठीक है
01:00:39topic मैं जब तक project पूरा नहीं बनाओ तब तक कोई topic अभी complete नहीं हुए किसी भी चीज के अंदर
01:00:47सर जो open end end वाला logic कम समझ इन में आया ठीक है मैं कल समझा दूँगा उसको क्या है वो logic
01:01:01क्योंकि अगर आपने end end operator और अपना और operator अगर आपने पढ़ा होगा तो उसका concept अगर आपको पता हो तो वो concept की वेज़े से हो रहा है
01:01:08मेरी class मिस हो गई इस week की कोई बात नहीं है आप उन classes को वहाँ से recording से चेक कर लेना मारिया करें कि सर रिकॉर्डिंग जल्दी मिल सकती है देखो रिकॉर्डिंग जल्दी मिल सकती है यह हो सकता है कि morning में आपको सुबह जल्दी मिल जाए
01:01:17मेरी class मिस हो गई इस week की कोई बात नहीं है आप उन classes को वहाँ से recording से चेक कर लेना मारिया करें कि सर रिकॉर्डिंग जल्दी मिल सकती है यह हो सकता है कि morning में आपको सुबह जल्दी मिल जाए साड़े नो दस बजे तक आपको recording मिल जाएगी इस से ज्यादा जल्दी नहीं हो
01:01:47बहुत आसान लगता है क्योंकि मैंने युआई बहुत बनाया है युआई तो बहुत ऐसी रहते है बस new i mean ही टाइम लगता है और क्योंकि back end में इतना टाइम नहीं लगेगा क्योंकि आपनी लॉजिक सी सारी जीजी ही सीखनी है कि अपनी यहाँ पर अप लूर कैसे करवा स
01:02:17मेंने स्क्रि league recording कर लिया है उस वाट सब ग१ूप में सायंड कर दूँ मांट हुऊ है चुलब अच्छी बात है
01:02:25कशूल मैंस करता हूं अधू लेट में आया है वीडियो है ठीक है कोई
01:02:36क्लास अपनी इवनिंग में रहती है तो टीम सब ऑफिस क्लोज होने का टाइम होता है इस टाइम तो सब घर चले आते तो इसलिए वह अपलोड नहीं हो पाती मॉर्निंग में होती है लेकिन कोई बात नहीं मॉर्निंग मैं आपको जल्दी मैं प्रोवाइड करवाने की कोशि�
Be the first to comment