Deine erste Datei und dein erster Ordner fürs Web

Wir richten den Ordner ein, in dem deine Website leben wird, und prüfen, dass alles funktioniert.

Eine Website lebt in einem Ordner

Jede Website der Welt ist eigentlich nur ein Haufen Dateien in einem Ordner. Richten wir deinen ein.

Erstelle einen Ordner namens my-website. Auf dem Desktop Rechtsklick → Neuer Ordner (auf dem Mac auch Neuer Ordner, unter Windows Neu → Ordner) und nenne ihn my-website.
Öffne den Ordner in VS Code. Starte VS Code und wähle im Menü File → Open Folder… und finde deinen my-website-Ordner. Wenn VS Code fragt, ob du den Autoren dieses Ordners vertraust, klicke Yes, I trust the authors – du bist schließlich der Autor!
Erstelle eine Datei namens index.html. Im linken Panel fahre mit der Maus über den Ordnernamen und klicke auf das New File-Symbol (eine Seite mit Plus). Tippe genau: index.html und drücke Enter.

💡

Warum ausgerechnet index.html? Das ist der vereinbarte Name für die Hauptseite einer Website. Wenn ein Browser in einen Ordner kommt, sucht er zuerst nach einer Datei namens index.html – wie in der Schule direkt in dein Klassenzimmer gehen.

Schreib deinen ersten Code

In der Datei index.html tippe das hier (oder kopiere es mit dem Button oben rechts):

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My website</title>
  </head>
  <body>
    <h1>It works!</h1>
    <p>This is my very first file. From here I'll build a whole website.</p>
  </body>
</html>

Speichere die Datei: Strg+S (auf dem Mac Cmd+S). Speichere oft – eine ungespeicherte Datei hat in VS Code einen kleinen Punkt neben dem Namen.

Öffne deine Seite im Browser

Finde die Datei index.html in deinem Ordner (auf dem Desktop → my-website) und doppelklicke, um sie zu öffnen. Ein Browser öffnet sich und zeigt deine Seite mit den Worten „It works!”.

✅

Kontrolliere dich selbst: Du siehst im Browser eine große Überschrift mit „It works!”. Wenn ja – du hast jetzt eine funktionierende Web-Werkstatt und kannst direkt zu Level 1!

💡

Ein praktischer Trick: Lass VS Code und deinen Browser nebeneinander offen. Wenn du etwas im Code änderst, speichere (Strg+S) und drücke F5 im Browser zum Aktualisieren. Deine Änderung erscheint sofort.

Das nimmst du aus dieser Lektion mit

Eine Website ist ein Ordner voller Dateien. Deiner heißt my-website.
Die Hauptseite einer Website heißt immer index.html.
Die Arbeits-Schleife: Code schreiben → speichern (Strg+S) → Browser aktualisieren (F5). Das machst du immer wieder.