Fachinformatik (Ausbildung)
Webseiten verstehen und bauen: der IT-Arbeitsplatz-Konfigurator
Was der Browser mit einer Datei macht: Quellcode und DOM, Rendering, HTML für Struktur, CSS für Gestaltung, JavaScript für Verhalten — am eigenen Projekt, einem Konfigurator, der IT-Arbeitsplätze kalkuliert.
Beschreibung anhören
Die IT-Abteilung soll Arbeitsplatzbestellungen vereinheitlichen: Abteilung wählen, Prozessor, Arbeitsspeicher, SSD und Zubehör zusammenstellen, der Preis rechnet sich sofort mit, am Ende steht eine Bestellzusammenfassung. Genau so eine Seite baust du in diesem Kurs — als eine einzige HTML-Datei, die ohne Server auf deinem Rechner läuft.
Bevor du baust, verstehst du, was passiert. Was macht der Browser? klärt, wie aus Text eine Seite wird, warum Quellcode und DOM nicht dasselbe sind und in welchen Schritten der Browser zeichnet. HTML beschreibt, was etwas ist — bis zum barrierearmen Formular. CSS gestaltet getrennt vom Inhalt: Regeln, Kaskade, Box-Modell, Raster. JavaScript bringt Verhalten: warum man es braucht, was es kann und was nicht, wie es das DOM liest und verändert. Fertigstellen schließt mit Testen, Fehlersuche und Export.
Neben dem Kurs entsteht dein Konfigurator in vier Ausbaustufen — Formular, Layout, Berechnung, Zusammenfassung und Export. Jede Stufe läuft für sich; Starter-Dateien und das Bewertungsraster findest du im Material.
Wichtig — was dieser Kurs nicht leisten kann: Eine Webseite entsteht beim Bauen, nicht beim Ankreuzen. Diese Plattform prüft, ob du Code lesen, seine Wirkung vorhersagen, Fehler finden und nachrechnen kannst. Ob du den Konfigurator selbst bauen kannst, zeigt deine abgegebene Datei — sie prüft dein Ausbilder oder deine Ausbilderin. Das Zertifikat dieser Plattform bestätigt das Verstehen, nicht die fertige Datei.
Aufbau
Was macht der Browser?
- Vom Text zur Webseite Einführung 22 Aufgaben
- Quellcode und DOM Einführung 22 Aufgaben
- Wie der Browser rendert Einführung 24 Aufgaben
HTML: Struktur und Bedeutung
- Elemente, Tags und Attribute Einführung 22 Aufgaben
- Formulare Einführung 22 Aufgaben
CSS: Gestaltung getrennt vom Inhalt
- Was ist CSS? Einführung 18 Aufgaben
- Welche Regel gewinnt? Kaskade und Vererbung Einführung 20 Aufgaben
- Box-Modell und Layout Einführung 22 Aufgaben
JavaScript: Verhalten
- Warum JavaScript? Einführung 22 Aufgaben
- Grundlagen der Sprache Einführung 22 Aufgaben
- Das DOM ansprechen Einführung 22 Aufgaben
- Die Seite dynamisch verändern Einführung 22 Aufgaben
Fertigstellen
- Testen, Fehler finden, Export Einführung 24 Aufgaben
peritio