- 3 hours ago
👨💻 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
✅ 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
Category
📚
LearningTranscript
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
Be the first to comment