Programm «Coding BASICS» 2019/20

Ich freue mich, dass ich euch auf euren ersten Erkundungstouren in die Welt der Webfrontend Entwicklung begleiten und unterstützen darf. Hier findet ihr das Programm für unser «Coding Basics» Modul

_8. Unterrichtstag: 18. Januar 2020

  • Das NAV-Element
    • Navigationsmenüs und Anordnungen via CSS
  • CSS Snippets
  • Review und «C-U next year» 🙂

_7. Unterrichtstag: 11. Januar 2020

  • Ankommen
  • Besprechung Modulprüfung
    • In dieser Zeit holt Simon die Modulprüfung nach
  • anschliessend Abschluss HTML Formularelemente
  • Start Umsetzung Newspaper Projekt oder Ähnliches
  • Bei Bedarf: Spielwiese

_6. Unterrichtstag: 21. Dezember 2019

  • Aufwärmen: Vorbereitung für Modulprüfung ca. 30 Minuten
  • Modulprüfung bestehend aus einem Theorie- und einem Praxisteil
    • die Prüfung ist OpenBook, d.h. es dürfen alle Unterlagen, Notizen aus dem Unterricht als auch das Internet benutzt werden.
  • anschliessend HTML
    • weitere Formularelemente: Radiobutton, Checkbox, Multiple Select, File
  • Abschluss

_5. Unterrichtstag: 14. Dezember 2019

  • Ankommen
  • HTML
    • Formularelemente
  • CSS
    • Classes und IDs
    • Image Properties
  •  Praxis:
    • Spielwiese/Playground: Zeit für eigene Vertiefung

_4. Unterrichtstag: 7. Dezember 2019

  • Ankommen
  • HTML
    • Zitieren: Blockquote, Cite und Q
    • Tabellen
  • CSS
    • CSS Fontstack
    • font- und text- Properties
    • Einbinden Google Fonts
  •  Praxis:
    • Spielwiese/Playground: Zeit für eigene Vertiefung
  • Download: Beispieldateien Tag 4 von Thomas

_3. Unterrichtstag: 30. November 2019

  • Ankommen
  • Reviews Hausaufgabe Analyse Design – 2 bis 3 Beispiele
  • HTML
    • Hyperlinks: Protokoll umschalten mittels mailto: und javascript:
    • Linebreaks <br>, Wordbreaks <wbr>, und bedingte Trennung mit ­
    • Grafiken / Images
  • CSS
    • Einführung
  • Praxis «Spielwiese/Playground»: Zeit für eigene Vertiefung
  • Download: Beispieldateien Tag 3 von Thomas

_2. Unterrichtstag: 23. November 2019

  • Ankommen // The big picture
    • Lernkontrolle // Kahoot: Internet, Netzwerke, Protokolle/Dienste
  • Das Projekt Newspaper vorstellen: Hier wollen wir mit unserem Coding Basic Modul hin
  • Die Developer Menus in den Browsern und die verschiedenen Webdeveloper Plugins
  • Rückblick: Die wichtigsten Protokolle für uns Webfrontend Designer
    • http und https
    • ftp und sftp
  • HTML Rückblick: Was weiss ich noch vom ersten Kurstag?
  • HTML Einblick:
    • Blockelemente
      • Überschriften (Heading): H1-6
      • Abschnitt (Paragraph): p
      • Listen und Elemente: ul, ol, li, dl, dt, dd
    • Inline:
      • bold/strong und italic/emphasize
      • anchor/hyperlink
    • Entities (<>&)
    • Generische Elemente: DIV und SPAN
    • HTML5 (Content) Elemente: Header, Footer, Section, Article, Aside, Main
  • Aufgabe: Analysiert eine Website die euch gefällt auf die verschiedenen Bestandteile
  • Download: Beispieldateien Tag 2 von Thomas
Hausaufgabe

Screendesign aus eigener Agentur oder einer (anderen) Website die euch besonders gefällt auf die verschiedenen Sections hin analysieren: PDF erzeugen und entsprechend anmerken!

_1. Unterrichtstag: 16. November 2019

  • Ankommen und Kurzvorstellung
  • Aktivierung – zuerst Einzelarbeit, anschliessend Kurzvortrag im Plenum
    • Wie soll der Unterricht in den Augen der Studierenden aussehen. Wie kann Unterricht gelingen/Wie kann Lernen GEIL sein?
    • Wir gestalten zusammen diese Seminarblockeinheit!
    • Was wünsche ich mir von dir als Kursleiter?
  • Konfiguration technische Infrastruktur und Einführung in den Codeeditor Brackets
  • Aktivierung: Was verstehe ich unter Coding?
  • Einführung in die Webfrontendentwicklung
    • Unterschied: Kategorisierung Backend und Frontend
    • Netzwerke: Zentral/Dezentral
    • Protokolle TCP/IP
  • Grundlagen HTML5 = Strukturlayer
    • HT – M – L
    • Tags, Elemente, Attribute
    • HTML5 Dokument
      • die verschiedenen HTML Versionen im Kurzüberblick
      • HTML Element
      • Head und Body Element
      • Title Tag
  • Download: Beispieldateien Tag 1 von Thomas
, ,