HTML5 / CSS3

Das Fundament

Kursdateien

1-html.zip (33,38 MiB / 10.12.2025 16:08:22)
2-sass.zip (23,84 KiB / 21.02.2025 14:40:52)
3-bootstrap.zip (380,50 KiB / 21.02.2025 14:42:10)
4-winery.zip (1,80 MiB / 21.02.2025 14:41:06)
audio.zip (15,28 MiB / 24.10.2023 18:49:02)
video.zip (110,13 MiB / 10.12.2025 16:10:30)

Liste der Erweiterungen

HTML

HTML Extension Pack von JAderBass Extension Pack für die JAderBass web'n'more HTML/CSS-Kurse
In diesem Extension Pack sind enthalten:
- Auto Close Tag von Jun Han Bewirkt, dass bei der Eingabe eines Tags das dazugehörige schließende Tag gleich mit angegeben wird
- Autoprefixer von mrmlnc Fügt automatisch die eingestellten Vendor-Prefixe für CSS-Regeln hinzu
- Better Comments von Aaron Bond Macht verschiedenfarbige Kommentare möglich
- HTML CSS Support von ecmel Bewirkt HTML-class und -id Attribut-Vervollständigung
- HTML End Tag Labels von Ante Primorac Blendet an End-Tags die ID- und Klassenbezeichnungen ein, um den Code übersichtlicher zu gestalten

Hinweis

Bisher habe ich, um lokal wie mit einem "echten" Webserver arbeiten zu können XAMPP benutzt. Ein Packet, welches einen komplett aufgesetzten Apache-Webserver mit PHP- und MariaDB-Unterstützung etc. beinhaltet. Leider ist es momentan so, dass die letzte PHP-Version, welche XAMPP unterstützt, nicht mehr aktiv supportet wird.

Aus diesem Grund nutze ich jetzt Laragon. Dieses Paket beinhaltet ebenfalls alle wichtigen Tools (u.a. PHP und einen MariaDB-Server) um lokal einen funktionierenden Webserver (Apache) für die Arbeit als Webentwickler durchführen zu können. Das Paket kann unter https://laragon.org/download/ heruntergeladen und installiert werden.

Eigene Code-Snippets nutzen

Ich habe für meine Kurse eigene Code-Snippet-Dateien erstellt, die das Coding erheblich erleichtern. Mit den folgenden Schritten kannst du diese Snippets selbst nutzen:

Snippets-Verzeichnis öffnen:
- Windows:
  %APPDATA%\Code\User\snippets
- Mac:
  ~/Library/Application Support/Code/User/snippets/
- Linux:
  $HOME/.config/Code/User/snippets/
Variante 1 (empfohlen):
- Die Datei(en) jdb-html.code-snippets hier herunterladen und in dieses Verzeichnis kopieren.
- Sollte bereits eine Datei jdb-html.code-snippets existieren: diese ersetzen oder:
Variante 2:
- Die Datei(en) in einem Editor öffnen, bzw.
- eine Text-Datei anlegen und unter dem Namen jdb-html.code-snippets im oben genannten Verzeichnis speichern und
- unten stehenden Code in die neue(n) Datei(en) kopieren, bzw. die bestehende(n) Datei(en) nach dem unten stehenden Muster ändern oder:
Variante 3:
- Im VSCode unter Datei > Einstellungen > Benutzercodeschnipsel konfigurieren (Windows) bzw. Code > Einstellungen > Benutzercodeschnipsel konfigurieren (Mac) eine "Neue globale Codeschnipseldatei..." erstellen und diese z.B. jdb-html.code-snippets benennen.
- Den unten stehenden Code in diese Datei kopieren und speichern.

Snippets für HTML5 / CSS3

                  
{
	// HTML
	// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"Kommentar Titel HTML": {
		"scope": "html",
		"prefix": "komtitel",
		"body": [
			"<!-- ${1:Titel}",
			"============================================================================================= -->"
		],
		"description": "Ausgabe eines Kommentar-Titels in HTML-Dateien"
	},
	"Kommentar Titel CSS/SCSS": {
		"scope": "css,scss",
		"prefix": "komtitel",
		"body": "/* === ${1:Titel} === */",
		"description": "Ausgabe eines Kommentar-Titels in CSS-Dateien"
	},
	"Bootstrap 5 Grundgerüst nur CSS": {
		"scope": "html,php,blade",
		"prefix": "bs5",
		"description": "Bootstrap Grundgerüst nur CSS",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"de\">",
			"<head>",
			"\t<meta charset=\"UTF-8\">",
			"\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
			"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"\t<title>${1:Document}</title>",
			"\t<!-- CSS only -->",
			"\t<!-- Bootstrap-CSS -->",
			"\t<link rel=\"stylesheet\" href=\"css/bootstrap.min.css\">",
			"\t<!-- Custom-CSS -->",
			"\t<link rel=\"stylesheet\" href=\"$2\">",
			"</head>",
			"<body>",
			"\t$3",
			"</body>",
			"</html>"
		]
	},
	"Bootstrap 5 Grundgerüst mit JS": {
		"scope": "html,php,blade",
		"prefix": "bs5js",
		"description": "Bootstrap Grundgerüst - komplett mit JavaScript",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"de\">",
			"<head>",
			"\t<meta charset=\"UTF-8\">",
			"\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
			"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"\t<title>${1:Document}</title>",
			"\t<!-- CSS only -->",
			"\t<!-- Bootstrap-CSS -->",
			"\t<link rel=\"stylesheet\" href=\"css/bootstrap.min.css\">",
			"\t<!-- Custom-CSS -->",
			"\t<link rel=\"stylesheet\" href=\"$2\">",
			"</head>",
			"<body>",
			"\t$3",
			"<!-- Bootstrap JavaScript -->",
			"<script src=\"js/bootstrap.bundle.min.js\"></script>",
			"</body>",
			"</html>"
		]
	},
	"Bootstrap JS": {
		"scope": "html,php,blade",
		"prefix": "bs5jsonly",
		"description": "Bootstrap JavaScript",
		"body": [
			"<!-- Bootstrap JavaScript -->",
			"<script src=\"js/bootstrap.bundle.min.js\"></script>"
		]
	}
}