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 बनाना है।

• हमारी वेबसाइट का Content एक Fixed Width में रहेगा।
• Background (जैसे Navigation Bar और Footer) 100% चौड़ाई लेगा, लेकिन अंदर का Content Fix Width में होगा।

Design में आप देख सकते हैं कि हमारी Website का एक Fixed Width है।
मतलब अगर Screen Size ज्यादा भी हो, तो Content उसी Width में रहेगा।
Footer में भी Content का Width Fixed है लेकिन Background पूरा (100% Width) है।
Navigation Bar का Background भी 100% Width लेगा लेकिन Content अंदर Fixed Width में होगा।

2. Wrapper Class

इसके लिए हमें HTML में एक Wrapper Class बनानी होगी।

• Wrapper को CSS में Maximum Width देंगे।
• जिससे Content उस Width से बाहर नहीं जाएगा।

3. Navigation Bar Structure

HTML में Body के अंदर हम सबसे पहले एक Division बनाएँगे, जिसे Class देंगे – top-nav। यह हमारी Navigation Menu का Container होगा।:

1. <div class="top-nav"> → Navigation Menu का Container
2. इसमें Background Color रहेगा और इसी के अंदर Navigation Menu की सारी चीजें होंगी।

फिर इसके अंदर हम एक Division बनाएँगे जिसकी Class होगी – wrapper।

• <div class="wrapper"> → Content Fixed Width में रखने के लिए

हम इस Wrapper Class को बार-बार Use कर सकते हैं।
जहाँ भी Wrapper Use करेंगे, वहाँ Content Fixed Width में रहेगा।

4. Logo जोड़ना

अब सबसे पहले हमें Logo बनाना है। इसके लिए एक Division बनाएँगे जिसकी Class होगी – logo-icon। इसमें एक Anchor Tag बनाएँगे (अभी Link के लिए सिर्फ # डाल देंगे, बाद में बदलेंगे)।
Anchor Tag के अंदर हम Image डालेंगे। Image Source (src) में हम अपने Logo का Path देंगे।

हमारे पास Images Folder के अंदर logo.png है।
तो हम लिखेंगे – images/logo.png।

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

अब जब हम Browser में इसे खोलेंगे तो हमारा Logo दिखाई देगा।

पिछली Post में मैंने बताया था कि हम एक Extension यूज़ कर रहे हैं जिसका नाम है – Live Server।

---

अब हम अपने प्रोजेक्ट को Live Server में ओपन करेंगे।

इसके लिए आप फाइल पर राइट क्लिक करके "Open with Live Server" पर क्लिक करें।

अब आप देखेंगे कि हमारी वेबसाइट ब्राउज़र में दिखाई दे रही है और Logo भी सही से दिख रहा है।

5. Navigation Items (Menu)

अगला काम है Navigation Items जोड़ना।
हमारे पास Menu Items होंगे – Home, About, Contact और Privacy Policy।

• इसके लिए Logo वाली Division के बाहर हम एक<nav> Element बनाएँगे।
• इसके अंदर एक Unordered List <ul> और उसमें  List Items <li> होंगे।
• हर List Item <li> के अंदर एक Anchor Tag (<a>) होगा।
• href में अभी हम # डाल देंगे। 
• पहला Link होगा Home।
• फिर बाकी Items होंगे – About, Contact और Privacy Policy।

तो हम एक <li> बनाकर उसे Copy करके तीन बार Paste कर देंगे और Text बदल देंगे।
इस तरह अब हमारे पास Logo और Navigation Menu Items दोनों हो जाएँगे।

6. Search Icon जोड़ना

अब हमें एक Search Icon भी चाहिए। इसके लिए <nav> के बाहर एक और Division बनाएँगे और Class देंगे – search-icon। इसमें एक <img> डालेंगे। Image Source (src) में हम Search Icon का Path लिखेंगे।
हमारे पास images/search-icon.png नाम की फाइल है, तो उसे डाल देंगे।

• <nav> के बाद <div class="search-icon"> बनाएँ।
• इसके अंदर <img> डालें → images/search-icon.png

अब Website में Logo, Navigation Menu और Search Icon – तीनों दिखाई देंगे।
लेकिन Search Icon का रंग White है और Background भी White है, इसलिए अभी यह साफ़ दिखाई नहीं देगा।

7. Hero Section

अगला काम है Hero Section बनाना।
Hero Section में बाईं ओर Heading, Subheading और Button होगा,
और दाईं ओर एक Image होगी।

• इसके लिए <div class="top-nav"> खत्म होने के बाद हम एक <header> Tag बनाएँगे।
• इसके अंदर एक Division बनाएँगे जिसकी Class होगी – header-wrapper। 
• <div class="header-wrapper">
• इसमें एक और Division होगा – hero।
• <div class="hero">

Hero के अंदर दो Division होंगे:

• hero-left (Heading, Subheading और Button के लिए)
• hero-right (Image के लिए)

Left Side (hero-left):

• <h1> Tag (Class: main-heading) → Text: Live Blogger
• <h1 class="main-heading">Live Blogger</h1>
• <p> Tag (Class: main-subheading) → Text: Learn to design websites
• <p class="main-subheading">Learn to design websites</p>
• <a> Tag (Class: btn) → Text: Learn More
• <a class="btn" href="#">Learn More</a>

Right Side (hero-right):

• <img> Tag → Source: images/heroimage.png
• <img src="images/heroimage.png" alt="Hero Image">

अब हमारी Website के Header Section का HTML पूरा हो गया है।
इसमें Logo, Navigation Menu, Search Icon, Hero Heading, Subheading, Button और Image सब आ चुका है। ✅

---

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

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

* {
  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 {
  font-family: 'Roboto', sans-serif;
}

---

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

.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 करेंगे –

.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 देंगे –

.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) बनाना है –

.top-nav .search-icon {
  cursor: pointer;
}

---

अगला काम है Navigation Menu Items को एक लाइन में लाना।
इसके लिए <ul> को Flex बना देंगे और Bullets हटा देंगे –

.top-nav nav ul {
  display: flex;
  list-style: none;
}

---

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

.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 करेंगे:

.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 देना

.header-wrapper .hero-left,
.header-wrapper .hero-right {
  flex: 1; /* दोनों का Width बराबर */
}

---

Left Section को Vertically Center करना

.header-wrapper .hero-left {
  align-self: center;
  padding-left: 100px;
}

---

Heading (Main Heading) Style

.header-wrapper .hero h1.main-heading {
  color: #fcfcfc;
  font-family: 'Dancing Script', cursive;
  font-size: 64px;
}

---

Subheading Style

.header-wrapper .hero p.main-subheading {
  color: #fcfcfc;
  font-size: 16px;
  margin-bottom: 24px;
}

---

Button Style

a.btn {
  background: #ffe259;
  color: black;
  text-decoration: none;
  padding: 8px 24px;       /* ऊपर-नीचे 8px, दाएँ-बाएँ 24px */
  display: inline-block;
  font-size: 16px;
}

---

Navigation Menu में Extra Padding

.top-nav .wrapper {
  padding: 0 32px;   /* Left-Right Padding */
}

---

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

body {
  background: #333;
}

---

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

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

---