Projektarbeit: Lebenslauf [KSR Wiki]

Ziele

Eine einfache Website mit einem kurzen Lebenslauf zu dir erstellen.
Dadurch das bisher Gelernte (Grundlagen HTML & CSS) anwenden und festigen.
Selbständig arbeiten, Anweisungen genau lesen und befolgen können.

Die Resultate werden innerhalb der KSR aufgeschaltet und können von anderen besichtigt werden (begründete Ausnahmen möglich).

Zeit: Zwei Lektionen im Unterricht plus selbständige Arbeit.

Auftrag

Erstelle einen neuen Ordner lebenslauf.
Öffne diesen Ordner in Visual Studio Code (wie gelernt in Auftrag 1).
Erstelle darin eine Datei index.html. Gebe diesem die Grundstruktur, die jede HTML-Datei benötigt.
Optional: Überlege erst, wie du deine Webseite mit folgendem Inhalt gestalten willst und erstelle ein Skizze auf Papier. Vorteil: Du weisst jetzt schon, welche html-Elemente für deine Darstellung sinnvoll sind.
Verfasse nun den Inhalt der Website. Die Website muss enthalten:
1. Dein Name als Hauptüberschrift
2. Foto von dir.
3. Folgende Unterkapitel mit entsprechendem Inhalt:
  1. „Steckbrief“ als Liste (Wichtigste Daten wie Geburtsdatum, Wohnort, …)
  2. „Hobbies“
  3. „Bisherige Schulen“
  4. „Lieblingswitz“
  5. „Traum-Ferienziel“ (kurze Beschreibung mit Foto aus Internet)
  6. Optional: weitere Kapitel
Versehe den Inhalt mit den passenden HTML-Elementen: Überschriften, Listen, Abschnitte, … Versuche, alle bisher gesehenen HTML-Elemente zu verwenden.
Formatiere die Seite mit einer eingebundenen CSS-Datei.
Versuche, alle bisher gelernten CSS-Elemente zu verwenden. Verwende class oder id, um einzelne resp. ausgewählte Elemente zu stylen.
Optional: Informiere dich über Grid Layout. Nutze diese so, dass die Website auf Mobilgeräten optimiert dargestellt wird.
Abgabe:
1. Erstelle ein ZIP-Archiv mit allen für die Website benötigten Dateien: index.html, style.css, alle Bilder, … (Brauchst du Hilfe dazu? Zip-Tutorial für Windows, Zip-Tutorial Mac)
2. Benenne das ZIP-Archiv nach dem Muster „klasse_vorname_nachname.zip“, z.B. „2mgz_dagobert_duck.zip“ und gebe es über die Teams-Abgabe ab.
3. Wenn du das ZIP-Archiv an einem anderen Ort entpackst, sollte die Webseite nach dem Öffnen korrekt dargestellt werden. Achtung: es ist normal, dass die Webseite nicht korrekt dargestellt wird, wenn index.html direkt aus dem Archiv geöffnet wird - dann kann die CSS-Datei nicht gefunden werden.

Bewertung

Der Lebenslauf zählt als halbe Note.
Verspätete Abgabe kostet einen Notenpunkt Abzug.
Minimal-Ziel (ca. die Note 4):
- echter Lebenslauf für dich gemäss obigem Auftrag
- Trennung von Inhalt (HTML) und Darstellung (CSS)
- HTML: Verwendung von Überschriften, Bild, Liste, Hyperlink
- CSS: Ansprechende Formatierung (Farben, Text-Stil)
- Korrekte Syntax (Struktur HTML, Einbindung CSS, Dateiformate…)
- Korrekte Abgabe mit Zip-Archiv.
Wer mehr möchte als das Minimum, bietet:
- Gutes Design (professioneller Gesamteindruck, durchgehendes Farb- und Schriftkonzept, einheitliche Abstände…)
- Aufwändige Formatierung (Rahmen, Schatten, Farbverläufe, Mouse-Over-Animation, Transitions…)
- Ansprechendes Layout mit CSS
  - SelfHTML CSS Tutorials
  - z.B. mit Grid Layout
  - Layout passt sich an Fenstergrösse an (ausprobieren!)
  - Sieht auch auf einem Mobiltelefon gut aus (simulieren mit dem Entwicklungsmodus, Viewportangabe verwenden)
- ev. JavaScript
Achtung: Du musst jede Zeile deiner HTML- und CSS-Datei verstehen und erklären können.

Beispiel

cv.zip

Hinweise & Tipps

Elemente wie Bilder links oder rechts positionieren
Verhindern, dass der Inhalt zu breit wird: Gib dem <body> eine max-width von vielleicht 60em und eine margin: 0 auto;
Breite von Elementen steuern über width