E04: css-und-layouting 1.0.0 #1

Merged

oliver.maklott merged 1 commit from e04-css-und-layouting into main 2026-10-01 11:07:14 +00:00

Conversation 0 Commits 1 Files changed 21 +1745 -1

oliver.maklott commented 2026-10-01 10:59:24 +00:00

Owner

Copy link

Auftrag E04 (aivopod-app Plan 5): css-und-layouting 1.0.0. Der Merge veröffentlicht v1.0.0.

Challenge	normal	erweitert	experte
Block und Inline	Block oder Inline, wie viele Zeilen	display: block, display: none	genau 300 px mit box-sizing
Flexbox	Karten nebeneinander	space-between, Abstand und Mitte	Navigationsleiste
Flexbox vertieft	umbrechen statt stauchen	flex-grow	in beide Richtungen zentrieren
Grid	drei Spalten	span 2	Seite mit grid-template-areas
Positionieren	relative, rückt etwas nach?	Etikett mit absolute	sticky und z-index
Responsiv	max-width	@media: untereinander auf dem Handy	ganze Seite für breit und schmal

• Layout-Schritte prüfen die Lage in der Vorschau (dom.lage, teils bei 800 und 400 px), nicht den CSS-Text
• pack test: 65 Tests grün (CLI 0.5.0-rc.5)
• In der echten Vorschau: 34 Fälle wie erwartet – 21 richtige Lösungen bestehen (auch Grid statt Flexbox, margin: auto), 13 typische Fehler bekommen die passende Rückmeldung; Vorschau vollständig durchgespielt (38 Schritte, 22 mit Rückmeldung)
• SDK und CI auf 0.5.0-rc.5; Thema und Beschreibung setzt der Merge

🤖 Generated with Claude Code

Auftrag **E04** (aivopod-app Plan 5): `css-und-layouting` **1.0.0**. Der Merge veröffentlicht `v1.0.0`. | Challenge | normal | erweitert | experte | | --- | --- | --- | --- | | Block und Inline | Block oder Inline, wie viele Zeilen | `display: block`, `display: none` | genau 300 px mit `box-sizing` | | Flexbox | Karten nebeneinander | `space-between`, Abstand und Mitte | Navigationsleiste | | Flexbox vertieft | umbrechen statt stauchen | `flex-grow` | in beide Richtungen zentrieren | | Grid | drei Spalten | `span 2` | Seite mit `grid-template-areas` | | Positionieren | `relative`, rückt etwas nach? | Etikett mit `absolute` | `sticky` und `z-index` | | Responsiv | `max-width` | `@media`: untereinander auf dem Handy | ganze Seite für breit und schmal | - [x] Layout-Schritte prüfen die Lage in der Vorschau (`dom.lage`, teils bei 800 und 400 px), nicht den CSS-Text - [x] `pack test`: 65 Tests grün (CLI 0.5.0-rc.5) - [x] In der echten Vorschau: 34 Fälle wie erwartet – 21 richtige Lösungen bestehen (auch Grid statt Flexbox, `margin: auto`), 13 typische Fehler bekommen die passende Rückmeldung; Vorschau vollständig durchgespielt (38 Schritte, 22 mit Rückmeldung) - [x] SDK und CI auf 0.5.0-rc.5; Thema und Beschreibung setzt der Merge 🤖 Generated with [Claude Code](https://claude.com/claude-code)

oliver.maklott added 1 commit 2026-10-01 10:59:24 +00:00

E04: css-und-layouting 1.0.0 – block and inline, flexbox, grid, positioning, responsive ... 2fcfb47d1d

- Block und Inline, Flexbox, Flexbox vertieft, Grid, Positionieren, Responsiv.
- Layout steps check where elements are in the preview (dom.lage), partly at two widths,
  so every CSS that produces the layout passes.
- SDK and CI on aivopod 0.5.0-rc.5 (vertical centring).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

oliver.maklott merged commit 2fcfb47d1d into main 2026-10-01 11:07:14 +00:00

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

aivopod-challenges/CSS-und-Layouting!1

No description provided.