Skip to main content

Aufgabe 2: Neues Projekt mit Bootstrap

Da wir in diesem Kurs eine Website für eine imaginäre App erstellen wollen, überlege dir einen Namen für die App.

  1. Erstelle einen neuen Ordner für dein Projekt mit dem Namen deiner App.
  2. Erstelle eine neue Datei index.html und eine neue Datei styles.css im Ordner.
  3. Öffne die Datei index.html und füge den folgenden Code ein:
HTML Code
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Starcode Bootstrap App Seite</title>

    <!-- CSS Stylesheets -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" />

    <!-- Font Awesome -->
    <script
      defer
      src="https://use.fontawesome.com/releases/v6.4.0/js/all.js"
    ></script>
  </head>

  <body>
    <!-- ======================================= -->
    <!-- ===== Section 1: Navigationszeile ===== -->
    <!-- ======================================= -->
    <!-- Die Navigationszeile ist dafür da, dass man schnell zu bestimmten Sections auf unserer Website navigieren kann-->
    <section class="section-style-1" id="navbar">
      <div class="container-fluid">
        <!-- Dein Code -->
      </div>
    </section>

    <!-- ================================ -->
    <!-- ===== Section 2: Überblick ===== -->
    <!-- ================================ -->
    <!-- Hier wird der Nutzer auf unsere App aufmerksam gemacht -->
    <section class="section-style-2" id="überblick">
      <div class="container-fluid">
        <!-- Dein Code -->
      </div>
    </section>

    <!-- =============================== -->
    <!-- ===== Section 3: Features ===== -->
    <!-- =============================== -->
    <!-- Hier werden die Features unserer App aufgelistet -->
    <section class="section-style-1" id="features">
      <div class="container-fluid text-center">
        <!-- Dein Code -->
      </div>
    </section>

    <!-- ========================================= -->
    <!-- ===== Section 4: Nutzer-Bewertungen ===== -->
    <!-- ========================================= -->
    <!-- Hier werden die Nutzer-Bewertungen angezeigt -->
    <section class="section-style-2" id="bewertungen">
      <!-- Dein Code -->
    </section>

    <!-- ============================= -->
    <!-- ===== Section 5: Preise ===== -->
    <!-- ============================= -->
    <!-- Hier werden die verschiedenen Preispläne unserer App aufgelistet -->
    <section class="section-style-1" id="preise">
      <!-- Dein Code -->
    </section>

    <!-- ============================= -->
    <!-- ===== Section 6: Footer ===== -->
    <!-- ============================= -->
    <!-- Hier werden die Social-Media-Icons und der Copyright-Text angezeigt -->
    <section class="section-style-2" id="footer">
      <div class="container-fluid text-center">
        <!-- Dein Code -->
      </div>
    </section>
    <!-- Bootstrap JS Script -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
  1. Ändere den Titel der Website in den Namen deiner App.
  2. Öffne die Datei styles.css und füge den folgenden Code ein:
CSS Code
/* ============================= */
/* ===== Allgemeine Styles ===== */
/* ============================= */

/* Dein Code */

/* ======================================= */
/* ===== Section 1: Navigationszeile ===== */
/* ======================================= */

/* Dein Code */

/* ================================ */
/* ===== Section 2: Überblick ===== */
/* ================================ */

/* Dein Code */

/* =============================== */
/* ===== Section 3: Features ===== */
/* =============================== */

/* Dein Code */

/* ================================== */
/* ===== Section 4: Bewertungen ===== */
/* ================================== */

/* Dein Code */

/* ============================= */
/* ===== Section 5: Preise ===== */
/* ============================= */

/* Dein Code */

/* ============================= */
/* ===== Section 6: Footer ===== */
/* ============================= */

/* Dein Code */