Day - 25 | Untitled video - Made with Clipchamp - video Dailymotion

skillwaala

👨‍💻 What You’ll Learn in This Class: ✅ What is CSS Grid and why it’s used in web design ✅ Understanding Grid Container and Grid Items ✅ Properties like display: grid, grid-template-columns, and grid-template-rows ✅ Using gap, justify-content, align-items ✅ How to create 2D layouts (rows + columns) easily ✅ Real-time examples — Building a responsive grid layout step by step ✅ Difference between Flexbox and Grid

Transcript

00:00झाल झाल

00:30Hello guys! Good evening everyone!

00:43Good evening Sibul, Ravi, Ashish, Eugene

00:48Good evening Isha

00:53बुड़िवनिंग सूरच

01:01बुड़िवनिंग दिपायन

01:20बुड़िवनिंग दिपायन

01:50आपको नहीं जयस आती है, आपने उसमें अपने प्रोजेक्ट में यूज कराया है, आपने यूज कराया है, तो उसके कुशन पूचे जाएंगे, रियक्ट डेवलेपर का कोई टेकनिकल राउंड होता है, या मुझे सिर्फ मेरी रियक्ट की प्रोजेक्ट ही एक्स्प्रेइ

02:20साइड नहीं कर सकतेगी, project यह explain करना है, क्या चीजे बतानी है, depend करता है, या जो आपका

02:26interview लेगा, उसकी उपर, ठीक है, तो वो project भी पूछेगा, project से related questions

02:32भी कर सकता है, project में जो आपने technology यूज़ करीए, उसमें जो भी आपने hooks

02:37यूज़ करें, आपने data fetch करा है, जो भी काम किया, उससे related कुछ भी

02:41question भी question भी पूछ सकता है, react से related भी question भी question पूछ सकता है, react की

02:45क्या history रही है, अभी कौन सा version चल रहा है, virtual dom क्या होता है, real dom क्या होता है, ऐसे

02:50बहुत सारे questions वो पूछ सकता है, ठीक है, good evening डीपिका, good evening रवी,

03:13ठीक है, तो एक बार सब response कर दो कि मेरी voice किलियर है और screen visible है आप सभी को,

03:18इस चीच का response कर दो आप सभी, कि सर वाइस किलियर है और screen भी visible है,

03:40good evening जुने है दनसारी,

03:44good evening जुने है दनसारी,

03:48sir, मैं BBA first year हो गई, अब मैं सूच रहा हूँ कि BBA कई बाद MC करू,

03:57yes, बिल्कुल कर सकते हैं, MC कोई दिक्कत नहीं है,

04:00जुने हैट करे, full stack web development batch 4,

04:02okay, ठीक है, I know, full stack batch 4 ही है, यह अपना web development का,

04:08और मैं आपको clear कर दूँ, certificate का जो आपको doubt है,

04:27वो यह है कि आपको जो certificate मिलेगा, वो course,

04:30completion का certificate मिलेगा, अपना जो internship project है,

04:34वो आपका major project होगा, internship उसमें नहीं लिखावा होगा,

04:38ठीक है, course complete का आपको certificate मिलेगा,

04:41अब तक जितने भी batch complete हुए, batch 1, 2, 3, अपना 4 अभी running में है,

04:47तो हर batch के अंदर course completion का certificate मिला है,

04:51यह जो course आप कर रहे हो, इस course को complete करने का certificate मिलता है,

04:55ठीक है, internship, अपने web development internship नहीं है,

05:00अगर आप digital marketing, content writing, animation, अगर यह batch करते हो,

05:05तो इसमें internship है, आप यहाँ पर offline skill वाला के institute पाग internship कर सकते हो,

05:11लेकिन web development की internship नहीं है,

05:15offline, और internship के अगर अपन बात करेंगे,

05:18तो जो major project ही है, वो ही आपका internship project रहने वाला है,

05:42ठीक है, आज अपन क्या discuss करने वाले है,

05:46जुनायत करें, video editing का बेबैच है, क्या सर,

05:52हाँ, video editing के सारे batches चलते हैं, अपने यहाँ पर video editing का भी चलता है,

05:56graphic designing का भी चलता है, सारे project यहाँ पर,

05:59अपने, सारे batches यहाँ पर चलते हैं, project क्या,

06:02UG Gaming के रहे major project का internship certificate मिलेगा,

06:05क्या नहीं, internship certificate नहीं, आपको जो certificate मिलेगा,

06:09वो आपको course completion का certificate मिलेगा,

06:12और मैंने आपको हर बार explain कराएं, कि certificate जो है,

06:15वो matter नहीं करता, आप जो सीखोगे, वो matter करेगा,

06:19वहाँ पर, वो ही चीज़े matter करती है,

06:22जो आप यहाँ पर अपनी skills को develop करोगे,

06:25ठीक है, जैसे मालों आप paid course कर रहे हो,

06:29वो आपको course completion और internship दोनों का certificate दे रहा है,

06:33लेकिन आपने वापर इतनी skills सीखी नहीं,

06:36तो आपने 30,000 दे दिए, 40,000 दे दिए,

06:38फिर भी आपकी job नहीं लग दी, ठीक है,

06:41तो certificate matter नहीं करता, matter करती है आपकी skills,

06:45कि आपकी skills क्या है, ठीक है,

06:49तो जितने projects आप बना सकों, उतने projects बनाओ,

06:51पहले चीज़े सीखो, पहले अपनी skills को develop करो,

06:54फिर उसके बाद उसके उपर काम करो,

06:56इशा करेंगे, सर आप एक बार front end development की online internship करवाई थी,

07:06summer internship के नाम से, अब आ सकती है, क्या internship नहीं,

07:09अभी नहीं आईगी, अभी कोई chances नहीं है,

07:12front end development का भी कोई बहची नहीं आने वाला,

07:15अभी complete अपना full stack web development का बहची चलता है,

07:18अगर आपको front end सीखना है, तो इसी के अंदर आप front end सीख सकते हो,

07:22only front end development, लेकिन उसका कोई certificate नहीं मिलेगा,

07:26आपको पूरा course ही complete करना पड़ेगा,

07:28course completion का ही certificate मिलेगा,

07:30क्योंकि ये complete full stack web development का बहच है,

07:34तो ये पूरा complete करके ही आपको certificate मिलेगा,

07:36लेकिन अगर आप front end development की चीज़े सीखना चाते हो,

07:39तो यहाँ से सीख सकते हो,

07:42ठीक है, चलो भाई,

07:44अब अपन आ जाते हैं अपने यहाँ पर,

07:47आज जो अपन डिसकस करेंगे,

07:48आज अपन डिसकस करेंगे CSS,

07:56आज अपन डिसकस करेंगे किस चीज के उपर,

07:58CSS grid के उपर,

08:00कि अपने पास CSS के अंदर grid क्या होता है,

08:03चीक है,

08:03तो एक काम करते हैं,

08:05अपन यहाँ पर एक class बना लेते हैं,

08:07जिसको मैं यहाँ पर कहतेता हूं,

08:09CSS grid,

08:10चीक है,

08:11तो मैं यहाँ पर कहता हूं,

08:12grid.html,

08:14अपने एक चीज पढ़ी थी,

08:17वो अपने पास था अपना flex,

08:18flex में अपने पास क्या होता था,

08:20flex में अपने पास सिर्फ एक ही direction थी,

08:23row या column की इसाब से अपन उसको set कर सकते थे,

08:26चीक है,

08:28अपना जो flex box था,

08:29वो सिर्फ एक ही direction के लिए होता था,

08:31या तो row या फिर column wise आप सेट कर सकते हो,

08:34यह अपनी direction थी,

08:35किसके अंदर,

08:36अपने flex box के अंदर,

08:38लेकिन grid अपने पास क्या होता है,

08:40grid अपने पास दोनों के लिए होता है,

08:42ठीक है,

08:43वहाँ पर अपने पास,

08:44अपनी flex direction जो है,

08:45वो row column के साब से नहीं,

08:46अपने पास दोनों के हिसाप से होता है,

08:48मतलब जो 2D layout अपन यहाँ पर system create करते है,

08:522D layout का system जो create करते है,

08:54वो अपन grid के थूँ कर सकते हैं,

08:56ठीक है,

08:57मतलब अपन elements को यहाँ पर rows और columns,

09:00दोनों direction में arrange कर सकते हैं,

09:03ठीक है,

09:03अपनी जो row है और column है,

09:05उन दोनों direction के अंदर अपन उसको arrange कर सकते हैं,

09:07जैसे मैं यहाँ पर आता हूँ,

09:09वीगार के लिए पनाते हैं,

09:10अपने CSS grid मैं यहाँ पर लिखता हूँ,

09:13और अपन सर्च करते हैं,

09:14images के उपर आता हूँ मैं,

09:17अब देखो यहाँ पर अगर आप देखोगे CSS grid को,

09:21तो देखो यहाँ पर आप अपने जो containers है,

09:25जो भी आपके पास यहाँ पर अपने elements है,

09:27उनको देखो इस तरीके से arrange कर सकते हो,

09:30row में भी और अपके columns में भी,

09:32horizontal और vertical,

09:33जैसे header को मैंने बोला कि यहाँ पर क्या कर लेना,

09:36पूरी ही row occupy कर लेना,

09:38और column यहाँ पर एक भी नहीं बन रहा,

09:40पूरी row देदी मैंने पहली,

09:42फिर दूसरे में मैंने बोला,

09:43दूसरी जो row है, जो दूसरी row आ रही है,

09:46उसमें यहाँ पर एक column slide bar का हो गया,

09:49दूसरा content 1 का हो गया,

09:51और उसी row के अंदर नीचे,

09:53content 2 और content 3 भी मैंने अरेंज कर दिया,

09:56तो e की row के अंदर अपने पास,

09:57यह सारे columns अपर ने अरेंज कर दिया,

10:00ऐसी last में अपने पास,

10:01एक row मैं अपने पूरा पूरा अरेंज कर दिया,

10:04तो यह अपने पास CSS grid होता है,

10:06चिक है,

10:08यह अपना grid system होता है,

10:10जो अपन यहाँ पर set करते हैं,

10:11जैसे अगर मैं यहाँ पर search करता हूँ,

10:14flags and grid,

10:20अब समझना है इस दीच को,

10:33अब देखो, यहाँ पर जो अपना flags box होता है,

10:35वो one dimension होता है,

10:37और जो अपना grid होता,

10:38वो two dimensions होता है,

10:40यहाँ पर one dimension में चल रहा है,

10:41अगर आपने इसको column wise set कर दिया,

10:43तो column wise set होगा,

10:44आपने row wise set कर दिया,

10:45तो row wise set हो जाएगा,

10:47लेकिन यहाँ पर two dimension,

10:48आप column wise और row wise,

10:50दोनों तरीके साब इसको direction में arrange कर सकते हो,

10:53ठीक है,

10:53जैसे मैंने आप पर इस तरीके साइरेंज करता,

10:55जैसे भी आपको अपने containers,

10:56अपने elements को site करना है,

10:57वैसे आप site कर सकते हूँ grid के अंदर,

10:59ठीक है,

11:00तो यह अपने पास अपना CSS का grid होता है,

11:05ठीक है,

11:05चो चलो अपने इस पर discuss करते हैं,

11:08अपने CSS grid के उपर,

11:10और यहाँ पर अपने grid के अपनी एक file बना लिए,

11:14अब देखो यहाँ पर जैसे अपने अपने अपना flexbox पड़ा था,

11:16उसमें अपने देखा था कि अपनी parent की कौन-कौन सी properties आती है,

11:19और अपने पास अपने जो उसके अंदर items होते हैं,

11:22उसकी क्या-क्या properties आती है,

11:23तो यहाँ पर अपने grid को समझने के लिए,

11:48अपने container को,

11:50मैं आपर कहता हूँ,

11:51मैं अपना container, मैंने container बनाया,

11:54और उसके अंदर अपन यहाँ पर अपने boxes बना देता है,

11:56मैं आपर कहता हूँ,

11:57item करके बना देता हूँ,

11:58जैसे एक box बना,

11:59दो, तीन, चार, पाँच, छे,

12:02जितने भी बनाने बना देते हैं अभी के लिए,

12:03और मैं यहाँ आपर कहता हूँ,

12:04यह अपने पास two है,

12:06यह अपने पास three है,

12:07यह अपने पास four है,

12:09यह अपने पास five है,

12:10यह अपने पास six है,

12:12इतना सा काम मैंने आपर कह लिए,

12:14कि मेरे पास यह one, two, three, four, five, six,

12:16यह इस तरीके से अपने पास,

12:17अपने containers अपने यह पर arrange करेंगों तो अपन यहां पर इसको designing भी कर लेते हैं

12:45यहां पर क्रिएट करें वेट मैं आपर कहता हूं 100% रगलो भी के लिए और हाइट अपन यहां पर कह देते हैं वह पन रख देते हैं 90 वी एच पर फेक्ट फिर उसके बाद कंटेनर के अंदर जितने भी आइटम से उनको मैं आपर टार्गेट कर देता हूं तो मैं आपर कहता

13:15इस तरीके से अपन यहां पर इसकी विट और हाइट अपन यहां पर सेट कर देते हैं वेट अपने 200 पिक्सल देदी और हैट भी अपने यहां पर कहता हूं तो अपने पास यह बना रहा है एक बोक्स अ जिसके अंदर

13:45अपने यहां पर क्या किये अपने 6 बॉक्स अपने यहां पर क्रिएट कर दिये इस तरीके से

13:49ठीक है किलियर है यहां तक की चीज बेटे बिनट गाई

14:15झाल

14:45झाल झाल

15:15झाल झाल

15:45झाल

16:15झाल

16:45जावास्क्रिप्ट स्टार्ट होगी जैसे ही अपना

17:00CSS के बाद बूट सेप कम्प्रीट हो जाएगा तह अपनी

17:04JavaScript स्टार्ट होगी इस मन्त के बाद यस बिल्कुल इस मन्त के बाद

17:10स्टार्ट हो जाएगी मतलब अगले साल अपन जावा स्क्रिप्ट स्टार्ट कर देंगे

17:15ठीक है चलो वाई यहां पर आजाओ अपस अपन देख रहे थे अपना

17:21ग्रीड वाला सिस्टम की ग्रीड कैसे होता है अब देखो यहां पर जो मेरा में

17:25बारिण कंटेनर है उसके उपर मैं यहां पर अपनी प्रोपर्टी लगा दा हूँ और वह मैं अपनी डिस्प्लिय प्रोपर्टी और डिस्प्ले में कौन से प्रोपर्टी

17:32pertya grid property मैंने से उपर लगा दी • यहां पर अब लगा दियां अभी के

17:47मैं यहाँ पर weight or height कुछ भी नहीं दे रहा अभी के लिए अपन इस चीज को remove कर देता है

17:53मैं बोल रहा हूं कि weight or height यहाँ पर अभी कुछ भी नहीं है अभी normally रख रहा हूं

17:58उसके अलावा अपन एक काम करते है weight or height ना देनी की जाए अपन इसको कुछ background color दे देता है

18:05अपने जो item से उसको मैं एक background color दे देता हूं और वो मैं यहाँ पर दे देता हूं जैसे brown ठीक है brown background color रख लो और उसके अंदर जो color है वो आप यहाँ पर इसका white रख देना ठीक है

18:19और उसके अलावा अपन एक काम और करते हैं यह जो अपने item आ रहे है इसको भी अपन सैट कर देता है चेक करो एक बार color अपने लगाया तो किस तरीके से आ रहा है यह 1,2,3,4,5,6 इस तरीके से अपने पास यहाँ पर यह आ रहे है ठीक है अब एक काम करते हैं इन सब के ब

18:49ठीक है यहाँ पर अपन क्या लगा देता है अपना gap और gap मैं यहाँ पर जैसे 15 pixel का create करता हूँ हर एक container के बीच में तो देखो यहाँ पर 1,2,3,4,5,6 इस तरीके से अपने पास अपने containers create हो क्या रहे है इसमें परफेक्ट अब मेरे को यहाँ पर क्या करना है अपनी grid जो property ह

19:19properties आती है वो properties अपन यहाँ पर देखते है कि अपने पास जो container है उस container की कौन कौन सी property आती है ठीक है तो पहली property अपने पास आती है grid template columns मतलब अपने columns को define करने के लिए अपन उसको use लेते है अपने grid template columns को तो मैं यहाँ पर आके अपने parent पे ही लगाँगा कि आपको कितने columns divide क

19:49columns लिखा अब यहाँ पर आप पास करूगे कि कि आपको जो columns बनाने है वो कितने बनाने जितने column आपको बनाने उतने यहाँ पर पास कर दो जैसे मैं यहाँ पर कर रहा हूँ पहला column 200 pixel का बना लो 300 pixel का दूसरा column हो ठीक है और तीसरा column आपका यहाँ पर 200 pixel का हो ठीक है यह मैं

20:19कितने का बन रहा है 200 पिक्सल का कॉलम बन जाहे ठीक है तो यह मैंने यहाँ पर

20:25grid template columns मैंने यहाँ पर divide कर दी ए मतलब एक row के अंदर

20:30तीन ही कॉलम यहाँ पर होने चीह है क्योंकि मैंने तीन ही कॉलम

20:33यहाँ पर बोले है ठीक है और यहाँ पर size अपने क्या दे दिया

20:38size अपने यहाँ पर fix size दे दिया

20:40कि 200 pixel का पहला column हो

20:43और दूसरा column 300 pixel का हो

20:46और तीसरा column यहाँ पर 200 pixel का हो

20:49यह fix size है क्योंकि आप pixel में पास कर रहें

20:51ऐसे ही इसके अंदर अपने पास unit आती है

20:53FR unit, friction unit होती है यह अपने पास

20:56यह क्या काम आती है?

20:57यह काम आती responsive के लिए

20:59मतलब जैसे मालो मैंने बुला

21:00पहला 2FR का रख लेना, दूसरा 1FR का रखना

21:05और तीसरा आप 3FR का रखना

21:07अब देखो यहाँ पर 3 columns बनेंगे

21:09लेकिन देखो कैसे बनते हैं

21:10यहाँ पर देखो पहला जो बन रहा है

21:12वो आपका बन रहा है कितने का?

21:13वो बन रहा है आपका यहाँ पर 2FR का

21:15दूसरा आपन करें 1FR का

21:17और तीसरा आपन करें 3FR का

21:19तो पहला मैंने बुला 2FR का

21:21दूसरा मैंने बुला 1FR का

21:23और तीसरा मैंने बुला यहाँ पर 3FR का

21:25तो यहाँ पर 1FR का कौन सा है?

21:28दूसरा चीक है अब जो यह आपका

21:31first जो है

21:33first जो column यहाँ पर create हो रहा है

21:35यह आपका two time है किसका

21:37two fr वाले यह one fr वाले का

21:39मतलब second column का

21:41जैसा अगर अपन यहाँ पर बात करते है

21:43यहाँ पर तीन columns बनेंगे

21:45पहला बनेगा two fr का

21:47दूसरा बनेगा one fr का

21:48और तीसरा बनेगा three fr का

21:50अब यहाँ पर यह जो one fr है

21:53इसका two time होगा कौन सा

21:54first वाला column चीक है

21:56और जो third वाला column है वो

21:58three time होगा किसका इस second वाले का

22:01यही होगा

22:03क्योंकि इस पर multiply होगा

22:05जो आप यहाँ पर initial value दोगे

22:07मतलब one fr जिसको दिया

22:08उसका two time three time यह अपना चलता रहता है

22:11तो यहाँ पर अपने fr में value दी है

22:13आप चाते हो चार में divide हो

22:15मैं तीन में नहीं चालता

22:16मैं चाता हूँ कि चार में हो

22:17जैसे मैंने four fr का एक ओर दे दिया

22:18तो दिक है यहाँ पर

22:20चार में वो columns divide हो जाएंगे

22:21पहला आपने two fr का दिया

22:23यह one fr का है

22:24यह अपने पास क्या है

22:25त्री fr का और यह आपका four fr का

22:28तो वो automatically यहाँ पर arrange होगे

22:30और अगर यह increase होते जाएंगे

22:31जैसे मैं आपर और increase कर देता हूँ

22:33मैं यहाँ पर six और ले आता हूँ

22:35तो यहाँ पर six के हिसाब से

22:37वो और arrange होते रहेंगे

22:38यह सिर्फ अपने क्या arrange करें

22:41अपने columns

22:42row automatically arrange हो रही है

22:44row कितनी बन रही है

22:46एक दो तीन row के अंदर यह columns

22:47अपने पास अपने arrange हो रहे है

22:49पहला यह है दूसरा यह है तीसरा यह है

22:51चोता ही है तो यह अपने columns

22:53यहाँ पर arrange हो रहे है

22:54क्योंकि यहाँ पर मैंने बुला

22:56grid template columns की मेरे को

22:58यहाँ पर columns क्या arrange करने है

23:00सेम ऐसे ही

23:02सेम ऐसे ही अगर आप

23:04यहाँ पर row arrange करना चाते हूँ

23:06कि आपके row की size क्या रहे

23:08तो उसके लिए आपके पास यहाँ पर आता है

23:10grid template rows

23:12चीक है अब यह grid template rows

23:15क्या काम आती है कि आपको

23:17यहाँ पर क्या row set करनी है

23:18जैसे मैंने पहली बोल दी 1 fr की रखो

23:20दूसरी मैंने आपर बोली कि आप 3 fr की रखो

23:23और तीसरी मैंने आपर बोल दी

23:24कि आप 2 fr की रखो

23:26अब देखो यहाँ पर जो 3 row

23:29बनेगी वो कैसे बनेगी

23:30अब देखो 3 row तो बनेगी नी

23:32क्योंकि यहाँ पर सिर्फ अपने पास

23:34जो अपने element से वो कम ही है तो 3 row बनने के तो chances है नी

23:37तो first row जो बन रही है

23:39वो बन रही है आपकी कितने की 1 fr की

23:41जो सबसे minimum होगा वो set कर देगा

23:43second अपन बोल रहे है 3 fr की

23:45मतलब जो 1 fr की है उसका 3 time कर दो

23:473 time यहाँ पर आ रही है अपनी दूसरी row

23:49तो देखो यहाँ पर जो second row है

23:51वो first की 3 time है

23:521, 2, 3 तो first की यहाँ पर 3 time आ रही है

23:57अपनी कौन सी second row

23:58अगर अपने पास और row होती तो

24:00आपको automatically यहाँ पर पता चलता है

24:02जैसे मैं यहाँ पर और अपने elements ले लेता हूँ

24:04ताकि अपने पास third row भी अपनी बन जाए

24:05क्योंकि अपने तीन में divide कर आ है row को

24:07तो यहाँ पर देखो row अगर आप देखोगे

24:09तो यह first row आपकी बन रही है 1fr की

24:12second आपके बन रही है 3fr की

24:15और third आपके पास जो row बन रही है

24:16वो बन रही है आपके पास कितने की 2fr की

24:19ठीक है इस तरीके से हो रहा

24:21जैसे पहला आपने यहाँ आपर बोला

24:22मैं एक बार के लिए इसको हटा देता हूँ

24:234fr को 3-3 की इसाब से चलते हैं

24:25पहला मैंने बोला grid template columns

24:272fr, 1fr, 3fr

24:29नहीं तो अपने एक काम करते हैं

24:30इसको series बाई चलाते 1fr

24:322fr और मैंने आपर बोल दिया 3fr

24:35और यहाँ पर मैंने बोला 1fr

24:372fr और 3fr

24:39ठीक है अब यह fr जो है unit

24:41इसके चुरू आपका जो भी यहाँ पर

24:43main container होगा उसमें जितने भी

24:45items होँगे वो उसी के अंदर responsive रहेंगे

24:47इसलिए अपन fr unit यूज़ करते हैं यहाँ ठीक है

24:50जैसे मैं यहाँ पर आता हूँ और अपन चेक करते हैं

24:53एक बार के लिए इसकी height fix

24:55हटा दो यहाँ से चीक है विर्ती से रहने दो और चेक करो

24:58यहाँ पर इस तरीकी से अपने पास यह आ रहे हाइट या तो 100 वी एच कर दो इसकी

25:03height 100 वी एच करते तो मैं चीक है height को 100 वी एच रख लो तो वो आटोमेटिकली यहाँ पर सही आ जाएगा

25:10perfect

25:12अपने columns तीन में arrange करें तो तीन में arrange करें उस हिसाब से items ज़्यादा जा रहे है इसलिए वो last wall item ऐसे दिख रहा है

25:22अब देखो मैंने यहाँ पर बोड़ा grid template columns 1fr, 2fr और 3fr तो आप यहाँ पर जो columns देख रहे हूँ यह पहला 1fr का बन रहा है यह जो पहला column बन रहा है

25:34यह वाला जो पहला column बन रहा है यह 1fr का बन रहा है ठीक है यह जो column बन रहा है यह आपका 1fr का यहाँ पर बन रहा है

25:44यह वाला जो column बन रहा है

25:51यह कितने का बन रहा है

25:52फिर उसके बाद जो second column बन रहा है

25:56यह वाला यह आपका बन रहा है

25:57कितने का 2FR का

25:59मतलब इसका two time है

26:00देखो यहाँ पर automatically आपको पता चलेगा

26:02यहाँ से divide करोगे तो देखो यह two time हो रहा है

26:04इसका किसका इस वाले का

26:06ऐसे ही अगर अपन यहाँ पर बात करते है

26:10यह जो अपने पास यह वाला column बन रहा है

26:19तो यह जो अपने पास बन रहा है

26:21यह बन रहा है अपने पास three FR का

26:23मतलब यह three time है किसका

26:24जो one FR है उसका तो

26:26एक ये बन रहा है, दूसरा अपने पास यहां पर ये बन रहा है, और तीसरा अपने पास ये बन रहा है, ठीक है, तो ये जगह तो उतनी ले रहा है, बस यहां पर FR के हिसाब से अपने columns यहां पर site हो रहा है, तो ये तीन column यहां पर अपने create हो रहा है, ठीक है, तो ये तो बा

26:56second जो है वह आपकी two fr की यहाँ पर grate हो रही है तो Just

27:03third की अगर अपने बात करते हैं तो 3 fr के यहाँ पर سствие Yi

27:11बाइद हो रही है तो यह इस तरीके से अपने पास three fr में

27:18ही डिवाइड के लिए है तो यह अपने पास vibes और Morocco रोग ग्रीट liberal हीर

27:19अपना grid template columns और grid template rows अपने पास यहाँ पर आती है

27:24जो अपन यहाँ पर use लेते हैं grid template column and grid template rows

27:29ठीक है यहाँ तक की चीज आपको समझ में आई क्या

27:33तो basically अपने सबसे पहले क्या लगाए है आपट display grid लगाए

27:38display grid का मतलब यह है कि उसके अंदर जितने भी child element है

27:43जितने भी child element आपने ले रखे हैं वो grid system में arrange हो जाएंगे वो अटमेटिक लिए

27:49फिर उसके बाद मैंने यहाँ पर बोला template columns और template rows

27:54चीक है तो यह अपने पास अपना grid बनाते हैं

27:57पहला मैंने बोला grid template column 1fr, 3fr, 2fr और 3fr

28:02इसका मतलब यह है कि 3 columns यहाँ पर बनने वाले है 1, 2, 3fr के

28:07और फिर मैंने बोला grid template row इसका मतलब 3 row यहाँ पर बनने वाली है

28:121fr, 2fr और 3fr की चीक है तो यह अपने पास total इस तरीके से अपने create होने वाले है

28:18चीक है तो यह बात हो गई अपने पास अपने columns और rows की

28:23ठीक है अब अगर अपन यहाँ पर बात करते हैं 3-3 का अपने combination रखा है

28:27तो इसका मतलब यहाँ पर सिर्फ इतने ही element arrange होने वाले है

28:30ठीक है दो ही बनाई है अपने तो total कितने अपने पास यहाँ पर arrange हो रहे

28:34पहला तो यह अपने पास arrange हो क्या रहा है

28:36दूसरा यह और तीसरा यह बस यह

28:38total 9 element अपने पास arrange हो रहे

28:40उसके बाद की element अपने पास normal जो है

28:42उसी condition में दीखेंगे

28:43क्योंकि अपने सिर्फ यहाँ पर column जो है

28:46वो मैंने column यहाँ

28:48column तो अपने side decide करें

28:49column तो मैंने बोल दिया 3 में कर देना

28:51लेकिन row सिर्फ 3 ही लिये मैंने

28:53row यहाँ पर 3 ही लिये

28:54पहली row यह है दूसरी row यह है

28:57और तीसरी row यह है

28:58यह वाली row अपने लीनी अगर मैं third row को भी भोलता

29:01उसको कितना रखना है तो वो automatically set होता

29:03जैसे मैं यहाँ पर कहता हूँ 1fr

29:05क्योंकि अपने पास item जादा है

29:07तो मैंने यहाँ पर इसको 1fr पास कर दिया

29:09तो यहाँ पर last में देखोगे

29:11तो वो 1fr में automatically set हो गया

29:13चीक है तो यह अपने पास

29:15अपनी

29:16क्या होता है

29:18grid template columns और grid template row होता है

29:21चीक है

29:22fr अपने पास अपनी fraction unit होती है

29:25चीक है

29:26तो fraction basically अपने पास

29:28जो भी available space होता है

29:30उसके अंदर वो automatically हाँ पर responsive हो जाता है

29:33चीक है जैसे अपने जो भी part

29:34यहाँ पर divide कर देते हैं

29:36उसी ratio के अंदर वो divide हो जाते है

29:38जो भी ratio में यहाँ पर दे रहा हूँ

29:39जैसे मैंने बोला 1fr, 2fr, 3fr

29:41तो 1 ratio, 2 ratio, 3 यहाँ पर मैंने set कर दिया

29:44यहाँ पर मैंने set कर दिया

29:451 ratio, 2 ratio, 3 ratio, 1

29:47चीक है

29:48तो यह अपने पास अपना ratio होता है

29:50जो पर यहाँ पर decide कर देते है

29:51full form of fr friction, friction unit है यह

29:56और यह काम आती है

29:57responsive के लिए पर इसको use लेते है

29:59अपने पास यहाँ पर सिर्फ

30:01fr use नहीं करते है

30:04punt ठीक है

30:05यहाँ पर और भी जो अपनी है

30:07सारी चीज़े वो पर यहाँ पर use करते है

30:09जैसे अपने पास pixel भी आती है

30:11अपने पास percentage भी आती है

30:13ठीक है

30:15clear है यहाँ तक की चीज

30:19sir grid कहा पर use होता है

30:25real life example में बताओ

30:27real life example में मैंने आपको भी बताया था

30:29grid जो है वो काम आता है आपके

30:31two dimension के लिए

30:33और जो आपके पास यहाँ पर

30:35आपका flex है

30:37वो one dimension के लिए

30:39गाम आता है यहाँ पर दो को

30:41automatically मैंने example बताया था भी

30:42जैसे अपन

30:45grid की बात करते है

30:47display grid

30:48grid in

30:55CSS हा जाता हूं में एक बार के लिए

30:57और यहाँ पर अगर आपके

30:59check करेंगे तो देखो यह रहा आपका header

31:01आपने बनाया header आपको पूरा देना है

31:03फिर आपको इदर एक slide बार बनाना है

31:05तो यह grid की थूँ करोगे आपका

31:06आपका जो main container उसके अंदर फिर आपने

31:09content यहाँ पर आजाएगा content 2 यहाँ आजाएगा फिर फूटरा जाएगा

31:12इस तरीके का अगर आपको layout बनाना है तो आप यहाँ पर

31:15grid की थूँ बनाऊगे

31:16ठीक है depend करता आपको

31:19क्या layout बनाना है ठीक है जैसे

31:21यहाँ पर इसने यह बता रहा है header फिर main content यहाँ आ रहा है slider इदर आ रहा है

31:25twin twin यहाँ पर इसने दे दी है इस तरीके से यहाँ फिर इस तरीके से बनाना है

31:30आपको e, b, d, e, f, c इस तरीके से बनाना है

31:33वहाँ पर आपका grid यूज आता है

31:36मतलब जो semantic layout के लिए grid का use करते है क्या

31:43grid का use semantic tag अलग हुग है

31:46semantic tag तो बिल्कुल अलग चीज है

31:48grid जो है वो काम आता है आपके elements को set करने के लिए

31:53कि आपको columns में कितना arrange करना है और आपको row में कितना space चीए

31:58उसके लिए अपने यूज लेते हैं अपने grid का

32:00मतलब जो आपका parent है उसके अंदर जितने भी child है उनको किस तरीके से set करना है

32:05ठीक है

32:06two dimension के लिए अपने इसको use लेते है

32:11तो ये अपने पास grid template columns और grid template rows अपने पास यहाँ पर यह आती है

32:24properties

32:24उसके बाद next अपन आगे यहाँ पर चलते है

32:32अपने यहाँ पर अब देखो यहाँ पर मैंने fr में दिये तो वो तो automatically आ रहे हैं जो क्या रही है लेकिन अगर मैं pixel में देता हूँ

32:43यहाँ पर percentage में देता हूँ तब क्या करना रहता देखो यहाँ पर मैं इसको change करता हूँ मैं बोलता हूँ कि आप

32:51यहाँ पर 200-pixel, 200-pixel और 200-pixel के 3 column मना देना तो यहाँ पर 200-pixel, 200-pixel, 200-pixel के 3 column मन जाएंगे और row जो है उसको भी मैं यहाँ पर कह देता हूँ कि आप यहाँ पर 100-pixel, 200-pixel और 300-pixel के 3 row आप यहाँ पर create कर देना

33:14column सिर्फ इतने ही रख लो आप बतलब item सिर्फ इतनी रख लो तो यहाँ पर मैंने यह बोला item कम रह रहे तो वापस कर लो copy-paste कोई दिक्कत नहीं है तो यहाँ पर कोईस तरीके से मैंने बोला कि यह जो है वो क्या करना है आपको 200-pixel, 200-pixel, 200-pixel और जो अपने पास rows है उस

33:44next decide नहीं है तो automatically जो space बच रहा है वहाँ पर arrange हो रहा है, next को मैंने decide ही नहीं करा, मैंने यहाँ पर सिर्फ कितने दी है, columns को मैंने सिर्फ 3 ही दिया, अगर आपको next को भी decide करना है तो उसको भी आप यहाँ पर 500-pixel दे तो, वो automatically arrange हो जाएगा, तो तो यहाँ पर 500-pixel वहाँ �

34:14इस container के अंदर ही वो set रहता, बाहर नहीं जाता है आपका जो भी extra content है, अभी देखो बाहर जा रहा है मेरा, ठीक है, तो यहाँ पर अपन इसको 100-pixel और मैं यहाँ पर कहता हूँ 100-pixel बाहर नहीं जाना चाहिए, उससे साब देखर लेते हैं अभी के लिए, 100-pixel और 100-pixel, 100

34:44प्रोपर्टी आती है अपने इस container की ही और वो प्रोपर्टी आती है अपने पास अपना justify content, और justify content के अंदर value आती है अपने पास अपनी center, ठीक है, तो यहाँ पर वो horizontally center में आ जाएगा, center में क्या रहा है, अपका complete grid यहाँ पर center के अंदर आ रहा है, ठीक है, ऐसे ही अगर मि

35:14center में आ जाएगा, तो यहाँ पर इस तरीके से आपका grid जो है, वो complete center में आ गया, मैं यहाँ पर inspect करके समझता हूँ, इस चीच को, यहाँ पर आते है पन इसको एक बार के लिए inspect करते हैं, और समझते चीच को, यह लो inspect कर लो, चीक है, अब देखो यह आपका complete main view है, इसी के �

35:44का मतलब ही हुए, start का मतलब हुए है, left, normal, right, space around, सबके बीच में space होजागा है, space between, सबके बीच में space होजागा है, space evenly, start, stretch, यह सारी चीचे अपने पास इसके अंदर value होती है, वही सारी values है, जो अपने flex में देखी थी, align content के अगर आपन बात करते हैं, तो इसमें भी अपने

36:14align content के अंदर, चीक है, तो यह आपका align content यहाँ पर होता है, अब देखो मैं यहाँ पर आता हूँ, एक बार के लिए मैं इस grid को यहाँ पर select करता हूँ, कि मेरा grid बन कैसे रहा है, तो यहाँ पर जैसे मैंने grid को select करा, तो मेरे को यहाँ पर ही बता रहा है, कि आपका grid यहाँ �

36:44फिर उसके बाद देखो यहाँ पर 1-2 एक कॉलम, 2-3 एक कॉलम और 3-4 एक कॉलम, फिर रो की बात करें तो 1-2 की एक रो है, 2-3 की एक रो है, 3-4 की एक रो है, और 4-5 की एक रो है, ठीक है, यह एक लाइन है, इनके बीच में बनने वाली लाइन जो है, आपको यहाँ पर दिख

37:14उसके अलावा अगर row की बात करें तो रो की first line ये है, row की second line ये है और row की third line ये है और row की ही fourth line और fifth line

37:24इस तरीके से अपने पस ये lines आरी है अपनी इस grid की कि क्या lines यहां पर divide हो रही है आपके इस grid के लिए

37:30अब यहां पर आप जैसे justify content center लगा रहे हो अब एंड कर रहे हो तो जब भी आप यह property लगा रहे हो तो आपका complete grid यहां पर move हो रहा है complete grid देखो यहां पर जैसे space between कर दिया तो between हो गया उनके बीच में space सबकी बीच में जो जितना responsive के हिसाब से हो सकता है वो space यहां पर create हो रहा

38:00क्या होती है vertically उसको align करने के लिए और justify content क्या होती है horizontally

38:10अपने पास अपने justify content और align content की ऐसे ही अपने पास एक और property आती है और वो

38:22property अपने पास align item चीक है अब align item क्या काम आती है

38:30align justify content तो horizontally कर रही है align item vertically कर रही है

38:35लेकिन align item क्या होती है align contents होगी align item यहाँ पर

38:40अपने पास क्या काम आती है align item प्याते है तो चलो align item के उपर

38:47पर आजाते कि अपने पास जो अपनी अलाइन आइटम है वो किस तरीके से अपने पास काम आती है

38:52अब देखो यहीं पर आता हूँ और मैं यहीं पर लगाता हूँ अपनी अलाइन आइटम्स प्रोपर्टी और उसमें जैसे मैं बोलता हूँ

39:02another center, best line, center, end, flex end, flex start, normal, self end

39:08यह सारी properties जैसे में लगा रहा हूँ तो यहाँ पर कुछ ने कुछ changes हो रहे है

39:13और यह changes हो क्या रहे है, समझना इस चीज को

39:16देखो यहाँ पर जैसे मैं बोल रहा हूँ anchor center

39:20इसका मतलब जो आपका grid बन रहा है

39:22यह जो आपका complete grid बन रहा है

39:25यह वाला जो first grid बन रहा है, इस first item के लिए

39:28उस first item के अंदर अपने पास ही क्या हो रहा है

39:31center के अंदर आ रहा है

39:33अगर आप बोलते हो baseline तो वो उसके top line पे चला जाएगा

39:37center बोलोगे, center में आ जाएगा, end में बोलोगे, end आ जाएगा

39:39flex end, flex start की बात है

39:41normal बोलोगे, normal रहेगा, self end बोलोगे, self start बोलोगे

39:45stretch अगर आप बोलोगे तो पूरे में stretch हो जाएगा

39:47तो यह जो आपकी align item है

39:55यह काम आती है कि आपका जो grid का area है

40:00उस grid के area के अंदर उस item को कहां पे रखना है

40:04center में रखना है, start पे रखना है, end पे रखना है

40:08यह फिर stretch करके रखना है, वो सारी चीजे अपन पास करते है

40:12अपने align item के अंदर, ठीक है, अगर अपन बात करें

40:15align content की, तो वो क्या करता है, वो आपके entire grid को

40:20set करता है, मतलब सारे grid को, ठीक है

40:23लेकिन अगर अपन बात करते है, अपने align item की

40:27तो वो सिर्फ आपका जो grid area है, जिस item का

40:32grid area है, उस item के grid area के अंदर set करता है

40:35दोनों में difference समझना, align content क्या करता है

40:39align content यह जो आपका complete grid बना है, इस complete grid को

40:45set करता है, और कैसे set करता है, वो vertically

40:47लेकिन align item क्या करता है, align item जो आपके पास यहां

40:53पर आपके grid areas है, जैसे 1 से लेके 2 तक का, 2 से लेके

40:573 तक का यह grid area, फिर 3 से लेके 4 तक का, ऐसे row wise

41:011 से 2 का, 2 से 3 का, 3 से 4 का, मतलब यह जो आपका grid area है

41:07इस grid area में align करता है अपने item को, तो यह आपके पास

41:12आपका align item होता है

41:14जो अपन यहाँ पर use करते हैं

41:15अपने grid के अंदर

41:17चीक है तो यह बात हो गई

41:20अपने पास अपने grid के उपर

41:22अपने कुछ properties देखी

41:23यहाँ तक की चीज समझ में हैं

41:25यह तो एक बार बताना

41:26Sir, FR pixel से greater than है

41:30आप units में ascending order

41:32बता दीजिए

41:33ऐसा कुछ ही नहीं है

41:34FR pixel से greater देने यह नहीं बता रहा है

41:37friction unit है

41:38और यह सिर्फ grid के अंदर use करते है

41:40यह basically वैसे use नहीं होती

41:42यह सिर्फ grid के अंदर use होती है

41:44और grid में पन इसको use करते है

41:45responsibly लिए

41:46मतलब जितना आपका main container है

41:49उस container के इसाब से

41:51आपका grid site होने वाला है

41:52ठीक है

41:53फिर उसके बाद

41:54SKS बोल रहे हैं कि sir

41:56grid के अंदर grid को बना सकते है क्या

41:59grid के अंदर grid को बना सकते है क्या

42:01यह बिल्कुल बना सकते है

42:03grid के अंदर अगर आप grid site करना है

42:04तो वैसे ज़रुत नहीं पड़ती

42:06आप जैसे यह वाला structure बनाना चाते हो

42:08या फिर जैसे यह structure बनाना चाते हो

42:11तो यह structure बहुत easy है

42:12अब भी देखने में आपको लग रहा है कि

42:13कैसे बनेगा, क्या होगा

42:15बिल्कुल easy सा structure है यह

42:18यह बना के दिखाऊंगा मैं आपको यह structure भी

42:20निमिशा कर रहे

42:22सर, bootstrap में जैसे rows में 12 columns

42:25maximum ले सकते है

42:27CSS में कोई maximum limit है

42:29क्या columns की

42:30CSS में maximum limit automatically set होती है

42:33जैसे अगर आप flags use करते हो

42:35जैसे आप बोलो कि सर, bootstrap के अंदर

42:38जैसे ही rows में 12 columns ले सकते है

42:40तो जो bootstrap है

42:41उसमें जो row आप use लेते हो

42:43जैसे आप row class यूज लेते हो

42:46उसके उपर display flex ही लगा वा है

42:48और flex के अंदर उसने यहाँ पर

42:50flex wrap property लगा रखी है

42:52तो wrap के अंदर वो सिर्फ 12 columns को ही ले रहा है

42:54और अगर आप display flex लगा के

42:57ये काम अपने इसके उपर भी करोगे

42:58उसकी height और width set करके

43:01तो वो भी 12 column ही लेगा

43:03ठीक है क्योंकि वो wrap property उसके उपर लगी वी है

43:06अगर आप जाके चेक करोगे

43:07जो boot set यूज करते हो उसमें

43:09तो जो आपकी row है उसके उपर display flex में

43:12flex wrap property ही लगी वी है

43:14ठीक है तो ये बात हो गए अपने पास

43:20किसकी अपने grid के

43:21जो भी अपने पास अपने containers आते है

43:24उन containers के उपर अपने

43:25मतलब container के उपर जो जो properties आती है

43:27उन properties पे अपने discussion किया

43:30कि अपने पास कौन कौन सी properties आती है

43:32अपने container के उपर

43:34ठीक है यहाँ तक की चीज के लिए रहे

43:47यह तो सिर्फ container की property दिखिए

43:55अपने क्योंकि container की property से यह चीज हुई है

43:57चलो मैं आपको टास्क बता देता हूँ

44:02टास्क कौन कौन से अब आप complete कर सकते हो

44:04क्योंकि अपने CSS लगबग complete हो चुका है

44:06अब अपन प्रोजेक्ट बनाने वाले next class के अंदर

44:09उससे पहले मैं आपको टास्क बता देता हूँ

44:11जितने भी टास्क थे वो लगबग आप सारे complete करोगी

44:15क्योंकि कल 25 है तो कल अपनी class नहीं है

44:1825 का अपनी class का off है

44:20ठीक है तो वो टास्क आपको complete करने सारे

44:22और फिर Friday को class है

44:25वो doubt class होगी प्लस अपना जो grade है

44:27वो remaining वो रहेगा फिर Saturday Sunday फिर class नहीं रहेगी

44:29तो आपके पास time में इन सारे

44:31टास्क को complete करने का

44:32एक तो business development वाला आपने complete कर लिया

44:35card वाला आपने complete कर लिया

44:37table वाला मैंने दे दिया था

44:38ये experts वाला भी मैंने आपको दे दिया

44:40flow desk वाला मैंने दे दिया

44:41ये hiring UI task है

44:43इस task को कैसे बनाना है

44:45बड़ा easy है आपको एक container लेना है

44:47चीक है उस container के अंदर

44:49यहाँ पर right

44:51ये जो अपना right side ये left side है

44:53left side आपको ये content के लिए

44:54एक div लेना है और right side आपको

44:56एक div लेना है जिसमें image लगानी है

44:58चीक है तो इदर जो left side वाला div है

45:01उसमें आपको लिखना है

45:02ways to streamline your hiring process बस इतना सा

45:05और इसको display flex के तुरू

45:07आप यहाँ पर arrange करोगे

45:08बस display flex property से ये काम होने वाला है

45:11तो ये आपका task है अज का

45:14उसके अलावा ये वाला मैंने आपको दे दिया था

45:16login form जो आपने बना लिया होगा

45:17restaurant point वाला मैंने आपको दे दिया था

45:19task की है

45:20portfolio वाला भी मैंने आपको दे दिया था

45:22उसके अलावा ये to do app का एक task है

45:25इसमें आपको क्या करना है

45:26एक div लेना है और इस div के अंदर आपको यहाँ पर

45:29to do app लिखाव होगना चीए

45:31view task का एक button लगाना है

45:33add task का एक button लगाना है

45:35complete task का एक button लगाना है

45:37delete task का एक button लगाना है

45:38और exit का एक button लगाना है

45:40तो ये एक basic सा to do app का

45:43UI आपको यहाँ पर create करना है

45:44और इसी UI को पन जावा स्क्रिप्ट से

45:46punctually लगा के run भी करवाएंगे

45:49तो ये UI आपको बनाना है

45:51ठीक है compulsory है ये बनाना है

45:53फिर उसके बाद next task

45:55आपको ये वाला UI task है

45:57basic सा है ये भी

45:59ये hero section है

46:01hero section बनाना है आपको

46:02इसमें आपको एक

46:04container लेना है और उस container के अंदर

46:07आपको ये navbar बनानी है

46:09navbar का और container का color same रखना है

46:11उसके लावा आपको

46:13फिर एक mean container लेना है उसके अंदर

46:15उसके अंदर ये left वाला container होगा

46:17right वाला container होगा जिसमें आप image लगाने वालो

46:20left वाले के अंदर आपको

46:21ये सारी चीज़े mention करना है

46:23ये button बनाना है फिर उसके पाद आपको

46:25last में एक message लिखना है

46:27send a message ठीक है ये बस इतना सा काम करना है

46:30तो ये flags के थू होगा

46:31उसके अलावा ये वाले task है

46:35ये zoomato का अलग task है

46:37और ये वाला नीचे वाला अलग task है

46:39तो ये कैसे बनाना है

46:40ये आपको एक container लेना है

46:43और उसकी width और height set करके आपको रखनी है

46:45उसके अलावा ये जो zoomato

46:47ये पूरा complete content लिखावा है

46:49ये center में लेना चाहिए

46:50इसका मतलब आप main container पर display flags लगा के

46:52justify content align item करने वाले हो

46:54फिर zoomato, discover the best

46:57ये सारी चीज़ लिखनी है

46:58और ये search वाला icon आपको यहाँ पर लगाना है

47:00फिर उसके बाद next आपको क्या करना है

47:03next आपको ये वाला बनाना है

47:05इसके अंदर main container लेना है

47:06जिसमें background image लगी भी है

47:08और ये वाला content आपको center में लेके आना है

47:10display flags property के दूप

47:12बस इतना था काम आपको यहाँ पर करना है

47:14तो ये task है जो आपको बनाने

47:16ये वाला task बात का है

47:18अभी नहीं बनाना आपको

47:19तो ये कुछ task है जो आपको यहाँ पर complete करने है

47:23clear है यहाँ तक की चीजे

47:27sir div class में image tag कैसे लगाए

47:46मतलब

47:48unmall करे sir ये सब task मिलेंगे कहां से

47:52ये मैंने आपको जो link है वो share कर रखा है

47:55वहाँ से मिलेंगे

47:56sir एक बार फिर से बताए क्या क्या task है

47:58मैंने सारे task अभी repeat करें थे

48:00ये वाला आपने बना लिया ये वाला बना लिया

48:02ये भी बना लिया ये एक तो hiring वाला है

48:05ये जो आपको है बनाना है

48:06flex के तुरू बनेगा ये वाला

48:07उसके लावा ये सारे मैंने complete करने के लिए बोल दीते हैं आपने समने कर भी लिए

48:12ये to do app आपको बनाना है एक की ये hero section है इससे आपकी ही practice होगी ये आपको बनाना है

48:18और एक दो task है अलग अलगे दोनों पहला ये वाला है geometo वाला और दूसरा आपका यहाँ पर ये वाला है explore ता ये जो बाली का ट्रिप का जो बनावा है ये वाला आपको यहाँ पर करना है बस ये चोटे चोटे task है

48:31ठिक है तो ये आपको यहाँ पर बनाने है

48:48यह आपको description में मिल जायागा link जो है description में मिल जायागा

49:10और attendance के point one के अंदर आपको mention करना है grid

49:13attendance के point one के अंदर आपको mention करना है grid

49:17यही attendance का point one है आज की class के attendance का point one

49:20ग्रेड अपना complete नहीं हुआ अपना next class में ग्रेड ही देखेंगे फिर अपना project बनाएंगे फिर bootstrap पे आएंगे

49:29ठीक है फिर bootstrap complete होने के बाद अपना आगे देखेंगे

49:34पीकु करे repeat auto fit property कैसे work करता है yes बिल्कुल repeat property नहीं है repeat auto fit यह सब values है repeat function है

49:43auto fit यहाँ पर अपने पास auto जो property होती है वो अपन यहाँ पर देखेंगे value है यह auto ठीक है

49:49तो repeat एक function है इसको कैसे use लेते है यह भी बताऊंगा मैं ठीक है यह next class में बताऊंगा grid complete नहीं हुआ है

49:55क्योंकि grid के जो items है उसके उपर भी अपन discussion करेंगे अभी क्योंकि important topic है grid और flex दो important topic है

50:02और next class में अपन अपना grid complete करके media query पर भी discuss करेंगे और वो final class रहेगे अपनी CSS की

50:09फिर उसके बाद अपन project में देखेंगे अगर कुछ भी चीज़े रहे जाती है तो ठीक है

50:14वो सकता है project में कई आपको properties नहीं पता चले ठीक है

50:20तो वहाँ पर मैं आपको explain करता रहूँगा अगर मैं कुछ नहीं use करता हूँ तो वहाँ पर

50:25क्योंकि requirement के साब से चलेगी सब चीज़े ठीक है तो जैसे जैसे अपन project बनाएंगे वहाँ पर भी नहीं नहीं चीज़े सीखने को मिलेगी

50:32और mean आपको project बनाना है सबको ताकि आपको clarity मिले हर चीज़ के अंदर ठीक है

50:48सर लाइन हाइट कैसे वर्क करता है लाइन हाइट वर्क करता है आप जो भी paragraph लेते हो उसके उपर वर्क करता है जैसे मालो मैं यहाँ पर कोई भी paragraph टैग ले लेता हूँ

50:56लाइन करके 50 का अपने आपर अपना paragraph ले लिया और यहाँ पर आके पन्चेक करते क्या आ रहा है अपने पास

51:08यह paragraph आ रहा है अपने पास ठीक है अब अपने को क्या करना है line height देखनी है line height मतलब हर एक line के बीच में height तो line height लगा तो यहाँ पर

51:22जैसे यह paragraph है ठीक है इसके उपर में को क्या लगानी है अपनी line height लगानी है ठीक है और वो मैं जैसे लगा दता हूँ

51:3130 pixel तो 30 pixel की मैंने यहाँ पर set कर दी तो fix line height हो जाएगी जितनी भी line है उन सब के बीच की कितनी spacing आपको रखनी है वो है यहाँ पर

51:40जैसे मैं आपर इसको target करता हूँ तो देखो मैं आपर change करता हूँ यह लो लाइन के बीच में कितनी height रखनी है वो आपके पास line height होती है

51:49शूरज के रहे कि सर वन्वी की वेन वी कैन एस पर दो जावस्कृप्ट विल स्टार्ट जावस्क्रिप्ट अपनी स्टार्ट होगी

52:02दस दिन बाद आज के दस दिन बाद

52:06आज के दस दिन बाद

52:19सर स्पैन से भी हो सकता ना दो लाइन के बीच में height येज बिल्कुल हो सकती है

52:25attendance के point two के अंदर आपको mention करना है

52:32देवान शूसर यह attendance का point two है attendance के point two के अंदर आपको देवान शूसर mention करना है

52:44ठीक है ठीक है आज की class अपन इतनी रखते है बाग की फिर अपन डिसकस करते है अपनी next class के अंदर और interesting topics के साथ

52:54ठीक है ओके thank you so much guys मिलते है फिर अपन अपनी next class के अंदर bye bye everyone and take care all सभी अपना ध्यान रखो

53:02गुटनाइट everyone

Day - 25 | Untitled video - Made with Clipchamp

Category

Transcript

Comments

Recommended