# HTML, CSS, and JavaScript: what does each one do?
> The three building blocks of every website, explained with a simple analogy.
*Source: https://velstech.net/html-css-js.hi (Hindi translation of https://velstech.net/html-css-js) · Updated: 2026-08-24*
*Markdown version. [Read the interactive guide](https://velstech.net/html-css-js.hi). English Markdown: https://velstech.net/html-css-js.md.*
---
आपने अब तक जो भी website देखी है – इस सहित – वह उन्हीं तीन भाषाओं से बनी है। वे तीन बिल्कुल अलग-अलग काम करती हैं, और इस split को समझना ही वह पल है जब web development confusing लगना बंद कर देता है।
## घर वाली analogy
किसी website को घर की तरह सोचें:
- HTML structure है – कमरे, दीवारें, दरवाज़े। "यहाँ heading है, यहाँ paragraph है, यहाँ button है।"
- CSS सजावट है – paint, wallpaper, furniture, lighting। "heading नीला और बड़ा है, button गोल है, page में margins हैं।"
- JavaScript बिजली है – वह wiring जो चीज़ों को करवाती है। "जब आप button पर click करें, तो menu खोलें।"
आधुनिक site के लिए तीनों चाहिए। बिना style के structure बदसूरत पर काम करता है; बिना JS के styled structure सुंदर पर static है; JS ही उसे जीवंत बनाता है।
## HTML: skeleton
HTML (HyperText Markup Language) तय करता है कि *page पर क्या है*। यह असल में programming language नहीं है – यह markup language है। यह content को tags में लपेटता है:
```
Welcome to VelsTech
This is a paragraph of text.
Click me
```
हर tag अपने content का वर्णन करता है: `` main heading है, `
` paragraph है, `` image है, `` link है। browser इस structure को पढ़ता है और जानता है कि page को कैसे layout करना है।
## CSS: दिखावट
CSS (Cascading Style Sheets) control करता है कि *यह कैसा दिखता है*। यह elements को select करके styles apply करता है:
```
h1 {
color: #4cc2ff;
font-size: 3rem;
}
button {
background: #4cc2ff;
border-radius: 8px;
padding: 12px 24px;
}
```
"cascading" का मतलब है styles layers में apply होते हैं और inherit कर सकते हैं। एक CSS rule पूरे site की हर heading को एक साथ restyle कर सकता है – इसीलिए CSS redesigns को one-file job बना देता है।
## JavaScript: व्यवहार
JavaScript page को *कुछ करवाता* है। यह तीनों में से एकमात्र true programming language है जिसमें logic है:
```
const button = document.querySelector("button");
button.addEventListener("click", () => {
alert("You clicked me!");
});
```
JS page load होने के बाद उसे पढ़ और बदल सकता है, clicks और keystrokes पर react कर सकता है, servers से data fetch कर सकता है और पूरे apps बना सकता है। इस page का theme toggle और color palette? वह JavaScript का ही काम है।
## एक फ़ाइल में वे कैसे मिलते हैं
```
body { background: #0b0f14; }
Hello!
alert("Hi");
```
असली sites में ये अलग-अलग files (`index.html`, `styles.css`, `script.js`) में रहते हैं और आपस में link होते हैं – ठीक वैसे जैसे यह site organized है।
## हर एक क्यों मायने रखता है
```
Layer Job Who touches it
──────────────────────────────────────────────
HTML Structure/content Everyone (even non-coders can read it)
CSS Look and feel Design-minded people love this
JavaScript Behavior/logic Programmers
```
## कैसे शुरू करें
आप अभी, सिर्फ एक text editor और browser के साथ शुरू कर सकते हैं:
- Notepad/VS Code खोलें और कुछ HTML tags लिखें।
- index.html के रूप में save करें और browser में खोलें।
- block जोड़ें और कुछ colors बदलें।
- block जोड़ें और button को message दिखाने लायक बनाएँ।
यही लगभग बीस मिनट में classic web का पूरा stack है। HTML बताता है यह क्या है, CSS बताता है यह कैसा दिखता है, JavaScript बताता है यह क्या करता है। इस trio में महारत हासिल कर लें और आप websites बना रहे हैं – जैसे यही जो आप अभी पढ़ रहे हैं।
🧾 VelsTech developer tools आज़माएँ
[JSON Formatter & Validator](https://velstech.net/json-formatter) – API responses को format और validate करें।
[Regex Tester](https://velstech.net/regex-tester) – code में लिखने से पहले patterns test करें।
[Browse all tools →](https://velstech.net/tools)
---
*VelsTech – https://velstech.net/html-css-js.hi.md*