aivopod-challenges/CSS-und-Layouting
Watch
1
0
Fork
You've already forked CSS-und-Layouting
 0
Code Issues Pull requests Projects Releases 3 Packages Wiki Activity Actions
Challenge-Paket um Seiten mit Flexbox, Grid und Positionierung anzuordnen.
6 commits 4 branches 3 tags 64 KiB
  • TypeScript 93.4%
  • Shell 6.6%
Find a file
Exact
Repository files (latest commit first)
Filename Latest commit message Latest commit date
oliver.maklott 8771de96f0
All checks were successful
pack / pack (push) Successful in 6s
Details
1.1.0: @aivopod/sdk 0.20.0, the SDK from the platform instead of the bundle (needs platform 0.20, aivopod-app D254) 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-12 20:49:53 +00:00
.forgejo/workflows SDK 0.10.0 and the newest CLI release in CI: the registry keeps only recent stable versions, the pinned ones were removed (aivopod-app D179) 2026-10-08 15:08:18 +00:00
.githooks E04: css-und-layouting 1.0.0 – block and inline, flexbox, grid, positioning, responsive 2026-10-01 06:29:47 +00:00
block-und-inline 1.0.1: English names of SDK 0.13 (aivopod pack migrate, the rest by hand), texts in locales/de.json; @aivopod/sdk 0.13.0 (aivopod-app Plan 12, G0.7) 2026-10-10 17:27:24 +00:00
flexbox 1.0.1: English names of SDK 0.13 (aivopod pack migrate, the rest by hand), texts in locales/de.json; @aivopod/sdk 0.13.0 (aivopod-app Plan 12, G0.7) 2026-10-10 17:27:24 +00:00
flexbox-vertieft 1.0.1: English names of SDK 0.13 (aivopod pack migrate, the rest by hand), texts in locales/de.json; @aivopod/sdk 0.13.0 (aivopod-app Plan 12, G0.7) 2026-10-10 17:27:24 +00:00
grid 1.0.1: English names of SDK 0.13 (aivopod pack migrate, the rest by hand), texts in locales/de.json; @aivopod/sdk 0.13.0 (aivopod-app Plan 12, G0.7) 2026-10-10 17:27:24 +00:00
locales 1.0.1: English names of SDK 0.13 (aivopod pack migrate, the rest by hand), texts in locales/de.json; @aivopod/sdk 0.13.0 (aivopod-app Plan 12, G0.7) 2026-10-10 17:27:24 +00:00
positionieren 1.0.1: English names of SDK 0.13 (aivopod pack migrate, the rest by hand), texts in locales/de.json; @aivopod/sdk 0.13.0 (aivopod-app Plan 12, G0.7) 2026-10-10 17:27:24 +00:00
responsiv 1.0.1: English names of SDK 0.13 (aivopod pack migrate, the rest by hand), texts in locales/de.json; @aivopod/sdk 0.13.0 (aivopod-app Plan 12, G0.7) 2026-10-10 17:27:24 +00:00
scripts E04: css-und-layouting 1.0.0 – block and inline, flexbox, grid, positioning, responsive 2026-10-01 06:29:47 +00:00
.gitignore E04: css-und-layouting 1.0.0 – block and inline, flexbox, grid, positioning, responsive 2026-10-01 06:29:47 +00:00
.npmrc E04: css-und-layouting 1.0.0 – block and inline, flexbox, grid, positioning, responsive 2026-10-01 06:29:47 +00:00
package-lock.json 1.1.0: @aivopod/sdk 0.20.0, the SDK from the platform instead of the bundle (needs platform 0.20, aivopod-app D254) 2026-10-12 20:49:53 +00:00
package.json 1.1.0: @aivopod/sdk 0.20.0, the SDK from the platform instead of the bundle (needs platform 0.20, aivopod-app D254) 2026-10-12 20:49:53 +00:00
README.md E04: css-und-layouting 1.0.0 – block and inline, flexbox, grid, positioning, responsive 2026-10-01 06:29:47 +00:00
tsconfig.json E04: css-und-layouting 1.0.0 – block and inline, flexbox, grid, positioning, responsive 2026-10-01 06:29:47 +00:00

README.md

CSS und Layouting

Challenge-Paket für Aivopod: Seiten anordnen mit modernem CSS. Baut auf web-grundlagen und web-grundlagen-2 auf.

Challenge Inhalt
Block und Inline (block-und-inline) Block- und Inline-Elemente, display, box-sizing
Flexbox (flexbox) display: flex, gap, justify-content, align-items, eine Navigationsleiste
Flexbox vertieft (flexbox-vertieft) flex-wrap, flex-grow, in beide Richtungen zentrieren
Grid (grid) Spalten mit fr, repeat, span, eine Seite mit grid-template-areas
Positionieren (positionieren) relative, absolute, sticky, z-index
Responsiv (responsiv) max-width, @media, eine Seite für breite und schmale Bildschirme

Alle mit drei Stufen (normal, erweitert, experte), in dieser Reihenfolge (aivopod.ablauf).

Die Layout-Schritte prüfen, wo die Elemente in der Vorschau stehen (dom.lage: nebeneinander, untereinander, zentriert, Breite), teils in zwei Breiten (800 und 400 Pixel). So zählt jede Lösung, die so aussieht – Grid statt Flexbox, margin: auto statt align-items. Braucht Aivopod 0.5.0-rc.5.

Arbeiten am Paket

npm install          # das SDK aus der Registry der Organisation (.npmrc)
aivopod pack test    # Tests, ohne vitest
aivopod pack preview # alle Schritte im Browser durchspielen
aivopod pack build   # bündeln, prüfen, Release-Archiv in dist/

Veröffentlichen: Die Version in package.json erhöhen (Patch: nur Texte; Nebenversion: Änderungen in bestehenden Challenges oder im Ablauf; Hauptversion: andere Challenges) und nach main bringen. Die CI prüft die Version gegen das letzte Release und legt ein neues Release v<version> mit dem Archiv an. Plattformen, die dieses Repo (oder seine Organisation) als Quelle eingetragen haben, finden es, wenn das Repo das Thema aivopod-pack hat. Entwicklungsversionen (1.2.0-dev.1) lassen sich mit aivopod pack publish direkt für die eigene Schule veröffentlichen, wenn die Plattform das erlaubt.

aivopod.titel und aivopod.ablauf in package.json legen fest, wie das Paket als Ganzes einem Kurs zugewiesen wird: sein Titel und die Challenges in dieser Reihenfolge.

Eine Challenge ist ein Ordner mit index.ts (die Challenge) und index.test.ts (Tests mit expectPass und expectFail). Bilder liegen im Ordner assets/ der Challenge.