Up next in 10
Exercise 4 - Solution & Shoutouts _ Sigma Web Development Course - Tutorial #36
Mar 11, 2024
In Tutorial #36 of the Sigma Web Development Course, we unveil the solution to Exercise 4 – the Multi-Color Website challenge – and take a moment for special shoutouts! This session provides participants with a comprehensive walkthrough of the exercise, offering insights into effective problem-solving, creative styling, and responsive design techniques. Additionally, we recognize and celebrate the efforts of the community through shoutouts, fostering a collaborative and supportive learning environment. Whether you're a participant eager to compare your solution or a viewer interested in acknowledging outstanding contributions, this tutorial offers closure to Exercise 4 while highlighting the collective progress of the Sigma Web Development Course community. Join us as we applaud achievements and continue our journey towards mastering web development skills.
Show More Show Less View Video Transcript
0:00
आप में से कई लोगों ने एक्सरसाइज फॉर को�ॉल किया था आज के इस वीडियो में आप सभी को शाउट और नुबई जिस जिस एक्सरसाइ��
0:05
4 को सॉल किया था और हम लोग एक्सराइज फॉर के सॉल्यूशन को भी देखेंगे लाइक करते रहे हैं यार वीडियो को नीच��
0:10
कॉमेंट सेक्शन में सिग्मा बैचों भी जरूर लिख देना चलते हैं कंप्यूटर स्क्रीन में लेट्स रोल दें इंट्र��
0:15
यहां मेरा फोल्डर सिग्मा वेब डिवेलपमेंट को इसको बीएस कोड में खोल दूंगा अक्शनी किसी ने मुझ��
0:31
सजेस्ट किया था यार आप डायरेक्टली इसको ऐसे क्यों नहीं खोलते तो यार देखने में लोग कहते हैं ज्याद��
0:39
लगता है पर डेट्स फाइन यार मैं यहां से भी कर सकता हूं इट्स टोटली से मेरे हिसाब से तो वीडिय��
0:45
थर्टी सिक्स नाम से फोल्टर बनाऊंगा और मैंने इसको बना डाला वीडियो थर्टी फोर के अंदर इसको बाहर निकालेंग��
0:50
इसको बाहर निकालते हैं और बाहर निकालेंगे तो यह बाहर आ जाएगा बाहर आ जाओ भๆ हां गया पर मूव और यह करने क��
0:57
बाद यहां पर हमारा वीडियो थर्टेसेक्स का लिए इसके अंदर एक इंडिक्स डॉट हटीएमल और हमेशा की तरह मैं सबसे पहल��
1:04
लोगों को सॉल्व करके दिखाऊंगा इस क्वेश्चन को और उसके बाद वहां से हम लोग चीजों को ले कर जाएंगे तो लेट्��
1:10
बिस्टार्टेड अभी थर्टी फोर्ट वाला वीडियो था एक ऐसा मारा नहीं थर्टी फोर्ट वाला नहीं था एक एस थर्ड वीडिय��
1:15
था जिसमें हम एक मल्टी कलर वेबसाइट बनानी थी विच कैन चेंज कलर यूजिंग सीएसेस मेरे वर्यवर्स मेरे साथ स��
1:21
एक बहुत ही बेसिक और बहुत ही सिंपल सी एक्सरसाइज थी तो चलो सीएसस मल्टी कलर वेबसाइट इसको जिस तरह स��
1:31
मैं लिखूंगा और यहां पर मैं एक स्टाइल टैक डालूंगा यह स्मॉल में मुझे लिखना पड़ेगा स्टाइल और यह करन��
1:40
यहां पर सबसे पहले मैं यहां पर एक हैडर टैक बनाऊंगा ठीक है फिर एक नेव टैक बनाऊंगा फिर एक यूएल बनाऊंग��
1:47
फिर एक एलाई बनाऊंगा ठीक है यह करने के बाद मैं आपको लिखूंगा होम और इसके बाद मैं थोड़े बाद रेप्लिके��
1:53
करूंगा इसको और मैंने कैसे रेप्लिकेट किया यह आप लोगों को दिखाने के लिए मैं स्क्रीन कास मोड खोलूंग��
1:59
ने ऑल्ट शिफ्ट और डाउन एरो की जो है वह यूज करी हालांकि आप लोग इसको यहां पर piace कोड की सेटिंग्स में जाक��
2:06
चेंज भी कर सकते हो कीबोर्ड शॉर्टकट्स करके होता है अगर आप लोगों नहीं दिखा तो मैं दिखाऊं आपको यहा��
2:11
keyboard shortcuts करके होता है और आप लोगों को दिख गया होगा आप तो यहां पर हो यहां पर अबाउट और यहां पर मै��
2:18
अब लिखता हूं और यहां पर लिखता हूं सर्विस और यहां पर कॉन्टैक्ट अजय कह यहां पर मैं कॉन्टैक्ट लिख सकता हू��
2:25
और यह करने के बाद आप लोग देखो कि हमारी वेबसाइट कुछ इस तरह दिख रही है मैं आप पर प्रीव्यूस को यहीं के लिए कर सकता हूं ठीक ह��
2:33
तो मैं कह सकता हूँ कि यार जो UL के अंदर LI है उसका जो list style है उसको none कर दो और फिर उसके बाद मैं कह सकता हूँ कि जो UL है जो हमारे UL है अगर मैं चाहूँ कि ये सारे के सारे horizontally आ जाएं और मैं चाहूँ कि flex box भी मैं use ना करूँ तो ये मैं कैसे करूँगा आप बताओ comment section म��
3:03
हालांकि ये मेरे साफ से बहुत अच्छा approach नहीं है, but again, अगर आप लोग इसको display in line कर दोगे
3:08
LI को, तो आप लोगों को क्या होगा, ये इस तरह से आ जाएगा, और उसी के साथ तरह अगर आप इसमें padding दे देते हो
3:14
23 pixel की padding अगर दे देते हो, तो यह देखो यह कुछ इस तरह से आगे अभी मैं इसको आपको दिखाऊं तो यह ऐसा देख रहा है ठीक है तो इस तरह का ज��
3:19
background color star M0 P0
3:37
इसको ब्राउजर में खोल लेता हूं। लेता हूं अगर आप लोगों ने बिल्कुल सिग्मा वेब डेलॉपमेंट की जो प्लेलिस्ट वह एक्सेस नहीं करिए तो यार कर��
3:44
यार एक्सेस क्या कर रहे हो मतलब ऐसे करते हैं क्या तो मैं यहां पर इसको ओपन ब्राउजर होगा ताकि यहां प��
3:52
लेकिन आप देखो कुछ इस तरह से दिख रही है ठीक है मैं इसका फाइड वगैरह चेंज कर सकता हूं बहुत साही चीजे��
3:56
मैं कर सकता हूं लेकिन अभी मैं फोकस करूंगा किसी पर फोकस करूंगा मैं इसको मल्टी कलर बनाने का तो मै��
4:01
डाइडिंग दूंगा टॉप बॉटम से 12 पिक्सल लेफ्ट राइट से जीरो दे दूंगा और इसको मैं ऐसे कर दूंगा ठीक है औ��
4:07
आफिसी मीडिया को यह मैसेज में अभी नहीं लगाऊंगा मैं इसको एक बहुə सिंपल सा नाव बार बनाऊंगा जैसे कि आ��
4:13
देख सकते हैं बहुत ही सिंपल सा यहाँ पर नवार है अब यहाँ पर मैं गूगल पर सर्च करूंगा गूगल फॉर्म पॉप इन्��
4:18
और पॉप इन्स का स्टाइल एक ले लूंगा और मैं जस्ट आप लोगों को बताना चाहता हूं कि किस तरह से आप लोग करोगे भ��
4:25
बल्लू भाई इसको मैं हटाऊंगा, मैं जो बल्लू भाई नहीं चाहिए, तो बल्लू भाई को मैं माइनस करूँगा
4:29
सिर्फ pop-ins रखूँगा, और ये मैं copy करके अपने यहाँ पर लगा दूँगा, मैं कहूँगा बाई सब जग��
4:33
पूरी साइड कर दो पॉप इन से और यह मैं जो इंपोर्ट स्टेटमेंट है से कॉपी करके जो है अपनी स्टाइल टैग मे��
4:40
डाल लूंगा या फिर मैं पूरा ही स्टाइल टैग कॉपी कर लूंगा एक नया स्टाइल टैग आप एक से ज्यादा स्टाइल टै��
4:44
लाइक करके फोरमेंट करूंगा यह इस तरह से दिखेगा और अब देखो यह इस तरह से कुछ अपपेयर कर रहा है ठीक ह��
4:53
आप चाहो तो एलआई का फॉर्म साइज थोड़ा छोड़ा कर सकते हो अलाकि मैं आपको एक चीज बताऊंगी में रिसेट करूंगा त��
4:58
ऐसे देखेगा ठीक है आप फांट वेट वगैरह चेंज कर सकते हो मैं बताएं क्या करता हूं मैं यहीं के यहीं इसक��
5:04
है चेंज करता हूं फांट वेट वगैरह को यहीं के यहीं राइट लिख इंस्पेक्ट करता हूं पहले और यहां पर मै��
5:11
फॉर्ट वेट जो है लेटर से मैं बोल्डर करना चाहता हूं तो इसको बोल्डर कर देता हूं मालो मैं कलर को करन��
5:18
चाहता हूं वाइट तो यह तो यार एक बड़ा बेसिक सा नायब बार बन गया ठीक है एक बड़ा बेसिक सा नायब बार बन गय��
5:24
और ये दो जो properties हैं ने copy करके मैं यहाँ पर paste करूँगा मेरे बास कोई figma file नहीं ह��
5:29
कोई चीज मैंने यहाँ पर ऐसी नहीं बनाई हुई है जो क��
5:33
मैं refer कर सकूँ ठीक है लेकिन एक चीज मैं आप लोग को अभी यहाँ पर यह दिखाऊंग��
5:37
उप्स मैंने आपको कुछ गडबड करी क्या क्या मैंने गडबड कर द��
5:41
यहाँ पर जो ये ओके तो मैंने padding और ये font width ये padding खटा दी मैंन��
5:47
ठीक है अब ये मैं format करूँगा तो ठीक हो जाएगा येस सो अभी हमारी website
5:51
कुछ ऐसी दिख रही है हमारा nav bar कुछ ऐसा दिख रहा है लेकिन अगर आप लोग चाहते हैं इसके color को change करना तो कैसे करेंगे आप लो��
5:58
आप लोगों को मालूंगा आप कैसे करेंगे change यह किस पे लगा हुआ है nav bar पे लगा हुआ है color
6:02
तो blue violet ना करके let us say आप यह वाला color रखना चाहते हैं यहाँ blue color रखना चाहते है��
6:23
है जो रूट है ना जो रूट है ना उसमें मैं एक प्राइमरी कलर प्राइमरी कलर और मैं प्राइमरी कलर को बनान��
6:33
चाहता हूं यह वाला कलर ठीक है मैं ब्लू वायलेट नहीं यह वाला कलर ही जो मैंने भी यहां पर चुना मैंन��
10:28
जाना से और आप लोग देखो यह हमारा सेम व disturbed हमारी बन गई ग्रीन थीम है ठीक है मैं इसको और डाख क��
10:34
लेता हूं ताकि डार्क हो जाए क्योंकि वाइट टेक्स्ट है इस पर तो यह देखो हमारी ग्रीन थीम बन गई अमानो��
10:40
इसी से ब्लू थीम मनाना चाहते हो इसी से ब्लू थीम मना लो यहां पर इसको चेंज करके ब्लू थीम कर लो डार्क ब्लू थीम कर लो आप कोई दिक्कत नहीं है आपने यहां पर ब्लू थीम जो किया था आप इसी को थोड़ा बहुत वाइट इश की तरफ ले जाओ और ये ��
11:10
पर लेकर आ रहा है ठीक है तो यह काफी बढ़िया हमने वेबसाइट बना दी अगर लोगों पर कर दूंगे इसमें लग��
11:15
दूंगे बार में तो और बढ़िया लगेगा और वह लगाना कोई ज्यादा बड़ी चीज नहीं है मैं यहां पर एक डि��
11:19
लगाऊंगा और इमेज लगाऊंगा और लोग लग जाएगा सो इस तरह में मल्टीबल कलर की वेबसाइट हम लोग जो है व��
11:24
बना सकते हैं अब मैं यहां पर क्या करूंगा कि शाट दूंगा उन लोगों को जिन्होंने सॉल्ड किया यह एक्सरसाइ��
11:29
मैं जल्दी से लोड कर लेता हूँ सारे के सारे जो कॉमेंट्स हैं और काफी लोगों ने कॉमेंट्स किये है��
11:35
और let me tell you कि आप सभी ने जिस जिसने कॉमेंट किया ह��
11:39
आपकी मेनद बिलकुल भी जाया नहीं जाएगी exercise को solve करना आप लोगों के लिए और आपके web development career के लिए काफी कारखर सावित होने वाला ह��
11:46
तो मैं अभी यहाँ पर क्या करूँगा नीचे से shout out देता हूँ चलूँगा विश्णू को अंकित को हैली को आलोक को अमित क��
11:52
developer को शुब को enchanted gamer को the great नावित खान क��
11:56
राजेश को अंकित को यूग को लोकल को साहिल रहमान को अशलिया टेक क��
12:01
developer foundation को अमित मोली को इट्स मी दिलीप को आवैस मोगल फैन क��
12:05
रोहित को अंकित साहू को परमार को अबदुल को स्पॉंच गेमिंग को यूजर को पटेल मनन को अमन नेगी 2016 को आकाश मच्ची को और युग गेमिंग को अंश को गिरीश को कुछ रैंडम शॉर्ट ओट्स दूँगा डेवलपर फाउंडेशन को सौरफ को फिर आपके बाद यहाँ पर आएगा थरन अनसार��
12:26
MD Atharansari फिर Use Nothing को, Swastik को, Shiv Mahapurya को Mahapuran क��
12:32
Manas को, Python Krishna Manas Agarwal को, Python Krishna को फिर मैं यहाँ पर दूँग��
12:39
Amit Mali को Shoutout, Vansh को Shoutout Python Krishna को Shoutout और यहाँ पर Ankit Sahoo को Shoutout
12:45
जो कि Bhupendra Jogi कह रहे हैं और यहाँ पर Codefest को, User क��
12:48
Jade को, Easy or Gaming को Bhupendra Jogi, Sorry, Enchanted Gamer क��
12:53
बुमीन जोगी को भी दूँगा shout out अंकित कुमार को और यहाँ पर कम��
12:57
हलदार को, web development को code with rohit को, use nothing क��
13:01
और यह देखो इन्होंने जुबैर खान ने solve भी किया हुआ है इसको इन्होंने बिलकुल सही approach लगाया है and I hope क��
13:07
आप लोग भी जो है इस approach को लगाकर इस तरह के काम कर पाए होंगे, जो code ह��
13:11
वो update हो जाएगा बहुत जल्दी, और I hope कि आप लोगों ने जो ये playlist है, उसक��
13:15
access कर लिया होगा, अभी के लिए इस वीडियो में इतना है guys, thank you so much guys
13:19
for watching this video, and I will see you next time करते है��
#Programming
#Web Design & Development
#Education