Learn Coding Language

 Learn Coding Language 


  1.  Html Coding in Basic
  2. CSS
  3. Java Script
  4. Python
  5. C++

कोडिंग क्या है? (HTML, CSS, JavaScript, C++)

कोडिंग का मतलब है कंप्यूटर को किसी काम के लिए सटीक निर्देश देना। अलग-अलग भाषाएँ अलग उद्देश्यों के लिए बनी हैं—जैसे वेबसाइट बनाने के लिए HTML, CSS और JavaScript, और तेज़, हार्डवेयर-लेवल प्रोग्रामिंग के लिए C++। इस आर्टिकल में हम चारों को अलग-अलग समझेंगे, फिर एक छोटा-सा प्रोजेक्ट भी बनाएँगे।

1) HTML (HyperText Markup Language)

उपयोग: वेब पेज की संरचना (Structure) बनाता है—हेडिंग, पैराग्राफ, इमेज, लिंक, टेबल आदि।

कैसे कोड लिखते हैं:

  • HTML फाइल का एक्सटेंशन .html होता है।
  • बेसिक स्केलेटन:

<!doctype html>
<html lang="hi">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>मेरा पहला पेज</title>
</head>
<body>
  <h1>नमस्ते दुनिया!</h1>
  <p>यह मेरा पहला वेब पेज है।</p>
</body>
</html>

महत्वपूर्ण टैग्स:

  • <h1>…</h1>: हेडिंग

  • <p>…</p>: पैराग्राफ

  • <a href="URL">…</a>: लिंक

  • <img src="image.jpg" alt="विवरण" />: इमेज

  • <ul>/<ol>/<li>: सूचियाँ

  • <div> और <span>: लेआउट/इनलाइन कंटेनर

  • <form>: इनपुट फ़ॉर्म

कहां चलाएँ: किसी भी ब्राउज़र (Chrome/Edge/Firefox) में फाइल डबल-क्लिक कर खोलें।

2) CSS (Cascading Style Sheets)

उपयोग: HTML स्ट्रक्चर को स्टाइल देता है—रंग, फ़ॉन्ट, स्पेसिंग, लेआउट, एनीमेशन।

कैसे कोड लिखते हैं:

  • CSS .css फाइल में लिखा जाता है, या <style> टैग में, या इनलाइन style एट्रिब्यूट के रूप में।

  • HTML से लिंक करने का तरीका:

<link rel="stylesheet" href="styles.css" />

उदाहरण (styles.css):

body { font-family: system-ui, Arial, sans-serif; margin: 0; padding: 24px; }
h1 { color: #1a73e8; }
.button { background: #222; color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none; }
.button:hover { opacity: 0.9; }

महत्वपूर्ण कॉन्सेप्ट्स:

  • सेलेक्टर्स (जैसे .class, #id, element)

  • बॉक्स मॉडल (margin, border, padding, content)

  • फ्लेक्सबॉक्स/ग्रिड (रेस्पॉन्सिव लेआउट)

  • मीडिया क्वेरी (मोबाइल-फर्स्ट डिज़ाइन)

कहां देखें: HTML फाइल ब्राउज़र में खोलें—CSS अपने आप लागू होगा।

3) JavaScript (JS)

उपयोग: वेब पेज को इंटरएक्टिव बनाता है—क्लिक हैंडलिंग, फॉर्म वैलिडेशन, API कॉल, गेम/एनीमेशन, SPA।

कैसे कोड लिखते हैं:

  • JS .js फाइल में या <script> टैग के अंदर लिखा जाता है।

  • HTML से लिंक:

<script src="app.js" defer></script>

उदाहरण (app.js):

// एक बटन क्लिक पर टेक्स्ट बदलें
const btn = document.querySelector('#helloBtn');
const title = document.querySelector('h1');
btn.addEventListener('click', () => {
  title.textContent = 'आपने बटन क्लिक किया!';
});

ब्राउज़र कंसोल: Inspect → Console में JS कोड टेस्ट कर सकते हैं।

महत्वपूर्ण कॉन्सेप्ट्स:

  • DOM (Document Object Model)

  • Events (click, input, submit)

  • Variables/Functions, ES6+ फीचर्स (let/const, arrow functions, modules)

  • Fetch/API (सर्वर से डेटा लाना)

4) C++

उपयोग: हाई-परफॉर्मेंस एप्लिकेशन—गेम इंजन, डेस्कटॉप सॉफ्टवेयर, सिस्टम प्रोग्रामिंग, एंबेडेड, Competitive Programming।

कैसे कोड लिखते हैं:

  • .cpp फाइल में लिखते हैं।

  • कंपाइलर की ज़रूरत (जैसे GCC/Clang/MSVC)।

उदाहरण (hello.cpp):

#include <bits/stdc++.h>
using namespace std;

int main() {
    ios::sync_with_stdio(false);
    cin.tie(nullptr);

    cout << "Namaste Duniya!" << '\n';
    return 0;
}

कम्पाइल/रन (टर्मिनल):

  • Linux/Mac: g++ hello.cpp -o hello && ./hello

  • Windows (MinGW): g++ hello.cpp -o hello && hello.exe

महत्वपूर्ण कॉन्सेप्ट्स:

  • डेटा टाइप्स, कंडीशंस, लूप्स

  • फ़ंक्शन्स, OOP (class, object, inheritance, polymorphism)

  • STL (vector, map, algorithms)

  • मेमोरी मैनेजमेंट (stack/heap, pointers, RAII, smart pointers)

HTML, CSS, JS साथ में कैसे काम करते हैं?

  • HTML: ढांचा (Skeleton)

  • CSS: रूप-रंग (Design)

  • JS: दिमाग/लॉजिक (Interactivity)

ब्राउज़र पहले HTML पढ़ता है, फिर CSS लगाता है, फिर JS चलता है—जिससे पेज इंटरएक्टिव हो जाता है।

मिनी प्रोजेक्ट: एक छोटा वेब पेज (इंटरएक्टिव कार्ड)

index.html

<!doctype html>
<html lang="hi">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>इंटरएक्टिव कार्ड</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <main class="container">
    <h1>वेब डेवलपमेंट: HTML + CSS + JS</h1>

    <article class="card" id="infoCard">
      <h2>क्लिक करें और कार्ड पलटें</h2>
      <p class="front">HTML स्ट्रक्चर देता है।</p>
      <p class="back" hidden>CSS स्टाइल देता है और JS इंटरएक्शन।</p>
      <button id="toggleBtn" class="button">Flip</button>
    </article>

    <a class="button" href="#" id="helloBtn">Say Hello</a>
  </main>

  <script src="app.js" defer></script>
</body>
</html>

styles.css

:root { --gap: 16px; }
* { box-sizing: border-box; }
body { font-family: system-ui, Arial, sans-serif; margin: 0; padding: 24px; background: #f5f7fb; }
.container { max-width: 720px; margin: 0 auto; display: grid; gap: var(--gap); }
.card { background: #fff; padding: 20px; border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,.08); }
h1 { margin: 0 0 var(--gap); }
.button { display: inline-block; border: none; outline: 0; background: #111; color: #fff; padding: 10px 16px; border-radius: 10px; cursor: pointer; text-decoration: none; }
.button:active { transform: translateY(1px); }
.back { color: #444; }

app.js

const btn = document.querySelector('#helloBtn');
btn.addEventListener('click', (e) => {
  e.preventDefault();
  alert('Hello from JavaScript!');
});

const toggleBtn = document.querySelector('#toggleBtn');
const front = document.querySelector('.front');
const back = document.querySelector('.back');

toggleBtn.addEventListener('click', () => {
  const isHidden = back.hasAttribute('hidden');
  if (isHidden) {
    back.removeAttribute('hidden');
    front.setAttribute('hidden', '');
  } else {
    front.removeAttribute('hidden');
    back.setAttribute('hidden', '');
  }
});

कैसे चलाएँ:

  1. तीनों फाइलें एक ही फ़ोल्डर में सेव करें।

  2. index.html डबल-क्लिक करके ब्राउज़र में खोलें।

C++ में एक छोटा उदाहरण: जोड़ कैलकुलेटर

sum.cpp

#include <bits/stdc++.h>
using namespace std;

int main() {
    ios::sync_with_stdio(false);
    cin.tie(nullptr);

    long long a, b;
    cout << "Do numbers daliyey: ";
    if (!(cin >> a >> b)) return 0;
    cout << "Yog: " << (a + b) << '\n';
    return 0;
}

चलाने के स्टेप्स:

g++ sum.cpp -o sum
./sum   (Windows पर: sum.exe)

कब कौन-सी भाषा?

  • स्टैटिक वेबसाइट/ब्लॉग: HTML + CSS + थोड़ा JS

  • इंटरएक्टिव वेब ऐप: HTML + CSS + JS (Frameworks जैसे React/Vue/Angular)

  • हाई-परफॉर्मेंस/सिस्टम: C++

शुरुआती गलतियाँ और बचाव

  • HTML में टैग बंद करना भूलना → VS Code + Emmet इस्तेमाल करें।

  • CSS स्पेसिफिसिटी कन्फ्यूजन → क्लास-बेस्ड स्टाइलिंग, BEM नामकरण अपनाएँ।

  • JS में null/undefined हैंडल न करना → कंडीशंस/ऑप्शनल चेनिंग (?.).

  • C++ में मेमोरी लीक → std::vector, std::unique_ptr जैसी RAII चीज़ें उपयोग करें।

टूल्स/सेटअप (Quick)

  • एडिटर: VS Code

  • ब्राउज़र DevTools: Elements/Console/Network/Performance

  • C++ कंपाइलर: GCC/Clang (Linux/Mac), MinGW/MSVC (Windows)

निष्कर्ष

  • HTML, CSS, JS मिलकर फ्रंटएंड वेब बनाते हैं।

  • C++ लो-लेवल के करीब है और तेज़ एप्लिकेशन/गेम आदि के लिए बेहतर है।

  • शुरूआत छोटे-छोटे प्रोजेक्ट्स से करें, फिर धीरे-धीरे एडवांस कॉन्सेप्ट सीखें।





HTML Level 1 – Game (Blogger Ready)

HTML Level 1 – Game

Bilkul starting se: HTML ka basic structure, simple quiz, aur live editor. ✨

Score: 0/100

1) Code ko sahi order me lagao

Hint: <html> → <head> → <title> → </title> → </head> → <body> → Text → </body> → </html>

    2) Quick Quiz

    Q1. HTML ka full form kya hai?
    Q2. Screen par dikhne wala content kis tag me hota hai?
    Q3. Kaun sa tag close karna jaroori hota hai?

    3) Try Yourself – apni first page banao

    Text area me code edit karo aur Run dabao. Output niche dikhega.

    Tip: Agar puzzle + quiz complete ho jaye to aapka score 100/100 ho jayega! 🎉

    NEXT

    Contact Form