BCxP Client Community - CSS Basics Hands-On

Lernziele dieser Hands-On Session:

  1. Die Lernenden verstehen das CSS Box-Model.
  2. Den Lernenden ist der Unterschied zwischen Block und Inline Elementen klar.
  3. Den Lernenden ist der Unterschied zwischen intrinsic und extrinsic sizing bekannt.

Aufgabenstellung

Paul ist ein junger Software-Entwickler bei BCxP und bittet euch bei seiner Userstory zum Thema "Fehlerdialog" um Hilfe.
Bei der Umsetzung der Anforderungen ist etwas schief gelaufen. Bitte helft Paul.

Userstory-0815: Fehlerdialog

Als Benutzer des Clients möchte ich im Fehlerfall einen Modal-Dialog angezeigt bekommen, der mir eine menschenlesbare Fehlermeldung anzeigt.

Der Fehlerdialog besteht aus einem Titel mit dem Inhalt "Fehler", einer Beschreibung mit der menschenlesbaren Fehlermeldung und
für einen besseren Support außerdem der technische Fehlercode, sowie einem "OK"-Button zum Schließen des Dialogs.

Akzeptanzkriterien:

  1. Die Schriftart ist Arial mit der Schriftgröße 16px.
  2. Der Dialog ist 480px breit.
  3. Der technische Fehlercode soll mit einer Monospace Schriftart abgehoben werden.
  4. Der Fehlerdialog soll folgendem Mockup genügen:

Bei der Definition von Margin und Padding kann dir der Spacing Kurs weiterhelfen.

Los geht´s

Öffne Code Pen (Online Editor) mit dem Code.

Für die Übung sind die Dateien uebung.css und uebung.html wichtig.
Beides wird im Code Pen direkt angezeigt.

In der Vorschau ist die Übung mit Pauls aktuellen Stand zu sehen.
Änderungen an der CSS-Datei sind sofort in der Vorschau sichtbar.

Beim Speichern wird automatisch eine eigene Version des Projektes (Fork) angelegt.