**Dies ist eine alte Version des Dokuments!**

Projektarbeit: Lebenslauf

Ziele

  • Erstellen eine einfache Website mit einem kurzen Lebenslauf zu dir.
  • Dadurch das bisher gelernte (Grundlagen HTML & CSS) anzuwenden 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

  1. Erstelle einen neuen Ordner „lebenslauf“.
  2. Öffne diesen Ordner in Visual Studio Code (wie gelernt in Auftrag I).
  3. Erstelle darin ein File index.html. Gebe diesem die Grundstruktur, welche jedes HTML-File benötigt.
  4. 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
  5. Versehe den Inhalt mit den passenden HTML-Elementen: Überschriften, Listen, Abschnitte, … Versuche, alle bisher gesehenen HTML-Elemente zu verwenden.
  6. Erstelle nun ein File style.css und binde es im HTML-File ein.
  7. Style nun mithilfe von CSS deine Website ansprechend. Versuche, alle bisher gelernten CSS-Elemente zu verwenden. Verwende id und class, um einzelne resp. ausgewählte Elemente zu stylen.
  8. Optional: Informiere dich über Grid-Layouts (unten). Nutze diese so, dass die Website auf Mobilgeräten optimiert dargestellt wird.
  9. Abgabe:
    1. Erstelle ein ZIP-File 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-File nach dem Muster „klasse_vorname_nachname.zip“, z.B. „2mgz_dagobert_duck.zip“ und gebe es über die Teams-Abgabe ab.

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 (echte Inhalte)
    • 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…)
    • Abgabe als Zip-Archiv mit allen nötigen Dateien per Email (Anleitung Windows MacOS)
  • Wer mehr möchte als das Minimum, bietet:
    • Aufwendigere Formatierung (Rahmen, Schatten, Farbverläufe, Mouse-Over-Animation…)
    • Ansprechendes Layout mit CSS
      • z.B. mit Grid Layout
      • Layout passt sich an Fenstergrösse an
      • Sieht auch auf einem Mobiltelefon gut aus (simulieren mit dem Entwicklungsmodus)
      • attraktive Texte
    • ev. JavaScript
  • Achtung: ich rate davon ab, Web-Frameworks oder Website-Building-Tools zu verwenden. Falls du das machen willst, erwarte ich, dass du deren Details verstehst und erklären kannst.

Beispiel

Hinweise & Tipps

  • Elemente wie Bilder links oder rechts positionieren
  • Verhindern, dass der Inhalt zu breit wird: Geben Sie dem <body> eine max-width von vielleicht 20cm.
  • Breite von Elementen steuern über width
  • gf_informatik/web/cv_project.1697991756.txt.gz
  • Zuletzt geändert: 2023-10-22 16:22
  • von hof