CodeAgeBy Sitezack
← Fortgeschrittenes CSS für Macher 🎨Modernes, responsives Layout⚡ 0 XP
Kapitel-Fortschritt0/5

Lektion 5 von 5

Projekt: eine responsive Seite

Eine echte responsive Seite kombiniert alles: einen Header in Flex, ein Karten-Raster und eine Media Query fürs Handy.

Das Ziel: ein Layout, das auf großem Bildschirm passt UND sich auf dem Handy sauber umordnet.

.nav { display: flex; justify-content: space-between; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; }
}

🎯 Dein Ziel

Baue die Seite: 1) .nav auf display: flex mit justify-content: space-between; 2) .cards auf display: grid mit grid-template-columns: repeat(3, 1fr); 3) eine Media Query @media (max-width: 600px), die .cards auf eine einzige Spalte setzt (grid-template-columns: 1fr).

PRO-Lektion

Dieses fortgeschrittene Kapitel gehört zu CodeAge PRO. Schalte es frei, um dein Abenteuer fortzusetzen.

PRO entdecken →