Webseiten Schnellstart / Webseite Schnellstart – Modul 4 – JavaScript, Frameworks & Webseiten veröffentlichen
0%
In Bearbeitung

Webseite Schnellstart – Projekt 4

Wie funktioniert diese Challenge?

  1. Diese Coding-Challenge besteht aus 4 verschiedenen Aufgaben.
  2. Jede Aufgabe wird einzeln gelöst und in den untenstehenden Code-Editor eingegeben.
  3. Manche Aufgaben sind etwas schwieriger, es ist also kein Problem, wenn du in die Lösung reinschaust!

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 eine Startseite für eine Pizzeria.

Starten wir mit der ersten Aufgabe:

1. Bootstrap einrichten:

Richte Bootstrap in der Vorlage ein (CSS und JavaScript). Hier die Links:

  • CSS: https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
  • jQuery JS: https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
  • Bootstrap JS: https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

Code für Head:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

Code für Body:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

[/lp_spoiler]

2. Container und Navigation

Erstelle im Body einen Container und eine Navigation mit den Menüpunkten Home und Karte.

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

<div class="container">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Karte</a>
</li>
</ul></div>

[/lp_spoiler]

3. Jumbotron

Erstelle einen Jumbotron mit einer Überschrift und einem Begrüßungstext:
Pizzeria Toni
Hier gibt es die beste Pizza des Universums!

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

<div class="jumbotron">
<h1 class="display-2">Pizzeria Toni</h1>
<p class="lead">Hier gibt es die beste Pizza, des Universums!</p>
</div>

[/lp_spoiler]

4. Begrüßung und Bild

Erstelle eine neue Zeile (row) mit 2 Spalten (col). In die erste Spalte fügst du folgenden Text ein:

Herzlich Willkommen
Hier wird noch gebacken wie Toni's Uroma es gemacht hat!

Wie wäre es mit einer knusprigen Pizza mit soviel Käse und Liebe gemacht, dass man die Liebe selbst schmecken kann?

In die zweite Spalte fügst du ein Bild ein (Pfad: /assets/img/pizza.jpg) mit der Breite 100%.

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

<div class="row">
<div class="col">
<h2>Herzlich Willkommen</h2>
<p>Hier wird noch gebacken wie Toni's Uroma es gemacht hat!</p>
<p>Wie wäre es mit einer knusprigen Pizza mit soviel Käse und Liebe gemacht, dass man die Liebe selbst schmecken kann?</p>
</div>
<div class="col">
<img width="100%" src="/assets/img/pizza.jpg">
</div>
</div>

[/lp_spoiler]

5. Angebot und Öffnungszeiten

Erstelle eine weitere Zeile mit zwei Spalten. Dort fügst du folgende Texte ein:

Spalte 1:

Unsere Klassiker:
Pizza Margarita - 25 €
Pizza Salami - 25 €
Pizza Schinken - 25 €
Pizza Funghi - 25 €
Pizza Mafia - 25 €
Pizza Hawai - 25 €
All you cant eat:

Einmal bezahlen - Eine Stunde essen

Spalte 2:

Öffnungszeiten:

Dienstag - Sonntag: 16:00 - 24:00 Uhr

Montag Ruhetag

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

<div class="row">
<div class="col">
<h2>Unsere Klassiker:</h2>
<ul>
<li>Pizza Margarita - 25 €</li>
<li>Pizza Salami - 25 € </li>
<li>Pizza Schinken - 25 € </li>
<li>Pizza Funghi - 25 €</li>
<li>Pizza Mafia - 25 €</li>
<li>Pizza Hawai - 25 €</li>
</ul>
<p>All you cant eat:</p>
<p>Einmal bezahlen - Eine Stunde essen </p>
</div>
<div class="col">
<div class="box">
<h2>Öffnungszeiten</h2>
<p>Dienstag - Sonntag: 16:00 - 24:00 Uhr</p>
<p>Montag Ruhetag</p>
</div>
</div>
</div>

[/lp_spoiler]

 

6. Schlussteil

Der Schluss ist einfach. Erstelle eine letzte Zeile mit dem Text:

Wir freuen uns auf Ihren Besuch!

Team Toni

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

<div class="row">
<div class="col">
<h2>Wir freuen uns auf Ihren Besuch! </h2>
<p>Team Toni</p>

</div>
</div>

[/lp_spoiler]

Komplettlösung:

[lp_spoiler title="Code-Lösung anzeigen (Spoiler)"]

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <ul class="nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Karte</a>
      </li>
    </ul>
    <div class="jumbotron">
      <h1 class="display-2">Pizzeria Toni</h1>
      <p class="lead">Hier gibt es die beste Pizza, des Universums!</p>
    </div>
    <div class="row">
        <div class="col">
            <h2>Herzlich Willkommen</h2>
            <p>Hier wird noch gebacken wie Toni's Uroma es gemacht hat!</p>
            <p>Wie wäre es mit einer knusprigen Pizza mit soviel Käse und Liebe gemacht, dass man die Liebe selbst schmecken kann?</p>
        </div>
        <div class="col">
            <img width="100%" src="/assets/img/pizza.jpg">
        </div>
      </div>
      <div class="row">
          <div class="col">
              <h2>Unsere Klassiker:</h2>
              <ul>
                <li>Pizza Margarita - 25 €</li>
                <li>Pizza Salami - 25 € </li>
                <li>Pizza Schinken - 25 € </li>
                <li>Pizza Funghi - 25 €</li>
                <li>Pizza Mafia - 25 €</li>
                <li>Pizza Hawai - 25 €</li>
              </ul>
              <p>All you cant eat:</p>
              <p>Einmal bezahlen - Eine Stunde essen </p>
            </div>
            <div class="col">
                <div class="box">
                    <h2>Öffnungszeiten</h2>
                    <p>Dienstag - Sonntag: 16:00 - 24:00 Uhr</p>
                    <p>Montag Ruhetag</p>
                  </div>
              </div>
          </div>
          <div class="row">
              <div class="col">
                  <h2>Wir freuen uns auf Ihren Besuch! </h2>
                  <p>Team Toni</p>
              </div>
            </div>
        </div>
  </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

[/lp_spoiler]