VS Code einrichten

Wir arbeiten mit Visual Studio Code und einem Browser. Mehr braucht es für HTML und CSS nicht. Bequemer wird es mit einem kleinen Entwicklungsserver, der die Seite beim Speichern selbst aktualisiert. Beides lernst du hier kennen.

Was du am Ende kannst

einen Projektordner in VS Code öffnen
HTML mit Emmet schnell tippen
eine Datei im Browser öffnen und nach dem Speichern neu laden
den Unterschied zwischen file:// und http://localhost erklären
mit npx vite einen Entwicklungsserver starten und beenden

Arbeite immer mit einem Ordner

Eine Website ist ein Ordner voller Dateien, die aufeinander verweisen. Öffne deshalb nie einzelne Dateien, sondern den Ordner: Datei → Ordner öffnen.

Für diese Schulung legst du dir einen Sammelordner an, zum Beispiel html-css in deinen Dokumenten, und entpackst dort die Starter.

Die Handgriffe, die sich lohnen

Taste	Wirkung
`Strg`+`S`	Speichern. Ohne Speichern sieht der Browser nichts
`Umschalt`+`Alt`+`F`	Dokument formatieren
`Strg`+`#`	Zeile auskommentieren (englische Tastatur: `Strg`+`/`)
`Alt`+`↑` / `↓`	Zeile verschieben
`Strg`+`D`	nächstes gleiches Wort mitmarkieren (mehrere Cursor)

Mit Datei → Automatisch speichern übernimmt der Editor das Speichern für dich.

Emmet: schneller tippen

VS Code bringt Emmet mit. Du tippst eine Abkürzung und drückst Tab:

Du tippst	Es entsteht
`!`	das komplette HTML-Gerüst
`h1`	`<h1></h1>`
`p.hinweis`	`<p class="hinweis"></p>`
`ul>li*3`	eine Liste mit drei Einträgen
`a[href=termine.html]`	ein Link mit Ziel

Emmet ergänzt das Gerüst mit lang="en". Für deutsche Seiten änderst du das auf lang="de", warum, erklärt das nächste Kapitel.

Die Seite ansehen

Doppelklick auf die Datei im Explorer öffnet sie im Browser. In der Adresszeile steht dann file:///…, die Seite kommt also direkt von deiner Platte.

Der Arbeitsablauf ist immer gleich:

In VS Code ändern und speichern (Strg+S).
Im Browser neu laden (F5).

So funktioniert jede Seite: Sie ist nichts weiter als eine Datei. Das reicht für alles in dieser Schulung, auch wenn es auf Dauer etwas umständlich wird.

Automatisch neu laden mit Vite

Am Dienstag wirst du beim Gestalten sehr oft speichern und nachsehen. Das nimmt dir ein Entwicklungsserver ab. In der Schulungsumgebung ist dafür Node.js installiert, und wir nutzen das Werkzeug Vite.

Öffne den Projektordner in VS Code.
Öffne das Terminal: Terminal → Neues Terminal.
Starte den Server:
Terminal-Fenster
```
npx vite
```
Beim allerersten Mal fragt npx, ob es Vite herunterladen soll. Bestätige mit y.
Öffne die angezeigte Adresse, meist http://localhost:5173/. Mit gedrückter Strg-Taste kannst du sie direkt im Terminal anklicken.
Zum Beenden drückst du im Terminal Strg+C.

Du speicherst	Im Browser passiert
CSS	Die neuen Stile erscheinen sofort, die Seite lädt nicht neu. Eingaben in Formularen und offene Menüs bleiben erhalten
HTML	Die Seite lädt automatisch neu

file:// oder http://localhost? Mit file:// liest der Browser die Datei direkt von der Platte, es gibt keine Anfragen an einen Server. localhost ist dein eigener Rechner: Hier läuft ein echter, kleiner Webserver, und du siehst alles aus dem ersten Kapitel wieder, zum Beispiel Statuscodes im Netzwerk-Tab.

Der Server ist ein Hilfsmittel beim Entwickeln. Du musst ihn nicht benutzen, und deine Dateien verändert er nicht. Wenn du nicht mit ihm arbeiten möchtest, reicht weiterhin F5.

In allen Startern dieser Schulung liegt eine kleine vite.config.mjs. Ohne sie liefert Vite für eine fehlende Seite die Startseite aus statt der Meldung 404, denn es ist eigentlich für Einzelseiten-Apps gedacht. Mit ihr verhält es sich wie ein normaler Webserver. Den Ordner .vite, den das Werkzeug anlegt, kannst du ignorieren.

export default {
  appType: 'mpa',
};

Übung

Stufe 1: Die erste Seite

Lege einen Ordner erste-seite an und öffne ihn in VS Code.
Erstelle eine Datei index.html, tippe ! und Tab.
Schreibe zwischen <body> und </body> den Satz Hallo Web.
Speichern, per Doppelklick im Browser öffnen.

Stufe 2: Der Ablauf

Ändere den Satz, speichere, lade neu. Ändere ihn noch einmal, aber speichere nicht und lade neu. Was siehst du?

Stufe 3: Mit Server

Starte im selben Ordner npx vite und öffne die angezeigte Adresse. Ändere den Satz und speichere. Vergleiche die Adresszeile mit der von Stufe 1. Beende den Server danach wieder.

Für Schnelle

Erzeuge mit Emmet eine Liste mit fünf Einträgen, in der jeder Eintrag einen Link enthält: ul>li*5>a[href=#]. Probiere danach Strg+D, um mehrere Stellen gleichzeitig zu ändern.