<?xml version="1.0"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="de">
	<id>https://staging.moocwiki.org/index.php?action=history&amp;feed=atom&amp;title=English%3AWeb_Development</id>
	<title>English:Web Development - Versionsgeschichte</title>
	<link rel="self" type="application/atom+xml" href="https://staging.moocwiki.org/index.php?action=history&amp;feed=atom&amp;title=English%3AWeb_Development"/>
	<link rel="alternate" type="text/html" href="https://staging.moocwiki.org/index.php?title=English:Web_Development&amp;action=history"/>
	<updated>2026-09-18T23:23:03Z</updated>
	<subtitle>Versionsgeschichte dieser Seite in MOOCsWiki Staging</subtitle>
	<generator>MediaWiki 1.46.0</generator>
	<entry>
		<id>https://staging.moocwiki.org/index.php?title=English:Web_Development&amp;diff=48979&amp;oldid=prev</id>
		<title>Glanz: aiMOOC über GPT aiMOOC Action erstellt</title>
		<link rel="alternate" type="text/html" href="https://staging.moocwiki.org/index.php?title=English:Web_Development&amp;diff=48979&amp;oldid=prev"/>
		<updated>2026-08-31T20:47:00Z</updated>

		<summary type="html">&lt;p&gt;aiMOOC über GPT aiMOOC Action erstellt&lt;/p&gt;
&lt;p&gt;&lt;b&gt;Neue Seite&lt;/b&gt;&lt;/p&gt;&lt;div&gt;{{T}}&lt;br /&gt;
[[Category:English]]&lt;br /&gt;
[[Category:Web Development]]&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
= Introduction =&lt;br /&gt;
&lt;br /&gt;
&amp;#039;&amp;#039;&amp;#039;Web Development&amp;#039;&amp;#039;&amp;#039; 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.&lt;br /&gt;
&lt;br /&gt;
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.&lt;br /&gt;
&lt;br /&gt;
[[File:CSS3 and HTML5 logos and wordmarks.svg|500px|frameless|center]]&lt;br /&gt;
&lt;br /&gt;
{{#ev:youtube|https://www.youtube.com/watch?v=dX8396ZmSPk|500|center}}&lt;br /&gt;
&lt;br /&gt;
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.&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
= Learning Objectives =&lt;br /&gt;
&lt;br /&gt;
After completing this aiMOOC, you should be able to:&lt;br /&gt;
# [[English:Web architecture|Web architecture]]: Explain how browsers, servers, DNS, URLs, HTTP, and resources interact when a page loads.&lt;br /&gt;
# [[English:HTML|HTML]]: Create semantic, structured, accessible documents using modern HTML.&lt;br /&gt;
# [[English:Cascading Style Sheets|CSS]]: Build responsive layouts and explain the cascade, inheritance, specificity, and layout systems.&lt;br /&gt;
# [[English:JavaScript|JavaScript]]: Use JavaScript to work with data, events, functions, asynchronous operations, and the Document Object Model.&lt;br /&gt;
# [[English:Application programming interface|APIs]]: Consume HTTP-based APIs and reason about client-server boundaries.&lt;br /&gt;
# [[English:Web accessibility|Web accessibility]]: Apply accessibility principles and test interfaces against WCAG-oriented criteria.&lt;br /&gt;
# [[English:Web security|Web security]]: Identify common web security risks and apply defensive development practices.&lt;br /&gt;
# [[English:Web performance|Web performance]]: Measure and improve loading, interactivity, and visual stability.&lt;br /&gt;
# [[English:Version control|Version control]]: Use Git-based workflows to track changes and collaborate.&lt;br /&gt;
# [[English:Software testing|Software testing]]: Plan and perform functional, usability, accessibility, and browser testing.&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
= The Web as a System =&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
== Client-Server Architecture ==&lt;br /&gt;
&lt;br /&gt;
Most web interactions follow a [[English:Client-server model|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.&lt;br /&gt;
&lt;br /&gt;
[[File:Client-server model.svg|600px|frameless|center]]&lt;br /&gt;
&lt;br /&gt;
A URL identifies a resource. When you navigate to a URL, the browser may resolve a domain name through the [[English:Domain Name System|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.&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
== HTTP Requests and Responses ==&lt;br /&gt;
&lt;br /&gt;
[[English:Hypertext Transfer Protocol|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.&lt;br /&gt;
&lt;br /&gt;
Common request methods include &amp;#039;&amp;#039;&amp;#039;GET&amp;#039;&amp;#039;&amp;#039; for retrieval, &amp;#039;&amp;#039;&amp;#039;POST&amp;#039;&amp;#039;&amp;#039; for submitting or creating data, &amp;#039;&amp;#039;&amp;#039;PUT&amp;#039;&amp;#039;&amp;#039; or &amp;#039;&amp;#039;&amp;#039;PATCH&amp;#039;&amp;#039;&amp;#039; for updates, and &amp;#039;&amp;#039;&amp;#039;DELETE&amp;#039;&amp;#039;&amp;#039; for deletion. HTTP is fundamentally stateless: each request is independent, although applications can add state through cookies, tokens, server-side sessions, or other mechanisms.&lt;br /&gt;
&lt;br /&gt;
A useful debugging habit is to inspect the browser&amp;#039;s Network panel. There you can see request URLs, methods, status codes, transferred sizes, timing information, response headers, caching behavior, and failed resources.&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
== HTTPS and Transport Security ==&lt;br /&gt;
&lt;br /&gt;
[[English:HTTPS|HTTPS]] combines HTTP with encrypted transport using [[English:Transport Layer Security|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.&lt;br /&gt;
&lt;br /&gt;
[[File:HTTPS and padlock in website address bar.jpg|600px|frameless|center]]&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
= Front-End Foundations =&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
== HTML: Meaning and Structure ==&lt;br /&gt;
&lt;br /&gt;
[[English:HTML|HTML]] is the Web&amp;#039;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.&lt;br /&gt;
&lt;br /&gt;
[[File:HTML5 logo and wordmark.svg|350px|frameless|center]]&lt;br /&gt;
&lt;br /&gt;
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.&lt;br /&gt;
&lt;br /&gt;
&amp;#039;&amp;#039;&amp;#039;University-level question:&amp;#039;&amp;#039;&amp;#039; 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.&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
== CSS: Presentation and Layout ==&lt;br /&gt;
&lt;br /&gt;
[[English:Cascading Style Sheets|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.&lt;br /&gt;
&lt;br /&gt;
[[File:CSS3 logo and wordmark.svg|320px|frameless|center]]&lt;br /&gt;
&lt;br /&gt;
Modern layout commonly uses [[English:CSS Flexible Box Layout|Flexbox]] for one-dimensional arrangement and [[English:CSS grid layout|Grid]] for two-dimensional layouts. Responsive design combines flexible dimensions, media queries, intrinsic sizing, and content-aware layout decisions.&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
== Responsive Web Design ==&lt;br /&gt;
&lt;br /&gt;
Responsive design aims to make interfaces work across different viewport sizes, input modes, orientations, and device capabilities. It is not merely &amp;quot;making a desktop page smaller.&amp;quot; Good responsive design prioritizes content, preserves interaction quality, avoids horizontal scrolling, and adapts layout without hiding essential functionality.&lt;br /&gt;
&lt;br /&gt;
[[File:Responsive Web Design Demo Template.svg|650px|frameless|center]]&lt;br /&gt;
&lt;br /&gt;
{{#ev:youtube|https://www.youtube.com/watch?v=dhrX_biPH8c|500|center}}&lt;br /&gt;
&lt;br /&gt;
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.&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
= JavaScript and the Browser =&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
== JavaScript as a Programming Language ==&lt;br /&gt;
&lt;br /&gt;
[[English:JavaScript|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.&lt;br /&gt;
&lt;br /&gt;
[[File:JavaScript-logo.png|320px|frameless|center]]&lt;br /&gt;
&lt;br /&gt;
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.&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
== The Document Object Model ==&lt;br /&gt;
&lt;br /&gt;
The [[English:Document Object Model|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.&lt;br /&gt;
&lt;br /&gt;
[[File:DocumentObjectModel.svg|500px|frameless|center]]&lt;br /&gt;
&lt;br /&gt;
{{#ev:youtube|https://www.youtube.com/watch?v=5fb2aPlgoys|500|center}}&lt;br /&gt;
&lt;br /&gt;
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.&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
== Events and Asynchronous Programming ==&lt;br /&gt;
&lt;br /&gt;
Web applications are event-driven. User actions, timers, network responses, browser lifecycle events, and other signals may trigger callbacks. JavaScript&amp;#039;s event loop allows asynchronous tasks to be coordinated without treating every operation as a blocking sequence.&lt;br /&gt;
&lt;br /&gt;
Promises and the &amp;#039;&amp;#039;&amp;#039;async&amp;#039;&amp;#039;&amp;#039; and &amp;#039;&amp;#039;&amp;#039;await&amp;#039;&amp;#039;&amp;#039; 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.&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
= APIs, Data, and Back-End Concepts =&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
== Fetching Data ==&lt;br /&gt;
&lt;br /&gt;
The browser [[English:Fetch API|Fetch API]] allows JavaScript to make HTTP requests. Many web APIs exchange data using [[English:JSON|JSON]]. A client should not assume that every response is successful or that every response body has the expected structure.&lt;br /&gt;
&lt;br /&gt;
When consuming an API, reason about:&lt;br /&gt;
# [[English:HTTP status code|HTTP status code]]: What does the status indicate?&lt;br /&gt;
# [[English:Data validation|Data validation]]: Is the received structure what the client expects?&lt;br /&gt;
# [[English:Authentication|Authentication]]: How does the server know who is making the request?&lt;br /&gt;
# [[English:Authorization|Authorization]]: Is the requester allowed to perform the action?&lt;br /&gt;
# [[English:Caching|Caching]]: Can the response be reused safely?&lt;br /&gt;
# [[English:Error handling|Error handling]]: What should the user see when the operation fails?&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
== Server-Side Responsibilities ==&lt;br /&gt;
&lt;br /&gt;
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.&lt;br /&gt;
&lt;br /&gt;
A useful architectural principle is &amp;#039;&amp;#039;&amp;#039;never trust client input&amp;#039;&amp;#039;&amp;#039;. Browser-side validation improves usability, but security-sensitive validation and authorization decisions must be enforced on the server.&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
== Databases and Persistence ==&lt;br /&gt;
&lt;br /&gt;
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.&lt;br /&gt;
&lt;br /&gt;
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.&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
= Accessibility and Inclusive Design =&lt;br /&gt;
&lt;br /&gt;
[[English:Web accessibility|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.&lt;br /&gt;
&lt;br /&gt;
[[File:Web Accessibility laurel.svg|300px|frameless|center]]&lt;br /&gt;
&lt;br /&gt;
{{#ev:youtube|https://www.youtube.com/watch?v=20SHvU2PKsM|500|center}}&lt;br /&gt;
&lt;br /&gt;
The W3C&amp;#039;s WCAG 2.2 organizes accessibility around four principles: content should be &amp;#039;&amp;#039;&amp;#039;perceivable, operable, understandable, and robust&amp;#039;&amp;#039;&amp;#039;. 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.&lt;br /&gt;
&lt;br /&gt;
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.&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
= Web Security =&lt;br /&gt;
&lt;br /&gt;
Web security is a continuous engineering activity rather than a final checklist. The [[English:OWASP|OWASP]] Top 10 is a widely used awareness resource for major web application security risks.&lt;br /&gt;
&lt;br /&gt;
Important defensive practices include:&lt;br /&gt;
# [[English:Access control|Access control]]: Enforce permissions on the server for every protected operation.&lt;br /&gt;
# [[English:Input validation|Input validation]]: Validate untrusted data and use context-appropriate output encoding.&lt;br /&gt;
# [[English:Cross-site scripting|Cross-site scripting]]: Avoid unsafe HTML injection and use defensive browser controls such as Content Security Policy where appropriate.&lt;br /&gt;
# [[English:Cross-site request forgery|Cross-site request forgery]]: Use appropriate anti-forgery protections for state-changing requests.&lt;br /&gt;
# [[English:Authentication|Authentication]]: Protect credentials, sessions, reset flows, and multi-factor processes.&lt;br /&gt;
# [[English:Dependency management|Dependency management]]: Track and update third-party packages, and minimize unnecessary dependencies.&lt;br /&gt;
# [[English:Secrets management|Secrets management]]: Keep API keys, passwords, and private tokens out of client bundles and public repositories.&lt;br /&gt;
# [[English:Logging|Logging]]: Record security-relevant events without exposing sensitive data.&lt;br /&gt;
&lt;br /&gt;
Security design should include threat modeling: identify assets, trust boundaries, possible attackers, attack paths, and mitigations before deployment.&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
= Performance and User Experience =&lt;br /&gt;
&lt;br /&gt;
Web performance affects usability, accessibility, resource consumption, and perceived quality. Performance work should begin with measurement rather than intuition.&lt;br /&gt;
&lt;br /&gt;
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.&lt;br /&gt;
&lt;br /&gt;
{{#ev:youtube|https://www.youtube.com/watch?v=Mv-l3-tJgGk|500|center}}&lt;br /&gt;
&lt;br /&gt;
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.&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
= Version Control and Collaboration =&lt;br /&gt;
&lt;br /&gt;
[[English:Git|Git]] is a distributed version control system. It records project history, enables branching and merging, supports collaboration, and makes changes reviewable.&lt;br /&gt;
&lt;br /&gt;
[[File:Git-logo.svg|400px|frameless|center]]&lt;br /&gt;
&lt;br /&gt;
{{#ev:youtube|https://www.youtube.com/watch?v=RGOj5yH7evk|500|center}}&lt;br /&gt;
&lt;br /&gt;
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.&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
= Testing and Quality Assurance =&lt;br /&gt;
&lt;br /&gt;
A web application can fail even when its code runs without syntax errors. Quality assurance should cover several dimensions:&lt;br /&gt;
&lt;br /&gt;
# [[English:Unit testing|Unit testing]]: Verify small units of behavior in isolation.&lt;br /&gt;
# [[English:Integration testing|Integration testing]]: Verify interactions among components, services, or modules.&lt;br /&gt;
# [[English:End-to-end testing|End-to-end testing]]: Verify complete user journeys.&lt;br /&gt;
# [[English:Accessibility testing|Accessibility testing]]: Evaluate semantics, keyboard use, focus, labels, contrast, and assistive-technology behavior.&lt;br /&gt;
# [[English:Cross-browser testing|Cross-browser testing]]: Check behavior across relevant browsers and devices.&lt;br /&gt;
# [[English:Performance testing|Performance testing]]: Measure loading, responsiveness, and runtime behavior.&lt;br /&gt;
# [[English:Security testing|Security testing]]: Test authorization boundaries, input handling, dependencies, configuration, and exposed data.&lt;br /&gt;
&lt;br /&gt;
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.&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
= Deployment and Operations =&lt;br /&gt;
&lt;br /&gt;
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.&lt;br /&gt;
&lt;br /&gt;
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.&lt;br /&gt;
&lt;br /&gt;
Do not commit production secrets to version control. Separate configuration from source code, apply least privilege to credentials, and rotate compromised secrets immediately.&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
= Professional and Ethical Considerations =&lt;br /&gt;
&lt;br /&gt;
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 &amp;quot;works.&amp;quot;&lt;br /&gt;
&lt;br /&gt;
At university level, technical decisions should therefore be evaluated against multiple criteria: correctness, maintainability, security, privacy, accessibility, performance, sustainability, and social impact.&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
= Sources and Further Reading =&lt;br /&gt;
&lt;br /&gt;
# [https://html.spec.whatwg.org/ HTML Living Standard]: Authoritative specification for modern HTML.&lt;br /&gt;
# [https://developer.mozilla.org/en-US/docs/Web/HTTP MDN HTTP]: Reference and learning material for HTTP and browser networking.&lt;br /&gt;
# [https://www.w3.org/TR/WCAG22/ WCAG 2.2]: W3C accessibility recommendation.&lt;br /&gt;
# [https://owasp.org/Top10/ OWASP Top 10]: Awareness resource for major web application security risks.&lt;br /&gt;
# [https://web.dev/articles/vitals Web Vitals]: Guidance on user-centered web performance metrics.&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
= Interactive Tasks =&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
== Quiz: Test Your Knowledge ==&lt;br /&gt;
&lt;br /&gt;
{{MC}}&lt;br /&gt;
&lt;br /&gt;
&amp;#039;&amp;#039;&amp;#039;What is the primary role of semantic HTML?&amp;#039;&amp;#039;&amp;#039;&lt;br /&gt;
(To describe the meaning and structure of content)&lt;br /&gt;
(!To replace all CSS styling)&lt;br /&gt;
(!To encrypt data sent to a server)&lt;br /&gt;
(!To store database records)&lt;br /&gt;
&lt;br /&gt;
{{E}}&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{MC}}&lt;br /&gt;
&lt;br /&gt;
&amp;#039;&amp;#039;&amp;#039;Which statement best describes HTTP?&amp;#039;&amp;#039;&amp;#039;&lt;br /&gt;
(It is an application-layer request-response protocol)&lt;br /&gt;
(!It is a database query language)&lt;br /&gt;
(!It is a browser-only programming language)&lt;br /&gt;
(!It is a file compression format)&lt;br /&gt;
&lt;br /&gt;
{{E}}&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{MC}}&lt;br /&gt;
&lt;br /&gt;
&amp;#039;&amp;#039;&amp;#039;What does the DOM represent in a browser?&amp;#039;&amp;#039;&amp;#039;&lt;br /&gt;
(A tree-like object representation of a document)&lt;br /&gt;
(!A server-side database schema)&lt;br /&gt;
(!A network encryption algorithm)&lt;br /&gt;
(!A CSS preprocessor)&lt;br /&gt;
&lt;br /&gt;
{{E}}&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{MC}}&lt;br /&gt;
&lt;br /&gt;
&amp;#039;&amp;#039;&amp;#039;Which CSS layout system is designed primarily for two-dimensional layouts?&amp;#039;&amp;#039;&amp;#039;&lt;br /&gt;
(CSS Grid)&lt;br /&gt;
(!HTTP)&lt;br /&gt;
(!JSON)&lt;br /&gt;
(!Git)&lt;br /&gt;
&lt;br /&gt;
{{E}}&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{MC}}&lt;br /&gt;
&lt;br /&gt;
&amp;#039;&amp;#039;&amp;#039;What is a key purpose of responsive web design?&amp;#039;&amp;#039;&amp;#039;&lt;br /&gt;
(To adapt interfaces to varying available space and device conditions)&lt;br /&gt;
(!To make every website look identical)&lt;br /&gt;
(!To remove all images from mobile pages)&lt;br /&gt;
(!To replace semantic HTML with JavaScript)&lt;br /&gt;
&lt;br /&gt;
{{E}}&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{MC}}&lt;br /&gt;
&lt;br /&gt;
&amp;#039;&amp;#039;&amp;#039;Which practice is essential for authorization security?&amp;#039;&amp;#039;&amp;#039;&lt;br /&gt;
(Enforce permissions on the server)&lt;br /&gt;
(!Trust hidden form fields)&lt;br /&gt;
(!Store secrets in client code)&lt;br /&gt;
(!Disable all error handling)&lt;br /&gt;
&lt;br /&gt;
{{E}}&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{MC}}&lt;br /&gt;
&lt;br /&gt;
&amp;#039;&amp;#039;&amp;#039;What is a Git commit?&amp;#039;&amp;#039;&amp;#039;&lt;br /&gt;
(A recorded snapshot of project changes with metadata)&lt;br /&gt;
(!A browser rendering mode)&lt;br /&gt;
(!A type of HTTP response)&lt;br /&gt;
(!A CSS selector)&lt;br /&gt;
&lt;br /&gt;
{{E}}&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{MC}}&lt;br /&gt;
&lt;br /&gt;
&amp;#039;&amp;#039;&amp;#039;Why is automated accessibility testing insufficient by itself?&amp;#039;&amp;#039;&amp;#039;&lt;br /&gt;
(Some accessibility issues require human judgment and interaction testing)&lt;br /&gt;
(!Automated tools cannot inspect any HTML)&lt;br /&gt;
(!Accessibility applies only to printed documents)&lt;br /&gt;
(!Keyboard testing is unrelated to accessibility)&lt;br /&gt;
&lt;br /&gt;
{{E}}&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{MC}}&lt;br /&gt;
&lt;br /&gt;
&amp;#039;&amp;#039;&amp;#039;Which metric is associated with visual stability in Core Web Vitals?&amp;#039;&amp;#039;&amp;#039;&lt;br /&gt;
(Cumulative Layout Shift)&lt;br /&gt;
(!Domain Name System)&lt;br /&gt;
(!Hypertext Transfer Protocol)&lt;br /&gt;
(!Document Object Model)&lt;br /&gt;
&lt;br /&gt;
{{E}}&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{MC}}&lt;br /&gt;
&lt;br /&gt;
&amp;#039;&amp;#039;&amp;#039;Why should secrets not be placed in front-end JavaScript?&amp;#039;&amp;#039;&amp;#039;&lt;br /&gt;
(Because browser-delivered code can be inspected by users)&lt;br /&gt;
(!Because JavaScript cannot contain strings)&lt;br /&gt;
(!Because browsers automatically delete constants)&lt;br /&gt;
(!Because CSS exposes them to search engines)&lt;br /&gt;
&lt;br /&gt;
{{E}}&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
== Memory Game ==&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;memo-quiz&amp;quot;&amp;gt;&lt;br /&gt;
{|&lt;br /&gt;
|-&lt;br /&gt;
| SemanticHTML || Markup that communicates the meaning and structure of content&lt;br /&gt;
|-&lt;br /&gt;
| Cascade || The CSS process that resolves competing declarations&lt;br /&gt;
|-&lt;br /&gt;
| DOM || The object tree through which scripts can interact with a document&lt;br /&gt;
|-&lt;br /&gt;
| HTTP || The application-layer protocol used for web requests and responses&lt;br /&gt;
|-&lt;br /&gt;
| TLS || The protocol used to encrypt transport for HTTPS&lt;br /&gt;
|-&lt;br /&gt;
| Git || A distributed version control system&lt;br /&gt;
|-&lt;br /&gt;
| Accessibility || The practice of making web content usable in diverse circumstances&lt;br /&gt;
|}&lt;br /&gt;
{{E}}&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
== Drag and Drop ==&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;lueckentext-quiz&amp;quot;&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{| class=&amp;quot;wikitable&amp;quot;&lt;br /&gt;
! Match the correct terms.&lt;br /&gt;
! Topic&lt;br /&gt;
|-&lt;br /&gt;
| &amp;#039;&amp;#039;&amp;#039;Semantic structure&amp;#039;&amp;#039;&amp;#039;&lt;br /&gt;
| HTML&lt;br /&gt;
|-&lt;br /&gt;
| &amp;#039;&amp;#039;&amp;#039;Responsive layout&amp;#039;&amp;#039;&amp;#039;&lt;br /&gt;
| CSS&lt;br /&gt;
|-&lt;br /&gt;
| &amp;#039;&amp;#039;&amp;#039;Event handling&amp;#039;&amp;#039;&amp;#039;&lt;br /&gt;
| JavaScript&lt;br /&gt;
|-&lt;br /&gt;
| &amp;#039;&amp;#039;&amp;#039;Request and response&amp;#039;&amp;#039;&amp;#039;&lt;br /&gt;
| HTTP&lt;br /&gt;
|-&lt;br /&gt;
| &amp;#039;&amp;#039;&amp;#039;Version history&amp;#039;&amp;#039;&amp;#039;&lt;br /&gt;
| Git&lt;br /&gt;
|}&lt;br /&gt;
{{E}}&lt;br /&gt;
&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
...&lt;br /&gt;
&amp;lt;br /&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
== Crossword Puzzle ==&lt;br /&gt;
&lt;br /&gt;
&amp;lt;div class=&amp;quot;kreuzwort-quiz&amp;quot;&amp;gt;&lt;br /&gt;
{|&lt;br /&gt;
|-&lt;br /&gt;
| Browser || Which client application commonly renders web pages?&lt;br /&gt;
|-&lt;br /&gt;
| Stylesheet || What kind of resource typically contains CSS presentation rules?&lt;br /&gt;
|-&lt;br /&gt;
| JavaScript || Which language commonly adds behavior and interactivity in the browser?&lt;br /&gt;
|-&lt;br /&gt;
| Protocol || What general type of communication rule is HTTP?&lt;br /&gt;
|-&lt;br /&gt;
| Semantic || What adjective describes HTML chosen for meaning rather than appearance?&lt;br /&gt;
|-&lt;br /&gt;
| Accessibility || What quality aims to make web content usable by people with diverse abilities?&lt;br /&gt;
|}&lt;br /&gt;
{{E}}&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
== LearningApps ==&lt;br /&gt;
&lt;br /&gt;
&amp;lt;iframe&amp;gt; https://learningapps.org/index.php?s=Web+Development &amp;lt;/iframe&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
== Cloze Text ==&lt;br /&gt;
&lt;br /&gt;
&amp;lt;quiz display=simple&amp;gt;&lt;br /&gt;
{&amp;#039;&amp;#039;&amp;#039;Complete the text.&amp;#039;&amp;#039;&amp;#039;&amp;lt;br&amp;gt;&lt;br /&gt;
|type=&amp;quot;{}&amp;quot;}&lt;br /&gt;
A browser normally acts as the { client } in the client-server model. Web resources are commonly transferred with { HTTP }. HTML provides the document&amp;#039;s { structure }. CSS controls much of the page&amp;#039;s { presentation }. JavaScript can interact with the document through the { DOM }. Secure web transport commonly uses { TLS }. A responsive layout adapts to available { space }. Web accessibility includes reliable operation with a { keyboard }. Version history can be managed with { Git }. Security-sensitive authorization decisions belong on the { server }. Performance work should begin with { measurement }. A production deployment should support monitoring and { rollback }.&lt;br /&gt;
&amp;lt;/quiz&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
= Open-Ended Tasks =&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
=== Easy ===&lt;br /&gt;
# [[English:Semantic page audit|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.&lt;br /&gt;
# [[English:Responsive sketch|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.&lt;br /&gt;
# [[English:Network observation|Network observation]]: Open a browser&amp;#039;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.&lt;br /&gt;
# [[English:Accessibility walkthrough|Accessibility walkthrough]]: Navigate a page using only the keyboard and write a short report on focus visibility, order, labels, and any barriers you encounter.&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
=== Standard ===&lt;br /&gt;
# [[English:Interactive interface|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.&lt;br /&gt;
# [[English:API investigation|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.&lt;br /&gt;
# [[English:Performance experiment|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.&lt;br /&gt;
# [[English:Developer interview|Developer interview]]: Interview a professional web developer about code review, testing, deployment, accessibility, and security. Summarize the workflow and compare it with course principles.&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
=== Advanced ===&lt;br /&gt;
# [[English:Threat model|Threat model]]: Create a threat model for a hypothetical university web application. Identify assets, trust boundaries, likely threats, abuse cases, and concrete mitigations.&lt;br /&gt;
# [[English:Accessible component study|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.&lt;br /&gt;
# [[English:Full-stack prototype|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.&lt;br /&gt;
# [[English:Web engineering research|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.&lt;br /&gt;
&lt;br /&gt;
{{:Open Task - Create a MOOC}}&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
= Learning Assessment =&lt;br /&gt;
&lt;br /&gt;
# [[English:Architecture reasoning|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.&lt;br /&gt;
# [[English:Code quality review|Code quality review]]: Review a short web project and propose improvements to semantics, CSS organization, JavaScript structure, accessibility, security, and testability, justifying each recommendation.&lt;br /&gt;
# [[English:API failure analysis|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.&lt;br /&gt;
# [[English:Security transfer task|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.&lt;br /&gt;
# [[English:Performance decision task|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.&lt;br /&gt;
# [[English:Accessibility evaluation|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.&lt;br /&gt;
# [[English:Deployment scenario|Deployment scenario]]: Design a release plan for a web application that includes automated tests, environment configuration, secret handling, monitoring, rollback, and post-deployment verification.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
= Evidence of Learning =&lt;br /&gt;
&lt;br /&gt;
Evidence of learning should demonstrate both technical competence and engineering judgment. Strong evidence may include:&lt;br /&gt;
&lt;br /&gt;
&amp;#039;&amp;#039;&amp;#039;Knowledge&amp;#039;&amp;#039;&amp;#039;&lt;br /&gt;
# Clear explanations of browser-server communication, HTTP, HTML semantics, CSS behavior, DOM interaction, asynchronous programming, APIs, accessibility, performance, security, Git, testing, and deployment.&lt;br /&gt;
# Accurate use of technical vocabulary and the ability to distinguish language features, browser APIs, network protocols, and server responsibilities.&lt;br /&gt;
&lt;br /&gt;
&amp;#039;&amp;#039;&amp;#039;Skills&amp;#039;&amp;#039;&amp;#039;&lt;br /&gt;
# Ability to inspect and debug pages with developer tools.&lt;br /&gt;
# Ability to build responsive and accessible interfaces.&lt;br /&gt;
# Ability to fetch, validate, and present remote data while handling failures.&lt;br /&gt;
# Ability to use Git to record and communicate development history.&lt;br /&gt;
# Ability to identify risks and propose security, performance, and accessibility improvements.&lt;br /&gt;
&lt;br /&gt;
&amp;#039;&amp;#039;&amp;#039;Products&amp;#039;&amp;#039;&amp;#039;&lt;br /&gt;
# A standards-based web page or application with documented requirements.&lt;br /&gt;
# A small portfolio of tests, audits, or technical reports.&lt;br /&gt;
# A repository with coherent commits and readable documentation.&lt;br /&gt;
# A deployment or prototype demonstrating a reproducible build and release process.&lt;br /&gt;
&lt;br /&gt;
&amp;#039;&amp;#039;&amp;#039;Transfer achievements&amp;#039;&amp;#039;&amp;#039;&lt;br /&gt;
# Ability to justify design choices under new constraints.&lt;br /&gt;
# Ability to compare alternative architectures rather than following tools by habit.&lt;br /&gt;
# Ability to recognize when a local coding decision creates broader consequences for users, maintainers, security, privacy, or operations.&lt;br /&gt;
# Ability to use specifications, documentation, measurements, and testing evidence to resolve unfamiliar web development problems.&lt;br /&gt;
&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
= OERs on the Topic =&lt;br /&gt;
&lt;br /&gt;
&amp;lt;iframe&amp;gt; https://en.m.wikipedia.org/wiki/Web_development &amp;lt;/iframe&amp;gt;&lt;br /&gt;
&lt;br /&gt;
&amp;lt;br&amp;gt;&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
= Linked Learning Areas =&lt;br /&gt;
&lt;br /&gt;
{| align=center&lt;br /&gt;
{{:D-Tab}}&lt;br /&gt;
&amp;#039;&amp;#039;&amp;#039;[[English:Web Development|Web Development]]&amp;#039;&amp;#039;&amp;#039;&lt;br /&gt;
# [[English:HTML|HTML]]&lt;br /&gt;
# [[English:Cascading Style Sheets|Cascading Style Sheets]]&lt;br /&gt;
# [[English:JavaScript|JavaScript]]&lt;br /&gt;
# [[English:Document Object Model|Document Object Model]]&lt;br /&gt;
# [[English:Hypertext Transfer Protocol|Hypertext Transfer Protocol]]&lt;br /&gt;
# [[English:HTTPS|HTTPS]]&lt;br /&gt;
# [[English:Responsive web design|Responsive web design]]&lt;br /&gt;
# [[English:Web accessibility|Web accessibility]]&lt;br /&gt;
# [[English:Web security|Web security]]&lt;br /&gt;
# [[English:Web performance|Web performance]]&lt;br /&gt;
# [[English:Application programming interface|Application programming interface]]&lt;br /&gt;
# [[English:Git|Git]]&lt;br /&gt;
# [[English:Software testing|Software testing]]&lt;br /&gt;
|}&lt;br /&gt;
&lt;br /&gt;
Web development connects concepts from [[English:Computer science|Computer science]], [[English:Software engineering|Software engineering]], [[English:Human-computer interaction|Human-computer interaction]], [[English:Computer networks|Computer networks]], [[English:Information security|Information security]], [[English:Database|Database]], [[English:User experience design|User experience design]], and [[English:Project management|Project management]]. At university level, the strongest work combines these areas rather than treating the browser interface as an isolated coding exercise.&lt;br /&gt;
&lt;br /&gt;
{{BR}}&lt;br /&gt;
= aiMOOC Projects =&lt;br /&gt;
[[Category:English]]&lt;br /&gt;
[[Category:Web Development]]&lt;br /&gt;
[[Category:Higher Education]]&lt;br /&gt;
[[Category:Computer Science]]&lt;br /&gt;
[[Category:Software Engineering]]&lt;br /&gt;
[[Category:Web Design]]&lt;br /&gt;
[[Category:Web Programming]]&lt;br /&gt;
[[Category:Information Technology]]&lt;br /&gt;
[[Category:AI_MOOC]]&lt;br /&gt;
[[Category:GPT aiMOOC]]&lt;br /&gt;
{{MT}}&lt;/div&gt;</summary>
		<author><name>Glanz</name></author>
	</entry>
</feed>