CSS सीखें और करें
CSS सीखें और करें — अपने फ़ोन पर लाइव HTML और CSS एडिटर के साथ CSS कोडिंग का अभ्यास
CSS सीखें और करें निःशुल्क iOS और Android ऐप है, जो उन बिल्कुल शुरुआती लोगों, डिज़ाइनरों और करियर बदलने वालों के लिए है जो अपने फ़ोन पर करके CSS कोडिंग सीखना चाहते हैं। इसका लाइव HTML और CSS एडिटर आपके पेज का तुरंत प्रीव्यू दिखाता है, और 40 कोर्स selectors और box model से लेकर flexbox, grid, animation और responsive layout तक आगे बढ़ते हैं। इनमें 20 मार्गदर्शित डिज़ाइन प्रोजेक्ट और 20 bug-hunt मिशन भी शामिल हैं।
- कीमत
- निःशुल्क, Pro अपग्रेड
- प्लेटफ़ॉर्म
- iOS और Android
- भाषाएँ
- 22
- आयु रेटिंग
- 4+
- आवश्यकताएँ
- iOS 15.1 या बाद का
किसी property ने box को हिलाया या नहीं हिलाया।
CSS आपको लगभग किसी भी दूसरी coding skill की तुलना में तेज़ feedback देता है: एक value बदलें और सामने का पेज या तो खिसकता है या नहीं खिसकता। एडिटर का instant preview इसी तथ्य पर आधारित है — rule ने काम किया या नहीं, यह जानने के लिए आपको इंतज़ार नहीं करना पड़ता; आप उसे होते हुए देखते हैं।
यह क्या है
CSS सीखें और करें iOS और Android के लिए एक निःशुल्क education app है, जो पहले selector से लेकर responsive layout, animation और modern design patterns तक CSS सिखाता है। इसका live HTML और CSS editor आपके type करते ही पेज का preview दिखाता है। इसके 40 courses में box model, flexbox, grid, responsive design और cascade शामिल हैं, साथ ही 20 guided projects, 20 bug-hunt missions और आपकी अपेक्षा के अनुसार render न होने वाली किसी भी चीज़ के लिए AI Mentor भी है।
ऐप के अंदर
यह कैसा दिखता है
कोर्स
CSS कोर्स में क्या-क्या शामिल है
40 कोर्स और 159 पाठ, जो ऐप की अपनी कोर्स सूची से लिए गए हैं — पहले selector से लेकर container queries, Sass और आधुनिक layout patterns तक।
Syntax, Color और Type
CSS Syntax & Selectors, Colors & Backgrounds, Typography & Text, CSS Units & Values, Pseudo-classes और Pseudo-elements।
Box Model और Positioning
The Box Model, Display Properties, Positioning Essentials और Scroll & Overflow — ये चार कोर्स शुरुआती layout से जुड़ी ज़्यादातर उलझनों की नींव समझाते हैं।
Flexbox और Grid
Flexbox Fundamentals, Advanced Flexbox, CSS Grid Basics, Advanced Grid और CSS Logical Properties।
Responsive Design
Responsive Design, Media Queries, Container Queries और Dark Mode & Color Schemes।
Motion और Visual Effects
CSS Transitions, CSS Animations & Keyframes, CSS Transforms, Filters & Blend Modes और CSS Shapes & Clip-path।
Cascade और Modern CSS
Specificity & Cascade, CSS Variables, CSS Functions, CSS Layers (@layer), CSS Houdini और CSS Future।
Architecture और Tooling
CSS Architecture & BEM, Sass Preprocessor, PostCSS & CSS Tooling, CSS-in-JS Patterns, Design Tokens & Theming, CSS Debugging & DevTools, CSS Testing, CSS Component Patterns, Modern Layout Patterns और CSS Performance।
यह कैसे काम करता है
एडिटर में एक session कैसे काम करता है
हर lesson में एक छोटा explanation ऐप के live editor के साथ जोड़ा गया है, इसलिए जिस property के बारे में आपने अभी पढ़ा है और जिस page को वह बदलती है, वे अलग exercise में नहीं बल्कि एक ही screen पर होते हैं।
एक CSS idea पढ़ें, फिर editor खोलें
एक छोटा lesson किसी एक concept — selector, flex property या media query — को समझाता है और आपको साथ-साथ HTML और CSS editor तथा instant preview pane देता है।
एक value बदलें और page को हिलते देखें
Lesson में दिया गया rule type करते ही preview तुरंत update हो जाता है; box model या flex property में गलती करें, तो preview ठीक दिखाता है कि उसका असर क्या है। यही feedback loop CSS को परिणाम देखने के लिए सबसे तेज़ चीज़ों में से एक बनाता है, और ऐप केवल इसका वर्णन करने के बजाय इसी तरीके से सीखने के लिए बनाया गया है।
एक project बनाएँ या bug खोजें, फिर अटकने पर पूछें
20 guided projects — toolbar, card grid, sticky header और pulsing button — तथा 20 bug-hunt missions lessons के बाद आते हैं: अपनी column से 42px चौड़ा card या ऐसी media query जो कभी चलती ही नहीं। जब layout फिर भी सही तरह से काम न करे, तो AI Mentor concept, error या आपके अपने code को समझाता है।
इसमें क्या है
ऐप में क्या-क्या मिलता है
40
Courses, A1 से C1 तक
40 courses में 159 lessons हैं, जो syntax और selectors से शुरू होकर box model, flexbox और grid से होते हुए responsive design, animation, Sass, PostCSS और modern layout patterns तक जाते हैं।
Live
HTML और CSS editor
HTML और CSS को साथ-साथ दिखाने वाला editor और instant preview, ताकि आप lesson के साथ-साथ अभ्यास कर सकें या अपना page आज़मा सकें।
20
Guided design projects
Toolbar, card grid, sticky header, pulsing button और भी बहुत कुछ — इन्हें पूरा-पूरा copy करने के बजाय एक-एक step करके बनाया जाता है।
Bug Hunt
20 bug-hunt missions
ढूँढ़कर ठीक करने के लिए वास्तविक layout bugs — अपनी column से 42px चौड़ा card, फ़ोन पर कभी न चलने वाली media query या page के पीछे अटका हुआ modal।
AI
AI Mentor
किसी layout, property या अपने code के बारे में पूछें; Pro में AI playground भी मिलता है, जो आपके बताए गए page को वास्तविक HTML और CSS में बदल देता है।
Cert
Completion certificate
एक final exam और completion certificate के साथ properties और selectors की 69-entry cheat sheet तथा answers सहित 50 front-end interview questions भी मिलते हैं।
पृष्ठभूमि
CSS क्या है, और इसके कौन-से हिस्से शुरुआती लोगों के लिए वास्तव में मुश्किल होते हैं?
CSS वह language है जो तय करती है कि web page कैसा दिखेगा। HTML content के नाम बताता है — heading, list और image — जबकि CSS स्क्रीन पर उसका colour, spacing, type और position तय करता है। CSS से जुड़ी शुरुआती लगभग हर परेशानी तीन जगहों में से किसी एक से आती है: box model (padding और borders किसी element को आपके लिखे number से बड़ा बना देते हैं), specificity (आपकी अपेक्षा के विपरीत कोई rule आपके rule को override कर देता है), या गलत layout system चुनना (एक row के लिए बने tool से two-dimensional page बनाने की कोशिश करना)।
Box modelspacing आपको क्यों चौंकाती है
हर element एक box होता है, जो content, padding, border और margin से बना होता है और ये एक-दूसरे के चारों ओर परतों की तरह लगे होते हैं। डिफ़ॉल्ट रूप से padding और border किसी element की घोषित width में समाने के बजाय उसमें जुड़ते हैं। यही वह सबसे आम कारण है जिसकी वजह से box आपके तय किए गए number से ज़्यादा चौड़ा हो जाता है।
Specificity और cascadeकिसी rule को नज़रअंदाज़ क्यों किया जाता है
जब दो CSS rules एक ही element को target करते हैं, तो browser उनमें से एक को specificity के आधार पर चुनता है — मोटे तौर पर, selector कितनी सटीकता से लिखा गया है — न कि इस आधार पर कि file में कौन-सा rule पहले आया है। कोई rule सही दिखता हो, लेकिन कहीं और मौजूद अधिक specific rule से चुपचाप हार रहा हो, तो यह अक्सर confusion का कारण बनता है।
Flexboxone-dimensional layout
यह ऐसा layout system है जो items को एक ही row या column में व्यवस्थित करता है और उनके बीच बची हुई जगह बाँटता है — जैसे navigation bar या buttons की row। इसने float-based layout hacks के वर्षों पुराने चलन की जगह ली और आम तौर पर यह पहला वास्तविक layout tool होता है जिसे कोई beginner सीखता है।
Gridtwo-dimensional layout
यह ऐसा layout system है जो rows और columns को एक साथ निर्धारित करता है, इसलिए items margins से धीरे-धीरे position में लाने के बजाय वास्तविक grid में रखे जाते हैं। आधुनिक page-level layouts आम तौर पर इसी से बनाए जाते हैं; flexbox एक single row के लिए अधिक उपयुक्त रहता है।
उपयुक्तता
यह किन लोगों के लिए है — और किनके लिए नहीं
आपके लिए सही है, अगर आप
- आपने कभी stylesheet नहीं लिखी है और theory सीखने से पहले किसी rule को पेज बदलते हुए देखना चाहते हैं
- आप designer हैं और किसी mockup को सौंपने के बजाय अपने पेज खुद style करना चाहते हैं
- आपको कुछ HTML पहले से आता है और आप आखिरकार flexbox, grid और यह समझना चाहते हैं कि layouts कभी-कभी सही तरह से काम क्यों नहीं करते
- आप केवल properties पर multiple-choice सवाल नहीं, बल्कि निर्देशित design projects और ठीक करने के लिए वास्तविक bugs चाहते हैं
- आप career switcher या student हैं और front-end interview की तैयारी कर रहे हैं
आपके लिए सही टूल नहीं है, अगर आप
- आपको editor पूरी तरह बिना connection के काम करने की ज़रूरत है — instant preview के लिए विशेष रूप से connection चाहिए
- आप सब कुछ free होने की अपेक्षा रखते हैं: पहला course, पहला project, two missions और editor free हैं, जबकि Pro बाकी सब unlock करता है
- आप flexbox, grid और cascade के साथ पहले से सहज हैं और course के बजाय गहराई से reference material चाहते हैं
- आपको accredited qualification चाहिए — certificate completion certificate है, formal credential नहीं
सवाल
अक्सर पूछे जाने वाले सवाल
मेरा CSS layout मेरी अपेक्षा के अनुसार काम क्यों नहीं करता?
शुरुआती layout से जुड़ी ज़्यादातर समस्याएँ तीन जगहों से आती हैं। Box model: padding और borders डिफ़ॉल्ट रूप से element की घोषित width में जुड़ जाते हैं, इसलिए box आपके लिखे हुए number से अधिक चौड़ा हो जाता है। Specificity: कहीं और मौजूद अधिक specific rule चुपचाप आपके rule को override कर देता है। और गलत layout tool: flexbox से two-dimensional पेज बनाने की कोशिश करना, जबकि flexbox एक single row के लिए बनाया गया है। CSS सीखें और करें अपने courses को इसी क्रम में रखता है, ताकि इन तीनों को trial and error से खोजने के बजाय समझा जा सके।
क्या CSS सीखने से पहले मुझे HTML आना ज़रूरी है?
थोड़ा-सा, और आप इसे पहले पूरी तरह सीखने के बजाय lessons के साथ-साथ भी सीख सकते हैं। CSS यह बताता है कि HTML elements कैसे प्रस्तुत किए जाते हैं, इसलिए यह जानना कि पेज elements — headings, paragraphs, lists और images — से बना है, शुरुआत के लिए पर्याप्त आधार है। ऐप का live editor HTML और CSS दोनों को साथ दिखाता है, इसलिए पहले lesson से ही दोनों के बीच का संबंध स्पष्ट दिखाई देता है।
flexbox और grid में क्या अंतर है, और किसका इस्तेमाल कब करना चाहिए?
Flexbox items को एक line — जैसे buttons की row या navigation bar — पर व्यवस्थित करता है और बची हुई जगह को उसी एक axis पर बाँटता है। Grid एक ही समय में rows और columns तय करता है, इसलिए आप margins से items को थोड़ा-थोड़ा खिसकाने के बजाय उन्हें वास्तविक two-dimensional grid में रखते हैं। पेज-स्तर का layout आम तौर पर grid होता है; उसके भीतर controls की single row आम तौर पर flexbox होती है, और course आपको दोनों सिखाने के बाद चुनाव करने देता है।
जब मेरा rule file में बाद में आता है, तब भी अधिक specific rule कभी-कभी क्यों जीत जाता है?
CSS conflicting rules को पहले specificity और फिर source order के आधार पर तय करता है। ID selector, class selector से अधिक प्रभावी होता है, और class, plain element selector से — stylesheet में कौन-सा rule नीचे दिखाई देता है, इससे कोई फर्क नहीं पड़ता। इसी कारण सही दिखने वाला rule भी कहीं और मौजूद उस rule से हार सकता है जिसे आप भूल गए हों — ऐप का Specificity & Cascade course इसी क्रम को रहस्यमय के बजाय पूर्वानुमानित बनाने के लिए है।
क्या 2026 में भी CSS सीखना उपयोगी है, या Tailwind जैसे frameworks इसकी जगह ले लेते हैं?
हाँ, सीधे CSS सीखना अब भी उपयोगी है। Tailwind जैसे utility frameworks CSS concepts पर बनी एक layer हैं, उनका विकल्प नहीं — जब कोई utility class आपकी अपेक्षा के अनुसार काम नहीं करती, तब box model, specificity और नीचे काम कर रहे layout systems को समझना ही आपको आगे बढ़ने में मदद करता है। यह उन skills में से भी एक है जिनके परिणाम सबसे जल्दी दिखाई देते हैं, क्योंकि हर बदलाव तुरंत पेज पर दिखता है।
किसी वास्तविक पेज को style करने में सहज होने में कितना समय लगता है?
कुल घंटों से अधिक महत्वपूर्ण निरंतरता है। रोज़ के छोटे lessons पर काम करने से ज़्यादातर beginners कुछ ही हफ्तों में selectors, spacing, typography और basic flexbox या grid layout को आत्मविश्वास से संभाल सकते हैं — specificity edge cases या container queries जैसे कठिन हिस्सों से काफी पहले। ऐप के 20 guided projects इसी चरण का अभ्यास कराने के लिए हैं, हर बार एक वास्तविक पेज पर।
क्या CSS सीखें और करें free है?
ऐप App Store और Google Play से free download किया जा सकता है। पहला course, पहला guided project, two bug-hunt missions और live editor free हैं, साथ में daily AI Mentor allowance भी मिलता है। Pro सभी courses, सभी 20 projects और 20 missions, certificate exam और unlimited AI Mentor use unlock करता है, और ads हटा देता है।
क्या CSS सीखें और करें iPhone और Android पर उपलब्ध है, और यह किन लोगों के लिए है?
CSS सीखें और करें App Store पर iPhone और iPad के लिए तथा Google Play पर Android के लिए उपलब्ध है, इसका interface 22 languages में है और इसकी age rating 4+ है। यह complete beginners, अपने पेज खुद style करने की इच्छा रखने वाले designers और front-end interviews की तैयारी कर रहे career switchers या students के लिए है।
क्या live preview offline, underground या plane में काम करता है?
आपके HTML और CSS को render करने के लिए instant preview को विशेष रूप से connection चाहिए, और ऐप इसे स्पष्ट रूप से बताता है, चुपचाप इसकी सुविधाएँ कम नहीं करता। Lesson text और reading material कमजोर connection पर भी काम करते रहने के लिए बनाए गए हैं, जिससे ज़्यादातर commuting के दौरान सुविधा मिलती है, लेकिन पूरी तरह offline live-preview session यह editor उपलब्ध नहीं कराता।
यह किन platforms और languages को support करता है, और क्या certificate मिलता है?
CSS सीखें और करें App Store के ज़रिए iOS और Google Play के ज़रिए Android पर चलता है, और ऐप 22 languages में उपलब्ध है। इसकी rating 4+ है। Final exam पास करने पर ऐप completion certificate जारी करता है — आपके किए गए काम का प्रमाण, जिसे आप guided projects के साथ CV में उपयोग कर सकते हैं और जिसके बारे में विस्तार से बता सकते हैं; यह accredited qualification नहीं है।
शुरू करें
आज ही अपना पहला पेज style करें
iOS और Android पर 22 languages में, शुरुआत free है।
CoddyKit की ओर से और
iOS और Android पर उपलब्ध है।