कैस्केडिंग स्टाइल शीट्स (CSS) वेब पेजों और एप्लिकेशन के लेआउट और संरचना बनाने के लिए उपयोग की जाने वाली एक तकनीकी भाषा है। CSS के साथ, आप एक वेबपेज की शैली को अनुकूलित कर सकते हैं और एक रिस्पॉन्सिव वेबपेज डिज़ाइन बना सकते हैं, जिससे साइट डेस्कटॉप और मोबाइल दोनों उपयोगकर्ताओं के लिए सुलभ हो जाती है।
Indeed के अनुसार, अभी CSS में कौशल की आवश्यकता वाली 35,000 से अधिक नौकरियां उपलब्ध हैं। CSS का ज्ञान सबसे अच्छे डिजिटल कौशलों में से एक है, खासकर जब यह फ्रंट एंड डेवलपमेंट और गेम डेवलपमेंट सहित कई करियर क्षेत्रों में वांछित है। यह लेख कुछ बेहतरीन CSS अभ्यास और शुरुआती-अनुकूल प्रोजेक्ट्स को कवर करता है।
नीचे कुछ CSS अभ्यास अभ्यास दिए गए हैं जो आपको CSS में बुनियादी ज्ञान प्रदान करेंगे। हम आपके वर्तमान प्रोग्रामिंग स्तर को बढ़ाने के लिए अतिरिक्त संसाधनों को भी सूचीबद्ध करेंगे। ये आपके दिन-प्रतिदिन के कार्यों में मदद करेंगे, आपके CSS कौशल विकसित करेंगे, और आपको तकनीकी CSS साक्षात्कार प्रश्नों का उत्तर देने के लिए तैयार करेंगे।
10 CSS अभ्यास और समस्याएं (समाधान के साथ)
1. CSS लिंक कलर
CSS लिंक कलर्स वेबसाइट में एम्बेडेड एंकर लिंक्स के रंगों को प्रदान और नियंत्रित करते हैं। यह फ़ंक्शन एम्बेडेड लिंक्स को आपके टेक्स्ट के वैकल्पिक रंग में परिभाषित करता है ताकि वे अलग दिखें। इन कलर स्कीम्स को कैसे बदलना है और उपयोगकर्ता के अनुभव के दौरान एक लिंक किन चरणों से गुजरता है, यह सीखना महत्वपूर्ण है।
समाधान: आप CSS लिंक कलर्स सीखने के लिए चरण-दर-चरण गाइड का उपयोग कर सकते हैं। CSS Tricks और W3schools भी आपके कौशल को निखारने के लिए CSS लिंक कलर अभ्यास अभ्यास प्रदान करते हैं।
2. CSS बॉक्स मॉडल के साथ काम करना
CSS बॉक्स मॉडल उन नियमों को संदर्भित करता है जो निर्धारित करते हैं कि CSS घटकों के आकार की गणना कैसे की जाती है जबकि पैडिंग, बॉर्डर्स, और मार्जिन्स जो सामग्री को घेरते हैं, जोड़े जाते हैं। अपर्याप्त CSS बॉक्स मॉडलिंग अपर्याप्त रिस्पॉन्सिवनेस और नाजुक लेआउट का कारण बन सकती है।
समाधान: CSS बॉक्स मॉडल्स पर एक हाउ-टू गाइड का पालन करें। आप MDN वेब डॉक्स के साथ अपने बॉक्स मॉडलिंग कौशल का अभ्यास भी कर सकते हैं।
3. फॉन्ट-वेट के साथ काम करना
गलत फॉन्ट-वेट घोषित करने से टेक्स्ट उस तरीके से दिखाई दे सकता है जो आपके इरादे के विपरीत है। वैकल्पिक रूप से, कभी-कभी, आपके पास सही CSS नियम हो सकता है और टेक्स्ट अभी भी काम नहीं कर रहा है जैसा उसे चाहिए। यह एलिमेंट के 2D स्पेस से 3D स्पेस में बदलने, या इसके विपरीत होने की समस्या हो सकती है।
समाधान: फॉन्ट-वेट का उपयोग करने पर एक गाइड का पालन करें। W3schools आपके फॉन्ट-वेट क्षमताओं को निखारने के लिए पांच अभ्यास प्रदान करता है।
4. CSS बेसिक सिंटैक्स को समझना
CSS कोड CSS नियमों का पालन करने वाले बेसिक सिंटैक्स का उपयोग करके बनाया जाता है। डिजिटल उत्पाद डेवलपमेंट उद्योग के भीतर CSS बेसिक सिंटैक्स का ज्ञान महत्वपूर्ण है। सही सेलेक्टर्स या सेलेक्टर्स के संयोजन का उपयोग करना, जैसे चेनिंग सेलेक्टर या एलिमेंट सेलेक्टर, और CSS डिक्लेरेशन आपके डेवलपमेंट सीखने के अनुभव का एक मुश्किल हिस्सा हो सकता है।
समाधान: CSS सिंटैक्स गाइड पढ़ें ताकि आप CSS स्टाइल नियमों, CSS डिक्लेरेशन्स, CSS सेलेक्टर्स, CSS टिप्पणियों, और सिंगल-लाइन और मल्टी-लाइन टिप्पणियों के बारे में सीख सकें।
5. अपने CSS3 कौशल का उपयोग करके एक बटन बनाएं
यह बटन-निर्माण अभ्यास विभिन्न कौशल करने की आपकी क्षमता को दर्शाएगा। बटन बनाते समय, आपको विभिन्न कारकों को लागू करने और विचार करने की आवश्यकता होगी, जैसे कई बॉर्डर्स, कस्टम फोंट का उपयोग करना, और सूक्ष्म टेक्स्ट-शैडो को पकड़ना। आपको यह भी समझने की आवश्यकता होगी कि बैकग्राउंड को बटन के मुख्य भाग से कैसे अलग किया जाए और नेस्टेड बॉर्डर-रेडियस के साथ सटीक कार्य कैसे किया जाए।
समाधान: अभ्यास परिपूर्ण बनाता है। Mobify से इस बटन-पुनर्निर्माण अभ्यास को करके अपने CSS प्रवीणता का अभ्यास करें और बढ़ाएं।
कल्पना करें कि एक साइडबार पेज कंटेंट के नीचे गिर गया है। ऐसा इसलिए होता है क्योंकि टू-कॉलम लेआउट पैडिंग के कारण 100 प्रतिशत तक नहीं जुड़ता है। हालांकि, इसे सुधारने के विभिन्न तरीके हैं।
यह बुनियादी प्रोजेक्ट आपको दिखाएगा कि बॉक्स-साइज़िंग का उपयोग कैसे करें, CSS प्रॉपर्टी वैल्यूज़ निर्दिष्ट करते समय गणना करने के लिए calc() का उपयोग कैसे करें, संख्याओं को समायोजित करके गणित को कैसे काम करवाएं, और एक अतिरिक्त इंटरनल रैपर एलिमेंट पर पैडिंग कैसे लगाएं।
समाधान: आप CodePen के साथ CSS-कोडेड साइडबार्स से जुड़े अपने कौशल और ज्ञान का अभ्यास और वृद्धि कर सकते हैं।
7. रिस्पॉन्सिव डिज़ाइन के लिए चौड़ाई परिवर्तन ठीक करें
इस अभ्यास में डिज़ाइन 800px चौड़ा है। रिस्पॉन्सिव डिज़ाइन के लिए, सामग्री किसी भी स्क्रीन आकार में फिट होनी चाहिए। आपकी CSS कोडिंग यात्रा में, आपको पिक्सेल चौड़ाई बदलने, रिस्पॉन्सिव इमेज समाधानों का उपयोग करने, और महत्व के पदानुक्रम को बनाए रखने का अभ्यास करने की आवश्यकता होगी। अपने डिज़ाइन का परीक्षण करना याद रखें और सुनिश्चित करें कि आपके समाधान काम करते हैं।
समाधान: CodePen में एक व्यावहारिक अभ्यास है जिसे आप CSS में अपने कौशल में महारत हासिल करने में मदद करने के लिए अभ्यास कर सकते हैं।
8. CSS सेलेक्टर के साथ समस्याओं को हल करना
CSS को एक विशेष प्रारूप में लिखा जाना चाहिए ताकि ब्राउज़र इसे समझ सके। यह CSS नियम का पहला भाग है, एलिमेंट्स का पैटर्न, और अन्य शर्तें जो ब्राउज़र को बताती हैं कि किन HTML घटकों का चयन करना है और उन पर CSS प्रॉपर्टी वैल्यूज़ लागू करना है। इन्हें "सेलेक्टर का विषय" के रूप में जाना जाता है।
समाधान: एक गाइड का पालन करके CSS सेलेक्टर्स का उपयोग करने का अभ्यास करें। अपने CSS लेखन की जांच करना समय लेने वाला हो सकता है, और सहायता के लिए विभिन्न मुफ्त टूल्स हैं, जैसे {CSS}Portal. CodePen भी ऑनलाइन करने योग्य व्यावहारिक अभ्यास प्रदान करता है।
9. CSS ग्रिड लेआउट
CSS ग्रिड लेआउट का उपयोग आज कई उद्योगों में किया जाता है, जिसमें लेख और ब्लॉग पोस्ट के लेआउट शामिल हैं। यह वेब के लिए एक दो-आयामी लेआउट है। सामग्री को पंक्तियों और स्तंभों में बिछाने से कई सुविधाएं मिलती हैं जो जटिल लेआउट बनाने को सरल बनाती हैं। यह CSS में सबसे चुनौतीपूर्ण विषयों में से एक है, खासकर जब आपको रिस्पॉन्सिवनेस के लिए खाता बनाना पड़ता है।
समाधान: MDN वेब डॉक्स अभ्यास के लिए एक व्यापक अभ्यास प्रदान करता है।
10. CSS कोड का अभ्यास करें
CSS फाइल के साथ काम करना और CSS कोड लिखना महत्वपूर्ण है। खराब CSS कोड लिखने से पूरी प्रणाली गड़बड़ हो सकती है। उदाहरण के लिए, मार्जिन्स अजीब तरह से कार्य कर सकते हैं या आप गलत या अपर्याप्त एनिमेशन के साथ समाप्त हो सकते हैं। कुछ वास्तविक कोडिंग करना आपके CSS कोड लेखन कौशल को बढ़ावा देने का सबसे अच्छा तरीका है।
समाधान: Flexbox Froggy, एक बच्चों का वेब ऐप गेम, के साथ अभ्यास करने का एक आसान तरीका है, जिसमें शुरुआती से मध्यवर्ती तक 24 अभ्यास हैं। CSS कोड लिखने के लिए Flexbox Froggy के ऑनलाइन गेम खेलें।
CSS के साथ सहायता कैसे प्राप्त करें
ऑनलाइन उपलब्ध कोड संसाधनों का उपयोग करके आप अपने CSS कोडिंग लक्ष्यों में महारत हासिल कर सकते हैं।
उपलब्ध सभी टूल्स और अंतहीन मात्रा में संसाधनों के साथ जिन्हें आप ऑनलाइन पा सकते हैं, CSS के साथ सहायता प्राप्त करना अपेक्षाकृत आसान है। आप विभिन्न CSS-विशिष्ट समस्याओं पर विशेषज्ञों, रिपोर्ट्स, ट्यूटोरियल्स, और बहुत कुछ पा सकते हैं जिनका आप सामना कर रहे होंगे।
चाहे आपके पास नीला बैकग्राउंड कलर हो जो लाल होना चाहिए, या आप क्रॉस-ओरिजिन फॉन्ट चिंता से निपट रहे हों, उन्नत विषयों को कवर करने वाले ऑनलाइन संसाधनों का खजाना आपकी CSS समस्याओं को हल करने में मदद के लिए उपलब्ध है। नीचे आपके उपयोग के लिए कुछ बेहतरीन संसाधन दिए गए हैं।
CSS अभ्यास
इस लेख में अभ्यास अभ्यास के माध्यम से CSS अनुभव प्रदान करते हैं और आप ऑनलाइन कई समान अभ्यास पा सकते हैं। ये अभ्यास विशिष्ट और सामान्य CSS समस्याओं से निपटने में आपके CSS ज्ञान और कौशल को भी बढ़ाते हैं। इन अभ्यासों में महारत हासिल करने से आपको एक उत्कृष्ट रिस्पॉन्सिव डिज़ाइन बनाने में सहायता मिलेगी, जबकि उन्नत CSS अभ्यासों तक काम करेंगे।
CSS प्रोजेक्ट्स
CSS वेबसाइट डेवलपमेंट के लिए सबसे अधिक उपयोग की जाने वाली फ्रंट एंड तकनीकों में से एक है और आमतौर पर HTML के साथ उपयोग की जाती है। CSS प्रोजेक्ट्स आपको पोर्टफोलियो बनाने में मदद करते हैं। यह पोर्टफोलियो आपके CSS कौशल को निखारने के लिए मूल्यवान अभ्यास प्रदान कर सकता है और संभावित नियोक्ताओं को आपकी प्रवीणता का स्तर दिखा सकता है।
CSS क्विज़
CSS में प्रवीणता प्राप्त करने के लिए अपने CSS ज्ञान और कौशल का परीक्षण करना महत्वपूर्ण है। चाहे आप अपने CSS कौशल का परीक्षण करना चाहते हों या विशिष्ट विषयों को कवर करने वाले क्विज़ लेना चाहते हों, जैसे अनऑर्डर्ड लिस्ट, बैकग्राउंड इमेज, अलग फाइल, क्लास नाम, या CSS ग्रेडिएंट्स कैसे बनाएं और संशोधित करें, आप ऑनलाइन कई CSS क्विज़ पा सकते हैं।
CSS फोरम और ब्लॉग्स
फोरम और CSS कोडिंग ब्लॉग्स उपयोगी संसाधन हो सकते हैं, जो जटिल चिंताओं के लिए सहायता और समाधान प्रदान करते हैं जिन्हें आप समझने के लिए संघर्ष कर रहे होंगे। वे नई प्रौद्योगिकियों और उद्योग-संबंधी जानकारी पर अपडेट भी प्रदान करते हैं जो आपके लिए व्यावहारिक महत्व के हो सकते हैं।
मैं CSS कहां अभ्यास कर सकता हूँ?
जैसा कि इस लेख में दर्शाया गया है, आप उपलब्ध ऑनलाइन संसाधनों के साथ स्वतंत्र रूप से CSS का अभ्यास कर सकते हैं। आप प्रोजेक्ट्स के माध्यम से CSS का अभ्यास कर सकते हैं और उन्हें अपने कोडिंग पोर्टफोलियो में जोड़ सकते हैं। आप CSS का अभ्यास तब भी कर सकते हैं जब आप मुफ्त या सशुल्क पाठ्यक्रमों के माध्यम से CSS का अध्ययन करते हैं।
CSS अभ्यास करने के लिए वेबसाइट्स
- freeCodeCamp। यह CSS और अन्य प्रोग्राम्स को मुफ्त में सीखने के लिए सबसे अच्छे संसाधनों में से एक है, जिसमें 7,000 से अधिक ट्यूटोरियल्स और ढेर सारी चुनौतियां हैं।
- Codewell। यह साइट अभ्यास के लिए रियल-वर्ल्ड Figma टेम्प्लेट प्रदान करती है। यह आपके CSS कौशल को बढ़ाने के लिए एक अच्छी जगह है। आप वेबसाइट पर या स्लैक समुदाय के भीतर समाधान और फीडबैक पर मूल्यवान बातचीत में भी शामिल हो सकते हैं।
- CSSBattle। यह एक CSS-विशिष्ट गेमिफिकेशन सिस्टम है जो प्रगति की जांच और ट्रैक करने का एक उत्कृष्ट तरीका है। ये बैटल्स आपको यह नहीं बताएंगे कि CSS के साथ कैसे काम करना है, लेकिन वे आपको अधिक इंटरमीडिएट CSS प्रॉपर्टीज़ के साथ CSS अनुभव प्राप्त करने में मदद करेंगे।
- CodePen। CodePen ऑनलाइन करने के लिए CSS चुनौतियां प्रदान करता है। आप दूसरों के साथ समाधान साझा कर सकते हैं जिन्होंने भाग लिया है, फीडबैक प्राप्त कर सकते हैं, और सीखने की अंतर्दृष्टि के लिए दूसरों का कोड देख सकते हैं।
- Frontend Mentor। इस वेबसाइट पर, आप रियल-वर्ल्ड HTML, CSS, और जावास्क्रिप्ट चुनौतियों को हल कर सकते हैं। 280,000 से अधिक डेवलपर्स प्रोजेक्ट्स बना रहे हैं, कोड की समीक्षा कर रहे हैं, और एक-दूसरे से सीख रहे हैं।
CSS सीखने का सबसे अच्छा तरीका क्या है?
CSS सीखने के सर्वोत्तम तरीकों में से एक कोडिंग बूटकैंप्स के माध्यम से है। कोडिंग बूटकैंप्स आपको एक अच्छी तरह से संरचित, हैंड्स-ऑन लर्निंग प्रोग्राम प्रदान करते हैं जिसे उद्योग में नियोक्ताओं द्वारा मान्यता प्राप्त है। आप ऑनलाइन कोर्स में नामांकन कर सकते हैं, वीडियो ट्यूटोरियल देख सकते हैं, या CSS सीखने के लिए किताबें पढ़ सकते हैं।
CSS अभ्यास FAQ
CSS किसके लिए उपयोग किया जाता है?
CSS कोड का उपयोग HTML के साथ वेब पेज डिज़ाइन बनाने के लिए किया जाता है।
क्या CSS कोड लोकप्रिय है?
हां, CSS कोड लोकप्रिय है। W3Techs की रिपोर्ट के अनुसार, आज 96.3 प्रतिशत वेबसाइटों द्वारा CSS कोड का उपयोग किया जाता है। कुछ सबसे बड़ी कंपनियां CSS का उपयोग करती हैं, जैसे Google, YouTube, और Facebook।
क्या मैं अकेले CSS कोडिंग कौशल के साथ नौकरी पा सकता हूँ?
जबकि आप अकेले CSS के साथ काम पा सकते हैं, CSS आमतौर पर अन्य सॉफ्टवेयर के साथ संयोजन में उपयोग किया जाता है। हम अनुशंसा करते हैं कि आप HTML, CSS, और जावास्क्रिप्ट कौशल प्राप्त करें, खासकर यदि आप वेब डेवलपर बनना चाहते हैं।
