3
- 10 months ago
👨💻 What You’ll Learn in This Class:
✅ How to structure a portfolio webpage using HTML
✅ Designing a Navbar with logo and navigation links
✅ Creating a Hero Section with heading, subheading & button
✅ Styling the hero area with CSS Flexbox & background images
✅ Making the layout responsive for all devices
✅ Clean design tips and modern UI styling
✅ How to structure a portfolio webpage using HTML
✅ Designing a Navbar with logo and navigation links
✅ Creating a Hero Section with heading, subheading & button
✅ Styling the hero area with CSS Flexbox & background images
✅ Making the layout responsive for all devices
✅ Clean design tips and modern UI styling
Category
📚
LearningTranscript
00:00:00रवी के ले नया साल आये बनकर उजाला गुरू जी रहे हमेशा खुश हाल ग्यान की रोशनी यूं ही देते रहे आपके चर्णों में हमारा परणाम हर साल एपी न्यूएर एडवान गुरू जी आप सभी को भी हैपी न्यूएर और बहुत प्यारी लाइन बोली है आपने ज
00:00:30कल तो अपनी क्लास रही की नहीं तो आज आप सभी को एडवान्स में हपी न्यूएर अगला साल आपके लिए बहुत अच्छा हो जो आप अपने सपने सूच रखे हो वो सारे सपने आपके पूरे हो आप जो अगला साल आ रहा है उसमें एक स्टेप आगे जाओ अपनी ला
00:01:00इसमें सर्च बार लगाना है सर्च बार लगाने के लिए इंपूट सर्च यूज़ करो और लग जाएगी सर्च बार इजी हपी न्यूएर दिपिका हपी न्यूएर इशा ठीक है तो मेरी तो यही दूआ है ये साल आए नया साल आए उसके बाद अगला साल आएगा साल बर
00:01:30अच्छा करो, खुद का भी अच्छा होना चीए, तो आपनी लाइफ में बहुत अच्छा करो, जितना अच्छा हो सकता है.
00:01:45हैपी न्यूएर अन्मॉल
00:01:46रवी करे थैंक यू गुरू जी बस आपका दुआ रहे
00:01:59यस बिल्कुल मेरी दुआ आप सभी के लिए हमेशा बनी रहेगी, मैं दुआ में यही मांगता हूँ कि आप जितने भी स्टूरेंट्स है मेरे, सब अपनी लाइफ में एक अच्छे लेवल पे जाए, अच्छा अपना करियर पाद जो आपने भी सेलेक्ट करा है, उसमें बह�
00:02:29करें सरा, आपने कल ही क्लास लिए, तो अपनी वैसे तो जो क्लास आपकी पैंडिंग रहे गई है, उनको आप कवर कर लेना, डेली मोशन की वपर जाके, क्योंकि वहाँ पर सारी क्लास रिकॉर्डेड है, ठीक है, और अब अपन बूट सेब स्टार्ट करेंगे, और बूट
00:02:59पहले वाला कॉन्टेंट जो भी आपका रिमेनिक रह रहा है, HTML, CSS, मालों बूट सेब आप ड्रैगॉलर नहीं ले पारे, तो जावा स्किप्ट जब चल रहे है, तो जावा स्किप्ट जब चल रहे है, तो इसको गवर कर सकते हैं, तो जावा स्किप्ट के अंदर, HTML, CSS और ब
00:03:29अपनी पूरी कवर करेंगे फिर उसके बाद एस्टीमल सीएस आएगी तब तक आप उसको कवर कर लेना तो बड़ा ही आसान है कवर करना ठीक है और अपनी अटेंडेंस आप मार्ग कर देना वाँ पर
00:03:40ठीक है जूनियर के लिए उकसर तिल दैना एक कवर थैंक यू हाँ यस बिल्कुल आप कवर करो और आराम से कवर हो जाएगा क्योंकि जब तक जावास्क्रिप्ट चलेगी तब तक आप उसको कवर कर सकते हो जैसे मालो जावास्क्रिप्ट अपनी रनिंग में है तो आप जा�
00:04:10गंटे आप जावास्क्रिप्ट को दोगे एक गंटा जो रिकोडिंग आपकी रिमेनिंग रही है उसको कवर करना एक गंटा उसकी प्रैक्टिस कर लेना तो आराम से पांच घंटे अगर आप दोगे चार-पांच घंटे तो ये आराम से कवर हो जाएगा और क्यों देना प
00:04:40कर लोगे उसके बाद तो फिर तो कोई दिक्कत ही नहीं है फिर रेगुलर जो क्लास हो रही उसकी प्रैक्टिस करते रहना गुरू के बिना ग्या नदूरा है आप से ही हर सपना पूरा है नए साल में भी यूही मार्क दर्शन आपका आशिरवाद ही हमारी सबसे बड़ी प
00:05:10किसी चीज की मतलो ठीक है मैं हमेशा आपको सही गाइड करूँगा जितना मैं कर सकता हूँ जितनी मैं आप सभी की हेल्प कर सकता हूँ जितने भी मेरे ये प्यारे स्टूडेंट्स है 26 स्टूडेंट्स मैं सब की हेल्प करूँगा जितना मैं कर सकता हूँ हर एक चीज के �
00:05:40बस महनत आपको करनी पड़ेगी
00:05:43जितनी महनत मैं कर रहा हूँ
00:05:44उतनी ही महनत आप भी करो
00:05:46इस कोर्स को कंप्लीट करने में
00:05:48इसके बड़ इंट्रिव्यूस के लिए
00:05:50और अधर चीजों के लिए
00:05:51सर जावा से डीए से कर सकते है
00:05:54येस बिल्कुल कर सकते है
00:05:55जावा पाइटन सी प्लस प्लस से डीए से कर सकते है
00:05:57ठीक है
00:06:03देखो आपके पास बहुत सारे सोर्सेज होते है
00:06:14सीखने के लिए
00:06:15मैं आपको कभी भी सजेस्ट नहीं करता
00:06:17कि आप कहीं पर जाके चीज़े सीखो
00:06:19ठीक है मतलब पीड कूर्स लो
00:06:22जैसे कल मैं यूट्यूब स्क्रॉल कर रहा था
00:06:25तो मैंने यूट्यूब स्क्रॉल करते वे देखा कि
00:06:27एक अगर आपने कभी उसको देखा हो
00:06:31नाम याद नहीं आ रहा मेरे को क्या नाम से था
00:06:36तो वो complete DSA की प्लेलिस्ट लेके आ रहा है
00:06:39तो आप उस प्लेलिस्ट को देख सकते हो
00:06:42मतब यूट्यूब पर अगर आप research करोगे देखोगे
00:06:45तो आपको यूट्यूब पर बहुत अच्छा content मिलेगा
00:06:47अपन भी यूट्यूब पर पढ़ाते हैं अगर आपको पताओ तो
00:06:49तो यूट्यूब पर अगर आप देखोगे तो यूट्यूब पर अच्छा content भी है
00:06:53हर एक चीज अच्छी है अच्छे तरीके से explain करी भी है
00:06:57बस सब जगे से चीज़ बिताओ उनको सीखो
00:07:01हाँ चायवित कोड यस चायवित कोड जो है वो लेके आ रहे है
00:07:07तो complete DSA की series है वो तो आप उसको देखो
00:07:13क्या दिकत है उसमें regular उसकी practice करो
00:07:18ठीक है तो जहां से जो सीखने को मिले वहां से वो चीज़े सीखो
00:07:23ठीक है यह की चीज में stuck नहीं हो ना आप web development सीख रहे हो
00:07:28बहुत अच्छी बात है आपको पता होना चीज़े डिजिटल मार्केटिंग क्या है
00:07:32ठीक है आपको पता होना चीज़े ग्राफिक डिजाइनिंग के बारे में
00:07:37आपको python के बारे में पता होना चीज़े जावा के बारे में पता होना चीज़े
00:07:40हर language का इतना पता होना चाहिए कि
00:07:43अगर आपके पास कुछ बात चल रही है
00:07:45आपके seniors भी बात करें
00:07:48तो आप वहाँ पर बीच में बोल सको
00:07:50उनको बता सको कि हाँ ये है
00:07:52ठीक है
00:07:53तो हर एक field की knowledge लो
00:07:56सिर्फ web development आप कर रहे हूँ
00:07:58बहुत अची बात है
00:07:59इसको करने के बाद आपको
00:08:00automatically बता जलेगा कि
00:08:02यहां तक तो मैं पहुंच चुका हूँ
00:08:04अब मैं आगे और पहुंच सकता हूँ
00:08:06ठीक है
00:08:07तो सारी चीजे देखो
00:08:09मैं ये नहीं कर रहा कि आप उसमें mastery करो
00:08:12आप web development करो उसमें mastery करो
00:08:14कि आप एक field को select कर रहे हो
00:08:15लेकिन बाकी field की knowledge लो
00:08:17ठीक है जैसे मालो digital marketing के अगर अपन बात करते है
00:08:20तो कोई ऐसी class या फिर कोई ऐसा topic उठा के देखो
00:08:23जिसमें वो आपको 5 से 10 गंटे में सारी चीजे explain कर दे
00:08:27ठीक है
00:08:28कोई ऐसी video उठाओ जिसमें वो 5 से 10 गंटे में आपको सारी चीजे explain कर दे
00:08:45कर देखो और समझो क्या पता उसमें भी आपका इंटरेस्ट हो तो आप उसको भी
00:09:11mastery कर लो ठीक है एक ही field जरूरी नहीं कि एक ही field master कर लो दो कर लो
00:09:16तीन कर लो क्योंकि कई multi talented भी होता है ठीक है तो वो चीज भी करो
00:09:22क्योंकि यही time है चार से पांच छे साथ साल मेहनत कर लो उसके बाद अपने आपको
00:09:32अगर आपने किसी भी successful इंसान को देखा होगा तो वो कभी रुकता नहीं है वो हमीशा चीजे
00:09:41explore करता रहता है ठीक है जैसे किसी की भी बात कर लेता है पर जैसे
00:09:47किसी भी इंसान की बात कर लो माल लो कोई भी successful इंसान है तो वो हमीशा explore करता है वो अपनी learning को कभी खतम नहीं करता ठीक है जैसे वो books पढ़ना चीजे
00:09:59explore करना यह हमीशा रखना है आपको अगर आप books नहीं पढ़ते तो books भी पढ़ो क्योंकि books पढ़ने से भी knowledge आती है
00:10:07English books पढ़ो वहाँ से आपको words पता जलेंगी क्या क्या मैं words यूज कर सकता हूं English के अंदर ठीक है अगर आपने कभी जैसे शारुख खान का interview सुना हो तो वो कितनी प्यारी English बोलता है क्यों क्योंकि उसने अपनी learning को कभी नहीं रोका चीजे सीखना यह जरूरी है काम हमीशा
00:10:37सीखना बस हो गया चल रहा है बस काम salary आ रही है time pass हो रहा है यह नहीं करना यह कब्भी भी मत करना हमीशा यह सोचना कि जब तक आप जिन्दा हो तब तक आपको काम करना है अपना best देना है ठीक है कोई भी काम कर रहो तो उसको ऐसे बैतर को जो करी नहीं सकता आप से best कोई
00:11:07क्या पता, मेरे से बेस्ट कर लो इस चीज को, ठीक है, तो बस इतना ही आज का ग्यान, इस साल का, अब अगले साल ग्यान दूँआ, मैं आपको जो भी दूँआ, क्योंकि अपन ख्लास स्टार्ट करेंगे,
00:11:18तन्जील करें कि सर मेरे STML CSS अब शुरू होगा अब होते अगे मैंने कल से जोइन किया है क्या करूँ कोई दिक्कत नहीं अगर कल से जोइन किया है तो
00:11:34आप जैसे ही जावा स्किप्ट स्टार्ट हो तब इसका रिवीजन कर लेना तब तक जैसे ही continue classes हो रही है उन continue classes को regular लो क्योंकि bootstrap अपन पढ़ने वाले है इसके बाद फिर जावा स्किप्ट स्टार्ट होगा तब आप बागी जीजे कवर कर सकते हो अपनी
00:11:48ठीक है तो इसका solution यही है अगर आप लेट हो कोई दिक्कत नहीं है जावा स्किप्ट जब स्टार्ट हो तब आपके पास 20 days आराम से 20 days मैं आपको बता रहा हूँ जहां पर मैं stml और css का जिक्र नहीं करूँगा तब तक आप इस चीज को cover कर सकतो इतना time आपके पास रहे�
00:12:18दिक्कत आती है तो doubt session के अंदर आप html css की चीजे भी पूछ सकते हो ठीक है कोई दिक्कत नहीं है अपन doubt session अगर आपके doubts है तो मैं doubt session में doubts के उपर ही discuss करूँगा क्योंकि वह important है क्योंकि जो recording लेते हैं उनके लिए doubt session important रहता है जो regular class ले रहे वो तो class में ही doubt पूछ रहे
00:12:48clear रहे हैं यहां तक की चीज
00:12:50sir मैं chat app बना रहा हूँ chat के लिए कौन सा package यूज करते है
00:13:19पैकेज चैट बना रहे हूँ तो जैसे मालो real time chat application आपको बनाने जैसे whatsapp की जैसे तो front end react
00:13:28से create कर लो ठीक है वीट का यूज कर लो tellwin css यूज कर लो backend में node express आपने पढ़ रखा है database में mongo tv यूज कर लो
00:13:35और real time communication के लिए socket i.o आता है अपने पास उसका यूज कर लो तो automatically बन जायागा ठीक है तो सारी चीजे इंस्टॉल कर लो अपना express mongo socket i.o
00:13:45course horizon.env और गया अपने बस विक क्रिप्ट जेसन हो गया जेसन वेब टोकन क्योंकि security करना है ठीक है तो यह सारी चीजे इंस्टॉल कर लो
00:13:54front end में भी यह सारी चीजे इंस्टॉल कर लो socket i.o क्लाइन के लिए भी आता है उसको इंस्टॉल करो और socket i.o आपके back end के लिए भी आता है तो उसको भी इंस्टॉल कर लो बैक end के अंदर इंस्टॉल कर लो उसको
00:14:04तो easy सा flow है चैट application बनाना कोई tough काम नहीं है बहुत easy है ठीक है
00:14:13ठीक है ठीक है ठीक है सर्फ बिना पूरा css पड़े bootstrap कैसे पड़े देख कोई दिक्कत नहीं
00:14:22bootstrap आपको आ जाएगी bootstrap मैं जब बताऊंगा तब आपको automatically पता चलेगी bootstrap आपको css फिर ऐसे लगए
00:14:29css तो टपती लेकिन bootstrap तो बहुत easy है जूनियर करें कि सर्फ ये सारे टैक हमारे course में include है
00:14:39yes बिल्कुल include है ताकि हम इसे type के project बना सके after the course in summer breaks
00:14:44yes बिल्कुल इस course को करने के बाद आप सारे projects बना सकते हो क्योंकि ये जो user gaming जो ये doubt पूछ रहे है ये previous batch के student है
00:14:52इन्होंने अभी बहुत project बना लिये है इन्होंने एक शायद lms project भी ये working पर है इनका
00:14:58इन्होंने e-commerce भी बनाया लMS भी बनाया और अभी शायद ये chat app बनाने की सोच रहे है मेरे हिसाब से
00:15:04तो ये इसको भी बनाने की सोच रहे हैं, तो ये भी बना लेंगे ये, तो आप course complete करने के बाद बना सकते हूं, बस concept clear करते वे चलो सारी चीज़े, जो भी project आप बनाने की सोच रहे हूं, वो बना सकते हूं, ठीक है?
00:15:15शिभूल करें सर, फिर Tailwind CSS का पढ़ाएंगे, Tailwind CSS अपना स्टार्ट होगा, जब अपना react स्टार्ट होगा, मैं react के साथ Tailwind CSS पढ़ाने वाला हूं, आपको, ठीक है? चलो, आपके doubt तो आते रहेंगे, अपन इन doubts को, अपन doubt session में discuss करेंगे, ये जो आपकी doubts को लेके, ये सारे, �
00:15:45ठीक है? क्योंकि अपन आगे चलते हैं, ऐसे फिर अपनी class बहुत कम होगी, और class कम होगी, तो फिर अपने चीजे cover नहीं होगी, और चीजे cover नहीं होगी, तो फिर अपन थोड़ा सा delay हो जाएंगे, और मैं नहीं चाहता कि आप delay हो, जितना जल्दी आप इस course को complete करोगे, उ
00:16:15लगी जॉब, ठीक है, तो अपने को बिल्कुल सही से चलना है, ताकि जल्द से जल्द अपनी जॉब लग जाए, और फिर उसके बाद experience ले, और अच्छा कासा आप package उठाओ, बस यही चाहता हूँ मैं, आज अपन बनाते एक project, ठीक है, मैं यहापर कहता हूँ project.html, और अ
00:16:45अपने देखी थी, सबको मैं एक साथ यूज करने वाला हूँ, media query, हर एक चीज को अपन एक साथ यूज करने वाले है, ठीक है, तो चलो अपन यहापर अपने project पे discuss कर लेते हैं, मैं यहापर boilerplate लगा लता हूँ, अपन एक portfolio बना लेते हैं, basic project बना लेते हैं, ना जादा tough, �
00:17:15bootstrap की base पे project होगा, जैसे अपन react पढ़ेंगे, तो react की base पे project होगा, ऐसे ही जैसे जैसे अपन बढ़ते जाएंगे, वैसे वैसे अपन उसी चीज के उपर अपन अपने projects बनाते रहेंगे, चीक है, तो चलो बाई, जल्दी से अपन अपन इसका structure बना लेते हैं, फिर उसके �
00:17:45tag ले लेता हूँ, ठीक है, header tag के अंदर अपन यहाँ पर अपनी एक तो navbar बना देंगे, ठीक है, उसके अलावा header tag के अंदर तो navbar ही आईगी, तो यहाँ पर मैं अपनी navbar बना देता हूँ, तो यहाँ पर अपन एक div tag ले लेते हैं, और इस div tag के अंदर अभी के लिए मैं ल
00:18:15आपना अपना
00:18:43मेरे पास मेरा अबाउट हो गया फिर उसके बाद मैं यहां पर कह देता हूं यह मेरे पास मेरी स्किल्स क्या क्या है वो मेंचिन कर दूँगा और उसके अलावा मेरे पास जो मेरे प्रोजेक्स है वो में यहां पर मेंचिन कर दूँगा और इसके अलावा अपन यहां पर कह द
00:19:13क्व्भी मैं यहाँ पर एक class देता हूं और class अपन देते हैं इसको नव बार ठीक है
00:19:18header को मैंने class दे दी और यह फोर्ट्फोलियो के लिए करके लिए इसको मैँ अपर एक class देता हूं और class बन कर देते हैं यह मेरे पास क्या है मेरा logo रहने वाला है फिर उसके
00:19:27अपने बाद नेव है अने लिस्ट है ठीक है ये सारी चीजें आपने पास यहां पर अपन बनाना जा रहा है streaming सुपश उकित परफिक है
00:19:35ठीक है,
00:19:37तो ये अपने सिर्फ header बनाए,
00:19:39जिसमें मैं यहाँ पर क्या कर रहा हूँ,
00:19:40एक newbar मैं यहाँ पर इस header के इंदर create करना चाहता हूँ,
00:19:44ठीक है,
00:19:44अपने काम करते हैं,
00:19:45यहाँ पर जो अपर यूज करेंगे,
00:19:47वो अपन यूज करेंगे अपने icons,
00:19:49आइकन्स और वो मैं यहाँ पर अपने फोंट ओसम वाले जो आइकन आते हैं वो मैं यहाँ पर यूज कर रहा हूँ
00:19:55फोंट ओसम अपने पास किया एक आइकन का पैकेज है जो अपन यहाँ पर यूज कर सकते हैं
00:19:59जैसे पर ने गूगल आइकन्स यूज़ करे थे वैसे ही मैं यहाँ पर
00:20:01font awesome वाले आइकन्स यहाँ पर यूज़ कर रहा हूँ
00:20:04font awesome के उपर यहाँ पर आते हैं ठीक है
00:20:06और इसको open कर लो
00:20:08देखो easy है कुछ भी अगर external यूज़ करना है
00:20:11तो इसको use करना बड़े easy है
00:20:13जैसे मैं यहाँ पर आइकन्स पर आता हूँ
00:20:14तो यहाँ पर यहाँ आपको बहुत सारा आइकन्स बताएगा
00:20:16कि आपको किस तरीकर का आइकन चीए
00:20:18ठीक है जैसे मालो मैं को यहाँ पर code का आइकन चीए
00:20:20तो मैंने यहाँ पर लिखा code
00:20:21ठीक है तो जैसे मैंने यहाँ पर code लिखा तो मिरे पास यहाँ पर code के icon आ जाएंगे
00:20:25अब अपने को तो चीए free वाले तो free वाले यहाँ पर आ जाओ
00:20:28यह सारे free वाले icon अब में को यह वाला icon यूज करना है तो यह रहा इसका
00:20:32यहाँ पर use करने का जो अपने पास code है इस पर click करती ही copy हो जाएगा उससे पहले उससे पहले इसका जो अपने पास
00:20:42version है सब सही है icons के उपर एक बार आओ और
00:20:48यह कहाँ पर देता है एक minute चेक करना पड़ेगा में को
00:20:54ठीक है icons पर अपने को कौन सा चीह है मैं यहाँ पर कह रहा हूँ कि मेरे को code वाला icon चीह है ठीक है
00:21:02मैं code वाला icon के उपर आ जाता हूँ और यह अपने पास यह अपना icon है
00:21:07font awesome की कहाँ पर आती है एक minute में को चेक करना पड़ेगा ठीक है ठीक है ठीक है ठीक है इसने इसका CDN कहाँ पर दे रखा है
00:21:27विदाउट CDN तो पर इसको यूज नहीं कर पाएंगे
00:21:57कोड़ वाला पर ने सर्च करा मैं यहाँ पर एंटर करता हूं ठीक है और अपने पास यह code वाला है इसका CDN कहाँ पर देता ही है
00:22:07font awesome का CDN कहाँ पर आता है
00:22:21डॉक्स के पर आओ इसकी एक बार डॉक्स के पर होगा में भी
00:22:45अंगुलर रीक्त वार्डप्रेश ठीक है नहीnd सपोर्ट पूर्ट
00:22:55विज्वाज हूं
00:22:59अने यह सब्सक्राइब का पान फार्श रल सब्सक्राइब
00:23:15इसको लॉग इन करना पड़ेगा कि अपने को
00:23:18वेट ए मिनेट वेट ए मिनेट गाइस
00:23:29ये इमेल आ गई इस इमेल के उपर पर इसको कर देता है
00:23:48एक्सेप्ट
00:23:49इस पर अकाउंट था तो सही ये लॉक आउट कैसे हो गया
00:24:14चलो कोई बात नहीं गूगल आइकन यूज़ कर लगते पन
00:24:17इतनी महनत करने से अच्छा है गूगल आइकन यूज़ कर लेते
00:24:21इसको कहीं और यूज़ कर लेंगे
00:24:22मैं आपर गूगल आइकन पर आजाता हूँ
00:24:25और गूगल आइकन पर आके अपन सर्च कर लेते
00:24:27अपने को क्या चीए अपना कोड का जो आइकन है
00:24:29वो अपने पास आ जाए तो देखो यहां पर code के icons यह आ रहे है यह वाला मैं use करना चाहता हूं तो यहां पर अपन इसका जो link है वो अपने पास इसका जो link आ रहा है यहां पर आ रहा है यह रहा
00:24:45setting icon font two
00:24:47ठीक है तो इसको यहां से copy कर लो और copy करके कहा पर लगा ओगा अपने this jacket
00:24:55जो अपने पास यहां अपना यह head आता है head के अंदर अपने इसको use करते तो मैं यह यहां पर head के अंदर उसको use कर लिता हो
00:25:03तो ये तो अपने पास क्या गया अपना जो icon का link है वो अपने यहाँ पर लगा दिया
00:25:07उसके अलावा अपन यहाँ पर इस icon को भी यहाँ से क्या कर लेते हैं
00:25:12copy कर लेते हैं जो अपने को icon लगाना है
00:25:14इसके पहले ही मैं लगाना चाहता हूँ तो यहाँ पर मैं उसको paste कर देता हूँ ठीक है और इस file को पने एक बार के लिए run करके देखते हैं कि अपने क्या यहाँ पर create हूँ क्या रहा है ठीक है तो देखो यहाँ पर इस तरीके से अपने पास यह create हूँ क्या रहा है परफेक्
00:25:44अपने सिर्फ आइकन लगाया और कुछ ही नहीं किया ज्यादा बड़ी चीज नहीं करी आगे चलता है अपन इसी के अंदर अब देखो मेरे को यहाँ पर क्या करना है नेव बार बनानी है तो यहाँ पर नेव बार बनाने के लिए अपने सारी क्लासेस इसको देई दिये अब
00:26:14सबसे पहले तो मैं यहाँ पर अपना युनिवर्सल सेलेक्टर लगा रहा हूँ और युनिवर्सल सेलेक्टर लगा के कर रहा हूँ कि मार्जिन को जीरो कर देना और पैडिंग को यहाँ पर क्या कर देना जीरो कर देना
00:26:24margin और padding दोनों चीज़ को यहाँ पर zero कर देना
00:26:27दूसरा मैं यहाँ पर कह रहा हूँ कि जो box sizing है
00:26:29वो आप यहाँ पर कर देना border box
00:26:31मतलब जो आपकी किसी भी element की width होगी
00:26:35और जो height होगी उसी के अंदर उसकी padding include होनी चीए
00:26:39और उसी के अंदर उसकी border include होनी चीए
00:26:41इसलिए मैं यहाँ पर box sizing border box यहाँ पर लगा रहा हूँ
00:26:44उसके अलावा एक property all लगा रहा हूँ
00:26:46scroll behavior मतलब इसका जो scroll होगा वो बिलकुल smooth होना चीए
00:26:50अपन जो website को scroll करते हैं वो बिलकुल smooth होना चीए
00:26:53इतना सा काम मैंने यहाँ पर करा तो देखो यहाँ पर यह इसकी जो margin padding थी वो zero हो चुकी है
00:26:59अब उसके बाद next अपन यहाँ पर चलते हैं अपने क्या दिया है class अपने class दिये new bar
00:27:04इस new bar वाली class को मैं यहाँ पर target कर लेता हूँ
00:27:07मैं कहता हूँ dot new bar इसको यहाँ पर मैंने target किया ठीक है
00:27:11उसके अलावा आपन यहाँ पर कहते हैं कि इसकी width जो है वो आप 100% कर देना
00:27:16इसके उपर आप लगा देना अपना display flex क्योंकि अपने new bar पहले भी बनाई थी ठीक है
00:27:21और मैं यहाँ पर कहता हूँ justify content और space between आप कर देना
00:27:25मतलब दोनों के बीच में space जो आपने यहाँ पर एक तो div ले रखा है
00:27:28ठीक है format कर दो इसको थोड़ा सा आपने यहाँ पर जो यह div ले रखा है
00:27:32logo वाला और यह जो nav ले रखा है इन दोनों के बीच में space between कर देना
00:27:36ताकि एक दूसरे के इधर इधर आ जाए तो यहाँ पर यह इधर आ रहा है और यह इधर आ रहा है
00:27:40ठीक है फिर उसके बाद अपन next आगे चलते हैं और कौन कोन सी properties अपन लगा सकते है
00:27:45align item अपन इस पर लगा देते हैं ताकि वो center में आ जाए तो मैं यहाँ पर कह देता हूँ align item और इसको अपन कह देते हैं अपना center के अंदर रहना चाहिए
00:27:54align item center के देता हूँ padding में यहाँ पर इस पर लगा देता हूँ padding में लगाई 20 पिक्सल की top bottom से और उसके अलावा 70 पिक्सल की में यहाँ पर left right से इसके उपर padding अपने इस due के उपर ठीक है
00:28:07यह जो new bar है इस new bar के उपने पर padding लगा रहे है अब एक background color में यहाँ पर देता हूँ और background color अपन यहाँ पर देता है जैसे
00:28:16RGBA
00:28:19और उसके अंदर में यहाँ पर value देता हूँ
00:28:23या फिर अपन blue color देता हूँ
00:28:26value देने से अच्छा blue color में आपर देता हूँ
00:28:28ठीक है और इसको अपन change कर लेते है
00:28:31यह इस तरीके से अपन यहाँ पर इसको change कर देते
00:28:35ठीक है मैं यहाँ पर कह देता हूँ
00:28:38यह अपने पास क्या आ रहा है value यहाँ पर अपने इसको यह वाली value दे देते हैं ठीक है
00:28:4615 15 और यह अपना यह वाला color है
00:29:03ठीक है यह color अपने इस पर दे देते हैं तो यह color अपना इस पर
00:29:07साइट हो जाना चाहिए तो रसा dark सा color इस तरीके से ठीक है यह color मैं नहीं आपर दिया है इसकी यह
00:29:12change करो opacity थोड़ी सी change करो 0.53 ना दे के अपने इसको देते हैं जैसे 0.8 देता हूं मैं इसको ठीक है थोड़ा सा dark रहना चाहिए वह थोड़ा सा dark कर लो इसको ठीक है तो इस तरीके से अपने पास ही आ रहा है उसके अलावा अपन इस पे एक property और लगा रहा हूं और वह है अ�
00:29:42इसको blur रखना ठीक है 10 pixel blur रखना कब blur होगी जब अपनी यह scroll होगी तब यह blur होने वाली है क्योंकि background filter आपका scroll के बाद blur लगाता है उसके उपर ठीक है देखो किस तरीके से लगाएगा वह भी अपन लगाते है उसके अलावा मैं इसको position देता हूं और position मैंने यहाँ पर दे
00:30:1210 क्योंकि जो content है उससे आगे रहनी चीए 10 का मतलब मैं इसको आगे रखना चाता हूं और content इसके पीछे दिखता रहना चीए जैसे यह scroll हो उस हिसाब से इतना सा काम मैं आपर कर रहा हूं उसके बाद next अपने पास जो अपनी नेवबार है उसके अंदर अपने पास क्या रह
00:30:42आर यह मतलब यहाँ पर जो अपना root element है उससे मैं यहाँ पर इसको phone size दे रहा हूं तो 1.5 REM मैं यहाँ पर इसको अपनी phone size दे देता हूं ठीक है तो यह अपने पास इस तरीके से अपने को show हो रहा है ठीक है कोई दिकत नहीं है उसके अलावा मैं यहाँ पर इसको color भी दे �
00:31:12लोगो जो है उसके अंदर जो मेरे पास span tag है उसको मैं आपर अलग से target कर लेता हूं और उसका color मैं आपर कर देता हूं change ठीक है और color मैं आपर कर देता हूं जैसे orange color मैं आपर देना चाहता हूं उसको तो वो orange color के अपने पास दिखना चाहिए ठीक है
00:31:27परफेक्ट कोई दिक्कत नी है
00:31:29फिर उसके बाद अपने पास
00:31:31नेवबार के अंदर अपने पास क्या अपनी
00:31:33अनॉडरल लिस्ट तो उसको भी मैं यहाँ पर
00:31:35टार्गेट कर लेता हूँ
00:31:36मैं कहा देता हूँ मेरे पास जो नेवबार है
00:31:39उसके अंदर जो unorder list है
00:31:40उसको मैं यहाँ पर target कर रहा हूँ
00:31:42और इसके उपर अपन क्या लगाएंगे अपना display flex
00:31:45क्योंकि सब एक ही line में आने चाहिए
00:31:46तो इसके उपर अपन लगा देते हैं क्या अपना
00:31:49display और
00:31:50वो मैं यहाँ पर क्या लगाऊँगा अपना
00:31:53flex अपन पढ़ चुके display flex
00:31:55display flex में आप लगा
00:31:56सब के बीच में gap भी लगा देता हूँ
00:31:5820 pixel का मैंने gap कर दिया तो सब के बीच में
00:32:00आपर gap भी हो जाना चाहिए तो को इस तरीके से
00:32:02home about skill यह साले चीज़ इस तरीके से आ रही है
00:32:05फिर उसके बाद अपन एक का more करते है
00:32:08और वो अपन करते हैं यहाँ पर
00:32:10इसका list style type और उसको मैं यहाँ पर क्या कर देता हूँ
00:32:14none यह क्या करता है जो bulletin sign है उसको हटा देगा
00:32:17तो home about इसके लिए इस तरीके से अपने पास आ रहे है
00:32:20फिर उसके बाद अपने जो नेव बार है
00:32:23उसके अंदर अपने पास क्या आ रहे है अपने anchor tag
00:32:25उसका color change कर देते है
00:32:27color अपन यहाँ पर कर देते है white color ताकि दिखाई दे
00:32:29तो मैं आपर कहता हूँ dot to
00:32:31नेव बार उसके अंदर जो anchor tag है
00:32:33उसको मैंने यहाँ पर target किया
00:32:35और उसका color मैंने यहाँ पर change करके के लिए
00:32:37कि आप अभी ही लिए white color इसका कर देना
00:32:39ठीक है और text decoration अपन यूज़ करेंगे
00:32:42उसकी underline हटाने के लिए
00:32:44और बस इतना सा काम करके देखो कैसा दिखाया हो
00:32:47तो यहाँ पर home, about, skills, project और contact
00:32:51इस तरीके से अपने पास यहाँ पर create होके आ रही है
00:32:56यह नवबार अपने पास यहाँ पर create होके आ रही है
00:32:58ठीक है
00:33:00एक बार phone और some वाले icon थोड़े अच्छे रहते हैं
00:33:04bold icon आते हैं उसको पर bold कर पाते हैं
00:33:06एक बार मैं इसको देखता हूँ
00:33:07इसको login करना पड़ेगा एक बार के लिए मैं login कर लेता हूँ
00:33:11sign in कर लेते हैं पनियाँ पर आके email id
00:33:13आस्वोड में को भी याननी है
00:33:30आस्वोड में को भी याननी है
00:33:37आस्वोड में को भी याननी है
00:34:07ये क्या इश हुआरा है इसके बार
00:34:37कि वेट इमेल आई होगी इमेल पर चेक करता हूं एक बार
00:34:42ये तो ब्लैंक में ले आरी है कि तो
00:34:49पिर बТыवे होगी है
00:35:00जित're ब्लैंक में ले इसके तो
00:35:01जित
00:35:05पिर ब्लैंक मेल आए इसके तो
00:35:09जित Northern Northern Northern Northern čas
00:35:11जित Northern Northernitas ।
00:35:14झाल झाल
00:35:44ठीक है चलो कोई बात नहीं
00:35:45आइकन अपन यूज़ कर लेंगे इसको चेक करना पड़ेगा मेंको
00:35:55अच्छा ये बेज़ आना इसी को यूज़ कर लेता हूँ चलो मैं
00:36:05आपकी अकाउंट को यूज़ कर लेता हूँ कोई दिक्कत नहीं है
00:36:08यहाँ पर अपन इसको लगा देते हैं यह मैंने यहाँ पर लगा दिया और मैं यहाँ पर आता हूँ और यहाँ पर आके अपन क्या करेंगे अपना जो आइकन से वो यूज कर लेते हैं तो मैं यहाँ पर आता हूँ और फॉंट उसम पर आके अपन यहाँ पर आइकन देखते
00:36:38यहीं मिया पर यूस करते हूं। इस प्लिक करना एक ना यहाँ यहाँ सर्दिन मैं यहाँ आई पर पे
00:36:48प्लिफ कर देता हूं। ध्यांपर आ कि अपना आइकन आ या नहीं आ
00:37:02एख़ए हैं कि मैं गाए सरे दोर照 में लिख दोरुकन थेरी आजड़ में अनны नथे
00:37:08कि यह लिंक तो वर्क नहीं कर रहा है हाँ पर
00:37:28कोई भी एक बार बेजो मेरे को
00:37:33कोई भी सीडियल लिंक बेज दो एक बार क्योंकि मेरे लॉग इन नहीं हो रहा एक सीडियल लिंक बेज दो उसको उपन यूज कर सकता है कोई दिक्त नहीं उसमें
00:38:03कि यहां पर लगा दो इसको यहां पर आजाओ चेक कर लो यह आगया अपने पास ठीक है अप सही है तो यहां पर यह अपना
00:38:21ये अपना जो फॉंटो सॉमवाला अपने लगा है वो अपने पास है अपर यूझे कर पा रहे है
00:38:29परफेक्ट शलो अब देखो यहां पर अपने जो स्पैण टैग लेखायए स्पैंड ना लेके हब अपने यहां आई टैग है यहां पर कैके इसको कहते हूं ये जो आई है उसके ऊपर मैंने यहां पर कलर कि आए तो वह अपने पास इस
00:38:55तो अपनी नेवबार है, उसके अंदर anchor tag के उपर, अगर मैं क्या करूँ, hover, ठीक है, anchor tag के उपर, अगर मैं यहाँ पर hover करूँ, तब मिले को यहाँ पर उसका color जो है, वो अपन औरेंज कर देते हैं, ताकि वो औरेंज color अपने को यहाँ पर दिखाए देते हैं, तो होम अबा
00:39:25कर दो यहि रहा है जिसको में याँ पर कह रहा है ठाई आध मिनात रहा हूं यह व्य क kijken करते हैं सबूट
00:39:40और में यहांपर इस साथ में या पर इसको क्लास भी देता हूँ इतिक
00:39:54इनल पर करने फिर उसके बाद नैक्स और अपने को यहां पर क्या करना है नेक्स म्हां पर अपना márफ
00:40:03यहां पर एक class ले लेता हूँ, hero content करके,
00:40:08ठीक है, hero content के अंदर अपन अपना पूरा content जो है,
00:40:11वो अपन यहां पर लिख देते हैं, ठीक है,
00:40:13जैसे मैंने एक h1 tag लिया, और उसके अंदर लिख देते हैं,
00:40:16hello I am, और मैं यहां पर कहतेता हूँ,
00:40:24जो भी मेरा name में को लिखना है, कि spend tag ले लेता हूँ,
00:40:27उसमें मैं यहां पर कहतेता हूँ, देवान्चू, ठीक है,
00:40:30hello I am देवान्चू, यह चीज मैंने यहां पर लिख देता हूँ,
00:40:33ठीक है, फिर उसके बाद अपन यहां पर एक अपना paragraph tag ले ले लेते,
00:40:37और उस paragraph tag के अंदर में लिख देता हूँ,
00:40:40कि यह मैं क्या हूँ, मैं कहा देता हूँ,
00:40:42फुल स्टैक डेवलेपर, ठीक है, यह आप सब लिख लेना,
00:40:45जो भी आप लिखना चाओ, मैं यहां पर कहता हूँ,
00:40:46फुल स्टैक डेवलेपर, ठीक है, उसके अलावा मैं यहां पर कहता हूँ,
00:40:50ट्रेनर, ठीक है, और क्या कहूँ, और क्या क्या क्या क्या क्या क्या कॉंटेंट क्रियेटर,
00:40:58जैसे मैं यहाँ पर कहता हूँ content creator चीक है यह मैंने यहाँ पर कह लिया फिर उसके अलावा अपन यहाँ पर अपने चुछ शूशल मीडिया लिंक्स है वो भी मैं यहाँ पर लगा जाता हूँ इंडिव लेके उसके अंदर चीक है तो अपने एंका टैक ले देते हैं मैं यहा�
00:41:28एक तो अपने को क्या चीए अपना github यह रहा github इसको copy कर लो यहाँ पर अपना लिंक्डिन तो मैं यहाँ पर यूज कर लेता हूँ और यहाँ पर लगा दू और एक अपन यहाँ पर ले लेते हैं अपना क्या एक अपन ले लेते हैं यहाँ पर अपना इंस्टाग्राम
00:41:58यह रहा इंस्टाग्राम ठीक है इंस्टाग्राम ले लेते हैं तो यह लो मैंने यह पर इंस्टाग्राम लगा दिया ठीक है तो यह डिव लिया है इसके अंदर अपने यह काम किया है इसको मैं यह आपर एक क्लास देता हूं और मैं यह आपर क्लास देती है उसके अलावा इस
00:42:28gerekory लेने तरहिए अफंग का पर है इस पर नगा देते हैं अपना on पर स्थे रही है टिकरियों क unto यहां पर आजाओ और आपने रखिए क्छा देए हेरो क्लास के लिग
00:42:58यहाँ पर कहता हूँ आप 100 VH रखो इसकी height ठीक है hero section की जो height है वो आप कितनी रखो 100 VH रखो अभी इस तरीकी जा रहा है उसके बीचे आ रहा है सही करते हैं ठीक है उसके अलावा मैं आपर कहता हूँ display जो है वो आपको flex रखना है ठीक है justify content आप यहाँ पर कर दो अपना center के
00:43:28में आ चुका है ठीक है जो content वाला div है उसको मैं center में लाना चाहता हूँ इसकी मेरे center में आ गया पहले मैंने लगा justify content horizontally align item अपने बास vertically center में आ गया ठीक है यह मैंने यहाँ पर करा और मैं text को भी align करके यहाँ पर करता हूँ कि आप center में रखो text को भी ठीक है क्योंकि text की property सब
00:43:58पिक्सल की आप यहाँ पर टॉप से पैडिंग लगाने जबी स्क्रॉल होगा तो विल्गुल सही आएगा अपने पास ठीक है तो यह तो hero section है फिर उसके बाद hero section के अंदर अपने यहाँ पर अपना hero का जो content है उसके अंदर अपने h1 tag ले रखा है paragraph tag ले रखा है यह अपना
00:44:28लगा देता हूँ अपना display और flags ठीक है content के उपर मैंने display flags लगा है क्यूं लगा है देखो अभी अपने इसको बनाते है फिर बताता हूँ और जो flags direction है वो मैं column wise ही कर देता हूँ कि आप
00:44:40और column wise ही रखो क्योंकि मैं यहाँ पर इसको arrange करना चाहता हूँ तो column wise ही रहेंगे आपके flags direction ठीक है उसके अलावा align item आप यहाँ पर क्या कर देना
00:44:50इस पर display flags लगाने की need नहीं है वैसे hero content के उपर हटाओ इसको कोई need नहीं है क्योंकि अपने पहले से display flags लगा रहा है तो रहने दो
00:45:00मैं तो जो मेरा hero का जो content है उसके अंदर h1 tag को मैं ले लेता हूँ ठीक है और h1 tag को मैंने यहाँ पर target किया इसकी phone size मैं यहाँ पर change करता हूँ और phone size मैं यहाँ पर कहता हूँ जैसे phone size जो है वो आप यहाँ पर रखना 3rem ठीक है 3rem मतलब जो आपका root element है उसका यहाँ पर 3 time �
00:45:30फिर h1 tag के अंदर आपने span tag भी ले रखा है इसका color change कर दो तो मैं यहाँ पर कहता हूँ कि मेरे पास जो hero content है उसके अंदर अपने पास यहाँ पर क्या है अपना h1 tag के अंदर जो span tag है उसको मैं यहाँ पर target करना चाहता हूँ और उसका color मैं यहाँ पर change करना चाहता हूँ ठ
00:46:00यहां पर यह वाला कलर में देतों तो यह कलर अपना इसके उपर हो जाना चीए है ठीक है फिर उसके बाद अपन यहां पर जो अपने
00:46:22इसके पास अपना चीए ठीक है सब कुछ सःी है outs कि मैं काम करते हूं बैग्डारौन के उपर लगा जाएं यहां पर लिट क कर रहां और बॉडी की उपर ही क्या
00:46:46करों ना iç बैग्राउं और से क्वाइव एव दिगरींट लगाता हूं और वह लगते हैं वन थटीफाइव डिगरी की ऊपर ठिक है ये कलर मैं
00:46:55बना रखा तो यही इसके ऊपर पास करता हूं जो मैंने बना रखा है वह मैं यहां पर कहता हूं
00:47:000
00:47:01ठीक है
00:47:020F
00:47:03172
00:47:06यह hex code है
00:47:07जो मैं यहाँ पर लिख रहा हूँ
00:47:07और 8
00:47:08ठीक है
00:47:09यह पहला code मैंने यहाँ पर लिखा
00:47:11और second code मैं यहाँ पर देता हूँ
00:47:12hash
00:47:13ठीक है
00:47:141E
00:47:1629
00:47:18और अपन यहाँ पर कहते है
00:47:193B
00:47:20यह मैंने यहाँ पर इसको
00:47:21ये second color यहाँ पर दे दिया
00:47:23और जो इसका color आप रखना चाहते हो
00:47:25वो color code भी मैं यहाँ पर देता हूँ
00:47:27इसको एक fix color code मैं आपर रख रहा हूँ
00:47:29जो मैं यहाँ पर दे रहा हूँ
00:47:30F8 ठीक है
00:47:31और F8 F8 F8 ना करके
00:47:35मैं यहाँ पर कहलता हूँ
00:47:36F8 F8 और Fc
00:47:38ठीक है ये color code में यहाँ पर देगा हूँ ये white type में ही color रहेगा तो इस तरीके से आपको यहाँ पर ही दिखाई देने वाला है
00:47:45ये जो मैंने linear gradient लगाया वो पूरे body के उपर ही लगा दिया तो थोड़ा सा अच्छा लगेगा वो
00:47:50ठीक है body के उपर ही मैंने linear gradient यहाँ पर इस पर apply कर दिया तो यह अपने पास इस तरीके से आ रहा है इस दिवान शू का जो color है वो भी मैं यहाँ पर change कर देता हूँ
00:48:00यहाँ पर आओ यहाँ पर आओ इसको भी मैं hex code ही देता हूँ जैसे ठीक है और इसको पन hex code देते है अपना जो यह अपने पास आ रहा है अपना
00:48:10अपना h1 tag के अंदर जो spend tag है उसको तो यहाँ पर मैं देता हूँ जो से 38 38 38 दे देगा यह कौन सा color code रहेगा यह वाला रहेगा चेक करूं क्या आ रहा है इसके अंदर नहीं यह चानल लग रहा
00:48:26जाने हम त्री एट और अपन इसको देते हैं जैसे बीडी और यहां पर अपन देते हैं इसको f8 त्यक्ति इसका ब्लू टाइप में color रहेगा या फिर
00:48:45प्रोपर्टी आपको याद आनी चीए जो मैं यह आपर यूज कर रहा हूं हर एक प्रोपर्टी आपको याद आनी चीए ठीक है
00:49:06क्योंकि यह मैंने पहले से सारी जो क्लासेज है वो लिख रहा की है ठीक है वो सारी मैं यहाँ पर color combination इसकुपर लगा रहा हूं अपने लगाए cbd5
00:49:17हैश करके लगाया c लगाया अपने b लगाया d लगाया e और पाइप और यहाँ वाला combination मैं यहाँ पर दे रहा हूं ठीक है तो यह क्यूपर अपने दे दिया जो अपना यह paragraph टैग है उसके उपर लगा दिया अपने ठीक है और जो paragraph टैग है उसमें अपन margin टॉप भी देते �
00:49:47अपने पास अपना बटन भी आ रहा है बटन को भी मैं यहाँ पर कर देता हूं यह जो बटन आ रहा है इस बटन को भी पन चेंज कर देते जल्दी से ठीक है तो मैं यहाँ पर कह देता हूं
00:49:57शोशल मीडिया आइकन भी तो आ रहा है अपने पाश
00:50:00यह जो
00:50:02शोशल लिंक्स करके अपने दिया है
00:50:04इसको पहले टारगेट कर लेता हूँ
00:50:05तो मैं यहाँ पर कहता हूँ
00:50:07डॉट शोशल लिंक्स को जो अपने यहाँ पर
00:50:09टारगेट किया है
00:50:09ठीक है, उसके उपर अपन कहा देते हैं, पहला तो मैं margin कहा देता हूँ, top से, वो अपन यहाँ पर कहा देता है, जैसे 15 पिक्सल की आप लगा दो margin top से, तो ये इस तरीके से margin यहाँ पर आ जाने चाहिए, margin यहाँ पर create हो गई, जो अपने पास social link है, और इसके अंदर अपने �
00:50:39color दिया है, वो ही same color इसके उपर देता हूँ, ठीक है, फिर उसके बाद मैं यहाँ पर इसकी phone size पी change कर देता हूँ, वो मैं यहाँ पर कहता हूँ, 1.5 REM आप यहाँ पर इसकी phone size रखना, ठीक है, और मैं यहाँ पर इसको कहा रहा हूँ, margin लगा देना, और margin अपन कहा देते है
00:51:09इसको तो मैं यहाँ पर कहता हूँ, जो social links है, उसके अंदर anchor tag के उपर, अगर मैं यहाँ पर hover करूँ, तो जो इसका color है, वो आप यहाँ पर orange कर देना, क्योंकि hover पर आप एक common color लेके चल रहे हो, orange वाला, तो सब पर, जब भी मैं किसी पर भी hover करूँ, तो उसका color orange हो जाना
00:51:39ठीक है, इसको मैं यहाँ पर एक display property दे रहाँ, और वो मैं दे रहाँ, inline block, अब inline block क्यों दे रहाँ, क्योंकि अपने पास यो button है, उसको अपन यहाँ पर width और hide भी देना चाते है, ठीक है, मैं इसको set करना चाता हूँ, इसलिए मैं यहाँ आपर inline block दे रहाँ, और इसको
00:52:09text decoration नन नहीं हुआ कि इसके उपर button के उपर हो गया, ठीक है, अब उसके अलावा अपन यहाँ पर जो अपना color है, वो मैं यहाँ पर color कहा देता हूँ, कि आप इसका color रख लेना white, ठीक है, white color रख लेना कोई दिक्कत नहीं है, white color अच्छा लगेगा, यह white color मैं यहाँ पर कर �
00:52:39लगा देते हैं, top से लगे हाथ, तो मैं यहाँ पर कहता हूँ, margin top से आप लगा देना, और वो आप लगा देना, जैसे 20 pixel की margin आप इसके उपर apply कर देना, तो इस तरीके से अपने पास ही आ रहा है, ठीक है, उसके उपर border radius भी लगा दो, तो मैं यहाँ पर कहता हूँ, border radius, मै
00:53:09तब क्या होना चाहिए, मैं यहाँ पर कहता हूँ, यह जो dot btn है, अगर इसके उपर मैं hover करूँ, तब आपको यहाँ पर इसका जो background color है, वो आपको orange करना है, बस, इतना असा काम करके देख लो, यह higher me का button इस तरीके से अपने पास यहाँ पर आना चाहिए, ठीक है, तो य
00:53:39सिर्फ अपना इतना सा part अपने यहाँ पर cover करा है, अपना एक तो नयवार अपने यहाँ पर बने अपने इसकी, दूसरा अपने यहाँ पर अपना hero section यहाँ पर ready करा है, अपने इस portfolio का, ठीक है, यह portfolio आप बनाना, इसके अंदर और भी बहुत सारे चीज़े अपन add करेंगे
00:54:09यहाँ पर बना देंगे, यहाँ तक की अभी बिल्कुल perfect है, यहाँ तक अभी अपना बिल्कुल perfect चल रहा है, कोई दिक्कत नहीं है, इसके अंदर, ठीक है, तो यहाँ तक की चीज़ के लिए रहे, कोई doubt नहीं है किसी को
00:54:34यहाँ तक की चीज़ के लिए रहे, तो एक बर बताओ, यहाँ तक की चीज़ के लिए रहे, कोई doubt नहीं है, ठीक है, गैस के लिए की सर नयवबार को जैड इंडेक्स क्यों देते है, देखो जैड इंडेक्स अपन नयवबार को इसलिए देते है, जब मैं इसको स्क्रॉल क
00:55:04क्यों कि जब आप इसको स्क्रॉल करोगे
00:55:07जैड इंडेक्स का मतलब है कि आप अपने
00:55:09element का stacking order क्या रहना चाते हो
00:55:12अब मैंने जैड इंडेक्स 10 इसलिए का है
00:55:14कि जितने भी जब भी ये स्क्रॉल हो तो
00:55:17नयवबाट टॉप पे रहनी चीए
00:55:19इसके पीछे सारा content scroll होता रहना चीए
00:55:21अगर मैं जैड इंडेक्स नहीं देता
00:55:23तो क्या होता इसके उपर भी आ सकता था content
00:55:27जैसे मालो ये अपने position किसी की set कर रखी
00:55:30नीचे मैंने किसी element की position set कर रखी
00:55:32तो वो इसके उपर से जाएगा वो
00:55:34नेवबार के उपर से जाएगा ठीक है
00:55:36मैं चाता हूँ नेवबार के पीछे से जाए
00:55:38आगे से ना जाए ठीक है
00:55:40क्योंकि आगे से जाएगा तो अच्छे नहीं लगेगा
00:55:42तो नेवबार हमीशा आगे रहनी चीए
00:55:43इसलिए मैंने z index 10 दिया है
00:55:45ठीक है 10 value दिये मतलब जितने भी
00:55:47elements हो 10 से जाएगा वैसे तो
00:55:501000 भी देते है अपन 1000 देते कई बार
00:55:51कि अगर बड़ी website है तो
00:55:5410 से भी काम चल जाएगा ठीक है
00:55:56अगर नहीं चले तो अपन इसकी value बढ़ा देंगे
00:55:58तो ये z index होता है मतलब stacking order
00:56:00मैं याँ पर दे रहा हूँ
00:56:01ठीक है
00:56:03backdrop filter
00:56:08backdrop filter मैंने याँ पर क्यों दिया है
00:56:10अभी ये भी work नहीं करेगा
00:56:12क्योंकि जब तक scroll नहीं होगा तब तक ये चीज
00:56:14वर्क नहीं करेगी backdrop filter जो मैंने
00:56:16याँ पर दिया है ये blur के लिए
00:56:18जैसे आप scroll करोगे
00:56:20तो आपकी जो ये
00:56:22नयुबार है ये blur हो जाएगी
00:56:24याँ पर
00:56:24scroll पर blur हो जाएगी अभी अपने बना ही नहीं इसको
00:56:27पूरी इसलिए ये चीज अपने को दिखाई नहीं दे रही
00:56:29जैसे मैं इसको scroll करूँगा तो ये blur हो जाएगी
00:56:31अपने पास ठीक है तो ये अपना
00:56:33बैकडरॉफ फिल्टर होता है
00:56:34ठीक है आरेस्टी करें सर कैन वी यूज
00:56:47इम टैग स्टीड आफ आई टैग देखा आई टैग अपने जो यूज लिया है
00:56:52वो अपने फोंटोसम का ही टैग है इसलिए उसी के साथ आ रहा है
00:56:55पहले से बनावाई इसलिए मैं या पर आई टैग में यूज नहीं ले रहा हूँ उसमें बनावाई उसी को यूज ले रहा हूँ ठीक है
00:57:00इम भी यूज ले सकते है
00:57:02अटनेंस के पॉइंट वन के अंदर आपको मेंचन करना है
00:57:13प्रोजेक्ट
00:57:15अटनेंस के पॉइंट वन के अंदर आपको मेंचन करना है प्रोजेक्ट
00:57:21यह अटनेंस का पॉइंट वन है
00:57:23ठीक है
00:57:24अटनेंस के पॉइंट वन के अंदर आपको मेंचन करना है क्या
00:57:27प्रोजेक्ट
00:57:29इसी के साथ मैं आपको attendance का point 2 भी बता देता हूँ
00:57:34क्योंकि class का time हो चुका है वैसे तो आज का
00:57:37और कल अपनी class नहीं है एक तारिक को भी अपनी class नहीं है
00:57:41ठीक है तो enjoy करो आप अपने new year को
00:57:45attendance के point 2 के अंदर आप portfolio लिखोगे
00:57:51typing होते वे skills का content कैसे आता है सर ठीक है
00:57:57यह अपन लगाएंगे इसके अंदर सब चीजे लगाऊंगा मैं इसके अंदर
00:58:00एक अच्छा सा UI आपको बना के देने वाला हूँ मैं ठीक है
00:58:04ताकि आपकी properties clear हो
00:58:07animation भी लगाएंगे अपन transition भी लगाएंगे अपना इसके अंदर ठीक है
00:58:11तो वो typing होते वे दिखेगा आपको no tension
00:58:13सब कुछ done हो गया है
00:58:20real chat के लिए package name socket io का use करते है
00:58:24yes बिल्कुल socket io का use करते है
00:58:26sir java से app development कर सकते है
00:58:28yes बिल्कुल कर सकते है
00:58:29java से कर सकते हो आप app development
00:58:39वागी अगर आप react पर रहे हैं तो react native के साथ भी जा सकते हो
00:58:46app development के लिए है
00:58:48और मैं तो आपको suggest करता हूँ कि आप इसको use करो
00:58:51flatter flatter ज्यादा use होता है वैसे app development के लिए
00:58:58क्योंकि वह android और ios दोनों में use हो जाता है अपना flatter ठीक है
00:59:03java सिर्फ android की बात होती है अपनी
00:59:07तो अगर आप app development सीखना जाते हो तो flatter के साइड जाओ
00:59:13flatter best है और react native तो है उसके लिए तो मैं आपको बोली रहा हूँ
00:59:19react native का कितना demand है react native का demand है क्योंकि development यह app development में आता है
00:59:27flatter और react native दोनों की demand है
00:59:30ठीक है क्योंकि react जो native है वह basically web dev के background से ही आ जाता है आपका
00:59:47तो web dev के background से अगर अपन बात करें तो वहां पर इसको यूज ले सकते हैं
00:59:53Salesforce developer क्या होता है Salesforce अपने इस चीज से अलग है ठीक है हर चीज के developer होता है
01:00:14जैसे app developer होता है web developer होता है ऐसी ही Salesforce का भी developer होता है जो पूरा cloud का जो platform होता उसको handle करता है
01:00:23अजब customer का data क्या है या फिर उसका जो sales का record है वो sales का record क्या है ठीक है
01:00:30जो marketing के campaign चलते है वो क्या है वो सारी चीज़े वो देखता है ठीक है तो यह सारी process अलग होती है
01:00:38Salesforce अगर आप सीखना जाता है तो Salesforce भी आप देख सकते हो तो यह सारे जो cloud-based होता है कि जैसे e-commerce cloud हो गया आपका experience cloud हो गया
01:00:54आपका यहाँपर service cloud हो गया sales cloud हो गया तो यह सारे clouds होता है जो यहाँपर इसके अंदर development के अंदर सीखते हैं
01:01:03ठीक है क्योंकि Salesforce developer की salary भी बहुत अच्छी होती है
01:01:10admin के basis पे जा रहे है या फिर developer जा रहे है
01:01:13तो उसके basis पे salary बहुत अच्छी होती है Salesforce की
01:01:28तन्जील करें sir mobile application के लिए Java यूज होती है
01:01:31जावा यूज होती है जावा भी यूज होती है आप react native के साथ भी जा सकते हो
01:01:36आप flatter के साथ भी जा सकते हो लेकिन आपको suggest करता हूँ अगर आपको app development सीखना है
01:01:41तो flatter best है ठीक है और अगर सिर्फ iOS सीखना है तो swift आती है
01:01:48Swift language आती है सिर्फ iOS के लिए ठीक है फिर उसके पास सारी चीज़े आपके पास iOS की होनी चीए
01:01:57अगर iOS development सीखना है तो मतलब मतलब यह कि आपके पास Mac होना चीए iPhone होना चीए तब best रहेगा वो
01:02:18बाकि react native आपके लिए best इस लिए है क्योंकि आप react सीखरे हो जावा स्कृप्ट के उपर ही है तो जावा स्क्रिप्ट के उपर आपको कोई दिक्कत नहीं आने वाली
01:02:31लिखकत नहीं आने वाली सर कोड दिखा दीजिए बार ये लीजिए कोड देख लीजिए आप
01:03:01ठीक है सर हम आपका कोड गिटब पे कैसे देख सकते हैं गिटब पे गिटब का यूरल जो हो जो कल क्लास अपलोड होगी उसके अंदर गिटब का यूरल रहेगा वहां पर जाके आप चेक कर सकते हो
01:03:23यू-जी के रहे हैं कि डियूम डिलेप्मेंट के लिए के से जाना चाते हो तो अपनी c language आतीए, c प्लस प्लस आतीए, जावाशक पर आतीए, और बिल्कुल सिंपल है अगर कोई नियूम रानी है तो जीढी स्क्रिप्ट आतीए, आ गैर नाम सुनाओ तो जीढी स्क्रिप
01:03:53आपको अपना time देना पड़ेगा उसके लिए
01:03:55ठीक है
01:04:04तो cdc बात है
01:04:07अगर आपको बहुत अच्छे game बनाने है
01:04:093D visualization टाइप में
01:04:11high end graphic वाले game बनाने है
01:04:14तो उसके लिए तो आपको
01:04:15c++ के साथ जाना चाहिए है
01:04:16ठीक है
01:04:19वाकी मैंने gd script बताए
01:04:22gd script को आज जाके explore करना
01:04:24क्या है बहुत अच्छे से आप समझना
01:04:27क्या पता आपको अच्छी लगे तो आप
01:04:28इसके अंदर जा सकते हो gd script के साथ
01:04:30ठीक है
01:04:31clear है
01:04:34python is best for gaming
01:04:40yes बिल्कुल python भी best है gaming के लिए
01:04:42python तो best है
01:04:44क्योंकि अगर आप python सीख रहे हो
01:04:46तो आप python के साथ dsa सीखो
01:04:47machine learning सीखो
01:04:49क्योंकि अगर आप machine learning सीखना चाते हो
01:04:51क्योंकि AI का पूरा दोर आने वाला आपको पता है
01:04:53तो best है
01:04:55c++ is best all-rounder language
01:04:58yes बिल्कुल c++ मैं सबसे
01:05:00best मांगता हूँ अगर आपको
01:05:02concept clear करने है उसके
01:05:03questions solve करो ठीक है
01:05:05उसके lead code के questions solve करो
01:05:07उसके सारे जो भी hard question है
01:05:09tough question है उससे आपकी जो logical thinking होगी
01:05:12वो high level पे होगी
01:05:14sir सबसे ज़्यादा
01:05:18कौन से language use होती देखो ये depend करता है
01:05:20task के उपर
01:05:22काम के उपर depend करता है
01:05:23क्या काम है उसके basis पे use होती है
01:05:26PHP अभी भी चल रही है
01:05:27ठीक है लेकिन PHP outdated हो चुकी है
01:05:29लेकिन अभी भी चल रही है
01:05:31तो depend करता है काम के उपर
01:05:33PHP चल रही है तो अभी PHP के उपर चल रही है
01:05:36कई PHP को shift कर रहे है
01:05:38react के उपर
01:05:39उसको next js के उपर लेके जा रहे है पूरा
01:05:41ठीक है उसके front end को
01:05:42तो
01:05:44काम के उपर depend करती है language
01:05:47हमीशा
01:05:48क्योंकि जैसे PHP developers है तो
01:05:51उनकी job तो जा नहीं रही है
01:05:52ऐसा तो है नहीं की job जा रही है
01:05:53जिन्होंने PHP सीख रही है लेकिन अब
01:05:56दोड नहीं है उसका सीखने का
01:05:59ठीक है ठीक है चलो आजकी class अपन इत्ती ही रखते है
01:06:07मिलते है फिर अपन अपनी next class के अंदर
01:06:09उसमें अपन डिसकस करते हैं आगे की चीज़े
01:06:11happy new year everyone
01:06:13advance में आप सभी को happy new year और enjoy करो
01:06:18ठीक है
01:06:20बाकी new year अगर आप मैंने आपको बताया
01:06:26gaming के लिए ठीक है
01:06:27उसके बारे में थोड़ा सा explore करना
01:06:30जो जो चीज़े मैं class में बताता हूँ
01:06:31उसको सिर्फ class में सुनके
01:06:33एक कान से सुनके दूसरे कान से
01:06:34निकालने की चीज़ मत रखा करो
01:06:36मैंने शुरू में भी बताया कि
01:06:38हर एक field को समझो
01:06:40उस field की सिर्फ इतनी knowledge लो
01:06:43ताकि आप बहाँ पर कहीं पर भी
01:06:44बोल सको उसके बारे में
01:06:46ठीक है
01:06:47कोई भी field हो
01:06:48python है आपकी पास language
01:06:51आपकी java है
01:06:52आपकी c++ है
01:06:53आपकी c language है
01:06:54तो इतना उनको देखो कि
01:06:56आप अपना
01:06:58जो question कोई पूछ रहा है
01:07:00तो उस पर आप answer दे सको
01:07:01चीक है
01:07:02digital marketing को भी समझो
01:07:04यहाँ पर
01:07:05trading
01:07:06trading आपने share market के बारे में सुना
01:07:08देखो उसको
01:07:09इतना तो सीखो कि आपको knowledge
01:07:11और market knowledge
01:07:12तो market है क्या
01:07:13मैं यह नहीं कह रहा है
01:07:14कि आप invest करो अपना पैसा
01:07:15मैं यह कह रहा हूँ कि
01:07:16knowledge lower हर चीज की
01:07:18तो यह जो आने वाला
01:07:202026 है
01:07:21इस 2026 के अंदर
01:07:23हर एक field के अंदर
01:07:25अपनी knowledge बनाओ
01:07:26क्योंकि
01:07:26market में उसी इंसान की demand है
01:07:29जो सब कुछ जानता है
01:07:31जिसको हर चीज की knowledge है
01:07:34तो knowledge हर फिल्ड के अंदर बनाओ
01:07:37आपके पास वही sufficient time है
01:07:39जो सब के पास है
01:07:40तो उसी time का use करो
01:07:42और हर चीज explore करो
01:07:44books पड़ो
01:07:45और
01:07:46सब चीजे देखो
01:07:48जहां पर जो मिले
01:07:50YouTube आपका
01:07:51जब भी आप open करो
01:07:52तो उसमें ऐसे नहीं कि
01:07:53आपको आशिस चंचलानी की
01:07:55वीडियो दिख रही है
01:07:56हर्ष बैनिवाल की दिख रही है
01:07:58या फिर किसी और की जो भी है
01:08:00ये पुराने जो थे
01:08:01क्योंकि मेरे time की तो यही थे
01:08:02तो इनकी अगर वीडियो दिख रही है
01:08:04तो उनको वो ना दिखनी की जगे
01:08:07आपकी जो सीखने की वीडियो ज़े
01:08:09वो दिखनी चीए है
01:08:10जाज एकर आपने कभी देखा हो
01:08:12अंकीत अवस्ती सर
01:08:13वो भी बहुत प्यारी चीजे सिखाता है
01:08:15तो अगर वो वीडियो आपके आ रही है
01:08:17उनकी कोई नई वीडियो आ रही है
01:08:18कोई नई चीज के उपर आ रही है, तुरंत देख लो उसको, कितना टाइम लगेगा देखने में, 2x पे चला के देख लो, लेकिन उससे आपकी knowledge कैन होगी, उससे आप सीखोगे.