Webseite Schnellstart – Projekt 2
Wie funktioniert diese Challenge?
- Diese Coding-Challenge besteht aus 4 verschiedenen Aufgaben.
- Jede Aufgabe wird einzeln gelöst und in den untenstehenden Code-Editor eingegeben.
Probleme? Wenn du eine Aufgabe nicht lösen kannst, klicke auf die jeweilige Code-Lösung unter der Aufgabe. Den Code dieser fertigen Lösung kannst du dann kopieren und in den Code-Editor einfügen.
Aber bitte nicht schummeln. Versuche zunächst die Aufgaben selbständig zu lösen 😉
In dieser Challenge erstellen wir die HTML-Inhalte für ein Pizza-Rezept.
Starten wir mit der ersten Aufgabe:
1. Div-Bereich, Überschrift und etwas Text
Erstelle einen div-Bereich und in diesem eine Überschrift und ein Text:
Überschrift: Meine Lieblingspizza
Text: Nach Toni's uralten Rezept
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]
<div >
<h1>Meine Lieblingspizza</h1>
<p>Nach Toni's uralten Rezept</p>
</div>
[/lp_spoiler]
2. Liste
Erstelle einem weiteren Div-Bereich. In diesen eine kleinere Überschrift (Zutaten). Darunter eine Liste mit den Zutaten:
- Pizza-Teig
- Tomatensoße
- Käse
- Salami
- Schinken
- Pilze
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]
<ul>
<li>Pizza-Teig</li>
<li>Tomatensoße</li>
<li>Käse</li>
<li>Salami</li>
<li>Schinken</li>
<li>Pilze</li>
</ul>
[/lp_spoiler]
3. Bild
Jetzt erstelle ein Bild (Pfad: "/assets/img/pizza.jpg" ) in einem weiteren div-Bereich.
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]
<div>
<img src="/assets/img/pizza.jpg">
</div>
[/lp_spoiler]
4. Zubereitung und weitere Informationen
Nun erstelle in einem weiteren div-Bereich eine Überschrift und ein Text:
Überschrift: Zubereitung
Text:
Ofen vorheizen auf 180 Grad.
Pizza-Teig ausrollen und Tomatensoße verteilen.
Pizza belegen mit Salami, Schinken und Pilzen.
Zum Schluss reichlich Käse auf die Pizza legen.
Für 65 Minuten im Ofen überbacken. Danach heiß servieren, Guten Appetit.
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]
<div>
<h2>Zubereitung</h2>
<p>Ofen vorheizen auf 180 Grad.</p>
<p>Pizza-Teig ausrollen und Tomatensoße verteilen.</p>
<p>Pizza belegen mit Salami, Schinken und Pilzen.</p>
<p>Zum Schluss reichlich Käse auf die Pizza legen.</p>
<p>Für 65 Minuten im Ofen überbacken. Danach heiß servieren, Guten Appetit.</p>
</div>
[/lp_spoiler]
Komplettlösung:
[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]
<div>
<div>
<div>
<h1>Meine Lieblingspizza</h1>
<p>Nach Toni’s uralten Rezept</p>
</div>
</div>
<div>
<div>
<h2>Benötigte Zutaten:</h2>
<ul>
<li>Pizza-Teig</li>
<li>Tomatensoße</li>
<li>Käse</li>
<li>Salami</li>
<li>Schinken</li>
<li>Pilze</li>
</ul>
<p>15 Minuten Vorbereitung – 80 Minuten Gesamtzeit</p>
</div>
<div>
<img src="/assets/img/pizza.jpg">
</div>
</div>
<div>
<div>
<h2>Zubereitung</h2>
<p>Ofen vorheizen auf 180 Grad.</p>
<p>Pizza-Teig ausrollen und Tomatensoße verteilen.</p>
<p>Pizza belegen mit Salami, Schinken und Pilzen.</p>
<p>Zum Schluss reichlich Käse auf die Pizza legen.</p>
<p>Für 65 Minuten im Ofen überbacken. Danach heiß servieren, Guten Appetit.</p>
</div>
</div>
</div>
[/lp_spoiler]