इस module में हम Web Design की पूरी journey को step-by-step समझेंगे — Internet, WWW, Website, Webpages, Working of Websites, Front-End, Back-End, Client & Server Scripting, Responsive Design और Static vs Dynamic Websites तक। यह पूरे Web Development syllabus का foundation भाग है जो आपको theory और practical दोनों में मजबूत बनाता है।
Web Design वह प्रक्रिया है जिसमें एक वेबसाइट का layout, structure, color scheme, fonts और content design किया जाता है ताकि वह visually appealing और user-friendly बने। Web Design यह सुनिश्चित करता है कि website देखने और इस्तेमाल करने में आसान हो।
“Web Design is the process of planning, conceptualizing, and arranging content intended for the Internet.”
सरल शब्दों में – Web Design एक ऐसा process है जिसमें हम किसी web page या website को इस तरह से बनाते हैं कि वह users को आकर्षित करे और उपयोग में आसान हो।
एक अच्छी Web Design user के experience को बेहतर बनाती है और organization या business की credibility को बढ़ाती है।
एक successful website design में निम्नलिखित components शामिल होते हैं:
Header → Website Title / Logo
Navigation → Home | About | Contact
Main Content → Articles, Images, Videos
Sidebar → Quick Links or Ads
Footer → Copyright & Social Media
Web design में कुछ basic principles follow करना ज़रूरी होता है ताकि site functional और user-centered बने।
नीचे एक basic HTML layout का example है जो web design structure को दर्शाता है 👇
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<a href="#">Home</a> |
<a href="#">About</a> |
<a href="#">Contact</a>
</nav>
<main>
<p>This is a simple example of a well-structured web page.</p>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
</body>
</html>
Internet एक global network है जो लाखों computers, mobile devices और servers को आपस में जोड़ता है। यह दुनिया भर में data, files, emails और web pages को साझा (share) करने की सुविधा देता है।
“The Internet is a worldwide system of interconnected computer networks that use the TCP/IP protocol to communicate and exchange data.”
सरल शब्दों में — Internet एक ऐसा network है जो छोटे-बड़े networks को आपस में जोड़कर data sharing और communication संभव बनाता है।
www.google.com टाइप करते हैं,
तो आपका device Internet के माध्यम से Google के server से जुड़ता है और web page को fetch करके display करता है।
| Service Name | Protocol / Tool | Description |
|---|---|---|
| Web Browsing | HTTP / HTTPS | Websites access करने के लिए |
| SMTP, POP3, IMAP | Messages भेजने और प्राप्त करने के लिए | |
| File Transfer | FTP | Files upload/download करने के लिए |
| Chat / Messaging | IRC, XMPP | Real-time text communication |
| Remote Login | Telnet, SSH | Remote server access |
| Streaming | RTSP / HTTP Live | Audio-video streaming |
आज दुनिया में 5 अरब से अधिक लोग Internet का उपयोग कर रहे हैं 🌍 और हर सेकंड लाखों requests servers पर जाती हैं!
World Wide Web (WWW) Internet की सबसे लोकप्रिय सेवा है। यह एक ऐसा system है जो interlinked web pages को hyperlinks के माध्यम से जोड़ता है। Users इन pages को Web Browser की मदद से देख सकते हैं।
“The World Wide Web (WWW) is a collection of interlinked hypertext documents and multimedia content that can be accessed via the Internet using web browsers.”
सरल शब्दों में – WWW एक ऐसी web system है जिसमें लाखों websites और webpages आपस में जुड़े होते हैं ताकि user किसी भी जानकारी को search और access कर सके।
WWW का कार्य client–server model पर आधारित है। जब कोई user browser में URL टाइप करता है, तो request web server को भेजी जाती है और server response में web page return करता है।
https://example.com).https://www.wikipedia.org खोलते हैं, तो आपका browser Wikipedia के server से HTML file और images fetch करके दिखाता है।
| Component | Description | Examples |
|---|---|---|
| Web Browser | User-side application जो web pages को render करता है। | Chrome, Firefox, Edge, Safari |
| Web Server | Files और data store करने वाला computer जो browser को content भेजता है। | Apache, Nginx, IIS |
| Web Page | HTML document जिसमें text, images, links, video आदि होते हैं। | index.html, about.html |
| URL | Unique address जिससे browser किसी web page को access करता है। | https://boostingskills.com |
| HTTP / HTTPS | Communication protocols जो client और server के बीच data भेजते हैं। | HyperText Transfer Protocol |
| Basis | Internet | World Wide Web (WWW) |
|---|---|---|
| Definition | Global network of interconnected computers | Service that runs on the Internet using web pages |
| Function | Enables communication and data exchange | Provides information and multimedia access via browsers |
| Existence | 1969 (ARPANET) | 1989 (Tim Berners-Lee) |
| Includes | Email, FTP, VoIP, Cloud, etc. | Only Web-based documents |
| Dependency | Independent | Depends on Internet |
WWW पर आज 1.1 अरब से अधिक websites मौजूद हैं! 🌐 और हर दिन लगभग 250,000 नई websites बनती हैं।
Website वेब पेजों (web pages) का संगठित collection है जो एक ही domain name के अंतर्गत आते हैं और आपस में hyperlinks से जुड़े होते हैं। हर वेबसाइट का एक home page होता है जो entry point होता है।
“A Website is a collection of related web pages under a single domain, hosted on a web server, accessible via the Internet.”
| Type | Description | Examples |
|---|---|---|
| Informational | Knowledge/content oriented | Wikipedia, Blogs |
| E-commerce | Products & payments | Amazon, Flipkart |
| Portfolio | Work showcase | Designer/Developer sites |
| Web App | Interactive application | Gmail, Trello |
| LMS | Learning management | SWAYAM, Coursera |
| Government/Institutional | Public services | india.gov.in |
/ (root)
├─ index.html → Home page
├─ about.html → About
├─ contact.html → Contact
├─ /assets
│ ├─ styles.css
│ ├─ app.js
│ └─ logo.png
└─ /products
└─ list.html
Website का काम Client–Server मॉडल पर होता है। Browser (client) request भेजता है, Server response भेजता है, और Browser page render करता है।
https://example.com टाइप करता है।| Concept | Meaning | Why it matters |
|---|---|---|
| HTTP/HTTPS | Web transfer protocol / Secure version | Security, SEO, Trust |
| DNS | Domain → IP resolution | Reachability |
| CDN | Geo-distributed static delivery | Faster load |
| Minification | CSS/JS size reduce | Performance |
| Compression | Gzip/Brotli | Smaller payload |
| Caching | Browser/Server cache | Repeat speed |
GET /index.html HTTP/1.1
Host: example.com
User-Agent: Chrome/Android
Accept: text/html
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Cache-Control: max-age=86400
Webpage एक single HTML document होता है जिसे browser render करता है। इसमें text, images, videos, forms, links आदि हो सकते हैं। Webpages मिलकर Website बनाते हैं।
| Type | Description | Tech |
|---|---|---|
| Static Page | Fixed content, manual updates | HTML/CSS |
| Dynamic Page | Data-driven, user/context आधारित | Server-side + DB |
| Interactive Page | Client-side logic heavy | JS/SPA frameworks |
| Landing Page | Focused marketing/CTA | Optimized UI/SEO |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<main>Content</main>
<aside>Sidebar</aside>
<footer>© 2025</footer>
</body>
</html>
alt text दें (accessibility/SEO)।<h1> में रखें।Front End वह हिस्सा है जो user देखता और interact करता है — UI (layout, colors, typography) और UX (interaction, flows, feedback)।
| Layer | Options | Purpose |
|---|---|---|
| CSS | Plain CSS, Tailwind, Bootstrap | Styling/Layout |
| JS | Vanilla JS, jQuery | Interactivity |
| SPA | React, Vue, Angular | Component-based UI |
| Build | Vite, Webpack, Parcel | Bundle/Optimize |
| Testing | Jest, Playwright | Quality Assurance |
<button id="greetBtn">Say Hi</button>
<p id="out"></p>
<script>
document.getElementById('greetBtn').onclick = () => {
document.getElementById('out').textContent = 'Hello, Web!';
};
</script>
Back End server-side भाग होता है जो business logic, authentication, authorization और database operations संभालता है। User इसे सीधे नहीं देखता, पर हर dynamic साइट का आधार यही है।
| Language/Runtime | Frameworks | Use |
|---|---|---|
| Node.js (JavaScript) | Express, Nest | APIs, real-time apps |
| Python | Django, Flask, FastAPI | Web apps, APIs |
| PHP | Laravel, CodeIgniter | Traditional web apps |
| Java | Spring Boot | Enterprise apps |
| .NET | ASP.NET Core | Enterprise/web APIs |
POST /login (email, password)
HTTP/1.1 200 OK
Content-Type: application/json
{
"status": "success",
"data": { "userId": 101, "role": "student" },
"token": "eyJhbGciOi..."
}
वेब एप्लीकेशन में Client-side scripting ब्राउज़र में चलती है (UI/UX, interactivity), जबकि Server-side scripting सर्वर पर चलती है (business logic, database, authentication)। दोनों मिलकर modern, dynamic websites बनाते हैं।
<form id="f">
<input id="email" type="email" placeholder="Enter email" required>
<button>Submit</button>
</form>
<p id="msg"></p>
<script>
document.getElementById('f').addEventListener('submit', e => {
e.preventDefault();
const ok = /\S+@\S+\.\S+/.test(document.getElementById('email').value);
document.getElementById('msg').textContent = ok ? 'Valid!' : 'Invalid email';
});
</script>
// Node.js Express (pseudo)
app.post('/login', async (req, res) => {
const { email, password } = req.body;
const user = await users.findOne({ email });
if (!user || !compareHash(password, user.hash)) return res.status(401).json({error:'Invalid'});
const token = signJWT({uid: user.id});
res.json({ status:'ok', token });
});
| Task | Client-side | Server-side |
|---|---|---|
| Form basic validation | Yes (fast UX) | Also validate again (security) |
| Auth, payments | No (exposed) | Yes (secure) |
| UI state/animations | Yes | No |
| DB operations | No | Yes |
| SEO (SSR/SSG) | Hydration only | Often (SSR/SSG improves crawl) |
Responsive Web Design (RWD) का उद्देश्य है कि वेबसाइट हर device (mobile, tablet, desktop) पर सही layout और उत्तम पढ़ने का अनुभव दे। यह fluid grids, flexible images और media queries पर आधारित है।
/* Base (mobile-first) */
.container { padding: 12px; }
.card { padding: 16px; }
img.resp { max-width: 100%; height: auto; display: block; }
/* Tablet and up */
@media (min-width: 768px) {
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}
/* Desktop and up */
@media (min-width: 1024px) {
.grid { grid-template-columns: 1fr 1fr 1fr; }
}
overflow-x:auto दें
.table-wrap { overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; }
Broadly websites दो प्रकार की होती हैं — Static (fixed pages) और Dynamic (data-driven/pages generated at runtime)। जरूरत और budget के अनुसार चुनाव किया जाता है।
/* Static page snippet */
<h1>Welcome</h1>
<p>This is a static page. Content is fixed in HTML.</p>
// Dynamic route (pseudo)
GET /product/42 → server DB से product #42 ढूँढेगा
→ HTML/JSON बनाकर client को देगा (price, stock, reviews)
| Aspect | Static | Dynamic |
|---|---|---|
| Content | Fixed files | DB-driven |
| Speed | Very fast | Depends on server/DB |
| Cost | Low hosting | Higher (server + DB) |
| Updates | Manual deploy | Admin panel / API |
| Security | Attack surface low | Needs hardening (auth, validation) |
| Examples | Portfolio, Docs | Shop, LMS, Social |
Q1. Web Design का मुख्य उद्देश्य क्या है?
A. Users के लिए website को attractive, informative और easy-to-use बनाना।
Q2. Web Design में कौन सी 3 main technologies इस्तेमाल होती हैं?
A. HTML, CSS और JavaScript।
Q3. एक अच्छे web design के principles क्या हैं?
A. Clarity, Consistency, Accessibility, Usability और Speed।
Q4. Website layout क्या होता है?
A. Layout website के visual structure को define करता है – जैसे header, footer, sidebar आदि।