Create A Blogger Template From Scratch - The Header

Blogger Template Development Course – Header Design (Step by Step)

नमस्ते दोस्तों,

यह हमारे Blogger Template Development Course का अगला भाग है। इस भाग में हम अपनी वेबसाइट का Header Design बनाएँगे।

पिछले भाग में हमने ये काम किया था:

• VS Code में प्रोजेक्ट सेटअप किया
• HTML, CSS और JavaScript फाइलें बनाईं
• Basic HTML5 Code लिखा
• Fonts, CSS और JavaScript लिंक किए

अब आगे बढ़ते हैं और Header Section डिज़ाइन करते हैं।

---

1. Design Overview (डिज़ाइन का प्लान)

• सबसे ऊपर हमें Navigation Bar (Menu Bar) बनानी है।
• हमारी वेबसाइट का Content (अंदर का भाग) हमेशा एक Fixed Width में रहेगा।
• लेकिन Background (जैसे Navigation Bar, Footer आदि) पूरी स्क्रीन (100% चौड़ाई) में दिखेगा।

👉 आसान भाषा में:
Content हमेशा एक बॉक्स के अंदर रहेगा, लेकिन उसका बैकग्राउंड पूरा फैल जाएगा।

---

2. Wrapper Class

• इसके लिए हम HTML में एक Wrapper Class बनाएँगे।
• CSS में Wrapper को Maximum Width देंगे।
• इससे Content बाहर नहीं जाएगा और हमेशा एक Box के अंदर सिमटा रहेगा।

---

3. Navigation Bar Structure

सबसे पहले हम HTML में <div class="top-nav"> बनाएँगे।
यह हमारी Navigation Bar का Container होगा।

इसके अंदर हम एक और <div class="wrapper"> डालेंगे, ताकि Navigation का Content Fixed Width में रहे।

👉 मतलब:

Source Code :

<div class="top-nav">

   <div class="wrapper">

      <!-- Logo और Menu यहीं आएँगे -->

   </div>

</div>

4. Logo जोड़ना

• Wrapper के अंदर एक <div class="logo-icon"> बनाएँ।
• इसमें <a> Tag डालें (अभी link में सिर्फ #)।
• Anchor Tag के अंदर Logo Image डालें → images/logo.png

HTML Code :

<div class="logo-icon">

   <a href="#"><img src="images/logo.png" alt="Logo"></a>

</div>

अब Live Server से Website खोलेंगे तो Logo दिखाई देगा।

---

5. Navigation Items (Menu)

Logo के बाद हमें Menu बनाना है – Home, About, Contact, Privacy Policy

• इसके लिए <nav> Tag बनाएँ।
• <ul> (unordered list) के अंदर <li> डालें।
• हर <li> के अंदर <a> होगा।

HTML Code :

<nav>

   <ul>

      <li><a href="#">Home</a></li>

      <li><a href="#">About</a></li>

      <li><a href="#">Contact</a></li>

      <li><a href="#">Privacy Policy</a></li>

   </ul>

</nav>

6. Search Icon जोड़ना

अब Navigation Menu के बाद एक Search Icon जोड़ते हैं।

HTML Code :

<div class="search-icon">

   <img src="images/search-icon.png" alt="Search">

</div>

(ध्यान दें: अभी Search Icon सफेद बैकग्राउंड पर दिखेगा, बाद में CSS से इसे स्टाइल करेंगे।)

---

7. Hero Section

अब Navigation Bar के नीचे Hero Section बनाएँगे।
Hero Section में दो भाग होंगे:

• Left Side → Heading, Subheading और Button
• Right Side → एक Image

HTML Code :

<header>

   <div class="header-wrapper">

      <div class="hero">

         <!-- Left Side -->

         <div class="hero-left">

            <h1 class="main-heading">Live Blogger</h1>

            <p class="main-subheading">Learn to design websites</p>

            <a class="btn" href="#">Learn More</a>

         </div>

         

         <!-- Right Side -->

         <div class="hero-right">

            <img src="images/heroimage.png" alt="Hero Image">

         </div>

      </div>

   </div>

</header>

✅ अब तक हमने यह काम पूरा कर लिया:

• Navigation Bar (Logo, Menu, Search Icon)
• Hero Section (Heading, Subheading, Button, Image)

👉 मतलब अब हमारा Header Section का HTML तैयार है।

इसमें Logo, Navigation Menu, Search Icon, Hero Heading, Subheading, Button और Image सब आ चुका है। ✅

---

अब हम अपनी CSS File में जाकर Styling करेंगे।

सबसे पहले हम एक Universal Selector (*) बनाएँगे।
यह Selector आपकी पूरी Website के सभी Elements को Select करता है।
इसमें हम कुछ Properties Reset करेंगे –

Source Code :

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

• margin: 0; → सभी Elements का Margin 0 कर देगा।
• padding: 0; → सभी Elements का Padding 0 कर देगा।
• box-sizing: border-box; → इसका मतलब है कि जब भी किसी Element में Padding या Border जोड़ेंगे,

उसकी Width और Height में Padding और Border पहले से ही शामिल हो जाएँगे।

👉 अगर हम यह Code नहीं लिखते और किसी Element की Height 100px होती,
और उसमें ऊपर-नीचे 2px Border जोड़ते,
तो उसकी Total Height 104px हो जाती।
लेकिन box-sizing: border-box; लगाने से Height हमेशा 100px ही रहेगी।

---

अब हम html Tag को Target करेंगे और Font Family सेट करेंगे –

HTML Code :

html {

  font-family: 'Roboto', sans-serif;

}

अब हम Wrapper Class को Target करेंगे।

HTML Code :

.wrapper {

  width: 1152px;

  margin: 0 auto;

}

• Width को 1152px रखा गया है।
• margin: 0 auto; से यह Horizontally Center हो जाएगा।

---

अब हम Top Navigation Bar (top-nav) को Style करेंगे।

VS Code में आप Ctrl + / दबाकर Comment लिख सकते हैं।
तो हम Comment लिखेंगे –

/* Top Nav */

अब .top-nav को Target करेंगे –

HTML Code :

.top-nav {

  position: fixed;   /* Page Scroll होने पर भी ऊपर रहेगा */

  left: 0;

  right: 0;

  background: #222;  /* Dark Background */

  padding: 4px 0;    /* ऊपर-नीचे 4px Padding */

  z-index: 200;      /* सबसे ऊपर दिखाने के लिए */

}

इससे Navigation Bar हमेशा Page के Top पर Fix रहेगा।

---

👉 अब तक हमने CSS में:

• Universal Reset किया,
• Font Family सेट किया,
• Wrapper को Center किया,
• Navigation Bar को Fix और Style किया। ✅

---

अब हम Top Nav के अंदर मौजूद Wrapper Division को Target करेंगे।

अगर आप HTML देखें तो Top Nav Division के अंदर एक Wrapper Class है।

इसको Flexbox से Layout देंगे –

HTML Code :

.top-nav .wrapper {

  display: flex;

  justify-content: space-between; /* Logo, Menu, Search अलग-अलग जगह पर */

  align-items: center;            /* Vertically Center */

}

👉 इससे Logo बाएँ, Menu Center में और Search Icon दाएँ चला जाएगा।

---

अब हमें Search Icon को Hover पर Clickable (Pointer Cursor) बनाना है –

HTML Code :

.top-nav .search-icon {

  cursor: pointer;

}

अगला काम है Navigation Menu Items को एक लाइन में लाना।

इसके लिए <ul> को Flex बना देंगे और Bullets हटा देंगे –

HTML Code :

.top-nav nav ul {

  display: flex;

  list-style: none;

}

---

अब Anchor Tags (<a>) को Style करेंगे –

HTML Code :

.top-nav nav ul li a {

  color: white;                 /* White Text */

  text-decoration: none;        /* Underline हटाना */

  margin: 0 20px;               /* Menu Items के बीच Gap */

  text-transform: uppercase;    /* Text को Capital Letters में बदलना */

  font-size: 14px;              /* Font Size */

}

👉 अब Navigation Bar में होगा:

• Left Side → Logo
• Center → Menu Items (Home, About, Contact, Privacy Policy)
• Right Side → Search Icon

और यह सब Properly Aligned और Styled होगा। ✅

---

अब हम Hero Section को Style करेंगे।

HTML में हमने देखा कि Hero Section के लिए एक Division है – header-wrapper।
तो सबसे पहले CSS में इसे Target करेंगे:

HTML Code :

.header-wrapper {

  max-width: 1152px;

  margin: 0 auto;         /* Center करना */

  background: black;      /* Background Color */

  height: 100vh;          /* पूरी Screen Height */

  display: flex;          /* Flex Layout */

}

👉 अब Text Content बाएँ और Image दाएँ दिखाई देगी।

---

Left और Right दोनों Sections को Equal Width देना

HTML Code :

.header-wrapper .hero-left,

.header-wrapper .hero-right {

  flex: 1; /* दोनों का Width बराबर */

}

---

Left Section को Vertically Center करना

HTML Code :

.header-wrapper .hero-left {

  align-self: center;

  padding-left: 100px;

}

---

Heading (Main Heading) Style

HTML Code :

.header-wrapper .hero h1.main-heading {

  color: #fcfcfc;

  font-family: 'Dancing Script', cursive;

  font-size: 64px;

}

---

Subheading Style

HTML Code :

.header-wrapper .hero p.main-subheading {

  color: #fcfcfc;

  font-size: 16px;

  margin-bottom: 24px;

}

---

Button Style

HTML Code :

a.btn {

  background: #ffe259;

  color: black;

  text-decoration: none;

  padding: 8px 24px;       /* ऊपर-नीचे 8px, दाएँ-बाएँ 24px */

  display: inline-block;

  font-size: 16px;

}

---

Navigation Menu में Extra Padding

HTML Code :

.top-nav .wrapper {

  padding: 0 32px;   /* Left-Right Padding */

}

---

👉 Optionally, आप Body का Background भी बदल सकते हैं –

HTML Code :

body {

  background: #333;

}

---

✅ अब आपका Header Section पूरा हो गया है –

• Navigation Bar (Logo, Menu, Search Icon)
• Hero Section (Heading, Subheading, Button, Image)

---