Screenshot-to-Frontend From Vibe Coding to Agentic Coding - VideoQuiz

Dieses Quiz als Battle spielen: Deutsch, Klasse 5-6, G-Niveau

Kurzinfo

In diesem Video lernst Du, wie aus einem einfachen Screenshot mithilfe von künstlicher Intelligenz echter Programmcode für eine Website entstehen kann. Doch hinter einem schönen Design steckt viel mehr Arbeit, als man auf den ersten Blick sieht. Erfahre, warum Barrierefreiheit, Responsivität und gute Prompts entscheidend sind.

Quiz: Teste Dein Wissen

Was versteht man unter 'Screenshot-to-Frontend'? (Die Übersetzung einer visuellen Vorlage in echten Frontend-Code.) (!Das bloße Fotografieren einer Website) (!Das automatische Löschen von ungenutztem Code) (!Das Erstellen von Grafiken mit Photoshop)

Warum wird das Frontend-Design im Video mit einem Eisberg verglichen? (Weil das sichtbare Design nur ein kleiner Teil der gesamten technischen Struktur ist.) (!Weil Websites im Winter schneller laden) (!Weil der Code im Hintergrund eingefroren werden muss) (!Weil die Entwicklung von Websites extrem kalt und ungemütlich ist)

Was ist ein wichtiges Merkmal von 'Responsivität' bei einer Website? (Die Anpassung des Layouts an verschiedene Bildschirmgrößen wie Desktop und Smartphone.) (!Dass die Website besonders schnell auf Klicks reagiert) (!Dass die Farben sich je nach Tageszeit automatisch ändern) (!Dass die Website nur auf mobilen Geräten funktioniert)

Warum sind Touch-Ziele auf dem Smartphone größer als auf dem Desktop? (Weil die Bedienung mit dem Finger unpräziser ist als mit einer Maus.) (!Weil Smartphones größere Bildschirme haben als PCs) (!Weil der Code für Smartphones mehr Platz benötigt) (!Weil größere Buttons weniger Strom verbrauchen)

Was versteht man unter 'Barrierefreiheit' (Accessibility) im Webdesign? (Dass eine Website auch für Menschen mit Einschränkungen gut bedienbar ist.) (!Dass die Website komplett kostenlos nutzbar ist) (!Dass man kein Passwort für die Anmeldung benötigt) (!Dass die Website ohne Internetverbindung funktioniert)

Welche unsichtbare Hürde kann auf einem Screenshot nicht erkannt werden? (Ein fehlender Alternativtext für Screenreader.) (!Die Hintergrundfarbe der Website) (!Die Anordnung der Buttons) (!Die Schriftgröße der Überschriften)

Was ist der Vorteil eines 'Design-Systems' gegenüber isoliertem UI-Code? (Es bietet wiederverwendbare Komponenten und sorgt für Konsistenz.) (!Es macht die Website automatisch bunter) (!Es ersetzt die künstliche Intelligenz vollständig) (!Es verhindert, dass die Website im Internet gefunden wird)

Wie sieht ein schlechter Prompt für eine KI aus? (Mach daraus einfach eine Website.) (!Nutze das bestehende Design-System und ergänze ARIA-Labels.) (!Erstelle ein responsives Layout mit großen Touch-Zielen für Smartphones.) (!Verwende HTML5 und CSS-Variablen für die Abstände.)

Welcher Schritt folgt im gezeigten Workflow-Zyklus direkt nach dem Prompting? (Testen) (!Wireframing) (!Veröffentlichen) (!Löschen)

Wie verändert sich die Rolle von Frontend-Entwicklerinnen und -Entwicklern durch KI? (Sie konzentrieren sich mehr auf Logik, Qualitätssicherung und das Steuern der KI.) (!Sie müssen überhaupt keinen Code mehr verstehen) (!Sie zeichnen nur noch Skizzen auf Papier) (!Sie arbeiten gar nicht mehr mit Computern)

Offene Aufgaben

Leicht

Screenshot-to-Frontend erklären: Erkläre mit eigenen Worten, was der Begriff 'Screenshot-to-Frontend' bedeutet.
Website-Skizze erstellen: Mache eine Skizze von einer einfachen Website auf Papier und beschrifte die wichtigsten Elemente (z. B. Navigation, Inhalt, Footer).
Desktop vs. Smartphone: Nenne zwei Unterschiede zwischen der Darstellung einer Website auf einem Computer und auf einem Smartphone.
Alternativtexte finden: Finde auf einer Website deiner Wahl ein Bild und prüfe, ob ein Alternativtext (Alt-Text) hinterlegt ist.

Standard

KI-Prompt schreiben: Schreibe einen präzisen Prompt für eine KI, um ein Anmeldeformular mit zwei Eingabefeldern (E-Mail und Passwort) und einem Button zu erstellen.
Kontraste untersuchen: Untersuche das Thema Barrierefreiheit: Warum sind gute Kontraste zwischen Text und Hintergrund wichtig? Erkläre es kurz.
Wireframe entwerfen: Erstelle ein einfaches Wireframe (Strukturplan) für eine mobile App-Ansicht einer Wetter-App.
Design-Systeme verstehen: Erkläre den Unterschied zwischen einem isolierten UI-Element und einem Element aus einem Design-System.

Schwer

Testkonzept entwickeln: Entwickle ein Konzept für das Testen einer neu erstellten Website. Welche Geräte und Kriterien (z. B. Tastaturbedienung) solltest du prüfen?
Verantwortung diskutieren: Diskutiere die Frage: Wer trägt die Verantwortung für Fehler oder mangelnde Barrierefreiheit, wenn der Code von einer KI generiert wurde?
Barrierefreier Button: Schreibe ein kurzes HTML- und CSS-Beispiel für einen Button, der für Screenreader optimiert ist (Nutze ARIA-Attribute).
Zukunft der Webentwicklung: Analysiere, wie sich der Beruf des Webentwicklers in den nächsten 10 Jahren durch den Einsatz von KI-Agenten verändern könnte.