Dein erster Tag (Onboarding)

Herzlich Willkommen! 🎉

In den nächsten Wochen wirst du viel Neues lernen und eigene Projekte umsetzen. Damit du gut startest, richten wir heute deine Entwicklungsumgebung ein und schauen uns die wichtigsten Werkzeuge an.

1. Setup: Deine Werkzeuge

Bevor wir coden können, brauchen wir das richtige Werkzeug. Dein Laptop (Windows oder Mac) sollte bereits alles vorinstalliert haben.

⚠️ Wichtig: Falls etwas fehlt oder du keine Berechtigung hast, frage bitte deinen Betreuer oder einen Kollegen um Hilfe.

Prüfe kurz, ob alles da ist:

Visual Studio Code (VS Code) Öffne das Programm Visual Studio Code.
- Falls es startet: Perfekt.
- Optional: Installiere Extensions wie Live Server, Prettier oder das German Language Pack über den Extensions-Tab links.
Node.js Öffne dein Terminal (oder PowerShell) und tippe: node -v
- Erscheint eine Version (z.B. v18.x.x)? Dann ist alles gut.
Git Tippe im Terminal: git --version
- Erscheint eine Version? Dann bist du startklar.

2. Das Terminal (Die Kommandozeile)

Keine Angst vor dem schwarzen Fenster! Das Terminal ist mächtig und oft schneller als Klicken.

Hier sind die wichtigsten Befehle, die du brauchst:

Befehl (Windows/Mac)	Bedeutung	Eselsbrücke
`ls` (Mac) / `dir` (Win)	List: Zeige alle Dateien im Ordner	”Was liegt hier rum?”
`cd ordnername`	Change Directory: Gehe in einen Ordner	”Geh da rein”
`cd ..`	Gehe einen Ordner zurück (nach oben)	“Rückwärts”
`mkdir mein-projekt`	Make Directory: Erstelle einen neuen Ordner	”Bau ein Haus”
`code .`	Öffne den aktuellen Ordner in VS Code	”Zauberei starten”

3. Git: Deine “Speicherpunkte”

Git ist wie ein Savegame in einem Videospiel. Wenn du einen Fehler machst, kannst du zurückgehen.

Der “Happy Path” (Standard-Ablauf)

Jedes Mal, wenn du ein Feature fertig hast (z.B. “Button gestylt” oder “Navigation gebaut”), machst du folgendes:

Status prüfen Schau nach, was sich geändert hat.
Terminal window
```
git status
```
Alles vormerken (Staging) Sag Git: “Ich will diese Änderungen im nächsten Savegame haben.”
Terminal window
```
git add .
```
(Der Punkt . bedeutet “alles im aktuellen Ordner”)
Speichern (Commit) Erstelle den Savepoint mit einer Nachricht.
Terminal window
```
git commit -m "Hier kurz beschreiben was du gemacht hast"
```
Beispiel: git commit -m "Startseite Header fertig"
Hochladen (Push) Schicke den Code zu GitHub/GitLab (ins Internet).
Terminal window
```
git push
```

4. Probleme lösen (Debugging)

Es ist völlig normal, Fehler zu machen. So gehst du damit um:

1. Lies die Fehlermeldung

Ernsthaft. Lies sie. Meistens steht genau da, was fehlt.

ReferenceError: x is not defined -> Du benutzt eine Variable x, die es nicht gibt.
SyntaxError: missing ) -> Du hast eine Klammer vergessen.

2. Die Chrome DevTools

Rechtsklick auf deine Webseite -> Untersuchen (Inspect).

Elements: Schau dir dein HTML an. Warum greift das CSS nicht? (Tipp: Schreibfehler in Klassen?)
Console: Hier landen alle JavaScript-Fehler (roter Text).

3. Richtig Googeln

Google ist dein bester Kollege. Aber man muss wissen, wie man fragt.

❌ “Mein Code geht nicht”
✅ “javascript array letztes element löschen”
✅ “css flexbox zentrieren”
✅ “vscode terminal öffnet nicht windows”

Bereit?

Wenn du alles installiert hast, erstelle deinen ersten Ordner, öffne ihn in VS Code und erstelle eine index.html.

Viel Spaß beim Coden! 🚀