View on GitHub

Aufgabensammlung-fuer-Frontendkurse

Sammlung von Aufgabenstellungen zu unterschiedlichen Aspekten der Frontendentwicklung. Die Aufgaben können aus Codepen stammen. In diesem Falle informiert eine Datei im Verzeichnis darüber und nennt die URL der Quelle.

Hilfreiche Links

Referenzen

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.

Infoseiten

Lernvideos

Es gibt natürlich auch eine Menge Videos für JS-Anfänger:

Tools

Validierung

Blindtexte und Platzhalterbilder

SVGs

Vergleich zwischen zwei Browser-Normalisierungen

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.

Das Boxmodell

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.

Kollabierende Margins

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.

Sammlungen von Beispielen zur Inspiration auf CodePen

Bilder beschneiden

CodePen mit zwei Techniken zur Einbindung und Beschneidung großer Bilder