:-)

V O R T R A G

Ziele

Organisation

Benotung

Fokus

Termine

Creepy Emoticon mit Beinen
Hallo (29.2.)
Women who changed science
Websites als Archiv (7.3.)
Image CAPTCHA mit Zebrastreifen
Websites und AI (14.3.)
Mark Zuckerberg starrt in seinen Laptop und kaut dabei auf einem grünen Dartpfeil
Websites im Film (21.3.)
Betonblock als CO2-Equivalent von einer Stunde Netflix
Websites und das Klima (11.4.)
Workshop
Workshop (18.4./25.4.)

Termin

  1. Vortrag (Eröffnendes Thema)
  2. Theorie (Einführung in Web-Konzepte)
  3. Praxis (Code-Beispiele und gemeinsames Ausprobieren)

Workshop

Beim letzten Termin soll es darum gehen, konkrete Fragen und Unsicherheiten zu beantworten. Der Termin gilt als Werkstatt um in der Gruppe und Einzelbetreuungen Ideen, Feedback und Lösungsmöglichkeiten zu Projekten auszutauschen.

Projekt

Jede:r Studierende wird eine eigene kleine Archiv-Website umsetzen. Diese soll gestalterisch, semantisch und interaktiv weiterentwickelt und bis zum Semesterende (22.6.) fertiggestellt werden.

Lane is never coming back

Umfang (Einzelseiten und Features)

Betriebssystem

Finder-Einstellungen
Dateiendungen einblenden
Finder-Einstellungen
Verzeichnis einblenden
Finder-Einstellungen
Verzeichnis für Code-Projekte anlegen

Apps

P R A X I S

Projekt Setup

Diese Ordnung kann als Ausgangspunkt für die Website herangezogen werden.

📂 javascript-1 📂 fonts 📦 beispiel-regular.woff2 📁 media 🖼️ beispiel-grafik.png 📹 beispiel-video.mp4 📂 objekte 🧃 beispiel.html (Detailseite) 📂 scripts 🪩 vorname.js 📂 styles 🎨 vorname.css 🏠 index.html (Startseite)
Ordnerstruktur

Projekt Basics

Dieser Aufbau kann als Ausgangspunkt für alle Seiten herangezogen werden.

<html lang="de"> <head> <meta charset="utf-8"> <title>Meine zweite Website</title> <link href="styles/vorname.css" rel="stylesheet"> </head> <body> … </body> </html>
HTML
@font-face { font-family: "Beispiel Regular Web"; src: url("../fonts/beispiel-regular.woff2") format("woff2"); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Beispiel Regular Web", sans-serif; } html { scroll-behavior: smooth; } body { color: olive; }
CSS

Sektion

Ein hervorgehobenes Zitat als Headline, Bild und Button einfügen.

… <section> <h1 id="zitat">Im Moment habe ich kein E-lan</h1> <img src="media/beispiel-grafik.png" alt="Schwere Füße"> <button>WOW</button> </section> …
HTML
section { display: flex; flex-direction: column; align-items: center; } #zitat { font-size: 32px; color: hotpink; }
CSS

Script

<html lang="de"> <head> <meta charset="utf-8"> <title>Meine zweite Website</title> <link href="styles/vorname.css" rel="stylesheet"> <script src="scripts/vorname.js" defer></script> </head> <body> … </body> </html>
HTML

Notizen

Kommentare zur Erklärung einfügen (Mac: COMMAND + SHIFT + 7, Windows: STRG + #).

// Eine kurze Anmerkung /* Eine längere Beschreibung die sich hier unnötig in die Länge zieht */
JS

Inspect

Elemente im Browser untersuchen (Mac: COMMAND + OPTION + I, Windows: CONTROL + SHIFT + I).

Screenshot von Chrome DevTools

Konsole

Kommentare, Werte oder Ergebnisse zur besseren Sicht- und Nachvollziehbarkeit ausgeben.

console.log("ciao");
JS

Abgabe

Übung so gut wie möglich fertig machen (vollständig und sauber) und bis zum nächsten Termin per Slack DM abgeben.

📂 → 🗜️ → 🎁 → 💬 → ✅