WMC1 HTML Teil II (Responsive Webdesign)

SS24 4ACIF

Beurteilung

Die Beurteilung in WMC setzt sich aus dem HTML-Projekt und der Präsentation zusammen.

HTML Projekt

Beschreibung

Erstellen Sie eine responsive Webseite mit einem Thema Ihrer Wahl und halten Sie sich strikt an die vorgegebenen Anforderungen. Die Seite soll nach dem Mobile First-Ansatz erstellt werden.

Allgemeine Anforderungen

• Strikte Trennung von CSS und HTML
• HTML5 Elemente vor Div und Span
• Relative Units vor absoluten Units
• Verwendung von CSS-Variablen
• HTML und CSS-Validierung (W3C Validator)

Spezielle Anforderungen

• Ihre Webseite soll (mindestens) aus folgenden Elementen bestehen:
  • Header
  • Titel (h1)
  • Navigation
  • Main-Content mit mindestens 3 Seiten
  • Zwei Sidebars (aside)
  • Footer (min 3 Bereiche)
• Optimieren Sie Ihre Webseite, sodass Sie auch auf mobilen Geräten optimal dargestellt wird (Viewport-Meta-Tag)
• Verwenden Sie für Ihr Makrolayout das CSS Grid-Layout
• Verwenden Sie für Ihre Mikrolayouts das CSS Flexbox- bzw. CSS Grid-Layout
• Optimieren Sie Ihre Webseite für folgende drei Bildschirmbreiten:
  • < 300 px
  • >= 300 px und ⇐ 900 px
  • > 900px
• Integrieren Sie mindestens ein fortgeschrittenes CSS-Thema Ihrer Wahl
• Je komplexer und optisch anspruchsvoller die Webseite, desto besser die Beurteilung

Zusatzthemen

• Container-Abfragen: @container - https://developer.mozilla.org/en-US/docs/Web/CSS/@container
• CSS-Animationen: @keyframes - https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
• Parallax Scrolling
• ect.

Abgabe

• Abgabetermin: bis 11.06.2024 - 17:10 Uhr
• Benennen Sie Ihren Projektordner um: 4ACIF_HTML-II_ZUNAME_Vorname
• Komprimieren (zip, rar, ...) Sie Ihr Projekt: 4ACIF_HTML-II_ZUNAME_Vorname.zip
• Laden Sie Ihr Projekt auf Moodle hoch: Moodle-Upload

Projektpräsentation

• Präsentieren Sie Ihre Webseite in maximal 5 Minuten
• Erklären Sie, was und wie Sie Ihre Webseite implementiert haben
• Welches Zusatzthema haben Sie gewählt und wie wurde es umgesetzt

Termine

11.06.2024	18.06.2024
Sylvia Aiyoub	Mehri Sameri Zadeh
Barbara Swoboda Handler	Sarah Schmiedl
Sophie Kahl	Jonas Strobl
Spoto Giorgio Matteo	Yurii Savonik
Alan Tatamov	Taalaibekov Aibek
Denise Schmid	Elahe Ahmadi
Jakob Kahrer	Mirzhan Eldarhanov
Daniel Schwarz	Maria Homolka
Konstantina Karzanov	Mustafa Isikli
Gabriel Dvorak	Lukas Poscher
Bassem Osman	Abdollah Mujic
Osama Alkhalaf	Isha Gautam
Osama Elgzar	Eskaf Mohmmad Taleb
Israa Elmoghazi	Mathias Horcher

Media Query

Syntax: @media = @media <media-query-list> { <rule-list> }

siehe: https://developer.mozilla.org/en-US/docs/Web/CSS/@media

Grid

siehe: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout

Flexbox

siehe:

• https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Layout Cookbook

siehe: https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook