अपनी साइट के सीएसएस और यूज़र इंटरफ़ेस के डिज़ाइन को बेहतर बनाने के लिए, Chrome के टूल और तकनीकों के बारे में जानें.

अपने यूज़र इंटरफ़ेस (यूआई) डेवलपमेंट स्किल को बेहतर बनाएं

स्क्रोलबार को स्टाइल देने के लिए, scrollbar-width और scrollbar-color प्रॉपर्टी का इस्तेमाल करें.
सीएसएस में, संतुलित टेक्स्ट ब्लॉक के लिए लाइन ब्रेक लिखने की एक क्लासिक टाइपोग्राफ़ी तकनीक का इस्तेमाल किया जाता है.
CSS Color 4 वेब पर कई तरह के गैमट कलर टूल और सुविधाओं के साथ काम करता है: ज़्यादा कलर, बदलाव करने वाले फ़ंक्शन, और बेहतर ग्रेडिएंट.
सीएसएस टाइप किया गया ऑब्जेक्ट मॉडल (टाइप किया गया OM) सीएसएस वैल्यू के साथ काम करने के लिए टाइप, तरीके, और सुविधाजनक ऑब्जेक्ट मॉडल को उपलब्ध कराता है.
@कंटेनर नियम का इस्तेमाल करके, पैरंट एलिमेंट के स्टाइल वैल्यू के लिए क्वेरी करें.
हमारी पसंदीदा सीएसएस प्रीप्रोसेसर सुविधाओं में से एक अब भाषा में बनाई गई है: नेस्टिंग स्टाइल रूल.
ऐसे स्कोप वाली स्टाइल बनाने का तरीका जानें जो सिर्फ़ आपके डीओएम के सबट्री में एलिमेंट चुनते हैं.
इस्तेमाल किए जा सकने वाले किसी भी कलर स्पेस में, सीधे अपने सीएसएस से मिक्स कलर करें.
किसी चाइल्ड एलिमेंट पर An+B लॉजिक लागू करने से पहले, उसके सेट को पहले से फ़िल्टर करें.
एक जैसे name वाले कई <details> एलिमेंट के साथ कोई खास अकॉर्डियन बनाएं.
इनर्ट प्रॉपर्टी, एक ग्लोबल एचटीएमएल एट्रिब्यूट है. यह किसी एलिमेंट के लिए उपयोगकर्ता के इनपुट इवेंट को हटाने और वापस लाने का तरीका आसान बनाता है. इसमें सहायक टेक्नोलॉजी के इवेंट और फ़ोकस इवेंट शामिल हैं.
तेज़ी से खूबसूरती बढ़ाने के लिए, ऑप्टिमाइज़ किए गए टेक्स्ट रैपिंग के लिए ऑप्ट-इन करें.
हमने DevTools में सीएसएस ग्रिड टूल की सुविधा को कैसे डिज़ाइन और लागू किया है.
हम DevTools में CSS-in-JS के साथ कैसे काम करते हैं और यह सामान्य सीएसएस से किस तरह अलग है.

शैडो डीओएम

सीधे एचटीएमएल में शैडो DOM को लागू और इस्तेमाल करने का नया तरीका.
लेखक के तय किए गए नामों और शैडो डीओएम की इंटरऑपरेबिलिटी मौजूदा स्थिति.

लेआउट

साइज़ बताने वाली इकाइयों को मिला-जुलाकर इस्तेमाल करके, सीएसएस में साइज़ तय करें.
'छिपाया गया=में-मिला' को खोजें, एट्रिब्यूट की वैल्यू से यह पक्का किया जा सकता है कि अकॉर्डियन सेक्शन में कॉन्टेंट ढूंढा जा सकता है और उससे लिंक किया जा सकता है.

सीएसएस और यूज़र इंटरफ़ेस (यूआई) की केस स्टडी

वेब यूआई की क्षमताएं क्या हैं और वे आपके कन्वर्ज़न फ़नल को कैसे बेहतर बना सकती हैं? इन सुविधाओं को अपनाने के क्या फ़ायदे हैं.
पारदर्शिता बाज़ार, RedBus, और Tokopedia के साथ स्क्रोल करके चलने वाले ऐनिमेशन के फ़ायदों के बारे में जानें.
RedBus, Policybaza, और Tokopedia जैसे ऐप्लिकेशन, View ट्रांज़िशन एपीआई का इस्तेमाल करते हैं. इससे उन्हें बेहतर परफ़ॉर्मेंस और बेहतर यूज़र इंटरफ़ेस (यूआई) का फ़ायदा मिलता है.
Tokopedia अपने ऐप्लिकेशन में कोड की मात्रा कम करने के लिए, Popover API का इस्तेमाल करता है.

वेब पर ऐनिमेशन

Web Animations API, JavaScript से मिलने वाले ज़रूरी ऐनिमेशन की जानकारी देने के लिए दमदार प्रिमिटिव देता है.
ऐनिमेशन-कंपोज़िशन प्रॉपर्टी की मदद से यह कंट्रोल किया जा सकता है कि जब एक ही प्रॉपर्टी पर कई ऐनिमेशन एक साथ प्रभावित हों, तब क्या होना चाहिए.
लीनियर() एक सीएसएस ईज़िंग फ़ंक्शन है, जो अपने पॉइंट के बीच लीनियर इंटरपोलेट करता है. इसकी मदद से, बाउंस और स्प्रिंग इफ़ेक्ट को फिर से बनाया जा सकता है.
स्क्रोल करने की टाइमलाइन और व्यू टाइमलाइन के साथ काम करके, एलान वाले तरीके से स्क्रोल करके चलने वाले ऐनिमेशन बनाएं.
कोर्स
रिस्पॉन्सिव डिज़ाइन के बारे में पुरानी जानकारी पढ़ें और रिस्पॉन्सिव लेआउट बनाने से जुड़ी बुनियादी बातों को जानें. आपको रिस्पॉन्सिव इमेज, टाइपोग्राफ़ी, सुलभता वगैरह के बारे में पता चलेगा.
कोर्स
इससे आपको बॉक्स मॉडल, कैस्केड, और खासियत, फ़्लेक्सबॉक्स, ग्रिड, और z-इंडेक्स जैसी सीएसएस की बुनियादी बातों के बारे में पता चलेगा. साथ ही, आपको फ़ंक्शन, लॉजिकल प्रॉपर्टी वगैरह के बारे में भी पता चलेगा, ताकि आप अपने फ़्रंट-एंड डेवलपर के कौशल को बेहतर बना सकें.