CSS: वेब को शैली देने वाली भाषा
CSS वेब पेज के हर दृश्य विवरण — रंग, लेआउट, रिक्ति, ऐनिमेशन और प्रतिक्रियाशीलता — को नियंत्रित करता है। यह एक साधारण प्रस्तुति परत से आगे बढ़कर एक पूर्ण डिज़ाइन सिस्टम भाषा बन चुका है, जिसमें कंटेनर क्वेरी, @layer, तार्किक प्रॉपर्टी और Houdini API जैसी आधुनिक सुविधाएँ रेंडरिंग पर डेवलपर को बारीक नियंत्रण देती हैं। यह पाठ्यक्रम आपके पहले चयनकर्ता को लिखने से लेकर बड़े प्रोडक्शन कोडबेस में इस्तेमाल होने वाले विस्तार योग्य डिज़ाइन सिस्टम तैयार करने तक CSS की पूरी व्यापकता सिखाता है।
आप क्या सीखेंगे
आप सिंटैक्स, चयनकर्ताओं, रंगों और टाइपोग्राफी से शुरुआत करेंगे, फिर बॉक्स मॉडल, डिस्प्ले प्रॉपर्टी और पोज़िशनिंग की ठोस समझ विकसित करेंगे। इसके बाद आप सामान्य और उन्नत लेआउट के लिए Flexbox और CSS Grid का अभ्यास करेंगे, प्रतिक्रियाशील डिज़ाइन और मीडिया क्वेरी लागू करेंगे, तथा आसानी से बनाए रखे जा सकने वाले थीम के लिए CSS चर, कस्टम फ़ंक्शन और डिज़ाइन टोकन इस्तेमाल करेंगे। आप ट्रांज़िशन, कीफ़्रेम ऐनिमेशन, ट्रांसफ़ॉर्म, फ़िल्टर, ब्लेंड मोड और डार्क मोड भी सीखेंगे — साथ ही Sass, PostCSS और CSS-in-JS पैटर्न जैसे आधुनिक टूल भी। पाठ्यक्रम के अंत में BEM का उपयोग करके CSS आर्किटेक्चर, विशिष्टता और कैस्केड, कंटेनर क्वेरी, @layer कैस्केड परतें, CSS Houdini और प्रदर्शन शामिल हैं।
सीखने की राह
चालीस पाठ्यक्रम A1 से C1 तक फैले हैं। शुरुआती A1 और A2 पाठ्यक्रम बुनियादी बातें स्थापित करते हैं — चयनकर्ता, बॉक्स मॉडल, स्यूडो-क्लास, स्यूडो-एलिमेंट और इकाइयाँ। B1 पाठ्यक्रमों में Flexbox, Grid, प्रतिक्रियाशील डिज़ाइन, ऐनिमेशन, DevTools से डीबगिंग और CSS फ़ंक्शन शामिल हैं। B2 पाठ्यक्रम उन्नत Flexbox और Grid, Sass, PostCSS, CSS-in-JS, डिज़ाइन टोकन, CSS Shapes, तार्किक प्रॉपर्टी, कंटेनर क्वेरी और CSS Layers तक आगे बढ़ते हैं। तीन C1 पाठ्यक्रम — CSS Houdini, CSS Performance और CSS Future — प्लेटफ़ॉर्म की अत्याधुनिक सुविधाओं पर ध्यान देते हैं।
यह कैसे काम करता है
हर पाठ्यक्रम छोटे, केंद्रित पाठों में विभाजित है, जिन्हें आप अंतर्निहित संपादक में सीधे रीयल-टाइम प्रतिक्रिया के साथ पूरा करते हैं। जब भी आप अटकते हैं, AI ट्यूटर उपलब्ध रहता है और प्रगति को जानबूझकर क्रमिक रखा गया है, ताकि अगली अवधारणा शुरू होने से पहले हर अवधारणा पिछली अवधारणा को मजबूत करे।