Web-Grundlagen 2

Challenge-Paket für Aivopod: weitere Elemente von HTML und ihre Gestaltung mit CSS. Baut auf web-grundlagen auf (Tags, Attribute, Selektoren, Schriften, Kastenmodell); danach geht es mit css-und-layouting weiter. Formulare kommen in web-grundlagen-3.

Challenge	Inhalt
Listen (listen)	ul und ol, verschachtelte Listen, list-style-type, eine Navigation als Liste
Tabellen (tabellen)	table, tr, td, th, caption, thead/tbody, colspan
Tabellen gestalten (tabellen-gestalten)	Rahmen, border-collapse, Innenabstand, Kopfzeile, Zebrastreifen mit :nth-child
Selektoren und Kaskade (selektoren-und-kaskade)	Nachfahren, Gruppen, :hover, :first-child, welche Regel gewinnt

Alle mit drei Stufen (normal, erweitert, experte), in dieser Reihenfolge (aivopod.ablauf). Geprüft wird überwiegend an der gerenderten Seite, so zählen gleichwertige Lösungen (nth-child(even) wie nth-child(2n)). Braucht Aivopod 0.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.