2
- 1 year ago
🎯 Today’s Learning Outcomes
By the end of today’s class, students will be able to:
✅ Set up React + Vite project structure
✅ Integrate Tailwind CSS properly
✅ Build responsive Navbar, Hero, and Footer sections
✅ Understand component-based structure and reusability
✅ Test responsiveness across all devices
By the end of today’s class, students will be able to:
✅ Set up React + Vite project structure
✅ Integrate Tailwind CSS properly
✅ Build responsive Navbar, Hero, and Footer sections
✅ Understand component-based structure and reusability
✅ Test responsiveness across all devices
Category
📚
LearningTranscript
00:00के दो आप्राइट विंग आप्राइट वैया कर शगल
00:21गुरिवन नमस्ते अजली कुरिवनिंग अन्या कुरिम शुरज अर्जून लिवा
00:28मारिया
00:30एक बार जितने भी graduate
00:31अपने class join करें वो response कर दो
00:33कि मेरी voice clear है
00:35जितने भीrendo
00:37अपने class join करें वो response कर दो
00:39कि मेरी voice clear है
00:41और आपको
00:50display भी visible है आप सबी को
00:52ये भी response कर देना
00:53अब देखो अपन प्रोजेक्ट का अपना युवाई बना रहे थे अपन फ्रंटेंट को यहाँ पर रेडी कर रहे थे उसी में आगे देखते कहां तक अपन ने देख लिया था उसी को आगे
01:18करते हैं ठीक है तो चुरू अपना आजाते हैं अपने वीस कोड के उपर यहाँ पर उपन कर लेता हूं और इसी के अंदर अपन यहाँ पर अपने उसी फोल्डर पर आ जाते हैं जिस पर काम कर रहे थे उपन फोल्डर कर लेते हैं और अपना कौन सा फोल्ड रहता है यहाँ �
01:48तो यहाँ पर अपना आ जाते हैं CD करके अपना जो front end है उसके उपर फिर उसके पाद NPM run और देव करके अपन यहाँ पर इसको run कर लेते हैं
01:58तो यह अपना front end यहाँ पर run हो चुका है तो अपने यहाँ पर सिर्फ अपनी एक new bar अपने यहाँ पर create करी है
02:07और इस new bar के अंदर अपन यहाँ पर complete responsive भी बना रहेते हैं तो एक बार अपन code चेक कर लेते हैं क्या code अपने लिखा है फिर अपन इसको आगे बढ़ते हैं इसके अंदर यहाँ पर आता हूँ और वही अपने new tag लिया और इसके अंदर यह सारी classes अपने यहाँ पर apply करी फिर उ
02:37स्रक्टनी सर्च बार यहाँ पर लिये और सर्च पार के अंदर आपने ए पनी जो भी सर्च वाले चीजे लगानी वह लगा दी फिर उसके बाद आपने यहाँ पर दिखा रहा है अपनी
02:46मेन्यू के अंदर आपके सारे मेन्यू अरहा है जो अपने यहां पर दिखा रहे हैं ठीक है और इसके अंदर अपने लिद्पिक देश्गर्ण बेडियम दिवास के साफ से फ्लाइक्र एक बार मैं चेक कर लेता हूं कहां तक अपने देख लिया था
03:04ठीक है
03:16पिर यह मैन्यू अपने यहां पर बनाई और इस मैन्यू के बहार अपने अपना यह एक डिव लिया है
03:28अब देखो यह जो होम कार्ट और यह यूजर यह कप शो होना चाहिए
03:45जब मैं उसके उपर क्लिक करूँ यह काम अपने को क्लिक करने के उपर करना है
03:49तो जब मैं किस पर क्लिक करूँ इस बटन के उपर क्लिक करूँ तब यह काम होना चाहिए
03:53तो यहाँ पर लगा दो अपना on click
03:56और on click के उपर अपन यहाँ पर एक function बना लेते हैं
03:59उस function के basis पे ही अपने पास जो true false अपने को करवाना है
04:02वो true false वाला काम अपन उस function के basis पे करवा देंगे
04:05तो यह कैसा करवाएंगे अपन एक function बनाएंगे
04:08उस function के अंदर यह काम करवा देंगे, ठीक है, तो यहाँ पर अपना एक function बना लेते हैं, और उसको मैं यहाँ पर कहता हूँ, जैसे कुछ भी function बना लो यहाँ पर, यहाँ पर आजाओ, एक function अपन यहाँ पर create कर लेते हैं, जिसको मैं यहाँ पर कहता हूँ, toggle menu करके अपन यह
04:38परेगा दीन हैं उसको यहां परुकर करेदा डिःगा गई जा जो घ्रते हैं और दुमां यहां पर इस
04:58ने पर करने यहां पर न हम अपना चलना जबबहरे हैं न उसको यहां पर ट्रीय काने इसनुद आण साथ
05:05true false true false करता रहेगा तो यहां पर आ जाते हैं और यहां पर मैं उसको पास करता है तो अपने जो भी अपने पास किया है अपना toggle menu वाला function है उस toggle menu वाले function को अपन यहां पर पास करते हैं तो जब यह function work करेगा तो अपना set is open यहां पर क्या होगा false है तो true हो जाएगा true है तो false हो �
05:35ठीक है क्लिक पे ऊपन दैन उसके बाद close हो रहा है काम करो कुछ तो
05:39mistake कर रहा है यह जो अपन अपने नए जो मेन्य ऐटम दिखा रहे है इस ओपन करके यह
05:46सारे चीजे इसको अपन काम करते हैं इस ओपन करके अपने दिखाया ना इसको
05:53थोड़ा सा यूई को चेंज कर देते हैं अपन चीक है यह अपने पास अपना यह इस ओपन वाला जो है
06:09एक मिनेट अपन इसको चेंज कर देते हैं थोड़ा सा
06:23कि यूई चेंज हो रहा है यहां पर तो यह अपने इस पर क्लिक करने पर यहां ना आके इसकी नीचे आना चीए था ठीक है तो काम करो
06:39Exodus
06:46चैह अपने पास कौन से चीज़े है यह अपना आइकन नीच दिखा रहे हैं वह अपने को यह अपर शूख अर यह टॉगल वाला पन यह अहाँ बुनाए इस टॉगल के अंदर लगा
06:56इसको ये जो पन condition लगार है इस इस को पूरे को यहां पर अंदर ही लगा तो इस condition को इस बटन की अंदर की लगा दता हूं
07:05ठीक है ये condition अपन इसके अंदर ही लगा दते तो जैसे में कुक कर रहा हूं तो यहां पर अपने पाश लगंव कissenschaft के लिए लेगी के लिचाएगा
07:16ठीक है, क्या करें फिर अपन इसमें, आप बताओ क्या कर सकते हैं, अपन इसको सही से थोड़ा सा अरेंज करने के लिए
07:25बताओ क्या अपन प्रॉपर्टी लगा है, इसके पर CSS के अपनी टैल्विन की, जिसके थूँ ये नीचे आ जाए अपने पास
07:39यहाँ चेक करो इसको, मैं यहाँ पर इसको टार्गेट करता हूँ, यहाँ पर आओ, और यही डिव है अपने पास
07:46ठीक है, इस डिव को अपने टार्गेट करा, यह जो डिव है, यह डिव ही अपने को यहाँ पर शोओ रहा है
07:54या तो इस ड्यूव को यहां ना लगा कि अपने काम करते हैं मॉबाइल वीव वाला जो पर ने बनाया है इसके उपर अपने लगाया
08:01एमडी हीडन बीजी वाइट फिर उसके बाद अपने पी एक्स लगा दिया ठीक है और स्पेस अपन दे रहें शैडो भी अपन इस पर क्रियेट कर रहें
08:14ब्लॉक अपने करी दिया टेक्स्ट करे करी दिया
08:31इसको इस मैन्यू के अंदर रखूगा मैं इस मोबाइल वीव को एक बार के लिए यहां से कट करो और इसको यहां पर मैन्यू के अंदर रख लो एक बार ठीक है और कंडिशन चेक करो यहां पर अपने पास क्या आ रहा है लेकिन वो हाइड हो रहे होंगे अब पीछे हाइ�
09:01यहां पर अपने पास इसका पैरेंट यह ए इसका पैरेंट अपने पास यह वाला डिव। मनेक्न
09:24एक अपने logo बना रखा है, एक search बना रखा है, एक अपने menu बना रखा है, एक अपने toggle बना रखा है, और ये जो अपने को यहाँ पर दिखाए दे रहा है, ये अपने positive है, ये किस के अंदर रखावा है, इसी div के अंदर रखावा है, ठीक है, ये वाला जो div है, इस div के अंदर �
09:54जैसे four एक बार shift करके देखो ठीक है टॉप से four shift कर देना इसको तो यहाँ पर अपने पास इस तरीके सारा लेकिन अपने से ना लेके
10:06तो तो फिर एक काम करो ना इसको absolute ही pass करो और कैसे दीखाई दे रहा हूँ एक बार चेक करो अब change करो इसको मैं यहाँ पर कहता हूँ कि
10:24करो zira पास कर देना ठीक है बाब से जिरो और लेफ्ट से zero है कि तो मैं इस पर क्लिक करूंगा इस तरीके से अपने पास ही आ रहे है लेफ्ट से zero नहीं हो गया यह
10:38कि इसको राइड ले जाओ ना
10:39राइट से कितना रखना है अपने को जीरो रखना है लेकिन इसमें वो अपना वो हाइड हो जाएगा अपने को हाइड नहीं करना तो एक काम करो फिर इसको टॉप से भी शिप्ट कर दो
10:54कितना शिप्ट करें अपने इसको यहां से मैं इसको चैक करता हूँ यह अपना डिव है इस डिव को ही यहां पर आओ और आपने यहां पर बोला
11:12ठीक है इस तरीके से भी अच्छा लग रहा है यह अपने इसको इस तरीके से कर देता है मैं यहां पर कहता हूँ कि आप इसको कितनी दे देना
11:3611 में कितनी जा रही है 11 में 2.75 ही जा रही है चेंज करो इसको यहां पर चेक करो कि किस पे कितनी जा रही है
11:44यहाँ पर 2REM है और यह 4REM 16 पर जा रही है तो 16 पर अपने इसको 4REM सेट कर रहते हैं ठीक है तो इस तरीके से अपने पास यह आ जाएगा
11:54परफेक्ट अच्छा लाग रहा है कोई दिखकत नहीं है सीच के अंदर तो यहाँ पर अपने क्या किया
12:00सिर्फ इसके उपर यह काम किया है अभी के लिए जैसे मैं इसको क्लोज कर रहा हूं तो यह अपने पास क्लोज हो रहा है अपना
12:06ठीक है
12:11इस पेस वाई करके दे रखा अपने यह आपर
12:30यह तो वाई डायरेक्शन का स्पेस दिया है अपने यह सही है और ठीक है
12:36थोड़ा सा इसमें मार्जिन पैडिंग इंक्रीज कर लो पी एक्स जो आपने करा है फूर ना करके अपन चेंज कर देते हैं इसको कर देते हैं और पी टी जो अपन ने दिया है
12:50इसको अपन यहां पर कहते हैं टूई रहने दो पी टी को तो और बॉटम को फो रहने दो इक बार के लिए चेक करूं क्या हो रहा है आप
12:58अब सही लग रहा है ए चीक एच तो जब इसको पर करस लेखे जाएंगे तो इस तरीकी से अपने को यह अपने आइटम दिख जाएंगे यह तो परने सिफ अपनी एक नया वार बनाई है यहां तक की चीच किलिए रहे तो इसको पर ने दे रखिये इसको अपर शेड़ोश
13:28एक्सेल कर देते हैं तो एक्सेल कर देंगे तो शेडव चेंज हो जाएगी इसकी तो एक्सेल करने पे थोड़ा सा लग दिख रहा है
13:39कि अपका है
13:51अचा वैजुन एसको थोड़ा सा यूऑ एक
13:53चेंज कर लेघर करता हूं तो वेट फूल में अपने पास इस तरीक दिखाई आपlee
14:00तो थो यह हूं कांट ट मितलने को इंटारीक एठ साथ टॉeg्ण
14:04तो इस तरी के अपने को नेक्स्ट क्या कर आगे क्या बनाना है अपना यहाँ पर hero वाला
14:17section यहाँ पर बना लेते हैं फिर उसके बाद आगे बढ़ेगे अंदर है इसमें तो कोई डाउट नहीं
14:28होगा यूप चलो ही डिवाला स 왜今व utan यहां पर इसक्षं क्रियाट करने वाला हूं अपना हमपने यहां बना में यहां पर जो
14:41नहींट करता हूं हुआ � webinar ॡॐ जह लगा देते हैं यहां पर ही तो को मैं यहां पर create करता हूं और
14:53पेज के उपर अपन क्या करते हैं अपने हीरो वाले सेक्शन को लगा देते हैं क्या नाम से बनाया अपने हीरो नाम से उसको यहां पर लगा दो बस यह काम अपने हापर किया है अगर मैं यहां पर इसको क्रिएट करूँ तो यहां पर अपने काम करते हैं इसको डिव ना लेक
15:23जाकते हैं यहां पर लेता हूं इक अपन यहां पर ले लेते आ उपना पहला डिफ ऐके और यहांप ले
15:33लृती ता दुल्त हगे टेवे लृत तो सीद जाते ही अपन और वेबसाPlusट यहांना लांता बसीससे घुड़शने और लिए टुड़
15:49जब्टो का आजाओंगे हमाँ जब्टो का देखो एक बार इसने हीरो सेक्षन कैसा बना रखा है
15:54हीरो सेक्षन इसने यहाँ पर सिर्फ यह दे रखा है पार्न कॉर्नर करके
16:00बीसिक सा है यह तो कुछ अलग प्या जाओ ब्लिंकिट के उपर आजाओ
16:05इंस्टा मार्ट भी तो आता अपने पास इंस्टा मार्ट करके अभी कैस अपने अपडेट कर रखा है इनको दिवाली का चल रहा है
16:26इनकी मोबाइल अलग है और यहाँ पर अलग है ठीक है कोई साभी एक उटा लो
16:41चलो पर नहीं कुछ भी लिख देते हैं यहाँ पर एच्वन टैग ले लेता हूं मैं इसमें लिख देता हूं
16:49ऑफास्ट ऑफास्ट टीलेवरी इह अपन कह दते हैं कोई वी एक मोजी लगा दो जिसे
17:00मोजी में हैं आप लगाजता हूं एक डॉकेट का फास्ट लेवडी फ्यक है एक अपने एच बंताग लिए जिसमें ऐस घ्लेवरी लिख दिया फिर उसके
17:07तो यहां पर इसको जल्दी से चेंज करते हैं पहले तो अपना ग्रेडियन लगा देते हैं
17:37कि gradient अपने को यहां पर दिखाए दे तो class लगा दो पहले तो मैंने class लगाई मैंने बुला
17:43bg और bg अपन यहां पर क्या लगाना चाहते है अपना gradient और two top नहीं two right करते पर अपन लगाते है ठीक है और वही from
17:54से त्व लगा देता हूं मैं from करता हूं from मैं अपन यहां पर कहाएते कि वही purple लगाना और purple में पर जैसे लगाया था वैसे लगा दो नाइव बार में इसना two hundred दिया था कि अपने
18:07जिसे फिर उसके बाद अपने इस पर लगा देता हूं और यहांपर इस gradient को लगा देता हूं।
18:25यह gradient पर लगा दिया कि यह gradient अपने को यहांपर शो होना चीह हैं।
18:32लगा देता हूं और इसके बाद जब मिडियम से उपर हो तब पनियापे लगा देना फ्लैक्स ठीक है आईटम यहाँ पर आंगे वह किसमें अपने सेंटर के अन्दर आने चाहिए और उसके अलावा जो पना justify
18:53बिट्विन है वो इसके उपर apply होना चाहिए मतलब दोनों जो div है उनके बीच में justify between रहना चाहिए ठीक है और उसके अलावा इसकी maximum width मैं यहाँ पर set कर देता हूं वही मैं तो यहाँ पर 7xl ही set करने वाला हूं ताकि उस हिसाब से
19:06रेस्पोंसीव आए ठीक है तो मैं यहाँ पर कहता हूं 7xl यहाँ पर 7xl इसकी maximum width कर देना और mx यहाँ पर आप क्या कर देना अपनी auto set कर देना ठीक है और एक अपन राउंडेड लगा देते हैं राउंडेड में अपन यहाँ पर कर देते हैं एक्सल कर देना इसको राउं�
19:36करके और यह content अपने पास left side का है और right side अपने क्या दिये अपनी image दिये है ठीक है perfect है अब देखो यहाँ पर इस div को मैं यहाँ पर arrange कर लेता हूं यह जो second div है तो इसकी जो width है अपने total width दिये यहाँ पर 7xl मतलब वह responsive रहनी चीए तो यहाँ पर यह वाला जो div है इस वाले
20:06जब वह अपने पास यहाँ पर किस से उपर रहे अपनी medium device से उपर रहे जब medium device से उपर है तब ही flex लग रहा है तो मैं यहाँ पर कहता हूं width को आप यहाँ पर क्या कर देना अपनी half कर देना यह काम कर देना और इसको भी यहाँ पर आप क्या करना इसको भी same काम कर देना ज
20:37कोई सिबीक इमीज लेलो यहां पर यहांपर सर्च कर लेते हैं पन ही रो समें lip
21:01ठीक है
21:04इतना मत सोचो कोई भी एक इमेज ले लिए वाली लेता हूं मैं यहां से ठीक है
21:21या फिर यह वाली और इसको मैं आपर करें तो कॉपी इमेज अड्रेस ठीक है और इस इमेज को पर लगा देते हैं इस चेके
21:29परफेक्ट तो वओ इमेज यहां पर आजानी चाहिए यह अपनी इमेज
21:35आरही है कर देता हूं कि ठीक है इस इमेज को भी मैं जाफर राउंडेट कर देता हूं ताकि थोड़ा सा अच्छा लगे अपने को
21:41तो एक काम करो, इसके उपर लगा दो, class name, मैंने यहाँ पर लगाई class name, यह जो image है, इस image को भी अपन set कर लेते हैं, पहला तो अपन कर देते हैं कि width आप full कर देना, क्योंकि हाफ करी है, half के अंदर full रहनी चाहिए इसकी width, और maximum width मैं आपर इसकी set कर देता हूँ, वो मैं आपर
22:11कहता हूँ, rounded, lg आप यहाँ पर set कर देना, इसके उपर, तो rounded, lg हो जाएगा, वो, lg में कम दिख रहा है, तो थोड़ा सा change कर लो, आप यहाँ पर कहता हूँ, तो 2xl में अपनी image कुछ इस सरीके से अपने को यहाँ पर show हो रही है, अब देखो, यहाँ पर fast delivery लिखा है, �
22:41यहाँ पर कहता हूँ, y direction में, और वो अपन कितने का लगा है, y direction में अब 4 का लगा देना, इक बार के लिए, perfect, अब यहाँ पर, इस h1 tag को यहाँ पर heading के रूप में convert कर लो, class stream लगा दो, इस h1 tag के उपर अपन क्या करेंगे, अपनी heading बनाना चाता है, तो मैं यहाँ पर कहत
23:11है, font को आप यहाँ पर कर दो, अपना bold, ठीक है, font को bold कर देना, और जो text है, उसको आप यहाँ पर gray color के अंदर 800 कर देना, क्योंकि अपन gray वाला combination यूज कर रहे है, तो यह fast delivery इस तरीके से लिखा वारा है, फिर उसके बाद अपने पास क्या है, यह content है, इस content को भी अपन थो
23:41अपने पास कर देना, चीक है, बटन है, बटन को जल्दी से customize कर देते है, मैं यहाँ पर class name देता हूँ, और class name देखे अपन कहा देते है, कि आप इस बटन को जो है, वो purple color दे देना, और purple के अंदर आप यहाँ पर इसको 500 पास कर देना, चीक है, तो बटन कुछ इस तरीके स
24:11700 कर देना, जब मैं इसके उपर cursor लेके जाऊं, चीक है, और भी अपन इसको कर देते है, उसके अलावा अपन इसको कर देते है, padding दे देते है, मैं यहाँ पर px set कर देता हूँ, जैसे 6 की देता हूँ, या 6 नहीं, 4 देख लेते है, जो भी अच्छी रहेगी, यहाँ पर आ�
24:41यह काम अपने किया, उसके अलावा अपन इसको कर देते है, कि आप इसको rounded भी कर देना, rounded और rounded में अपन कर देते है, LG कर देना, चीक है, rounded LG कर देना, तो यह अपने पास कुछ इस तरीके से आ रहा है, इसका जो text color है, वो भी change कर दो, यह पर पल में text color यह अच्छा नहीं ल�
25:11अच्छा नहीं लग रहा है, PY जो आपने लगा है, उसको 2 कर दो, और PX जो आपने लगा है, उसको अपन यहाँ पर कर देते है, अपना 4, ठीक है, बटन को थोड़ा सा चोटा कर दो, शॉपनाओ, ठीक है, तो यह शॉपनाओ का अपने पास button आ रहा है, इसमें margin लगा दो
25:41पर create करा है, हीरो वाले section को अपने यहाँ पर create करा, basic सा यह लिखा है, ठीक है, एक बार inspect करके देखो, responsive में क्या है, responsive में देखो, यह जो image है, वो थोड़ी सही नहीं आ रही, image को अपन यहाँ पर margin देते हैं, टॉप से, देखो, मैं यहाँ पर margin देता हूँ, इस image को, यह जो
26:11देते हैं, जैसे 8 की देता हूँ भी के लिए, लेकिन जब medium device से उपर की बात करें, तब margin top से आप इसको 0 ही रखना, ठीक है, इतना सा काम मैंने बोला, कि जब यह medium device से उपर है, तब इस तरीके से अपने को दिखाए देना चाहिए, perfect, तो यहाँ पर यह अपना arrange हो क्या रह
26:41देखो चेंज कर सकते हो, यूई का आप जो design है, वो change कर सकते हो, बाकि यूई के अंदर जो चीज़े मैं आपको बता रहा हूँ, जैसे अपने नयव बार बनाया, तो नयव बार के अंदर अपने दो-тीन चीजे लगा यह यहाँ पर, जैसे सर्च बार लगा यह तो सर्च �
27:11काट आइटम्स यहां पर दिखेंगे और यह जो अपना यूजर वाला है यहां पर अपनी प्रोफाइल सारी चीज़े यहां पर अपने को शो होगी तो यह चीज़े लगाना ज़रूरी है अब आप इनको कैसे भी अरेंज कर सकते हो अपनी हिसाब से जैसे अपने रेस्पोंस
27:41आपको दूसरा कलर यूज़ करना है वो यूज़ कर लो कि काम करो इस में डिवक्यों पर बॉर्डर भी लगा तो चल लगेगा वह
28:04बॉर्डर वन ठीक है तो इस तरीके से बॉर्डर वन बढ़ना करके टू लगा दो
28:11परफेक्ट तो यह अपने पास कुछ इस तरीके से अपना क्या बन गया यह हीरो वाला सेक्शन बन गया इसमें तो कोई डाउट नहीं होगा किसी को
28:20हाँ एलिमेंट्स आपको सेम रखने मैं आपसे कुछ अलग बना रहा हूं ठीक है हाँ आप अलग बनाओं में तो फंक्शनिटी यह देको मैं आपको पहले बता दू में फंक्शनिटी है में यह नहीं है चलो अपन एक कॉमन चीज और बना लेते हैं जो अपना फूटर होत
28:50तो नेक्स वीक में अपना जो यू आई है वो पुरा कंप्लीट बना लेंगे यह बार्डर को मल्टिपल टाइम यूज़ करने की जो अतनी पड़ती चाहिद इसमें बार्डर टू लिक होगे तो भी आ जाएगी उसके उपर ठीक है अब देखो यहां पर यह जो अपने बन
29:20फूटर हो गया फूटर कहां पर लगता है फूटर आपका लगता है अपर कोमन तो मैं यहां पर कहते हैं अपना फूटर ठीक है फूटर को अपन यहां पर लगा देते हैं फूटर का यूई बना लेते फिर अपना यह यह पार्ट कंप्लीट हो जाएगा अपना नैव बार
29:50वो अपन next class में बना लेंगे
29:52ठीक है तो यहाँ पर अपने अपना एक div लिया
29:56और इस div को अपन div ना लेके मैं आपर करता हूँ
29:59अपना footer क्योंकि footer tag होता है
30:02जैसे अपने nav tag लिया था
30:03तो यहाँ पर मैं लेता हूँ अपना footer
30:05और इस नंदर अपन एक div ले लेते हैं
30:07ठीक है इसके अदर मैंने एक div लिया
30:12dis footer के अपने एक div लिया है
30:14अब इस div के अपन यहाँ पर क्या करते हैं
30:17एक div मै तो अपन लगा देते हैं
30:18मतलब आपकी जो logo लगेगा वो लोगा देना
30:21एक div मैं यहाँ पर ले रहा हूँ जो अपना left side रखेंगे और एक अपन right side रखेंगे तो मैंने यहाँ पर echo div लिया इसमें अपन कहादेते हैं एक तो अपने पास क्या लग जाएगी आपकी image ठीक है एक अपन यहाँ पर कहादेते हैं एक काम आप paragraph tag कर लेना और उसमें lorem करके
30:51अपन यहाँ पर लगा देते हैं तो यह वाला तो डिव अपने पास यह हो गया एक डिव तो यह हो गया एक डिव लेलो पहले अपने structure बना लेते हैं ताकि सही रहे तो यहाँ पर echo div ले लेता हूं और इसके अंदर अपन एक history tag ले लेते हैं जिसमें मैं यहाँ पर कहता हू
31:21कौन कौन से थे होम अबाउट और contact और टाम सेंड कंडिशन जो भी अपने को दिखाना है बस अभी के लिए तो यहीं दिखा रहता हूं है ठीक है ओम अबाउट और यह सारी चीज़ जो है और इसके अंदर अपन ले लेते अपना link tag ठीक है उपर इंपोर्ट हो गया link tag नही
31:51इंपोर्ट हो चुका है ठीक है और मैं यहां पर कहता हूं हूं दूसरा अपन बना रहे है अपना बाउट वाला तीसरा अपन बना रहे हैं contact वाला टाम सेंड कंडिशन ठीक है इसको मैं आपर कहता हूं हूं इसको पन कहता है अपना अबाउट और इसको मैं आपर कहता हूं
32:21ठीक है इतने से link मैंने आप लगाय कि यह ये link अपने को दिखा देना जो link अपने को यह आपर दिखाने हैं परफेक्ट कोई दिक्कत नहीं है इस चीछ के अंदर
32:30उसके अलावा अपने को जो फोलो वाले आइकन दिखाने वो भी दिखा देंगे अभी के लिए पहले इसको थोड़ा सा यू आई को बनाते फिर अपना आगी देखते हैं वो भी लगा देंगे उसमें कोई बड़ी बात नहीं है ठीक है अब देखो यहां पर अपन जो में डि
33:00ही अपन अपना ग्रेडियंट लगाने के बाद इसकी जो फिर्ट है वो सारी चीज़े इस पर साइट कर लेते हैं पहला तो मैं इसको टॉप से मार्जिन दे देता हूं मार्जिन टॉप और टॉप से कितनी दे अपन इसको 16 दे देता हूं भी के लिए और उसके अलावा अ�
33:30देना इस दिव के उपर तो यहां पर एक बॉर्डर की रिये टो क्या दिए 400 ज्यादा लग रही है तो कम कर लो इसको कोई बड़ी बात नहीं है इसको अपन यहां पर कहते हैं तो इसको पर अपन लगाएंगे अपनी क्लास पहला तो मैं यहां पर इसको कहता हूं कि इसकी �
34:00एक्सल में सैट करते वारा हूं तो मैं 7 एक्सल ही सैट करूंगा इसकी भी ठीक है एक फिक्स वीड तब अबने यहां पर सैट कर दी और
34:07MX आप यहाँ पर लगा देना अपना Auto ठीक है और PX X direction में मैं यहाँ पर 6 की Padding लगा रहा हूँ और Y direction में यहाँ पर 10 की लगा देना और यहाँ पर Grid system में यहाँ पर लगाने वाला हूँ
34:22Grid क्यों लगा रहा हूँ कि मैं इसको जो divide करूँगा वो divide करूँगा यहाँ पर अपने responsive के हिसाब से मतलब जब वो यहाँ पर SM device से नीचे आए तब मैं यहाँ पर कह रहा हूँ कि आप इसको grid calls 1 के अंदर रखना जब वो यहाँ पर small device से उपर आए तब आप उसको यहाँ पर
34:52देना और सब के बीच में gap जो है वो आप यहाँ पर 10 का कर देना ठीक है इतना सा काम मैंने यहाँ पर इसको बोला तो देखो पहला यह हो गया दूसरा यह हो गया तीसरा जो column आएगा वो अपने पास आएगा अपना जो अपन लिंक यहाँ पर लगाना चाहते वो लगा दे
35:22यहाँ पर लगा देंगे एक डिवोल ले ले लेते हैं इसमें यहाँ पर कहते हैं यहाँ पर पहला डीविये दूसरा ही अब देखो यह आपने लिए ऑपने पास यहाँ पर एक ही है और उसके अंदर तीनों दिखाई दे रहे हैं जैसे आप उसको एसम से उपर लेके जाओ
35:52तो दो में डिवाइड हो गया जैसे आप उससे आगे जाओगे तो तीन में डिवाइड हो गया तो वह ऑटोमेटिकली यहां पर डिवाइड हो जाएगा ठीक है क्योंकि ग्रीड लगाए ग्रीड के बेसिस पर वह ऑटोमेटिकली डिवाइड हो रहा है अपना जल्दी से इसक
36:22तब अपन यहाँ पर इसको change कर देते और change करके मैं यहाँ पर कह unnecess का यहाँ ज आपकल कर देना 16 का
36:28और जब अपन medium device से उपर आए तब इसका जो gap है वो आप यहाँ पर कर देना जैसे 32 का
36:34ठीक है यह काम आप यहाँ पर कर देना और जो text है वो आप यहाँ पर gray color का दिखाई रहे हो उसमें कोई doubt ही नहीं है
36:40ठीक है इतना सा काम आप यहाँ पर कर देना तो यह आपको इस तरीके से दिखाई दे रहे है
36:46ऑटमेटिकली गैप जनरेट होगा ऑटमेटिकली चीज़ें हैं पर सैट होती रहेगी अपनी device की हिसाब से चलो बैस अपना आगया जाते यह अप पहला डिव है और इस पहले डिव की उपर अपने को यहाँ पर क्या करना है जो इमीज है वो अपने को यहाँ पर लगानी है �
37:16करो으्नषव ज данि इस्ट वाले फोल्डर में और क्या नामसे है logo लोगो डॉक पी एनजी पूतर लोगो हaine यहां पर लगा दो एस जगे लगाना है किस पर लगाना है तू इस जगे उसको लगा
37:33तो यह लोगों यहां पर अप्लाइब हो जागा शोप बैक करके जो अपने पास यहां पर है इसकी वेड़ राइट कर देते हैं पन मैं यहां पर आता हूं और
37:41सुख प्लाइब क्लास्स लिएम लगा दो सेम सैट कर दो जो आपने इस जेगे लगाई थी और क्या सेट चरी
37:47है हइड 28 और विल्ट और कर द take these two it don't me aGL करता हूं कि हाइट को आप 28 कर देना ोब्स को आप यहां पर क्या
37:56कर देना अपना ओटो सेट कर देना ठीक है तो यहां पर इस तरीके से आपका यह आ जाएगा अब देखो यहां पर अपने हाइट करी और इसको मैं एक काम करता हूं
38:08पर दो कोसे साथ हैं वहीं आपने अहां पर टेख अपनेके
38:23उसके अंदर यहां पर क्या लिए करके अपने अपने लिंक विंख भी साथ करते हैं यहां पर आता हूं इसको उपन कर लेता हूँ इसके � apoy को
38:36अब देखो यहां पर एस ट्री टैग लिए इसके उपर अपन क्लास्टीम लगा देते हो तो यहां पर एक बार के लिए एल जी कर देना फॉन्ट को आप यहां पर कर देना अपना बोल नहीं करके सैमी बोल थोड़ा सा कम हाइलाइट और मार्जिन बॉटम अपने यहां पर 3 क
39:06में यहाँ पर classijm लगा दता हूं और मैं यहाँ पर कहता हूं कि आप space करदे ना और space
39:10y direction के अंदर ही अपन करते इसको set और में यहाँ पर कहता हूं कि आप 2 का set करदे
39:16चीक है और जो text आने वाले जितने भी list item के उनको sm रखना आप small device के
39:22साथ से तो यहां पर यह इस तरीका से से हुगे अब यह जो लिंक है इंस लिंग का अइटम के ऊपर क्लास लगाता हूं हो और यहां पर का हैं
39:34कि जब मैं इसके उपर क्या करूँ, होवर करूँ तब आप इसको टेक्स्ट का कलर जो है, वो आप यहाँ पर परपल कर देना और परपल के अंदर यहाँ पर 500 कर देना इसके उपर, चीक है, इतना सा काम आप यहाँ पर कर देना इसके उपर, तो देखो यहाँ पर जैसे आप
40:05तो semi-bold हुआ अब
40:08तक काम करेंगिो स्वावाइज सेन लगानों अगैंगे Lights
40:27ऊहरा जुब सेन मेल को हुआएज मेंब
40:33लगा दी हो about contact terms and condition ठीक है फिर उसके बाद अपने यहाँ पर अपना यह वाला काम complete होता है फिर आपने यहाँ पर क्या लिया है अपना
40:43follow us करके लिया है तो इसके उपर भी जो quick link आपने लिया है वही same class इसके उपर भी लगा दो यह लो इसको मैं लाता हूँ copy
40:52कोपी करके अपन यहाँ पर आते और इसके अंदर जो यह एस ट्री टैग लिया है इस ट्री टैग के उपर सेम क्लास लगा दो ताकि वह यूवाई सेम सा लगे तो यहाँ पर देखो
41:01करके अपने पास यहाँ लिखा हुआ रहा है अब इसके अंदर अपने को क्या करना है जो एस ट्री टैग लिया है इस ट्री टैग के अंदर अपन यहाँ पर दिखाने वाले अपने जो भी आपको फोलो करवाने है जैसे facebook हो गया आपने जो भी चीच हो गई तो वही अपन �
41:31आइकन के उपर वही मैं याँ पर यूज़ कर रहा हूँ और एक तो ले लो Facebook का यह रहा Facebook आइकन
41:42इंपोर्ट कर लो फार सीरीज ही ले लेता हूँ मत वह सब्जेश के पिर जो सीरीज अपन लेके आ रहे हैं वही ले ले लेता है ठीक है एक तो Facebook का ले लो एक Instagram का ले
41:53ले लो वाटसब का ले लो और ट्विटर का ले लो बहुत सारे अपने पाल से शुशल मेडिया अभी के लिए तो कोई से भी ले लो मैं आपर कहता हूं एक तो फेस्बूक दे देना एक आप यहां पर इंस्टा दे देना आपका
42:03अबर किंसथे लिए हैं इसको बैहां रॉचाओ कर लेता हूं और यहां पर लगादो टी में जो टीटर ले लूँ
42:19कि उन्स में को ट्वीटर यहां यह ना टीटर कर क्या रहा है इसको का पी कर लो और यहां
42:31तो मैं आपर कहता हूँ वाट्सअप चीक है यहाँ पर आ जाओ और इन सबको लगा दो पहला अपने क्या लिया पहला अपने लिया फार फेस्बुक सेम ऐसे ही एक ओर लिंक टैग लगा दू दूसरा अपने क्या लिया अपना
42:59फार इंस्टाग्राम एक ओर अपना जो लिंक टैग है लगा दू और क्या लिया अपने फार ट्वीटर और यहाँ पर आओ और एक ओर अपना लिंक टैग लगा दू और यहाँ पर लिख दो अपना फार वाट्सअप
43:25चेक करो यहां पर आके तो यहां पर फेसबुक इंस्टाबर यह आपको आपके जो शोशल मीडिया वाले वह सारे आपको यहां पर दिखाई दे रहे हैं
43:35अब देखो यहां पर एक दिक्कत यह है यह सारे एक लाइन में से आ रहे मैं इनको वैसे ऐसे ना दिखा के एक साथ उस तरीके से अपने को यहां पर शो होने चाहिए लाइन भाई लाइन तो एक काम करो यह जो सारे लिंक लिए इसको कनवर्ट कर दो और यहां पर एक डिव �
44:05पर कौन से लगाएंगे अपनी flex
44:07flex लगाते एक line में आ जाएंगे
44:12देखो यहाँ पर आगे
44:13एक line में आगे
44:14ठीक है उसके बाद
44:16अपने यहाँ पर कह देते हैं
44:18space कर देता हूं मैं और y direction में
44:21और अपने यहाँ पर देते हैं
44:222 का
44:23ठीक है और y y y नहीं
44:26एक्स करो क्योंकि x direction में करना है
44:28सबके बीच में spacing करनी है तो x कर यहाँ पर
44:31यूज लेंगे पर फिर उसके बाद
44:33मैं यहाँ पर कहता हूं कि
44:34text को आप यहाँ पर कर दो अपना
44:36excel करके देख लो एक बार excel में कितना
44:38बड़ा text होने वाला है
44:39perfect है excel आ अपने पास
44:42उसके लावा अगर आप यहाँ पर देखोगे
44:45to excel ज़्यादा बड़ा हो जाएगा मेरे इसाब से
44:51to excel भी अच्छा लग रहा है
44:53to excel कर दो यहाँ पर
44:54अब आपने यह link tag लिया
44:56इस link tag के उपर भी class लगा दो
44:58hover के उपर text को change कर दो
45:00तो facebook है facebook का कैसे होता
45:02ब्ल्यू कलर तो मैं यहाँ पर करता हूँ कि
45:04जब मैं इसके उपर hover करूँ जब मैं इसके उपर
45:06hover करूँ तो इसका च्छू text है
45:08वो आप यहाँ पर blue कलर का कर देना
45:11और blue में आप 700 कर देना
45:13चीक है यह instagram है
45:15instagram का भी change कर दो आप यहाँ पर बोलेगे
45:17एक 6 दो क्लास्ने जब मैं इसके उपर क्या करूँ?
45:20जब मैं इसके उपर hover करूँ तो
45:22text का color आप यहाँ पर क्या कर देना?
45:23text का color आप red सा कर देना कुछ
45:26500 में और यह twitter है तो
45:30टेक्स्ट
45:31hover के करवाना है तो hover की कर वाओ इसको
45:34hover की उपर
45:35पर चूँ text का color है
45:37वो आप यहां पर क्या करते ना ब्लू होता है इसका ब्लू में आप यहां पर इसका 600 करते ना और यह अपने पास क्या वाट्सप और जब मैं स्क्यूप पर क्या करूँ होवर तो इसका जो टैक्स का कलर है वह आप यहां पर क्या करते ना ग्रीन और ग्रीन में 500 ठीक है तो हो
46:07content
46:26य्यलायट
46:29और इस डिव में हहाँ यहाँ पर क्या कहाता हूं
46:32जो भी अपने को COPYRIGHT वाला लगाना है वो अपन COPYRIGHT वाला लगा लगा लाएं
46:35कॉपी राइट वाला एक बार लोगों ले लेते हैं सिम्बल
46:37कॉपी राइट सिम्बल
46:47कर लो यहीं से कॉपी
46:51ठीक है इस डिव के अंदर में लिख देता हूं कॉपी राइट वाला कॉपी नहीं हुआ
46:59यहा पर अपन अपनी काल देते हैं जो भी डेट अपने पर
47:09इस आईगी निडेट करके निकाल देता हूं में ब आपणने
47:14देट चाहते हां था था आपक्टि करते हाँ यहाँ पर पॉल ये कर देने छिए
47:21तो फुलियर यहां पर प्रिंट हो क्या जाना चीए क्योंकि अपन रियक्ट पढ़ रहे हैं तो रियक्ट के थूँ यह काम कर सकते हैं यहां पर देख लिखा वा रहा है अपने पास अधर है टूटाउजन ट्वेंटी फाइफ चीक है और यहां पर लिख दो कॉपी राइट �
47:51दिवान शुजर इस तरह कीज लिखा वा रहा है अपने बास अब दो इसको भी थोड़ा सा मैं यहां पर चेंज कर देता हूं टेक्स को सेंटर में ले आओ कुछ नहीं करना आपको यहां पर अपनी क्लास लगानी है पहला तो मैं यहां पर करता हूं कि टेक्स को आप यहां
48:21इस तरीके से आपके पास यहां पर आजाएगा कॉपिराइट वाला एक काम करो इसके पर टॉप से बॉर्डर लगा दो ताकि अपने पास अपनी होरिजोंटली लाइन क्रीट हुई हुई भी दिखे
48:29मैं कहा देता हूं बॉर्डर बॉर्डर टॉप से यहां पर सेट कर देना और जो बॉर्डर है उसका जो कलर है वो अपन यहां पर कहा देते हैं ग्रे कलर के अंदर आप यहां पर 400 सेट कर देना ठीक है यह बॉर्डर का कलर सेट कर देना ताकि बॉर्डर उसके उपर दिखा
48:59तो यह अपने है है यहां पर यह पर क्या बनाया यह आपने एक बनाया और यहां पर इतना इतना इतना स्पेस किस चीच का रहा है
49:21चेक करो इस पीस इतना किस चीच का रहा है यहां पर आओ इमीज है इमीज पर आपने हाइट ट्वंटी एट लगाई इसको ट्वंटी एट ना करके एक बार के लिए
49:3124 करो ज्यादा चुछा हो जाएगा वो 28 ही रखो मार्जिन बॉटम लगा रखी कि अपने इसको अटाओ
49:51कि थीक है अगल यहां तक कि चीच के लिए रहाएं तूर्ग है के यहां तक की चीच के लिए रहा है
49:56और आज already
50:03एंड कॉपी लिखो सर, अच्छा ऐसा लिखना है गया, कैसे भी लिख लो ये तो वेबसाइट का काम है, किसी से कॉपी कर लो, जैसे मैं यहाँ पर आता हूँ, सब पर लिखा हुआ रहता है तो,
50:16जैप्टो, मार्केट पैस, प्राइवेट लिमिटेड, ये लिख रहा है तो, ये लिख दो, देवान चुजर का नाम अच्छा भी नहीं लग रहा है, वैसे भी जैप्टो मतलिको यहाँ पर, यहाँ पर लिखो,
50:46छोप बैक करके ना अपने पास, छोप बैक क्या नाम था, भैक, छोप बैक, यह लो वही,
51:05ठीक है, तो ये अपने अपना एक नवबार बनाया, नवबार के बाद अपने यहाँ पर जो create करा, वो अपने यहाँ पर create करा, अपना
51:12एपना Hero section और यह अपना footer section आपन यहां पर अपना
51:16Contact वाला section भी एयड करते हैं थाकिया आपन
51:20Contact वाला section भी एक करना जरूरी है Contact को अपन ने
51:23Miss कर देया है यहां पर दोगैंज आपerson condition यह सारे section अपन
51:29पर दिखा रहे तो अपन कॉंटेक्ट वाला सेक्षिन भी यहां पर दिखा देते हैं अपना जो अपनी नेवार अपने बनाई है इसी के अंदर अपन यहां पर दिखा देते हैं तो यह काम करो यहां पर आओ और सर्च कर लो क्या क्या सर्च करना पड़ेगा आपको रियक्ट
51:59का कॉंटक्ट में कौन-कौन सार रहे अपने बाद सपोर्ट के होंगे
52:11यह वाला हो गया जैसे क्वैरी वाला अगर आप यहां पर सर्च करते हैं अपने व्यरी
52:18ठीक है तो क्वैरी में यह क्या बता रहा है आपको ऐसा तो कुछ खास नहीं बता रहा है
52:24कॉन्टेक्ट
52:29यह ले लो यह भी अच्छा है कॉन्टेक्ट वाला ही है यह भी इसको पूरे को इंपोर्ट करना पड़ेगा कि कुछ नहीं है यह तो यहां पर आके इसको इंपोर्ट करो नहीं बार के उपर
52:47जी आर कॉन्टेक्ट करके और इसको लगा दो यह आपका मैन्यू
53:03कि एपने यहां पर क्या लिए कैल श्odore आ रहे है दूसरा आ पक के पास कॉंटेक्ट वाला दिखा दो फिर कार्ट वाला दिखा दो यहां पर यह घुppe दि précis came साब
53:17यह जो लिया है इने
53:25करते करके कर दो यहाँ पर यहां पर यहां पर यह
53:38तो इसी में आ जाओ हूं और इसी की कॉपी कर लेता हूं मैं
53:53यहां पर भी अगर आप आइकन लगाना चाहों तो आइकन दिखा सकते हूं ठीक है
53:56यहां तक की चीज सभी को किलियर होगी इसमें तो कोई डाउट नहीं होगा
54:09वीम करें कि सर मेरी कुछ क्लासेज मिस हो गई है तो आप डेली मोशन के उपर जाके उसको कंटिन्यू कर सकते हो जो भी क्लास आपकी में से हुई है
54:17ंडय क्मिनिटी में आपको अपडेट दिया जाता क्लास तो आप
54:39अपनी नेक्स क्लास होगी मंडे को सेटेडे संडिए आपका उफ्र है थे तो जितनीवी ख्लास आपकी euros
54:46तो उन classes को complete करना क्योंकि project का सिर्फ अभी अपन UI बना रहे है next week तक अपन अपना पूरा complete UI ready कर लेंगे
54:54फिर उसके बाद सिर्फ अपने को अपनी functionality लगानी रहेगी तो अपना ये project complete होने वाला है
55:00shop bag का logo चीए ये आपको कहां से मिलेगा ये मिलेगा आपको जो अपना github का repo है वहाँ पर जाके आपको ये जो है मिल जाएगा
55:10ठीक है मैं आज का code भी upload कर देता हूं ताकि आपको कोई दिक्कत ना आए
55:18आपको जो अपना github की repository आपको प्रोवाइड करकी वहाँ पर मिल जाएगा
55:27image आपको वही मिल जाएगी जो github repository है
55:42मैं यहां आता हूं और आपको एक काम करता हूं यहां पर आओ यहां पर आओ यहां पर आओ
55:51github repo आपको सबको प्रोवाइड कर रखी अगर आपको पताओ तो
56:02इसको copy कर लो इसको use कर लो यहां पर दे रखी यह बने
56:23image send कर दो sir image send कर देते कोई बात नहीं yellow यहां पर
56:33downloads में आओ इसी में था अपना yellow मैंने तीनो images यहां पर क्या करी ओपन तैन उसके
56:40बाद share यहां से download कर लो आप इसको तुरन जल्दी से जिसको भी download करनी हो एक बड़
56:45दाउनलोड कर लो यहां से images यहां पर शो और यह वाइट बैक्राउंड की विज़े से शो नहीं हो पा रही है यहां से download कर लो आप
57:00कि या बात हो गई एंजली
57:06का
57:06किसी को कोई डाउट नहीं तो आज की class अपन इतनी रखते फिर मिलेंगे अपनी next class के इंदर ठीक है
57:27कि यहां बात है