Semantisches HTML 2 // Formulare & Text Styling


Wir werden zur Bearbeitung der Aufgaben wieder GitHub Classroom nutzen. Die Aufgaben bauen auf den Markup von den Übungen aus dem Workshop Einfache Inhalte mit sinnvollem Markup strukturieren auf. Verwenden Sie daher das Repository Assignment Semantisches HTML 1.

Erzeugen Sie nun einen neuen Branch mit dem Namen session-2 und wechseln Sie bitte in diesen Branch. Sorgen Sie wie in der ersten Aufgabe für eine saubere Git-Commit-History.


2.1: CSS Styling

Verändern Sie das Design der Elemente mithilfe von CSS. Binden Sie die CSS Anweisungen im Head der HTML Datei ein. Versuchen Sie sich der Anmutung der anzunähern. Einen kleinen Styleguide mit basalen Angaben finden Sie in folgendem Figma File

2.2: One Page Navigation

Passen Sie das Design der One Page Navigation so an, dass es wie in der Vorlage vorgegeben aussieht. Wichtig ist, dass das Element immer sichtbar ist, wenn der Nutzer die Seite scrollt.

2.3: Formulare

Nutzer Ihrer Webseite soll die Möglichkeit gegeben werden Kommentare zu einem Rezept abzugeben. Fügen sie einen Abschnitt in der Seite hinzu, in der ein Formular mit folgenen Feldern zur Verfügung steht:

  • Name des Kommentarautors
  • E-Mail Adresse des Autors
  • Upload-Möglichkeit eines Profilfotos des Autors
  • Texteingabe Feld
  • Auswahl, ob der Autorenname in einer späteren Anzeige anonymisiert werden soll
  • Bestätigung, dass die Datenschutzerklärung gelesen wurde ;-)
  • Senden
  • Zurücksetzen

Wenn Sie alle Codeänderungen vorgenommen haben, starten Sie einen Pull-Request (PR) und mergen Sie den session-2-Branch auf den main-Branch.