इस पेंचकस में हम CSS-ट्रिक्स के "डेमो" क्षेत्र पर काम करने जा रहे हैं। यह साइट का एक लोकप्रिय क्षेत्र है, इस तथ्य के बावजूद कि मुझे इसमें उतना समय नहीं देना चाहिए जितना मुझे चाहिए। इसका बिंदु साइट पर एक जगह है जिसमें डाउनलोड करने योग्य और देखने योग्य डेमो का एक ही स्थान पर लोड होता है - इसलिए इसे स्क्रॉल करना और ब्राउज़ करना बहुत आसान है और ऐसे बिट्स ढूंढें जो आपके और आपकी परियोजनाओं के लिए रुचि के हो सकते हैं।
संरचना में, यह वीडियो क्षेत्र के समान है। प्रत्येक वीडियो की तरह प्रत्येक डेमो में एक शीर्षक और संक्षिप्त विवरण और कुछ बटन होते हैं। तो हम लेआउट को उसी तरह मॉडल करेंगे जैसे हमने वीडियो क्षेत्र में किया था। हालाँकि, वीडियो क्षेत्र के विपरीत, हम हाथ से तैयार किए गए HTML को हटाने और उसे वर्डप्रेस लूप से बदलने में सक्षम नहीं हैं। ऐसा इसलिए है क्योंकि प्रत्येक डेमो वर्डप्रेस के अंदर नहीं रहता है, वे स्वतंत्र हैं। हालांकि यह ठीक है, हम थोड़ा मार्कअप से डरते नहीं हैं। हम इसे ठीक-ठीक बनाने के लिए इसे फिर से लिखेंगे।
अब हमारे पास जरूरत के अनुसार सभी बिट्स हैं। हम मार्कअप को नियंत्रित करते हैं। हम इस विशेष क्षेत्र के लिए सीएसएस को नियंत्रित करते हैं। बस उस के साथ कुछ टिंकरिंग और इस क्षेत्र के लिए मुख्य सामग्री क्षेत्र किया जाता है।
अंत में हम अलग-अलग डेमो पेजों को देखते हैं और देखते हैं कि सीएसएस-ट्रिक्स की ब्रांडिंग उन पेजों पर भी कैसे लागू होती है।