Day - 27 | Build Portfolio Website Using HTML & CSS

Name: Day - 27 | Build Portfolio Website Using HTML & CSS
Uploaded: 2025-12-31T09:00:16+00:00
Duration: 1 h 8 min 29 s
Channel: skillwaala

skillwaala

2 days 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

Category

📚

Learning

Transcript

Display full video transcript

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 कैन होगी, उससे आप सीखोगे.

Be the first to comment

Add your comment

Day - 27 | Build Portfolio Website Using HTML & CSS

Category

Transcript

Be the first to comment

Recommended