Website Projects

Erstelle eine eigene Website zu einem von dir gewählten Thema. Die Webseiten werden schulintern aufgeschaltet.

• Zeit: 4 Lektionen
• 1. Lektion:
  • Thema von LP absegnen lassen
  • auf Papier: Skizze von Website erstellen, welche Inhalte, wie angeordnet (Desktop- und Mobile-View)
• Wähle für deine Seite ein Thema, welches für deine Mitschüler:innen interessant ist. Z.B. Familienrezept(e), Blog zu einer spannenden Reise, Infoseite zu Thema, über das du viel weisst, einfaches Game mit JS …
• Erstelle Website komplett 'from scratch' in VSCode und ohne Verwendung irgendwelcher Hilfssoftware.
• Verwende ein Grid-Layout. Die Inhalte sollen für Desktop- und Mobile-View jeweils passend angeordnet werden
• Style die Website mit einem CSS-File. Die Seite soll ordentlich (und einigermassen zeitgemäss) aussehen. Investiere aber nicht zu viel Zeit ins stylen, der Inhalt ist wichtiger!
• Abgabe:
  • Bis Fr 20.01.2023 @23.59
  • Stelle sicher, dass deine Website einen vernünftigen Titel hat: <title>...</title>
  • Erstelle richtig benannten Ordner, der alle benötigten Dateien beinhaltet (siehe „Details Abgabe“ unten). Mache aus diesem Ordner ein Zip-File …
  • … und gebe es über Abgabe in Teams ab.
• Arbeit muss akzeptiert werden. Kleine Mängel müssen nachgebessert werden. Ungenügende Arbeiten müssen am Anfang des neuen Semesters in der Freizeit zu einem von der Lehrperson vorgegebenen Thema wiederholt werden.

Erstelle Ordner mit deinem Namen (z.B. „hans_mueller“), welcher alle deine Files beinhaltet (Website muss „index.html“ heissen). Mache dann Zip-File von diesem Ordner.

Typische Struktur könnte so aussehen:

Ordner: „hans_mueller“, darin:

• „index.html“
• „style.css“
• Ordner: „images“, darin:
  • cat01.png
  • cat02.png
  • angrydog.jpg

Websites

JavaScript ist DIE Sprache im Web und die aktuell am weitesten verbreite Programmiersprache überhaupt. Falls du möchtest, kannst du in deiner Website auch JavaScript integrieren.

Hier ein Template mit einem einfachen Beispiel: html_mit_js_template.zip

Beispiel für JS: Rezept, bei dem man Anzahl Personen eingeben kann. Mithilfe von JavaScript werden Mengenangaben berechnet und angezeigt.

Links:

• https://www.w3schools.com/js/