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

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

ऐंकर पोज़िशनिंग एपीआई का इस्तेमाल करके, एलिमेंट को एक-दूसरे के हिसाब से पोज़िशन करें.
दस्तावेज़ पढ़ें
interpolate-size और calc-size() की मदद से, इनट्रिन्सिक साइज़िंग कीवर्ड पर स्विच करना
दस्तावेज़ पढ़ें
स्क्रोलबार को स्टाइल देने के लिए, scrollbar-width और scrollbar-color प्रॉपर्टी का इस्तेमाल करें.
दस्तावेज़ पढ़ें

सीएसएस टेक्स्ट-रैप बैलेंस

सीएसएस में, संतुलित टेक्स्ट ब्लॉक के लिए लाइन ब्रेक लिखने की एक क्लासिक टाइपोग्राफ़ी तकनीक का इस्तेमाल किया जाता है.
दस्तावेज़ पढ़ें

हाई-डेफ़िनिशन सीएसएस कलर गाइड

CSS Color 4 वेब पर कई तरह के गैमट कलर टूल और सुविधाओं के साथ काम करता है: ज़्यादा कलर, बदलाव करने वाले फ़ंक्शन, और बेहतर ग्रेडिएंट.
दस्तावेज़ पढ़ें
सीएसएस टाइप किया गया ऑब्जेक्ट मॉडल (टाइप किया गया OM) सीएसएस वैल्यू के साथ काम करने के लिए टाइप, तरीके, और सुविधाजनक ऑब्जेक्ट मॉडल को उपलब्ध कराता है.
दस्तावेज़ पढ़ें
@कंटेनर नियम का इस्तेमाल करके, पैरंट एलिमेंट के स्टाइल वैल्यू के लिए क्वेरी करें.
दस्तावेज़ पढ़ें
हमारी पसंदीदा सीएसएस प्रीप्रोसेसर सुविधाओं में से एक अब भाषा में बनाई गई है: नेस्टिंग स्टाइल रूल.
दस्तावेज़ पढ़ें
ऐसे स्कोप वाली स्टाइल बनाने का तरीका जानें जो सिर्फ़ आपके डीओएम के सबट्री में एलिमेंट चुनते हैं.
दस्तावेज़ पढ़ें

सीएसएस कलर-मिक्स()

इस्तेमाल किए जा सकने वाले किसी भी कलर स्पेस में, सीधे अपने सीएसएस से मिक्स कलर करें.
दस्तावेज़ पढ़ें
किसी चाइल्ड एलिमेंट पर An+B लॉजिक लागू करने से पहले, उसके सेट को पहले से फ़िल्टर करें.
दस्तावेज़ पढ़ें
एक जैसे name वाले कई <details> एलिमेंट के साथ कोई खास अकॉर्डियन बनाएं.
दस्तावेज़ पढ़ें
इनर्ट प्रॉपर्टी, एक ग्लोबल एचटीएमएल एट्रिब्यूट है. यह किसी एलिमेंट के लिए उपयोगकर्ता के इनपुट इवेंट को हटाने और वापस लाने का तरीका आसान बनाता है. इसमें सहायक टेक्नोलॉजी के इवेंट और फ़ोकस इवेंट शामिल हैं.
दस्तावेज़ पढ़ें

सीएसएस टेक्स्ट-रैप प्रिटी

तेज़ी से खूबसूरती बढ़ाने के लिए, ऑप्टिमाइज़ किए गए टेक्स्ट रैपिंग के लिए ऑप्ट-इन करें.
दस्तावेज़ पढ़ें
हमने DevTools में सीएसएस ग्रिड टूल की सुविधा को कैसे डिज़ाइन और लागू किया है.
दस्तावेज़ पढ़ें
हम DevTools में CSS-in-JS के साथ कैसे काम करते हैं और यह सामान्य सीएसएस से किस तरह अलग है.
दस्तावेज़ पढ़ें

शैडो डीओएम

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

लेआउट

कैल्क() इस्तेमाल करने का तरीका

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

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

वेब यूज़र इंटरफ़ेस (यूआई) की सुविधाएं आपकी वेबसाइट के लिए क्यों अहम हैं?

वेब यूआई की क्षमताएं क्या हैं और वे आपके कन्वर्ज़न फ़नल को कैसे बेहतर बना सकती हैं? इन सुविधाओं को अपनाने के क्या फ़ायदे हैं.
केस स्टडी पढ़ें

स्क्रोल-ड्रिवन ऐनिमेशन की केस स्टडी

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

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

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