HTML सीखें
HTML सीखें — आपकी जेब में लाइव प्रीव्यू एडिटर वाला HTML कोर्स
HTML सीखें iPhone और Android के लिए एक HTML course है, जिसमें हर पाठ से बस एक टैप की दूरी पर HTML editor with a live preview मिलता है। कोई टैग टाइप करें, पेज को रेंडर होते देखें, फिर पहले हेडिंग से लेकर फ़ॉर्म, टेबल, semantic HTML5, accessibility और web components तक 40 छोटे कोर्स में आगे बढ़ें।
- कीमत
- मुफ़्त, Pro अपग्रेड
- प्लैटफ़ॉर्म
- iOS और Android
- भाषाएँ
- 22
- आयु रेटिंग
- 4+
- आवश्यकताएँ
- iOS 15.1 या उसके बाद का संस्करण
- App Store
- 3.0 ★ (1)
किसी टैग को काम करते हुए देख लेने के बाद उसका मतलब और स्पष्ट हो जाता है।
HTML एक markup language है, इसलिए किसी नए element को समझने का सबसे तेज़ तरीका है उसे टाइप करना और परिणाम देखना। इस ऐप का हर पाठ editor के पहले से खुले होने पर खत्म होता है; आपके markup के साथ preview भी दिखाई देता है, और CSS या JavaScript फ़ाइलें आप तभी जोड़ते हैं जब उनके लिए तैयार हों।
यह क्या है
HTML सीखें iOS और Android के लिए मुफ़्त में शुरू किया जा सकने वाला HTML course है, जो 40 courses और 159 छोटे lessons के ज़रिए web page markup सिखाता है। ये पाठ beginner (A1) से advanced (C1) तक क्रम में रखे गए हैं। हर विषय के साथ built-in HTML code editor और instant preview, contact form और accessible price table जैसे 20 guided projects, 20 debugging missions और एक AI mentor मिलता है, ताकि बिल्कुल शुरुआती व्यक्ति empty document से semantic, accessible और अच्छी तरह structured pages बनाना सीख सके।
ऐप के अंदर
यह कैसा दिखता है
कोर्स
HTML कोर्स में क्या-क्या शामिल है
ऐप की अपनी कोर्स सूची के 40 courses और 159 lessons, उसी क्रम में जिसमें पाथ उन्हें सिखाता है।
Document Structure, Text, Links, Images और Lists
हर पेज का ढाँचा: दस्तावेज़ की संरचना, headings और paragraphs, links और navigation, images और figures, तथा ordered और unordered lists।
Tables, Attributes और Global Attributes
पहले tables में डेटा व्यवस्थित करना, फिर वे attributes जो किसी element को अनुकूलित करते हैं, जिनमें हर tag पर काम करने वाले global attributes भी शामिल हैं।
Forms: Basics, Advanced Controls और Validation
पहले basic inputs, फिर अधिक उन्नत controls, और उसके बाद वे validation attributes जिनसे भेजे जाने से पहले browser किसी field की जाँच कर सकता है।
Semantic HTML5, Head and Metadata, Audio और Video
Semantic elements, दस्तावेज़ का head और उसका metadata, तथा audio और video elements।
Accessibility, ARIA Roles और Advanced ARIA Patterns
Accessibility की बुनियाद, ARIA roles और attributes, तथा custom widgets के लिए इस्तेमाल होने वाले advanced patterns।
Data Attributes, Templates, Canvas, SVG और iframes
Custom data attributes, HTML templates, canvas element, HTML के अंदर SVG और iframes में embedded content।
Web Storage, Drag and Drop, SEO और Email Templates
Web storage और drag and drop API, SEO और social meta tags, तथा HTML email templates के खास नियम।
Web Components, Performance और HTML at Scale
Custom elements, shadow DOM, import maps और progressive enhancement, साथ ही performance, security, PWAs और testing—और अंत में HTML at scale।
यह कैसे काम करता है
पढ़ने से rendering तक, tag सीखने का तरीका
Lesson छोटा होता है और editor उसके पास ही रहता है, इसलिए किसी concept को पढ़ना और उसे आज़माना एक ही sitting में हो जाता है।
एक छोटा lesson पढ़ें
जहाँ रुके थे, वहीं से learning path शुरू करें। हर lesson एक ही idea पर केंद्रित होता है, जैसे unordered list या alt text वाली image, और इसे पूरा करने में कुछ ही मिनट लगते हैं।
इसे editor में टाइप करें और preview देखें
Editor खोलें और markup लिखें। Preview आपके page को फिर से draw करता है, और जब आप page को style करना या उसमें प्रतिक्रिया जोड़ना चाहें, तब CSS और JavaScript tabs उपलब्ध रहते हैं।
जाँचें, सुधारें और इससे बनाएं
हर topic का अंत quiz और coding challenge से होता है। जब कोई tag या error समझ न आए, तो AI mentor उसे समझाता है; debugging mission आपको सुधारने के लिए एक खराब page देता है; और guided project ऐसी चीज़ बनवाता है जिसे आप दिखा सकते हैं।
इसमें क्या है
Learn HTML के अंदर क्या है
40
A1 से C1 तक के Courses
159 lessons document structure, text, links, images और lists से शुरू होकर tables, forms और semantic HTML5 के ज़रिए accessibility, web components, security और History and Navigation API तक जाते हैं।
Live
Preview वाला HTML editor
Markup लिखें और rendered page को अपडेट होते देखें। आप उसी project में CSS और JavaScript files जोड़ सकते हैं, जिससे एक साधारण document छोटी-सी working website में बदल जाता है।
20
Guided projects
Step-by-step builds में recipe box page, contact form, photo gallery, navigation bar और accessible price table शामिल हैं।
20
Debugging missions
वास्तविक समस्याएँ खोजें और ठीक करें: ऐसा signup form जो कुछ भेजता ही नहीं, ऐसा label जिसे कोई tap नहीं कर सकता, या ऐसा page जो फ़ोन पर zoomed out होकर load होता है।
80
Tag cheat sheet
80 HTML tags, elements और attributes की lookup list—उन क्षणों के लिए जब आपको पता हो कि आप क्या करना चाहते हैं, लेकिन उसका नाम न पता हो।
50
Interview questions
Web developer interview के 50 questions, स्पष्ट answers के साथ; साथ ही छोटे examples की code library, जिन्हें आप खोलकर edit कर सकते हैं, और अपना code व notes सहेजने के लिए एक जगह।
पृष्ठभूमि
HTML क्या है, और क्या आप इसे फ़ोन पर टाइप करके सीख सकते हैं?
HTML (HyperText Markup Language) वह भाषा है जो web page की संरचना बताती है: कौन-सा text heading है, कौन-सा paragraph है, link कहाँ जाता है और form में क्या पूछा जाता है। यह programming language नहीं है, इसलिए इसमें loops या variables से जूझना नहीं पड़ता—इसी वजह से यह web development में पहला कदम रखने का सामान्य तरीका है। इसका परिणाम लिखते ही दिखाई देने लगता है, इसलिए HTML फ़ोन पर छोटे-छोटे learning sessions के लिए उपयुक्त है: कोई tag अंगूठे से टाइप करने जितना छोटा होता है और preview तुरंत दिखा देता है कि वह सही काम कर रहा है या नहीं।
Elements, tags और attributesहर lesson में इस्तेमाल होने वाले तीन शब्द
Element अर्थ रखने वाली content की एक इकाई है, जो opening और closing tag के बीच लिखी जाती है—जैसे paragraph या list item। Attributes opening tag के भीतर होते हैं और उसमें बदलाव करते हैं, जैसे link का address या image का वर्णन करने वाला text। शुरुआती लोगों की लगभग हर गलती missing closing tag या गलत जगह रखे गए attribute की वजह से होती है।
Semantic HTMLheadings, navigation, main और footer
Semantic elements यह बताते हैं कि page का कोई block क्या है, न कि वह कैसा दिखाई देता है। Navigation bar, article और footer—हर एक का अपना element होता है, जिससे screen readers, search engines और बाद में page edit करने वाले किसी भी व्यक्ति को मदद मिलती है। यही आदत एक व्यवस्थित page को generic containers के ढेर से अलग करती है।
HTML, CSS और JavaScriptकौन क्या करता है
HTML structure और content संभालता है, CSS उस content का रूप-रंग नियंत्रित करता है और JavaScript click पर प्रतिक्रिया देने जैसा behaviour जोड़ता है। पहले HTML सीखने से बाकी दोनों के लिए जुड़ने का आधार मिल जाता है। ऐप का editor अलग-अलग HTML, CSS और JavaScript tabs देता है, ताकि शुरुआत से ही तीनों काम अलग रख सकें।
Forms और accessibilityजहाँ simple pages गंभीर हो जाते हैं
Forms वह तरीका हैं जिससे page visitor से कोई भी जानकारी माँगता है, और accessibility की ज़्यादातर समस्याएँ भी यहीं से शुरू होती हैं: ऐसा label जिसे कोई tap नहीं कर सकता या ऐसा field जिसका नाम screen reader नहीं बता सकता। Labels, validation attributes और ARIA roles markup के छोटे हिस्से हैं, लेकिन यही तय करते हैं कि page सभी के लिए काम करेगा या नहीं।
उपयुक्तता
यह किन लोगों के लिए है — और किनके लिए नहीं
आपके लिए सही है, अगर आप
- क्या आप अपना पहला web page लिख रहे हैं और इस्तेमाल करने से पहले हर tag की व्याख्या चाहते हैं
- जब हर line का परिणाम तुरंत देख सकें, तब बेहतर सीखते हैं
- क्या आप blog, shop page या portfolio चलाते हैं और उसके पीछे का markup संपादित करना चाहते हैं
- CSS, JavaScript या front-end work की ओर बढ़ने की योजना है और पहले मज़बूत बुनियाद चाहते हैं
- क्या आप web developer interview की तैयारी कर रहे हैं और अभ्यास के लिए questions चाहते हैं
आपके लिए सही टूल नहीं है, अगर आप
- files, folders और local server के साथ पूरा desktop workflow चाहिए
- उम्मीद है कि हर course मुफ़्त होगा; पहला course, पहला guided project और two missions मुफ़्त हैं, जबकि Pro बाकी सब अनलॉक करता है
- क्या आप पहले से रोज़ production HTML लिखते हैं और course के बजाय reference चाहते हैं
- क्या आप design tool सीखना चाहते हैं; यह markup और pages के पीछे के code के बारे में है
सवाल
अक्सर पूछे जाने वाले सवाल
HTML सीखें क्या है?
HTML सीखें iPhone और Android के लिए एक ऐप है, जो पहले tag से लेकर advanced topics तक HTML सिखाता है। इसमें 40 short courses, built-in HTML editor और live preview, 20 guided projects, 20 debugging missions और AI mentor शामिल हैं। इसकी शुरुआत मुफ़्त है और यह 22 languages में उपलब्ध है।
क्या मैं वाकई phone पर HTML लिख और preview कर सकता हूँ?
हाँ। HTML सीखें के editor में HTML, CSS और JavaScript tabs हैं, और preview वह page दिखाता है जो आपका markup तैयार करता है। Phone पर focused practice करना सुविधाजनक है, जिसकी HTML को ज़रूरत होती है, क्योंकि tags छोटे होते हैं। बड़ी screen तभी उपयोगी होती है जब आप एक साथ कई files संभाल रहे हों।
क्या शुरू करने से पहले मुझे coding experience चाहिए?
नहीं। यह path बताता है कि HTML document कैसे बनाया जाता है और हर term का इस्तेमाल करने से पहले उसे सरल भाषा में समझाता है। HTML में पहले सीखने के लिए loops या variables नहीं होते, इसलिए HTML सीखें complete beginner को अपवाद नहीं, बल्कि सामान्य उपयोगकर्ता मानता है।
HTML और CSS में क्या अंतर है?
HTML यह तय करता है कि page पर क्या है और उसके हर हिस्से का अर्थ क्या है—जैसे heading, link या form field। CSS यह तय करता है कि वह कैसा दिखेगा, जिसमें colours, spacing और layout शामिल हैं। ऐप पहले HTML सिखाता है और editor में CSS files जोड़ने देता है, ताकि आप दोनों को उनके काम मिलाए बिना साथ काम करते देख सकें।
HTML basics सीखने में कितना समय लगता है?
ज़्यादातर लोग कुछ short sessions के बाद एक सरल और सही page लिख सकते हैं, क्योंकि core elements कम हैं: headings, paragraphs, links, images, lists और basic forms। Accessibility, semantic structure और web components जैसे गहरे विषयों में अधिक समय लगता है। यहाँ lessons कुछ मिनटों में पूरे करने के लिए लिखे गए हैं, इसलिए रोज़ाना सीखने की आदत बनाना वास्तविक है।
मैं ऐप में किस तरह के projects बना सकता हूँ?
20 guided projects में recipe box page, contact form, photo gallery, navigation bar और accessible price table शामिल हैं। हर project step by step बनाया जाता है। इन्हें जानबूझकर छोटा रखा गया है, ताकि आप इन्हें पूरा कर सकें और code को अपने saved snippets में रख सकें।
क्या Learn HTML में accessibility और forms शामिल हैं?
हाँ, और काफ़ी गहराई से। Forms के लिए तीन courses हैं, जिनमें basics, advanced controls और validation attributes शामिल हैं। Accessibility के लिए basics, ARIA roles और advanced ARIA patterns पर अलग courses हैं। Debugging missions में ऐसे faults भी शामिल हैं, जैसे ऐसा label जिसे कोई tap नहीं कर सकता, जिससे ये विषय केवल सैद्धांतिक नहीं रहते, बल्कि व्यावहारिक बनते हैं।
क्या ऐप मुफ़्त है और Pro में क्या मिलता है?
आप इसे मुफ़्त download करके तुरंत शुरू कर सकते हैं: पहला course, पहला guided project, two missions और live editor शामिल हैं, साथ ही रोज़ाना AI mentor allowance भी मिलता है। Pro हर course, सभी projects और missions, certificate exam और unlimited AI mentor questions को अनलॉक करता है और ads हटा देता है।
शुरू करें
अपना पहला tag लिखें और उसे render होते देखें
iOS और Android पर 22 languages में शुरुआत मुफ़्त है।
CoddyKit की ओर से और
iOS और Android पर उपलब्ध है।