केवल HTML और CSS का उपयोग करके एक बुनियादी उत्तरदायी वेबसाइट बनाएं
स्क्रैच से HTML वेबसाइट बनाने के लिए, आपको वेबसाइट बनाने वाली HTML, CSS और JavaScript फ़ाइलों को बनाने के लिए एक टेक्स्ट एडिटर का उपयोग करना होगा। यहाँ एक मूल HTML वेबपेज का एक उदाहरण दिया गया है:
यहां हम VS कोड का उपयोग कर रहे हैं, फाइल मेन्यू से नई फाइल बनाएं फिर फाइल को आप जिस नाम से चाहें सेव करें, उदाहरण के लिए हम फाइल को "example.html" के रूप में सेव करेंगे, यहां ".html" फाइल एक्सटेंशन महत्वपूर्ण है यदि आप चाहते हैं एक सादे HTML फ़ाइल के रूप में सहेजने के लिए।
वीएस कोड का उपयोग करते समय एम्मेट संक्षेप का उपयोग करना बहुत आसान हो सकता है। इसमें कई एम्मेट संक्षिप्ताक्षर शामिल हैं ताकि आप html स्निपेट्स की मूल शैली को लागू करने के लिए उपयोग कर सकें।
// Type the exclamation mark "!" and then some emmet abbreviation will appear
// Press Enter It will automatically add the entire snippet for you
या आप बस नीचे से कोड कॉपी कर सकते हैं।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
अब आपने वेब पेज की मूल संरचना को सफलतापूर्वक जोड़ लिया है। अगले चरण पर आएं, अब हम उस पृष्ठ पर शीर्षलेख जोड़ेंगे जहां आप ब्रांड नाम, मेनू आइटम इत्यादि जोड़ सकते हैं।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<header>
<a href="#">Brand Name</a>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</header>
</body>
</html>
जैसा कि आप देख सकते हैं कि यह भद्दा दिखता है, अब हमें इसमें कुछ स्टाइल जोड़ना होगा। अब आपके मन में एक सवाल होगा कि अपने पेज में Style कैसे Add करें? मैं आपको इसके लिए गाइड करता हूं, आपके पास अपने पेज में स्टाइल जोड़ने के लिए कई विकल्प हैं जैसे प्योर सीएसएस, टेलविंड सीएसएस, बूटस्ट्रैप आदि का उपयोग करना।
इस ट्यूटोरियल में मैं शुद्ध CSS पर ध्यान केंद्रित करूँगा, शुद्ध CSS में आपके पास अपने HTML में CSS को शामिल करने के लिए तीन विकल्प हैं। हम यहां तीनों विकल्पों पर चर्चा करेंगे:
आपके एचटीएमएल कोड, इनलाइन सीएसएस, आंतरिक सीएसएस या एम्बेडेड सीएसएस और बाहरी सीएसएस में सीएसएस जोड़ने के लिए सभी तीन पैटर्न हैं।
सबसे पहले इनलाइन सीएसएस के बारे में बात करते हुए, इनलाइन सीएसएस तत्व के शुरुआती टैग में "शैली" विशेषता का उपयोग करके अलग-अलग HTML तत्वों में शैलियों को जोड़ने का एक तरीका है। "शैली" विशेषता का उपयोग करके जोड़ी गई CSS शैलियाँ केवल उस विशिष्ट तत्व पर लागू होती हैं और पृष्ठ पर किसी अन्य तत्व को प्रभावित नहीं करती हैं।
<body>
<header>
<a href="#">Brand Name</a>
<ul>
<li style="color: red;">menu1</li> // here we have added inline CSS to style an element
<li>menu2</li>
<li>menu3</li>
</ul>
</header>
</body>
अब आंतरिक CSS में आ रहे हैं, आंतरिक CSS HTML दस्तावेज़ के मुख्य भाग के भीतर CSS शैलियों को परिभाषित करके वेबपेज में शैलियों को जोड़ने की एक विधि को संदर्भित करता है। इसे एम्बेडेड सीएसएस के रूप में भी जाना जाता है।
आंतरिक सीएसएस में, एचटीएमएल दस्तावेज़ के प्रमुख में एक 'style' तत्व जोड़ा जाता है और इसमें सभी 'li' तत्वों के लिए 'color' गुण को 'लाल' पर सेट करने के लिए एक सीएसएस नियम होता है।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
// set the "color" property to "red" for all "li" elements
<style>
li{
color: red;
}
</style>
</head>
<body>
<header>
<a href="#">Brand Name</a>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</header>
</body>
</html>
बाहरी CSS फ़ाइल का उपयोग करना सर्वोत्तम अभ्यास माना जाता है क्योंकि यह आपको एक ही स्थान पर संपूर्ण वेबसाइट के लिए शैलियों को बनाए रखने और अद्यतन करने की अनुमति देता है। आप एक वेबसाइट के कई पेजों के लिए एक ही सीएसएस फ़ाइल का उपयोग कर सकते हैं, इस तरह आपको केवल सीएसएस फ़ाइल में बदलाव करना होगा, और यह उन सभी पेजों में दिखाई देगा जो इससे लिंक हैं। यह केवल एक भिन्न CSS फ़ाइल से लिंक करके किसी वेबसाइट के संपूर्ण डिज़ाइन की अदला-बदली करना भी आसान बनाता है। इसके अतिरिक्त, बाहरी सीएसएस फ़ाइलें ब्राउज़र द्वारा कैश की जा सकती हैं, जो आपकी वेबसाइट के प्रदर्शन में सुधार कर सकती हैं।
फ़ाइल मेनू से नई फ़ाइल बनाएं फिर फ़ाइल को आप जिस भी नाम से चाहें सहेज लें, उदाहरण के लिए हम फ़ाइल को "style.css" के रूप में सहेजेंगे, यहाँ ".css" फ़ाइल एक्सटेंशन शुद्ध CSS फ़ाइल को सहेजने के लिए महत्वपूर्ण है।
अब नई बनाई गई CSS फ़ाइल को HTML फ़ाइल से लिंक करें, जिसके लिए आपको कोड की इस पंक्ति <link rel="stylesheet" href="style.css"> को HTML दस्तावेज़ के शीर्ष पर जोड़ना चाहिए।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
// added external css
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<a id="brand_name" href="/">Brand Name</a>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</header>
</body>
</html>
यहाँ पर हमने 'a' एलिमेंट को "id" असाइन किया है क्योंकि हम हेडर में अन्य 'a' एलिमेंट का उपयोग करेंगे, इसलिए इस एलिमेंट को "id" असाइन करना महत्वपूर्ण है। "/" रूट फ़ोल्डर का प्रतिनिधित्व करता है जिसका अर्थ है कि जब उपयोगकर्ता ब्रांड नाम पर क्लिक करता है तो यह आपको होम पेज पर वापस ले जाएगा।
आंतरिक सीएसएस के साथ पहले के समान परिणाम प्राप्त करने के लिए बाहरी सीएसएस में कोड की निचली पंक्ति जोड़ें।
li{
color: red;
}
विकास चरण के दौरान आपको कुछ वीएस कोड एक्सटेंशन की आवश्यकता होती है जो आपकी उत्पादकता बढ़ा सकते हैं और विकास चरण में मदद कर सकते हैं। इनमें से कुछ हैं, इंटेलिकोड प्रकाशक माइक्रोसॉफ्ट, जावास्क्रिप्ट और टाइपस्क्रिप्ट नाइटली प्रकाशक माइक्रोसॉफ्ट, लाइव सर्वर प्रकाशक ऋत्विक डे। ये सभी डेवलपर के लिए बहुत ही बुनियादी और सामान्य हैं।
आपको वीएस कोड के निचले रिबन पर "गो लाइव" बटन दिखाई देगा, उस पर क्लिक करें, यह आपके लिए स्थानीय सर्वर बनाएगा और ब्राउज़र में HTML फ़ाइल खोलेगा। हर बार जब आप HTML फ़ाइल और उनकी लिंक की गई फ़ाइलों को सहेजते हैं तो यह आपके पृष्ठ को ब्राउज़र में ताज़ा कर देगा ताकि आप हमेशा दस्तावेज़ में किए गए वास्तविक समय में परिवर्तन देख सकें।
अब हम बाहरी CSS का उपयोग करके तत्व डिज़ाइन को अनुकूलित कर सकते हैं। चलिए अपने शीर्षलेख भाग को स्टाइल करने के साथ आगे बढ़ते हैं।
पहले वाइल्डकार्ड तत्व का उपयोग करके संपत्ति को रीसेट करें *{}, अलग-अलग ब्राउज़र अलग-अलग डिफ़ॉल्ट मार्जिन और पैडिंग का उपयोग करते हैं, जिससे साइटें मार्जिन या पैडिंग से अलग दिखती हैं। * का अर्थ है "सभी तत्व", इसलिए इसके साथ हम सभी तत्वों पर लागू होने वाले मार्जिन और अन्य संपत्तियों का निर्धारण कर सकते हैं।
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
scroll-behavior: smooth;
}
यहां हमने मार्जिन और पैडिंग को 0 पर सेट किया है, फोंट और स्क्रॉलिंग व्यवहार सेट किए गए हैं। यहां हम उपयोग करते हैं 'box-sizing: border-box;', मैं आपको बताता हूं कि हम कोड की इस पंक्ति का उपयोग क्यों करते हैं। इसके बिना, डिफ़ॉल्ट रूप से, तत्व की चौड़ाई और ऊंचाई की गणना निम्नानुसार की जाती है:
width + padding + border = actual width of an element
height + padding + border = actual height of an element
बॉक्स-साइज़िंग गुण हमें तत्व की कुल चौड़ाई और ऊँचाई में पैडिंग और बॉर्डर शामिल करने की अनुमति देता है। यदि आप 'box-sizing: border-box;' किसी तत्व पर सेट करते हैं, तो पैडिंग और बॉर्डर को चौड़ाई और ऊंचाई में शामिल किया जाता है।
अब जब हम अपने हेडर को मानक मेनू हेडर की तरह दिखने के लिए स्टाइल कर रहे हैं, तो इसके लिए हमें सभी हेडर तत्वों को एक पंक्ति में व्यवस्थित करना होगा और उनके बीच कुछ मार्जिन रखना होगा। आइए देखें कि हम डिज़ाइन को कैसे बदल रहे हैं।
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Verdana, Geneva, Tahoma, sans-serif;
scroll-behavior: smooth;
}
body{
position: relative;
}
header{
width: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
padding: 10px;
background-color: purple;
color: white;
}
header ul{
display: inline-flex;
flex-direction: row;
list-style: none;
margin-left: auto;
margin-top: auto;
}
header ul li{
margin-left: 20px;
cursor: pointer;
}
header #brand_name{
color: white;
text-decoration: none;
font-size: xx-large;
}
यहां हम 'position: relative;' सभी तत्वों को शरीर के भीतर उसकी सामान्य अवस्था के सापेक्ष स्थित करते थे।
हम शीर्षलेख की चौड़ाई को 100% पर सेट करते हैं ताकि यह स्वचालित रूप से डिवाइस की चौड़ाई का 100% कवर कर सके। अब आते हैं दूसरे गुण पर, 'display: inline-flex;' यह शीर्षलेख के अंदर सभी मूल तत्वों को सीधे एक क्षैतिज रेखा में व्यवस्थित करेगा।
साथ ही हम CSS को Element से Row, column, Reverse Row, Reverse column आदि को व्यवस्थित करने के लिए कह सकते हैं। यदि हम मोबाइल में इस पृष्ठ का उपयोग करते हैं जहां डिवाइस की चौड़ाई पीसी की तुलना में कम है, तो यहां 'flex-wrap: wrap;' नीचे दिए गए बाल तत्व को समायोजित किया जाएगा, इसलिए इस मामले में 'ul' तत्व को ब्रांड नाम के नीचे व्यवस्थित किया जाएगा।
हमने 'padding: 10px;' हेडर तत्वों को सभी तरफ से एक मानक पैडिंग प्रदान करने के लिए उपयोग किया है। गुण 'background-color: purple;' पृष्ठभूमि को बैंगनी रंग देंगे, गुण 'color: white;' तत्व को छोड़कर सभी शीर्षलेख तत्वों का फ़ॉन्ट रंग सफेद में बदल जाएगा 'a'। हमें व्यक्तिगत रूप से 'a' तत्व का रंग बदलना होगा।
'flex-wrap: wrap;' यदि आपका मेनू आइटम बहुत अधिक है, तो हम संपत्ति में भी उपयोग कर सकते हैं 'header ul', इसलिए यह मेनू तत्व को उसकी मौजूदा लाइन से एक-एक करके नीचे की ओर धकेल देगा। आपने प्रत्येक मेनू तत्व से पहले एक डॉट आइकन देखा है 'list-style: none;', मेनू तत्वों से डॉट आइकन को हटाने के लिए गुण का उपयोग करें। यहाँ हमने "margin-left: auto;" हेडर के दाहिने सिरे पर सभी मेनू तत्वों को व्यवस्थित करने के लिए संपत्ति का उपयोग किया है। इस संपत्ति "margin-left: auto;" का उपयोग मेनू तत्वों को हेडर तत्व में नीचे व्यवस्थित करने के लिए किया गया है।
अब कोड की अगली लाइन पर आते हैं जहां हमने एलिमेंट 'margin-left: 20px;' में प्रॉपर्टी का इस्तेमाल किया था। 'header ul li' यह प्रत्येक 'li' तत्व को 20 पिक्सेल का बायाँ मार्जिन प्रदान करेगा। गुण "cursor: pointer;" कर्सर व्यवहार को बदल देगा, जब भी हम माउस कर्सर को इन तत्वों पर घुमाएंगे, कर्सर तीर सूचक के बजाय एक हाथ आइकन दिखाएगा। अगला वह 'header #brand_name' तत्व है जहां हम 'color: white' ब्रांड नाम के फ़ॉन्ट रंग को सफेद में बदलते थे, संपत्ति "text-decoration: none;' ब्रांड नाम से रेखांकित को हटा देगी। अगली संपत्ति 'font-size: xx-large;' यह है कि इससे फ़ॉन्ट का आकार बड़ा हो जाएगा।
अब हमारे मेनू पीसी के साथ-साथ मोबाइल पर भी काम कर रहे हैं, यहाँ हमने वर्किंग मेनू के साथ हेडर वाले हिस्से को पूरा कर लिया है। बहुत खूब!!! अद्भुत। अगला आपके सामग्री क्षेत्र पर काम करना है। यह इस बात पर निर्भर करता है कि आप इस सेक्शन को कैसे मैनेज करना चाहते हैं, एक सिंगल बॉडी, 2 सेक्शन या 3 सेक्शन आपकी पसंद है। मैं 2 अनुभाग सामग्री क्षेत्र पर ध्यान केंद्रित करूँगा, इससे आपको यह समझने में मदद मिलेगी कि आप एक एकल, या एकाधिक अनुभाग सामग्री क्षेत्र कैसे बना सकते हैं।
अब हमने हेडर एलिमेंट के बाद और क्लोजिंग बॉडी टैग से पहले कुछ एलिमेंट जोड़े हैं, बस नीचे लिखे कोड पर एक नज़र डालें।
<section id="container">
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nulla nunc, fringilla at nulla nec,
elementum faucibus eros. Nunc a venenatis nisi, nec suscipit tellus. Sed est ipsum, finibus id porta vitae,
eleifend sed sapien. Quisque libero dolor, porttitor ut massa quis, fermentum facilisis enim. Maecenas in
ligula sit amet augue ultrices dapibus eget ut ligula. Nullam viverra risus ante, at dapibus tortor lacinia
sit amet. Vestibulum sem leo, condimentum at augue et, pulvinar ultrices metus.</p>
</main>
<aside>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nulla nunc, fringilla at nulla nec,
elementum faucibus eros. Nunc a venenatis nisi, nec suscipit tellus. Sed est ipsum, finibus id porta vitae,
eleifend sed sapien. Quisque libero dolor, porttitor ut massa quis, fermentum facilisis enim. Maecenas in
ligula sit amet augue ultrices dapibus eget ut ligula. Nullam viverra risus ante, at dapibus tortor lacinia
sit amet. Vestibulum sem leo, condimentum at augue et, pulvinar ultrices metus.</p>
</aside>
</section>
<footer>
<ul>
<li><a href="/">Home</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#policy">Policy</a></li>
</ul>
<hr>
<p>© Your Brand Name. All right reserved.</p>
</footer>
हमने वह 'section' तत्व बनाया है जिसमें दो बाल तत्व बनाए गए हैं अर्थात 'main' और 'aside'। "मुख्य" के साथ-साथ "एक तरफ" ने 'p' तत्व को उनके बच्चे के रूप में बनाया है और यहां संक्षिप्त पाठ जोड़ा है, हमने 'section' सीएसएस में उपयोग करने के लिए एक आईडी प्रदान की है।
साथ ही हमने पादलेख भी बनाया है जहां हमने कुछ क्लिक करने योग्य लिंक जोड़े हैं। उसके बाद इसे बेहतर दिखाने के लिए एक क्षैतिज पंक्ति बनाई जाती है। अंत में हमने कॉपीराइट संदेश जोड़ा, आप अपनी आवश्यकता के अनुसार अन्य चीजें भी जोड़ सकते हैं।
अब CSS भाग पर वापस आते हुए, यहाँ हमें अपने कोड में कुछ स्टाइल जोड़ने की आवश्यकता है। अपनी CSS फ़ाइल में कोड की निचली पंक्ति जोड़ें।
#container{
width: 100%;
min-height: 80vh;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
padding: 20px;
}
main{
width: 70%;
margin-left: auto;
margin-right: auto;
}
aside{
width: 25%;
margin-left: auto;
margin-right: auto;
}
p{
text-align: justify;
text-justify: inter-word;
line-height: 150%;
}
@media screen and (max-width: 600px){
main{
width: 100%;
}
aside{
width: 100%;
margin-top: 20px;
}
}
footer{
padding: 10px;
background-color: darkgray;
}
footer ul{
display: flow-root;
list-style: none;
text-align: center;
}
footer ul li{
display: inline-flex;
}
hr{
margin: 10px 0;
}
हम डिवाइस की पूरी चौड़ाई को 100% तक कवर करने के लिए आईडी में डिफ़ॉल्ट चौड़ाई जोड़ते '#container' हैं, अब "न्यूनतम-ऊंचाई" को "80 वीएच" पर सेट किया गया है, जो कि न्यूनतम ऊंचाई है जिसे हम सेट करते हैं क्योंकि हम नहीं चाहते हैं जब पृष्ठों में कम सामग्री हो तो पाद ऊपर जाना चाहिए। "वीएच" का मतलब लंबवत ऊंचाई है, "80 वीएच" का मतलब लंबवत ऊंचाई का 80% है।
अगला 'display' गुण है, 'flex-direction' और 'flex-wrap', हमने इन गुणों को पहले कवर किया था, इसलिए हम इसकी गहराई में नहीं जा रहे हैं। यहां बेहतर दिखने के लिए हमने कंटेनर के चारों ओर कुछ पैडिंग प्रदान की है। अब हम "#container" में दो भाग चाहते हैं, इसके लिए हमने "मुख्य" को कुल चौड़ाई का 70% और "अलग" को 25% प्रदान किया। हम दो तत्वों के बीच कुछ रिक्त स्थान के लिए 5% का उपयोग कर रहे हैं। रिक्त स्थान के समान वितरण के लिए हम "मार्जिन-लेफ्ट" और "मार्जिन-राइट" गुणों को "ऑटो" पर सेट करते हैं।
तत्व के गुण 'text-align' और 'text-justify' गुण 'p', इसका उपयोग टेक्स्ट में समान रूप से मार्जिन वितरित करने के लिए किया जाता है। इस तरह से दस्तावेज़ साफ, कुरकुरे किनारों वाला दिखता है ताकि यह और अधिक परिष्कृत दिखाई दे। हमने प्रत्येक पंक्ति के बीच कुछ स्थान प्रदान करने के लिए "रेखा-ऊँचाई" गुण का उपयोग किया।
अगली '@media' क्वेरी है, मीडिया क्वेरी का उपयोग मोबाइल अनुकूलित दृश्य के लिए किया जाता है। यदि हम मीडिया क्वेरी के बिना कोड का उपयोग करते हैं, तो पृष्ठ के तत्व 'main' और 'aside' तत्व सिकुड़ जाते हैं और बदसूरत दिखते हैं। बेहतर देखने के लिए हम "मुख्य" तत्व के नीचे "अलग" तत्व चाहते हैं और दोनों 100% चौड़ाई का उपयोग करेंगे, इसलिए हम "मुख्य" तत्व के कुछ गुणों और "अलग" तत्व का उपयोग करते हुए बदलते हैं।
अब जब हम अपने फुटर को स्टाइल करने के लिए आगे बढ़ रहे हैं, तो यहां "पैडिंग" का उपयोग सभी पक्षों से अतिरिक्त रिक्त स्थान के लिए किया जाता है और फ़ुटर में पृष्ठभूमि रंग जोड़ता है।
'footer ul' में , 'display: flow-root;' का उपयोग किया जाता है इसका मतलब है कि तत्व एक ब्लॉक तत्व बॉक्स उत्पन्न करता है जो एक नया ब्लॉक स्वरूपण संदर्भ स्थापित करता है, यह परिभाषित करता है कि स्वरूपण रूट कहाँ है। गुण प्रत्येक तत्व 'list-style' से डॉट प्रतीक को हटाते हैं । 'li' अगला 'text-align' गुण है, इसका उपयोग तत्व को केंद्रित करने के लिए किया जाता है।
आपने पहले अगले गुण 'footer ul li' का उपयोग किया है, इसमें तत्व को क्षैतिज रेखा में व्यवस्थित करने के लिए उपयोग किया जाता है। अंतिम 'hr' गुणों में 10 पिक्सेल का शीर्ष-निचला मार्जिन होता है और बाएँ-दाएँ मार्जिन 0 होता है क्योंकि हम अतिरिक्त क्षैतिज मार्जिन नहीं चाहते हैं।
अब हमने HTML और CSS का उपयोग करके एक साधारण वेबसाइट बनाई है। यदि आप कुछ गतिशील सुविधाएँ और कुछ क्लिक करने योग्य बटन आदि चाहते हैं, तो हमें जावास्क्रिप्ट को भी शामिल करना होगा। अगले ट्यूटोरियल में हम चर्चा करेंगे कि वेबसाइट में जावास्क्रिप्ट का उपयोग करके डायनामिक फीचर कैसे जोड़ें।
यदि आपको यह ट्यूटोरियल उपयोगी लगता है, तो कृपया इसे दूसरों के साथ साझा करने पर विचार करें। ♥
जैसा कि आप देख सकते हैं, स्क्रैच से अपनी खुद की उत्तरदायी वेबसाइट बनाना मुश्किल नहीं है, भले ही आपके पास कोई तकनीकी कौशल न हो, फिर भी आप इसे कर सकते हैं। यदि आप इसी तरह के विषयों या किसी अन्य विषय पर अधिक ट्यूटोरियल चाहते हैं, तो कृपया बेझिझक मुझसे इन सोशल मीडिया प्लेटफॉर्म पर पूछें।
यदि आपको यह ब्लॉग उपयोगी लगता है, तो कृपया मुझे एक कॉफी खरीदने पर विचार करें। 
