HTML5 / CSS3

Das Fundament

Kursdateien

Icon Erweiterungen 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

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>"
		]
	}
}

Anzeige der Uhrzeit in Sprache.