💻 CSS Table Styling, Transitions & Transform Explained

Name: 💻 CSS Table Styling, Transitions & Transform Explained
Uploaded: 2025-12-11T06:53:07+00:00
Duration: 58 min 18 s
Channel: skillwaala

skillwaala

1 day ago

👨‍💻 What You’ll Learn in This Class:
✅ How to style HTML tables using borders, colors, and hover effects
✅ Adding spacing, alignment, and alternate row colors
✅ What is CSS Transition and how it makes animations smooth
✅ Using transition-duration and delay
✅ Understanding CSS Transform — rotate, translate effects

GitHub url :- https://github.com/DevanshuSir/Full_Stack_Skillwaala_17nov_2025.git
Assignment url :-
https://drive.google.com/drive/folders/1xReCWLRl6WwNvOBH7lcC_XoPG_ma2EdM

Category

📚

Learning

Transcript

Display full video transcript

00:00झाल झाल

00:30झाल झाल

01:00झाल

01:30झाल

02:00झाल

02:02लो आइस गुट इविनिंग अविर्वन

02:05गुट इविनिंग शिबूल अजयर अभी शिवकाशी

02:14कोशल्या, आरस्टी, आशिश, दिपिका, टैब, साइनाथ, दिपायान

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

02:37एक बार सब रैस्पॉंस कर दो कि असर वाइस क्लियर एंड स्क्रीन वीजिबल है गुड इवनिंग इशा

03:07ठीक है तो कल जो अपनी प्रीवेस क्लास हुई थी उसमें अपने क्या डिस्कस किया था

03:33उसमें अपने डिस्कस किया था अपने सूडू क्लास और सूडू एलिमेंट के उपर

03:38सूडू क्लास भी अपने देखी थी जिसमें अपन कॉलन करके जिस्कस था उसका

03:42और अपने अपनी pseudo element पे भी discuss करा था, जिसमें अपन double colon लगाते हैं, बस यह difference था दोनों के syntax में, जब भी अपन pseudo class लिखते हैं, तो सब एक colon यूज़ करते हैं, और pseudo element लिखते हैं, तो अपन double colon यूज़ करते हैं, यह अपने कल वाली class में अपने discuss करा था, आज उसी में अपन �

04:12अपने table देखी थी, table बनाना देखते हैं, यहाँ पर अपने pseudo element, pseudo class हो देखी के लिए, मैं यहाँ पर table.html एक class बना देता हूं, पर अपने यहाँ पर लगा देते हैं, table किस तरीके से create करते थे, table create करने के लिए सबसे पहले अपने पास अपना table tag होता था, tr, जो सबसे first में

04:42second में यहाँ पर कह देता हूं की name है, second में यहाँ पर कह दिया name, ऐसे ही next अपना आगे चलते है, second में अपने पास यहाँ पर name आना चीए, यहाँ पर मैं कह देता हूं की email, और यहाँ पर आपन कह देता है password, अभी के लिए ऐसे table बना रहा हूं, ठीक है, और यहाँ पर मैं कह

05:12अब यह फस्ट रू ली है इसको मैं यहाँ पर रन कर लेता हूं फाइल को

05:25तो अपने पास कुछ इस तरीके से ही आ रहा है अब

05:31बाच लिये तो पांच लिया तो फिल कर दो Sakit compete dell tag

05:38ने थे किते लीए याँ पर फिल कर दो करूं सी इन लमबार में यहाँ पर देता हूं फिर उसकी बाद नीम के

05:45पन कहते हैं दिवाशू किर इसके बाद अपने पास यहाँपर क्या रहा आ अपना प्रमा आ

05:50आइप lingu mil

05:53जो ऐसी सेफेटों यहां पर यहां पर पंदिल पाशवर्ट तो कुछ भी पाश्वर्ट देदो और यहां पर

06:02क्या है अपना इज तो यहां पर मैं को सदोने यहां पर ब frei इस तरीक़े से से फिल

06:11ऐसे ही एकोर रोल ले लेता हूं उसमें अपने एकोर डेटा दे देता हूं फिर कोपie पेस्ट कहलें के अपन

06:16तो मैं आपर टीडी दे देता हूं उपना चीक है यहां पर अपने पासवर्ड दे दिया और यहां पर एज देते हैं जैसे मैंने ज देदी इसकी

06:25और मैंने आपके लिए many at the red gmail.com ठीक है फिर उसके बाद next के अंदर अपन यहाँ पर password दे लिए और यहाँ पर age दे देते हैं जैसे मैंने age दे इसकी 34 तो अपने पास अपनी table यहाँ पर create होती जाएगी जैसे जैसे जैसे अपन table create करते जाएगे वैसे वैसे अपने पास यहा

06:55तो देखो table पर अपन border कैसे create करते हैं यह जो अपना table है उसमें tr भी है उसमें th भी है सब के उपर ही अपने को border देनी पड़ेगी तो यहाँ पर अपन बादर कर लेते हैं वही style आपको करना पड़ेगा तो मैंने यहाँ पर अपना style टैग लगाया और जो अपने पास अपन

07:25एक black colour की border यहाँ पर create कर देना तो देखो यहाँ पर table पर अपने पास यहाँ पर border create हो जाएगी black

07:32color की solid ठीक है वन पिक्सल कर लो या तो इसको अगर टू पिक्सल ज्यादा है तो मैं आपर इसको वन पिक्सल कर देता हूं तो वन पिक्सल की solid यहाँ पर

07:40border क्रिकेट हो जाएगी उसके बाद जैसे मालू मैं यहाँ पर table के अंदर double line वाली

07:45बॉर्डर आ रही है तो इसको change कैसे करेंगे इसके लिए अपने पास अपनी टेबल की ही property आती है और वो प्रपर्टी है अपने पास border collapse मैं यहाँ पर border collapse लगा हूँगा ठीक है और यहाँ पर मैंने border collapse लगा है और मैं आपर इसकी value देता हूँ

08:01collapse तो यहाँ पर जो अपने double line आ रही हूँ single line में अपने पास यहाँ पर convert हो जाएगी अब इसकी width set करनी है तो width set कर लो किसकी set करनी है टेबल की तो मैं सिर्फ table को target करूँगा और यहाँ पर इसकी width set कर दूँगा

08:14मैं बोल दूँगा 100% कर देना मतलब जो display है उससाब से 100% उसकी width हो जानी चीए ठीक है height अपने को यहाँ पर set करनी की जरूरत ही नहीं है सिर्फ मैंने इसकी यहाँ पर क्या set करी है width अगर height भी set करना चाते है तो height भी अपन यहाँ पर set कर सकते है जैसे मालों यह table की heading है इस

08:4440 pixel आप उसकी height कर देना टेबल की जो अपने पास heading है उसकी height मैंने यहाँ पर change कर दो यहाँ पर जो अपनी heading आ रही है उसकी height अपने यहाँ पर change कर दी ठीक है ऐसे ही अपने पास text अपने पास यहाँ पर initially अपने left side से start हो रहा है मैं चाहता हूं कि मेरे पास table का data उसका text यह

09:14यहाँ पर देखो मैंने कॉमा अगर के सब्सक्राइब यहाँ पर टार्गेट के है इसका मतलब group selector यूज करा और यहाँ पर मैं direction दे रहा हूं कि table के अंदर TH है table के अंदर TDA उसको मैं यहाँ पर target करना चाहता हूं तो उस पर लगा देते अपना text align और उसके अंदर लगा �

09:44मैं यहाँ पर गोलता हूं कि मेरे पास जो table है उसके अंदर जितनी भी रो है उनके उपर अगर मैं hover करता हूं तो मेरे को यहाँ पर क्या करना है उनका एक background color अपने को set करना है और यहाँ पर ब्लैक कर देना और जो color है वो आप यहाँ पर क्या कर देना white क्योंकि content का color white होग

10:14घरी धेता है जैसे मैं यहाँ पर ग्रेज दिया है इसको तो यह heading को background कर यहाँ पर ग्रेज हो जाएगा उसके बाद जैसे मालों यहाँपर background कर अपने black दिया है तो color यहाँपर black

10:39यारों को ऐपन कॉपी कर लेते हैं ठीक है यहां पर इसको कपी कर लेते हैं तो यह अपने टेबल का

10:59की row है उनके उप्पर आपने क्या चाते है कुछ एक color चाता हूँ मैं जैसे मारण

11:04background color green हो जो मेरे पास यहाँ पर even wise जो यहाँ पर table की

11:08row है उनके उपर background color green होना चाहिए और जो color है वो white

11:12होना चीए तो आप क्या करोगे आपके पास energy क्यों आप यहाँ पर अगर

11:17अपनी table को देखोगे

11:18तो table के अंदर सारी tr यहाँ पर

11:21क्या है सारी tr child ही तो है

11:23अपनी table की

11:23सारे tr tag जो है वो सारे अपने पास

11:27यहाँ पर क्या है अपनी table के child

11:29tag है तो मैं यहाँ पर बोलूँगा

11:31कि मेरे पास जो table है

11:33उसके अंदर जो tr है उसके उपर

11:35मैं लगाऊंगा अपना nth child ठीक है वो मैंने यहाँ पर लगाया और फिर उसके

11:41बाद जैसे मालो आप चाहते हो कि even wise यहाँ पर जो color है वो आपको

11:44क्या रखना है वो आप यहाँ पर pass कर तो आप लोगे background color जो

11:47मैंने पर रहेंगे उनमें अपने पास यहाँ पर रहेंगे उनमें अपने पासchnोlles

12:12ठीक है, तो ये अपने पास अपनी क्या है, टीबल, अगर अपने को टीबल को कस्टमाईज करना है तो, यहां तक की चीज के लिए है, यहां तक की चीज के लिए है, तो एक बार कमेंट करके बताओ, यहां तक की चीज के लिए है, इसमें कोई डाउट नहीं है किसी को,

12:27अगर ओड और इवन दोनों देना हो तो ओड और इवन दोनों दे सकते हैं, कोई दिखकर नहीं है, दोनों को टार्गेट कर लो, आप बुलोगे टेबल, टेबल में टियार, फिर उसके पर आप फिर से लगाओगे अपना एनजचाइल्ड और उसमें आप बुलोगे कि आपको

12:57आप यहाँ पर क्या गर देना, उसका white कर देना, तो यहाँ पर

13:01automatically वो चीज़ चेंज हो जाएगी, ठीक है?

13:05automatically यहाँ पर वो चीज़ चेंज हो जाएगी, जैसे आप

13:08देना चाहते हो,

13:16sir, style वाला code बताना, एक बार,

13:22ठीक है, एक बार code आप देख लो, क्या code है,

13:27table के अंदर tr के अंदर th अपने सबको एक साथ group के अंदर target किया है यापर

13:37सबको group के अंदर target किया है यापर

13:57क्या है यापर

14:05अंदर अंदर support

14:09अंदर, इसमत्र करीड़ कर दो एक साथ

14:12आपर हम सकते अंदर हो एक साथ

14:17कर दोता अंदर हो एक साथ

14:21कलो आपर हो इस झाल

14:25इमिशा करेंगे सब टेबल में टी बॉड़ी और टी हैड कब यूज करते हैं

14:42देखो टी बॉड़ी और टी हैड अपन यूज एनिटेम गरते हैं

14:45अभी मैंने यूज नहीं करा लेकिन अभी कोई अरण नहीं आ रही

14:48आगे जब अपन रियक्ट पड़ेंगे तब वह आपको बोलेगा वर्निंग कि आपको टी बॉड़ी और टी हैड भी यूज करना पड़ता है

14:53ठीक है

14:57सर हेडिंग वाला रो यस बिल्कुल हेडिंग वाला रो फर्स्ट चाइल काउंट होगा क्योंकि

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

15:22एवेटे मिनिट गाइस

15:26झाल झाले हिंगा यहाँ अवेटे वाल यूर यहाँ भी क्वार भी काउंट है तो आपे मिनिट्पार आता हम पर अपने प्रव़ने काउंट अपन प्रवर्वणोंट अपनम इफ फर आता है कि पूर्श। आपपता कि प्रूंट उन जाज़ते हैं मिन गईटा सेंगे उ�

15:56मैंने एक ड्राइव का लिंक दिया है आपको ठीक है चैट के अंदर शेयर करा है यह मैं क्लास के अंदर भी लगा दूंगा जब आप इसको उपन करोगे तो आपके पास यहाँ पर कुछ

16:24फोल्डर्स आएंगे जिसमें अपने बाद बूट्स है पैसे जैसे स्टीमल है एस्टीमल के अंदर कुछ यहाँ पर असाइमेंट से ठीक है फस्ट असाइमेंट सेकिन असाइमेंट अगर आप इसको उपन करके देखोगे तो यहाँ पर आपको कुछ टास्क मिलेंगे जो आ�

16:54एस्टीमल तो अपना कंप्लीट हो चुका है ठीक है अगर आप एस्टीमल को उपन करोगे तो यह तो असाइमेंट से और युवाई टास्क भी यहाँ पर कुछ दिये गए जिसके अंदर से एक कैलकुलेटर का है जो आपने कंप्लीट बना लिया है ठीक है फिर उसके बाद

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

17:54have an idea लिखावा होगा, share you idea लिखावा होगा, अब div के अंदर eco div क्यों लेना पड़ रहा है, क्योंकि यहां पर यह जो div लोगे आप, इसके चारों तरफ देखो, अंदर यहां पर spacing है, तो इस spacing को create करने के लिए आपको एक div के अंदर eco div लेना पड़ेगा, मतलब यह तो आपका main

18:24और यह आपका यहां पर क्या होगा, बटन होगा, ठीक है, तो यह तो अपनेपास एक task है जो आपको complete करना है, अब तक जो चीज़े देखिए, दूसरा task यह है जो आपको यहां पर बनाना है, ठीक है, easy है, टेबल आपको यह same table

18:38आपको यहाँ पर create करनी है, यह जो same table है, यह आपको यहाँ पर create करनी है, बिल्कुत same exact, कोई यहाँ पर changes नहीं होने चीए है, ठीक है, तो यह second task है, जो अब तक जो अपने चीज़े देखी है, उसके अलावा, एक task आपका यह है, जिसमें आपको यह flow desk वाला form यहाँ पर create करन

19:08यहाँ आपको यहाँ आपको नहीं बनाना, तो यह आपको same flow desk वाला task यहाँ पर complete बनाना है,

19:38तो यह आपके कल तक के task है, जो आपको बनाने है, कौन-कौन से, एक तो यह business development वाला, एक यह table वाला और एक यह वाला, ठीक है, यह तीन task है, जो आपको यहाँ पर बनाने है, बाकि अभी कोई भी आपको नहीं बनाने, अगर आपको लगता है, मैं बनाऊंगा तो बना सकते

20:08वो देना है, और यह वाले तीनो task आपको complete बनाने है, next class तक, ठीक है, हो जाएगा यह काम,

20:17यह जो मैंने आपको drive शेयर करा है, यह आप सबको यहाँ पर, कौन-कौन से task है, सिर्फ तीन task है, जो आपको यहाँ पर बनाने है, मैंने तीन task बता दिये, ठीक है, वो कौन-कौन से है, एक तो यह वाला task है,

20:47ठीक है, एक तो यह वाला है, दूसरा यह table वाला है, और तीसरा flow desk वाला है, business development, CSS table और flow desk, ठीक है, इसके अंदर तीन है, तो business वाला,

21:02एक table वाला और एक flow desk वाला, ठीक है, यह तीन task आपको यहाँ पर create करने है, business और table और flow desk,

21:17ठीक है, यूजी gaming के रहे सर, बहुत easy है, सर, yes, बिल्कुल आपने बना रखे, इसलिए आपको easy लग रहे, लेकिन जो नए students है, उनको बनाना है, उनके लिए task है, और भी task मैं आपर देता रहूँगा, जैसे जैसे मिले को लगेगा, कि यूजी बनाना चाहिए, आपको जिस

21:47concept clear होंगे, चीक है, तो ये तीन task आपको यहाँ पर complete करने है, जो पुराने students है, उनको तो, मैं गो लगता नहीं, उनको बनाने के ज़रूद पड़ेगी, लेकिन जो नए है, उनको ये task करने है, खुद से करने है, चीक है, और अगर पुराने students बोल रहे, easy है, बहुत easy है, ब

22:17आपको चीजे अभी के लिए हो रही है, आपको चीजे सीख रहे हो, तो आपको practice करनी है, री motivate होने वाली चीज नहीं है, ठीक है, तो जो task में दे रहा हूँ, वो task आप बिल्कुल शिद्दत के साथ complete करना हो सको, जितना हो सके, जितना आप laptop लेके बैठ सको, जितना आप properties क

22:47मेरे level पर बात करूं, तो मेरे लिए 10-10 minute के task ही है, मैंने, अगर मैं बात करूं में को कुछ नहीं आता, तब मैं अगर ये task बनाओ, तो मैं को एक दो गंटे लग जाएंगे, इसी में,

22:57सर में ये बना रहा हूँ अभी, ठीक है, बनाओ, अच्छा लग रहा है, लेकिन ये, अभी मैं जूम करके नहीं देख पाऊँगा, इसको यहां से तो,

23:09टास्क शेयर कैसे करना हूँ, मैं आपको कल, कल तो नहीं, एक बार बना हूँ, आप फिर उसके बाद मैं बताने वाला हूँ,

23:16कलास के बीच में सिर्फ अपन जू टॉपिक डिसकस करें, उसमें पूछ लिया करो, कलास के बाद फिर अपन डिसकेशन करेंगे, जब अपन रिकॉर्डिंग बन कर दे, तब आप पूछ सकते हूँ, ठीक है, कलास से आउट अगर कोई भी चीज़े पूछनी है, तो वो बा

23:46ठीक है, चलो भाई, आगे बढ़ते हैं, तो ये तो मैंने आपको टास्क दिये, जिसमें HTML के टास्क भी है, ये HTML अपने इस बैच के लिए, जो मैं आपको यहाँ पर अपलोड कर दूँगा, ठीक है, ये पुराने बैच के टास्क है, लेकिन कोई बात नहीं, आपको तो प्

24:16को करना ज़रूरी है, क्योंकि इसमें मैंने वो सारे include कर रहे हैं, जिससे आपको सारे properties revise हो जाए, और सारी चीज़े आपको clear हो जाएगी, किस तरीके से आप इन UI को बना सकते हो, और कौन-कौन से common UI है, जो ज़्यादा use आते हैं, क्योंकि ऐसा box भी बनाने का काम आता है, table �

24:46के उपर, ठीक है, Friday की जो class होगी, उसमें doubt session में अगर आप से नहीं बनता, कुछ भी दिक्कत आती हैं इन में, तो उस पर अपन discuss कर लेंगे, ठीक है, चलो बाई, आगे बढ़ते हैं, बंद कर दो इन चीज़ों को तो, ठीक है, तो यह अपन ने अपने table के उपर discuss करा, और �

25:16ठीक है, उसके बाद next अपन आगे चलते हैं, और क्या कैसी एसस की properties अपने पास यहाँ पर बचाएं, चलो पन यहाँ पर transition समझते हैं, transition अपने पास यहाँ पर क्या होता है, ठीक है, मैं यहाँ पर transition लगाना चाहता हूँ, अब देखो transition क्या होता और whoever क्या होता, दूनों च

25:46अपन एक नई class बना लेते हैं, ठीक है, और यहाँ पर अपन समझते हैं अपने transition को, एक नएट का इस,

26:16ठीक है, अब देखो transition क्या होता है, अपने होवर तो पढ़ाता, होवर तो अपने पढ़ाता भई, होवर तो बहुत अच्छे से पढ़ाता और वो क्या पढ़ाता, जैसे मालूम इने यहाँ पर कोई

26:45box लिया, मैंने यहाँ पर एक box लिया, और इसको styling कर लेते हैं, मैंने यहाँ पर style करा, और मैंने बुला dot box, इसको मैंने यहाँ पर target कर लिया, इसको एक background color मैंने यहाँ पर दे दिया, जैसे मालूम मैं brown दे देता हूँ, और इसकी width मैंने यहाँ पर 200 pixel सेट कर दी, और यहाँ

27:15100% हो जानी है

27:16मतलब जब मैं इस box की उपर

27:18किस box की उपर

27:19इसी box की उपर मैं कई रहा हूँ

27:21इसी box की उपर

27:22अगर मैं यहाँ पर uhref करता हूँ

27:24ठीक है

27:24over लगाऊ यहाँ पर

27:26अगर मैं इस की उपर Hard करता हूँ

27:28तब आपको hard पे क्या करना है

27:29होवर पर आप इसकी width 100% करना चाहते हो

27:33चियक है जब मैं इसकी उपर hovel करूं

27:36तो hover पर इसकी width क्या हो जाने चाहिए

27:37100% हो जाने चाहिए

27:39तो देखो जैसे मैं hover कर रहो हूँ

27:40तो इसकी width क्या हुरी है

27:41100% हो रही है

27:42जैसे मैं इसकी उपर cursor लेके जा रहा हूं

27:44तो cursor ले जाने पे इसकी width क्या हो गई? 100%

27:47अब देखो hover में क्या हो रहा है?

27:49hover में जैसे ही मैं cursor लेके जाओं तो तुरंथ

27:51क्या हो रहा है? 200 pixel से 100% width इसकी हो रही है

27:57और तुरंथ हो रही है instant, जितना fast हो सकती है

28:00अब transition क्या काम आता है?

28:03transition काम आता है, smoothly अगर अपने कुछ changes करवाने है तो

28:06एक state से दूसरी state में जाने के लिए

28:09अब भी ये एक state से दूसरी state में तो जा रहा है जब मैं hover कर रहा हूँ

28:13और वो कौन से state में जा रहा है?

28:14वो जा रहा है 200 pixel width से 100% width में

28:18और जब मैं इस पर cursor लेके जाओं तो वो instant जा रहा है

28:21जितना fast हो सकता है

28:22लेकिन मैं चाता हूँ कि जब मैं यहाँ पर cursor लेके जा रहा हूँ

28:26तो ये 200 pixel से 100% होने में कुछ time duration के अंदर

28:31इसका एक transition यहाँ पर work करना चाहिए

28:33मतलब सारा काम smoothly होना चाहिए है यहाँ पर

28:36तो वो अपन करते हैं अपने transition के तुरू

28:39ठीक है? तो transition basically क्या काम आता है?

28:41transition काम आता है अपने smoothly changes को करने के लिए

28:44एक state से दूसरे state पर

28:46ठीक है? अब जैसे अगर अपन बात करे

28:49hover के उपर अपन लगा सकते हैं

28:51या फिर click करने पर या फिर focus करने पर

28:53अपने कोई transition लगाना है तो वहाँ पर

28:55smoothly changes के लिए अपने transition को

28:57use लेते हैं ठीक है? अब देखो मैं यहाँ पर

29:00अपन अपना transition लगाते हैं जैसे

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

29:05अब मैं यहाँ पर

29:09transition लगाना चाहता हूं।

29:28width के उपर अपना transition यहाँ पर apply हो

29:31width के उपर जो अपना transition है

29:34वो अपना apply होना चीह है

29:35चलो, चेक करते हैं, मैंने सिर्फ transition यहाँ पर लिखा, तो दोको अभी भी वह सहीं ही चीज है, कोई changes आए नहीं, लेकिन second यहाँ पर जो value होती है आपके transition की, वो होती है कि आप यह जो smoothly transition अपना create करना चाहते हो, width के उपर, वो कितने second के अंदर होना चाहिए, जैसे मालो मैंन

30:05कैसे होने चीज है, two second के अंदर होने चीज है, क्योंकि यहाँ पर अपने अपना transition यहाँ पर लगा दिया, तो जैसे ही मैं cursor लेकि जाओंगा, तो दो second के अंदर वो transition यहाँ पर apply होगा, मतलब 200 pixel से 100% होने में वो दो second का time ले रहा है, जाने का भी और आने का भी, जाने का द

30:35पिक्सल से 100% होगा, मैं वापस cursor रहा लेता हूँ, तो five second के अंदर ही 100% से 200 pixel यहाँ पर होगा, पहले क्या हो रहा था, जब मैं cursor लेकि जा रहा था, तो तुरंत वहाँ पर अपना hover, अपना वहाँ पर apply हो रहा था, ठीक है, लेकिन मैंने यहाँ पर इसको change कर दिया, ऐसे ही

31:05पिक्सल, ठीक है, जब मैं hover करूँ, अब देखो क्या होता है, जैसे आप hover करोगे, height instant यहाँ पर उसकी increase हो गई, ठीक है, height यहाँ पर क्या हो रही है, height यहाँ पर इसकी instant increase हो रही है, जैसे मैं cursor लेके जाओ तो instant height increase हो रही है, transition apply हो रहा है, तो किस के उपर हो रहा है, सिर्फ

31:35तो अगर आप यहाँ पर width के साथ height के उपर भी लगाना चाते हो, तो यहाँ पर उसको mention कर तो, यहाँ पर आप बोलोगे कि मेरे को यहाँ पर width बे तो लगाई रखा है, 5 second का मैं यहाँ पर height के उपर भी लगाना चाता हूँ, कितने सेकिंड का, मैं कहते हों, 3 second का आप लग

32:05पर अपनी जो हाइट है तीन सेकंड के अंदर यहाँ पर टू हंडड़ से एट हंड़ेड होगी और जो अपनी विर्थ है वो फाइफ सेकंड के अंदर होगी ठीक है यह अपना ट्रांजिशन है जो अपने यहाँ पर अप्लाई करा थे जैसे मैं करसल लेके जा रहा हूं तो �

32:35कि अपने पास अपना टाय्मिंग फंक्शन भी आता है इसके अंदर अपने पास अपना डीले भी आता है कि याइसे मालो या यहाँ है आप अपना डिलै करना THE ही चाहता हूं

32:56मिस्टेक कर रहे कि अपन, spelling mistake हो रही है, transition delay, ठीक है, और वो मैंने यहाँ पर कह दिया, four second का, four second बहुत ज्यादा हो जागा, two second का कर लो, अब देखो, जब आप इस पे cursor करोगे, तो वो तुरंट नहीं होगा, क्योंकि उसके उपर two second का delay, two second के बाद, वो यहाँ पर उसके उप

33:26कर रखिए, जो आपने initial यहाँ पर property अपने set कर रखिए, ठीक है, तो यहाँ पर जो अपना timing function है, वो important है, timing function मैंने अभी नहीं बताया है, क्योंकि timing function के अंदर अलग-अलग value आती है, ease आता है, ठीक है, अपने पास easy नाता है, ease out आता है, ठीक है, यह सारे चीज़ आती है, �

33:56अंदर भी अपने पास अपनी transform properties भी आती है, कि अगर आप किसी element को transform करना चाते हो, तो वो अपने पास अपनी transform properties होती है, ठीक है, तो यह तो बात हो गई अपने पास किसी चीज़ के अपने transitions की, कि अगर अपना transition लगाना चाते है, तो किस तरीके से अपना transition यहाँ पर लग

34:26तो यहाँ पर दोनों 5 सेकंड के अंदर यहाँ पर हो जाएगी

34:31लेकिन आप चाहते हो कि यहाँ पर मैं दोनों को अलग से टार्गेट ना करके

34:39एक साथ भी लिख सकता हूँ बस यहाँ पर आके आपको लिखना है

34:41अल का मतलब यह हो गया कि आपने होवर पर जितनी भी प्रोपर्टीज यहाँ पर लगा रखी है

34:47वो सारी यहाँ पर उस टाइमिंग के अंदर एपलाई हो जाएगी जैसे मैंने 3 सेकंड के दिया

34:51तो अब इस हवर के अंदर जो भी प्रोपर्टीज होगी वो सारी प्रोपर्टीज यहाँ पर 3 सेकंड के अंदर एपलाई हो जाएगी

35:19तो यह बात होगे अपने पास किस चीज की अपने

35:21transition की अपन transition यहाँ पर किस तरीके से अपना apply कर सकते है

35:26यहां तक की चीज के लिए रहे तो एक बार बताओ यसर यहां तक की चीज के लिए रहे

35:30इसमें कोई doubt नहीं है

35:51हुआ हुआ हुआ हुआ है

36:21हुआ हुआ है हुआ है कि इस्ट ट्रांजेशन का कोड़ दिखाए एक बार टांजेशन का कोई ज्यादा बड़ा कोड़ नहीं लिखा अपने सिर्फ टांजेशन अपनी प्रोपर्टी जो अपने यहां पर एप्लाई करी है

36:41Ja nghoor के उपर अपने स्कुर्णाइ करें कि hoorn नियाँ पर अपनी जुब्र प्रॉपर्टी स क्लाए करता यहां पर एक तक फे स्टॉपर्ट यहां के इंदर पर एक पर इस पर क्यान फोर स्ट्रॉपरिश Perdition पर तरच आदेए

36:57है चलो अफने टांजिशन से पहले एक टांजीशन के अंदर अपने प्रफोर्पर्टी पर घेले करते हैं कि एक वास से

37:17करूँगा मैं उससे पहले अपने ट्रांसफॉर्म प्रोपर्टीज को पढ़ते हैं अब देखो ट्रांसफॉर्म का मतलब क्या होता है जैसे मालो कोई भी

37:23element है उसका जो भी मेरे पास शेप है या फिर उसकी जो पोजिशन है या फिर उसकी साइज है या फिर उसका

37:29एंगल है और मेरे पास जो बॉक्स है उसको मैंने यहा पर एक बैगराउंड रिया और मैं यहा � Jean

37:50उसकी width है वो 150 पिक्सल अपनी आपर set कर देते हैं, height अपनी आपर कह देते हैं, 150 पिक्सल, ठीक है, दोनों चीजे मैंने आपर set कर दी, और मैंने फाइल को यहाँ पर run भी कर लिए, तो box आ रहा है, कोई दिक्कत नहीं है, आपने वाज एक box है, अब देखो, यहाँ पर, जो transform ह

38:20उस layout को बदले भी न, आप उसकी, जैसे मालो, position change करना चाते हूँ, चीक है, तो वहाँ पर अपने transform को use लेते हैं, जिसके अंदर आप इस element को rotate भी कर सकते हूँ, जैसे मालो, आप चाहते हो, 190 degree पर rotate हो जाए, 90 degree पर rotate हो जाए, 180 degree पर rotate हो जाए, चीक है, या फिर scale करना चाते ह

38:50हमीशा एक value लेती है, और वो होती है आपकी एक function, ठीक है, transform property की अगर अपन यहाँ पर बात करते हैं, जैसे मालो मेरे पास कोई selector है, मैं आपर कहता हूँ, मेरा कोई selector है, उसी के उपर मैं लगाना चाता हूँ, और अपने पास अपनी transform property है, ठीक है, और उसकी value जो होती है

39:20का syntax होता है, ठीक है, function के अंदर value का मतलब यह है कि transform का type क्या है, यहाँ पर जो मैं value कह रहा हूँ, उस value के अंदर उसका type यहाँ पर define होगा, कि उसका type यहाँ पर क्या है, type मतलब आप उसको rotate करना चाते हो, या फिर आप उसको scale करना चाते हो, या फिर आप उसको translate करना चाते

39:50सारी चीजे यहां पर इसकी value होती है मतलब आप यहां पर उसको rotate scale translate

39:55skew जो भी करना चाहते हो वो यहां पर होता है ठीक है तो यह अपने पास अपना syntax होता है

40:01सबसे पहले मैं यहां पर आपको समझाता हूं कि इसके अंदर अपने पास जो आता है वह आता है अपना

40:07translate translate जो function यहां पर किस तरीके से यूज लेते हैं ठीक है तो

40:26तो transform के उपर या जो बाखी चीज़े में एक बार close कर देता हूँ, confusion कुछ नहीं रखना, ठीक है, अब मैं यहाँ पर चाता हूँ, इसके उपर अपना translate लगाना, तो मैंने यहाँ पर बुला अपना transform, ठीक है, और उसके अंदर function आता है अपने पास अपना translate, ठीक है, मैंने अ

40:56यहाँ पर दो value यह लेता है, ठीक है, यह जो translate function है, यह दो argument यहाँ पर लेता है, दो value लेता है, और दो value जैसे मालूँ मैंने बुला 50 pixel, पहली value बुली 50 pixel, और second value मैंने यहाँ पर बोल दी 10 pixel, अब अगर आप अपने box को आके देखोगे, तो उसमें आपको कुछ changes दिखना च

41:26यहाँ पर अगर आप देखोगे, तो आपके पास यह box है, यह जो x direction के अंदर है, वो 50 pixel shift हो चुका है, और top से, अगर आप देखोगे y direction में, तो वो 10 pixel shift हो चुका है, क्योंकि यह जो आपका translate function है, यह दो argument ले रहा है, जिसमें पहली जो value है, वो आपके x axis है, और जो second value है, �

41:56यहाँ पर translate हो चुका है, जिक है, क्योंकि transform property काम ही यही आती है, जैसे आप इसको check करो, मैं यहाँ पर आता हूँ, जिक है, और इसके यहाँ पर आके अपर इसको change करते हैं, मैं आपर बोलता हूँ कि मेरा जो translate function है, उसके अंदर मैंने इसको change करा, तो देको यह जो आप move कर

42:26यह अपने पास अपना translate होता है, ठीक है, अब देखो यहाँ पर इसको अपन थोड़ा सा और अच्छे से समझते हैं, मैंने यहाँ पर transform लगाया, translate लगाया, ठीक है, अब translate के अंदर भी आप चाते हो कि मैं y को यहाँ पर use नहीं करना चाता है, तो translate भी आपके यहाँ पर अ

42:56अपन एक एक चीज को समझते हैं, अब देखो मैं यहाँ पर थोड़ा सा अपने यह अपना यह लगाया box के उपर, ठीक है, मैंने box के उपर यह काम किया, अब देखो मैं hover की उपर यहाँ पर एक changes करता हूँ, मैं बोलता हूँ मेरा box जो है, उसके उपर जब मैं hover करूँ, ठ

43:26मैं इसके उपर hover करूँगा, तो देखो वो transform यहाँ पर apply हो रहा है, ठीक है, 50 pixel और 10 pixel, या फिर तोड़ा सा आप इसको कर दो, 10-10 pixel का कर दो, अपना translate, ठीक है, तो देखो जैसे मैं hover करूँगा, तो वो इस तरीके से यहाँ पर show हो रहा है, अब देखो यह instant यहाँ पर क्या

43:56है, smooth बनाना है उसको, ठीक है, तो वो मैंने यहाँ पर कह दिया, कि आप 2 second के अंदर करो इस काम को, मतलब आप यहाँ पर उसको move कर रहे हो, 10 pixel, 10 pixel, x-axis और y-axis के अंदर, उसको आप यहाँ पर 2 second के अंदर करो, तो तो क्या पता थोड़ा अच्छा लगे, ठीक है, तो देख

44:26कि यार, इसके उपर एक box shadow बना दो, मैंने बोला, minus 5 pixel, minus 5 pixel, ठीक है, और 8 pixel यहाँ पर, और इसको अपन कह देते हैं कि pink color आप रख लेना, initially जो shadow है, वो यह रखो, ठीक है, तो अब भी आप देखोगी, तो initially shadow उसकी यह आ रही है, ठीक है, अब आप चाहते हो कि जब मैं इसक

44:56चेंज हो के, यहाँ पर यह चेंज हो गई, और यहाँ पर अपन कह देते हैं कि यह 15 pixel हो जाए, यह 15 pixel हो जाए, और यह अपने पास अपना 10 pixel हो जाए, और pink color की जगह मैं जैसे कह देता हूँ, कि यहाँ पर gold color हो जाए उसका, ठीक है, तो अब यह आपका, जो box आपने transition लग

45:26जैसे मैं cursor लेके जाऊँगा, तो आपका box कुछ इस तरीके से treat करेगा, अब वापस cursor अटाओगे तो इस तरीके से होगा, जैसे cursor लेके जाओगे तो इस तरीके से होगा, cursor अटाओगे तो इस तरीके से वो show होगा, तो यहाँ पर आपको smoothly, यहाँ पर आपका transition यहाँ पर show ह

45:56क्लासे जी जो अच्छी लगती है ठीक है इसके अंदर और भी फंक्शन आते हैं अपने सिर्फ टांसलेट की उपर ही डिसकस करा रोटेट भी आता है आपका स्कैल भी आता है आपका स्क्यू भी आता है ठीक है

46:14ये सिफ मैने आपको टांसलीट ही बताय है भी तो कि अपने पास अपना टांसलीट है

46:24ज़िसके अंदर आप इसको कर सकते हो, एक्स � एक्सिस के अंदर और म्पाइ में अर्फ के अंदर

46:28कि A

46:35क् बिढ़े कि होर्स है विठ कोड़ना है यह तो क्कूर होता है कोई दिखा नहीं हो बद्ध्रन निहाए महाद लिखा है

46:48सब्स φाव5 के बारे में ये ऐपने अपना प्रया में यहाब और पन कि आप लिखने सिय याद रखता जो मैंने

46:54आपको यहाँ पर बताया, translate function के बारे में, ठीक है, यह अपना translate function अपने यहाँ पर बढ़ाया है, मैं आपको कल, definitely यहाँ पर आपको code provide कर दूँ है, तो जो upload होगी class, उसके अंदर आपको आपका जो Google Drive है, ठीक है, वो तो मिलेगा ही, जो मैंने आपको भीजाए task के लिए, और

47:24ठीक है, वो चीज मैं आपको provide कर दूँ है, टीबल का CSS code दिखाईए, टीबल का भी देख लीजिए, यह पहला तो यह है, इसका screenshot लेलो, अगर आपको लेना है तो,

47:50डन, next यह है, इसका screenshot लेलो, देखो, अब यहाँ पर अपने अपना transform अपने यहाँ पर पड़ा, translate अपने पास यहाँ पर दो value लेता है, x-axis और y-axis, अब translate x भी होता है, इसके अंदर देखो,

48:16यहाँ पर मैं translate x यहाँ पर apply करता हूँ, translate x, ठीक है, अब translate x चो function है, वो साब पता चल रहा है, यह सिर्फ x-axis का ही काम करने वाला है,

48:26मैंने बोला x-axis के अंदर आप 100 pixel कर तो उसको, ठीक है, 100 pixel shift कर देना, x-axis के अंदर, तो देखो यहाँ पर आके अगर आप चेक करोगे,

48:35मैं एक पर वापस आता हूँ, थोड़ा सा lag हो रहा है, यहाँ पर देखो, तो यह यहाँ पर x-axis के अंदर ही shift होगा वो, करसर अटाओगे, वापस normal में आ जागा, ऐसे ही आपके पास translate y होता है, अगर आप y के अंदर करना चाते हो तो, ठीक है, तो यह आपका translate y हो गया, ठ

49:05यहाँ पर लगाता है, जैड में अभी कुछ भी अपने को changes नहीं दिखाए देगा, यह 3D होता है, यह किस तरीके से use हो का बताऊंगा मैं आगे, ठीक है, तो यह अपने पास अपना translate function होता है, जिसमें अपने पास इस तरीके से होता है, उसके बाद next कौन सा function आता है अपन

49:35इस चीज़ को तो अभी के लिए कर दो comment, या फिर पूरा code को ही comment कर लो, वापस से code लिख लेंगे अपनी सी का, ठीक है, अब मैं आता हूँ rotate के उपर, यह तो अपने सिर्फ अपने किस के उपर discuss करा, यह मैंने discuss करा अपने translate के उपर, अब जो अपन discuss करने वाले हैं, वो अ�

50:05अपने दे दिया, जैसे मैं यहाँ पर green background कर देता हूँ, और उसकी width अपन यहाँ पर set कर देते हैं, 200 pixel, और यहाँ पर मैं उसकी height set कर देता हूँ, 200 pixel, परफेक्ट, यह अपने अपना box यहाँ पर create करा है, अगर आप यहाँ पर check करोगे तो आपके वास एक box आ रहा है, अब

50:35rotate आपके पास क्या आपका function है, यहाँ पर लगा दिया, अब जैसे मालों आप चाते हो कि यह जो है, यह आपका clockwise यहाँ पर rotate हो जाए, clockwise आप इसको rotate करना चाते हो, और कितना करना चाते हो, जैसे मैं यहाँ आप कहता हूँ, 45 degree यहाँ पर आप इसको rotate कर देना, तो जब आप �

51:05आप लिख दिया box 1, ठीक है, तो आपको automatically पता चलियागा कि वो rotate हो रखा है या नहीं, अब देखो इसके अंदर जो आपने box 1 लिखा है, बहुत कम content है, लोरेम 10 का content है, ठीक है, और यहाँ पर आके चकल, तो देखो वो आपका clockwise यहाँ पर 45 degree rotate हो चुका है, clockwise ही हो रहा है, अ

51:35positive value दी है, अगर आप minus में value देदोगे, तो वो anticloakwise जाए, जैसे मालों मैं यहाँ पर इसको देता हूँ, minus 45 degree, ठीक है, तो मैंने इसको minus के अंदर देए, तो यह anticloakwise आपकी पास हो रहा है, आप clockwise करना चाते हो, anticloakwise करना चाते हो, वो चीज़ हो गई, ठीक है, मैंने 45 degree बो

52:05लेकिन जब मैं hover करूँ, तब वो इसके उपर होना चीए, तो जैसे मैं hover करा हूँ, वो हो रहा है, ठीक है, और मैं यहाँ पर इसको 180 degree ना करके, मैं 45 degree ना करके, मैं यहाँ पर इसको कह देता हूँ, जैसे 360 degree, 360 degree होता ना, अपने पास move, तो मैं 360 degree यहाँ पर कह देता हूँ,

52:35वहर पेपन कह रहे है कि इसको रोटेट कर दो 180 डिग्री तो देखो यहापर 180 डिग्री हो रहा है

52:39360 में तो वह पस इनिशली उसी पोजिशन में पता ही नहीं चल रहा है

52:42अब यही काम मैं अपने टांजिशन है उसमें मैं यहापर करवा चाहता हूँ

52:48मैंने बुला ट्रांजिशन और मैंने बुला और मैंने यहापर बोल दिया 3 सेकंड अब देखो यहापर क्या होता है

52:53तो जैसे आप करसर लेगे जाओगे तीन सेकंड के अंदर वो उसको 180 डिग्री रोटेट करेगा

52:58वापस करसर अटाओगे वापस उसको इनिशिली ले आएगा ठीक है अब यहापर 360 लगाओगे तो आपको वो भी दिखेगा

53:04मैं यहापर कहता हूँ 360 डिग्री ठीक है अब देखो मैं यहापर करसर लेगे जाओगे तो 360 वो उसको रोटेट करेगा

53:09करसर अटाओगे वापस उसको इहापर इनिशिली पोजिशिशन ले आएगा तो यह आपका

53:15रोटेट होता है कि अगर आप इसको रोटेट करना चाते हूँ तो ठीक है अब वो ही रोटेट के अंदर सेम चीज़े है यह आपने रोटेट आपका यहापर पास करा ठीक है

53:25तो ये रोटेट करने का तरीका है कि आप किस तरीके से इसको रोटेट कर सकते हो

53:30किलियर है ये चीज

53:32ठीक है तो ये बात हो गए अपने पास अपने रोटेट की

53:39सर आपने ये जो फाइल बना है MP शॉट हैंड फाइल उसमें

53:54मार्जिन और पैडिंग की शॉट हैंड प्रोपर्टी होगी मेरे जब से और तो क्या हो सकता है

53:58मार्जिन की शॉट हैंड प्रोपर्टी पैडिंग की शॉट हैंड प्रोपर्टी

54:01ये किसी और class की एा.

54:09सर कमेट करने का shortcut की बता दीजिए control और slash

54:11control प्लास slash shortcut की ये होती है

54:19सर होवर करने पे non-stop 360 degree कैसे rotate करते है

54:25होवर करने पे non-stop rotate करना चाहते हूं

54:28वो भी करवा सकते हूं

54:30कि और करने वे नहूम निस्टोप रोटिट भी करने कि विला सकते हो लेकिन plotting लिए एनिमेशन परना पड़ेगा और एनिमेशन परणे पर आगी dengan का में यह यहatा यह ज़ेगा आप चाहते होगे

54:44चलता ही रहे। चलता ही रहे। in finite चलता ही रहे। ऐक बार आपने उस पर over कर दिया तो वह anima का काम है वह transition से नहीं होगा। transition से smoothly fact लगाने की काम आता है.

54:53है ठीक है तो और भी फंक्शन है स्कैल स्क्यू यह सारे अपन नेक्स्ट क्लास में डिसकस करेंगे आज की

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

55:07क्लास के लिए अपने डाउट आप पूछिए नहीं तो मैं आपको अपने डाउट यहां पर मेंशन करते रहें जो भी आपके डाउट है वो डाउट अपने मेंशन करिए

55:25कर दो

55:29कर दो

55:37कर दो

56:07झाल झाल

56:37जाल झाल

57:07इस बिल्कुल फोन साइज भी चेंज कर सकते हैं कोई दिक्कत नहीं है सर वोईस नहीं आ रही है वोईस तो बंदीगर रखी तिक आज आएगी वोईस आपको अटनेंस का पॉइंट वन बताता हूं अटनेंस के पॉइंट वन के अंदर आपको मेंशन करना है

57:37इशा करे सर मुझे इंट्रिव्यू फर्स्ट राउंड का टास्क आज नो बज़े से पहले सेंड करना है आज बारा बज़े पे कंपनी ने दिया है अभी वो कंप्लीट प्रोजेक्ट नहीं बना है अब मुझे क्या करना चीए फुल स्टेक का प्रोजेक्ट है आपको वो �

58:07टास्क क्या है अब अगर बता सकते हो तो मैं थोड़ी सी आपको गाइड कर दूँगा कि क्या आपको उस टास्क में करना है