Web Development: HTML, CSS, JavaScript, HTTP and Web Security

Web development is the work of planning, building, testing, deploying, and maintaining websites and web applications. It combines user-facing interfaces, server-side logic, databases, networking, security, and operational practices.

HTML gives web content structure and meaning, CSS controls presentation, and JavaScript adds behaviour. These technologies work with browsers, servers, APIs, databases, and web protocols to deliver useful applications such as learning platforms, online stores, dashboards, booking systems, and public-information websites.

1. Web Foundations and Architecture

The Internet is a global network infrastructure that connects devices and networks. The World Wide Web is one service that runs on the Internet, using technologies such as URLs, HTTP, HTML, web browsers, and web servers.

The main layers of a typical web application.
Layer Main responsibility Examples
Frontend Shows content, accepts user input, and provides interaction. HTML, CSS, JavaScript, browser APIs
Backend Applies business rules, validates requests, authorizes actions, and returns responses. ASP.NET Core, Java, Python, Node.js, PHP
Database Stores and retrieves persistent application data. Users, articles, orders, marks, products
Infrastructure Hosts, delivers, monitors, and protects the application. Servers, cloud platforms, CDNs, DNS, TLS certificates

2. From a URL to a Rendered Page

When a user opens a web address, the browser and server exchange several messages before the page becomes usable. The exact process varies because browsers can reuse cached DNS records, cached resources, or existing network connections.

  1. The browser parses the URL and checks whether useful resources are already cached.
  2. DNS helps map the host name to one or more network addresses.
  3. The browser establishes or reuses a connection. For HTTPS, TLS is used to protect the connection.
  4. The browser sends an HTTP request for the HTML document.
  5. The server returns an HTTP response containing HTML, data, or an error status.
  6. The browser parses HTML, requests referenced CSS, JavaScript, images, fonts, and other resources.
  7. The browser builds the page structure, calculates layout, paints pixels, and responds to user interaction.
Client-server model: A browser is usually the client that starts a request. A server receives the request, performs allowed work, and sends a response. A database is normally accessed by the backend, not directly by an untrusted browser.

3. HTML: Structure, Meaning, and Accessible Forms

HTML stands for HyperText Markup Language. It describes the structure and meaning of content. Use the right native HTML element for the job before adding ARIA attributes or custom controls.

Important semantic elements include <header>, <nav>, <main>, <article>, <section>, and <footer>. Semantic HTML helps browsers, search engines, assistive technologies, and future developers understand the page.

Basic Semantic HTML Document

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Study Notes</title>
    <link rel="stylesheet" href="/css/site.css">
</head>
<body>
    <header>
        <h1>Study Notes</h1>
    </header>

    <main>
        <article>
            <h2>HTML Basics</h2>
            <p>HTML gives content structure and meaning.</p>
        </article>
    </main>

    <footer>ExamRig</footer>
</body>
</html>

Accessible Form Example

<form action="/account/register" method="post">
    <label for="email">Email address</label>
    <input id="email"
           name="email"
           type="email"
           autocomplete="email"
           aria-describedby="email-help"
           required>

    <p id="email-help">We use this address to send account information.</p>

    <button type="submit">Create account</button>
</form>

HTML Accessibility Essentials

  • Use one clear <h1> and maintain a logical heading order.
  • Provide meaningful alternative text for informative images; use empty alt="" only for decorative images.
  • Associate every form control with a visible <label>.
  • Use descriptive link text such as “Read the HTTP guide,” not “Click here.”
  • Use table headings, captions, and scopes for data tables.
  • Ensure all important functionality works with a keyboard.

4. CSS: Cascade, Layout, and Responsive Design

CSS stands for Cascading Style Sheets. It controls the visual presentation of HTML: fonts, colours, spacing, layouts, animation, and responsive behaviour.

The cascade decides which declarations apply when several rules target the same element. Selector specificity, source order, inheritance, and importance affect the final result. A reliable layout also starts with the box model: content, padding, border, and margin.

Responsive Grid Example

* {
    box-sizing: border-box;
}

.cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.card {
    padding: 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
}

@media (min-width: 48rem) {
    .cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

The example is mobile-first: it starts with one column and adds columns when the available space supports them. Breakpoints should follow layout needs rather than a fixed list of device names.

Useful CSS Concepts

  • Flexbox: Useful for one-dimensional layouts such as rows, columns, and aligned controls.
  • Grid: Useful for two-dimensional layouts with rows and columns.
  • Responsive images: Use appropriately sized images and reserve image dimensions to reduce layout shifts.
  • Focus styles: Do not remove visible keyboard focus without providing an accessible replacement.
  • Readable design: Use sufficient contrast, legible font sizes, sensible line length, and layouts that reflow at zoom.

5. JavaScript and Browser Interaction

JavaScript adds behaviour to web pages. It can react to events, update the Document Object Model (DOM), validate data for usability, call web APIs, and build interactive interfaces.

Prefer const for values that will not be reassigned and let for values that will change. Use event listeners instead of inline event attributes so structure and behaviour remain easier to maintain.

DOM and Event Example

<button id="show-message" type="button">Show message</button>
<p id="status" role="status"></p>

<script>
    const button = document.querySelector("#show-message");
    const status = document.querySelector("#status");

    button.addEventListener("click", () => {
        status.textContent = "Your notes are ready.";
    });
</script>

Use textContent when displaying ordinary text. Avoid placing untrusted values into innerHTML, because doing so can create cross-site scripting risks.

6. HTTP, HTTPS, URLs, and Status Codes

HTTP, or HyperText Transfer Protocol, is an application-layer protocol for exchanging web resources. A request commonly contains a method, URL path, headers, and an optional body. A response contains a status code, headers, and an optional body.

HTTP Request and Response Example

GET /api/students/101 HTTP/1.1
Host: example.com
Accept: application/json

HTTP/1.1 200 OK
Content-Type: application/json

{
  "studentId": 101,
  "name": "Rahul",
  "marks": 85
}

Common HTTP Methods

Common HTTP methods and their usual semantics.
Method Usual purpose Important note
GET Retrieve a representation of a resource. Should be safe: it must not change application state.
HEAD Retrieve response headers without a response body. Useful for checking metadata or availability.
POST Submit data for processing, often to create a resource. Not generally idempotent; repeating it can have additional effects.
PUT Create or replace the representation at a known target URI. Defined as idempotent.
PATCH Apply a partial modification. May or may not be idempotent, depending on the patch design.
DELETE Request removal of a resource. Defined as idempotent, even if later requests return a different status.
OPTIONS Ask about communication options for a target resource. Often appears in browser CORS preflight requests.

Common HTTP Status Codes

Useful HTTP response status codes.
Code Meaning
200 Request succeeded.
201 A resource was created successfully.
204 Request succeeded and there is no response body.
301 / 308 Permanent redirect. Status 308 preserves the request method and body.
302 Found; commonly used for redirects, but it is not the method-preserving temporary redirect.
307 Temporary redirect that preserves the request method and body.
400 The request is invalid or cannot be understood by the server.
401 Authentication is required or supplied credentials are not valid.
403 The server refuses the request, often because permission is insufficient.
404 The requested resource was not found.
429 Too many requests; rate limiting is being applied.
500 An unexpected server-side error occurred.

HTTPS and TLS

HTTPS is HTTP protected by TLS. With successful certificate validation, TLS helps provide confidentiality, integrity, and server authentication for data in transit. HTTPS does not automatically fix application vulnerabilities, weak authorization, unsafe code, or a compromised device.

URL and Origin

https://www.example.com:8443/products?category=books#reviews
  • Scheme: https
  • Host: www.example.com
  • Port: 8443, if explicitly specified
  • Path: /products
  • Query: category=books
  • Fragment: reviews; it is normally handled by the browser and is not sent in the HTTP request.

An origin is the combination of scheme, host, and port. Origins matter for browser security rules, cookies, storage, and CORS.

7. Backend Systems, Databases, Authentication, and State

The backend receives requests, validates data, applies business rules, checks authorization, accesses databases or other services, and returns an appropriate response. The browser should never be trusted as the final authority for permissions or sensitive decisions.

Authentication vs Authorization

Authentication and authorization solve different problems.
Concept Question answered Example
Authentication Who is making this request? Checking a password, passkey, or sign-in session.
Authorization Is this authenticated user allowed to perform this action? Allowing only a teacher to edit marks.

Database Access

Relational databases commonly use SQL, while NoSQL databases may use document, key-value, graph, or column-family models. The choice should follow the data model, consistency needs, query patterns, operational requirements, and team knowledge.

Cookies, Sessions, and Tokens

Related but different state-management concepts.
Term Meaning
Cookie Browser-managed data associated with a site and included in matching requests according to its attributes.
Session Application-managed state across multiple requests, often referenced by a session identifier stored in a cookie.
Token A credential format used to prove identity or permission. A token is not automatically a complete session solution.

Session cookies should use appropriate Secure, HttpOnly, and restrictive SameSite attributes, along with sensible expiration and rotation policies. Do not place passwords, session identifiers, or other credentials in URLs.

8. Web APIs, Fetch, and CORS

A web API provides a defined interface through which applications exchange data or request services. APIs often use HTTP and JSON, but the essential requirement is a documented request and response contract. 

{
  "studentId": 101,
  "name": "Rahul",
  "marks": 85
}

REST is an architectural style with constraints, not merely a list of URL-and-method conventions. A well-designed API should document resource formats, validation rules, authentication, authorization, pagination or filtering where needed, error responses, and versioning expectations.

Fetch API Example

async function loadStudent() {
    const status = document.querySelector("#student-status");

    try {
        const response = await fetch("/api/students/101", {
            headers: { "Accept": "application/json" }
        });

        if (!response.ok) {
            throw new Error(`Request failed with ${response.status}`);
        }

        const student = await response.json();
        status.textContent = `${student.name}: ${student.marks}`;
    } catch {
        status.textContent = "Student data could not be loaded. Please try again.";
    }
}

fetch() does not reject automatically for HTTP responses such as 404 or 500. Check response.ok and handle failures deliberately. Do not expose raw internal server errors to users.

Same-Origin Policy and CORS

Browsers apply the same-origin policy to limit which scripts can read resources from another origin. CORS is a server-controlled mechanism that tells browsers whether a cross-origin script may read a response.

9. Web Security Fundamentals

Security should be part of design, coding, testing, deployment, and maintenance. Client-side controls, hidden buttons, and browser checks are not substitutes for server-side enforcement.

Common web security risks and practical defences.
Risk What can go wrong Important defences
SQL injection Untrusted input changes a database query. Parameterized queries, allowlists for dynamic identifiers, least-privilege database accounts.
Cross-site scripting (XSS) Untrusted content is interpreted as script or markup in another user's browser. Context-appropriate output encoding, safe DOM APIs such as textContent, careful HTML sanitization when rich HTML is required, and CSP as defence in depth.
Cross-site request forgery (CSRF) A malicious site causes a logged-in browser to submit an unwanted request. Framework anti-forgery protection or strict origin validation for cookie-authenticated state-changing requests; SameSite helps but is not a universal replacement.
Broken access control A user accesses data or actions beyond their permission. Check authorization on the server for every action and every requested object.
Session or credential theft Attackers obtain reusable authentication data. TLS, secure cookie attributes, session rotation, expiration, strong sign-in controls, and safe password hashing through established libraries.
Exposed secrets or unsafe dependencies Keys, passwords, or vulnerable packages are leaked or misused. Keep secrets out of source code and client bundles, restrict access, update dependencies, and monitor security advisories.
  • Validate all untrusted data on the server according to the expected format and business rules.
  • Return useful but non-sensitive error messages to users; keep technical details in protected logs.
  • Apply rate limits and abuse controls to sensitive endpoints such as sign-in, password reset, and file upload.
  • Use HTTPS everywhere and keep certificates, frameworks, operating systems, and dependencies maintained.
  • Review security before release and after major changes, not only after an incident.

10. Accessibility, Performance, Testing, and Deployment

Accessibility

Accessibility makes content usable by people with different abilities, devices, input methods, and connection conditions. Automated tools are useful, but they do not replace keyboard testing, screen-reader testing, and feedback from real users.

  • Use semantic HTML and native controls before adding ARIA.
  • Ensure keyboard users can reach and operate interactive elements.
  • Provide visible focus indicators and avoid colour-only instructions.
  • Use sufficient text contrast and support text zoom and responsive reflow.
  • Provide captions for video, transcripts where appropriate, and meaningful alternatives for non-text content.

Performance

  • Serve correctly sized, compressed images and specify dimensions where practical.
  • Lazy-load suitable below-the-fold images or media, but do not delay the main above-the-fold visual unnecessarily.
  • Cache versioned static assets appropriately and enable compression where supported.
  • Reduce unused CSS and JavaScript, and defer non-critical scripts when appropriate.
  • Optimize expensive database queries and reduce unnecessary network requests.
  • Measure real loading and interaction behaviour before and after making performance changes.

Search Discovery and Technical SEO

Technical SEO helps search engines discover and understand useful content. Use descriptive page titles, meaningful headings, helpful meta descriptions, crawlable important pages, internal links, canonical URLs where needed, and an XML sitemap for indexable pages.

These practices support discovery but do not guarantee rankings. Search visibility depends on the quality, originality, usefulness, accessibility, and trustworthiness of the full site.

Testing and Deployment

Important quality activities during web development.
Activity Purpose
Unit testing Checks small pieces of logic in isolation.
Integration testing Checks whether components such as APIs, databases, and authentication work together.
End-to-end testing Checks important user flows in a browser-like environment.
Accessibility and usability testing Checks whether people can understand and operate the interface.
Security and performance testing Checks resilience, privacy, loading behaviour, and response under expected conditions.
Deployment and monitoring Uses version control, automated checks, environment-specific configuration, protected secrets, logs, health checks, backups, and rollback plans.

11. Quick Revision and Practice Questions

Key Points to Remember

  • HTML provides structure and meaning; CSS controls presentation; JavaScript adds behaviour.
  • The Internet is infrastructure; the Web is a service that uses it.
  • HTTP uses request-response messages; HTTPS protects data in transit with TLS.
  • 401 concerns authentication, while 403 means the server refuses the request.
  • Client-side validation improves usability but server-side validation and authorization provide security.
  • A cookie, session, and token are related concepts but are not interchangeable.
  • CORS is a browser rule for cross-origin reads, not an access-control system.
  • Use parameterized queries, contextual output encoding, anti-forgery protection, and secure cookies.

Practice Questions with Answers

1. What is the difference between the Internet and the Web?

The Internet is the global network infrastructure that connects devices and networks. The World Wide Web is a service that uses the Internet to deliver linked resources through browsers, URLs, HTTP, and HTML.

2. Why is client-side form validation not enough?

A user can disable JavaScript or send a crafted request directly to the server. The backend must validate data, authenticate the requester, authorize the action, and enforce business rules.

3. Explain the difference between GET and POST.

GET retrieves a resource and should not change application state. POST submits data for processing and can create a resource or trigger another action; it is not generally idempotent.

4. What is the purpose of response.ok in Fetch?

Fetch usually resolves even when the server returns an HTTP error such as 404 or 500. Checking response.ok allows code to handle unsuccessful HTTP responses deliberately.

5. How can SQL injection be prevented?

Use parameterized queries or safe data-access libraries so user values are bound as data rather than merged into SQL instructions. Also use least-privilege database accounts and validate expected input formats.

6. Is CORS a replacement for authorization?

No. CORS controls whether a browser allows a script from one origin to read a response from another origin. The server must still authenticate users and check authorization for every protected resource.

Frequently Asked Questions

What is frontend development?

Frontend development creates the user-facing part of a website or web application. It commonly uses HTML, CSS, JavaScript, and browser APIs.

What is backend development?

Backend development handles server-side work such as business rules, authentication, authorization, database access, API responses, file processing, and logging.

What is an API?

An API is a defined interface that lets software components exchange data or request services. Web APIs commonly use HTTP and formats such as JSON.

Why is HTTPS important?

HTTPS uses TLS to protect data in transit from interception and tampering, and to authenticate the server when certificate validation succeeds. It is necessary but does not make unsafe application code secure.

What is responsive web design?

Responsive design adapts content and layout to the available screen space, input method, zoom level, and device capabilities so the site remains usable across many contexts.

Further Reading