Franchise Inquiry Image

🚀 7 Days. Zero Cost. Career-Boosting Skills - Job Point

Join our 7-day free classes and take the first step toward a successful career! Explore in-demand skills like Web Development, Digital Marketing, SEO, Cybersecurity, and more — absolutely free. Limited seats available, register now!

Register Now
Join Job Point and Learn In-Demand Skills

Register Now for Career-Focused Training

Fill out the form to enroll in top training programs like Web Development, Digital Marketing, SEO, and Cybersecurity. Get certified, get skilled, and get hired!

Welcome To Job-Point

✨ “Design is not just what it looks like and feels like. Design is how it works.” - Steve Jobs

हमें उम्मीद है कि यह यात्रा आपके करियर में एक नया अध्याय जोड़ेगी। चलिए एक बेहतरीन डिज़ाइनर बनने की दिशा में अपना सफ़र शुरू करते हैं!

Job-Point में आपका हार्दिक स्वागत है – एक अग्रणी IT ट्रेनिंग और स्किल डेवेलपमेंट प्लेटफ़ॉर्म, जो छात्रों और प्रोफेशनल्स को डिजिटल दुनिया में सफल करियर की ओर मार्गदर्शन करता है। यहाँ आपको मिलेंगे Industry-Relevant Courses, Certificates, Real Projects, और 100% Job Assistance। हमारा उद्देश्य हर छात्र को सक्षम बनाना है ताकि वे Web Designing, Development, Digital Marketing, Python, React JS जैसे क्षेत्रों में एक्सपर्ट बन सकें।

🚀 Learn – Build – Get Hired

🏆 हमारा विज़न:

हर शहर, कस्बे और गाँव तक गुणवत्तापूर्ण आईटी शिक्षा पहुँचाना और भारत के हर युवा को डिजिटल रूप से सक्षम बनाना।

🛠️ हमारी सेवाएं:
  • 💻 ऑनलाइन और ऑफलाइन कोर्सेस (Web Designing, Web Development, Digital Marketing, आदि)
  • 📜 प्रमाणन (Certifications) – Industry-recognized certificates
  • 🧪 रियल-वर्ल्ड प्रोजेक्ट्स – सीखें और साथ ही व्यावहारिक अनुभव प्राप्त करें
  • 👨‍🏫 मेन्टरशिप और नेटवर्किंग – अनुभवी IT प्रोफेशनल्स द्वारा मार्गदर्शन
  • 🎯 जॉब और इंटर्नशिप अवसर – जॉब पॉइंट प्लेटफ़ॉर्म के माध्यम से सीधा करियर कनेक्शन
🌟 Your Job Point Journey to Success
👉 Step 1: Join the Job Point Course

Start your career journey by enrolling in our comprehensive course.

👉 Step 2: Complete All Online Tasks

Build your foundational knowledge through interactive tasks and lessons.

👉 Step 3: Create a Basic Project

Apply what you've learned by building your first basic-level project.

👉 Step 4: Create an Advanced Project

Level up with a more complex project that showcases deeper skills.

👉 Step 5: Build a Real Project with Job Point

Work on a real-world project in collaboration with the Job Point team.

👉 Step 6: Earn Your Certificates

Receive certificates recognizing your skill development and achievements.

👉 Step 7: 6-Month Internship Certificate

Gain hands-on experience and earn a certificate for your internship period.

👉 Step 8: Job Point Helps Build Your Portfolio

Get support to create a professional portfolio that highlights your best work.

👉 Step 9: Get Ready for Job Interviews

Prepare for interviews with mock sessions, resume help, and coaching.

🎨 वेब डिज़ाइनिंग क्या है?

वेब डिज़ाइनिंग (Web Designing) एक प्रक्रिया है जिसमें वेबसाइट या वेब पेज को डिजाइन और विकसित किया जाता है। यह उपयोगकर्ता अनुभव (User Experience) और दृश्य अपील (Visual Appeal) को ध्यान में रखते हुए किया जाता है। वेबसाइट का लेआउट, रंग, टेक्स्ट, इमेज, यूजर इंटरफेस (UI) और अन्य विजुअल एलिमेंट्स डिज़ाइन किए जाते हैं। इसमें HTML, CSS, JavaScript और अन्य तकनीकों का उपयोग किया जाता है ताकि वेबसाइट सुंदर, उपयोग में आसान और रिस्पॉन्सिव हो।

📌 यहाँ क्या मिलेगा?
  • Theory + Practical सीखने का बैलेंस
  • Real Projects पर काम करने का मौका
  • Professional Portfolio तैयार करना
  • Internship और Placement Support
🎯 वेब डिज़ाइनिंग सीखने के फायदे
  • फ्रीलांसिंग से पैसे कमा सकते हैं।
  • डिजिटल मार्केटिंग में मदद मिलती है।
  • खुद की वेबसाइट बना सकते हैं।
  • IT सेक्टर में करियर बनाने के लिए अच्छा विकल्प है।
📌 वेब डिज़ाइनिंग आईटी करियर के लिए कितनी ज़रूरी है?
✅ आईटी (IT) इंडस्ट्री में वेब डिज़ाइनिंग बहुत महत्वपूर्ण है, क्योंकि:
  • आज हर बिज़नेस को एक वेबसाइट की जरूरत होती है।
  • वेब डिज़ाइनिंग के बिना अच्छी वेबसाइट नहीं बनाई जा सकती।
  • वेब डिज़ाइनर की मांग फ्रीलांसिंग और जॉब सेक्टर में बहुत ज्यादा है।
  • यह फ्रंटएंड डेवलपमेंट, UI/UX डिज़ाइन और डिजिटल मार्केटिंग में मदद करता है।
  • वर्क फ्रॉम होम और फ्रीलांसिंग के लिए एक बेहतरीन स्किल है।
📌 निष्कर्ष

वेब डिज़ाइनिंग एक क्रिएटिव और टेक्निकल स्किल है, जो डिजिटल दुनिया में बहुत उपयोगी है। अगर आप वेबसाइट बनाना सीखना चाहते हैं, तो HTML, CSS, और JavaScript से शुरुआत कर सकते हैं।

आज आप सीखेंगे की HTML क्या है?

(HTML Full Form: HyperText Markup Language)

HTML एक Markup Language है जिसका उपयोग वेबपेज और वेब एप्लिकेशन बनाने के लिए किया जाता है। यह किसी भी वेबसाइट की बेसिक संरचना (Structure) तैयार करता है।

🎯 HTML के बारे में मुख्य बातें:
  • फ्मार्कअप भाषा: HTML कोड टैग्स (< >) का उपयोग करता है जो वेब ब्राउज़र को बताते हैं कि कंटेंट को कैसे दिखाना है
  • वेब की नींव: सभी वेबसाइटें HTML पर आधारित होती हैं
  • सरल सीखना: HTML सीखना बहुत आसान है
  • स्टैटिक: HTML से बने पेज स्टैटिक (स्थिर) होते हैं, इन्हें डायनामिक बनाने के लिए JavaScript या PHP जैसी भाषाओं की जरूरत होती है
🧱 HTML का काम क्या है?

HTML यह बताता है कि आपकी वेबसाइट पर कौन-कौन से तत्व (Elements) होंगे,

जैसे:
  • हेडिंग्स (Headings)
  • पैराग्राफ (Paragraphs)
  • इमेज (Images)
  • लिंक्स (Links)
  • टेबल्स (Tables)
  • फॉर्म्स (Forms)
🧩 HTML की विशेषताएं:
विशेषता विवरण
सरल और सीखने में आसान Beginners के लिए सबसे आसान लैंग्वेज
वेब की आधारशिला हर वेबसाइट की नींव HTML से ही शुरू होती है
टैग-बेस्ड लैंग्वेज HTML टैग्स (जैसे <h1>,<p>, <img> आदि) का उपयोग करता है
ब्रााउज़र में रन होता है HTML को किसी भी ब्राउज़र में आसानी से देखा जा सकता है
🔧 HTML किनके साथ काम करता है?
  • CSS - डिज़ाइन और स्टाइलिंग के लिए
  • JavaScript - वेबपेज में इंटरएक्शन (जैसे बटन क्लिक) के लिए
  • PHP / Python / Node.js - Backend logic के लिए
कोई भी काम एक दिन में नहीं होता लेकिन एक दिन जरूर होगा।

वेब डिजाइनिंग सीखना भी ऐसा ही एक काम है। हर दिन मेहनत करते रहो और सारे मुश्किल टिप्स और ट्रिक्स आसान करते रहो।

Today Practical
  • body टैग में heading or paragraph tag लगाकर देखें
  • h1 से h6 तक सभी heading लिखें और सभी के निचे एक paragraph लिखें
  • कॉपी-पेस्ट न करें, कोड लिखकर सीखें (आज की कड़ी मेहनत कल की खुशी है)
  • कोड कैसे लिखें :- पहले टैग लिखें और फिर कंटेंट लिखें
  • <h1>कंटेंट</h1>
    <p>कंटेंट</p>
Practical

आज आप सीखेंगे की Boilerplate Code क्या है?

🎯 आज के टॉपिक्स:
  • ✅ Boilerplate में कौन-कौन सी चीज़ें शामिल होती हैं
  • ✅ <body> टैग के अंदर Heading or paragraph Tags कैसे लिखते हैं
🔸 1. Boilerplate Code क्या होता है?

Boilerplate Code का मतलब होता है एक बेसिक ढांचा (structure) जो हर HTML फाइल की शुरुआत में लिखा जाता है। इससे बार-बार एक जैसी चीज़ें दोहराने की जरूरत नहीं पड़ती।

🧱 Boilerplate Code में क्या-क्या शामिल होता है?
हिस्सा काम
<!DOCTYPE html> ब्राउज़र को बताता है कि यह HTML5 डॉक्यूमेंट है
<html lang="en"> HTML डॉक्यूमेंट की शुरुआत करता है और भाषा निर्धारित करता है
<head> मेटा जानकारी जैसे टाइटल, कैरेक्टर सेटिंग्स, स्टाइल आदि को रखता है
<meta charset="UTF-8"> सभी यूनिकोड अक्षरों को सपोर्ट करता है
<meta name="viewport" content="width=device-width, initial-scale=1.0"> मोबाइल रेस्पॉन्सिव व्यू के लिए
<meta http-equiv="X-UA-Compatible" content="IE=edge"> IE ब्राउज़र के लिए कम्पैटिबिलिटी
<title> ब्राउज़र टैब में दिखने वाला पेज का नाम सेट करता है
<body> वेबसाइट पर दिखाई देने वाला मुख्य कंटेंट यहाँ लिखा जाता है
🔸Heading, paragraph Tags कैसे लगाते हैं?

HTML में 6 तरह की headings होती हैं:

  • H1
  • H2
  • H3...4,5,6
📌 Notes:
  • H1 सबसे महत्वपूर्ण heading होती है
  • SEO (Search Engine Optimization) में H1 बहुत जरूरी होती है
  • एक पेज में एक ही H1 रखना अच्छा माना जाता है
Today Practical
  • Boilerplate लगाकर देखें
  • h1 से h6 तक सभी heading लिखें और सभी के निचे एक paragraph लिखें
Practical

आज आप सीखेंगे की HTML लिंक्स और इमेज tag कैसे लिखते हैं?

1-HTML लिंक्स (<a> टैग)-(एंकर) टैग

लिंक्स का उपयोग एक पेज से दूसरे पेज, वेबसाइट या फाइल पर जाने के लिए किया जाता है।

उदाहरण:

<href="URL" target="_blank">Link Text</a>

एट्रिब्यूट्स (Attributes):

href → लिंक का पता (URL)

target → लिंक कहाँ खुलेगा?

_blank → नए टैब में खुलेगा / _self → उसी टैब में खुलेगा (डिफॉल्ट)

2-HTML इमेज (<img> टैग)

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

उदाहरण:

<img src="image-path" alt="img-Info" width="200" height="150">

एट्रिब्यूट्स (Attributes):

src → इमेज का पाथ (URL या फाइल नाम)

alt → अगर इमेज नहीं दिखे, तो यह टेक्स्ट दिखेगा (SEO के लिए भी जरूरी)

width & height → इमेज का साइज (पिक्सेल में)

HTML कमेंट्स (<!-- -->) tag कैसे लिखते हैं

HTML कमेंट्स का उपयोग कोड में नोट्स लिखने, कोड को छुपाने या समझने में आसान बनाने के लिए किया जाता है। यह ब्राउज़र द्वारा नहीं दिखाया जाता।

कमेंट एक ऐसा टेक्स्ट है जो सिर्फ डेवलपर को दिखता है, ब्राउज़र इसे इग्नोर करता है।

इसे <!-- से शुरू करके --> से बंद किया जाता है।

Practical

प्रैक्टिस:अपना पहला वेबपेज बनाएं.

प्रैक्टिस: अपना पहला वेबपेज बनाएं.

अब आप HTML का उपयोग करके अपना पहला वेबपेज बनाते हैं। यह एक सरल वेबपेज होगा जिसमें हेडिंग, पैराग्राफ, इमेज और लिंक शामिल होंगे।

HTML कोड:

<title>My first webpage</title>
<!-- Main heading -->
<h1>Job-Point 👋</h1>
<!-- Introduction -->
<p>This is my first HTML webpage. I'm learning web development!</p>
<!-- Image -->
<img src="assets/image/Logo.png" width="100" hight="100" alt="Welcome Image">
<!-- Link -->
<p>
<a href="https://www.google.com" target="_blank"> visit Google </a> |
<a href="https://www.wikipedia.org" target="_blank"> Open Wikipedia </a>
</p>

Practical

आज आप सीखेंगे Basic CSS

पिछली क्लास में आपने एक बेसिक HTML पेज बनाया था, आज हम देखेंगे कि उसी पेज पर CSS कैसे अप्लाई करें।

Text Color

सबसे पहले हम H1 को लाल रंग देंगे और पैराग्राफ को हरा रंग देंगे।

Background Color

दूसरा हम CSS की मदद से बैकग्राउंड कलर देंगे, H1 को हरा रंग और पैराग्राफ को लाल रंग देंगे।

Basic CSS

CSS लिखने के लिए सबसे पहले हमें यह देखना होगा कि जिस टेक्स्ट को हम कलर या बैकग्राउंड कलर देंगे उसका सेलेक्टर क्या है। उदाहरण के लिए, अगर हम H1 को लाल रंग देते हैं, तो H1 हमारे लिए सेलेक्टर है। H1 { } curly brackets के अंदर CSS property: value; लिखेंगे।

CSS का बेसिक सिंटैक्स

selector {
property: value;
}

Practical

🌐 CSS का परिचय - (Introduction to CSS in Hindi)

CSS का पूरा नाम है Cascading Style Sheets. यह एक स्टाइलिंग भाषा है जिसका उपयोग HTML डॉक्युमेंट्स की डिज़ाइन और लेआउट को बेहतर बनाने के लिए किया जाता है।

🔧 CSS क्यों उपयोग करते हैं?

HTML केवल वेबपेज की सामग्री (content) को संरचना देता है, लेकिन वह दिखावट (look & feel) के लिए पर्याप्त नहीं है। CSS की मदद से आप:

  • टेक्स्ट का रंग, आकार और फॉन्ट बदल सकते हैं।
  • पृष्ठभूमि रंग (background color), इमेज और बॉर्डर जोड़ सकते हैं।
  • एलिमेंट्स को पोजिशन कर सकते हैं (जैसे left, right, center आदि)।
  • Responsive layout बना सकते हैं जो मोबाइल और डेस्कटॉप दोनों पर अच्छे दिखते हैं।

🧩 CSS के प्रकार (Types of CSS)

Inline CSS:- सीधे HTML टैग में style attribute के ज़रिए दिया जाता है।

Internal CSS:- HTML डॉक्युमेंट के <head> सेक्शन में <style> टैग के अंदर लिखा जाता है।

External CSS:- CSS को एक अलग .css फाइल में लिखा जाता है और HTML में लिंक किया जाता है।

📦 CSS के मुख्य टॉपिक्स

  • Selectors (जैसे .class, #id, *, div > p)
  • Box Model (Margin, Border, Padding, Content)
  • एलिमेंट्स को पोजिशन कर सकते हैं (जैसे left, right, center आदि)।
  • Positioning (static, relative, absolute, fixed, sticky)
  • Flexbox & Grid (लेआउट डिजाइन के लिए)
  • Media Queries (Responsive डिजाइन के लिए)
📘 निष्कर्ष

CSS वेब डिजाइनिंग का एक अनिवार्य हिस्सा है। यह वेबसाइट को न सिर्फ सुंदर बनाता है बल्कि यूज़र एक्सपीरियंस को भी बेहतर करता है।

Practical