Baukastensysteme für HTML und CSS

Einführung

Wie Sie wahrscheinlich schon festgestellt haben, macht es viel Arbeit, eine Website von Grund auf mit HTML, CSS und ggf. noch mit JavaScript zu entwickeln. Am Anfang muss man einmal da durch, sonst bleiben die Zusammenhänge im Verborgenen, und Sie können keine Erfahrung sammeln. Aber irgendwann, besonders in der professionellen Arbeit von Mediengestalter_innen und Webdesigner_innen, braucht es dann Ansätze, um sich schnell mit Kund_innen über eine Projektidee zu verständigen und eine Website online zu bekommen.

Weil viele Websites aus ähnlichen Elementen bestehen, haben sich sogenannte HTML/CSS-Frameworks entwickelt. Zwei der größeren und bekannteren sind Foundation und Bootstrap. Letzteres gibt es schon seit 2011. Es wurde ursprünglich im Hause Twitter entwickelt und dort für interne Tools verwendet. In dieser Veranstaltung setzen wir uns exemplarisch mit Bootstrap auseinander.

Eine Website mit Frameworks zusammensetzen. Foto von Ashkan Forouzani auf Unsplash
Eine Website mit Frameworks zusammensetzen. Foto von Ashkan Forouzani auf Unsplash

Aufgabenstellungen

Aufgabenstellung 1: Bootstrap kennenlernen

  1. Rufen Sie die Homepage von Bootstrap auf, und sehen Sie sich um.
  2. Halten Sie für Ihre Projektgruppe in einem gemeinsamen Pad alle Begriffe fest, die Sie noch nicht kennen (wird im Chat bekanntgegeben). Versuchen Sie, sich diese Begriffe gemeinsam zu erschließen. Schreiben Sie Ihre Antworten in das Pad, am besten mit einem Link zu einer Seite, die den Begriff erklärt (nicht nur Wikipedia!).
  3. Nutzen Sie DeepL oder Google Translate, um die englischen Texte zu übersetzen.

Aufgabenstellung 2: Bootstrap einrichten

  1. Rufen Sie die Seite Getting started auf.
  2. Lesen Sie bis zum Abschnitt Starter Template einschließlich.
  3. Bereiten Sie einen Ordner bootstrap auf Ihrem Rechner vor.
    1. Legen Sie darin eine index.html an.
    2. Kopieren Sie das Markup für das Starter Template hinein. Beachten Sie, dass die drei <script>-Tags am Ende des <body> stehen. Das soll auch so bleiben!
    3. Sehen Sie sich die HTML-Seite im Browser an.

Aufgabenstellung 3: Das Gitterlayout (Grid) von Bootstrap kennenlernen

Bootstrap kommt mit einem 12er-Spaltensystem, in der Dokumentation Grid genannt. Dieser Begriff ist nicht zu verwechseln mit dem Layoutansatz grid, denn Bootstrap arbeitet unter der Haube mit Flexbox. Kurz gesagt: Bei Bootstrap wird ein Grid (Gitterlayout) mit Flexbox erzeugt.

  1. Kopieren Sie das Markup aus dem Abschnitt How it works ins <body>-Tag Ihrer index.html. Löschen Sie dafür die Überschrift <h1>.
  2. Lesen Sie die Erläuterung unter dem Markup, die Ihnen erklärt, wie das Gitterlayout in Bootstrap funktioniert. DeepL übersetzt die Aufzählung ganz passabel.
  3. Wenn es Sie jetzt brennend interessiert, was das Grid in Bootstrap noch so kann, lesen Sie weiter.

Aufgabenstellung 4: Inhaltsformatierungen kennenlernen

  1. Scrollen Sie durch die Abschnitte unter Content. Verschaffen Sie sich dabei einen Überblick, wie Überschriften, Bilder, Tabellen und Abbildungen formatiert werden.

Aufgabenstellung 5: Bootstrap-Komponenten einsetzen

Komponenten in Bootstrap sind typische Bauteile für Webseiten. Durch das Zusammenkopieren dieser Komponenten lassen sich schnell Prototypen erstellen, die dann mit dem Kunden/der Kundin diskutiert werden können.

  1. Kopieren Sie das Markup am Anfang des Abschnitts Nav direkt in das <body>-Tag. Löschen Sie nicht das dreispaltige Markup aus Aufgabenstellung 3!
  2. Ändern Sie die href-Attribute zu sinnvollen Linkzielen.
  3. Untersuchen Sie mit den Developer Tools die Navigation.
    1. Welche Eigenschaften sind für den Selektor .navbar-item vergeben?
    2. Wie unterscheiden sich diese für große und kleine Viewports?
  4. Kopieren Sie den folgenden Schnipsel unter die Navigation: 
     1<div class="jumbotron">
 2   <div class="container">
 3      <h1 class="display-4">Hello, world!</h1>
 4      <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention
 5            to
 6            featured content or information.</p>
 7      <hr class="my-4">
 8      <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
 9      <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
10   </div>
11</div
  5. Prüfen Sie, wie sich das Layout verändert, wenn Sie in den Developer Tools ein iPhone X im Hoch- und Querformat einstellen.

Aufgabenstellung 6: Mit dem Layout arbeiten

  1. Fügen in das Spaltenlayout noch dreimal das Markup einer Card ein.
  2. Was müssten Sie tun, um zwei gleichbreite Cards einzufügen? Probieren Sie es aus!

Fügen Sie noch einen Footer hinzu, der zentriert ausgerichtet die Links “Datenschutz” und “Impressum” enthält.

Aufgabenstellung 8: CSS anpassen

  1. Ändern Sie in den Developer Tools die Hintergrundfarbe der Navigationsleiste zu #dc3545 oder einer Farbe, die Sie mögen.
  2. Was können Sie tun, um diese Farbe dauerhaft in die Gestaltung Ihrer Seite zu übernehmen?
Mögliche Lösung
Mögliche Lösung

Aufgabenstellung 9: Experimentieren

Nehmen Sie sich nun Zeit, mit den Konzepten von Bootstrap zu spielen und zu experimentieren.

Weitere Lernanregungen

Die folgenden Lernanregungen haben das Ziel, Ihnen ein wenig mehr Routine mit Bootstrap zu verschaffen.

Ziele

  • Sie setzen ein Layout mit Bootstrap um.
  • Sie steigen tiefer in das Layoutkonzept von Bootstrap ein und wissen, welche <div>-Tags und Klassen Sie verschachteln müssen.
  • Sie kontrollieren die Darstellung Ihrer Website in verschiedenen Viewportgrößen.
  • Sie reflektieren kritisch die Vor- und Nachteile von HTML-/CSS-Frameworks.

Projektseite mit Bootstrap layouten

Schaffen Sie es, eine einfache Website mit Bootstrap zu layouten?

Flexbox-Layout verwenden

Bauen Sie eine neue Website, ohne Framework, dafür aber mit den technischen Konzepten, die auch in den Frameworks zum Einsatz kommen! Sie können dabei viel von Ihrem bisherigen Inhalt wiederverwenden. In dieser Übung geht es um einen modernen Ansatz, Seiten zu layouten. Sie werden eine Seite entwickeln, die auch auf mobile Endgeräte angepasst ist.

Die Tutorialseite mobil in den Developer Tools.
Die Tutorialseite mobil in den Developer Tools.
  • Arbeiten Sie das Tutorial Build a responsive website layout with flexbox durch. Es ist leider nur auf Englisch verfügbar. Aber DeepL ist Ihr Freund bzw. Ihre Freundin.
  • Nutzen Sie den Quellcode für das Tutorial auf GitHub. Sie können ihn über den Button Clone or download > Download ZIP herunterladen. Sie brauchen von all den Dateien in dem Archiv nur die index.html und die Datei dist/style.css! Die anderen Dateien und Ordner können Sie getrost löschen.
  • Studieren Sie mithilfe des Tutorials das Konzept der Beispielwebsite genau.
    • Für die Darstellung der Seite auf mobilen Endgeräten sind CSS-Media-Queries @media verantwortlich.
    • Verschiedene Flexbox-Eigenschaften sorgen für die flexible Darstellung je nach Größe des Viewports.
  • Spielen Sie in den Chrome Developer Tools mit den mobilen Ansichten der Website herum.
  • Lernen Sie spielerisch die Möglichkeiten von Flexbox mit dem Spiel Flexbox Froggy kennen.
Zurück
Weiter

Zuletzt aktualisiert am 21. Nov. 2022

Quelltext ansehen Seite verbessern