🌐 HTML Einstieg
Grundlagen lernen
Am einfachsten lernst du die HTML-Grundlagen im Tutorial-Kurs von FreeCodeCamp. Mit dem Abschluss des HTML-Teils solltest du die wichtigsten Tags kennen, die wir auch in unserem Beispiel nutzen werden.
Erste HTML-Seite erstellen
Schritt 1: Projekt-Setup
- Visual Studio Code öffnen
- "Ordner öffnen" wählen
- Passenden Ordner anlegen (z.B. "myFirstWebpage")
- Öffnen des Ordners bestätigen
Schritt 2: HTML-Datei erstellen
-
Neues File anlegen:
index.html -
Emmet-Abkürzung verwenden:
- Schreibe
!gefolgt vonTAB - Dies führt die Emmet Abbreviation aus
- Schreibe
-
Grundgerüst sollte automatisch erstellt werden:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Schritt 3: LiveServer starten
- Rechtsklick auf
index.html - "Open with LiveServer" wählen
💡 Hinweis: Falls der Button nicht verfügbar ist, überprüfe dein Setup und installiere die LiveServer Extension (siehe Abschnitt "Setup")
Schritt 4: Browser-Ansicht
- Automatisches Öffnen im Browser-Fenster
- Standard-Port: 5500
- Live-Reload: Änderungen werden sofort angezeigt
LiveServer konfigurieren
Custom Browser einstellen
- Einstellungen öffnen
- Nach "liveserver" suchen
- Custom Browser einstellen
Erweiterte Konfiguration
Für weitere Einstellungen kannst du alles in der settings.json bearbeiten:
{
"liveServer.settings.port": 5500,
"liveServer.settings.CustomBrowser": "chrome",
"liveServer.settings.donotShowInfoMsg": true
}
Nächste Schritte
Nach dem erfolgreichen Setup kannst du mit dem Blog Page Tutorial fortfahren und deine erste komplette Webseite erstellen!
✅ Was du jetzt kannst:
- HTML-Grundgerüst erstellen
- LiveServer verwenden
- Live-Reload für Entwicklung nutzen
- VS Code für Web-Entwicklung konfigurieren