Day - 24 | CSS Animation & Z-Index Explained

Name: Day - 24 | CSS Animation & Z-Index Explained
Uploaded: 2025-12-24T08:12:43+00:00
Duration: 51 min 25 s
Channel: skillwaala
Description: 👨&zwj;💻 What You’ll Learn in This Class: ✅ What is CSS Animation and how to use @keyframes ✅ Animation properties — duration, delay, iteration-count, timing-function, etc. ✅ Difference between transition and animation ✅ Understanding Z-Index and how it controls element stacking order ✅ Fixing overlapping issues using Z-Index

skillwaala

22 hours ago

👨‍💻 What You’ll Learn in This Class:
✅ What is CSS Animation and how to use @keyframes
✅ Animation properties — duration, delay, iteration-count, timing-function, etc.
✅ Difference between transition and animation
✅ Understanding Z-Index and how it controls element stacking order
✅ Fixing overlapping issues using Z-Index

Category

📚

Learning

Transcript

Display full video transcript

00:00कर दो है है मैं एक यह कि अजो मैंद कि इंड इवलेवर को जो सब्सक्राइब लूजर्स शर्डथ होड़फ कर देगे चो यह है यह बलकुल पर फ्रेंटर्ण टेवलपर ही होते है ध्यत फ्रैंटान में यह हता

00:27यार यार या हुआ इयार आप्लोब पिता अबलोबर विस रदाइंड में यारन

00:57एक बार सब राइस्पॉंस कर देना कि भी वाइस किलियर है और डिस्प्लेय भी आप सभी को विसीबल है सब कुछ परफेक्ट है

01:05गुद इनिंग दिपिका

01:27गुद देना कि भी आप सब घनिजनोंनो रजा पर दो ना पर गभा जोट दिए संग को भी आप सब बार पर अजाएस्शा़

01:40अगानों को गुद आप सब अजावst दिन गैज किलिसे बार किलिकास

01:45कि भी यहर्ष बार कि अधियत्स ми रश़

01:52कि इशा करें कि रियेक्ट डेवलपर्स मीन्स फ्रेंट डेवलपर ये इस बिलकुल रियेक्ट डेवलपर मतलब फ्रेंट डेवलपर ही होता है

02:14अगर अपन फ्रेंट डेवलपर की बात करें तो उसको क्या क्या की टेक्वनोजी वानी जाएं ज्यक्ष्रीप्ट हो गया अपना रियक्ट हो गया या फिर या फिर फिर अफिर एकत हो रहां फिर या फिर पास 60 यह सिर्फ मैं बता रहart搏 रहा

02:30ये तीन ऑप्षिन है ये मोड के सापसे और आपकी रिक्वायर्मेंट के हिसापसे पर यूज करता है तो यह इसके अलावा अपने को अपने फ्रेम्वर्क्स पता होने चीए लियाओ बनाने के लिए जैसे अपना पूट्सेप हो गया अपना यहां पर टैल्मिंट

02:52CSS हो गया चीक है उसके अलावा React के अंदर ही Material UI जिसके तो अपने बना यूज कर सकते हैं चीक है और अगर अगर अपने बात करते हैं अपने Redux की तो Redux भी अपने गवाना चीह है तब फिर आप complete front end developer बन सकते हो इतनी चीज़े सीखें यह सिर्फ front end developer की

03:12जो technologies है वो मैंने आपको बताई है कि यह यह चीज़े आप explore कर सकते हो और front end development में यह सारी चीज़े दिखने ही रहती है

03:20backend आप सेलेक्ट कर सकते हो कि आपको javascript के stack के साथ ही जाना है या फिर java के साथ जाना है या फिर python के साथ जाना है अगर आप python के साथ भी जा रहे हो तो भी आपको

03:31HTML, CSS, JavaScript, React और other frameworks आपको सीखने पड़े हैं क्योंकि front end आपको create करना पड़ेगा इनी टेक्नोलोजी से फिर उसके बाद backend में अगर अगर आपन बात करते हैं तो फिर backend में फिर अपने पास अपना जो अपन यहां पर यूज कर रहे है language जैसे मालो आप python के साथ जा रहे हो आप

04:01सारी चीजी होती है ठीक है ठीक है ठीक है चलो अपने class start करते हैं और आज की topic पर discuss करते हैं तो अपना animation ही चल रहा था

04:27animation में बहुत सारी चीजे देखी थी जैसे मैं इसको रन करके देखता हूं तो अपने पास अपना animation था जो अपने देखा था ठीक है यह animation अपने बनाई है

04:37अपने यह यह响ा हम को ज़ना ऀया पनने क्रिएट करा spinner कर गया is पीमिदल मेटर को पना गेया

04:57कि ठीक है इस पता नहीं हट गया होगा शायद में से कोई बात नहीं तो

05:04कि स्पीन

05:06कि यही दो है

05:27कि यहीं कि यहीं कि यहीं कि मैंने आपको पहले ही बोल लगा है माई को मत करना जब तक मैं पर्मीशन नहीं दू तब तक माई कॉन मत करा होगा

05:52क्योंकि अगर आप माई कॉन करोगे तो डिस्ट्रबेंस होगा उससे है ना यह नहीं करा माई कॉन करोगे तो फिर उससे डिस्ट्रबेंस होगा

06:14अपन जो Friday को जो अपने डाउट सेशन लगेंगे उसमें मैं सब को माई बाउन करने के लिए परमिशन दूँगा

06:21सब माई बात कर सकते हैं आप मेरे से ठीक है

06:25क्लास क्लास में मत करना बस बाकी तो फिर आप बातचीत करो मेरे से कोई दिक्कत नहीं है मेरे को

06:30ठीक है अगर कोई क्लास में दिक्कत आती है तब जरूर आप बाउन कर सकते हो पैसे तो मैं परमिशन देता ही नहीं हूँ आपको माई काउन करने की

06:42ठीक है चलो अब अपन आजाते हैं यहाँ पर अपने एनिमिशन की आगी की चीज़े देख लेते हैं

06:59अब देखो अब देखो अब अब देखो अब अब देखो अब अब आगे और कोई कोई की प्रोपटीज आती है उस पर अपने दिसकस कर लेते हैं

07:28जैसे अपन यहाँ पर एक अपन डिसकस करते हैं अपने एनिमिशन यहाँ पर ट्रेशन काउन्ट तो अपने देख लिया ऐसे एनिमिशन टाइमिंग फंक्शन अपने पास यहाँ पर क्या होता है

07:39तो यहां पर मैं एपनी बॉर्ट टिक है और बॉर्ट टो हुआ पर एक काम करता हूं मैं च्छा करें उसको समझने के लिए

08:09अपन यहां पर अपने बॉक्स बना लेते हैं ताकि उसको इसी से अपन समझ सके हैं ठीक है मैं काम करता हूं यहां पर अपना एक बॉक्स बना लेता हूं और उस बॉक्स के अंदर अपन अपने कंटेनर बना लेते हैं ठीक है

08:24मैं आपर कहता हूँ container 1 ऐसे अपन containers बनाते भी चलते हैं 2, 3, 4, 5

08:31क्योंकि 5 values है वोपन उस हिसाब से इसको देख लेते हैं 2

08:35फिर उसके बाद 3, फिर उसके बाद 4, फिर उसके बाद 5

08:41ठीक है अब इन containers को मैं यहाँ पर क्या करता हूँ

08:46target कर लेता हूँ तो मैं सबको यहाँ पर target करना चाता हूँ

08:49मतलब अपने box के अंदर जितने भी डिव है उनको सबको target करके styling करना चाता हूँ

08:53तो मैंने style करा मैंने बुला कि मेरे dot box के अंदर जितने भी डिव है

08:58सबको मैं यहाँ पर target कर रहा हूँ ठीक है

09:01मैंने बोला अब वेड आप रख देना वेड़ आप यहाँ पर 50 Pixels की रख देना यहां पर 50 Pixels की रख देना अभý करिए

09:19को show हो तो मैं से बाइगगरांद लगा देता हूँ और वो मैं हे यहांपर कहता हूँ red

09:23इसको home कर देता हूँ तो जैसे इसे अप counterpart करोगी तो आपके

09:29पास तो हैं यहांपर boxes बनेवे आ रहे हैं कितने एक, दू, तीन, चार्प, पाँ

09:32बॉक्स बने मैं यहारgia है है।

09:33मैं इनको बॉल में convert कर देता हूं

09:36तो थेखर लादेते हैं अपण ten ओपन कर देते हैं अन्डेट परषेंट

09:40ठीक है जैसे मैं अन्रेट पर्सेंट करूँ आ भू मो

09:41नहीं है।

09:42अब सब एक को

09:44द्रॉक्स को पर टार्ट कर देता

09:47करने देता हूं इसको Key For Render ना दे कि अपने हर इक box को target कर लेता है है

09:52तो मैं आपर कहता हूं मेरे पास जो मेरा container one है मैं इसको मैंने यहाँ पर target किया उसको एक बैगरांड

09:57जान डेता हुआ है ठीकर सीम एंसे ही मैं यहाँ पर अपने जो

10:04तो कंटेनर मेरे पास 2 है उसको मैं यहां पर टारगेट कर लेता हूं और उसको एक बैग्राउंड कलर देता हूं और वो मैं देता हूं जिसे ब्ल्यू ऐसे ही सेम मैं यहां पर कह देता हूं मैं मेरे कंटेनर 3 को यहां पर टारगेट कर लेता हूं और उसको एक बैग्राउं�

10:34यहां पर अपने container 4 के बाद 5 को भी यहां पर टार्गेट कर लेता हूं और उसको एक background color दे रहेता है पर कुछ भी यह बाला दे तो चीक है तो यह सब को मैंने अलग-अलग background color दे लिया तो यहां पर इस तरीके जबने को walls अपने पास create हो क्या रही है

10:50अब इसके उपर मैं अपना animation create करता हूं क्योंकि मिलको यहां पर जो आपको बतानी हूं

10:56animation यहां पर timing function property बताने वाला हूं कि timing function अपने पास यहां पर क्या काम आती है तो animation timing function के उपर अपन डिसकस करने वाले है

11:06तो सबसे पहले मैं यहां पर इसके उपर animation बना देता हूं

11:09animation कैसे बनाते हैं add the red keyframes करके और मैं यहां पर कहते हूं

11:14balls करके अपन यहां पर इसका name रख लेते हैं

11:17और from से मैं यहां पर इसको चला हूंगा कहा तक to तक मैं यहां पर इसको चला हूंगा

11:22मैं बोला कि मैं को यहाँ पर from से 2 चलाना है चीक है और जब आप इसको from से 2 चला रहे हो तब मैं यहाँ पर अपना transform लगा देता हूँ

11:30और उसके अंदर translate x मैंने यहाँ पर लगा है

11:330 रख लो ठीक है

11:34और फिर उसके बाद मैं यहाँ पर अपना transform लगा देता हूं

11:37और मैंने यहाँ पर गुला translate x

11:40और उसको अपन यहाँ पर करेते हैं 100 pixel

11:43किसके उपर लगा रहा है

11:45अपने इन सब wall को मैं को यहाँ पर run करवाना है

11:47तो मैं यहाँ पर अपना animation का name पास कर देता हूँ

11:51name क्या है

11:51walls करके अपने animation का name लिया है

11:54फिर उसके बाद अपने पास आता है

11:56animation का यहाँ पर duration

11:58ठीक है

11:59फिर आता है अपने पास animation का duration

12:08तो मैं यहाँ पर इसका duration set कर देता हूं कि मेरे को मेरा animation किस duration में रखना है जैसे मैं यहाँ पर कह देए 2 second का duration ठीक है यह जो transform पर गरवार है उसके बाद animation का iteration count ठीक है और वो मैं यहाँ पर कह देता हूं infinite आप रखो ठीक है तो check करते हैं अपने पास क्या हो रहा है यह अपनी

12:38तोड़ी दूर तक जाने हो ठीक है तो यहाँ पर यहाँ से शुरूर हो रही है और यहाँ तक अपने पास यह run हो रही है अब मेरे को यहाँ पर क्या करना है यह जो मेरे पास अपने बनाई अपनी बाल्स ठीक है अब इसके उपर अपने को लगाना अपना animation timing function अब animation timing function की values �

13:08इसकी values अलग-अलग होती है इसके अंदर अपने पास linear भी आता है इसके अंदर ease in out भी आता है इसके अपने पास अपना तेखो यहाँ पर इसको प्ले करता हूं तो इस तरीके से अपने कोई है बिल्कुल slow smooth होता हुआ चलता हूँ आपने को यहाँ पर नजर आ रहा ठीक है

13:38सारी values नहीं बता रखी गया स्क्रॉल गरो यह ठीक है अब देखो animation timing function में अगर आप linear देते हो इसका मतलब the animation has the same speed from start to end start से end तक same speed रहने माले है अगर आप ease देते हो इसका मतलब default value the animation has a slow start then fast before it and slowly

14:02ease in देते हो the animation has a slow start ease out देते हो the animation has a slow end ease in आउट देते हो the animation has a slow start and slow end

14:13step start देते हो तो यहां पर आपको कितना step start करना है यह अलग चीज़ है अब यह पर के लिए अपने जो यह values है इन पर पर डिसकस करते हैं यह पांच वाक्स बनाया है तो मैं सब के उपर एक एक value लगाता हूं सबसे पहले मैं यहां पर लगाता हूं जैसे क्या-क्या values थी अप

14:43इस रही इन एक एसे डियों आपने पास जो दूसरा आ रहा है उसी के उपर मैं यहा पर लगा दता हूं अपना animation timing function और यहां पर मैं कहा देता हूं means छिक है और yellow वाले मैंने लगा है

14:55animation timing function ठीक है और उस पर पर लगा देता है अपना

15:00ease in ठीक है ऐसे ही अपने पास यह जो आ रहा है इसके उपर पर लगा देता है

15:05animation timing function और इसके उपर मैं लगा देता है अपना ease

15:09in out ठीक है और इसके उपर लगा देता है अपना animation timing

15:15function ठीक है और इस पर लगा देपना is out ठीक है सब पर मैंने ये values लगा दिए अब देखा आपको

15:25automatically यहाँ पर सब में difference दिख रहा होगा कोई slow start हो रहा है कोई शुरू से end तक

15:30same speed में चल दा है ठीक है इस तरीके से animation बना होता है जैसे मैं कल अपने

15:35spinner देखा था मैंने बूला था अगर अपने उसको smooth बनाना तो स्मूद बनाने

15:38के इपन क्या करेंगे यहाँ पर बनातो हुआ रिखिक है मैंने spinner और इस learned

15:43Pinterest बनाया और इसको मैंने बडूंट मैंने और तर्गेट ही डिया मैंने बूला 편

15:54अपने बनाई PYCXL की सॉलीड और ग्रीन कलर की बॉर्डद बना दिया ढ़िसके अलावा मैं यहाँ पर इसको विटो दे देता हूं

16:03यहां पर यह box रहाए है फोडती पिक्सल और यहां पर उन्सक्राइट कऱेंगे इसकी पर श्रीश

16:17हो apprent पर सब्सक्राइए अब आपने को क्या करना है इसकी जो top की बॉर्डल है वो

16:33और आप यहां पर ब्राउन कलर की बॉर्डर बना देना है तो आप यहां पर क्या करोंगे अपना अपने अनिमेशन को कह देते हैं

17:01और वही फ्रॉम से टू में आपर इसको चलाने बाला हूँ तो मैंने फ्रॉम लगा दिया और फ्रॉम के अदर अपन अपने आपने अपना वही ट्रांसफॉरम लगाएंगे और ट्रांसफॉम में क्या लगाँगा अपना रोटट इनिशिली जीरो दे दो और यहां पर आपक

17:31animation लगे तो मैं हाप पर animation का name देता हूं और अपने क्या दिया है अपनाma spinner

17:36run ये मैंने animation का name दिया है फिर उसके बाद animation की

17:49रहन है। फिर उसके बाद अपना इन्फाइन इसां चलते रहे ना चलिए तो आप

18:01करूंगा, यहां पर अपने अपना क्या जो animation timing function अपने देखा वो मैं यहां पर पास करूँआ, तो यहां पर आजाओ और अपने अपना animation timing function और उसको मैं यहां पर दूआ linear, ठीक है, जैसे linear लगाऊ हूँआ तो देखो अपने पास, वो smooth अपने पास अपना, यहां पर

18:19यह रन होगा, मतलब इसकी same speed है, start से लेके end तक same speed अपने पास यहाँ पर अपने इस animation की आ रही है, ठीक है, ऐसे ही, और काउन कौन सी properties आती है, सब भी discuss कर लेते हैं, ऐसे ही अपने पास आती है animation delay, कि आपको अपने animation को कितना delay रखना है, जैसे मैंने बोल दिया, three second का delay कर देन

18:49ठीक है, या फिर, या फिर आप चाते हो कि मैं जब इस spinner के उपर cursor लेके जाऊं, तब में मेरा animation रन हो, तो कुछ मत करो, आप बोलोगे कि जो spinner है, उसके उपर मैं क्या करूँ, forward, तब आपको सारी animation की properties लगानी है, ठीक है, या फिर आप चाते हो कि जब मैं cursor लेके जाऊं, �

19:19जो मेरे पास animation अपने पास यहाँ पर क्या है, iteration count, ठीक है, उसको मैं यहाँ पर कहता हूँ, नहीं, iteration count को मत करो, आप एक काम करो, अपने पास duration आ रही है, ठीक है, एक second की दे रखिए पने duration, animation value लगाओ, और उसके अंदर अपन यहाँ पर इसको कहता है, none, ठीक है, animation ही value लग

19:49इसको तो हटाओ, और यहाँ पर बुलो कि जो अपने पास अपना spinner है, उसके उपर जब मैं hover करूँ, तो hover के उपर

20:19यह सारी values, pass कर दो, hoover के उपर यह सारी values, pass कर दो, तो जब

20:26आप hover करोगे तब वह animation यहाँ पर run होगा, ठीक है, तीन सेकिन की बाद वह run हो FIFA, और एटाओगे, बंद हो जाएगा,

20:32तो यह अपने पास अपना animation अपने देखा जिसमें animation की कुछ values थी वापस आ जाते हैं और क्या-क्या है एक बार के लिए इसको यहाँ से अठागे वापस वहीं रख लो क्योंकि इसके अंदर वोट भी properties आती है मैं इसी को यहाँ पर रख लेता हूँ और इसको कर देते हैं अ�

21:02अपने पास animation की properties आती है मैं यहाँ पर आता हूँ और अपने लगाते हैं अपना animation का यहाँ पर direction देखो यहाँ पर क्या काम आती है अगर मैं alternate लगाता हूँ तो अपना animation यहाँ पर alternate यहाँ पर run होबाए अल्टरनेट मतलब जहां तक वह जाएगा वहीं से वापस मतलब वो

21:32फिर वापस from से 2 आएगा फिर वापस 2 से from आएगा जैसे इसके उपर लगाते है जो अपने बॉल बनाई थी उसके उपर लगाता हूँ मैं यहाँ पर गुरूँआ कि जो मैं animation की direction है वह आप कर दो alternate पर यहाँ पर क्या होगा वहाँ तक जाएंगे वापस यहां तक आएंग

22:022 जा रहा है ठीक है फिर उसके बाद 2 से from फिर from से 2 अपने पास फिर उसके बाद 2 से अपने पास from ठीक है तो यहाँ पर जैसे आप इसको start करो तो reverse में यह start हो रहा है start करो start करती ही वहाँ से balls आपकी start हो रही है मतलब 2 से from चल रहा है भी यह from से 2 नहीं चल रहा है ऐसे अपन

22:32कAnnouncer काभ दो यह चलेगा अब टू से व्रंट चलेगा तो यह अपने पास

22:36he coaster या इक्किन की कौनसी नीक्ट launched होती अपनी डाइरिक्षिन की प्रॉपर्टी यह पर यूज लेते हैं में

22:47कैसि कि इसे कुछ य used लेते हैं अगर आपको और आ्निमेशंस टेखनें जासरे दाने

23:02कि जैसे एक website है और उसका नाम है और यहां पर बनाते हैं इसको देखँ है बाको कोई बेज़िए टीक है यहाँ से

23:15अगर आपको कोई भी अनिमेशन चीए तो आप उटा सकते हूँ

23:18जैसे मालू यह अनिमेशन है ठीक है और यह स्केल आपको यह इस तरीके से आएगा यह इस तरीके से अगर आपको चीए

23:28इस तरीके का अनिमेशन यह चीए यह वाला चीए ठीक है जो भी अनिमेशन चीए ठीक है जिसे स्केल डाउन में चीए यह वाला चीए एंट्रेंस पर आपको चीए अनिमेशन तो यह एंट्रेंस का अनिमेशन इस तरीके से ठीक है एक्जिट पर आपको और कोई अनिमेशन च

23:58तो यहां से इसको कॉपी कर लो तैने उसके बाद यूज कर लो ठीक है तो यहां पर इसे क्लास भी दे रखी और पूर भी दे रखा यह रहा इसका अनिमेशन का कॉट जैसे मैं यहां पर कॉपी की फ्रेम करता हूं

24:20यहां पर ओर यहां पर यहां पर कह रहते हैं अपना एक मैं यहां पर कह रहते हैं दिवान शेसे टीक?

24:45यह उचके हैว कि सटाइल कर लेते हैं और स्टाइल करके अपनि यहाँ पर यह पर

24:53तरह से और जितिएいます

24:57पीपर क्रेंगर नहीं मिदर के साइज हो आसब लग्युक्त मुझेम के तीenga कर देना

25:01जो कले हैं वहाँ पर यहाँ जो हैं खंड कर देना

25:04तो width नहीं, अपन यहाँ पर कहते है, size जो है, वो आप यहाँ पर 50 pixel करते हैं, और इसको run कर लो, ठीक है, तो यह मेरे पास आ रहा है, अब यह वाला मेरे को यहाँ पर लगाना है, तो मैं सबसे पहले यहाँ पर क्या करूँगा, की फ्रेम को कॉपी करूँगा, मैंने की फ्रे

25:34यह की फ्रेम अपने पास यहाँ पर बना हुआ है, अब अपने को क्या करना है, इसको use करना है, तो use करना बड़ा ही easy है, यहाँ पर आओ, और इस class को मैं यहाँ से copy कर लेता हूँ, और यहाँ यहाँ वाली, tracking in contract bc करके जो इसने class बना रखी हूँ, इस पर लगा दी, तो अ

26:04animation अपना यहाँ पर रण हो रहा है, चेंज करना चाते हूँ, कुछ changes करना चाते हूँ, जैसे अपने पास जो अपना animation है, उसमें इसने सारी चीज़े एक साथ ही लगा रखी है, चीक है, और

26:16यहाँ पर आओ, और इसने letter spacing दे रखाओ, उसने टी, ठीक है, ठीक है, ठीक है, ठीक है, ओके, यहीं पर आते हैं, और यहाँ आपर मतला हूँ, एनिमिशन iteration count और उसको पर आपको यहाँ पर infinite ठीके मैं क्या चाहता हूँ, infinite हो इसका animation

26:39कर जाएगा इंफाइनार हो यह बतने बनाना है फ्लिकर से रिलेटेट कुछ चीए है यह जाए है यह बहुत सारी चाहे है यह यह बहुत शारी चाहिए यह है यह नहीं

27:00शेकछ वाला चीए शेक वाला चीए यह है मों सारी कुछ ये चाहरा साथ यह कराई मेंगर यह को

27:09करेंगा इस तरी के से यह वाला कि आपने देखा हो बहुत सारी ज़ियर लेता है साथ तुझ बना वाए isto

27:17यूज कर सकते अब बने में जोड़ाइ जोडा वालने मीशन चीहें यह वाला चीह लिग यह ब्लिंक

27:23कुछ भी यह ब्लिंक वाला इस तरीकिसे होगा ठीक है बै Sydow thì dabei का यानीमिशन ही थीए तो दो यह बैänger integration से

27:30zoon हो क्या रहा है है यह इनिमिटेड है ठीकिक है इस तरीकिसे करवाना है राइट से करवाना है

27:35पॉटम से करा रहा है। इस तरीके से। यह background color है, यहाँ पर color change वाला animation है.

27:42यहाँ पर color change हो रहा है, इसका code को अब भिगरगत आप इसको यूज कर सकते हो.

27:47यह मने example लिया है कि animist आप यहाँ पर यूज कर सकते हो.

27:50अगर कुछ requirement है तो किसी website के अंदर.

27:53तो ये अपने पास अपने animation पे अपने discussion किया

28:01इसमें कोई doubt नहीं है किसी को

28:04animation वाली चीज में किसी कोई doubt नहीं है

28:23झाल

28:53और पहले से प्रेक्राइडर पर यूज़ करना है

28:58कौन से इस्लाइडर के उपर यूज़ करना है

29:02अगर आपको शाइडर बनाना है

29:16तो शाइडर बनेगा यहां पर आपके

29:19जावस्क्रिट के तरू क्योंकि खलीवल होदी है

29:22सब्सक्राइब करें देटा काम होता है और डेटा आपको मैनेज करना उसको शॉर्टिंग करना एरे लिंग लिस्ट ये सारा डेटा आपको पता होना चाहिए क्योंकि मेन

29:48वेब साइड हो कुछ भी हो हर चीज की जो यहापर मीज चीज होती ही वह होती है देटा आप इसके अंदर डेटा को स्टूर करवाना डेटा को स्कूर रखना डेटा किस फ्लो में स्टूर होना चीए

30:14डेटा किस range में store होना चीए वो सारा काम आने के लिए अच्छे से आने के लिए

30:20DSA जरूरी है ये काम आता है DSA का क्योंकि डेटा का काम बहुत इंपोर्टेंट है

30:25अब इस टीटा को मैंनेज कर रहा है क्योंकि इस दिखाए देर रहा है फ्रेंट अब बेकेंड के अंदर वेकेंड का पुरा कोड सही चल रहा है अब फिर बात आती है डेटा

30:45डेटा किस तरीके से मैनेज हो रहा है, बिल्कुल सही मैनेज हो रहा है, अगर उस डेटा में से मैं बोलू कि आपको यह वाली चीज निकाल के यह करना है, तो वो अपन कर पा रहे हैं या नहीं कर पा रहे हैं, तो उसके लिए अपने कुछ D.A. से आना अची अच्छी से है, �

31:15कोई भी डाउट होगा तो, ठीक है, प्रेक्टिस कहां से करें, प्रेक्टिस आप करो, लीट कूर से, यहां से प्रेक्टिस कर सकते हो, अगर आपको प्रेक्टिस करने हैं तो, लीट कूर के कुछिन सॉल्व करो, वहां से आप प्रेक्टिस कर सकते हो, अब नेक्स अपन यह

31:45आपने डिसकस कर लेते हैंगे अपने ग्रेड पर डिसकस कर लेते हैं

32:04अगर आप सुच लियो कि में बिलकुल जैसा अनेमिशन बनाने की कोशिश करूँ

32:13इतना नहीं होगा इतनी इंपर्टेंट कोशिष नहीं है

32:18अइनिमेशन आपको आना्य घिज यतना मैं ने बता है वह सफिशइंट है

32:21ठीक है? नहीं मैं आप इसके बिक्राहा अईनिमेशन से लिदीने पूछेगाई उसको

32:25शी मतलब भी नहीं है और चीक है?

32:28तो जितना आप इने सिखा है उतना एनिमिशन आपके लिए सफिशेंट है ताकि अपन वेबसाइट के ऊपर एक अट्रेक्टि वेबसाइट अपन बना सके

32:35क्योंकि अपने को ऐसा नहीं करना कि किसी भी वेबसाइट पर बना रहे तो महां पर अपना एनिमिटेड लोगों पूरा रज होता हुआ रहा है

32:43क्योंकि लोड बढ़ता है वेबसाइट पर चैटना अपन उसको इन्हेंस करता है

33:06कौन सा नीचे दिखेगा, कौन सा एलिमेंट आगे दिखेगा, कौन सा पीछे दिखेगा, उसके लिए अपन अपना Z-Index यूज़ करते हैं,

33:13स्टैकिंग ओर्डर को अपन यहां पर अरेंज करने के लिए, अपना एक्जामपल से समझते हैं,

33:18मैं को पता है, यहां से चीज मैंने बूली, इससे आपको कुछ भी क्लिरिटी भी नहीं मिली, कि अपने पास अपना Z-Index यहां पर क्या होता है,

33:27यहां पर समझते हैं, यहां पर तीन बॉक्स ले लेता हैं,

33:53एक काम करता है मैं डिव को ड़नों को सेम स्टैलिंग देने के लिए मैं बोल दता हूं वीड दे दा आप और वीड आप 200 पिक्सल लगलो अभी के लिए और अपन दे दें 200 पिक्सल की हाईट में यहां पर पास करता हूं और उसके अलावा आपन बॉर्डर भी बना देते हैं म

34:23की position absolute है मतलब parent के respect में मैं पास कर दी उसके बाद मैं box 1 को यहाँ पर target करूँ हा मैंने बुला box 1 उसको target कर रहा हूँ मैंने इसको एक background color यहाँ पर दे दिया और वो मैं यहाँ पर देता हूँ brown background color ठीक है फिर उसके बाद मैं यहाँ पर कहता हूँ कि आप उसको top से कितना रखो

34:53कि देखते क्या हूँ तो यह अपने पास अपना box 1 यहाँ पर क्रिएट हो क्या गया सब के उपर लिख देता हूँ मैं box 1 कौन सा है box 2 कौन सा है ठीक है अपने यहाँ पर कहते है color जो है वो white कर देना अब अभी के लिए और सब मैं मैं लिख भी देता हूँ कि यह मेरे पास म

35:23कर लेता हूँ कु कि टीनों box बने या पर तूब और रेक्डिस पर गर डेता हूँ मैं जलना हमिंगी कि अब मैं крас wh Kṛṣṇa कर लेता हूँ मैं कि जेता हूँ में लिख पास box 2 जो है उसको मैं और यहाँगॐ है ठीक है उसको अपना बैगगराउं कला पर य। यह मैंने हाँ भास कर

35:53देखे लिए तो यहां पर टीन बॉक्स जिख रहा है कि भी वाला इसके पीछे है तो इसको भी में यहां पर टॉप से कह देता हूं कि आप इसको टॉप से शिफ्ट कर देना जैसे उसको हंड़ेड करा इसको तूहनरेड पिक्सल कर दो और लेप्ट से इसको कितना कर दो तू

36:23आप box 3 को भी एक ही कर देते हैं तो मैं आपक्स से आप इसको 300 सोथ एक है बizing

36:45और चेक करते हैं, तो आपने पास box 1, box 2, box 3, तीन अरेंज हो क्या रहे हैं अपने पास अपने box

36:51अब box 1 है, box 2 है, box 3 है, यह अपने पास कैसे है रहे हैं जैसा आपने यहाँ पर create करा है

37:15यूजी गेमिंग के रहे कि सार्स course certificate मिल गया, बट internship certificate नहीं मिला, बता सकते हैं, क्यों आप भोल रहे थे, दैन की मिलेगा

37:30देखो मेरको इसका idea नहीं है, I don't know मैंने क्या commit करा था, internship का मिलेगा या फिर certificate जो मिलेगा, वो एक बार मैं confirm करके आपको बताता हूँ कि certificate क्या, कैसे क्या मिलेगा

37:42course completion का मिलेगा या फिर with internship का मिलेगा, इसका मैं को idea नहीं है, मैं एक बार बात करता हूँ, टीम से फिर उसके बाद आपको confirm करता हूँ कि क्या certificate आपको मिलेगा

37:53ठीक है, बाकि आपको certificate मिलेगा, क्योंकि internship अपने, इसकी offline internship नहीं है, online internship है और वो आपका major project ही है

38:02ठीक है, internship का major project ही है, अनुर करे सर, मैं आपको बहुत respect करता हूँ, देवांची सर, बहुत बहुत तन्यवाद, ये तो हूँ बहुत अच्छी बात है, respect तो आप सभी को गरनी चाहिए, और मैं भी आप सभी की respect करता हूँ, क्योंकि आप से ही मैं

38:23certificate मिल गया, बहुत अच्छी बात है, certificate मिल गया तो बदा ही हो, certificate मिल गया, maybe course जो अपना batch, last वाला batch था, उसका certificate पब्लीश हो गए सबके, अपके attendance की basis पे, अब देखो यहाँ पर अपने box 1, box 2, box 3 को मैंने arrange करा, box 1 यह दा, box 2 यह दा, box 3 यह दा,

38:44अब इसका stacking order मेरे को यहाँ पर change करना है, चीक है, कैसे करेंगे, वो अपन करेंगे अपने z index से, जैसे मालूम मैं चाहता हूँ कि मेरा box 3 जो है, पीछे चला जाए और box 2 आ गया जाए, चीक है, या फिर जैसे मालूम में मेरे पास box 1 है, इस box 1 की उपर मैं लगाता हूँ मेर

39:14पर arrange हो गया, यहाँ से समझो इसको, और के लिए rate मिलेगी, मैं यहाँ पर आता हूँ और इसको z index मैंने कहा देती है 1, अभी के लिए मैं 0 कर देता हूँ, तो box 1, box 2, box 3, मैं आपर कहता हूँ 1, तो 1 करते ही वो आ गया गया, 2 पीछे चला गया, 3 अपना पहले से ही नीचे है

39:44index मैंने यहाँ पर दी, और box 2 जो है, उसको z index मैंने कह दिया 1, चीक है, तो जैसे मैंने 1 करा, तो box 1 के बाद अपना box 2 उसके उपर आ गया, चीक है, जैसे मैंने 1 करा, अब मैं एक काम करता हूँ, अपने box 3 को भी देता हूँ z index, मैंने बोला box 3, उसको मैंने यहाँ पर z index दि

40:14आगर मैं चाता ह cakes TO GOD है आगर में चालता हूं कि मेरे पास जो बॉक्स श्रियोज पीछे चला जाए तौन में कमाइनएस वन टिएपना नो पीछे चला जाएगा थीखे अगर मिए बलन कहता हूं तो फुस्ट कईया रहा थाई आbenर में बट नीखした बीलक्र दूद

40:32तो पीछे चला गया है उसका स्टेकिंग और पर रहे गाँ एक उस से पीछे लिए

40:54के लिए मतलब कौन सा बीचि रहेगा कौन सा आगे रहे गए यह मालू जैसे अपन रेंग लेंग करते हैं सैकिंड

41:00इसकी है थर्ड इसकी एगर आप देखते हो तो फर्स्ट वाला सब से उपर कडा रहता है और यो सेकंड थर्ड हो उसके नीचे नीचे

41:05इसे दोनों साइट करे रहते हैं वैसे तो वैसे अगर आपको स्टैकिंग ओर्डर साइट करना है एलिमेंट्स का तो उसके लिए अपनियाबर अपना जड़ इंडेक्स यूज करते हैं

41:14एजा गरे कि सर जी आपने बैच बन को उनली कोर्स का सर्टिपिकिट दिया था इंटर्चिप सर्टिपिकिट नहीं मिला

41:35देखो मैं एक बार आपको फिर से किलियर करता हूँ, मैं एक बार बात करता हूँ टीम से, मैंने बात नहीं करी, ठीक है? क्योंकि शायद इसका जो है आपको certificate मिलता है, वो आपको course completion का ही मिलता है, ठीक है? एक बार बात करनी बड़ेगी, फिर मैं आपको बताता हूँ, तो course complete

42:05कर रहे है, monster course काफी costly होता है, sir, sir कैसे अच्छे institute से अगर कर रहे है, तो approximately 30,000 cost होता है, thank you sir, आप मेरे लिए real teacher हो sir, yes, बिल्कुल, ये बिल्कुल रही पात बोल रहा है, वनमोल, कि जो आपको course अगर आप बहार से करोगे, तो इसकी चुपीस है, वो यही होती है, और वो जो

42:35certificate आपका matter नहीं करता, certificate बिल्कुल भी matter नहीं करता, सिर्फ एक कागज का टुकड़ा है certificate आपका, जैसे degree आपके सिर्फ कागज का टुकड़ा हो matter नहीं करती, mean matter करता है कि आपने क्या सीखा है उस duration में, क्या क्या चीज़े आपने सीखी है, अगर आप किसी company में जाते भी हो,

43:05जैगा कि आपने यहां से अपना course complete करा है, यहां से आपने चीज़े सीखी है, और जब आप उनको सारा अच्छा, बहुत अच्छा explain कर दोगे, interview बहुत अच्छा जाएगा, तब feedback जाएगा कि आपने skill वाला से सीखा था और skill वाला से skill वाला का feedback जाएगा, उनको certificate देखें�

43:35उसकी skills कैसी है, वो अगर अपने efforts लगाएगा तो वो अपने आपको बहुत आगे ली जा सकता है, ठीक है, तो आपको देखो compare कर सकते हूँ, मैं मना नहीं करता, आपको कोई भी अगर आपके known में कहीं भे भी आपके पास हो, कहीं भे भी आपको लगता है, जो यह course कहीं से �

44:05similar आपको मिलेगा, मैं यह कह सकता हूँ कि उससे ज़्यादा अच्छा मिलेगा आपको यह वाला course, आप उस course की classes जाके go through कर सकते हो, जो भी पैसे देखे जिसने भी यह course करा है, ठीक है, क्योंकि अगर आपका interview के लिए नहीं हो रहा तो वो आपकी कुछ mistake हो सकती है, आप ज�

44:35सब्सक्राइब को नहीं आती, सर 26 को मेरा है, आपका last project उनको पसंद आया, और react का है, अब bless me sir, yes बिल्कुल, best of luck, बहुत अच्छा जाएगा आपका interview, और जो भी projects आपने बना रखे, उनको show करना और उनको explain करना अच्छे से,

44:57सिवाक्षी करें, thank you sir to you and to you, your team, okay thank you so much सिवाक्षी, आप सभी का feedback ही हमारे लिए बहुत important है, आपको अगर लगता है कि कोई कमी भी लगती है, तो आप वो भी suggest कर सकते हूँ, कि sir ये कमी है,

45:20सब चीज़ें आपके लिए ही है,

45:24sir हम सब developers experience को एक good feedback और excellent developer बना है,

45:37क्या कहना चाल रहाएं आपके,

45:50ठीक है, तो ये अपने अपने अपना जैड इंडेक्स पर अपने डिसकस करा,

46:01जैड इंडेक्स अपना stacking order होता है, कि किस element को कहां पर arrange करना है,

46:05उसके लिए अपने यूज लेते हैं अपने जैड इंडेक्स को, ठीक है,

46:08I hope कि आपको जैड इंडेक्स वाला concept के लिए है, कि जैड इंडेक्स क्या होता है,

46:12मैंने पहले भी बाल्स वाला टाई किया है,

46:37अनिमेशन बट वो रन नहीं होता, प्लीज रिवाइज वन्स अगैंड,

46:40यहां पर आजाओ, अनिमेशन के उपर, देखो बाल्स वाला अनिमेशन बहुत एजी से था,

46:58कुछ ज़्यादा रोकेट साइंस नहीं लगाए अपने इसमें, मैंने सिर्फ यहां पर एक बॉक्स लिया और उस बॉक्स के अंतर सारे डिव उपनें बना रखे है,

47:07सबको एक साथ अपने यहां पर टारगेट कर रखाया और कुछ नहीं किया, सबको एक साथ टारगेट करके यहां पर अनिमेशन लगा दिया,

47:13अब यह रन कैसे होगा, रन होगा फ्रॉम से टू के बेसे इसमें मैंने ट्रांस्फोर में इसको यहां पर क्या कर रखाया है,

47:20मतलब उसको अपने आगे किसका रखाया है,

47:25इनिशली जीरो पिक्सल रहेगा और वैसे 400 पिक्सल और उसको मैंने यहां पर रखाय कर दिया,

47:31इतना साथ तो काम किया है, एनिमेशन का नीम, एनिमेशन की डियूरेशन, इटरेशन कांट और डायरेक्शन बस,

47:37और हर एक कंटेनर के उपर मैंने अलग-अलग एनिमेशन, टाइमिंग फंक्शन लगा रखाया है, यह सिर्फ एक्जामपल के लिए ऐसा कुछ काम पन करेंगे नहीं, यह एक्जामपल के लिए मैंने समझाया है आपको,

47:52ऐसके हैं कि सर एक प्रोफेशनल डेवलपर कैसे बनने देखो, डेवलपर बनने के लिए मेन होता है एक्सप्रियंस, अभी आप लर्निंग फेस के अंदर हो, सारी चीजे पहले सीखो, हर एक चीज जो भी आपको जहां से भी सीखने को मिले, वहां से चीजे सीखो, ठीक है,

48:22सर एंड्रोइड डेवलप्मेंट के उपर भी कूर्स लाए, यस बिल्कुल सारे कोर्से आने वाले थे, बस दिक्कत ही हो गई कि कोर्से आगे भी बहुत सारे आएंगे, इन फ्यूचर अपने स्किलवाला के उपर, बस वह अपना यूट्यूब चैनल चला गया, उस रीजन

48:52दिक्कत ही है, उस जी से, यूट्यूब चैनल के जाने से, अटनेंस के पॉइंट बन के अंदर आपको मेंचिन करना है, क्या मेंचिन करना है, एक या आपके अटनेंस का पॉइंट बन है,

49:22अटेंडेंस के पॉइंट बन में ली नियर मेंचन करना है

49:32एसके एसके रहे कि सर आपने कहा था कि कोड का गिटब लिंक देंगे

49:36यस बिल्कुल कोड का गिटब लिंक आपको उसी में मिलता है

49:38जो अपनी डेली मोशिन पर क्लास होती है

49:41अपलोड वहाँ पर आपको कोड का GitHub लिंक भी मिलता है

49:44उसके डिस्क्रिप्शन में जाके चेक करोगे

49:45GitHub का लिंक दिया हुआ है वहाँ पर

49:47Sir, API में मैप को कैसे

49:49Integrate करते हैं

49:51मैप तो देखो जैसे मालो

49:53आपको कोई भी API है

49:55सबसे पहले आप उससे डेटा फैच करोगे