Strg + # || fügt in jeder Sprache ein Kommentar hinzu (muss vorher bei
Tastenkombinationen aktiviert werden)
Strg + S || Datei wird gespeichert und wenn [Format on save] aktiviert
ist dann wird auch
Formatiert
Strg + ← / → || Wörter überspringen
Strg + Shift + ← / → || Wörter überspringen und markieren zum
Bearbeiten
Strg + Shift + P || Command Palette
STRG + D || Zeile duplizieren (in Einstellung "Auswahl duplizieren"
zuweisen)
STRG + A || alles auswählen
STRG + Z || rückgängig
STRG + P || Dateien suchen
STRG + P dann ? || Shortcut Hilfe
STRG + BACKSPACE || ganzes Wort löschen
STRG + LEER || Hilfe anzeigen
STRG + F || Wörter in einer Datei suchen
STRG + SHIFT + F || Wörter in allen Dateien eines Workspace suchen
ALT + KLICK || in verschiedenen Zeilen schreiben
ALT + SHIFT + F || Formatieren
ALT + SHIFT + ← / → || Abschnitte auswählen
ALT + ↑ / ↓ || Zeilen verschieben
ALT + SHIFT + ↑ / ↓ || Zeilen kopieren
w3schools
Diese Website ist sehr Umfangreich und nützlich, da sie die Funktion "try it yourself"
hat. Damit kann man das Gelernte gleich im Browser anwenden und üben.
WebP (wikipedia) ist ein Grafikformat für
verlustbehaftete oder
verlustfreie Bildkompression für
statische oder animierte Bilder. WebP ist kleiner als PNG und JPEG, deshalb lädt die
Seite schneller und darum hat man auch ein besseres Google SEO ranking.
Um Bilder in dieses Format umzuwandeln, benötigt man ein Konverter den es online oder
offline als software gibt. Für IrfanView gibt es ein Plugin womit man die Bilder in
dieses Format abspeichern kann.
webdesign in four minutes
Auf dieser Seite wird kurz und knapp aber auch optisch erklärt was CSS macht.
Einfach auf die Links klicken um weiter zu kommen.
happyhues.co || Farbpalette mit Anwendungsbeispiele
huemint.com
|| Color Palette Generator mit Anwendungsbeispiele
materialpalette.com || Material Design Color Palette
Generator mit Anwendungsbeispiele
background-color: #D4AF37; | metallic gold
background-color: #4682B4; | steel blue
background-color: #1E90FF; | dodger blue
background-color: #6495ED; | cornflower blue
background-color: #FFEFD5; | papaya whip
background-color: #FFDAB9; | peach puff
background-color: #DEB887; | burly wood
background-color: #806666; | Light Wood
background-color: #FF00AA; | Hollywood Cerise
background-color: #663399; | rebeccapurple
background-color: #59007F; | Indigo
background-color: #FF6347; | tomato
background-color: #DC143C; | crimson
background-color: #BB2649; | Viva Magenta (color of 2023)
background-color: #800000; | maroon
background-color: #708090; | slate gray
background-color: #253035; | oxford blue
background-color: #00ffff; | aqua
background-color: #46FCB4; | Turquoise
background-color: #00A0A0; | persian green
background-color: #008080; | teal
shortcuts browser
STRG + SHIFT + T | Tabs wiederherstellen
STRG + TAB | Tabs switchen nach rechts
STRG + SHIFT + TAB | Tabs switchen nach links
STRG + L | in adressleiste schreiben
STRG + A | alles auswählen
STRG + SHIFT + R | hard reload (neue Daten vom server holen, nicht vom
cache)
STRG + SHIFT + I | Entwickler Tool
shortcuts windows
WIN + L | Computer sperren
WIN + D | Desktop anzeigen
WIN + E | Explorer öffnen
WIN + V | Zwischenablage
WIN + H | Texte diktieren
WIN + . | Emoji
WIN + ← / → | Fenster anordnen
WIN + SHIFT + S | Snipping Tool
WIN + TAB | Fenster wechseln mit großer übersicht
ALT + TAB | Fenster wechseln mit kleiner übersicht
STRG + L | in Adressleiste schreiben
STRG + D | Datei löschen
STRG + F | Suchfeld
STRG + A | alles auswählen
STRG + Z | Rückgängig
STRG + BACKSPACE | ganzes Wort löschen
STRG + SHIFT + N | neuer Ordner
STRG + KLICK | mehrere Dateien auswählen
SHIFT + KLICK | reihe Dateien auswählen
F2 | Datei umbenennen
farbige Container
Mir hat es immer sehr geholfen den Überblick zu behalten, wenn ich jedem container eine
unterschiedliche Farbe (background-color) zugeordnet habe, auch wenn man diese nicht
benötigt. So kann man
den Inhalt anordnen, ausrichten, anpassen und zum schluss die Farbe entfernen bzw alles
in einer Farbe ändern.
Ich habe dazu mal ein Beispiel bei Codepen gemacht.
Man kann sich für VS Code eigene Snippets erstellen, mit denen man viel Zeit spart, da
man weniger tippen muss.
Es gibt zum erstellen ein Generator, da müssen die linken Felder ausgefüllt werden.
Name, dann das Kürzel und zum Schluss der Code der dann angezeigt werden
soll.
In dem Beispiel hat mein Snippet den Name "CSS width height" und das Kürzel "wh".
Jedes Mal wenn ich wh eintippe und enter drücke, wird mir sofort der
Code angezeigt. $1 bedeutet, das an diese Stelle der cursor springt wenn man Tab
drückt.
Man kann auch schreiben, ${2:bitte wert eingeben}, das wäre ein Placeholder.
Den Text, der vom Generator entworfen wird, muss nun in VS Code eingegeben werden.
Geht dazu auf das Zahnrad links unten, dann "Benutzercodeschnipsel konfigurieren".
Eine Möglichkeit ist, hier "neue globale Codeschnipseldatei" zu wählen. Nun wird gefragt
wie die Datei heißen soll, anschließend wird der kopierte
Code innerhalb der schon vorhandenen Klammern eingefügt.
Zum Schluss wird die Datei gespeichert und man kann nun den Snippet gleich testen.
dann beginnt es von Vorne mit der Anforderungsanalyse wegen neue Features.
Präfix -webkit, -moz, -ms
Der Browser-Präfix erlaubt den Einsatz von CSS-Stilen im Vorstadium. Die
Browser-Hersteller implementieren nicht nur die CSS-Eigenschaften, die zum aktuellen
CSS-Standard gehören. Browser greifen schon mal vor und implementieren neue CSS-Regeln
als »private« Eigenschaften.
caniuse.com
ist die Website mit einem Überblick, welche CSS-Eigenschaften aktuell von den jeweiligen
Browsern unterstützt werden.
