Create A Blogger Template From Scratch - Setting Up

यह हमारे Blogger Template Development Course का दूसरा सेक्शन है। इस सेक्शन में हम अपने डिज़ाइन के लिए सारी सेटिंग्स करेंगे। तो चलिए शुरू करते हैं।

सबसे पहले मैं आपको बताना चाहता हूँ कि हम इस प्रोजेक्ट में कौन-सा कोड एडिटर इस्तेमाल करेंगे।
हम एक एडिटर का इस्तेमाल करेंगे जिसका नाम है Visual Studio Code (VS Code)।

यह बिल्कुल फ्री है और आप इसे इस वेबसाइट से डाउनलोड कर सकते हैं:
👉 code.visualstudio.com

यह Windows, Mac OS और Linux—तीनों के लिए उपलब्ध है। आप अपने प्लेटफ़ॉर्म के अनुसार इसे डाउनलोड और इंस्टॉल कर सकते हैं, जैसे आप बाकी एप्लिकेशन इंस्टॉल करते हैं।

मैं काफी समय से VS Code इस्तेमाल कर रहा हूँ और मुझे यह बहुत पसंद है। इसमें कई सारे extensions (plugins) मिलते हैं जो डेवलपमेंट को आसान और तेज़ बना देते हैं।

VS Code Interface

जब आप इसे पहली बार खोलेंगे, तो आपको एक वेलकम स्क्रीन दिखाई दे सकती है।
एडिटर के बाएँ हिस्से में आपको कुछ आइकॉन मिलेंगे। इनमें से पहला है Explorer, जहाँ आपके प्रोजेक्ट की सारी फाइलें दिखाई देती हैं।

आप अपने प्रोजेक्ट को आसानी से ओपन कर सकते हैं:

• ऊपर मेन्यू में File पर क्लिक करें
• फिर Open Folder पर क्लिक करें
• अब जिस फ़ोल्डर में आपका प्रोजेक्ट सेव है, उसे ओपन करें

इसके बाद आपके प्रोजेक्ट की सारी फाइलें एडिटर के बाएँ तरफ दिखेंगी।

आप VS Code में नए files और folders भी बना सकते हैं, बस बाएँ तरफ दिए गए आइकॉन पर क्लिक करके।

Extensions in VS Code

VS Code और ज़्यादातर code editors की सबसे अच्छी बात यह है कि इनमें आप extensions इस्तेमाल कर सकते हैं।
Extensions का आइकॉन बाएँ साइडबार में मिलता है। यहाँ से आप अलग-अलग extensions को इंस्टॉल कर सकते हैं।

इस प्रोजेक्ट के लिए हम दो extensions का इस्तेमाल करेंगे:

1. Live Server
   यह आपके प्रोजेक्ट के लिए एक local development server बना देता है।
   जब भी आप कोई file सेव करेंगे, आपका वेबपेज अपने आप reload हो जाएगा।
   इससे बार-बार manually refresh करने की ज़रूरत नहीं रहती और development process तेज़ हो जाती है।

2. Prettier
   यह आपके code को automatically format कर देता है।
   यानी सही जगह पर tabs और spaces जोड़ देता है ताकि code साफ-सुथरा और आसानी से समझ में आए।
   जब भी आप save करेंगे, code अपने आप format हो जाएगा।

VS Code में एक और extension पहले से मौजूद होता है जिसे Emmet कहते हैं।
इससे आप कई तरह के shortcuts का इस्तेमाल करके बहुत तेज़ी से code लिख सकते हैं।

👉 उदाहरण:

• अगर आपको एक div बनाना है जिसकी class container है, तो आपको बस .container लिखकर Tab दबाना होगा, और div अपने आप बन जाएगा।
• .container + Tab → <div class="container"></div>
• अगर div में id="container" चाहिए, तो आप #container लिखकर Tab दबाएँ।
• #container + Tab → <div id="container"></div>
• इसी तरह अगर img टैग चाहिए, तो बस img लिखकर Tab दबाएँ। टैग अपने आप बन जाएगा और basic attributes भी अपने आप भर जाएंगे, आपको बस details डालनी होंगी।
• img + Tab → <img src="" alt="">

इन extensions और shortcuts का इस्तेमाल करके आप coding को बहुत तेज़ और आसान बना सकते हैं।

तो यही code editor (VS Code) मैं इस पूरे course में इस्तेमाल करूँगा।

Images Setup

अब मैं आपको बताता हूँ कि मैं अपनी वेबसाइट के लिए images कहाँ से लेता हूँ।
एक बेहतरीन वेबसाइट है unsplash.com जहाँ से आप अपनी वेबसाइट के लिए free images डाउनलोड कर सकते हैं।

बस unsplash.com पर जाएँ, वहाँ सर्च बॉक्स में कोई भी शब्द लिखें, और आपको उससे जुड़ी ढेर सारी high-quality free images मिल जाएँगी।
मैंने इस कोर्स में जो भी images इस्तेमाल की हैं, वो सभी unsplash.com से ही ली गई हैं।

👉 अगर आप हमारे demo को देखेंगे, तो वहाँ दिखने वाली सभी images unsplash से ली गई हैं।

इसके अलावा, मैंने अपनी वेबसाइट पर कुछ icons भी इस्तेमाल किए हैं।
जैसे — labels का icon, search का icon और close (×) icon।
इन सभी के लिए मैंने Material Icons का इस्तेमाल किया है।

इसके लिए बस Google पर Material Icons सर्च करें और आपको एक वेबसाइट मिलेगी: material.io।
वहाँ आप अपनी ज़रूरत के हिसाब से icons सर्च कर सकते हैं।

👉 उदाहरण:

• अगर आप "label" सर्च करेंगे तो label से जुड़े icons दिखेंगे।
• अगर "menu" लिखेंगे तो menu के लिए कई icons मिल जाएँगे।

जब आपको कोई icon पसंद आ जाए, तो उस पर क्लिक करें और डाउनलोड कर लें।
आप चाहें तो PNG format में भी icon डाउनलोड कर सकते हैं।

इस प्रोजेक्ट के लिए मैंने एक फ़ोल्डर बनाया है जिसका नाम है custom blogger template।
उसके अंदर एक और फ़ोल्डर है images, जहाँ मैंने सारी images और icons रखे हैं।

मैं ये सारी images आपके लिए डाउनलोड के लिए उपलब्ध कराऊँगा ताकि आप भी आसानी से code को follow कर सकें।

Fonts Setup

अब मैं आपको उन fonts के बारे में बताता हूँ जो मैंने इस वेबसाइट के लिए इस्तेमाल किए हैं।
मैंने Google Fonts का इस्तेमाल किया है और दो fonts चुने हैं –

1. Roboto – इसमें हम Regular और Bold/Black version इस्तेमाल करेंगे।
   इसके लिए "Select this style" पर क्लिक करना होता है।

2. Dancing Script – इसे हम headings के लिए इस्तेमाल करेंगे।
   इसके Bold version को select करना है।

जब आप fonts select कर लेते हैं, तो ऊपर एक option आता है – “View your selected families”।
उस पर क्लिक करेंगे तो आपके चुने हुए सभी fonts दिखाई देंगे।
अब "Embed" पर क्लिक करें।
यहाँ आपको fonts अपनी वेबसाइट में add करने का तरीका मिलेगा।
आप चाहे तो HTML में <link> tag कॉपी करके डाल सकते हैं,
या फिर CSS में @import का इस्तेमाल करके भी fonts जोड़ सकते हैं।

---

अब Color Selection

वेबसाइट के लिए colors चुनने के लिए आप coolors.co वेबसाइट इस्तेमाल कर सकते हैं।
"Start the Generator" पर क्लिक करें और फिर Space Bar दबाएँ।
हर बार नए color combinations दिखेंगे।
अगर आपको कोई color अच्छा लगे, तो "Lock" कर दें।
बाकी colors बदलते रहेंगे जब तक आप perfect combination ना चुन लें।

आप "Explore" में जाकर trending color palettes भी देख सकते हैं।

हमारे इस प्रोजेक्ट में हमने simple colors लिए हैं –

• Blue
• Yellow
• Black
• White

---

अब Project को VS Code में Open करना

अपने project folder पर right click करें और “Open with Code” चुनें।
या फिर VS Code के अंदर File → Open Folder से भी खोल सकते हैं।

Project folder में आपको images नाम का folder मिलेगा जिसमें सारी images रखी हुई हैं।

---

अब जरूरी Files बनाएँ

हमें तीन files चाहिए –

1. index.html
2. style.css
3. main.js

VS Code में new file बनाकर इन्हें create करें।

---

HTML File Setup

index.html file खोलें।
VS Code में Emmet extension पहले से होता है, तो सिर्फ ! लिखकर Tab दबाएँ।
Basic HTML structure अपने आप आ जाएगा।

अब CSS file को link करें:

<link rel="stylesheet" href="style.css">

और body tag के अंदर JS file link करें:

<script src="main.js"></script>

---

Fonts को HTML में Add करना

Google Fonts से जो <link> code आपने copy किया है,
उसे <title> tag के नीचे paste करें।

इस तरह हमारे पास दो fonts होंगे – Dancing Script और Roboto
जिनके weights होंगे 400 और 900।

---

बस! अब हमारा project पूरी तरह setup हो चुका है।
अगले step में हम website design करना शुरू करेंगे।

अगर आपको कोई doubt हो तो comment कर सकते हैं।