Übung: Erstelle eine Preisvergleichs-Seite

In dieser Übung entwickelst du eine kleine Webplattform, um Preise von Lebensmitteln vergleichen zu können. Verwende dafür Material UI-Komponenten!

Schritt-für-Schritt Anleitung

1. Füge eine AppBar oben auf der Seite ein. 💡 Tipp anzeigen
   Nutze die Komponente <AppBar> und <Toolbar> aus Material UI.
2. Erstelle ein TextField für die Produktsuche. 💡 Tipp anzeigen
   Das TextField sollte ein Label wie "Produkt suchen..." haben.
3. Baue ein Grid-System auf, um Produkte anzuzeigen. 💡 Tipp anzeigen
   Verwende <Grid container> und <Grid item> für das Layout.
4. Füge Cards für die Produkte hinzu (Produktname, Preis, Anbieter). 💡 Tipp anzeigen
   Nimm <Card>, <CardContent> und <Typography>.
5. Baue einen einfachen Button in jeder Card ("Jetzt kaufen"). 💡 Tipp anzeigen
   Nutze <Button variant="contained" color="primary">.
6. Füge am Ende der Seite ein kleines Footer-Element hinzu. 💡 Tipp anzeigen
   Ein einfaches <footer> reicht, du kannst Typography verwenden.

Speichere deine Datei regelmäßig und überprüfe dein Design immer wieder im Browser! Viel Erfolg! 🚀