लोड हो रहा है...

HTML मिनी प्रोजेक्ट — व्यक्तिगत साइट

पहले सारांश ने आपके HTML टूलकिट का नक्शा बनाया और यहाँ अभ्यास कदम के रूप में इशारा किया। यह पाठ नया कौशल नक्शा नहीं। यह एक निर्माण ब्रीफ है: तीन पृष्ठ योजना बनाएँ, एक साझा नेव शेल रखें, असली सामग्री भरें, और छोटी स्वीकृति तालिका से साइट साबित करें।

अब मिनी प्रोजेक्ट क्यों

ट्यूटोरियल एक समय एक विषय दिखाते हैं। छोटी व्यक्तिगत साइट मजबूर करती है मिलाने पर: हर पृष्ठ पर landmark, काम करते सापेक्ष लिंक, सूचनात्मक छवि, सूची या डेटा तालिका, और लेबल वाला संपर्क फ़ॉर्म। वह पैकेज सौंपना — CSS के बिना भद्दा भी — attribute रटने से बेहतर। इसे एक केंद्रित सत्र की चेकलिस्ट मानें।

सीधा उत्तर

1) कम से कम तीन फ़ाइलें: index.html, about.html, contact.html। 2) हर पृष्ठ पर वही header/nav/footer landmark काम करते लिंक के साथ। 3) होम पर असली intro, अबाउट पर छोटी कहानी, संपर्क पर लेबल वाला name/email/message फ़ॉर्म। 4) अर्थपूर्ण alt वाली एक सूचनात्मक छवि तथा कौशल सूची या छोटी तथ्य तालिका। 5) कीबोर्ड से Tab करें; गायब label और टूटे लिंक ठीक करें। 6) «हो गया» कहने से पहले स्वीकृति की हर पंक्ति चिह्नित करें।

📊 Acceptance criteria

Item	Done when
Shared nav	Same landmark links work on every page
Semantics	header, nav, main, and footer on each page
Home & about	Real paragraphs — not placeholder lorem forever
Media	At least one informative image with useful alt
Data	A skills list or a small facts table
Form	Labeled name, email, message + a real submit button
Quality	Keyboard tab order makes sense; no unlabeled controls

टाइप से पहले योजना

पहले स्केच: साइट नाम, तीन पृष्ठों का उद्देश्य, कौन सी फोटो, कौन से कौशल/तथ्य। फ़ोल्डर तय करें — तीनों HTML एक साथ सापेक्ष लिंक के लिए। व्यक्ति/ब्रांड एक बार नाम दें ताकि h1 और title सुसंगत रहें।

साझा शेल — यहाँ शुरू करें

हर पृष्ठ में header/nav कॉपी करें; केवल main बदलें। सापेक्ष href फ़ाइल नाम से मेल खाने चाहिए। बाद में असली button type=submit — खाली div से submit न बनाएँ।

Shared nav starter

html

<header>
<h1>Alex Site</h1>
<nav aria-label="Main">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
</header>
<main>
<!-- page content -->
</main>
<footer>
<p>© Alex</p>
</footer>

शेल पढ़ना

header+nav+main+footer स्पष्ट landmark देते हैं
nav पर aria-label दूसरी nav आने पर मदद करता है
सापेक्ष लिंक तीन फ़ाइलों को एक साइट बनाते हैं
शेल दोहराएँ; केवल main बदलें
हर पृष्ठ के title में भी छोटा शीर्षक रखें
सारांश ने आदतें बताईं — यहाँ साथ लागू करें

संपर्क फ़ॉर्म स्टार्टर

संपर्क पृष्ठ वह जगह है जहाँ फ़ॉर्म कौशल प्रोजेक्ट से मिलते हैं। हर नियंत्रण को दिखने वाले label से जोड़ें। भविष्य के बैकएंड के लिए name दें। सर्वर पोस्ट न होने पर भी मार्कअप में असली submit रखें।

Contact form starter

html

<form action="#" method="post">
<p>
<label for="name">Name</label>
<input id="name" name="name" type="text" required>
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
</p>
<p>
<label for="msg">Message</label>
<textarea id="msg" name="message" rows="5" required></textarea>
</p>
<button type="submit">Send</button>
</form>

काम करने वाला निर्माण क्रम

तीन फ़ाइलों में शेल दोहराएँ; नेव लिंक ठीक करें। 2. होम intro और अबाउट कहानी (+ सूची/तालिका) लिखें। 3. images/ में फोटो; src और विशिष्ट alt। 4. फ़ॉर्म चिपकाएँ; label, name, submit जाँचें। 5. तीनों पृष्ठ खोलें; संकीर्ण करें; submit तक Tab। 6. स्वीकृति पंक्तियाँ चिह्नित करें — हल्का CSS बाद में।

इस प्रोजेक्ट की आसान गलतियाँ

नेव एक बार कॉपी कर केवल एक पृष्ठ संपादित करना जब तक लिंक बिखर जाएँ
केवल placeholder वाले संपर्क फ़ील्ड बिना label
पूरे पृष्ठ के लिए लेआउट तालिका बजाय landmark
अर्थ वाली फोटो पर खाली alt
lorem छोड़कर «हो गया» कहना
तीन पृष्ठ मान्य होने से पहले फ्रेमवर्क/भारी CSS की ओर कूदना
सारांश आदत भूलना: पहले संरचना और label

सारांश

यह सत्र व्यावहारिक व्यक्तिगत-साइट निर्माण है, नया कोर्स नक्शा नहीं
तीन पृष्ठ साझा header/nav/main/footer और काम करते सापेक्ष लिंक रखते हैं
मीडिया, सूची या तालिका, और लेबल वाला संपर्क फ़ॉर्म मिलाएँ
स्वीकृति तालिका «हो गया» की परिभाषा है
CSS चमकाने से पहले कीबोर्ड जाँच
अगले वैकल्पिक विषय (SVG…) अतिरिक्त हैं — पहले यह साइट सौंपें

संक्षिप्त याद

अटकें तो स्वीकृति तालिका पर लौटें — नए टैग रटने पर नहीं। लक्ष्य कोर्स कौशल को ब्राउज़र में खुलने वाली छोटी साइट में मिलाना अभ्यास करना है।

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी