Setup-Anleitung

Diese Anleitung führt dich durch die Installation und Einrichtung aller Werkzeuge, die du für die Lehrveranstaltung benötigst. Folge den Schritten in der angegebenen Reihenfolge.

1. Visual Studio Code installieren

VS Code ist ein kostenloser Code-Editor von Microsoft. Er ist leichtgewichtig, erweiterbar und der meistgenutzte Editor für Webentwicklung.

Download

Gehe auf code.visualstudio.com und lade die Version für dein Betriebssystem herunter (Windows, macOS oder Linux).

Installation

Führe den Installer aus. Auf Windows: Setze den Haken bei "Add to PATH" und "Register Code as an editor for supported file types".

Erster Start

Öffne VS Code. Du siehst die Welcome-Seite. Wähle ein Farbschema, das dir gefällt (z.B. "Dark+" oder "Light+").

Tipp

VS Code hat eine deutsche Sprachpaket-Extension. Suche nach "German Language Pack" in den Extensions, wenn du die Oberfläche auf Deutsch haben möchtest. Wir empfehlen allerdings, bei der englischen Oberfläche zu bleiben, da die meisten Tutorials und Dokumentationen auf Englisch sind.

2. VS Code Extensions installieren

Extensions erweitern VS Code um zusätzliche Funktionen. Für diese LV benötigst du:

Live Server

Startet einen lokalen Webserver und aktualisiert die Seite automatisch bei Änderungen. Pflicht-Extension!

Installation: Klicke auf das Extensions-Icon in der Seitenleiste (oder Ctrl+Shift+X), suche nach "Live Server" von Ritwick Dey, klicke "Install".

Nutzung: Rechtsklick auf eine HTML-Datei → "Open with Live Server". Die Seite öffnet sich im Browser unter http://127.0.0.1:5500.

Prettier (optional, empfohlen)

Formatiert deinen Code automatisch. Suche nach "Prettier - Code formatter" und installiere die Extension. Aktiviere "Format on Save" in den Einstellungen.

GitHub Copilot (optional)

KI-gestützte Code-Vervollständigung direkt in VS Code. Kostenlos für Studierende mit dem GitHub Student Developer Pack. Suche nach "GitHub Copilot".

Warum Live Server?

Wenn du eine HTML-Datei direkt im Browser öffnest (Doppelklick), wird sie mit dem file://-Protokoll geladen. Das funktioniert für einfaches HTML, aber fetch()-Aufrufe (die wir ab Einheit 05 brauchen) funktionieren aus Sicherheitsgründen nur über http://. Live Server löst dieses Problem.

3. Browser und Developer Tools

Wir empfehlen Google Chrome oder Mozilla Firefox für die Entwicklung. Beide haben exzellente Developer Tools.

DevTools öffnen

Drücke F12 oder Ctrl+Shift+I (bzw. Cmd+Option+I auf macOS). Die Developer Tools öffnen sich als Panel.

Elements/Inspector Tab

Zeigt den HTML-Baum der Seite. Du kannst Elemente auswählen, ihre CSS-Styles sehen und live verändern. Ideal zum Experimentieren!

Console Tab

Hier siehst du JavaScript-Ausgaben (console.log()) und Fehlermeldungen. Du kannst auch direkt JavaScript-Befehle eingeben.

Network Tab

Zeigt alle HTTP-Anfragen, die die Seite macht (Bilder, CSS, JavaScript, API-Aufrufe). Nützlich zum Debuggen von fetch()-Aufrufen.

Ausprobieren

Öffne eine beliebige Webseite, drücke F12, und probiere folgendes in der Konsole:

document.title
document.querySelector('h1').textContent
document.body.style.backgroundColor = 'lightblue'

4. Git installieren

Git ist ein Versionskontrollsystem, das Änderungen an deinem Code verfolgt. Du brauchst Git, um deine Projekte auf GitHub hochzuladen.

Download und Installation

Windows: Lade Git von git-scm.com herunter. Bei der Installation: Wähle "Use Visual Studio Code as Git's default editor".

macOS: Öffne das Terminal und tippe git --version. Falls nicht installiert, wirst du aufgefordert, die Xcode Command Line Tools zu installieren.

Git konfigurieren

Öffne ein Terminal (in VS Code: Ctrl+`) und gib ein:

git config --global user.name "Dein Name"
git config --global user.email "deine@email.at"

GitHub-Account erstellen

Gehe auf github.com und erstelle einen kostenlosen Account. Nutze deine Uni-Email für das GitHub Student Developer Pack (gratis Copilot und mehr).

Die wichtigsten Git-Befehle

git init                    # Neues Repository erstellen
git add .                   # Alle Änderungen zum Commit vormerken
git commit -m "Nachricht"   # Änderungen speichern
git push                    # Auf GitHub hochladen
git status                  # Aktuellen Status anzeigen

5. GitHub Pages einrichten

GitHub Pages hostet deine statische Website kostenlos direkt aus einem GitHub-Repository.

Repository erstellen

Auf GitHub: Klicke "New repository". Name: z.B. dh-portfolio. Setze "Public" und "Add a README file".

Repository klonen

Kopiere die HTTPS-URL und klone in VS Code:

git clone https://github.com/DEIN-USERNAME/dh-portfolio.git

Dateien erstellen und hochladen

Erstelle deine HTML/CSS/JS-Dateien im Repository-Ordner. Dann:

git add .
git commit -m "Erste Version meiner Portfolio-Seite"
git push

GitHub Pages aktivieren

Im Repository auf GitHub: Settings → Pages → Source: "Deploy from a branch" → Branch: "main" → Ordner: "/ (root)" → Save.

Nach 1-2 Minuten ist deine Seite unter https://DEIN-USERNAME.github.io/dh-portfolio/ erreichbar.

Wichtig

Deine Startseite muss index.html heißen (nicht home.html oder start.html). GitHub Pages sucht automatisch nach einer index.html im Root-Verzeichnis.

6. LLM-Werkzeuge

Für die Lehrveranstaltung setzen wir verschiedene LLM-Werkzeuge ein. Du brauchst mindestens eines davon:

Claude (Anthropic)

Unser empfohlenes Werkzeug. Gehe auf claude.ai und erstelle einen Account. Die kostenlose Version reicht für die LV aus. Für fortgeschrittene Nutzung: Claude Code (CLI-Tool) kann über npm install -g @anthropic-ai/claude-code installiert werden.

ChatGPT (OpenAI)

Alternative unter chat.openai.com. Kostenlose Version verfügbar.

GitHub Copilot

Direkt in VS Code integriert. Kostenlos mit dem GitHub Student Developer Pack. Bietet Inline-Code-Vorschläge während du tippst.

Agentic Coding Grundprinzip

In dieser LV nutzen wir LLMs nicht als Blackbox, die Code produziert, den wir nicht verstehen. Stattdessen folgen wir dem Prinzip des "Informed Vibe Coding": Wir beschreiben, was wir brauchen, prüfen das Ergebnis kritisch, lernen aus dem generierten Code und iterieren gezielt. Mehr dazu im Agentic Coding Guide.

7. Checkliste

Überprüfe, dass du alles eingerichtet hast:

VS Code installiert und geöffnet
Live Server Extension installiert
Browser (Chrome oder Firefox) mit DevTools getestet
Git installiert und konfiguriert (Name + Email)
GitHub-Account erstellt
Mindestens ein LLM-Werkzeug eingerichtet (Claude, ChatGPT oder Copilot)
Erstes Repository erstellt und GitHub Pages aktiviert

Probleme?

Falls bei der Einrichtung etwas nicht funktioniert: Bring dein Problem zur nächsten Einheit mit. Wir helfen gerne! Du kannst auch ein LLM fragen: "Ich versuche VS Code auf Windows 11 zu installieren und bekomme folgenden Fehler: [Fehlermeldung]. Was kann ich tun?"