📖 Today’s Class: Building Contact, Cart & Other Functional Sections 📅 Skillwaala’s Free Full Stack Web Development Course

Name: 📖 Today’s Class: Building Contact, Cart & Other Functional Sections 📅 Skillwaala’s Free Full Stack Web Development Course
Uploaded: 2025-10-14T06:28:41+00:00
Duration: 54 min 23 s
Channel: skillwaala

skillwaala

2 days ago

🎯 Today’s Learning Outcomes
By the end of today’s class, students will be able to:
✅ Create and design a Contact Section with a working form layout
✅ Build a fully responsive Cart Page UI connected with frontend state
✅ Add and style other key sections (like About / Services / Testimonials)
✅ Understand component reusability and props-based data handling
✅ Practice responsive layouts using Tailwind’s grid and flex utilities

Category

📚

Learning

Transcript

Display full video transcript

00:00गुड इवनिंग शेगल तानिया वायाकर लीफा अर्जून और इस्ट्वेंट्स जितने भी अपने क्लास जोईन करें

00:10एक बार सब रैस्पॉंस कर दो कि मेरी वाइस क्लियर है और डिस्प्ले भी आपको क्लियर विसीबल है

00:25गुड इवनिंग प्रेरीत

00:27गुड इवनिंग राजेंद्र

00:31ठीक है तो देखवा आज अपन आगे डिस्कस करते हैं अपने प्रोजेक्ट के अंदर जितना अपने कंप्लीट कर लिया था उसी में आगे डिस्कस करते हैं

00:43अपने अपना जो UI है वो अपन बना रहते हैं ठीक है उस UI को अपन आगे देखते हैं अपने VS Code के उपर और एक बार के लिए अपन

00:54Frontend पे ही काम करें तो अपन Frontend को ही देख लेते हैं File then Open Folder जिस Folder पे अपन काम करें तो इसी पर बना जाते हैं

01:01अपने क्या नाम से बनाया था अपने project का project class करके अब इसके अंदर अपने पास एक backend है एक अपने पास अपने पास अपना

01:09Frontend है अपन अभी सिफ Frontend UI पे काम कर रहे तो एक बार Frontend UI को ही अपने एक बार run कर लेते हैं

01:14कि इसको क्लोज कर दो यहां पर सीडी करके अपन किस पर आ जाते हैं अपने फ्रंटेंड के उपर और मैं यहां पर इसको रन कर लेता हूं एंपीएम रन देव करके यह अपने पास अपना फ्रंटेंड यहां पर रन हो जाएगा

01:27frent hand को अपन रन कर लेते हैं यहां पर आके localhost, 5173, यह इह, इसको यहां पर अपन रन कर लेते हैं

01:42तो अपने अपना एक नावबार बनाया था, अपने hero section बनाया है, अपने यहां पर अपना footer section बनाया है

01:48अब अपन यहाँ पर अपने कुछ products दिखा देते हैं अभी के लिए, फिर उसके बाद अपने इसको आगे continue बलेंगे, तो यहाँ पर अपने कुछ products दिखा देते हैं, मतलब अपने एक product card बना लेते हैं, फिर उसके बाद अपने इसमें आगे जलेंगे, ठीक है, तो चलो, अ�

02:18प्रोडक् के अपने पास क्या होगा यहीं पर बना लो पर यहां पर बनाने वाले हैं जिसके अंदर अपने प्रोडक्ट की

02:39इमेज आनी चीए, टाइटल आना चीए, डिस्क्रिप्शन आना चीए, उसकी प्राइज आनी चीए, बस ये बेसिक चीजे आपन उसके अंदर दिखा देते हैं, चीक है, तो अपन प्रोडक्ट का एक कार्ड बना लेते हैं जल्दी से, वो अपन यहां पर दिखाते थे इस प

03:09यहां पर जो Maxim Width रखनी है, वो ही 7XL अपन पास करते वारते हैं, तो 7XL में इसको दे देता हूँ,

03:14MX आप यहां पर क्या कर देना, Auto कर देना, और Padding आप लगा देना, Y Direction के अंदर 10 की, और उसके अलावा P, जो अपने पास है Padding, वो अपन X Direction में लगा देते हैं, अपनी 6 की, चीक है, तो यह अपने Main Div लिया है अपना, अब इसके अंदर अपन अपन जो सारे चीजे दिखा

03:44कुछ भी यहां पर लगा दो, जैसे आपन कहते हैं, कोई Fire वाला यह लगा दो, चीक है, प्रोडक्स करके अपन यहां पर कहते हैं, और इस component को मैं यहां पर render करवा देता हूं कहां पर, Home Page के अंदर, Hero के नीचे ही अपन किसको render करवा देते हैं, अपने product वाला जो आपने अ�

04:14product वाले के उपर आजाओ, और यहां पर उस UI को ready कर लो, यह अपने एक क्या लिया है, as to tag, जिसमें अपने products दिखा दिया, और एक div मैं यहां पर ले लेता हूं, और इस div के अंदर ही अपन क्या करेंगे, अपने, जो भी card अपन बनाना चाहते हैं, वो card अपन यहां पर बना �

04:44calls 2 अपने पास यहां पर रहना चाहिए, टीक है, grid calls 2 कब रहेगा, जब वो यहां पर अपने पास SM device से नीचे है, लेकिन अगर वो SM से उपर आता है, तब अपन कहा देते हैं, कि आपको यहां पर grid जो है, वो calls 3 दिखाना है, और अगर वो MD से उपर आता है, तब मैं यहां प

05:14यह लिखा है अपना, ताकि इसके अंदर इस main div, इसके अंदर जितने भी अपने पास अपने card बनेंगे, वो सारे card अपने पास यहां पर क्या रहेंगे, responsive रहेंगे हर device के हिसाप से, टीक है, तो इसके अंदर मैं यहां पर एक ओर div ले लेता हूँ, और इस div के अंदर अपन

05:44shadow जो आप create करोगे, वो आप यहां पर SM create कर देना, टीक है, rounded कर देना, rounded के अंदर अपन यहां पर कर देता है, LG कर देना, padding अपन लगा देता है, all direction से 4 की, टीक है, और उसके अलावा जब मैं hover करूँ, तब आप यहां पर जो shadow है, उसको आप यहां पर कर देना, excel, टीक है, hover क

06:14अब इस card के अंदर अपने को क्या कर लेनी है, images ले लो, एक तो image अपन यहां पर दिखाने वाले है, जो image यहां पर आ जाएगी अपनी, ठीक है, उसके अलावा एक अपन यहां पर ले लेते हैं, अपना heading के लिए, मतलब अपना description, title होगा, उसके लिए s3 tag ले लेता हूँ, �

06:44अपन यहां पर कह रहे, यहां पर कह रहे थे तो coffee, यह अपना product है, s3 tag देके मैं यहां पर कह रही है, एक paragraph tag देके यहां पर आपन कहा देते हैं, लॉर M10 का content ले देना, जिसके अंदर अपन यहां पर दिखा देंगे क्या अपना, जो description होगा, वो description में यहां पर दिखा दू

07:14बटन और इस बटन के उपर अपन क्या करेंगे, इस बटन के उपर लिखेंगे हैं, अपन add to cart,

07:18तो कुछ इस तरीके से आपको यहाँ पर आपका दिखाई दे रहा है अब देखो

07:46तो यहां पर अपने यह क्या लिया है, आपका यहां पर टाइटल हो गया है, यह description हो गया है, यह प्राइज हो गई, और यह अपने पास क्या हो गया, add to card का अपने पास यह इस तरीके से है, अब आपने एक काम करते हैं, अब multiple card बनाने से अच्छा अपने एक काम करते हैं, इस

08:16झाल झाल

08:46ठीक है, तो यहाँ पर आपन आते हैं, क्या कि आपने, अब देखो, यहाँ पर इतने सारे कार्ड अपन बनाएंगे, इस्से बढ़िया मैं यहाँ पर एकम करता हूं, मैं यहाँ पर एक array ले रहा हूं, ठीक है, और array के अंदर मैंने के दिया, 1, 2, 3, 4, 5, 6, 7, 8, ठीक है, इस array

09:16यह यह जो काड वाला डिव है इस शूर नियुक्ट manner ऐसके में उंसक्राइब करें चलाै और अची में cœur ऑने पास कर दिया थो आथ यह पने आफने पास बन क्या रहें क्या तो अब फान

09:30अपन पूरा UI नहीं बना रहे क्योंकि बैकेंड का काम हो नहीं रहा इसलिए मैं यहाँ पर इसको चाह कर रहा हूं एक एरे की उपर मैप चला दिया अपने जिसके अंदर आठ अपने पास क्या है अपने

09:39एलिमेंट से उसके बेजिस पर यहाँ पर मैप चल जाएगा तो अटोमेटिकली वह प्रिंट हो किया जाएगा ठीक है अब इमेज अपन लगा देते हैं कॉफी को इसी भी इमेज लगा दो अभी के लिए क्योंकि अपन इसको कंप्लीट रैस्पोंसी भी बनाने वाले तो मैं

10:09दो यह इमेज अपनी वहाँ पर लग जानी चाहिए अगर आप देखोगी तो सब के उपर इमेज आ रही है वह कॉफी वाली अपन इसको जल्दी से रैस्पोंसीव बनाते है यहाँ पर जो इमेज है इस इमेज को बनाता हूँ पहले रैस्पोंसीव तो इसके उपर मैं ल�

10:39आपने 32 सेट कर दी अब image सही नहीं आ रही तो इसका भी अपन सॉलुशन कर देते हैं इसको मैं यहापर करता हूं कि object contain के साफ से करते हैं

10:47मतलब जितनी height है उसे साफ से इसको fit कर देना तो contain के साफ से fit हो क्या रही है image या तो दूसरी select कर लो

10:55जैसे यह image ले लो copy image address को कर लो क्योंकि वह image अपने पास अपनी जो आ रही है वह article आ रही है तो मैं इस image को लगाता हूं और check करता हूं ठीक है तो यह image इस तरीके से अपने पास यहाँ पर आ रही है अब उसके अलावा अपन इसके उपर rounded भी लगा देते हैं एक काम करता हूं

11:25अपने पास कौन-कौन से images है सिर्फ लोगो image अपने पास है ना एक कोई दूसरी image देखो जो पूरी complete फिट हो क्या जाए इसमें

11:42इसको लेता हूं मैं यहाँ पर copy image address कर लेते हैं यहाँ पर आ जाओ और अभी के लिए तो यहीं से कर रहे हैं कोई कि अपन इमेज जो है अपनी back end से अपना पूरा process चलेगा तो automatically वहाँ पर upload होगी वह अपन जब upload कराएंगे तब upload होगी वह ठीक है तो इस तरीके से अपने

12:12अब्जेक्ट कवर करो एक बार चिक है कवर करते देखो पूरा परफेक्ट आ रही है में जबनी उसके अलावा यह अपने पास क्या है अपना title हो गया चिक है यह क्या हो गया title तो title को भी change कर दो जल्दी से यहाँ पर आते है और title को भी change कर देते है

12:34यह अपने लगाई class और आपने लगाई class और class लगा कि मैं यहाँ पर कहता हूं एक तो margin टॉप से टूकी कर देना आप टूकी टूकी टॉप से मार्जिन कर देना उसके अलावा

12:46फोन्ट जो है वह आप यहाँ पर set कर देना इसका medium ठीक है फोन को medium कर देना और text को जो है वह आप यहाँ पर gray color के अंदर आप यहाँ पर जैसे 700 कुछ भी set कर दो भी के लिए 700 तो इस तरीके से आपके पास यहाँ पर इसका title आजागा कि कॉफी कॉफी कॉफी कॉफी ठीक ह

13:16नॉर्मल ठीक है नॉर्मल नॉर्मल कर देते हैं पर नॉर्मल हो जाना चाहिए और उसके अलावा टेक्स्ट जो है उसको आप यहाँ पर gray color के अंदर 400 कर देना थोड़ा कम ही highlight दिखना चाहिए ठीक है तो इस तरीके से 400 ना करके थोड़ा सा और चींज कर लो आप 400 ना देक

13:46लाज देते हैं लोकल सिर्फ एप इसको मैं आपर करते हैं टकस्ट को आप यहाँ पर कर देना अपना पर ठीक है तो अब हम देखोगे तो

14:0856 प्राइज अपने बाद इस तरीके से आ रही है फिर एक टुकाट का एक बटन है एक बटन यहां पर

14:13क्रिएट कर दो इसके उपर आपके लगाऊगे अपनी क्लास में यहां पर लगाई और इसको मैं कहते देता हूं कि विट ता आप यहां पर

14:20प्लावा मार्जिंट भी लगा देते हैं यहाँ पर यहां पर एपलाइग कर दी और जो पैडिंग है वह उपने पास जी नीड़ी नहीं

14:47और मैं यहां पर इसको कहता हूं कि आप इसको Rounded B कर देना चेक करें क्या बना आपने पास तो कुछ इस तरीके सा

14:54टू काट अपने पास यहां पर लिखावा रहा है परफेक्ट अब अपने को यहां पर क्या करना है प्राइस को चेंज कर सकते हो परपल ना दे के जैसे ग्रीन देता हूं मैं प्राइस को क्योंकि वह सेम सा हो गया अपर यहां पर प्राइस को ग्रीन देता हूं ठीक है अब य

15:24कर से लिएक तो यह अपने आपने कार्ड बनाए अपना अपना टेक्स में पर कहतेता हूं क्लास लगा तो

15:45और यहां पर अपन क्या देते हैं, टेक्स्ट को आप यहां पर क्या कर देना, अपना 2XL कर दो या तो, टेक्स्ट 2XL कर देना, फोंट को आप यहां पर अपना semi bold कर देना, टेक्स्ट अपन यहां पर क्या देते हैं, कि आप ब्लेक ना करके अपन यहां पर क्या देते हैं, ज

16:15ग्रेयर 700 और इतना सा काम करके देखो क्या हो रहा है आपके यह products इससे margin देदो इसको bottom से यह जो s2 tag है इसको मैं margin bottom से assign कर देता हूं और वो अपने देखे 6 की ठीक है तो यह products अपने पास यहां पर लिखा भार रहा है perfect और इसके अंदर आपको यह सारे आपके products यहां पर दि�

16:45यह medium device से उपर जब जा रहा है तो यहां पर 4 ना दिखा के अपन जैसे 6 दिखा देते हैं थोड़े छूटे हो जाएंगे तो अच्छे लगेंगे वो ठीक है तो 6 card यहां पर इस तरीके से अपने को दिखाई दे रहे है perfect तो यह products अपने पास इस तरीके से आ गया और responsive है या

17:15SM से नीचे SM से उपर तीन ठीक है और SM से नीचे दो ही तो दे रहे है grid calls spelling mistake दिख दिख दिख दिख दिख दिख दिख लिकिन यह SM से नीचे एक मिनट यहां पर कुछ दिक्कत हो रही है फिर यहां पर 6 मत दो यहां पर यहां पर पास तो इसको

17:45यहां तीन हो गए यहां पर पांच हो गए कोई दिक्कत नहीं है लेकिन यह SM से नीचे आने पर सिंगल क्यों नहीं करता है दो में कैसे नहीं करता है

18:15ग्रेड अपनने लगाया SQ पर और

18:26करता है

18:47करता है

18:51करता है

18:56कि दो में डिवाइड होना चीए था ना हूँ

19:12कि सिंगल ही आ रहा है अब भी

19:18अब्जेक्ट कवर की वेज़े से तुनी हो रहा है वैसा इमीज की वेज़े से ऐसा कुछ

19:22होगा नहीं क्योंकि अपने जो अपना वो लगाया है उसकी वज़े से तो नहीं होगा

19:34ठीक है चलो इसको देखते हैं यह क्या इश्यू है यहां तक की चीज समझ भाई है आप सभी को

19:38सर दिवाली वाले प्रोडक्स होने चीए कोई बात नहीं वो अपन बैकेंड का काम करेंगे तब दिवाली वाले प्रोडक्स लगा देंगे यहां तक की चीज के लिए रहे तो एक बार बताओ कि यह सर के लिए रहे

20:08अपने काम करते हैं यहां पर इस प्रोडक्स से पहले यहां पर अपने केटेगरी का सेक्शन दिखा देते हैं केटेगरी का सेक्शन बेसिकली क्या होगा जैसे आपने

20:36आपने को यहां पर करना है

21:06तो जल्दी से ये काम भी कर लेते हैं

21:09क्या करना पड़ेगा उसके लिए

21:10यहाँ पर अपन आते हैं

21:11और अपन एक

21:14यहाँ पर

21:16products अपने पास आ रहा है ठीक है

21:18और pages

21:18ठीक है category का एक page ही बना लेते हैं

21:25अपन यहाँ पर मैं कहता हूँ

21:26कि मेरे पास यहाँ पर

21:28जो अपना

21:29category है

21:32ठीक है वो मैं यहाँ पर कह रहा हूँ

21:34कि मेरे को यहाँ पर category.jsx

21:37करके एक

21:37component बनाना है और यहाँ पर अपने इसको

21:40create करा RFC करके ठीक है

21:42अब एक अपन यहाँ पर data बना लेते हैं

21:44जिसके अंदर अपन जो दिखाएंगे

21:46वो data रहेगा और यहाँ पर

21:48मैं icon use करने वाला हूँ हर एक category के लिए

21:50तो उन icons को अपन यहाँ पर

21:52set कर देते हैं ताकि अपनी category यहाँ पर

21:54easily बन सके हैं तो मैं

21:56यहाँ पर एक अपने पास

21:58area of object बना देते हैं जिसके अंदर

22:00सारा data अपन assign कर देते हैं जल्दी से

22:02तो मैं यहाँ पर कहता हूँ

22:04categories ठीक है

22:10categories का अपन एक area of object बना रहे

22:12जिसके अंदर पहली जो field होगी

22:14वो मैं यहाँ पर name कर रहा हूँ

22:15name अपन यहाँ पर पहला तो अपन कह रहेते हैं all

22:17जिसके अंदर सारा data अपने पास आएगा

22:19और उसके लिए जो मैं icon use करने वाला हूँ

22:22वो icon मैं यहाँ पर बना दूँगा भी

22:23ठीक है icon जो अपन यूज करने वाले

22:26वो अपन यहाँ पर

22:27अपना all के लिए तो shopping का कोई icon अपन यूज कर लेते हैं

22:30जैसे यहाँ पर अगर आप देखोगे तो इसने देखो यहाँ पर एक

22:32card का icon दे रखा है तो वह react icons अपन यूज कर रहे हैं तो मैं यहाँ पर आ जाता हूँ

22:36अपने react icons के उपर और यहाँ पर आके अपन सर्च कर लेते हैं अपना

22:42shopping का ही कोई icon मिल जाएगा अपने को

22:45देखो यहाँ पर बहुत सारे shopping के icon आ रहे हैं कोई भी एक अच्छा सा जो आपको लग रहा है वो एक shopping icon आप यहाँ पर ले लो

22:54जैसे मैं यह ले लेता हूँ ठीक है इसको मैंने यहाँ पर क्या किया copy और इसको यहाँ पर आके कर लो आप import ठीक है और इसको मैं

23:06यहाँ पर लगा देता हूँ अपने shopping वाले icon को कौन सा है आपका fast shopping icon यह आइकन मैंने यहाँ पर लगा दिया सेम ऐसे ही अपन डेटा बनाते वे चलते है अपना अब देखो मैं इसको ही copy paste कर लेता हूँ

23:17अब देखो यहाँ पर पहला अपने all लिया है दूसरी category अपन यहाँ पर क्या लेना चाते हैं यहाँ पर देखते वे चलो cafe home toys तो मैं यहाँ पर कहते हूँ

23:38बсятा पन्वें और 25 तो मैं यहाँ पर 2 थां की अपने पास अपना केथे रहेगा और विखार यहां पर करते हूं

23:47यहां पर मैं यहां तीक मैं पर स्टाइब ऑपन होड़ ओंख फिर उसके बाद

23:56एपने पास यहां पर ओर कया है कि रख closely हगे दिखलो फाहिश लेक्र ऋमोबाल ब्वूटी ठीक है तो मैं यहां पर करता हूँ

24:07तो थ Sister तक है और य। एलेक्रोनिक्स

24:10और फिर अपने पास मॉबाइल और ब्यूटी मॉबाइल लिख देते और एक ब्यूटी का और कॉपी कर लेते जल्दी से

24:25ठीक है अगर कुछ रहे भी आएगी तो अपने एरे उफ अब्चेक्ट को बढ़ा करेंगे तो अटोमेटिकली वो भी आ जाएगा आपने पास ठीक है वो तो अपन जो कैटेगरी स्टूर कराएंगे वो ही कैटेगरी अपने को यहाँ पर फिल्टर होके आनी चीए मतलब बैक

24:55कि यह रहा यह ले लता हूंम है इस कि भूष कर लो यहां पर आजओ यहां पर आ जाओ यहां पर आजओ यहां पर लगा दो दूसरा और क्या लेनाफको यह आपको कैफे के अलबा और क्या था हुँम होम कई कर लो होम का तो डाै Dirie aham ही सार्च करल अगाया है

25:25सकते हो अगर अलग-अलग होगी तो अलग-अलग पिर अलग-अलग अलग

25:27लेनी पड़ीगी अपने को उसके

25:29अलवा और क्या है आपके पास यहां पर

25:31और है आपके पास

25:33Toys चीके है

25:34तो Toys के लिए यहां पर

25:37अपन कहते है कोई Game

25:38Game करके आ रहा है

25:41तो यहाँ पर इस game को ले लेता हूं

25:42इसको भी import कर लो

25:48यह तो fast series थी तो इसको आप यहाँ पर भी ले सकते हूं

25:52अलग से import ना करके

25:53series अगर same है तो यहीं पर ले सकते हूं

25:57fast 6 की series same है तो यहाँ जे ले सकते हूं

26:00उसके अलावा next अपने पास क्या है next check तो करो

26:03फिर है अपने पास अपना fresh तो fresh के लिए भी कुछ ले लो

26:08fresh के लिए भी मैं आप लगा दता हूं

26:10fresh के लिए अपन जैसे कोई apple का icon हूं तो apple का ले लो

26:14यह रहा ठीक है को इसा भी ले लो अपने पास fresh के लिए लेना अपने को तो

26:18यह ले लो यह best है

26:21copy

26:24तो और भी था अपने पास यह वाला अच्छा लग रहा है यह लो फिल हुआ वाई यह तो यह अच्छा लगेगा इसमें आप color भी change कर सकते हो इनके अगर color change करना चाहो तो यहाँ पर आओ और यहाँ पर आके अपने इसको import कर लेते हैं फिर उसके बाद आपके पास यहाँ

26:54यह ले लेता हूं मैं तो far laptop करके जो आ रहा है ठीक है इसको copy कर लो और far series है तो यहीं पर ले लो इसको तो

27:03ठीक है फिर उसके बाद अपने पास क्या है mobile और beauty चल्दी से mobile भी search कर लो यहाँ पर

27:10mobile यह रहा far series है far mobile करके इसको भी यहाँ से copy कर लो और यहाँ पर लगा तो इसको ठीक है फिर उसके बाद next अपने पास यहाँ पर क्या है next क्या था beauty beauty से

27:29related beauty ही सर्च कर लो आ जाएगा beauty से रिलेटेड़ नो आइकन पांड लिप्स्टिक

27:48नहीं तो और क्या हो सकता है नेल्स नहीं

27:59कि आल करके लोगे तो भी नहीं आब है अपने पास यह पर यह रहाना यह लेलो यह तुब

28:09लग रहा है इसको इंपोर्ट कर लो ठीक है और इसको यहां पर लगा दो आज हो यहां से कट करो और यहां रगव इसको सारा

28:21तो इसको लगा दो है भुए होम करके।

28:40लगा दो जल्दीसे जो जो आइकन लिए वह लगा दो है अटर।

28:45फिर उसके बाद तोईस के लिए अपने फाग घ्म्ध करके लिया

28:49तो इसको लगा दो यहाँ पर अपन लगा देते हैं अपना इसको टॉइस वाले को मैं हाँ पर कहता हूँ

28:55फाग फिर उसके बाद फ्रेश के लिए आपने यहाँ पर लिया है आपका यह अपल वाला जी आई ठीक है तो इसको लगा दो

29:06जी आई शाइनी एपल फिर उसके बाद एलेक्ट्रोनिक्स के लिए आपने लैप्टोप लिया है तो मैं यहाँ पर कहते हूं अपना लैप्टोप

29:18और फा लेप टोप है क्या है यह दो फिर उसके

29:23बाद मोबाइल है मोबाइल के लिए अपने फा मोबाइल करके लिए है तो उसके

29:31लिए यहाँ पर करता हूं चीरम अपने सिर्थ बनाया है यह मैंने क्यों

29:44इसको कभी भी अबडेट कर सकते हैं, फ्यूचर में अगर अबडेट करना हो उस हिसाब से अपने अपना अरे ओबडेक्ट बना है, ताकि अपने को कोड में ज्यादा चेंजेश ना करने पड़े हैं, अब यह डिव ले रखा है, इस डिव के अंदर ही अपन यह जो कैटेगर

30:14यहां पर लगा नहीं आपको तो यहां पर लगा देते अपना MX Auto ठीक है और उसके अलावा जो X Direction है उसके अंदर में यहां पर 4 की Padding भी पास कर देता हूँ

30:29फिर उसके बाद इसी के अंदर अपने एक और अपना Div ले रखा है और उस Div के अंदर अपन यहां पर लगा देते अपनी Classes क्योंकि अपने को सबको एक लाइन में दिखाना है तो अपन यहां पर लगा देते अपना Flex की एक लाइन में आने चीए सारे

30:41संटर एक और जो ऑर फलो है ऐक्स दिवाइसमें यहां पर कर देना ओवर्फलय एक्स ओटो अंदर एकस उछोटी डिवाइस के इंदर 10 गश्रौल में यह जू चला का देते

31:07यहां पर map चला देते हैं

31:09मैप चलाया मैप पर इस तरीके से create करते हैं

31:11आपने react के अंदर और यहां पर अपने पास तही आती है

31:15एक तो क्या आती है आपके पास

31:17एक index और एक value तो first पर

31:19अपने पास क्या रही है अपनी index

31:23च्वारी तो दूने चीज़ आप निकाल लो हो और यहाँ पर आपन बना देते अपना जिसके अंदर अपने को परिंट करवाना है वह मैं तो यहां पर मैं टेल ले लेटा मैं

31:34यहाँ पर एक div ले लो और इस div के अंदर आपको एकॉर यहा लेना है

31:40दो div ले रहा हूं पहले में अपन आइकन प्रि�ate करवाएंगे दूसरे में यहाँ पर अपना

31:45पहले div में मैं कह देता हूं कि यह जो cat है उसमें

31:48है उसमें डॉट करके अपने पास क्या हो क्या रहा है अपना आइकन आ रहा होगा और जो सेकंड है इसमें अपने पास कर देंगे अपनी

32:04index एतना सा काम कर रहा है अपने category का और इस category आपने

32:09असे प्रॉडक्ट के अंदर एह जो अपना प्रॉडडक्त के अंदर में

32:14event काउन को एता हूं तक्यों आपने यहां पर उसको

32:17यूज़े कर सके तो यहांडे से पहले ही मैं उस category वाले

32:23component को यहां पर लगा देता हूं अगर आप यहां पर आके चेक करोगे तो कैसा आपको दिख रहा है आके चेक करो यह आपके सारा इस तरीके से

32:31categories आ रही है अब देखो यहां पर इसको अपन कस्टमाईज कर लेते जल्दी से category वाले को थोड़ा सा

32:39यूए अपन इनहेंच कर लेते हैं अब देखो यहां पर आपनी जुडिव ली आयए इस डियू के उपर अपनी heo यहां पर पैडिंग मार्जिन जो भी एपने को लगानी वह लगा क कि अपने साही कर लिते ताकि अपना यूव वहां पर अच्छा देखें तो यह जू डिव

33:09आपको कैसे साइट करना है उसको कॉल के साप से आप यहां पर साइट कर देना फ्लैक्स कॉल अपन यहां पर कह रहें आइटम से यहां पर अपन कह रहें कि आप यहां पर क्या कर देना सेंटर में मिनिमम विड्ट जब वो यहां पर किस से आए 80 पिक्सल मिनिमम विड्ट मैं �

33:39और color जो आप देना चाहते हो

33:41वो आप यहाँ पर क्या कर देना

33:43gray color

33:46ठीक है

33:46और gray में अपन इसको pass कर देते हैं

33:49जैसे 800

33:49hover के उपर जो text है वो change कर दूँ

33:53hover के उपर text जो है

33:54उसका जो color है वो

33:57अपन यहाँ पर देते हैं जैसे

33:58purple color चल रहा था अपना

34:01तो purple और purple में 500

34:03ठीक है

34:05इतना सा काम आप इसके उपर कर देना

34:07जब hover करूँ ठीक है

34:08और जो hover है उसके उपर

34:10जो अपना cursor है उसको भी आप यहाँ पर change कर देना

34:13cursor जो है

34:15वो अपने पास यहाँ पर कौन सा आना ची

34:17अपना pointer आना ची है

34:18यह काम करके देखो इसके उपर

34:20तो देखो यह अपने इस तरीके से arrange हो के आगे

34:22थोड़ा सा hover changes कर लेते है

34:24यह जो div आ रहा है

34:25इस div के उपर भी मैं आपर class लगा देता हूँ

34:27जिसके अंदर अपन यहाँ पर क्या दिखा रहा है अपने icon

34:29ठीक है

34:30तो यहाँ पर अपन लगा देते अपनी class

34:31text को मैं आपर कहता हूँ कि

34:33आप यहाँ पर to excel कर देना text को

34:36और उसके अलावा margin bottom

34:38आप यहाँ पर one की set कर देना

34:39इस icon के उपर

34:40ठीक है

34:41तो यह अपने icon से इस तरीके से बड़ी दिखाई देंगे

34:44अब इसके नीचे जो text आ रहा है

34:46उसको भी अपन यहाँ पर सबको center में कर देते हैं

34:48बस मैं आप class name लगा देता हूँ

34:50और मैं आपर कहता हूँ

34:50text को आप यहाँ पर क्या कर देना

34:52अपना center में कर देना

34:53तो वो text मेरे पास यहाँ पर center में आ जाना चाहिए

34:57तो यहाँ पर आके check करोगे

35:00तो इस तरीके से आपको यहाँ पर आपके

35:02यह categories आपको यहाँ पर दिखाए देरी है

35:04inspect करके एक बार check करो

35:06inspect में क्या हो रहा है

35:07inspect में वो scroll वाला effect इसके अंदर आ रहा है

35:10perfect inspect भी सही चल रहा है आपका

35:14ठीक है

35:16वो scroll effect अपने पास यहाँ पर इस तरीके से दिखा रहा है

35:18और यहाँ पर अगर आप click कर रहे हो तो यह आपकी नयव बार होगी

35:22एक काम करो इसकी width फुल कर दो एक बार

35:27width और width में आपर कहता हूँ कि आप इसकी width क्या कर दो

35:32फुल कर दो

35:32ठीक है

35:36यहाँ तक की चीज़ सो clear ही होगी मेरे हिसाब से

35:39अपने कुछ ही नहीं किया

35:40सिर्फ अपने एक arrow of object बनाया

35:42जिसके अंदर icons लगा दिये सारे और उसका name लिग दिया

35:45ताकि अपन यहाँ पर इनको इस तरीके से create कर सके

35:48इसलिए मैंने वो यहाँ पर काम किया था

35:50जैसे अगर आप वहाँ पर देखोंगे

35:52जैप्टों पर तो उसने भी same as I कर रखा था

35:54ठीक है

35:56अपन बिल्कुल same D बना रहे हैं लेकिन

35:58अपन सारी functionality यहाँ पर लगा सके

36:00अपने front end, back end वाली वो सारा काम अपन

36:02यहाँ पर कर रहे हैं ठीक है

36:04तो यह अपना जो category वाला section है

36:06वो अपना यहाँ पर complete हो चुका है

36:08जिसमें अपन यहाँ पर अपनी क्या दिखा रहे है

36:10category अपन यहाँ पर दिखा रहे है

36:11यहाँ तक की चीज clear है तो एक बार comment करके बताओ

36:16कि यहाँ तक की चीज clear है

36:18बिल्कुल अच्छे से

36:34दिसमें थिए्ट वां यहाँ थाब के तक की तक

36:51क्याँड़क्य करीche

37:00अब देखो यहां तक का तो सही है अब और

37:20पालए क्वैरी ओन पर नहीं है कार्ट बचावा और लॉगली से पन

37:27एक वाला चाहिए और उस फॉर्म के अंदर आपन क्या दिखाएंगे जोभी क्वेरी वो यूजर दे इस किसी भी चीज से रेटेट प्रोडक्स से रेटेट तो वा एड्मीन के पास आनी चाहिए इसके उपर क्लिक करते क्वेरी फॉर्म आना चाहिए मतलब तो अपन एक पी�

37:57क्लिक करें से अअधर आफ डिक तो और यहां पर इक अपना आर। काई डू पात आप यहां पर कर दो एना चाहिए ज हमना चाहिए पने जिसको करों करें जो आपका क्वेरी वाला कमपनेंट है उसको यहां पर पास कर दो

38:24परफेक्ट गब आना चाए जब नेव बार के अंदर जो अपना वह दिख रहा है कौन सा

38:30कवेरी वाला टिक है कहां पर है ये सो मों गया ये तो में अक्छा चैक लिए यहां पर आप च्छारोग तो

38:40तो home हो गया, इस पे click करते हैं, तो कहाँ पर आजाना चाहिए, वो home पर आजाना चाहिए, ठीक है, तो यहाँ पर अपन अपना to लगाते हैं, और to में मैं कहा देता हूँ, किस पर आजाना चाहिए, slash home के उपर, second अपन यहाँ पर क्या दे रहें, second यहाँ पर यह अपना query वाल

39:10इस पर click करता है, तो two पर अपन यहाँ पर कहाँ पर बेज़ेंगे, अपने home page के उपर, और यह जो second contact वाला है, इसमें अपन कहते है, two पर आप यहाँ पर कहाँ पर बेज़ेना, उसको slash query के उपर, ठीक है, यह काम अपने यहाँ पर करा, नयो बार पर करना था यह काम, जैस

39:40इसके पीछे hide हो रहा है, अपने को, वो query form अपन यहाँ पर create कर लेते है, ठीक है, तो वो query वाला form बनाना है, form लेना है, label लगाना है, input लगाना है, query में क्या होता है,

40:06उसकी email id होती है, उसका name होता है, उसका password होता है, email id होती है, और name होता है, और उसकी जो query होती है, वो होती है, ठीक है, क्योंकि अपन registration login नहीं बना रहे हैं अपना, अपन सिर्फ query वाला बना रहे है, तो यहाँ पर अपन इस query को generate कर लेते हैं, जल्दी से, यहाँ पर में ल�

40:36margin top से मैं यहाँ पर कहता हूँ 24 की, क्योंकि वो उपर अपनी जो नेवार आ रही हो, से space हो रहा है, तो उसको हटाने के लिए, padding मैं लगाता हूँ 6 की all directions से, और जो इसका bg है, वो आप यहाँ पर क्या कर देना, white कर देना, और rounded आप यहाँ पर क्या कर देना, इसको excel कर देन

41:06पर अपना यहां काम किया, ठीक है, तो यह जो डील है, इस मैं अपनी सारी चीज लगा दी, अब यहा पर अपन मैं ले लेते है, eck HTML टैक,

41:15लिए टाइग में अपन यहां पर करते है क्वेरी फॉर्म करने को यहां पर दिखाई देखा है

41:35अब उसके बाद अपने को यहां पर क्या करना एक अपन यहां पर अपना वहां टैग लेंगे जाने करने वह जरूरी है

41:43तो यहाँ पर अपने एक लेबल ले लेते हैं और लेबल में अपन कहते है यहाँ पर आपको अपना नीम देना है और इसके लिए जो इंपुट लेना चाहते हूँ आप ले लो यहाँ पर क्या अपना टेक्स्ट इंपुट टेक्स्ट अपने यहाँ पर ले लेते हैं इसके ल

42:13आपकी email क्या है और उसके लिए जो अपने को यहाँ पर क्या लेना है

42:17अपना input वो अपन यहाँ पर क्या ले लेता है अपना email वाला ही ले लेता हूँ

42:22email वाला अपने पास आता है तो यहाँ पर input email अपन यहाँ पर ले लेता है

42:26तो यहाँ पर उसको क्या देनी है अपनी email id देनी है

42:29फिर उसके बाद अपन record label ले ले लेते हैं

42:32जिसमें वो यहाँ पर query देने वाला है

42:34तो यहाँ पर record label ले लो

42:36और उसमें यहाँ पर कह देते है your query

42:38कि आपकी query क्या है

42:44और उसके बाद अपन यहां पर ले लेते हैं अपना text area

42:48मैंने यहां पर अपना text area ले ले लिए क्योंकि कित्ती भी length हो सकती है

42:52अपने कुछ नहीं पता उसके बारे में

42:53अब इसको जल्दी चे UI को set करो

42:55आपने एक form लिया, एक s2 tag लिया

42:59पहले एक s2 tag के उपर इसको highlight करके इसको center में कर दो है

43:02s2 tag को ठीक है तो मैं यहां पर इस s2 tag के उपर लगा देता हूं

43:05class मैं यहां पर कहता हूं कि text आप यहां पर to excel कर देना इसका

43:10text to excel कर देना font को आप यहां पर अपना बोल कर देना क्योंकि form का है

43:17और उसके अलावा जो text है वो आप यहां पर purple color के अंदर 500 के उपर set कर देना

43:23ठीक है और margin bottom से अपन यहां पर 4 की दे देते है और text को आप यहां पर center में कर देना

43:29यह काम कर देना आप किस के उपर? इस query form नाम के text के उपर

43:34तो यह अपना center में आ जाएगा

43:35परफेक्ट फिर उसके बाद आपको यहां पर form ले रखा है form के उपर अपने का क्लास नहीं लगानी

43:41अपने label के उपर अपनी class लगा देते एक label में लगा देते हो बागी पर copy paste कर देंगे

43:45क्योंकि सबको सहीं भी बिनाना है अपने label को

43:47तो यहाँ पर अपन कहा देते हैं

43:49इस label की उपर मैंने class लगाई

43:51और इसको जो है आप पहला तो block कर देना

43:54ठीक है पहला तो block कर देना

43:56क्योंकि in line है अपने पास

43:57तो मैं यह कह रहा हूँ कि आप इसको

43:59label को block कर देना

44:01जो इसका text है वो आप यहाँ पर

44:03gray color के अंदर वोई 700 यूज़ कर रहे

44:05तो 700 कर देना और

44:07font को आप यहाँ पर medium पर

44:09set कर देना ठीक है और

44:11उसके अलावा सब पर margin बॉटम

44:13से one की set कर देना यह मैंने

44:15पहले label के उपर करा है यो name

44:17अपने पास इस तरह किस लिखा हूँ आ रहा है

44:18यही same अपन किस पर लगा देते हैं

44:21यही सारी classes अपन copy कर लेते हैं

44:24यह सारी classes में

44:25जितने भी label आ रहे हैं उन सब पर अपन लगा देते हैं

44:27second label यह है

44:28और third label अपने पास यह है

44:31तो तीनों जो label है उनके उपर

44:33अपने यह लगा दिया यो name, यो email, यो query

44:36फिर उसके बाद अपने पास क्या रहे है

44:38अपने input आ रहे है तो input को भी अपन यहाँ पर

44:40जल्दी से design कर लेते हैं

44:42एक को कर देता हूँ बाकी को तो copy paste करना है

44:44तो मैं यहाँ पर लगा देता हूँ अपना class name

44:46मैंने यहाँ पर क्या लगा अपना class name

44:48चीक है

44:49और सबसे पहले तो मैं कहता हूँ कि width full कर देना इस input की

44:53ठीक है पहला काम width full कर देना

44:55दूसरा आप इसके अंदर padding लगाओ

44:57x direction के अंदर 4 की

44:58और padding लगाओ y direction के अंदर 2 की

45:01ठीक है उसके अलावा

45:03जो border है वो आप यहाँ पर

45:05set कर देना कैसे color की

45:06gray color की और gray में अपन यहाँ पर कहता है

45:08जैसे 200

45:09200 तो बहुत कम हो जाएगी मेरे साब से

45:13शोई नहीं होगी

45:14अपन कहता है

45:16300 आप यहाँ पर इसकी border set करते ना

45:19border जब भी लगाते तो पहले border तो लिखो

45:21border show कैसे होगी

45:23पहला border लिखना पड़ेगा

45:27फिर border gray

45:27तो यहाँ पर border इस तरीके से

45:30create होके आ रही है

45:31second काम अपने यहाँ पर border gray कर दिया

45:34border को rounded भी कर दो

45:35मैं यहाँ पर कहता हूँ कि आप border को

45:37rounded भी कर दो

45:38तो वो rounded हो किया जाएगी अपने पास border

45:40उसके अलावा जब मैं इसके उपर

45:43focus करू तो focus के उपर

45:45उसकी जो outline है उसको आप यहाँ पर run

45:48वो none कर देना क्योंकि अपन इसके उपर

45:50अपनी ring create करने वाले रिंग अच्छे लगती है

45:53जैसे अपने उस पर सर्च बार पर create करी थी तो

45:56मैं यहाँ पर कहता हूँ कि रिंग और रिंग जो create

45:59करेंगे वह करेंगे और focus के उपर जो ring का color है वह पन यहाँ पर

46:04सैट कर देते हैं मैं इहाँ पर कहता हूँ कि उसका जो color है ठीक है जो ring है

46:08उस रिंग का color अपन यहाँ पर देते हैं बीजी को लिक्ट रहे है और

46:14और रिंग में जो भी आपको कलर चिये वोपन यहाँ पर कहते पर पल और परपल में 500 का

46:18अड़र आप इस पह कर देना ठीक है ये इस तरीके से आरहा आप जैसे इस पर क्लिक करूगे तो इस तरीके साовал किसके पर रिंग की लिए टूग

46:40के उपर लगा दो यहां तो इन पूर्ट नहीं है अपना टेक्स एरिया यह लो तीनों के उपर सीम लग जानी चाहिए तो आप यहां पर देखोंगे क्वेरी फॉर्म यह नीम यह इमेल यह क्वेरी इस तरीके अपने पास यहां पर आ रहा है इनके उपर प्लेस ओल्डर भी �

47:10ठीक है एंटर यो नेम फिर उसके बाद सेकिंड के सीच का है इमेल तो यहां पर आपन कहा देते हैं अपना वही प्लेस ओल्डर मैंने आप लगा प्लेस ओल्डर और यहां पर आपन कहा देते हैं एंटर यो इमेल ठीक है फिर उसके बाद टेक्स एरिया टेक्स एरिया भी �

47:40तो यह place order आ जाएंगे सब में enter your email enter your query ठीक है अब कुछ चीज मिसिंग है इसके अंदर और वो क्या है बटन बटन तो बनाए नहीं आपने

47:57इसको तो इसमें बटन बना दो जल्दी से बटन बना देते टेक्स एरिया के बाद ही मैं यहां पर क्या लेदा हूं एक बटन ठीक है और इस बटन को अपने हां पर कह देते हैं सब्मिट क्वेरी

48:10और इस पर जल्दी से क्लास लगा लेते हैं क्लास नहीं विट आप यहां पर क्या कर देना इसकी फुल कर देना पहला गाम तो विट फुल कर देना दूसरा जो इसका बीजी है वो आप यहां पर परपल के अंदर 500 कर देना जब होर करू तब उसका जो बीजी है वो आप पर

48:40पर क्या करते हैं आपना वाइट कर देना टेक्स अपने पास वाइट दिखना चाहिए आ उंडेट तो आपको करना ही है तो आप यहाँ पर कर देना इसको चीच है चेक करो क्या बन किया आपका बटन

48:49परफेक्ट, margin top से लगा दता हूं, मैं आपर जैसे, top से 3 की margin लगा दता है, और इसके उपर मैं padding लगा दता हूं, py करके, क्योंकि y direction में padding लगा दता हूं, तो यहाँ पर 3 की अपन लगा दता है, चेक करें बटन क्या बन गया है, submit query, 3 ज्यादा लग रही है padding, तो 2 कर दो उसको

49:19submit वाला एक बटन, ठीक है, तो यह अपन ने क्या किया यहाँ पर, तो यहाँ पर तुरंट हो रहा है, तो transition लगा दो इसके उपर बटन पर, ताकि वो over वाला काम यहाँ पर, तुरंट ना हूँ,

49:36transition, ठीक है, यहाँ तक की चीज़ समझवाई, यह अपने query वाला बनाए, यह अपना home हो गया,

50:02home पे click करते home पे, query पे click करते query form के उपर आगे, जहाँ पर अपना query form अपन यहाँ पर दिखा रहे है, shadow कम लग रही है,

50:08तो shadow को increase कर लो यहाँ तो, shadow आपने यहाँ पर क्या दिया है, excel दिया है, ठीक है, ओके,

50:15और इसका जो बीजी है, वो white पना करके आप यहाँ पर gray रखो, 200, ठीक है, तो इस तरीके से आपको यहाँ पर आपका form दिखा देगा, query form, यह अपना query form है, यह अपना home वाला section अपर नहीं यहाँ पर दिखाया है, ठीक है, तो इस तरीके से यह हो गया,

50:45LG रखो, shadow कम रखो तोड़ी, ठीक है, यहाँ तक की चीज समझ वहीं, आप सभी को, यहाँ तक की चीज के लिए रहे, तो एक बार comment करके बताओ, कि असर यहाँ तक की चीज के लिए रहे, यह अपने home बना है, यह अपने contact बना है, अब अपने को cart बनाना है अपना, और यहा

51:15products अपने को सी category के हिसाब से दिखनी चाहिए, और यहाँ पर अपना title भी change होना चाहिए, product की जगे, जो भी अपने को category आ रही है, जैसे cafe, ठीक है, जैसे home आ रहा है, toys आ रहा है, fresh आ रहा है, electronics आ जो भी category आ रही है, वो category यहाँ पर print होके आनी चाहिए, उसके अलावा, search पे �

51:45की चीज़ के लिए रहे, इसमें कोई doubt नहीं है किसी को, अंजली करें सर अलग अलग components होंगे ना बाद में, router का use करेंगे, उसके हिसाब से, router का तो use करी रहे है, पन react router, dom, jows का use तो करी रहे है, आगे चीज़े change हो सकती है,

52:14जैसे अपन project बनाएंगे, क्योंकि project जैसे आगे बढ़ता जाएगा, वैसे वैसे चीज़े बदलती जाएगी, ठीक है, बसे एक बार अपन UI बना लें, क्योंकि UI के based अपन यहाँ पर इसके उपर functionality लगा सकते है, पहले अपन किलियर तो रहे कि अपने को काम क्या करना है, त

52:44इस पर जो भी back end के through response आ रहा है, वो अपने को दिखाना है, क्या product अपने को delete करवाना है, ठीक है, यहाँ तक के चीज़ के लिए रहे हैं आप सभी को,

53:02कोई doubt किसी को, अगर आपके doubt है तो आप doubt mention कर सकते हो, और यह आपको code मिलेगा, github के उपर, जो अपना github का repo है, ठीक है, उस repo के उपर आपको, यह complete code मिल जाएगा, class का, वहाँ से आप access कर सकते हो,

53:26ठीक है, आज की class में इतना ही, मिलेंगे फिर अपन कल वाली class में, आगे की चीज़ों पर discuss करने के लिए, आगे अपने project को complete करने के लिए,

53:36attendance के point 1 और point 2 में आपको बता देता हूँ, attendance के point 1 में आपको mention करना है, जो अपने अपना पहला component मनाया था, product वाला, तो आपको product mention करना है point 1 के अंदर, ठीक है, और point 2 के अंदर आपको mention करना है,

53:53क्या mention करना है, query, ठीक है, पहले में mention करना है, आपको product और point 2 के अंदर mention करना है, आपको query, यही attendance के point 1 और point 2 है,

54:15product और query, ठीक है, कोई doubt नहीं किसी को,