Material UI Übung: Lebensmittel Preisvergleich

In dieser Übung erstellst du eine Webseite zum Preisvergleich von Lebensmitteln. Folge Schritt für Schritt der Anleitung.

📥 Starter-Vorlage herunterladen

Aufgabenübersicht

1. Grundgerüst erstellen

Erstelle ein HTML5-Grundgerüst und binde die Material UI und Material Icons ein.

Tipp: Vergiss nicht <meta name="viewport" content="width=device-width, initial-scale=1"> einzubauen!

2. Navigation einbauen

Baue eine Navigationsleiste (Navbar) mit folgenden Links:

Tipp: Nutze eine mui-appbar für eine schöne Leiste oben.

2. Navigation einbauen

Baue eine Navigationsleiste mit Links: Home, Produkte, Kategorien, Vergleichen.

Tipp: Verwende mui-appbar für eine fixe Leiste oben!

<div class="mui-appbar">
  <table width="100%">
    <tr style="vertical-align:middle;">
      <td class="mui--appbar-height">
        <strong>Preisvergleich</strong>
      </td>
      <td class="mui--appbar-height" align="right">
        <a href="#" class="mui-btn mui-btn--flat">Home</a>
        <a href="#" class="mui-btn mui-btn--flat">Produkte</a>
        <a href="#" class="mui-btn mui-btn--flat">Kategorien</a>
        <a href="#" class="mui-btn mui-btn--flat">Vergleichen</a>
      </td>
    </tr>
  </table>
</div>

3. Suchfeld ergänzen

Erstelle ein zentrales Eingabefeld für Produktsuche.

Nutze dazu die Klasse mui-textfield!

3. Suchfeld ergänzen

Erstelle ein zentrales Eingabefeld für Produktsuche.

Tipp: Nutze mui-textfield für eine einfache Eingabe.

<div class="mui-container mui--text-center">
  <div class="mui-textfield">
    <input type="text" placeholder="Produkt suchen...">
  </div>
</div>

4. Kategorien darstellen

Teile deine Produkte in folgende Kategorien:

Tipp: Gestalte die Kategorienüberschriften größer und auffällig.

<div class="category-title">🥛 Milchprodukte</div>
<div class="product-cards">
  <div class='mui-panel'>
    <i class='material-icons' style='font-size:48px;color:#ff9800;'>local_grocery_store</i>
    <h3>Milch 1L</h3>
    <p class='brand'>Landliebe</p>
    <p class='price'>1,29 €</p>
    <p class='store'>Erhältlich bei: Rewe</p>
  </div>
</div>

5. Produktkarten erstellen

Erstelle für jedes Produkt eine Card mit:

Icons kannst du mit <i class="material-icons">local_grocery_store</i> einbauen.

5. Produktkarten erstellen

Jedes Produkt bekommt eine Karte mit Namen, Marke, Preis und Supermarkt.

Tipp: Verwende Panels für jede Karte und Icons für den Produkttyp.

<div class="mui-panel">
  <i class="material-icons" style="font-size:48px;color:#9c27b0;">shopping_cart</i>
  <h3>Butter 250g</h3>
  <p class="brand">Kerrygold</p>
  <p class="price">2,29 €</p>
  <p class="store">Aldi</p>
</div>

6. Vergleichs-Button hinzufügen

Jede Karte soll einen Button \"Vergleichen\" besitzen.

Nutze mui-btn mui-btn--primary für den Button!

6. Vergleichs-Button hinzufügen

Jede Karte bekommt einen Button „Vergleichen“.

Tipp: Nutze mui-btn mui-btn--primary für optische Hervorhebung.

<button class="mui-btn mui-btn--primary">Vergleichen</button>

7. Footer ergänzen

Füge am Seitenende einen kleinen Footer (z.B. mit Impressum) ein.

Tipp: Dezentes Design, wenig Platz beanspruchen!

7. Footer ergänzen

Füge am Ende einen kleinen Footer ein – z. B. mit Impressum oder Kontakt.

Tipp: Dezente Farben verwenden, z. B. grau oder hellgrün.

<footer class="mui--text-center" style="padding: 20px; background: #e0e0e0;">
  © 2025 Lebensmittelvergleich | <a href="#">Impressum</a>
</footer>

Bonusaufgaben

Beispielprodukte

Milchprodukte: Milch 1L (Landliebe), Joghurt 150g (Müller), Butter 250g (Kerrygold)

Grundnahrungsmittel: Nudeln 500g (Barilla), Reis 1kg (Uncle Ben's), Mehl 1kg (K-Classic)

Getränke: Coca-Cola 1,5L, Mineralwasser 1,5L (Gerolsteiner), Orangensaft 1L (Valensina)