Website Projects [KSR Wiki]

Diese Seite ist nicht editierbar. Du kannst den Quelltext sehen, jedoch nicht verändern. Kontaktiere den Administrator, wenn du glaubst, dass hier ein Fehler vorliegt.
====== Website Projects ======

=== In Kürze ===

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

=== Im Detail ===

   * **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.

=== Details Abgabe ===

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


=== HTML & CSS ===

[[gf_informatik:web_sca:websites|]]

=== Optional: JavaScript ===

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:
{{ :gf_informatik:web_sca: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/