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