Visual Studio Code einrichten

Visual Studio Code (VS Code) ist ein kostenloser und leicht zu bedienender Code-Editor, der sich sehr gut eignet, um Websites mit HTML und CSS zu erstellen. Im Folgenden zeige ich Ihnen Schritt für Schritt, wie Sie VS Code installieren und für die Webentwicklung einrichten.

Download und Installation von Visual Studio Code

Laden Sie Visual Studio Code herunter für Ihr Betriebssystem (Windows, macOS oder Linux) und führen Sie die heruntergeladene Datei aus. Folgen Sie den Anweisungen des Installationsassistenten.

Einrichten von Visual Studio Code für HTML und CSS

Öffnen Sie die Anwendung. Erstellen Sie einen neuen Ordner auf Ihrem Computer, beispielsweise MeineWebsite, in dem Sie Ihre Projektdateien speichern.
In VS Code wählen Sie „Datei“ > „Ordner öffnen…“ und navigieren zu dem eben erstellten Ordner, um ihn als Arbeitsbereich zu öffnen.

Damit sind Sie an sich schon startklar, aber eine Erweiterung empfehle ich unbedingt, damit Sie Ihre HTML-Seiten direkt im Vorschaubereich ansehen können, ohne jedes Mal einen Browser öffnen zu müssen:

Klicken Sie im linken Seitenmenü auf das Symbol für Erweiterungen (vier Quadrate) und suchen Sie nach „Live Server“. Installieren Sie die Erweiterung.

Der Editor VS Code mit Vorschaufenster

Erstellen und Bearbeiten von HTML- und CSS-Dateien

Klicken Sie mit der rechten Maustaste im Explorer-Bereich in der linken Seitenleiste auf Ihren Projektordner und wählen Sie „Neue Datei“.
Erstellen Sie eine Datei namens index.html und eine weitere namens styles.css.

Öffnen Sie die Datei index.html und geben kopieren Sie die Grundstruktur ein:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine Seite</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Die Überschrift</h1>
    <p>Dies ist eine Beispielseite.</p>
</body>
</html>

Öffnen Sie die Datei styles.css und fügen Sie beispielsweise hinzu:

body {
    font-family: Helvetica, sans-serif;
    background-color: #white;
    color: #black;
    margin: 20px;
}

h1 {
    color: #darkgreen;
}

Live-Vorschau nutzen

Klicken Sie in der Seitenleiste links mit der rechten Maustaste auf die Datei index.html und wählen Sie „Show Preview“, um sie im Vorschaufenster zu öffnen und Änderungen in Echtzeit zu sehen.

Damit haben Sie Ihre Entwicklungsumgebung eingerichtet und können mit der Erstellung und Gestaltung Ihrer Seiten loslegen.

Jetzt weiterlesen: