हिंदी में: वेबसाइट और वेब ऐप कैसे बनते हैं — HTML, CSS, JavaScript से लेकर सर्वर और होस्टिंग तक।
How the web works
A client (your browser) sends an HTTP request to a server, which sends back an HTTP response containing HTML, CSS, JavaScript, images or data. Domain names are translated to IP addresses by DNS, and HTTPS encrypts the connection with TLS.
Common HTTP methods: GET (read), POST (create), PUT/PATCH (update), DELETE (remove). Status codes: 200 OK, 301 moved permanently, 404 not found, 500 server error.
Front end: the three core languages
- HTML – structure and meaning (headings, paragraphs, links, forms). Use semantic tags such as
<header>,<nav>,<main>,<article>and<footer>. - CSS – presentation: colours, fonts, spacing and layout with Flexbox and Grid.
- JavaScript – behaviour: reacting to clicks, validating forms, fetching data and updating the page (the DOM).
<button id="hi">Say hi</button>
<script>
document.getElementById('hi').addEventListener('click', () => {
alert('Hello from Jharkhand!');
});
</script>
Responsive design
Websites must work on phones, tablets and desktops:
– Add <meta name="viewport" content="width=device-width, initial-scale=1">.
– Use fluid widths, flexible images (max-width: 100%) and media queries.
– Design mobile-first, then enhance for larger screens.
Front-end frameworks
Libraries such as React, Angular and Vue help build interactive single-page applications from reusable components. CSS frameworks such as Bootstrap and Tailwind CSS speed up styling.
Back end
The back end runs on the server: it handles business logic, authentication and database access.
| Language | Popular frameworks |
|---|---|
| JavaScript (Node.js) | Express, NestJS, Next.js |
| Python | Django, Flask, FastAPI |
| Java | Spring Boot |
| PHP | Laravel, WordPress |
APIs let the front end and back end talk, usually as REST endpoints that send JSON:
{ "name": "Pradeep", "branch": "CSE", "skills": ["Python", "Java", "CSS"] }
Databases for the web
- Relational (SQL): MySQL, PostgreSQL — structured data and relationships.
- NoSQL: MongoDB, Redis — flexible documents, caching.
Hosting and deployment
- Shared hosting – affordable, managed; good for WordPress and small sites.
- VPS / cloud – full control and scaling (AWS, Azure, Google Cloud, and VPS providers).
- Static hosting / CDN – very fast delivery of pre-built sites.
Use Git for version control, and CI/CD pipelines for automatic testing and deployment.
Web security basics
- Always use HTTPS.
- Validate and sanitize all input; use prepared statements to prevent SQL injection.
- Escape output to prevent XSS (cross-site scripting).
- Use CSRF tokens for forms that change data.
- Hash passwords with bcrypt or Argon2 — never store them as plain text.
- Keep software, themes and plugins updated.
Performance and SEO
- Compress and resize images (WebP/AVIF), lazy-load images below the fold.
- Minify and cache CSS/JS; use a CDN.
- Measure with Core Web Vitals (LCP, INP, CLS) in Lighthouse or PageSpeed Insights.
- SEO basics: unique page titles, meta descriptions, clean URLs, headings in order, an XML sitemap and mobile-friendly design.
A simple learning path
- HTML + CSS → build a personal portfolio page.
- JavaScript → add interactivity; learn the DOM and
fetch(). - Git and GitHub.
- One back-end framework + a SQL database.
- Deploy a full project and share the live link in your résumé.
Quick revision
- HTML = structure, CSS = style, JS = behaviour.
- REST APIs usually exchange JSON over HTTP.
- Prevent SQL injection with prepared statements and XSS with output escaping.