Aufgabenstellung
Loading
Loading
Vom HTML/CSS/JS-Stack über Git und Branch-Modelle bis zu agilen Methoden, Software-Lebenszyklus und Tests. Die Praxis hinter dem Theoriestoff.
4Abschnitteca. 12Min Lesezeit4KompetenzenNiveauBasis 1 · Standard 3Stand 06/2026
Lesetiefe: Vertiefung
Schriftgröße: Standard
DOM-Baum einer HTML-Seite
Erstelle ein Login-Formular mit E-Mail- und Passwortfeld; validiere clientseitig.
```html <form id="login" novalidate> <label>E-Mail <input type="email" name="mail" required></label> <label>Passwort <input type="password" name="pw" minlength="8" required></label> <button>Anmelden</button> </form> ```
```js const f = document.getElementById("login"); f.addEventListener("submit", e => { if(!f.checkValidity()) { e.preventDefault(); alert("Bitte korrekt ausfüllen"); } }); ```
Clientseitige Validierung NUR für UX; serverseitig muss IMMER erneut validiert werden (Angreifer können Client-Code umgehen).
Ergebnis: Funktionierendes Formular mit zwei Validierungsstufen; HTTPS und CSRF-Schutz sind separate Themen.
HTML, CSS und JavaScript sind das Fundament jedes Web-Projekts - kein Framework kommt ohne sie aus.
CSS Grid und Flexbox haben die alten float-Tricks abgelöst; sie machen Responsive Design wirklich praktisch.
JavaScript ist single-threaded - die Event Loop ist der Schlüssel zum Verständnis asynchroner Operationen.
SRDP-Aufgaben
Aufgabenstellung
Typische Fehler
Aktive Wiederholung
Erstelle eine semantische HTML-Seite mit Header, Navigation, Hauptinhalt (zwei Sektionen) und Footer. Style sie mit CSS Grid und mache sie responsive.
Aktiv abrufen
Erinnere dich an die Kernpunkte — dann aufdecken.
Quellen: MDN Web Docs (Mozilla) · ECMAScript 2024 Standard (TC39 / Ecma International)
Git Branching - feature, develop, main
Wie entwickelst du ein Feature und mergest es zurück in main?
`git checkout -b feature/login-redesign`
`git add .` und `git commit -m "feat(login): neue Form-Validierung"` (Conventional Commits).
`git push origin feature/login-redesign`; danach Pull Request auf GitHub/GitLab eröffnen.
Kollegen reviewen Code, fordern ggf. Änderungen, danach Approve.
`git checkout main; git pull; git merge --no-ff feature/login-redesign; git push`. Tag für Release: `git tag v1.2.0`.
Ergebnis: Code-History bleibt linear nachvollziehbar; Conflicts werden früh im Feature-Branch gelöst, nicht in main.
Git ist die Standard-Versionskontrolle - jeder Entwickler sollte sie beherrschen.
Git Branching - feature, develop, main
Branches sind in Git billig - nutze sie großzügig für jedes Feature.
Pull Requests sind der gesellschaftliche Kit moderner Teams - Code Review ist nicht optional.
SRDP-Aufgaben
Aufgabenstellung
Typische Fehler
Aktive Wiederholung
Beschreibe den Lebenszyklus eines Pull Requests - vom lokalen Branch bis zum Merge auf main.
Aktiv abrufen
Erinnere dich an die Kernpunkte — dann aufdecken.
Quellen: Pro Git Book (2. Auflage) (Chacon & Straub)
Scrum-Zyklus
Ein Team baut einen Online-Shop, dessen Anforderungen sich während der Entwicklung noch ändern werden. Begründe die Methodenwahl und skizziere den ersten Scrum-Sprint.
Die Anforderungen sind unklar und veränderlich → ein sequenzielles Wasserfallmodell wäre riskant (späte Änderungen sind teuer); Scrum passt besser.
Der Product Owner ordnet das Product Backlog: zuerst Produktkatalog und Warenkorb, später Bezahlung, zuletzt Wunschliste.
Das Team wählt für einen 2-Wochen-Sprint die obersten Items, die es realistisch schafft (z. B. Produktliste und Detailseite).
Während des Sprints synchronisiert sich das Team täglich im Daily (15 min); Aufgaben wandern auf dem Board von „To Do" über „Doing" zu „Done".
Am Sprintende zeigt das Team das lauffähige Increment (Review, Feedback vom PO bzw. Kunden) und verbessert in der Retrospektive die Zusammenarbeit.
Ergebnis: Bei veränderlichen Anforderungen ist Scrum überlegen, weil jeder Sprint ein nutzbares Increment liefert und Feedback früh einfließt. Wasserfall bliebe nur bei stabilen, vorab vollständig bekannten Anforderungen sinnvoll (z. B. sicherheitskritische Steuerungssoftware).
Wasserfall plant alles vorne; Scrum lernt währenddessen - das ist der eigentliche Unterschied.
Scrum lebt von kurzen Feedbackschleifen - jeder Sprint endet mit einem nutzbaren Increment.
DevOps und CI/CD verkürzen die Zeit von Idee bis Produktion drastisch.
SRDP-Aufgaben
Aufgabenstellung
Typische Fehler
Aktive Wiederholung
Vergleiche Wasserfall und Scrum anhand eines Projekts (z.B. Online-Shop). Welche Methode würdest du wann wählen und warum?
Aktiv abrufen
Erinnere dich an die Kernpunkte — dann aufdecken.
Quellen: Agile Manifesto (Beck et al.) · Scrum Guide 2020 (Schwaber & Sutherland)
Testpyramide
Teste die Funktion `is_palindrome(s)`.
```python def is_palindrome(s): s = s.lower() return s == s[::-1] ```
```python import pytest from solution import is_palindrome def test_empty(): assert is_palindrome("") def test_single(): assert is_palindrome("a") def test_pal_lower(): assert is_palindrome("anna") def test_case_insensitive(): assert is_palindrome("Anna") def test_non_pal(): assert not is_palindrome("python") ```
`pytest -q` -> alle 5 Tests grün.
Ergebnis: Tests dokumentieren Erwartungen und schützen vor Regressionen; jeder neue Bug bekommt erst einen failing test.
Tests sind die Versicherungspolice deines Codes - sie schützen vor Regressionen.
Die Testpyramide hilft, das richtige Verhältnis zwischen Tempo und Realitätsnähe zu finden.
TDD ist keine Religion, aber ein extrem nützliches Tool für schwierige Logik.
SRDP-Aufgaben
Aufgabenstellung
Typische Fehler
Aktive Wiederholung
Schreibe einen pytest-Test für eine `is_palindrome(s)`-Funktion. Berucksichtige Edge Cases (leerer String, Groß/Kleinschreibung).
Aktiv abrufen
Erinnere dich an die Kernpunkte — dann aufdecken.
Quellen: Martin Fowler - Test Pyramid (martinfowler.com)
Belege & Quellen
Mozilla
TC39 / Ecma International
Chacon & Straub
Beck et al.
Schwaber & Sutherland
martinfowler.com