इस कोर्स में, सीएसएस की बुनियादी बातों को आसान तरीके से समझाया गया है. अगले कुछ मॉड्यूल में, आपको सीएसएस के मुख्य पहलुओं के बारे में पता चलेगा. साथ ही, आपको यह भी पता चलेगा कि अपने प्रोजेक्ट में इनका असरदार तरीके से इस्तेमाल कैसे किया जाता है. मॉड्यूल पर जाने के लिए, "सीएसएस के बारे में जानें" लोगो के बगल में मौजूद मेन्यू पैन का इस्तेमाल करें.
आपको सीएसएस की बुनियादी बातें सीखने को मिलेंगी. जैसे, बॉक्स मॉडल, कैस्केड और स्पेसिफ़िसिटी, फ़्लेक्सबॉक्स, ग्रिड, और z-इंडेक्स. आपको फ़ंक्शन, रंगों के टाइप, ग्रेडिएंट, लॉजिकल प्रॉपर्टी, और इनहेरिटेंस के बारे में भी जानकारी मिलेगी. इससे आपको एक बेहतरीन फ़्रंटएंड डेवलपर बनने में मदद मिलेगी, जो किसी भी यूज़र इंटरफ़ेस को हैंडल करने के लिए तैयार हो.
हर मॉड्यूल में इंटरैक्टिव डेमो और खुद की जांच करने के लिए सवाल दिए गए हैं, ताकि आप अपनी जानकारी की जांच कर सकें. पढ़ने और डेमो देखने के अलावा, हर विषय के साथ एक पॉडकास्ट एपिसोड भी दिया गया है. इससे आपको सीखने और अपने ज्ञान को बढ़ाने का एक और तरीका मिलता है.
यह कोर्स, सीएसएस डेवलपर के शुरुआती और ऐडवांस, दोनों लेवल के लोगों के लिए बनाया गया है. सीएसएस के बारे में पूरी जानकारी पाने के लिए, इस सीरीज़ को शुरू से आखिर तक देखा जा सकता है. इसके अलावा, इसका इस्तेमाल स्टाइलिंग से जुड़े खास विषयों के बारे में जानकारी पाने के लिए भी किया जा सकता है. अगर आपको वेब डेवलपमेंट के बारे में ज़्यादा जानकारी नहीं है, तो एचटीएमएल के बारे में जानें लेख पढ़ें. इसमें मार्कअप लिखने और अपनी स्टाइलशीट लिंक करने के बारे में बताया गया है.
आपको इन चीज़ों के बारे में जानकारी मिलेगी:
बॉक्स मॉडल
सीएसएस में हर चीज़ को बॉक्स के तौर पर दिखाया जाता है. इसलिए, सीएसएस बॉक्स मॉडल के काम करने के तरीके को समझना, सीएसएस का बुनियादी सिद्धांत है.
सिलेक्टर
किसी एलिमेंट पर सीएसएस लागू करने के लिए, आपको उसे चुनना होगा. सीएसएस की मदद से, ऐसा कई अलग-अलग तरीकों से किया जा सकता है. इस मॉड्यूल में, इन तरीकों के बारे में जानें.
नेस्टिंग
सीएसएस स्टाइल के नियमों को नेस्ट करने से, आपकी स्टाइलशीट ज़्यादा व्यवस्थित हो सकती हैं. साथ ही, उन्हें पढ़ना और बनाए रखना आसान हो सकता है.
कैस्केड
कभी-कभी, दो या उससे ज़्यादा सीएसएस नियम किसी एलिमेंट पर लागू हो सकते हैं. जानें कि ब्राउज़र, इस्तेमाल करने के लिए कौनसी कुकी चुनता है और इस चुनाव को कैसे कंट्रोल किया जा सकता है.
खासियत
इस मॉड्यूल में, कैस्केड के मुख्य हिस्से, यानी कि स्पेसिफ़िसिटी के बारे में विस्तार से बताया गया है.
इनहेरिटेंस
अगर सीएसएस की कुछ प्रॉपर्टी के लिए वैल्यू तय नहीं की जाती है, तो वे इनहेरिट हो जाती हैं. इस मॉड्यूल में जानें कि यह सुविधा कैसे काम करती है और इसका इस्तेमाल करके, अपने फ़ायदे के लिए क्या किया जा सकता है.
रंग
सीएसएस में रंग तय करने के कई अलग-अलग तरीके हैं. इस मॉड्यूल में, कलर वैल्यू के सबसे ज़्यादा इस्तेमाल किए जाने वाले विकल्पों के बारे में बताया गया है.
साइज़िंग यूनिट
जानें कि वेब के फ़्लेक्सिबल मीडियम के साथ काम करते समय, सीएसएस का इस्तेमाल करके एलिमेंट का साइज़ कैसे बदला जाता है.
लेआउट
कॉम्पोनेंट या पेज लेआउट बनाते समय, आपके पास लेआउट के अलग-अलग तरीकों में से किसी एक को चुनने का विकल्प होता है. इस बारे में खास जानकारी.
Flexbox
फ़्लेक्सबॉक्स, लेआउट बनाने का एक तरीका है. इसे एक डाइमेंशन में आइटम के ग्रुप को लेआउट करने के लिए डिज़ाइन किया गया है. इस मॉड्यूल में, इसे इस्तेमाल करने का तरीका जानें.
ग्रिड
सीएसएस ग्रिड लेआउट, दो डाइमेंशन वाला लेआउट सिस्टम उपलब्ध कराता है. यह पंक्तियों और कॉलम में लेआउट को कंट्रोल करता है. ग्रिड की सभी सुविधाओं के बारे में जानें.
लॉजिकल प्रॉपर्टी
लॉजिकल, फ़्लो के हिसाब से प्रॉपर्टी, और वैल्यू, टेक्स्ट के फ़्लो से जुड़ी होती हैं. ये स्क्रीन के फ़िज़िकल शेप से जुड़ी नहीं होती हैं. सीएसएस के इस नए तरीके का फ़ायदा पाने का तरीका जानें.
कस्टम प्रॉपर्टी
कस्टम प्रॉपर्टी या सीएसएस वैरिएबल की मदद से, सीएसएस में वैल्यू को व्यवस्थित किया जा सकता है और उनका दोबारा इस्तेमाल किया जा सकता है. इससे आपकी स्टाइल ज़्यादा लचीली होती हैं और उन्हें समझना आसान होता है.
स्पेसिंग
जानें कि इस्तेमाल किए जा रहे लेआउट के तरीके और बनाए जा रहे कॉम्पोनेंट के लिए, स्पेसिंग एलिमेंट का सबसे सही तरीका कैसे चुना जाता है.
स्यूडो-एलिमेंट
स्यूडो-एलिमेंट, ज़्यादा एचटीएमएल जोड़े बिना कोई अतिरिक्त एलिमेंट जोड़ने या उसे टारगेट करने जैसा होता है. इनकी कई भूमिकाएं होती हैं. इस मॉड्यूल में इनके बारे में जानें.
स्यूडो-क्लास
स्यूडो-क्लास की मदद से, स्थिति में होने वाले बदलावों के आधार पर सीएसएस लागू की जा सकती है. इसका मतलब है कि आपका डिज़ाइन, उपयोगकर्ता के इनपुट पर प्रतिक्रिया दे सकता है. जैसे, अमान्य ईमेल पता.
बॉर्डर
बॉर्डर से आपके बॉक्स को फ़्रेम मिलता है. सीएसएस का इस्तेमाल करके, बॉर्डर का साइज़, स्टाइल, और रंग बदलने का तरीका जानें.
शैडो
सीएसएस में टेक्स्ट और एलिमेंट में शैडो जोड़ने के कई तरीके हैं. हर विकल्प को इस्तेमाल करने का तरीका जानें. साथ ही, यह भी जानें कि उन्हें किन कामों के लिए बनाया गया है.
फ़ोकस
अपने वेब ऐप्लिकेशन में फ़ोकस की अहमियत को समझें. आपको यह जानकारी मिलेगी कि फ़ोकस को कैसे मैनेज करें. साथ ही, यह भी बताया जाएगा कि यह कैसे पक्का करें कि आपके पेज पर मौजूद पाथ, माउस और कीबोर्ड, दोनों का इस्तेमाल करने वाले लोगों के लिए काम करता हो.
कर्सर और पॉइंटर
कर्सर की मदद से, आपके उपयोगकर्ताओं को यह पता चलता है कि वे किस चीज़ से इंटरैक्ट कर रहे हैं. इस मॉड्यूल में, जानें कि खास परिस्थितियों में कर्सर को कैसे स्टाइल किया जा सकता है.
Z-index और स्टैकिंग कॉन्टेक्स्ट
जानें कि z-इंडेक्स और स्टैकिंग कॉन्टेक्स्ट का इस्तेमाल करके, एक-दूसरे के ऊपर लेयर किए गए एलिमेंट के क्रम को कैसे कंट्रोल किया जाता है.
ऐंकर की पोज़िशनिंग
सीएसएस ऐंकर पोज़िशनिंग की मदद से, किसी एलिमेंट को दूसरे एलिमेंट के हिसाब से पोज़िशन किया जा सकता है.
पॉपओवर और डायलॉग
पॉपओवर, popover एट्रिब्यूट वाला कोई भी एलिमेंट होता है. यह कई तरह के इंटरैक्टिव पैटर्न के लिए काम का होता है. जैसे, टूलटिप, सूचनाएं, टोस्ट वगैरह.
फ़ंक्शन
सीएसएस में कई इनबिल्ट फ़ंक्शन होते हैं. कुछ मुख्य फ़ंक्शन और उन्हें इस्तेमाल करने के तरीके के बारे में जानें.
पाथ, शेप, क्लिपिंग, और मास्किंग
पाथ, शेप, क्लिपिंग, और मास्किंग की मदद से डेवलपर, सीएसएस में अलग-अलग फ़ंक्शन का इस्तेमाल करके जटिल शेप रेंडर कर सकते हैं. इससे आपके उपयोगकर्ताओं को यादगार अनुभव मिल सकता है.
ग्रेडिएंट
इस मॉड्यूल में, आपको सीएसएस में उपलब्ध अलग-अलग तरह के ग्रेडिएंट इस्तेमाल करने का तरीका बताया जाएगा. ग्रेडिएंट की मदद से, कई तरह के काम के इफ़ेक्ट बनाए जा सकते हैं. इसके लिए, इमेज बनाने वाले ग्राफ़िक्स ऐप्लिकेशन की ज़रूरत नहीं होती.
ऐनिमेशन
ऐनिमेशन, इंटरैक्टिव एलिमेंट को हाइलाइट करने का एक शानदार तरीका है. साथ ही, इससे आपके डिज़ाइन में दिलचस्पी और मज़ेदार अनुभव मिलता है. सीएसएस की मदद से, ऐनिमेशन इफ़ेक्ट जोड़ने और उन्हें कंट्रोल करने का तरीका जानें.
फ़िल्टर
सीएसएस में फ़िल्टर का मतलब है कि अब ऐसे इफ़ेक्ट भी लागू किए जा सकते हैं जिनके बारे में आपको लगता था कि वे सिर्फ़ ग्राफ़िक्स ऐप्लिकेशन में ही लागू किए जा सकते हैं. इस मॉड्यूल में, आपको यह पता चलेगा कि कौन-कौनसी सुविधाएं उपलब्ध हैं.
ब्लेंड मोड
दो या उससे ज़्यादा लेयर को मिलाकर कंपोज़िशनल इफ़ेक्ट बनाएं. साथ ही, ब्लेंड मोड के इस मॉड्यूल में, सफ़ेद बैकग्राउंड वाली इमेज को अलग करने का तरीका जानें.
सूचियां
स्ट्रक्चर के हिसाब से, सूची में एक लिस्ट कंटेनर एलिमेंट होता है. इसमें लिस्ट आइटम होते हैं. इस मॉड्यूल में, आपको सूची के सभी हिस्सों को स्टाइल करने का तरीका सीखने को मिलेगा.
काउंटर
सीएसएस, अलग-अलग इस्तेमाल के उदाहरणों के लिए, किसी सूची में काउंटर को कंट्रोल करने के कई तरीके उपलब्ध कराता है. इस मॉड्यूल में, आपको किसी सूची में काउंटर को कंट्रोल करने का तरीका सीखने को मिलेगा.
ट्रांज़िशन
किसी एलिमेंट की स्थितियों के बीच ट्रांज़िशन तय करने का तरीका जानें. उपयोगकर्ता के इंटरैक्शन के लिए विज़ुअल फ़ीडबैक देने के लिए, ट्रांज़िशन का इस्तेमाल करें. इससे उपयोगकर्ता अनुभव को बेहतर बनाया जा सकता है.
एसपीए के लिए व्यू ट्रांज़िशन
व्यू ट्रांज़िशन की मदद से, अपने एसपीए के पेजों के बीच कॉन्टेंट को लगातार या कॉन्टेक्स्ट के हिसाब से दिखाया जा सकता है.
ओवरफ़्लो
ओवरफ़्लो का इस्तेमाल, ऐसे कॉन्टेंट को मैनेज करने के लिए किया जाता है जो पैरंट के सेट किए गए साइज़ में फ़िट नहीं होता. इस मॉड्यूल में, आपको कुछ अलग सोचना होगा. साथ ही, आपको यह भी सीखना होगा कि ओवरफ़्लो हो रहे कॉन्टेंट को कैसे स्टाइल किया जाए.
बैकग्राउंड
सीएसएस का इस्तेमाल करके, बॉक्स के बैकग्राउंड को स्टाइल करने का तरीका जानें.
टेक्स्ट और टाइपोग्राफ़ी
वेब पर टेक्स्ट को स्टाइल करने का तरीका जानें.
कंटेनर क्वेरी
मीडिया क्वेरी के उलट, कंटेनर क्वेरी की मदद से, एलिमेंट में ज़्यादा सटीक बदलाव किए जा सकते हैं. ये बदलाव, उनके पैरंट एलिमेंट या कंटेनर के साइज़ और स्थिति के आधार पर किए जाते हैं.
नतीजा और अगले चरण
अगले चरण पूरे करने में आपकी मदद करने वाले अन्य संसाधन.
तो क्या आप सीएसएस सीखने के लिए तैयार हैं? चलिए, शुरू करते हैं.