Web Technologies is the subject where the degree meets the product: every application your team ships has a front end, a back end and an API. The tools have changed enormously since the syllabus was written (React and Angular instead of hand-written pages, Node.js beside PHP and servlets), but the underlying ideas are the same. This article revisits the five units of the JNTUK course and shows where each went.
Unit 1: HTML and CSS
How the web works
A browser sends an HTTP request to a server, which returns a response (HTML, CSS, JavaScript, images, JSON). A URL has a scheme, host, port, path and query string. The browser parses HTML into the DOM (Document Object Model), applies CSS and draws the page.
HTML
HTML describes the structure and meaning of a page with nested tags.
| Area | Elements |
|---|---|
| Document | <!DOCTYPE html>, <html>, <head>, <body> |
| Text | <h1>–<h6>, <p>, <a href>, <ul>, <ol>, <li>, <strong> |
| Media | <img>, <audio>, <video>, <canvas>, <svg> |
| Tables and forms | <table>, <form>, <input type=...>, <select>, <textarea>, <button> |
| HTML5 semantics | <header>, <nav>, <main>, <section>, <article>, <footer> |
HTML5 also brought form validation attributes (required, pattern), localStorage, geolocation and the <canvas> element. Semantic tags help search engines and screen readers, so accessibility (alt text, labels, keyboard navigation) is part of good HTML.
CSS
CSS controls presentation. A rule is selector { property: value; }.
| Topic | Key ideas |
|---|---|
| Selectors | Element, class (.card), id (#main), descendant, attribute, pseudo-classes (:hover) |
| Cascade and specificity | Later and more specific rules win; !important overrides |
| Box model | Content, padding, border, margin |
| Layout | display, position, Flexbox (one-dimensional), Grid (two-dimensional) |
| Responsive design | Relative units (%, rem), media queries, mobile-first |
| Effects | Transitions, animations, transforms, variables (--color) |
CSS can be inline, internal (<style>) or external (a .css file, the best practice).
Today: you rarely write raw pages now, but components in React, Angular and Vue still produce HTML and CSS, and layout bugs are solved with the box model and Flexbox. Tailwind and Bootstrap are CSS frameworks, and Lighthouse checks accessibility and performance.
Unit 2: JavaScript and the DOM
JavaScript makes pages interactive. It is dynamically typed and runs in the browser (and, today, on servers).
Language essentials
| Topic | Notes |
|---|---|
| Variables | let and const (block-scoped); avoid var |
| Types | Number, string, boolean, null, undefined, object, array, function, symbol |
| Equality | Prefer === (strict) over == (which converts types) |
| Functions | Declarations, expressions, arrow functions (x => x * 2), closures (a function remembers its surrounding variables) |
| Objects and prototypes | Objects are key-value maps; inheritance is through prototypes; class is syntax on top of them |
| Arrays | map, filter, reduce, forEach |
| Modern syntax (ES6+) | Template strings, destructuring, spread, modules (import/export) |
The DOM and events
JavaScript reads and changes the page through the DOM: document.querySelector(...), element.textContent, classList. Events (click, submit, input, keydown) run handlers added with addEventListener. Events bubble from the target up through its parents. Form validation on the client improves usability but must always be repeated on the server.
Asynchronous JavaScript
JavaScript is single-threaded with an event loop: slow operations (network, timers) do not block; their callbacks run later. Patterns: callbacks, promises (.then), and async/await, which looks like synchronous code.
const res = await fetch('/api/users'); const users = await res.json();
Today: TypeScript adds static types to JavaScript and is the default for large front ends. The ideas of closures, promises and the event loop are the same in the browser and in Node.js.
Unit 3: XML, JSON and data formats
XML
XML (Extensible Markup Language) stores structured data with user-defined tags. A document must be well-formed (one root, tags properly nested and closed, attribute values quoted) and can be valid against a DTD or an XML Schema (XSD). Namespaces avoid name clashes.
| Tool | Use |
|---|---|
| DOM parser | Loads the whole tree in memory |
| SAX parser | Streams events, low memory |
| XPath | Queries nodes in a document |
| XSLT | Transforms XML to other forms (HTML) |
JSON
JSON is a lighter format of objects {}, arrays [], strings, numbers, booleans and null. It parses directly into JavaScript objects (JSON.parse, JSON.stringify) and has largely replaced XML for web APIs.
| Point | XML | JSON |
|---|---|---|
| Verbosity | Heavy (closing tags) | Compact |
| Schema and tools | XSD, XSLT, XPath, namespaces | JSON Schema |
| Comments, attributes | Yes | No |
| Typical use today | SOAP, configuration, documents, SVG | REST APIs, config, NoSQL |
Web services
SOAP (XML messages, WSDL descriptions, UDDI) is the older enterprise style. REST uses plain HTTP: resources identified by URLs, methods GET, POST, PUT, PATCH, DELETE, status codes (200, 201, 301, 400, 401, 403, 404, 500) and stateless requests.
Today: YAML and JSON are the configuration languages of Kubernetes, CI pipelines and Terraform. SVG and Android layouts are XML. Almost all new APIs are REST/JSON or GraphQL, and OpenAPI describes them in the way WSDL once did.
Unit 4: Server-side programming
The server generates dynamic responses from requests, usually backed by a database.
PHP
An interpreted language embedded in HTML (<?php ... ?>). Form data arrives in $_GET and $_POST; sessions ($_SESSION) and cookies keep state, because HTTP is stateless; MySQLi or PDO connect to databases. PHP powers WordPress and a large part of the web.
Java servlets and JSP
A servlet is a Java class that handles HTTP requests inside a servlet container such as Tomcat. Its life cycle: init() once, service() (calling doGet or doPost) for each request, destroy() at the end. JSP puts Java in HTML pages and compiles to servlets. Session tracking uses cookies, URL rewriting, hidden fields and the HttpSession object. JDBC accesses the database. The pattern MVC separates controller (servlet), view (JSP) and model (Java classes).
Node.js and modern back ends
Node.js runs JavaScript on the server with a non-blocking event loop. Express is the minimal web framework: routes (app.get('/users', ...)), middleware (functions that run before the handler for logging, authentication, parsing) and templating or JSON responses.
Security basics
| Risk | Defence |
|---|---|
| SQL injection | Parameterised queries, never string concatenation |
| Cross-site scripting (XSS) | Escape output, Content Security Policy |
| CSRF | Anti-forgery tokens, SameSite cookies |
| Broken authentication | Hashed passwords (bcrypt), HTTPS, short-lived tokens |
| Insecure data exposure | Validate on the server; authorise every request |
Today: Express (Node.js) is the “main server” style of many companies, with Spring Boot, Django and Flask elsewhere. Sessions are often replaced by JWT tokens or an identity provider (OAuth 2.0, OpenID Connect). The OWASP Top 10 is the checklist for the risks above.
Unit 5: AJAX, frameworks and the modern front end
AJAX
AJAX (Asynchronous JavaScript and XML) updates part of a page without reloading it: JavaScript sends a request in the background (XMLHttpRequest, now fetch) and updates the DOM with the response, usually JSON. It made single-page applications (SPAs) possible, along with WebSockets and server-sent events for live updates.
Frameworks
| Tool | Type | Idea |
|---|---|---|
| jQuery | Library (older) | Simplified DOM and AJAX |
| Angular | Full framework (TypeScript) | Components, templates, dependency injection, RxJS |
| React | UI library | Components, virtual DOM, state and props, hooks |
| Vue | Progressive framework | Reactive templates |
| Next.js, Nuxt | Meta-frameworks | Server-side rendering, routing |
A component combines markup, logic and style. In an SPA, the router changes views without reloading, and state management keeps data consistent. Server-side rendering (SSR) and static generation improve first load and search-engine visibility.
Performance and deployment
Caching (browser, CDN), minification and bundling (Webpack, Vite), lazy loading, compression and HTTP/2 all speed up delivery. Progressive Web Apps work offline. Build tools produce static files that are often hosted on object storage behind a CDN.
Today: a typical stack is an Angular or React SPA served from S3 and CloudFront, calling REST/JSON APIs on Node.js microservices, with the browser handling sessions through cookies or tokens. Building, testing and deploying that front end (
npm ci,ng build, cache invalidation) is a standard part of a DevOps pipeline.
One-minute recap
| Unit | Key idea | You meet it in |
|---|---|---|
| 1. HTML and CSS | DOM, semantic tags, box model, Flexbox and Grid, responsive design | Components in React and Angular, Lighthouse |
| 2. JavaScript | Closures, events, event loop, promises, async/await | Front-end code, Node.js |
| 3. XML and JSON | Well-formed XML, JSON, SOAP vs REST | YAML and JSON config, REST APIs, OpenAPI |
| 4. Server side | Sessions, servlets, Express, injection and XSS defences | Node.js and Spring services, OWASP checks |
| 5. AJAX and frameworks | fetch, SPAs, virtual DOM, SSR, bundling |
Angular and React builds, CDNs, CI pipelines |
Next in Engineering Revisited: Data Warehousing & Data Mining.
Written by Claude, Anthropic’s AI assistant, as part of Engineering Revisited, a quick refresher of the B.Tech subjects one at a time.