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

CSS मिनी प्रोजेक्ट — स्टाइल्ड लैंडिंग

CSS सारांश ने आपका टूलकिट मैप किया। यह सत्र उसे काम पर लगाता है। आप हाथ से एक छोटी स्टाइल्ड लैंडिंग जोड़ेंगे: पहचान बार, साफ़ CTA वाला हीरो, कुछ फीचर कार्ड, और शांत फुटर। कोई नई अजीब प्रॉपर्टी नहीं — सिर्फ वे स्किल जो पहले अभ्यास कीं (कैस्केड, बॉक्स मॉडल, Flex, Grid, रिस्पॉन्सिव, फोकस)।

सीधा जवाब

1) पहले सेक्शन स्केच करें: हेडर + नेव, हीरो + CTA, फीचर्स, फुटर।
2) उन्हें सिमेंटिक HTML से चिह्नित करें (header, nav, main, section, footer) एक max-width कंटेनर के अंदर।
3) साझा रंग, स्पेसिंग और रेडियस :root कस्टम प्रॉपर्टी पर रखें।
4) ऊपर की बार और हीरो पंक्ति के लिए Flex; फीचर कार्ड के लिए Grid।
5) एक मीडिया-क्वेरी ब्रेकपॉइंट जोड़ें और लिंक व CTA पर :focus-visible रखें।
6) पूरा मतलब है संकीर्ण व्यूपोर्ट पर पेज पढ़ने योग्य हो और Tab अभी भी फोकस दिखाए — यह नहीं कि हर CSS ट्रिक एक बार आ जाए।

इस लैंडिंग का निर्माण क्रम

📊 Landing sections and CSS jobs

Section	HTML job	CSS job
Header + nav	साइट नाम + इन-पेज लिंक	Flex पंक्ति, gap, शांत बैकग्राउंड
Hero	हेडलाइन, छोटा पिच, प्राथमिक CTA	Flex या स्टैक; मज़बूत कंट्रास्ट; साफ़ बटन
Features	तीन छोटे कार्ड	समान ट्रैक और gap वाला Grid
Footer	संपर्क या कानूनी पंक्ति	शांत पैडिंग; पठनीय म्यूटेड टेक्स्ट
Shared tokens	—	`:root` रंग, स्पेस, रेडियस हर जगह पुनः उपयोग
Responsive check	HTML में viewport मेटा पहले से	एक ब्रेकपॉइंट जो हीरो/कार्ड स्टैक करे

पहले संरचना जोड़ें, फिर सजावट। div के सूप पर सुंदर ग्रेडिएंट ठीक करना कठिन है बनिस्बत सादे सिमेंटिक शेल और शांत CSS के।

चरण 1 — सिमेंटिक शेल

लैंडमार्क से शुरू करें। क्लास रूप निखारती हैं; तत्व पाठकों और सहायक तकनीक के लिए क्षेत्र नाम देते हैं।

Landing landmarks shell

html

<body>
<header class="site-header">
<div class="container header-inner">
<a class="logo" href="#">BrightDesk</a>
<nav class="site-nav" aria-label="Primary">
<a href="#features">Features</a>
<a href="#contact">Contact</a>
</nav>
</div>
</header>

<main>
<section class="hero">
<div class="container hero-inner">
<div class="hero-copy">
<h1>Ship a calm landing with CSS you already know</h1>
<p class="lede">Flex the bar, Grid the cards, keep focus visible.</p>
<a class="btn" href="#features">See features</a>
</div>
</div>
</section>

<section id="features" class="features">
<div class="container">
<h2>What you practice</h2>
<div class="feature-grid">
<article class="card"><h3>Tokens</h3><p>Shared color and space.</p></article>
<article class="card"><h3>Layout</h3><p>Flex and Grid on purpose.</p></article>
<article class="card"><h3>Polish</h3><p>Breakpoint and focus.</p></article>
</div>
</div>
</section>
</main>

<footer id="contact" class="site-footer">
<div class="container">
<p>Practice page — style by hand before frameworks.</p>
</div>
</footer>
</body>

डेमो का अंग्रेज़ी कॉपी छोटा रखें। अपने प्रोजेक्ट में कोई भी प्रोडक्ट नाम चल सकता है — संरचना ब्रांड कहानी से ज़्यादा मायने रखती है।

चरण 2 — `:root` पर डिज़ाइन टोकन

दोहराए जाने वाले मान कस्टम प्रॉपर्टी में डालें ताकि पेज बदलते समय पैलेट और स्पेसिंग एक समान रहें।

Shared tokens for the landing

css

:root {
--bg: #0b1220;
--surface: #111827;
--text: #f8fafc;
--muted: #cbd5e1;
--accent: #38bdf8;
--accent-ink: #0c4a6e;
--radius: 0.75rem;
--space: 1rem;
--max: 960px;
--focus: #fbbf24;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
background: var(--bg);
color: var(--text);
}

.container {
width: 100%;
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--space);
}

टोकन सजावट नहीं — वे कॉपी-पेस्ट बिखराव रोकते हैं। एक बार --accent बदलें; CTA, लिंक और फोकस संकेत संरेखित रह सकते हैं।

चरण 3 — हेडर और नेव के लिए Flex

एक-आयामी पंक्ति Flex का काम है: एक तरफ़ लोगो, दूसरी तरफ़ लिंक, समान gap।

Flex header bar

css

.site-header {
background: var(--surface);
border-bottom: 1px solid #1f2937;
}

.header-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space);
padding: 0.75rem 0;
}

.logo {
color: var(--text);
font-weight: 700;
text-decoration: none;
}

.site-nav {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.site-nav a {
color: var(--muted);
text-decoration: none;
}

.site-nav a:hover {
color: var(--accent);
}

flex-wrap मीडिया क्वेरी से पहले संकीर्ण स्क्रीन पर बार को ईमानदार रखता है।

चरण 4 — हीरो बैंड

संदेश को जगह दें, कंट्रास्ट मज़बूत रखें, और CTA को प्राथमिक क्रिया जैसा दिखाएँ।

Hero copy and primary CTA

css

.hero {
padding: 3rem 0 2.5rem;
background:
radial-gradient(circle at top right, #1e3a5f 0%, transparent 45%),
var(--bg);
}

.hero-inner {
display: flex;
flex-direction: column;
gap: 1.25rem;
max-width: 40rem;
}

.hero h1 {
margin: 0;
font-size: clamp(1.75rem, 4vw, 2.5rem);
line-height: 1.15;
}

.lede {
margin: 0;
color: var(--muted);
font-size: 1.05rem;
}

.btn {
display: inline-block;
width: fit-content;
padding: 0.75rem 1.25rem;
border-radius: var(--radius);
background: var(--accent);
color: var(--accent-ink);
font-weight: 700;
text-decoration: none;
}

.btn:hover {
filter: brightness(1.05);
}

हेडलाइन पर clamp पिछले पाठों की छोटी आधुनिक छूअन है — उपयोगी, अनिवार्य नहीं। CTA पढ़ने योग्य रहे: accent बैकग्राउंड के साथ गहरा इंक, फीका-पर-फीका नहीं।

चरण 5 — फीचर कार्ड के लिए Grid

दो अक्ष (समान कार्ड की पंक्तियाँ और कॉलम) Grid के हैं। कार्ड पैडिंग और बॉर्डर शांत रखें।

Feature cards with Grid

css

.features {
padding: 2rem 0 3rem;
}

.features h2 {
margin: 0 0 1rem;
}

.feature-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space);
}

.card {
padding: 1.25rem;
border-radius: var(--radius);
background: var(--surface);
border: 1px solid #1f2937;
}

.card h3 {
margin: 0 0 0.5rem;
font-size: 1.1rem;
}

.card p {
margin: 0;
color: var(--muted);
}

.site-footer {
padding: 1.5rem 0 2rem;
border-top: 1px solid #1f2937;
color: var(--muted);
font-size: 0.95rem;
}

मोबाइल पर एक कॉलम ठीक है। ब्रेकपॉइंट पर ग्रिड चौड़ा करें — तीन कार्ड के लिए तीसरा लेआउट सिस्टम न गढ़ें।

चरण 6 — ब्रेकपॉइंट और दृश्य फोकस

एक ईमानदार ब्रेकपॉइंट प्लस फोकस रिंग अभ्यास पेज पूरा करते हैं। कीबोर्ड उपयोगकर्ता को अभी भी अपनी जगह दिखनी चाहिए।

Widen cards and keep focus visible

css

@media (min-width: 640px) {
.feature-grid {
grid-template-columns: repeat(3, 1fr);
}

.hero {
padding-top: 4rem;
}
}

a:focus-visible,
.btn:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
}

एक्सेसिबिलिटी स्टाइल आप पहले गहराई से पढ़ चुके। यहाँ सिर्फ आदत लागू करें: ऐसा सुंदर CTA न भेजें जो अपना फोकस संकेत खो दे।

खुद आज़माएँ

index.html + styles.css बनाएँ और लैंडमार्क शेल चिपकाएँ; स्टाइलशीट लिंक करें।
:root टोकन और body/container नियम जोड़ें; पक्का करें पेज केंद्रित और पढ़ने योग्य है।
हेडर Flex से और फीचर कार्ड Grid से स्टाइल करें (एक कॉलम, फिर 640px से तीन)।
CTA स्टाइल करें; Tab से लोगो, नेव और बटन घूमें — फोकस दिखना चाहिए।
फ़ोन चौड़ाई तक छोटा करें: क्षैतिज स्क्रॉल नहीं, स्टैक्ड कार्ड, उपयोगी टैप लक्ष्य।
वैकल्पिक: अगर .btn पर hover ट्रांज़िशन लगाएँ तो prefers-reduced-motion भी जोड़ें।

आम गलतियाँ

इस छोटे पेज को हाथ से स्टाइल करने से पहले कंपोनेंट लाइब्रेरी खोलना
Flex/Grid प्रवाह की जगह हर सेक्शन को position: absolute से रंगना
कंटेनर पर max-width छोड़ना ताकि बड़ी स्क्रीन पर लाइनें किनारे से किनारे खिंचें
CTA और नेव लिंक पर «डिज़ाइन के लिए» फोकस आउटलाइन हटाना
तीन कार्ड के लिए पाँच ब्रेकपॉइंट जोड़ना बनिस्बत एक साफ़ चौड़ाई कदम के
इस लैब को प्रॉपर्टी चेकलिस्ट मानना — हर ट्रिक एक बार — बनिस्बत सुसंगत पेज भेजने के
पिछले पाठ भूलना: सारांश ने स्किल मैप कीं; एक्सेसिबिलिटी ने दृश्य फोकस माँगा — दोनों यहाँ भी लागू हैं

सारांश

यह मिनी प्रोजेक्ट कोर्स स्किल को एक स्टाइल्ड लैंडिंग में जोड़ता है
पहले संरचना (लैंडमार्क), फिर टोकन, Flex बार, Grid कार्ड, ब्रेकपॉइंट, फोकस
एक-आयामी क्रोम के लिए Flex; फीचर मैट्रिक्स के लिए Grid
पूरा मतलब मोबाइल पर पठनीय और कीबोर्ड-सुरक्षित — फ्रेमवर्क-तैयार स्कैफोल्डिंग नहीं
आगे (वैकल्पिक उन्नत): CSS !important (important) अगर कैस्केड के किनारे मामले चाहिए; वरना हाथ से और छोटी पेज बनाते रहें

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

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

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

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

❓

प्रश्न

🎯

70%

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

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

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

भाषा