BCxP Client Community - CSS Flexbox
Lernziele dieser Hands-On Session:
- Die Lernenden kennen die Flexbox Attribute.
- Die Lernenden verstehen das Flexbox Konzept.
- Die Lernenden können ein Layout mit Flexbox umsetzen.
Agenda
- Theorie: Flexbox Konzept und Attribute
Weitere Referenzen:
Konferenz Workshop Folien zu Flexbox
Flexbox Cheatsheet
Flexbox Froggy
Flexbox Sandbox - Coding: Aufgabenstellung bearbeiten
- Feedback
Aufgabenstellung
Paul ist ein junger Software-Entwickler bei BCxP und bittet euch bei seiner Userstory zum Thema "Layouting mit Flexbox" um Hilfe.
Bei der Umsetzung der Anforderungen ist etwas schief gelaufen. Bitte helft Paul.
Userstory-0815: Layout für die Anwendung
Als Benutzer des Clients möchte ich ein vertrautes Layout-Konzept nutzen, um mich schnell zurecht zu finden.
Die Client-Anwendung besteht aus einem Header, einem Navigationsmenu an der linken Seite und einem Content-Bereich.
Der Content-Bereich enthält eine Bildergallerie mit Kacheln.
Akzeptanzkriterien:
- Es wird nur Flexbox und dessen Attribute genutzt.
- Die HTML-Snippets aus der Vorgehensbeschreibung werden verwendet (siehe unten).
- Das Layout entspricht dem folgenden Mockup:
Vorgehen
- Stelle den Header fertig.
- Konfiguriere den
sidebar-navigation-layout-Container, sodass die Navigationsleiste und der Content-Bereich sichtbar sind.
Lösche die Hintergrundfarben, sobald das grobe Layout steht. - Kopiere den Inhalt für die Navigationsleiste in das
nav-Element:
<div class="sidebar-navigation-list"> <ul> <li> <a href="#kitten" class="menu-item"> <i class="fa-solid fa-home"></i> <span>Home</span> </a> </li> </ul> <ul> <li class="active"> <a href="#kitten" class="menu-item"> <i class="fa-solid fa-cat"></i> <span>Kätzchen</span> </a> <ul> <li class="active"> <a href="#kitten-overview" class="menu-item"> <i class="fa-solid fa-table-cells-large"></i> <span>Übersicht</span> </a> </li> <li> <a href="#kitten-overview" class="menu-item"> <i class="fa-solid fa-table-cells"></i> <span>Details</span> </a> </li> </ul> </li> </ul> </div> <div class="sidebar-navigation-list"> <div class="seperator"></div> <ul> <li> <a href="#collapse-menu" class="menu-item"> <i class="fa-solid fa-angles-left"></i> <span>Einklappen</span> </a </li> </ul> </div>
- Stelle die Navigationsleiste fertig.
- Kopiere den Inhalt für den Content-Bereich in das
main-Element:
<section> <div> <h2>Kätzchen - Übersicht</h2> <p> Die süßesten Kätzchen der Welt! </p> </div> </section> <section class="grid"> <div class="tile"> <img src="http://placekitten.com/600/600?image=1" /> </div> <div class="tile"> <img src="http://placekitten.com/600/600?image=2" /> </div> <div class="tile"> <img src="http://placekitten.com/600/600?image=3" /> </div> <div class="tile"> <img src="http://placekitten.com/600/600?image=4" /> </div> <div class="tile"> <img src="http://placekitten.com/600/600?image=5" /> </div> <div class="tile"> <img src="http://placekitten.com/600/600?image=6" /> </div> <div class="tile"> <img src="http://placekitten.com/600/600?image=7" /> </div> </section>
- Stelle den Content-Bereich fertig.
Los geht´s
Öffne Code Pen (Online Editor) mit dem Code.
Für die Übung sind die Dateien uebung.css und uebung.html wichtig.
Beides wird im Code Pen direkt angezeigt.
In der Vorschau ist die Übung mit Pauls aktuellen Stand zu sehen.
Änderungen an der CSS-Datei sind sofort in der Vorschau sichtbar.
Beim Speichern wird automatisch eine eigene Version des Projektes (Fork) angelegt.