English:Web Development
Web Development
Introduction
Web Development is the engineering and design of websites and web applications that run through browsers and networked services. At university level, you should understand not only how to write HTML, CSS, and JavaScript, but also how the browser, network protocols, servers, APIs, accessibility standards, security controls, testing practices, version control, and deployment workflows fit together.
This aiMOOC treats the Web as a layered system. You will move from semantic document structure and presentation to programming, client-server communication, data exchange, quality assurance, and responsible deployment. The goal is to help you reason about trade-offs rather than memorize isolated syntax.
By the end of the course, you should be able to design and implement a small standards-based web application, explain how it communicates over HTTP, test it for accessibility and performance, manage it with version control, and justify basic security decisions.
Learning Objectives
After completing this aiMOOC, you should be able to:
- Web architecture: Explain how browsers, servers, DNS, URLs, HTTP, and resources interact when a page loads.
- HTML: Create semantic, structured, accessible documents using modern HTML.
- CSS: Build responsive layouts and explain the cascade, inheritance, specificity, and layout systems.
- JavaScript: Use JavaScript to work with data, events, functions, asynchronous operations, and the Document Object Model.
- APIs: Consume HTTP-based APIs and reason about client-server boundaries.
- Web accessibility: Apply accessibility principles and test interfaces against WCAG-oriented criteria.
- Web security: Identify common web security risks and apply defensive development practices.
- Web performance: Measure and improve loading, interactivity, and visual stability.
- Version control: Use Git-based workflows to track changes and collaborate.
- Software testing: Plan and perform functional, usability, accessibility, and browser testing.
The Web as a System
Client-Server Architecture
Most web interactions follow a client-server model. A browser acts as a client. It requests a resource from a server, and the server returns a response. Modern systems may also include content delivery networks, reverse proxies, application servers, databases, caches, authentication services, and third-party APIs.
A URL identifies a resource. When you navigate to a URL, the browser may resolve a domain name through the DNS, establish a network connection, negotiate encrypted transport for HTTPS, send an HTTP request, receive a response, and then request additional resources referenced by the returned document.
HTTP Requests and Responses
HTTP is an application-layer protocol used for transferring web resources and for many API interactions. A request includes a method, target, headers, and sometimes a body. A response includes a status code, headers, and sometimes a body.
Common request methods include GET for retrieval, POST for submitting or creating data, PUT or PATCH for updates, and DELETE for deletion. HTTP is fundamentally stateless: each request is independent, although applications can add state through cookies, tokens, server-side sessions, or other mechanisms.
A useful debugging habit is to inspect the browser's Network panel. There you can see request URLs, methods, status codes, transferred sizes, timing information, response headers, caching behavior, and failed resources.
HTTPS and Transport Security
HTTPS combines HTTP with encrypted transport using TLS. Encryption protects data in transit against passive observation and helps clients authenticate the server. However, HTTPS does not automatically make an application secure: insecure authorization, injection flaws, exposed secrets, unsafe dependencies, and application logic errors can still cause serious vulnerabilities.
Front-End Foundations
HTML: Meaning and Structure
HTML is the Web's core markup language. Modern HTML is maintained as a Living Standard. You should use elements according to their semantic meaning rather than their default appearance. For example, headings represent document structure, navigation elements identify navigation regions, buttons represent actions, and form controls should have accessible labels.
A strong HTML document normally includes a declared language, meaningful headings, landmarks, descriptive link text, alternative text for informative images, labels for form controls, and valid relationships among elements. Semantic HTML improves accessibility, maintainability, search indexing, and interoperability with assistive technologies.
University-level question: If two pages look identical in a browser, can one still be technically better? Yes. Semantic structure, accessible naming, keyboard operation, metadata, performance, and resilience can differ substantially even when the visual result appears the same.
CSS: Presentation and Layout
CSS controls presentation. Its behavior depends on the cascade, origin, importance, specificity, source order, inheritance, and computed values. University-level understanding means being able to predict which declaration wins and to design a maintainable styling strategy.
Modern layout commonly uses Flexbox for one-dimensional arrangement and Grid for two-dimensional layouts. Responsive design combines flexible dimensions, media queries, intrinsic sizing, and content-aware layout decisions.
Responsive Web Design
Responsive design aims to make interfaces work across different viewport sizes, input modes, orientations, and device capabilities. It is not merely "making a desktop page smaller." Good responsive design prioritizes content, preserves interaction quality, avoids horizontal scrolling, and adapts layout without hiding essential functionality.
When designing responsively, test real content at narrow, medium, and wide widths. Do not target only a few named devices. Prefer layouts that respond to available space and content constraints.
JavaScript and the Browser
JavaScript as a Programming Language
JavaScript is a general-purpose programming language standardized through ECMAScript and deeply integrated with web browsers. It supports multiple programming styles, including procedural, functional, object-oriented, and event-driven approaches.
Important topics include values and types, variables, expressions, control flow, functions, objects, arrays, modules, exceptions, promises, asynchronous functions, and event handling. A strong developer also understands the difference between the language itself and browser-provided Web APIs.
The Document Object Model
The DOM represents a parsed document as a tree of objects. JavaScript can query this tree, read or change properties, create or remove nodes, respond to events, and update the interface.
DOM manipulation should remain understandable and predictable. Avoid creating unnecessary global state, attach event handlers intentionally, preserve keyboard accessibility, and keep application state separate from purely visual changes when possible.
Events and Asynchronous Programming
Web applications are event-driven. User actions, timers, network responses, browser lifecycle events, and other signals may trigger callbacks. JavaScript's event loop allows asynchronous tasks to be coordinated without treating every operation as a blocking sequence.
Promises and the async and await syntax are central tools for asynchronous work. When fetching data, always consider failures, timeouts, invalid data, loading states, empty states, and cancellation. A successful network call is only one possible outcome.
APIs, Data, and Back-End Concepts
Fetching Data
The browser Fetch API allows JavaScript to make HTTP requests. Many web APIs exchange data using JSON. A client should not assume that every response is successful or that every response body has the expected structure.
When consuming an API, reason about:
- HTTP status code: What does the status indicate?
- Data validation: Is the received structure what the client expects?
- Authentication: How does the server know who is making the request?
- Authorization: Is the requester allowed to perform the action?
- Caching: Can the response be reused safely?
- Error handling: What should the user see when the operation fails?
Server-Side Responsibilities
Server-side development can be implemented with many languages and frameworks. Regardless of technology, common responsibilities include routing, authentication, authorization, validation, business logic, database access, logging, rate limiting, error handling, and generating or returning resources.
A useful architectural principle is never trust client input. Browser-side validation improves usability, but security-sensitive validation and authorization decisions must be enforced on the server.
Databases and Persistence
Web applications often persist data in relational or non-relational databases. The choice depends on data relationships, consistency needs, query patterns, scale, operational expertise, and system constraints.
When integrating a database, use parameterized queries or safe abstractions, enforce access rules, protect credentials, design backups, and consider privacy requirements. Avoid placing secrets directly in front-end code because anything delivered to the browser can be inspected by users.
Accessibility and Inclusive Design
Web accessibility means designing content and functionality so that people with diverse abilities and technologies can perceive, understand, navigate, and interact with the Web. Accessibility is both a technical quality concern and an ethical responsibility.
The W3C's WCAG 2.2 organizes accessibility around four principles: content should be perceivable, operable, understandable, and robust. Practical development work includes semantic HTML, keyboard accessibility, visible focus, text alternatives, sufficient contrast, clear labels and instructions, accessible error messages, and testing with multiple input methods.
Automated accessibility tools are useful, but they cannot determine every issue. Human evaluation remains necessary, especially for meaning, focus order, task completion, alternative text quality, and usability with assistive technologies.
Web Security
Web security is a continuous engineering activity rather than a final checklist. The OWASP Top 10 is a widely used awareness resource for major web application security risks.
Important defensive practices include:
- Access control: Enforce permissions on the server for every protected operation.
- Input validation: Validate untrusted data and use context-appropriate output encoding.
- Cross-site scripting: Avoid unsafe HTML injection and use defensive browser controls such as Content Security Policy where appropriate.
- Cross-site request forgery: Use appropriate anti-forgery protections for state-changing requests.
- Authentication: Protect credentials, sessions, reset flows, and multi-factor processes.
- Dependency management: Track and update third-party packages, and minimize unnecessary dependencies.
- Secrets management: Keep API keys, passwords, and private tokens out of client bundles and public repositories.
- Logging: Record security-relevant events without exposing sensitive data.
Security design should include threat modeling: identify assets, trust boundaries, possible attackers, attack paths, and mitigations before deployment.
Performance and User Experience
Web performance affects usability, accessibility, resource consumption, and perceived quality. Performance work should begin with measurement rather than intuition.
Core Web Vitals focus on loading, interactivity, and visual stability. Common optimization strategies include reducing unnecessary JavaScript, compressing and appropriately sizing images, caching reusable resources, avoiding render-blocking work, minimizing layout shifts, lazy-loading suitable off-screen resources, and reducing third-party overhead.
Use browser developer tools, Lighthouse-style audits, network waterfalls, performance traces, and field data where available. Laboratory tests are reproducible, while real-user measurements reveal how the application behaves across actual devices and networks.
Version Control and Collaboration
Git is a distributed version control system. It records project history, enables branching and merging, supports collaboration, and makes changes reviewable.
A disciplined workflow uses meaningful commits, clear branch purposes, code review, issue tracking, and automated checks. Commit messages should explain the intent of a change. Large features are easier to review when divided into coherent, testable increments.
Testing and Quality Assurance
A web application can fail even when its code runs without syntax errors. Quality assurance should cover several dimensions:
- Unit testing: Verify small units of behavior in isolation.
- Integration testing: Verify interactions among components, services, or modules.
- End-to-end testing: Verify complete user journeys.
- Accessibility testing: Evaluate semantics, keyboard use, focus, labels, contrast, and assistive-technology behavior.
- Cross-browser testing: Check behavior across relevant browsers and devices.
- Performance testing: Measure loading, responsiveness, and runtime behavior.
- Security testing: Test authorization boundaries, input handling, dependencies, configuration, and exposed data.
Testing strategy should be risk-based. Critical flows such as authentication, payment, data loss prevention, or grading systems usually deserve stronger automated and manual coverage than decorative features.
Deployment and Operations
Deployment moves an application from a development environment to a publicly or privately reachable environment. Typical steps include building assets, configuring environment variables, provisioning infrastructure, applying database migrations, deploying services, running checks, and monitoring the result.
A production system should support logging, monitoring, backup, rollback, and incident response. Continuous integration and continuous delivery can automate testing and deployment stages, but automation should make the process safer rather than merely faster.
Do not commit production secrets to version control. Separate configuration from source code, apply least privilege to credentials, and rotate compromised secrets immediately.
Professional and Ethical Considerations
Web developers influence privacy, accessibility, environmental resource use, information quality, and user autonomy. Dark patterns, inaccessible interfaces, unnecessary tracking, insecure data handling, and manipulative defaults can harm users even when the application "works."
At university level, technical decisions should therefore be evaluated against multiple criteria: correctness, maintainability, security, privacy, accessibility, performance, sustainability, and social impact.
Sources and Further Reading
- HTML Living Standard: Authoritative specification for modern HTML.
- MDN HTTP: Reference and learning material for HTTP and browser networking.
- WCAG 2.2: W3C accessibility recommendation.
- OWASP Top 10: Awareness resource for major web application security risks.
- Web Vitals: Guidance on user-centered web performance metrics.
Interactive Tasks
Quiz: Test Your Knowledge
What is the primary role of semantic HTML? (To describe the meaning and structure of content) (!To replace all CSS styling) (!To encrypt data sent to a server) (!To store database records)
Which statement best describes HTTP? (It is an application-layer request-response protocol) (!It is a database query language) (!It is a browser-only programming language) (!It is a file compression format)
What does the DOM represent in a browser? (A tree-like object representation of a document) (!A server-side database schema) (!A network encryption algorithm) (!A CSS preprocessor)
Which CSS layout system is designed primarily for two-dimensional layouts? (CSS Grid) (!HTTP) (!JSON) (!Git)
What is a key purpose of responsive web design? (To adapt interfaces to varying available space and device conditions) (!To make every website look identical) (!To remove all images from mobile pages) (!To replace semantic HTML with JavaScript)
Which practice is essential for authorization security? (Enforce permissions on the server) (!Trust hidden form fields) (!Store secrets in client code) (!Disable all error handling)
What is a Git commit? (A recorded snapshot of project changes with metadata) (!A browser rendering mode) (!A type of HTTP response) (!A CSS selector)
Why is automated accessibility testing insufficient by itself? (Some accessibility issues require human judgment and interaction testing) (!Automated tools cannot inspect any HTML) (!Accessibility applies only to printed documents) (!Keyboard testing is unrelated to accessibility)
Which metric is associated with visual stability in Core Web Vitals? (Cumulative Layout Shift) (!Domain Name System) (!Hypertext Transfer Protocol) (!Document Object Model)
Why should secrets not be placed in front-end JavaScript? (Because browser-delivered code can be inspected by users) (!Because JavaScript cannot contain strings) (!Because browsers automatically delete constants) (!Because CSS exposes them to search engines)
Memory Game
| SemanticHTML | Markup that communicates the meaning and structure of content |
| Cascade | The CSS process that resolves competing declarations |
| DOM | The object tree through which scripts can interact with a document |
| HTTP | The application-layer protocol used for web requests and responses |
| TLS | The protocol used to encrypt transport for HTTPS |
| Git | A distributed version control system |
| Accessibility | The practice of making web content usable in diverse circumstances |
Drag and Drop
| Match the correct terms. | Topic |
|---|---|
| Semantic structure | HTML |
| Responsive layout | CSS |
| Event handling | JavaScript |
| Request and response | HTTP |
| Version history | Git |
...
Crossword Puzzle
| Browser | Which client application commonly renders web pages? |
| Stylesheet | What kind of resource typically contains CSS presentation rules? |
| JavaScript | Which language commonly adds behavior and interactivity in the browser? |
| Protocol | What general type of communication rule is HTTP? |
| Semantic | What adjective describes HTML chosen for meaning rather than appearance? |
| Accessibility | What quality aims to make web content usable by people with diverse abilities? |
LearningApps
Cloze Text
Open-Ended Tasks
Easy
- Semantic page audit: Choose a simple web page and identify where semantic HTML elements could replace generic containers. Explain at least five changes and why they improve structure.
- Responsive sketch: Draw three wireframes for the same page at narrow, medium, and wide widths. Show how navigation, content, and controls adapt without removing essential functionality.
- Network observation: Open a browser's developer tools on a public website and document five HTTP requests, including resource type, status code, and what each request contributes to the page.
- Accessibility walkthrough: Navigate a page using only the keyboard and write a short report on focus visibility, order, labels, and any barriers you encounter.
Standard
- Interactive interface: Build a small HTML, CSS, and JavaScript interface with at least one form, one dynamic DOM update, and clear keyboard behavior. Document your design decisions.
- API investigation: Use a public API to fetch JSON data, display a meaningful subset in a page, and implement visible loading, empty, success, and error states.
- Performance experiment: Create two versions of a media-rich page, change one performance-related factor such as image size or script loading, and compare measurements using browser tools.
- Developer interview: Interview a professional web developer about code review, testing, deployment, accessibility, and security. Summarize the workflow and compare it with course principles.
Advanced
- Threat model: Create a threat model for a hypothetical university web application. Identify assets, trust boundaries, likely threats, abuse cases, and concrete mitigations.
- Accessible component study: Design and implement an interactive component such as a modal dialog or disclosure widget, test it with keyboard-only navigation and an accessibility tree, and justify its semantics and focus behavior.
- Full-stack prototype: Build a small client-server application with persistent data, validation, authorization rules, API endpoints, and a documented deployment process. Include tests for at least one critical flow.
- Web engineering research: Compare two architectural approaches for the same web application, such as server-rendered pages and a client-heavy single-page application. Evaluate accessibility, performance, security, maintainability, and operational complexity.
Learning Assessment
- Architecture reasoning: Given a page-load trace, explain the likely sequence from URL entry to rendering and identify where DNS, TLS, HTTP, HTML parsing, CSS, and JavaScript participate.
- Code quality review: Review a short web project and propose improvements to semantics, CSS organization, JavaScript structure, accessibility, security, and testability, justifying each recommendation.
- API failure analysis: Analyze a scenario in which an API returns slow, malformed, unauthorized, and empty responses. Design client behavior for each case and explain which checks belong on the server.
- Security transfer task: Given a feature that allows users to edit profile data, identify possible authorization, injection, CSRF, privacy, and logging risks and propose mitigations.
- Performance decision task: Compare two implementation choices for a media-rich interface and defend the better option using evidence about transfer size, rendering cost, interactivity, caching, and user experience.
- Accessibility evaluation: Evaluate a multi-step form against semantic structure, labels, instructions, error recovery, keyboard use, focus management, and WCAG-oriented principles, then prioritize fixes.
- Deployment scenario: Design a release plan for a web application that includes automated tests, environment configuration, secret handling, monitoring, rollback, and post-deployment verification.
Evidence of Learning
Evidence of learning should demonstrate both technical competence and engineering judgment. Strong evidence may include:
Knowledge
- Clear explanations of browser-server communication, HTTP, HTML semantics, CSS behavior, DOM interaction, asynchronous programming, APIs, accessibility, performance, security, Git, testing, and deployment.
- Accurate use of technical vocabulary and the ability to distinguish language features, browser APIs, network protocols, and server responsibilities.
Skills
- Ability to inspect and debug pages with developer tools.
- Ability to build responsive and accessible interfaces.
- Ability to fetch, validate, and present remote data while handling failures.
- Ability to use Git to record and communicate development history.
- Ability to identify risks and propose security, performance, and accessibility improvements.
Products
- A standards-based web page or application with documented requirements.
- A small portfolio of tests, audits, or technical reports.
- A repository with coherent commits and readable documentation.
- A deployment or prototype demonstrating a reproducible build and release process.
Transfer achievements
- Ability to justify design choices under new constraints.
- Ability to compare alternative architectures rather than following tools by habit.
- Ability to recognize when a local coding decision creates broader consequences for users, maintainers, security, privacy, or operations.
- Ability to use specifications, documentation, measurements, and testing evidence to resolve unfamiliar web development problems.
OERs on the Topic
Linked Learning Areas
Web development connects concepts from Computer science, Software engineering, Human-computer interaction, Computer networks, Information security, Database, User experience design, and Project management. At university level, the strongest work combines these areas rather than treating the browser interface as an isolated coding exercise.