- Referenzen
- Infoseiten
- Tools
- Validierung
- Blindtexte und Platzhalterbilder
- SVGs
- Vergleich zwischen zwei Browser-Normalisierungen
- Das Boxmodell
- Kollabierende Margins
- Sammlungen von Beispielen zur Inspiration auf CodePen
- Bilder beschneiden
- Bilder responsive machen
- Bilder responsive einbinden
Für die Suche nach HTML-Elementen und CSS-Eigenschaften eignet sich MDN immer in besonderem Maße. Ich bevorzuge hingegen devdocs. Das ist eine einheitliche, schnell ladende Oberfläche für sehr viele APIs. Die Seiten von MDN werden auch genutzt. Allerdings (logischerweise) nur in der englischsprachigen Variante.
- devdocs.io - alle wichtigen Dokumentationen für Webtechnologien an einer Stelle
- MDN - Dokumentationen zu HTML, CSS und JavaScript von Mozilla (englisch und deutsch)
- SELFHTML - deutschsprachige Doku zu HTML, CSS und JavaScript
- Codrops CSS-Referenz
- CSS-Tricks Almanach
- devhints - Cheatsheets
- Frontend Development Resources - meine Linksammlung von wichtigen Tools und Quellen
- das Periodensystem der HTML-Elemente
- Mediaevent
- SELFHTML
- Josh Comeau spricht in einem 45minütigen Talk über Grundmechanismen von CSS. Es ist ein sehr interessanter Blick auf "Flow Content", "Positionierung" und "Flexbox". [auf Englisch]
- Bramus Van Damme spricht 40 Minuten über alle Aspekte der Kaskade. Das hört sich erst einmal öde an, ist es aber nicht. Und vor allem ist die Kaskade eine der wichtigsten Grundprinzipien von CSS.
- Grundsätzlich kann man alle Videos von Kevin Powell anschauen. Sie sind selten lang und Kevin erklärt gut.
Es gibt natürlich auch eine Menge Videos für JS-Anfänger:
- Farbverläufe erstellen - mit Codeausgabe
- animate.css - fertige Animationen zum Kopieren
- animista - eine weitere Variante, um fertige Animationen zu kopieren
- Specificity Calculator
- Flexbox Playground 1
- Flexbox Playground 2
- Blindtexte kannst Du Dir im Blindtextgenerator in unterschiedlichen Sprachen zusammenstellen. Auch in Deutsch!
- Eine Auswahl an kostenlosen Platzhalterbildern für Entwürfe bietet meine Codepen-Seite.
- Auf Codepen findest Du unzusammenhängende Blindtexte und einen sehr alten Artikel von mir als Blindtext: Webseiten sind keine Gemälde.
- SVGs für eigene Entwürfe
- weitere, sehr einfach gehaltene SVGs für eigene Entwürfe - sie können diesmal einfacher einzeln herauskopiert werden
- SVG-Illustrationen findest Du auf undraw.
Im Gegensatz zu einem Reset-CSS, das alle Unterschiede in einem Browser-CSS auf ein gemeinsames "Null" setzt, definieren Normalisierungs-CSS für alle Browser gemeinsame Basis-Gestaltungen. Das bekannteste und quasi die "Urmutter" ist "Normalize". Für Bootstrap v4 machte das Bootstrap-Team davon einen Fork und entwickelte es mit eigenen Ideen weiter. Das Ergebnis ist "Reboot". Diese Seite stellt beide nebeneinander (auch auf Codepen).
Noch beeindruckender ist der Vergleich unterschiedlicher Ansätze für Normalisierung oder Browser-Reset auf Codepen.
Wenn man nicht aufpasst, kann man mit hover-Styles in ein Problem mit dem Boxmodell reinlaufen.
Das Boxmodell als 3D-Modell ist ganz unterhaltsam. Aber wahrscheinlich versteht man es in der 2D-Ansicht viel besser.
Der Umgang mit margins (also den Aussenabständen eines Elements) ist speziell. Neben der Regel für Elemente, die nicht als Blockelement formatiert sind (da ziehen die vertikalen Margins nicht), verwirren auch immer die "kollabierenden Margins". (Codepen-Version)
Wenn zwei normal im Dokumentenfluss befindliche Elemente aufeinandertreffen, addieren sich die Margins nicht. Es gewinnt die größere Margin. Bei gleichen wird eine von beiden genommen. Dies ändert sich, wenn zwei Floats aufeinandertreffen. Denn dann wiederum addieren sich die Margins.
- SVG
- Flexbox
- Transformationen und Animationen
- custom properties (vulgo: CSS Variablen)
CodePen mit zwei Techniken zur Einbindung und Beschneidung großer Bilder