Skip to content

Instantly share code, notes, and snippets.

@jensgro

jensgro/linktipps-css-html.md

Last active January 30, 2025 15:53
Show Gist options
  • Save jensgro/b287b76525c70862369cafd3a55ae81d to your computer and use it in GitHub Desktop.
Save jensgro/b287b76525c70862369cafd3a55ae81d to your computer and use it in GitHub Desktop.
Download ZIP
Empfehlenswerte Links zum Erlernen von HTML und CSS
Raw
linktipps-css-html.md

HTML und CSS lernen

Einführungen

HTML

CSS

Grundlegendes zu CSS

Kaskade und Spezifität

Selektoren

z-index

Flexbox

CSS-Grid

Infoseiten

  • Mediaevent
  • SELFHTML
  • web.dev - umfangreiche Tutorials von Google zu HTML, CSS, Responsive Webdesign, Performance, Barrierefreiheit
  • Learn Layout - eine geführte Einführung in HTML und vor allem CSS. In unterschiedlichen Sprachen übersetzt und nicht mehr 100% frisch.
  • HTML Recipes - beispielhafte Umsetzungen in HTML

Besonders empfehlenswerte Abschnitte

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.

Cheatsheets

Lernvideos

  • Kevin Powell hat zu Beginn seiner Laufbahn eine längere Serie kurzer Videos zu HTML und CSS gemacht.
  • Grundsätzlich kann man alle Videos von Kevin Powell anschauen. Sie sind selten lang und Kevin erklärt gut.

Es gibt auch inhaltlich tiefergehende Videos, die Grundprinzipien genauer erklären, dabei aber auch ein Grundverständnis voraussetzen:

  • 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.

Empfehlenswerte Artikel

Tools

  • Welcher Browser hat welche Teile von CSS, HTML und JavaScript implementiert und wie gut/vollständig? "Can I Use" ist eine der wichtigsten Infoseiten für die Frontendentwicklung.
  • Welches Element darf ich in welches verschachteln, welches nicht? "Can I Include" gibt Auskunft.
  • animate.css - fertige Animationen zum Kopieren
  • animista - eine weitere Variante, um fertige Animationen zu kopieren
  • Der "Specificity Calculator" zeigt mir, wie hoch die ist Spezifität einer CSS-Regel ist.
  • Flexbox Playground 1
  • Flexbox Playground 2

CSS spielerisch lernen

Auch HTML kann man spielerisch angehen

Sammlungen von Beispielen zur Inspiration auf CodePen

Wissenskontrolle und Nachschlagen

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment