📖 Today’s Class: Building Login, Registration & Admin Panel (Frontend UI) 📅 Skillwaala’s Free Full Stack Web Development Course

Name: 📖 Today’s Class: Building Login, Registration & Admin Panel (Frontend UI) 📅 Skillwaala’s Free Full Stack Web Development Course
Uploaded: 2025-10-15T04:41:52+00:00
Duration: 37 min 17 s
Channel: skillwaala

skillwaala

3 months ago

🎯 Today’s Learning Outcomes
By the end of today’s class, students will be able to:
✅ Design a Login Page with proper input fields and responsive layout
✅ Build a Registration Page with complete form structure and validation design
✅ Start creating the Admin Panel UI structure with sidebar and dashboard layout
✅ Understand how to manage UI navigation and routing between user and admin pages
✅ Apply Tailwind CSS utilities to build responsive and modern UI elements

Category

📚

Learning

Transcript

Display full video transcript

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

00:07ठीक है अब सिस्टम दूसरा है तो अपने को एक बार के लिए

00:12एक निट गाइस

00:30ठीक है अपना अपने वियस कोड के उपर आजाते फाइल

00:33वर जीस फोल्डर पर पान काम कर रह उसी पहारा शाय ना बार के लिए

00:37और अपना कौन सा फॉल्डर था अपने पास ये वाला ही फॉल्डर था तो एक बार के लिए अपने को अपने प्रोजेक्ट को लेना पड़ेगा इसके अंदर

00:49ठीक है अपने क्या नावन से बनाया था अपने प्रोजेक्ट ये अपने पास ये और ये इसमें नहीं है में भी है ना

01:09कर दो

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

01:51इसको एक बार ओपन कर लेता हूं

02:21अपने यहां पर प्रोजेक्ट क्लास वाले फोल्डर के उपर और इसको अपने यहां पर अपने फ्रेंट एंड को ओपन कर लेते हैं

02:31ठीक है तो CD करके मैं किस मैं जाता हूँ,

02:35git bash के उपर आजाओ पर ले तो अपने,

02:37git bash के उपर आके अपन यहां पर open कर लेते हैं,

02:40CD करके मैं आजाता हूँ अपने front end के उपर,

02:43फिर उसके बाद अपने इसको run कर लेते हैं,

02:45npm run, div,

02:49ठीक है,

02:50ठीक है, नया project है तो वापस से setup करना पड़ेगा,

02:58npm install command चला दो एक बार के लिए, जल्दी से,

03:13अगर voice का issue आ रहा है तो आप फिर से एक बार response कर दो,

03:16voice का issue आ रहा है तो,

03:20break हो रही है,

03:27अभी भी break हो रही है,

03:45clear है sir,

03:46एक बार सब response कर दो,

03:48जितने भी students अपने class में हैं,

03:50वो response कर दो,

03:51क्योंकि अगर एक इंसान के break हो रही है,

03:53और बाकी सब के clear आ रही है,

03:57तो फिर,

03:58शुरू में मैंने कुछ बोला नहीं था,

03:59शुरू में बिल्कुल silent था मैं,

04:01इसलिए आवाज नहीं आ रही होगी,

04:02लेकिन अब नहीं आना चाहिए,

04:04वैसे issue, voice वाला,

04:07क्योंकि system ही दूसरा है,

04:08तो issue आना ही नहीं चाहिए,

04:18अभी clear है,

04:19तो देखो यहाँ पर अपने वापस से setup करना पड़ेगा,

04:30एक बार मैं setup कर लेता हूँ,

04:31फिर अपन continue करते हैं,

04:33जो project अपने बना दा रखाता हूँ,

04:34तो इसको मैं पूछ कर दूँँ,

04:36वाहाँ पर फिर अपन इसको continue कर लेते हैं,

04:38मैं लिखता हूँ,

04:39यहाँ पर npm run और देव,

04:41यहाँ पर अपन इसको run कर लेते हैं,

04:42जिसे front end की बात उरीए,

04:44तो अपन front end को एक बार run कर लेते हैं,

04:46यही अपन इसको run करके देख लेते हैं,

04:48कितना अपन इक create कर लिया था,

04:49उसी में अपन आगे देखेंगे,

04:50तो यह अपने पास था,

04:52जिसमें अपने अपना नय उभार दिखाया था,

04:56यही home, सारी चीज़ यहाँ पर आ रही है,

05:02अब देखो, यहाँ पर जो open बना रहेते हैं next,

05:07वो open बना रहेते हैं,

05:07यहाँ पर कौन सा,

05:08यह अपना login वाला,

05:11लोगिन वाला अपन यहाँ पर create करते हैं,

05:12तो जल्दी से अपन login वाला create करते हैं,

05:15मैं यहाँ पर src के अंदर अपना जो components है,

05:19उसके अंदर ही अपन एक नया component बनाते हैं,

05:21जिसको मैं यहाँ पर कह रहा हूँ login.jsx करके,

05:25ठीक है, और अपने इसको create कर लेते हैं,

05:41मैंने यहाँ पर एक नया route बना दिया,

05:43जिसको अपन पात दे देते हैं,

05:44और slash login मैं यहाँ पर इसको दे रहा हूँ,

05:46और element के अंदर अपन यहाँ पर अपना component दे देते हैं,

05:50जो अपना component है, और इसको अपन close कर देते हैं,

05:52अपना component कौन सा है, अपना login वाला component है,

05:55जो मेरे को यहाँ पर attach करना है, मैंने login वाला component यहाँ पर attach कर दिया

05:59अब यह कब आना चाहिए, जब अपन किस पर klick करें अपने navbar के उपर

06:03navbar के उपर जब अपन क्लिक करें और किस पर klick करें तब

06:06जब अपन यहाँ पर अपना यह जो link tag आरहा है, इस link tag के उपर

06:10मतलब यह जो अपना registration user circle वाला है

06:13इसके उपर क्लिक करने पर आना चाहिए

06:14तो यहाँ पर अपन लगा देते हैं अपना 2

06:15और 2 में मैं यहाँ पर अपना URL पास करता हूँ

06:18slash login

06:19सेम ऐसे ही responsive के उपर भी पास कर दो

06:22यह रहा अपने पास user वाला

06:24तो यहाँ पर अपन पास कर देते हैं

06:25अपना 2 और 2 के अंदर अपन यहाँ पर पास कर देते है

06:29slash login

06:30ठीक है तो जब अपन इस पर क्लिक करेंगे

06:32तो अपन कहाँ पर आने चीए अपने login वाले

06:34component के उपर जैसे मैं इसके उपर क्लिक करूँगा

06:36किस पर आगे अपने login वाले component के उपर

06:39ठीक है

06:40perfect है अपन login वाले के उपर आ रहे हैं

06:42तो यहाँ पर login वाले URL पर जा रहे है

06:48यहाँ तक की चीच किलियर है

06:50तो एक बार comment करकि

06:50बताओ कि यहाँ तक की चीच किलियर है

07:06ठीक है, yes sir clear है, ओके, अब देखो, यहाँ पर अपन अपना जो login वाला है, वो create करते हैं, जैसे इस पर click कर रहा हूं, तो अपना एक login वाला यहाँ पर create हो क्या आना चाहिए, वो अपन यहाँ पर create कर लेता हैं, तो अपन login.jsx वाले component पर आजाते हैं, यहीं पर मैं इस main component को ए

07:36तो सबसे पहले मैं यहाँ पर करता हूं, यह जो अपना है, इसको आप यहाँ पर fix कर देना, और insert आप यहाँ पर कर देना, zero पे, ठीक है, zero पे यह अपने पास कहा रहा है थी, insert और इसका जो background है, वो आपको कौन सा करना है, black background आप इसका कर देना, ठीक है, और background की जो opacity है, �

08:06इस पर backdrop, जो अपना backdrop blur है, वो इसके उपर apply हो जाएगा, फिर उसके बाद मैं यहाँ पर कह रहा हूं कि आप इसके उपर flags लगा देना, और justify, center कर देना, क्योंकि मैं इसके अंदर एक div लेने वाला हूं, और item यहाँ पर क्या कर देना, center कर देना, मतलब horizontally और vertically जो इसके अं�

08:36यहाँ पर इसका जो bg है, वो अपन यहाँ पर कह देते है, white होना चाहिए, इसका background color white कर दो, width अपन यहाँ पर क्या कर देते है, इसकी full कर देना, इसकी width फुल कर देना, और जो maximum width है, वो अपन यहाँ पर कह देते है, md के हिसाप से set कर देना, medium device के हिसाप से पन set कर देते ह

09:06तो अपने पास यह काम हो रहा है या नहीं हो रहा है

09:08तो देखो यहाँ पर जब login में है

09:10तो login में अपने को इस तरीके से यह दिखाई दे रहा है

09:12जैसे मैं इसके उपर आ रहा हूँ तो इस तरीके से अपने को दिखाई दे रहा है

09:14अब यहाँ पर अपने एक बटन लगा देते हैं, उस बटन पर जैसे ही क्लिक करूँ तो यह अपना login वाला page बंद हो जाना चाहिए, अपने को अभी back करना पट रहा है, लेकिन अपने react icons को मैं यहाँ पर use कर लेता हूँ, इसको use करने के लिए, तो मैं यहाँ पर react icons पर आजा

09:44और यहाँ पर आके इसको use कर लो, चीक है, अब यहाँ पर अपन कब दिखाना चाहते हैं, यहाँ पर एक button दिखाना चाहते हैं, तो मैं यहाँ पर लगा देता हूँ एक button, और उस button के अंदर अपन यहाँ पर क्या लेंगे अपना यह वाला icon, कौन सा icon अपने पास, यह जो I

10:14करो, तब अपने पास वो बंद हो जाना चाहिए, यह काम अपने को करवाना है, तो सबसे पहले अपन इस button को यहाँ पर, जो है, कस्टमाइज कर लेता है, icon को कस्टमाइज ना करके, मैं button को ही class देता हूँ, ताकि वो कस्टमाइज हो जाए, तो यहाँ पर अपन लगा देत

10:44ठीक है, और जो right है, वो right से भी आप इसको क्या कर देना, 3 कर देना, ठीक है, इतना सा काम अपन इस पर कर देते हैं, top से 3 और right से 3, तो यह button अपने पास इज़े गा रहा है, उसके बाद अपन इसके उपर color लगा देते हैं, text में आपर कहता हूँ कि आप gray color कर देना, और gray मे

11:14text को मैं यहाँ पर बढ़ा कर देता हूँ, मैं यहाँ पर कहता हूँ कि आप इसको excel कर देना, ताकि वो big size में अपने को दिखाए दे, तो जब मैं इसके उपर color ले जाँगा, तो यह अपने पास इस तरीके से रहेगा, जब मैं इस पर click करूँ, तो click करते ही अपना यह component यह

11:44const करके मैं यहाँ पर navigate नाम के एक variable में उसको assign कर देता हूँ, ठीक है, कब करना है, जब अपन इसके उपर click करें, तो मैं यहाँ पर लगा देता हूँ, अपना on click, और on click पर यहाँ पर यहाँ एक function आता है, मैं यहाँ पर function बना दिया, और उस function में क्या work करना चाहिए आपका

12:14असलब वो close हो रहा है अपने पास, ठीक है, तो यह बात होगे अपने पास किसकी, इसको close करने की, अपन इसको close किस तरीके से करेंगे, उसके बाद next अपन यहाँ पर अब इसका content पास कर देता है, इस button के बाद ही मैं यहाँ पर एक s2 tag ले देता हूँ, और उसमें अपन कहा

12:44पिर उसके बाद अपने इसको भी customize कर लेते हैं, मैं यहाँ इस s2 tag को भी class देता हूँ, और class देके अपन यहाँ पर कहते हैं कि आप इसका जो text है, वो आप यहाँ पर to excel कर देना, ठीक है, उसके अलावा जो font है, वो आप यहाँ पर क्या कर देना, अपना bold कर देना, और margin bottom स

13:14set कर देना, और hover की उपर आपको क्या करना है, hover की उपर जब text, hover क्या लगा रहा है, इस s2 tag पर मतलगा हूँ, इस पर तो बस इतना ही रहने तो, कि hover नहीं लगा ना, ठीक है, इसका text जो है, वो यह कर देना, और text को center में कर दो, बस आप, यहाँ पर आप कर दो कि text अपने पा

13:44यह जो guest है, वो बोले कि sir, sound की problem आ रही है, और बाकी कोई भी नहीं कह रहा कि sound की problem आ रही है, बाकी सब को clear, सब चीजे सही समझ में आ रही है, मेरे हिसाब से, सिर्फ एक student की problem आ रही है, अंजली कह रहे है, सब perfect है sir, अगर आप बोल रहे हैं, सब perfect है, तो फिर perfect ही होगा, मे

14:14तो देखो यहाँ पर अपने क्या किया, यह login अपन यहाँ पर बना रहा है, इस पर click करते ही close भी हो जाएगा, और यह open और अपने को क्या करना है, इसके अंदर अपने को यहाँ पर अपने वही form बनाना है, और form में अपने को अपने label, input यह दिखाने बस इतना सा काम करना है

14:44और email की जगह अपन यहां पर text ले लेते हैं ठीक है मैंने बोला input text आप यहां पर दे देना फिर उसके बाद next label ले लेता हूँ मैं password का क्योंकि login करवारे तो यहां पर email और password दो चीजी अपन ले रहे

14:57label ले लेता हूँ और इसमें मैं यहां पर कहते थाँ आपको क्या देना है अपना password यहां पर देना है ठीक है फिर उसके बाद अपन यहां पर अपना

15:26नेक्स्ट अपन आगे चलते हैं, ये बटन ले लेते हैं, मैं यहाँ पर कहता हूँ, एक बटन भी आप यहाँ पर दे देना, और बटन को अपन यहाँ पर कह देते हैं, बटन में अपने पास यहाँ पर क्या होगा, इस बटन पर क्लिक करते ही अपन लॉगिन हो जाना चाहि�

15:56ठीक है मैं आपर कहता हूँ don to have an account

16:01भाई अकाउंट नहीं है तब आपको यहाँ पर क्या करना है

16:05तब आपको registration करना है तो यहाँ पर मैं लगा देता है अपना link tag और उसमें अपन कहा देता है register

16:10ठीक है register अपन कहा देता है जब अगर account नहीं है तो

16:17परफेक्ट अब देखो यहाँ पर क्या issue आगया link tag इंपोर्ट नहीं हो पर उसको import करो वो link tag का दे रहा है

16:25link tag को उपर import कर लो और आके check करो तो देखो यहाँ पर email आ रहा है password आ रहा है login का button आ रहा है

16:33don't have an account और registry यहाँ पर लिखा वा रहा है तो चलो अपन यहाँ पर इसको customize कर लेते है जल्दी से change कर लेते है

16:39यह s2 tag है यह label है एक label को मैं यहाँ पर set कर लेता हूँ बाकी के उपर same class लगा देंगे तो मैं यहाँ पर class name करके

16:45इसको target कर लेता हूँ ठीक है और इस label को अपन यहाँ पर क्या कर लेते है अपना जल्दी से

16:52Ui बना लेते है इस label का तो पहला तो मैं यहाँ पर गरता हूँ कि आफ इसको यहाँ पर block कर देना झातीक है

16:58टीक है block कर देना और उसके अलावा जो इसका text है वो आप यहाँ पर sm कर देना small device के इसाब से और जो text है वो आप यहाँ पर gray color के अंदर अपन यहाँ पर कह देते हैं जैसे 700 कर लेते हैं टीक है और margin bottom की मैं आपर to assign कर देता हूं यह दोनों label के लिए अपन कर देते हैं जो अ�

17:28email आ रहा है एक अपने पास क्या रहा है अपना password आ रहा है अब input अपने को बनाना है तो input अपने बना लो इस input को भी मैं यहाँ पर target कर लेता हूं और create कर लेते हैं चीक है तो इस input के उपर भी अपन क्या लगा देते हैं अपनी class name और मैं यहाँ पर कहता हूं width अपने पास य

17:58x direction में आप यहाँ पर 4 की क्या करना

18:00padding लगा देना और y direction में

18:03आप यहाँ पर 2 की padding लगा देना

18:04उसके अलावा आप इसको rounded कर देना

18:06ठीक है तो जो चेक करते हैं

18:08email वाले को अपर ने दिया है तो अपना email का box

18:10इस तरीके से create हो क्या रहा है

18:11perfect लेकिन जब मैं

18:14इसके उपर focus करूँ तब आप यहाँ पर क्या करना

18:17उसकी जो by default outline है

18:19उसको आप यहाँ पर क्या कर देना

18:20none कर देना क्यों क्यों क्यों क्योंकि

18:22मैं यहाँ पर focus के उपर अपनी ring लगाने वाला हूँ

18:25और ring भी अपन यहाँ पर कौन सी

18:27two वाली लगाएंगे

18:28जब focus करें तब ring का जो color है

18:30वो भी यहाँ पर set कर दो

18:31मैं यहाँ पर करता हूँ

18:32purple color और वो ही अपन यहाँ पर

18:35500, 600 जो भी अपने को देना है

18:36वो यहाँ पर होना चाहिए

18:37तो जब मैं इस पर click कर रहा हूँ

18:38तो अपने पास यहाँ पर क्या हो रहा है

18:40अपनी ring यहाँ पर create होके आ रही है

18:43यही same अपने को किस के उपर apply करना है

18:45यही same मैं लगा देता हूँ अपने

18:47उसके उपर भी

18:48जो second input है उसके उपर भी

18:50यही same मैं यहाँ पर लगा देता हूँ

18:52ठीक है

18:52यही सेम अपने यहाँ पर लगा दिया second input के उपर

18:55तो यहाँ पर यह अपने पास email है यह password है और यह login का बटन है

19:00ठीक है अब देखो यहाँ पर login का बटन है तो यहाँ पर login के बटन को भी अपन कर देते हैं चल्दी से

19:07इस login के button को भी मैं यहाँ पर क्या करता हूँ

19:11class देता हूँ मैंने class दिया

19:12class name और यहाँ पर अपन कहते है

19:14width अपने पास क्या कर देना इसकी

19:16full कर देना और उसके

19:18अलावा इसका जो background color है

19:20वो आप यहाँ पर purple color और purple के अंदर

19:23वो ही अपन 500 जो भी use कर रहे है

19:24और hover के उपर जब मैं करूँ तब इसका जो

19:28BG है वो आप यहाँ पर purple color के अंदर यहाँ पर जैसे

19:32700 कर देना ठीक है थोड़ा सा dark हो जाना चाहिए और उसके

19:37अलावा जो text है वो आप यहाँ पर इसका white कर देना और

19:40padding भी लगा दो सब जगे से ठीक है तो py करके मैं

19:44यहाँ पर देता हूं 2 की padding लगा देना py करके और margin

19:47top से अपन यहाँ पर देता है जैसे 6 की देदो या फिर 5 की जो

19:50भी देनी है margin top से देता हूं और font को मैं यहाँ पर कहता हूं

19:54कि आप font यहाँ पर क्या कर देना अपना semi bold कर देना

19:57और उसके अलावा rounded भी कर देना इसको ठीक है

20:03rounded आप कर देना एक बार चेक करें कितना अपने पास यहाँ पर

20:06create हुआ तो यह अपना login का बटन कुछ इस तरीके जब ने पास यहाँ पर आ रहा है

20:10यह email हो गया यह password हो गया यह close वाला हो गया और यह अपने पास क्या रहा है अपना login

20:14जल्दी से इसको आगे और अपन create कर लेते हैं

20:18यह अपने सारे चीज़े दी placeholder भी अपने असाइन कर देते ताकि अपने को थोड़ा सा UI अच्छा लगे अपना

20:23फिर उसके बाद अपने दिखाया है don't have an account इसको center में लिखा जाता हूँ

20:27मैं इसके उपर class name लगा देता हूँ और मैं कहा देता हूँ कि text को आप यहाँ पर SM कर देना

20:31और text को आप यहाँ पर center में भी ले आना ठीक है और जो text है वो आप यहाँ पर gray color के अंदर

20:37जैसे 600 में दिखा देना ठीक है और margin top से मैं यहाँ पर जैसे 5 के लगा देता हूँ उसके उपर

20:43जो अपना paragraph टेक है तो don't have an account और register अपने यहाँ पर दिखा है तो इस register पर click करते ही अपने को क्या करना है इस पर click करते ही अपने को registration वाले PHP बेजना है अभी कुछ नहीं है तो अपन रहने देते हैं सिर्फ मैं इस link के उपर class लगा देता हूँ इसको customize कर देता हूँ ठीक है

21:13जानी चीए ठीक है over पर अपने पास यहाँ पर क्या नीच चीए अपनी underline यहाँ पर create क्या नीच चीए चेक करें तो देखो यहाँ पर यह इस तरीके से कुस्त दिखकत है

21:22over, over पर underline आनी चीए ठीक है तो इस तरीके से अपने पास यहाँ पर आ रहा है और इसके अंदर spacing कर दो यहीं दे दो space वो automatically ले ले लेगा हूँ आपर

21:33don't have an account और register इस पर क्लिक करती ही आ रहा है उसके अलावा अपने को यहाँ पर क्या करना है वो ही अपने placeholder लगा दो इस input के उपर में लगा दे तो अपना placeholder और placeholder लगा के अपने लिख देते हैं अपने जो placeholder अपने को लिखने है यह मैं यहाँ पर कहता हूँ

21:53enter your email चीक है और यहाँ पर यह जो placeholder है यहाँ पर भी लगा देते हैं यहाँ पर उसको क्या देना अपना password तो मैं यहाँ पर कहता हूँ

22:05enter your password

22:07चीक है

22:11ये दोनों चीज़े अपने यहापर कह दी

22:13enter your email, enter your password और login

22:15चीक है, तो इस तरीके से अपने यहाँ पर

22:17यह क्या बनाया अपना, login वाला section

22:19अपने यहाँ बनाया है, जैसे मैं इस पर click कर रहा हूँ

22:21register पर click करते हैं, अपने को registration के उपर बेजना है

22:23मतलब registration का पूरा section आना चाहिए

22:26यह चीज़ किलियर है क्या, यहाँ तक की चीज़ किलियर है

22:29तो एक बार comment करके बताओ कि यहाँ तक की चीज़ किलियर है

22:32इसमें कोई doubt नहीं है

22:53झाल सब्सक्वाँ तक की चीज़ किलियर है

23:23ठीक है

23:25forget password भी होता है

23:27यस बिल्कुल लेकिन उसके अलावा अपन थोड़ा सा और इक काम करते हैं

23:30इसके अंदर देखो यहाँ पर enter your password अपन यहाँ पर दे रहे

23:33मैंने यहाँ पर अपने password लिके

23:35यहाँ पर अपन शो और hide वाला भी दिखाते हैं

23:38ठीक है यह काम करो इसको थोड़ा सा rounded ज्यादा करो यह जो आपने लिया है

23:42इसको rounded ना करके अपन यहाँ पर rounded LG देता हूं एक बार

23:47LG में कैसा दिख रहा है वो

23:48थोड़ा सा round ज्यादा करो अच्छा लगना चाहिए वो

24:08rounded फुल कर दो फुल में अच्छा लग रहा है rounded फुल कर दो इसको

24:12मैं यहाँ से copy कर लेता हूं और

24:15यह अपना यह वाला है और इसके उपर भी में क्या लगा देता हूं अपना rounded

24:21fully लगा देते हैं ठीक है

24:23perfect तो यह अपने पास इस तरीके सा रहा है अपना email और अपना password ठीक है

24:30अगर आपके यह थोड़े से अजीब लग रहे है फुल मत करो फुल में ज्यादा आ रहा है फुल

24:37तू excel कर दो अपने इसाब से परफेक्ट नहीं तो excel ही रहे है यार excel कर दो और इसको भी excel कर दो आप करते रहे न अपने इसाब से आपको जैसा सही लगे

24:50अब देखो मेरे को यहाँ पर और क्या करना है मैं यहाँ पर password दे रहा हूँ तो password पर show और hide वाला यहाँ पर क्या आना चाहिए एक button आना चाहिए और यह अपन react के थूँ कर सकते हैं

25:01देखो कैसे मैं यहाँ पर एक button दिखाना चाहता हूँ जब मैं इस पर click करूँ तो अपने पास अपना show और hide वाला यहाँ पर अपना button यहाँ पर अपने को show होना चाहिए अब देखो मैं यहाँ पर एक काम करता हूँ

25:13क्या काम करें अपन

25:16ठीक है मैं यहाँ पर एक use state ले रहता हूँ मैं यहाँ पर क्या किया एक अपना use state ले लिया और उस use state के अंदर मैं यहाँ पर true false दे रहा हूँ

25:28मैंने आपर true दे दिया

25:29और इसको अपन यहापर create कर लेते हैं

25:32इसके अंदर अपने पास क्या आते है

25:33एक तो state variable तो मैं यहापर एक

25:35show password करके

25:37state variable दे देता हूँ

25:39और मैं हापर कहता हूँ

25:40set to show password

25:43यह मैं हापर कह रहा हूँ

25:45अब देखो इस show password के basis पर

25:47मैं आपर condition लगा देता हूँ बस इतना सा काम मैं आपर करूँगा कि मेरे पास

25:51जो मेरा ये input आ रहा है password वाला देखो इसका type अपने क्या लिया है

25:55इसका type अपने text लिया है ठीक है तो इस text को मैं यहां से

25:59हटाता हूँ और यहां पर अपन type को बस change कर देंगे, मैं आपर बोलूँगा

26:02कि type जो है मेरे पास वो अगर मेरे पास जो मैंने मेरा show password लिया है

26:08अगर वो true आता है तो आपको इसका type क्या रखना है इसका type रखना है आपको

26:13password और अगर

26:15वो false आता है तो आपको इसका type क्या रखना है

26:17इसका type रखना है आपको text

26:19बस इतना सा अकाम करतो

26:21अब भी true आ रहा है तो यहाँ पर आपका

26:23वो hide रहेगा परफेक्ट

26:25लेकिन अगर आप यहाँ पर इसको true

26:27की जगे change करके यहाँ पर क्या करते हो

26:29आप यहाँ पर करते हो कि false करते ना

26:31ठीक है तो false कर दिये

26:33तो अपने पास text हो जागा लेकिन

26:35यह काम मिलको करवाना है एक button के

26:37click होने पर और वो button अपन कहां पर

26:39लगाएंगे वो button लगाएंगे अपन इस

26:41input के अंदर ही यह जो input है

26:43इस input के अंदर ही लगाना है

26:45तो एक काम करो इसको

26:46एक div लो और उस div के अंदर ले लो इसको

26:50ये जो input है

26:52इस input को मैं इस div के अंदर ले लेता हूँ

26:54ताकि मैं इसके अंदर एक

26:55वो icon लगा सकूँ

26:57ठीक है इस div को

27:00अपन यहाँ पर एक class दे देते हैं

27:02यहाँ पर इसको div को मैंने एक class दे दी

27:04इसको close कर लेते हैं ताकि अपना थोड़ा big screen में दिख जाए अपने को

27:08और एक बार के लिए मैं इसको format भी कर देता हूँ

27:12ठीक है अब देखो मैंने यहाँ पर क्या किया

27:15यह जो input था अपना password वाला

27:18इसके लिए मैंने यहाँ पर एक div ले लिया

27:20और इस div को मैंने यहाँ पर class दे दी

27:22ठीक है और मैं यहाँ पर इसको एक position दे रहाँ

27:24वो मैं दे रहाँ relative

27:25relative क्यों दे रहाँ कि मैं इसके अंदर जो icon लूँगा

27:28उसको मैं यहाँ पर देने वाला हूँ अपनी absolute

27:30ताकि अपन उसको set कर सके

27:32ठीक है तो मैं यहाँ पर एक button ले लेता हूँ

27:35और इस button के अंदर ही अपन यहाँ पर अपने icon लेने वाले है

27:39ठीक है तो जल्दी से अपन यहाँ पर अपने icon ले लेते है

27:42अपने पास icon आते है जैसे icon कर लो और इसको import कर लो जल्दी से

27:59यहाँ पर आके

28:00ठीक है और दूसरा जो आइकन है

28:03वो कौन सा आपका

28:04दूसरा आइकन आपका यह वाला है

28:07फा आए स्लेश

28:09ठीक है तो इसको यहाँ पर आओ

28:11और यहाँ पर इसको भी लगा दो

28:13दोनों को अपन यूज़ करने वाले है

28:15इस बटन के अंदर तो मैं यहाँ पर कहतेता हूँ

28:17कि इस बटन के अंदर मैं को किसको

28:19यूज़ करना है अपना फा आए वाले को

28:22अभी के लिए मैं सिर्फ यह लगा रहा हूँ

28:23क्योंकि conditional basis चलेगा यह काम

28:25परफेक्ट यहाँ पर आके आप चेक करोगे

28:28यह आपका आइकन आ रहा है

28:29लेकिन अपने इसको set करना चाते है

28:31तो वही अपने class दो दी है

28:32इस बटन को बस यहाँ पर classes लगा दो अपनी

28:35उसको relative आपने दी है position

28:37तो यहाँ पर अपने इसको absolute देंगे

28:39और absolute की basis पे set कर देंगे

28:40तो मैं यहाँ पर इसको shepherd गहता है

28:42अपनी absolute अपने डी और top से मैं यहाँ

28:47पर इसको phoset कर देना और right से

28:52इसको three set कर देना

28:54चेक करें क्या हो रहा है top और right से set करने में

28:57तो दिए भिए हैं पर top से five

28:58ना खरके अगर आप top से three रखते है

29:00three रखो एक बार

29:02पूरा center में ही लगेगा, वहां 3 रख लो यहां पर, थी रखा तो यहां पर इस तरीके से आ रहा है, ठीक है, यह अपने पास इस तरीके से आ रहा है, और इसमें अपने यहां पर कह देते हैं, जब मैं hover करूँ, तो hover पर color change करवा दो, hover पर आप यहां पर कह देना, कि इसका जो

29:32भी नहीं हो रहा, बटन एक submit वाला बटन यहां पर काम कर रहा है, तो यहां पर आओ, और यहां पर अपन इसका एक तो type pass कर देता हूं, बटन कर देता हूं, ताक्कि वह submit ना हो, और उसके अलावा on click के ओपर अपन बस यहां पर true false करवाने वाले हैं, on click पर मैं किसको बला�

30:02यहां पर हो जाना चाहिए, तो देखो, यहां पर मैं कुछ भी लिख रहा हूं, मैं इस पर click करूँ मा, तो वो show और hide हो रहा है, इस icon को भी change करना है, icon को भी change करवा दो, यहां पर इसको directly ना लगा के, मैं यहां पर condition लगा देता हूं, और मैं कहता हूं, कि जब मेरा यहां �

30:32else, else के अंदर आपको यहां पर क्या करना है, जो आपको यहां पर far eye वाला है, वो यहां पर icon लगा देना, ठीक है, इतना सा काम आप कर देना, check करो, क्या हो रहा है यहां पर, यहां पर आपने दिया, आप इस पर click करोगे, तो देखो, अपने पास वो इस तरीके से hide हो रहा ह

31:02ग्रीन और ग्रीन में मैं यहां पर कहता हूँ कि आप इसको 700 पास कर देना ठीक है तो वो इसका कलर ग्रीन हो जाएगा

31:10यहां तक की चीज के लिए रहे है तो एक बार कमेंट करके बताओ कि यह सर यहां तक की चीज के लिए रहे है

31:22एम के करेंगे सर एक स्मॉल रीकैप मैं अभी जोइन किया हूँ

31:40स्मॉल रीकैप यह है कि अपने सिर्फ यह लॉगिन वाला पेज आज क्रिएट करा है

31:43जिसमें अपने एक अपना इंपुट बॉक्स यह लिया है दूसरा इंपुट पास्वर्ट वाल लिया है

31:48और इसमें अपने password पे click करते ही अपन यहां पर show or hide भी करवा रहा है

31:52और registration वाला अब अपन next class के अंदर create करने वाला है

31:55बस इतना ही अपन ने create किया है आज वाली class में

31:59क्योंकि class में कुछ issue आ गए थे voice और बहुत सारी चीज़ों से related

32:05Sir बहुत easy है react में

32:08Yes बिल्कुल react तो बहुत easy है अगर आपको react अच्छे से आती है तो react आपको बहुत easy लगने वाली है

32:14यहां तक की चीज़ के लिए रहे तो एक बार comment करके बताओ कि Yes Sir यहां तक की चीज़ के लिए रहे

32:20अंजली करे के Sir आपकी टीम बहुत सपोर्ट करती है Yes बिल्कुल टीम सपोर्ट करती है तभी तो skill वाला बनाऊँ है अपना

32:40टीम के सपोर्ट करने से ही तो है आप सभी को जो भी दिक्कत आएगी आगे भी अगर jobs related भी दिक्कत आएगी तो उसमें भी आपको support किया जाएगा

32:50अगर आपको कुछ भी दिक्कत आती है जैसे development में अगर आप और other classes ले रहे हो तो आपको full support किया जाएगा

32:56आपको अगर कुछ भी दिक्कत आती तो आप contact कर सकते हो जो skill वाला के number है और आप मेर से भी बात कर सकते हो अगर कुछ भी issue आता है तो आपको class में

33:05या फिर उसके अलावा अधर कुछ भी issue होता है जैसे मालो आपका एक interview है और आप उससे पहले आपको समझ भी नहीं आ रहा कि कैसे prepare करना है या फिर interview आपने दिया उन्होंने आपको कुछ task दिया उसको कैसे करना है तो आप बात कर सकते हो मेर से किस तरीके से मैं उसको handle कर�

33:35सर एक mini check box होता है don't have के बगल में आ तो check box भी लगा तो बहुत सारी चीज़े होती है

33:42check box क्या बहुत सारी चीज़े होती है login के अंदर login registration में लगा सकते है अपन जितनी चीज़े लगाए उतनी कम है

33:53मतलब एक website में जितनी चार्चान लगाए उतनी कम है लेकिन अपने को main logic समझने है सर्फ UI पर नहीं रहना आपने को logic वाली चीज़े अपने को समझनी है

34:03मतलब backend में जो अपन काम करने वाले वो important है क्योंकि वही ज़्यादा पूछा जाएगा अगर आप complete full stack development के लिए एक इस rule के लिए अगर apply करते हो तो

34:23ठीक है चलो मैं आपको attendance के point 1 और point 2 भी बता देता हूँ

34:26attendance के point 1 के अंदर आपको mention करना है log in और point 2 के अंदर आपको mention करना है registration

34:35ठीक है point 1 के अंदर mention करना है login और point 2 के अंदर mention करना है registration

34:45मेरा message नहीं देखा क्या? Yes बिल्कुल देखा होगा

34:48अरजुन करय है आपके team और आपको दिल से salute sir

34:51Thank you Arjun बहुत बहुत बहुत दनेवाद

34:54MK के रहे कि career guidance मिल सकती है

34:57कि yes बिल्कुल आप call करो

35:00और फिर बोलो कि मैं को दिवान चूसर से बात करनी है

35:02इस चीज से related, career से related

35:05तो आप बात कर सकते हो, मैं आपको ज़रूर guide करूँगा

35:07लेकिन उसके लिए step आपको लेना पड़ेगा

35:11मैं आगे से आपको call नहीं कर सकता किसी को भी

35:13आपको जो भी doubt हो, आप call करो, contact करो, बात करो

35:20जो भी दिक्कत आ रही है उसका solution होगा

35:23क्योंकि ये जो class होती, ये online class है

35:29इसमें ऐसा तो है नहीं कि face to face class हो रही है

35:32और आप सोचरों कि यार अगर मैं कुछ बोल दिया तो

35:35sir क्या सोचेंगे, ये क्या सोचेंगे

35:37sir आपके नमबर नहीं है, नहीं, मैं phone यूज नहीं करता

35:42मेरे पास ना mobile, cell phone, कुछ नहीं है

35:45मेरे नमबर नहीं है, इसके वाले वाले नमबर पर ही आपको call करना पड़ेगा

35:49अर्जुन के रहे जावा स्क्रिप्ट इंट्रिवी वीडियो इंट्रिवी वीडियो डेली मोशन पर ही अपलोड करवा दे sir

36:06नहीं उस पर अपलोड नहीं होगी, बहुत जल्द ही अपना platform आ रहा है जिसमें अपन complete LMS जो मैंने आपको बताया था

36:15उसके तुरू आप सारी जो भी वीडियो जे वहाँ पर access कर सकते हो

36:19बस यह October निकल जाए उसके उपर ही काम चल रहा है पूरी website के उपर ही काम चल रहा है

36:24एक बार उसका UI रेडि हो रहा है उसके बाद फिर आगे की जो चीज़ है वो process में होके फिर complete आपको जब publish होगी तो आप check कर सकते हो

36:34सर मैंने internship करी है frontend जिसमें HTML, CSS, JavaScript and bootstrap से only project बनाना है तो बिल्कुल easy है यह तो

36:49HTML, CSS और bootstrap से तो मतलब यह frontend की है जो भी internship आप कर रहो

36:55तो अच्छी बात है यह जो project live होगा उसक्रिप पर अगर आप काम कर रहो तो बहुत अच्छी बात है

37:01ठीक है आज की class की recording आपको daily motion के उपर मिल जाएगी आप वहाँ पर जाके चेक कर लेना सब

Be the first to comment

Add your comment

📖 Today’s Class: Building Login, Registration & Admin Panel (Frontend UI) 📅 Skillwaala’s Free Full Stack Web Development Course

Category

Transcript

Be the first to comment

Recommended