Ausblick und nächste Schritte
Dauer: 15 Minuten
Restliche Zeit: Arbeit in den Gruppen, Fragen klären und Projektideen besprechen
Themen:
- Ausblick auf weiterführende Themen
- Empfohlenes Selbststudium HTML/CSS
- Gruppen entwerfen Ideen für das Projekt
Ausblick
grid-Layout
Eine ähnlich mächtige Alternative zum Flexbox-Layout ist das GridLayout.
position
Mit der Eigenschaft position kann die Positionierung einzelner Elemente
bestimmt werden, mehr dazu bei MDN.
Frameworks
Im Umfeld von CSS (und HTML) gibt es zahlreiche Frameworks, die vorgefertigte Styles, Layouts und UI-Komponenten definieren. Beliebte Beispiele:
Mit Web Components ist es möglich, eigene HTML-Elemente bzw. -Tags zu erstellen. Es gibt bereits Frameworks, die eine Sammlung von fertigen Webkomponenten bereitstellen, siehe z.B. Shoelace.
Bemerkung: Wir werden keine Frameworks in der Beispiel-App und im Projekt einsetzen, da wir zunächst die Prinzipien CSS grundlegend lernen wollen.
Mockups
Die Gruppen (2-3 Leute) sollten sich nun gebildet haben, um an einem Web-Projekt zu arbeiten.
Für eine Beschreibung des Umfangs der zu entwickelnden Webanwendung wird es beim nächsten Termin mehr Informationen geben.
Im ersten Schritt soll die visuelle Gestaltung der Webanwendung und wesentlicher Abläufe grob als sogenannter „Mockup“ skizziert werden. Dazu gibt es verschiedene Ansätze und Tools:
- Papier
- Whiteboard
- Excalidraw
- Figma
- es gibt viele weitere Tools…
Es gibt unterschiedliche Vorgehensweisen für Entwürfe von Webanwendungen:
- Skizzen auf Papier ⟶ statischer Prototyp mit HTML und CSS
- Skizzen auf Papier/Whiteboard ⟶ Mockups mit Excalidraw ⟶ statischer Prototyp mit HTML und CSS
- Skizzen auf Papier ⟶ Mockups mit Excalidraw ⟶ Klick-Prototyp mit Figma ⟶ Prototyp mit HTML und CSS
Manche Teams erstellen möglichst bald einen statischen Prototypen mit HTML und CSS während es auch Teams gibt, die zunächst komplexere Klick-Prototypen in einem geeigneten Tool erstellen bevor die Umsetzung in HTML, CSS und JavaScript erfolgt.
Selbststudium HTML und CSS
Zur Vertiefung der Themen HTML und CSS können weiterhin auf die interaktiven Lektionen im Kurs Responsive Web Design bei freeCodeCamp genutzt werden:
- Basic CSS (restliche Lektionen)
- CSS Flexbox
- Empfehlenswert ist auch die Sammlung von Tutorials auf der Seite internetingishard
- The Valley of Code erklärt kurz und knapp verschiedene Web-Technologien (HTML, CSS, JavaScript und mehr)
Weiterer Ablauf
Die restliche Zeit heute nutzen die Gruppen für die Arbeit an Ihren Projektideen (erste Skizzen, Mockups). Der Dozent steht für Fragen zur Verfügung.
Beim nächsten Termin stellt jede Gruppe ihre Projektidee kurz dem Dozenten vor, damit die Idee bestätigt wird und die Gruppe sich dann auf die Vorstellung vorbereiten kann.
Am übernächsten Termin präsentiert jede Gruppe 10-15 Minuten lang ihre Projektidee (Details dazu folgen noch).
⟶ Jede Gruppe schickt dem Dozenten eine E-Mail mit den Namen der beteiligten Personen und falls bekannt eine kurze Beschreibung der Projektidee.