Die Druckversion wird nicht mehr unterstützt und kann Darstellungsfehler aufweisen. Bitte aktualisiere deine Browser-Lesezeichen und verwende stattdessen die Standard-Druckfunktion des Browsers.

Web Development Fundamentals

Introduction

Web Development Fundamentals gives you a practical foundation for building, testing, and maintaining websites in a professional setting. It is designed for apprentices, trainees, and vocational students who need to understand not only how code works, but also how web work is planned, checked, documented, versioned, and handed over.

A modern website normally combines three core front-end technologies: HTML for structure and meaning, CSS for presentation and layout, and JavaScript for behavior and interaction. These technologies run in a web browser, communicate with servers through protocols such as HTTP, and should be developed with web accessibility, security, performance, and maintainability in mind.

The HTML5 and CSS3 badges are familiar visual symbols. In professional practice, HTML follows the continuously maintained HTML Living Standard, while CSS evolves through modular specifications. JavaScript is standardized through ECMAScript and gains browser capabilities through Web APIs such as the DOM.

Learning Goals

By the end of this aiMOOC, you should be able to:

Client-server model: Explain how a browser requests resources from a web server and how responses are returned.
HTML: Build a semantic document structure with meaningful elements.
CSS: Apply selectors, the cascade, the box model, and responsive layout techniques.
JavaScript: Use variables, functions, conditions, events, and DOM manipulation for basic interaction.
Responsive web design: Create layouts that work across phones, tablets, and desktop screens.
Web accessibility: Apply practical accessibility measures during design, coding, and testing.
Git: Record and communicate code changes with a basic version-control workflow.
Web development tools: Use browser developer tools to inspect, test, debug, and improve a page.

How the Web Works

When you enter a URL in a browser, several systems work together. A domain name can be resolved through the DNS to a network address. The browser then sends an HTTP or HTTPS request to a server. The server returns an HTTP response containing a status, headers, and usually a response body such as HTML, CSS, JavaScript, JSON, an image, or another resource.

A useful workplace model is request → response → render. The browser requests resources, receives responses, parses them, and renders the page. HTML is parsed into the DOM. CSS rules are applied to the document. JavaScript can read and modify page state and react to user actions. Network delays, missing files, invalid code, or server errors can interrupt this process, so developers need to inspect both code and network behavior.

HTTP, HTTPS, and Status Codes

HTTP is an application-layer protocol used for communication on the web. Common request methods include GET for retrieving a resource and POST for submitting data. Common response status groups include successful responses in the 200 range, redirects in the 300 range, client errors in the 400 range, and server errors in the 500 range.

HTTPS protects HTTP traffic with TLS encryption. It helps protect data in transit and lets the browser authenticate the server through certificates. HTTPS does not automatically make an application secure; secure coding, correct access control, safe configuration, and careful handling of data are still required.

HTML: Structure and Meaning

HTML describes the structure and meaning of web content. Semantic elements tell browsers, assistive technologies, search engines, and other developers what a region of content represents. A vocational project should prefer meaningful elements over a page made only from generic containers.

A simple document body can use elements such as header, nav, main, section, article, heading, paragraph, list, form, and footer. The exact choice depends on the meaning of the content.

<header>
  <h1>Workshop Booking</h1>
</header>
<main>
  <section>
    <h2>Available Courses</h2>
    <p>Choose a course and check the training dates.</p>
  </section>
</main>
<footer>
  <p>Training Centre</p>
</footer>

Good HTML is not just about making a page look correct. It provides a robust information structure. Headings should form a logical hierarchy, form controls should have clear labels, images that convey information need appropriate alternative text, and links should describe their destination or purpose.

The DOM

After the browser parses HTML, it represents the document as a tree of objects called the DOM. JavaScript can use this tree to find elements, change text, update classes, create or remove nodes, and react to events.

If a button click changes a message on the page, JavaScript is usually responding to an event and updating a DOM node. This connection between HTML structure and JavaScript behavior is central to front-end development.

CSS: Presentation and Layout

CSS controls presentation. A CSS rule normally contains a selector and one or more declarations. The browser decides which declarations apply according to the cascade, specificity, inheritance, and source order.

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

.course-card h2 {
  margin-top: 0;
}

CSS should support the content rather than hide structural problems in the HTML. In workplace projects, keep selectors understandable, group related rules, reuse design values where appropriate, and test states such as hover, focus, disabled, error, and small-screen layouts.

The CSS Box Model

Most visible HTML elements are laid out as boxes. The CSS box model consists of the content area, padding, border, and margin. Understanding these layers helps you diagnose spacing and sizing problems.

With the default content-box sizing, declared width and height apply to the content box. Many projects use box-sizing: border-box so declared dimensions include padding and border, which can make sizing easier to reason about.

Responsive Web Design

Responsive web design aims to make a page usable across different viewport sizes and device capabilities. Common techniques include flexible layouts, relative units, flexible images, CSS Grid, Flexbox, and media queries.

A responsive layout should not be tested only by shrinking a desktop browser window. Use browser device simulation as a quick check, then test representative real devices or realistic device conditions when possible. Check reading order, tap targets, form behavior, text wrapping, image sizing, and whether important actions remain visible and usable.

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

JavaScript: Behavior and Interaction

JavaScript adds behavior to a web page. Core language concepts include values, variables, operators, conditions, loops, arrays, objects, and functions. In the browser, JavaScript can also work with APIs for the DOM, events, forms, storage, timers, and network requests.

const button = document.querySelector(".status-button");
const output = document.querySelector(".status-message");

button.addEventListener("click", () => {
  output.textContent = "The workshop request has been recorded.";
});

In professional code, behavior should be understandable and predictable. Give variables and functions meaningful names, keep functions focused, handle errors, and avoid placing sensitive secrets in client-side JavaScript because users can inspect code delivered to their browsers.

Events and State

An event is a notification that something happened, such as a click, key press, form submission, or network completion. Event handlers respond to those events. State is information that can change while the application is running, such as whether a menu is open, which item is selected, or what data has been loaded.

When an interface becomes difficult to maintain, ask three questions: What is the current state? Which event changed it? Which part of the DOM should reflect the new state? This simple model helps you debug many beginner front-end problems.

Accessibility and Inclusive Web Development

Web accessibility means designing and developing websites so that people with disabilities can perceive, understand, navigate, and interact with them. Accessibility also improves resilience for many other situations, such as small screens, temporary injuries, noisy environments, bright sunlight, or slow connections.

Practical measures include semantic HTML, keyboard access, visible focus indicators, text alternatives for meaningful images, programmatic labels for form controls, sufficient color contrast, captions or transcripts for media, understandable error messages, and layouts that remain usable when text is enlarged.

The four widely used WCAG principles are Perceivable, Operable, Understandable, and Robust. They provide a useful way to review whether people can access content, operate controls, understand the interface, and use it with different technologies.

Accessibility should be checked throughout development, not only at the end. Automated tools can catch some issues, but manual keyboard testing, logical reading order, meaningful content review, and testing with assistive technology provide essential evidence that automation alone cannot supply.

Developer Tools, Testing, and Debugging

Modern browsers include developer tools. Typical panels let you inspect the DOM and applied CSS, run JavaScript in a console, set breakpoints, inspect network requests, simulate viewport sizes, and measure performance.

A professional debugging process should be reproducible. First observe the exact problem. Then reduce it to the smallest useful case, inspect errors or network failures, form a hypothesis, change one relevant factor, and retest. Record the cause and the fix when the information will help colleagues or future maintenance.

Testing Layers

A useful vocational testing routine includes several layers. Check that HTML is valid enough to be interpreted as intended, test the main user journeys, test keyboard operation, review responsive layouts, check browser console errors, inspect failed network requests, and test important error states. For team projects, define acceptance criteria before development so that everyone knows what success means.

Do not confuse "works on my computer" with a completed test. Browser versions, devices, network conditions, language settings, permissions, and user input can change application behavior.

Version Control with Git

Git is a distributed version-control system. It records changes so that developers can review history, work on separate branches, compare versions, and collaborate without passing around many renamed copies of the same folder.

A simple workflow is to check the current state, stage a coherent change, create a descriptive commit, and share it with the team repository when appropriate.

git status
git add .
git commit -m "Add accessible workshop booking form"
git push

A good commit should represent a meaningful unit of work. Before committing, review the difference, remove accidental files, and run relevant checks. Never commit passwords, private keys, access tokens, or other secrets.

Security, Data, and Deployment Basics

Front-end development is part of a larger application system. Browser-side validation improves usability, but it must not be treated as a security boundary. A server that receives untrusted data must validate and process that data safely. Output must be handled so that untrusted content cannot become executable code. Authentication decides who a user is; authorization decides what that user is allowed to do.

Use HTTPS for deployed services, keep dependencies maintained, avoid exposing credentials in public repositories or client-side code, and give users only the permissions they need. For awareness of common application risks, consult the OWASP guidance linked later in this course.

Deployment means making a tested version available in its intended environment. A simple static site can be deployed as files to a web host. Applications with server-side logic require appropriate runtime, configuration, data storage, logging, and operational controls. A professional handover should identify the version, deployment method, dependencies, configuration needs, known limitations, and rollback or recovery procedure.

A Vocational Web Development Workflow

In a workplace project, coding is only one part of the job. A reliable workflow connects requirements, implementation, review, testing, deployment, and maintenance.

Requirements analysis: Translate a customer or trainer brief into users, goals, content, constraints, and acceptance criteria.
Wireframe: Sketch information structure and interaction before polishing visual details.
Semantic HTML: Build meaningful content structure and forms.
CSS: Add layout, visual hierarchy, responsive behavior, and interaction states.
JavaScript: Add only the behavior the interface requires and handle error cases.
Accessibility testing: Check keyboard access, labels, focus, contrast, alternatives, and reading order.
Software testing: Test user journeys, browsers, viewports, network behavior, and failure states.
Git: Commit reviewed changes with clear messages and collaborate through branches or review requests.
Deployment: Release a known version and verify the deployed result.
Technical documentation: Record setup, decisions, limitations, and maintenance information.

Professional Reference Sources

MDN Learn Web Development provides structured learning material for essential front-end skills and practices.
WHATWG HTML Living Standard for Web Developers is a primary technical reference for HTML.
W3C Web Accessibility Initiative introduces web accessibility and related standards.
Git Reference documents Git commands and workflows.
Chrome DevTools Overview explains browser tools for inspection and debugging.
OWASP Top 10 is a widely used awareness resource for important web application security risks.

Interactive Tasks

Quiz: Test Your Knowledge

What is the primary role of HTML in a web page? (To structure and give meaning to content) (!To encrypt network traffic) (!To store version history) (!To compress image files)

Which sequence correctly names the main layers of the CSS box model from the inside outward? (Content padding border margin) (!Margin border padding content) (!Content margin padding border) (!Border content margin padding)

What does a JavaScript event listener do? (It runs code in response to a specified event) (!It permanently changes the web server hardware) (!It converts CSS into HTML) (!It assigns an IP address to a domain)

What usually happens in a basic HTTP exchange? (A client sends a request and a server returns a response) (!A server sends a request and DNS writes JavaScript) (!CSS sends a response and HTML creates a certificate) (!Git sends a domain name and the browser creates a repository)

What is a central goal of responsive web design? (To keep content usable across different viewport sizes) (!To make every page use the same fixed width) (!To remove all images from mobile layouts) (!To replace semantic HTML with JavaScript)

Which practice most directly supports accessible form controls? (Providing clear programmatic labels) (!Removing keyboard focus) (!Using color as the only error signal) (!Replacing all text with icons)

What is Git mainly used for in web development? (To record and manage changes to project files) (!To render CSS layouts in the browser) (!To translate domain names into IP addresses) (!To encrypt every HTTP response)

Which browser developer tool area is commonly used to view JavaScript errors and run commands? (The console) (!The address bar) (!The bookmarks list) (!The download shelf)

What does HTTPS mainly add to HTTP communication? (TLS protection for data in transit and server authentication) (!Automatic correction of all programming errors) (!Permanent storage of every browser event) (!Guaranteed accessibility compliance)

Why is client-side form validation not enough for security? (The server must also validate untrusted input) (!The browser cannot display form controls) (!CSS always removes invalid data) (!Git automatically validates every request)

Memory Game

HTML	Structures and gives semantic meaning to page content
CSS	Controls presentation layout and visual states
JavaScript	Adds logic events and dynamic behavior
HTTP	Transfers requests and responses on the web
Git	Tracks versions and supports collaborative change
DOM	Represents a document as objects in a tree
Accessibility	Supports use by people with diverse abilities

Drag and Drop

Match the correct terms.	Topic
Structure and semantics	HTML
Presentation and layout	CSS
Behavior and events	JavaScript
Version control	Git
Request and response communication	HTTP

Crossword Puzzle

Browser	Which program interprets and displays web pages for a user?
Selector	What CSS feature targets elements for styling?
Viewport	What visible browser area is important for responsive layout?
Commit	What Git object records a saved project change?
Server	Which system commonly returns resources after receiving a web request?
Semantic	Which word describes HTML chosen for meaning rather than appearance alone?

LearningApps

Cloze Text

Open-Ended Tasks

Easy

Semantic HTML page: Build a one-page training-centre profile using headings, navigation, main content, a contact section, and a footer. Explain why each structural element fits its content.
CSS box model poster: Create a labeled image or poster that explains content, padding, border, and margin, then compare your diagram with the box-model visual in this course.
Developer tools diary: Inspect a simple website with browser developer tools, capture three screenshots, and write a short note explaining one DOM observation, one CSS observation, and one network observation.
Accessibility interview: Interview a classmate or colleague about situations that make websites difficult to use, then turn the answers into five concrete design or coding recommendations.

Standard

Responsive prototype: Build a small course-card layout that changes smoothly between narrow and wide screens. Test it at several viewport widths and document what you changed and why.
DOM interaction: Create a page in which a button updates visible status text. Add a second interaction of your choice and explain the events, state, and DOM changes involved.
Git collaboration: Work with a partner on a shared repository. Create separate branches, make small commits with descriptive messages, review each other's changes, and document how you resolved one difference.
HTTP investigation: Use a browser network panel to inspect the requests made by a page. Produce a short report showing request methods, status codes, resource types, and one performance or failure observation.

Advanced

Accessible booking interface: Design and build a responsive workshop-booking interface with semantic HTML, clear labels, keyboard access, visible focus, helpful validation messages, and a written accessibility test report.
Web security review: Review a training web application or safe demonstration project for exposed secrets, unsafe input handling assumptions, outdated dependencies, and missing deployment controls. Produce a prioritized improvement plan without attempting to exploit real systems.
Deployment project: Deploy a small static website to an approved training or school environment. Document the release version, deployment steps, HTTPS status, checks performed after release, and a rollback plan.
Workplace web development case study: Visit or interview a web team, IT department, digital agency, or training company. Create a video or illustrated report showing how requirements, coding, accessibility, testing, version control, review, deployment, and maintenance connect in their real workflow.

Learning Assessment

Integrated front-end build: Given a short customer brief, design and implement a small page using semantic HTML, responsive CSS, and JavaScript interaction, then justify how each technology contributes to the final result.
Debugging scenario: Diagnose a page with a broken layout, a JavaScript error, and a missing network resource. Explain the evidence you used, the order of your checks, and why your fixes address the actual causes.
Accessibility transfer task: Evaluate an unfamiliar page using keyboard testing, semantic structure, labels, focus visibility, and contrast considerations, then propose improvements in order of user impact.
Version-control reasoning: Review a sequence of project changes and propose a Git commit and branch strategy that would make collaboration, review, rollback, and maintenance easier.
Client-server explanation: Trace what happens from entering a URL to seeing an interactive page, connecting DNS, HTTP or HTTPS, server responses, HTML parsing, CSS application, DOM construction, and JavaScript execution.
Secure deployment plan: Create a release checklist that separates client-side usability checks from server-side security responsibilities and explains how secrets, input validation, HTTPS, dependencies, and post-release verification should be handled.

Evidence of Learning

Knowledge: You can explain the roles of HTML, CSS, JavaScript, the DOM, HTTP, HTTPS, browsers, servers, and Git.
Practical skills: You can build and style a semantic page, add basic JavaScript behavior, inspect network activity, debug errors, and test responsive behavior.
Accessibility skills: You can identify common barriers and apply semantic structure, labels, keyboard support, focus visibility, alternatives, and clear feedback.
Products: You can present source code, a working responsive page, Git history, test evidence, an accessibility report, and concise technical documentation.
Professional process: You can translate requirements into acceptance criteria, work through implementation and review, and prepare a controlled deployment and handover.
Transfer achievement: You can apply the same reasoning to a new website, tool, workplace brief, or unfamiliar codebase rather than relying only on memorized examples.

OERs on the Topic

Linked Learning Areas

Web development connects coding with communication, design, networking, accessibility, security, testing, collaboration, and operations. A strong foundation lets you understand how a user action travels through interface code and network systems, how quality is checked, and how teams maintain change over time.

Web Development Fundamentals