# Programmieren mit Mario

> Dein deutscher Tech-Blog für Webentwicklung, Tutorials und Programmier-Tipps

## Blog

- [KI-Imposter-Syndrom: Warum dein Gefühl vielleicht recht hat](https://mitmario.dev/blog/ki-imposter-syndrom-entwickler): Du lieferst Code aus, den die KI geschrieben hat, und fühlst dich wie ein Hochstapler? Warum das oft kein Imposter-Syndrom ist, sondern eine korrekte Messung, und was du damit anfangen kannst.
- [KI-Kennzeichnungspflicht ab 2. August: Was du auf deiner Website umsetzen musst](https://mitmario.dev/blog/ki-kennzeichnungspflicht-eu-ai-act): Ab 2. August 2026 greift die Transparenzpflicht des EU AI Act (Artikel 50). Was Chatbot, KI-Texte und KI-Bilder auf deiner Website jetzt brauchen, praktisch erklärt.
- [Poisoned Repos: So sicherst du Claude Code und Cursor gegen Angriffe ab](https://mitmario.dev/blog/poisoned-repos-claude-code-cursor-absichern): KI-Agenten führten Schadcode aus, während sie ein Repo auf Schadcode prüfen sollten. Ich zeige dir, welche Dateien dein Agent beim Öffnen eines fremden Repos ausführt und wie du dich schützt.
- [Vibe Coding Security: So machst du KI-Code wirklich sicher](https://mitmario.dev/blog/vibe-coding-security-ki-code-absichern): Ein Security-Scan von 5.600 Vibe-Coding-Apps fand über 2.000 Schwachstellen. Ich zeige dir die vier häufigsten Sicherheitslücken in KI-generiertem Code und wie du ihn prüfst, bevor du ihn deployst.
- [Passkeys erklärt: So funktioniert Login ohne Passwort](https://mitmario.dev/blog/passkeys-login-ohne-passwort): Passkeys machen Passwörter überflüssig. Lerne, wie der Login ohne Passwort funktioniert, warum er Phishing aushebelt und wie du ihn mit WebAuthn einbaust.
- [Security Headers: So sicherst du deine Website in 20 Minuten ab](https://mitmario.dev/blog/security-headers-website-absichern): HTTP Security Headers sind der schnellste Sicherheits-Gewinn für deine Website. Lerne die sechs wichtigsten Header kennen, wie du sie setzt und wie du dein Rating von F auf A+ bringst.
- [10-Finger-Schreiben lernen: Der komplette Anfänger-Guide](https://mitmario.dev/blog/10-finger-schreiben-lernen-anfaenger-guide): Lerne das 10-Finger-System Schritt für Schritt. Methodik, häufige Fehler, richtige Ergonomie und die Lern-Wissenschaft hinter Muscle Memory. Mit klaren Phasen für nachhaltigen Fortschritt.
- [KI-Tools werden teurer: Was Anthropics Pricing-Eklat uns verrät](https://mitmario.dev/blog/ki-tools-werden-teurer): Anthropic hat versehentlich zugegeben, dass das eigene Geschäftsmodell nicht funktioniert. Was das für dich als Nutzer von Claude Code, Copilot und Co. bedeutet.
- [KI Programmieren 2026: Meine Erfahrung mit Claude Code](https://mitmario.dev/blog/ki-programmieren-2026-claude-code): Nach 20+ Jahren Webentwicklung: Warum ich bei Claude Code gelandet bin, wann ich dem Output vertraue - und wann lieber nicht. Ein ehrlicher Erfahrungsbericht.
- [Website-Barrierefreiheit - Der praktische BFSG-Guide für Entwickler](https://mitmario.dev/blog/website-barrierefreiheit-bfsg-guide): Seit Juni 2025 gilt das BFSG. Lerne die häufigsten Barrierefreiheits-Fehler, wie du deine Website testest und welche Quick-Fixes du sofort umsetzen kannst.
- [Von der Idee zur Live-Website – Deployment-Guide für Einsteiger](https://mitmario.dev/blog/deployment-guide-einsteiger-2025): Deine Website läuft lokal perfekt, aber wie kommt sie ins Internet? Lerne in diesem Guide, wie du mit Netlify oder Vercel deine erste Website deployst – mit Custom Domain, SSL und automatischem Deployment.
- [Mobile First Email Design – Der praktische Guide für 2025](https://mitmario.dev/blog/mobile-first-email-design): Über 80% der Nutzer öffnen Emails mobil. Lerne, wie du mit Mobile First Design perfekte HTML Emails erstellst, die auf allen Geräten funktionieren. Mit Code-Beispielen!
- [KI in der Softwareentwicklung: Chance oder Risiko?](https://mitmario.dev/blog/ki-in-der-softwareentwicklung-chance-oder-risiko): Erfahre, wie KI die Softwareentwicklung verändert, welche Auswirkungen sie auf deine Arbeit hat und warum du keine Angst vor Jobverlust haben musst. Praxisguide 2025.
- [Windsurf vs. Cursor: Welcher KI-Editor macht dich zum 10x-Developer?](https://mitmario.dev/blog/windsurf-vs-cursor-ki-editor-vergleich): Drei AI-Giganten streiten sich um Windsurf - aber ist es besser als Cursor? Der ultimative Vergleich der beiden KI-Code-Editoren für 2025.
- [HTML Email Grundlagen für Anfänger - Der ultimative Einstieg](https://mitmario.dev/blog/html-email-grundlagen-fuer-anfaenger): HTML Emails sind komplett anders als Websites. Lerne die wichtigsten Unterschiede, häufige Fehler und wie du deine erste Email erstellst, die überall funktioniert.
- [Remote arbeiten als Entwickler - Tools und Strategien für erfolgreiches Homeoffice](https://mitmario.dev/blog/remote-arbeiten-als-entwickler): Ein umfassender Leitfaden für Entwickler zum erfolgreichen Remote-Arbeiten. Von der Hardware-Ausstattung über Kommunikationstools bis hin zu Work-Life-Balance Strategien.
- [Performance-Optimierung für deutsche Websites - Core Web Vitals meistern](https://mitmario.dev/blog/performance-optimierung-core-web-vitals): Ein umfassender Leitfaden zur Website-Performance-Optimierung mit Fokus auf Core Web Vitals, speziell für deutsche Entwickler und Websites.
- [Raus aus der Tutorial Hell](https://mitmario.dev/blog/raus-aus-der-tutorial-hell): Raus aus der Tutorial Hell - Ein Leitfaden für Programmieranfänger
- [Die Power von JavaScript Generators](https://mitmario.dev/blog/die-power-von-javascript-generators): Die Power von JavaScript Generators - Ein Guide mit Code Beispielen und Best Practices
- [Git Cheat Sheet](https://mitmario.dev/blog/git-cheat-sheet): Eine Liste der wichtigsten Git Befehle und Lösungen für bekannte Probleme.
- [Welche VS Code Plugins ich verwende](https://mitmario.dev/blog/welche-vs-code-plugins-ich-verwende): Eine Liste welche Plugins ich persönlich für VS Code am liebsten verwende.

## HTML-Referenz

- [Das <a> Element](https://mitmario.dev/docs/html/a): Das a-Element (Anchor) erstellt Hyperlinks zu anderen Seiten, Dateien, E-Mail-Adressen oder Positionen auf derselben Seite.
- [Das <abbr> Element](https://mitmario.dev/docs/html/abbr): Das abbr-Element kennzeichnet eine Abkürzung oder ein Akronym. Über das title-Attribut kann die ausgeschriebene Form angegeben werden, die Browser als Tooltip anzeigen.
- [Das <address> Element](https://mitmario.dev/docs/html/address): Das address-Element kennzeichnet Kontaktinformationen für den Autor oder Eigentümer eines Dokuments oder Abschnitts. Browser stellen es standardmäßig kursiv dar.
- [Das <area> Element](https://mitmario.dev/docs/html/area): Das area-Element definiert einen klickbaren Bereich innerhalb einer Image Map. Es ist ein Void-Element und wird ausschließlich innerhalb von map verwendet.
- [Das <article> Element](https://mitmario.dev/docs/html/article): Das article-Element kennzeichnet einen eigenständigen, in sich geschlossenen Inhalt wie Blog-Posts, Kommentare oder Produktkarten, der auch außerhalb des Kontexts verständlich wäre.
- [Das <aside> Element](https://mitmario.dev/docs/html/aside): Das aside-Element kennzeichnet ergänzende Inhalte, die mit dem umgebenden Inhalt in Verbindung stehen, aber auch eigenständig funktionieren — wie Sidebars, Infoboxen oder verwandte Artikel.
- [Das <audio> Element](https://mitmario.dev/docs/html/audio): Das audio-Element bettet eine Audiodatei direkt in die Webseite ein. Es bietet einen nativen Player mit Steuerungselementen und unterstützt verschiedene Audioformate.
- [Das <b> Element](https://mitmario.dev/docs/html/b): Das b-Element hebt Text visuell hervor, ohne ihm eine besondere semantische Bedeutung zu geben. Es wird für Produktnamen, Stichwörter oder Lead-Sätze verwendet.
- [Das <base> Element](https://mitmario.dev/docs/html/base): Das base-Element legt die Basis-URL für alle relativen URLs und das Standard-Ziel für Links in einem HTML-Dokument fest. Es steht im head und darf nur einmal vorkommen.
- [Das <bdi> Element](https://mitmario.dev/docs/html/bdi): Das bdi-Element isoliert Text mit potenziell anderer Textrichtung vom umgebenden Inhalt (Bi-Directional Isolation). Es verhindert, dass RTL-Text das Layout von LTR-Inhalten durcheinanderbringt.
- [Das <bdo> Element](https://mitmario.dev/docs/html/bdo): Das bdo-Element überschreibt die Textrichtung (Bi-Directional Override). Es erzwingt eine bestimmte Leserichtung für den enthaltenen Text: von links nach rechts oder von rechts nach links.
- [Das <blockquote> Element](https://mitmario.dev/docs/html/blockquote): Das blockquote-Element kennzeichnet ein längeres Zitat aus einer externen Quelle. Es wird eingerückt dargestellt und kann über das cite-Attribut die Quelle angeben.
- [Das <body> Element](https://mitmario.dev/docs/html/body): Das body-Element enthält den gesamten sichtbaren Inhalt einer HTML-Seite: alles, was Nutzer im Browser sehen und womit sie interagieren.
- [Das <br> Element](https://mitmario.dev/docs/html/br): Das br-Element erzeugt einen Zeilenumbruch innerhalb eines Textblocks. Es ist ein Void-Element und darf nur für inhaltliche Umbrüche verwendet werden, nicht für Abstände.
- [Das <button> Element](https://mitmario.dev/docs/html/button): Das button-Element erstellt einen anklickbaren Button. Je nach type-Attribut kann er Formulare absenden, zurücksetzen oder als allgemeiner Button für JavaScript-Aktionen dienen.
- [Das <canvas> Element](https://mitmario.dev/docs/html/canvas): Das canvas-Element stellt eine Zeichenfläche für 2D- und 3D-Grafiken bereit. Mit der Canvas API und JavaScript lassen sich Formen, Bilder, Animationen und interaktive Grafiken erstellen.
- [Das <caption> Element](https://mitmario.dev/docs/html/caption): Das caption-Element gibt einer HTML-Tabelle einen Titel oder eine Beschreibung. Es verbessert die Barrierefreiheit und hilft Screenreadern, den Zweck der Tabelle zu erklären.
- [Das <cite> Element](https://mitmario.dev/docs/html/cite): Das cite-Element kennzeichnet den Titel eines zitierten Werks — zum Beispiel einen Buchtitel, Filmtitel, Songtitel oder Artikel. Browser stellen es standardmäßig kursiv dar.
- [Das <code> Element](https://mitmario.dev/docs/html/code): Das code-Element kennzeichnet Inline-Programmcode, Dateinamen oder technische Begriffe. Browser stellen es in einer Monospace-Schrift dar.
- [Das <col> Element](https://mitmario.dev/docs/html/col): Das col-Element definiert eine einzelne Spalte oder Spaltenspanne innerhalb einer colgroup. Es ist ein Void-Element und ermöglicht spaltenweises Styling in Tabellen.
- [Das <colgroup> Element](https://mitmario.dev/docs/html/colgroup): Das colgroup-Element definiert Spaltengruppen in einer HTML-Tabelle. Es ermöglicht einheitliches Styling mehrerer Spalten, ohne jede Zelle einzeln zu formatieren.
- [Das <data> Element](https://mitmario.dev/docs/html/data): Das data-Element verknüpft einen menschenlesbaren Text mit einem maschinenlesbaren Wert. Über das value-Attribut wird der technische Wert angegeben, während der sichtbare Text frei formuliert werden kann.
- [Das <datalist> Element](https://mitmario.dev/docs/html/datalist): Das datalist-Element erstellt eine Vorschlagsliste für Eingabefelder. Es bietet Autocomplete-Funktionalität, bei der Nutzer aus Vorschlägen wählen oder eigene Werte eingeben können.
- [Das <dd> Element](https://mitmario.dev/docs/html/dd): Das dd-Element liefert die Beschreibung, Definition oder den Wert zu einem Begriff (dt) innerhalb einer Definitionsliste (dl).
- [Das <del> Element](https://mitmario.dev/docs/html/del): Das del-Element kennzeichnet Text, der aus einem Dokument gelöscht wurde. Browser stellen ihn standardmäßig durchgestrichen dar. Es wird für Textrevisionen, Korrekturen und Changelogs verwendet.
- [Das <details> Element](https://mitmario.dev/docs/html/details): Das details-Element erstellt ein aufklappbares Widget, das zusätzliche Informationen ein- und ausblenden kann. Es funktioniert nativ ohne JavaScript.
- [Das <dfn> Element](https://mitmario.dev/docs/html/dfn): Das dfn-Element kennzeichnet einen Begriff, der an dieser Stelle im Text definiert wird. Browser stellen es standardmäßig kursiv dar. Es kann mit abbr kombiniert werden, um Abkürzungen bei ihrer ersten Verwendung zu definieren.
- [Das <dialog> Element](https://mitmario.dev/docs/html/dialog): Das dialog-Element erstellt modale und nicht-modale Dialogfenster: nativ in HTML, ohne JavaScript-Bibliothek. Mit showModal() und close() steuerst du die Sichtbarkeit.
- [Das <div> Element](https://mitmario.dev/docs/html/div): Das div-Element ist ein universeller Block-Container ohne eigene Bedeutung. Es wird zum Gruppieren und Stylen von Inhalten verwendet.
- [Das <dl> Element](https://mitmario.dev/docs/html/dl): Das dl-Element erstellt eine Definitionsliste (Description List) für Begriffs-Beschreibungs-Paare wie Glossare, Metadaten oder FAQ-Bereiche.
- [Die <!DOCTYPE html> Deklaration](https://mitmario.dev/docs/html/doctype): Die DOCTYPE-Deklaration teilt dem Browser mit, dass es sich um ein HTML5-Dokument handelt. Sie muss die erste Zeile jeder HTML-Datei sein und verhindert den Quirks-Modus.
- [Das <dt> Element](https://mitmario.dev/docs/html/dt): Das dt-Element markiert einen Begriff oder Namen innerhalb einer Definitionsliste (dl). Es arbeitet immer als Paar mit dem dd-Element.
- [Das <em> Element](https://mitmario.dev/docs/html/em): Das em-Element betont Text semantisch. Browser stellen ihn kursiv dar, aber die eigentliche Funktion ist eine Betonung, die den Sinn eines Satzes verändern kann.
- [Das <embed> Element](https://mitmario.dev/docs/html/embed): Das embed-Element bettet externe Inhalte wie PDFs oder andere Plugin-Ressourcen in die Seite ein. Es ist ein Void-Element und war historisch die Schnittstelle zu Browser-Plugins.
- [Das <fieldset> Element](https://mitmario.dev/docs/html/fieldset): Das fieldset-Element gruppiert zusammengehörige Formularfelder logisch und visuell. Zusammen mit legend beschriftet es Feldgruppen und kann mit disabled alle enthaltenen Felder deaktivieren.
- [Das <figcaption> Element](https://mitmario.dev/docs/html/figcaption): Das figcaption-Element liefert eine Beschriftung oder Legende für den Inhalt eines figure-Elements, zum Beispiel eine Bildunterschrift, Quellenangabe oder Erklärung.
- [Das <figure> Element](https://mitmario.dev/docs/html/figure): Das figure-Element gruppiert eigenständige Inhalte wie Bilder, Diagramme, Code-Beispiele oder Zitate mit einer optionalen Beschriftung via figcaption.
- [Das <footer> Element](https://mitmario.dev/docs/html/footer): Das footer-Element kennzeichnet den abschließenden Bereich einer Seite oder eines Abschnitts. Es enthält typischerweise Copyright, Kontaktdaten, Links oder Autoreninfos.
- [Das <form> Element](https://mitmario.dev/docs/html/form): Das form-Element erstellt ein interaktives Formular zur Datenübermittlung. Es ist der Container für Eingabefelder, Buttons und Labels.
- [Das <h1> Element](https://mitmario.dev/docs/html/h1): Das h1-Element definiert die Hauptüberschrift einer Seite. Es ist die wichtigste Überschrift in der HTML-Hierarchie und sollte nur einmal pro Seite verwendet werden.
- [Das <h2> Element](https://mitmario.dev/docs/html/h2): Das h2-Element definiert eine Überschrift der zweiten Ebene. Es wird für die Hauptabschnitte einer Seite verwendet und steht direkt unter dem h1 in der Hierarchie.
- [Das <h3> Element](https://mitmario.dev/docs/html/h3): Das h3-Element definiert eine Überschrift der dritten Ebene. Es wird für Unterabschnitte innerhalb eines h2-Bereichs verwendet.
- [Das <h4> Element](https://mitmario.dev/docs/html/h4): Das h4-Element definiert eine Überschrift der vierten Ebene. Es wird für Unterpunkte innerhalb eines h3-Abschnitts verwendet und kommt vor allem in umfangreichen Dokumentationen vor.
- [Das <h5> Element](https://mitmario.dev/docs/html/h5): Das h5-Element definiert eine Überschrift der fünften Ebene. Es wird selten benötigt und ist ein Zeichen für sehr tief verschachtelte Inhaltsstrukturen.
- [Das <h6> Element](https://mitmario.dev/docs/html/h6): Das h6-Element definiert eine Überschrift der sechsten und niedrigsten Ebene. Es wird extrem selten benötigt und deutet auf eine sehr tiefe Inhaltsstruktur hin.
- [Das <head> Element](https://mitmario.dev/docs/html/head): Das head-Element enthält die Metadaten eines HTML-Dokuments wie Titel, Zeichensatz, Stylesheets und SEO-Informationen.
- [Das <header> Element](https://mitmario.dev/docs/html/header): Das header-Element kennzeichnet den einleitenden Bereich einer Seite oder eines Abschnitts. Es enthält typischerweise Navigation, Logo, Überschriften oder Suchfelder.
- [Das <hgroup> Element](https://mitmario.dev/docs/html/hgroup): Das hgroup-Element gruppiert eine Überschrift mit einem zugehörigen Untertitel oder Absatz. Es signalisiert Browsern und Screenreadern, dass die Elemente zusammengehören.
- [Das <hr> Element](https://mitmario.dev/docs/html/hr): Das hr-Element erzeugt eine thematische Trennung zwischen Inhaltsabschnitten. Es wird als horizontale Linie dargestellt und ist ein Void-Element.
- [Das <html> Element](https://mitmario.dev/docs/html/html): Das html-Element ist das Wurzelelement jeder HTML-Seite. Es umschließt den gesamten Dokumentinhalt und definiert die Sprache der Seite.
- [Das <i> Element](https://mitmario.dev/docs/html/i): Das i-Element kennzeichnet Text, der sich vom umgebenden Text abhebt, etwa Fachbegriffe, Fremdwörter, Gedanken oder taxonomische Bezeichnungen. Es drückt keine Betonung aus.
- [Das <iframe> Element](https://mitmario.dev/docs/html/iframe): Das iframe-Element bettet eine externe Webseite oder ein HTML-Dokument in die aktuelle Seite ein. Es erstellt einen eigenen Browsing-Kontext mit eigenem DOM, CSS und JavaScript.
- [Das <img> Element](https://mitmario.dev/docs/html/img): Das img-Element bettet ein Bild in die Seite ein. Es ist ein Void-Element und benötigt keinen schließenden Tag.
- [Das <input> Element](https://mitmario.dev/docs/html/input): Das input-Element erstellt interaktive Eingabefelder. Je nach type-Attribut werden Text, E-Mail, Passwort, Checkbox und viele weitere Eingabetypen dargestellt.
- [Das <ins> Element](https://mitmario.dev/docs/html/ins): Das ins-Element kennzeichnet Text, der in ein Dokument eingefügt wurde. Browser stellen ihn standardmäßig unterstrichen dar. Es wird für Textänderungen, Korrekturen und Changelogs verwendet.
- [Das <kbd> Element](https://mitmario.dev/docs/html/kbd): Das kbd-Element kennzeichnet Tastatureingaben und andere Benutzereingaben. Browser stellen es standardmäßig in einer Monospace-Schrift dar. Es wird häufig für Tastenkombinationen in Dokumentationen und Tutorials verwendet.
- [Das <label> Element](https://mitmario.dev/docs/html/label): Das label-Element beschriftet ein Formularelement und vergrößert dessen Klickfläche. Es ist essentiell für Barrierefreiheit und Benutzerfreundlichkeit.
- [Das <legend> Element](https://mitmario.dev/docs/html/legend): Das legend-Element definiert eine Überschrift für ein fieldset-Element. Es beschriftet eine Gruppe von zusammengehörigen Formularfeldern und ist wichtig für die Barrierefreiheit.
- [Das <li> Element](https://mitmario.dev/docs/html/li): Das li-Element definiert einen einzelnen Listeneintrag innerhalb einer geordneten (ol) oder ungeordneten (ul) Liste. Es kann beliebige Inhalte enthalten, auch weitere verschachtelte Listen.
- [Das <link> Element](https://mitmario.dev/docs/html/link): Das link-Element verknüpft externe Ressourcen wie Stylesheets, Favicons oder Preload-Hinweise mit der Webseite. Es steht im head und ist unsichtbar für den Nutzer.
- [Das <main> Element](https://mitmario.dev/docs/html/main): Das main-Element kennzeichnet den Hauptinhalt einer Seite. Es darf nur einmal pro Seite vorkommen und hilft Screenreadern, direkt zum wichtigsten Inhalt zu springen.
- [Das <map> Element](https://mitmario.dev/docs/html/map): Das map-Element definiert eine Image Map: klickbare Bereiche auf einem Bild. Es enthält area-Elemente und wird über das usemap-Attribut mit einem img-Element verbunden.
- [Das <mark> Element](https://mitmario.dev/docs/html/mark): Das mark-Element hebt Text hervor, der in einem bestimmten Kontext relevant ist, zum Beispiel Suchergebnisse, wichtige Textpassagen oder markierte Stellen in Zitaten. Browser stellen es standardmäßig mit gelbem Hintergrund dar.
- [Das <meta> Element](https://mitmario.dev/docs/html/meta): Das meta-Element liefert Metadaten über die Webseite: von der Zeichenkodierung über SEO-Beschreibungen bis zu Open-Graph-Tags für Social Media.
- [Das <meter> Element](https://mitmario.dev/docs/html/meter): Das meter-Element stellt einen skalaren Messwert innerhalb eines bekannten Bereichs dar, zum Beispiel Speicherplatz, Bewertungen oder Testergebnisse. Die Farbe ändert sich je nach Wertebereich.
- [Das <nav> Element](https://mitmario.dev/docs/html/nav): Das nav-Element kennzeichnet einen Navigationsbereich mit Links zu anderen Seiten oder Abschnitten. Es hilft Screenreadern, die Hauptnavigation schnell zu finden.
- [Das <noscript> Element](https://mitmario.dev/docs/html/noscript): Das noscript-Element zeigt Fallback-Inhalt an, wenn JavaScript im Browser deaktiviert oder nicht verfügbar ist. Es ist ein wichtiger Baustein für Progressive Enhancement.
- [Das <object> Element](https://mitmario.dev/docs/html/object): Das object-Element bettet externe Ressourcen wie PDFs, Bilder oder andere Webseiten in die Seite ein. Es unterstützt Fallback-Content als Kind-Element und war historisch die universelle Einbettungslösung.
- [Das <ol> Element](https://mitmario.dev/docs/html/ol): Das ol-Element erstellt eine geordnete (nummerierte) Liste, bei der die Reihenfolge der Einträge eine Bedeutung hat. Es unterstützt verschiedene Nummerierungsarten und Startwerte.
- [Das <optgroup> Element](https://mitmario.dev/docs/html/optgroup): Das optgroup-Element gruppiert zusammengehörige Optionen innerhalb eines select-Dropdowns. Es verbessert die Übersichtlichkeit bei langen Auswahllisten durch benannte Gruppen.
- [Das <option> Element](https://mitmario.dev/docs/html/option): Das option-Element definiert eine einzelne Auswahloption innerhalb eines select-Dropdown-Menüs. Es kann einen sichtbaren Text und einen separaten Übermittlungswert haben.
- [Das <output> Element](https://mitmario.dev/docs/html/output): Das output-Element zeigt das Ergebnis einer Berechnung oder Nutzer-Aktion an. Es wird typischerweise für dynamische Ergebnisse verwendet, die von Formular-Eingaben abhängen.
- [Das <p> Element](https://mitmario.dev/docs/html/p): Das p-Element definiert einen Textabsatz. Es ist das grundlegendste Element zur Textstrukturierung in HTML.
- [Das <param> Element](https://mitmario.dev/docs/html/param): Das param-Element definiert Parameter für ein object-Element. Es ist ein veraltetes Void-Element, das Name-Wert-Paare an eingebettete Objekte wie Flash oder Java Applets übergibt.
- [Das <picture> Element](https://mitmario.dev/docs/html/picture): Das picture-Element ermöglicht responsive Bilder mit Format-Fallbacks und Art Direction. Der Browser wählt automatisch die beste Bildquelle basierend auf Viewport, Format-Unterstützung und Pixeldichte.
- [Das <portal> Element](https://mitmario.dev/docs/html/portal): Das portal-Element war ein experimenteller Vorschlag für nahtlose Seitenübergänge mit Vorschau der Zielseite. Es wurde nie Standard, wurde aus Chromium entfernt und die Spezifikationsarbeit ist eingestellt.
- [Das <pre> Element](https://mitmario.dev/docs/html/pre): Das pre-Element stellt vorformatierten Text dar. Leerzeichen, Tabs und Zeilenumbrüche werden genau so angezeigt, wie sie im Quellcode stehen.
- [Das <progress> Element](https://mitmario.dev/docs/html/progress): Das progress-Element zeigt den Fortschritt einer Aufgabe an — zum Beispiel einen Dateiupload, einen Download oder einen Installationsvorgang. Es unterstützt bestimmte und unbestimmte Zustände.
- [Das <q> Element](https://mitmario.dev/docs/html/q): Das q-Element kennzeichnet ein kurzes Inline-Zitat. Browser fügen automatisch Anführungszeichen ein. Es wird für Zitate im Fließtext verwendet, während blockquote für längere, eigenständige Zitate gedacht ist.
- [Das <rp> Element](https://mitmario.dev/docs/html/rp): Das rp-Element definiert Fallback-Klammern für Ruby-Annotationen. Browser ohne Ruby-Support zeigen die Klammern um den Annotationstext an, moderne Browser blenden sie aus.
- [Das <rt> Element](https://mitmario.dev/docs/html/rt): Das rt-Element enthält den Annotationstext einer Ruby-Annotation. Es wird innerhalb von ruby verwendet, um Lesehinweise wie Furigana über oder neben den Basiszeichen anzuzeigen.
- [Das <ruby> Element](https://mitmario.dev/docs/html/ruby): Das ruby-Element fügt ostasiatischen Texten Lesehinweise (Furigana) hinzu. Es zeigt kleine Annotationen über oder neben den Basiszeichen an, um Aussprache oder Bedeutung zu erklären.
- [Das <s> Element](https://mitmario.dev/docs/html/s): Das s-Element kennzeichnet Text, der nicht mehr korrekt oder relevant ist. Browser stellen ihn durchgestrichen dar. Es wird für alte Preise, überholte Informationen oder erledigte Aufgaben verwendet.
- [Das <samp> Element](https://mitmario.dev/docs/html/samp): Das samp-Element kennzeichnet Ausgaben von Computerprogrammen oder Systemen. Browser stellen es standardmäßig in Monospace-Schrift dar. Es wird für Terminal-Output, Fehlermeldungen und Systemnachrichten verwendet.
- [Das <script> Element](https://mitmario.dev/docs/html/script): Das script-Element bindet JavaScript in eine Webseite ein, entweder als externe Datei oder als Inline-Code. Mit defer und async lässt sich das Ladeverhalten steuern.
- [Das <search> Element](https://mitmario.dev/docs/html/search): Das search-Element kennzeichnet einen Bereich der Seite, der Such- oder Filterfunktionalität enthält. Es ersetzt das bisherige role='search' und macht die Semantik direkt im HTML sichtbar.
- [Das <section> Element](https://mitmario.dev/docs/html/section): Das section-Element gruppiert thematisch zusammengehörige Inhalte mit eigener Überschrift. Es strukturiert eine Seite in logische Abschnitte und verbessert die Semantik.
- [Das <select> Element](https://mitmario.dev/docs/html/select): Das select-Element erstellt ein Dropdown-Auswahlfeld in Formularen. Es kann Einfach- oder Mehrfachauswahl ermöglichen und Optionen mit optgroup gruppieren.
- [Das <slot> Element](https://mitmario.dev/docs/html/slot): Das slot-Element definiert Platzhalter in Web Components, die von außen mit Inhalten befüllt werden können. Es ermöglicht flexible, wiederverwendbare Komponenten mit Shadow DOM.
- [Das <small> Element](https://mitmario.dev/docs/html/small): Das small-Element kennzeichnet Nebenbemerkungen und Kleingedrucktes wie Copyright-Hinweise, Haftungsausschlüsse oder rechtliche Anmerkungen. Es ist semantisch, nicht nur visuell.
- [Das <source> Element](https://mitmario.dev/docs/html/source): Das source-Element gibt alternative Medienressourcen für video, audio und picture an. Der Browser wählt automatisch das erste unterstützte Format.
- [Das <span> Element](https://mitmario.dev/docs/html/span): Das span-Element ist ein generischer Inline-Container ohne eigene Bedeutung. Es wird zum Stylen einzelner Textabschnitte oder als Ziel für JavaScript verwendet.
- [Das <strong> Element](https://mitmario.dev/docs/html/strong): Das strong-Element markiert Text als besonders wichtig. Browser stellen ihn standardmäßig fett dar, aber die eigentliche Bedeutung ist semantisch: starke Wichtigkeit.
- [Das <style> Element](https://mitmario.dev/docs/html/style): Das style-Element bettet CSS-Regeln direkt in ein HTML-Dokument ein. Es steht typischerweise im head und ermöglicht Inline-Stylesheets ohne externe Dateien.
- [Das <sub> Element](https://mitmario.dev/docs/html/sub): Das sub-Element stellt Text tiefgestellt dar, zum Beispiel für chemische Formeln wie H₂O, mathematische Indizes oder Fußnotenzeichen. Es hat eine semantische Bedeutung und ist nicht nur visuelles Styling.
- [Das <summary> Element](https://mitmario.dev/docs/html/summary): Das summary-Element ist die sichtbare, klickbare Zusammenfassung eines details-Elements. Es zeigt den Titel an, den Nutzer anklicken, um versteckte Inhalte ein- und auszublenden.
- [Das <sup> Element](https://mitmario.dev/docs/html/sup): Das sup-Element stellt Text hochgestellt dar, zum Beispiel für mathematische Potenzen, Fußnoten, Ordnungszahlen oder Trademark-Symbole. Es ist semantisch und nicht nur visuelles Styling.
- [Das <svg> Element](https://mitmario.dev/docs/html/svg): Das svg-Element bettet skalierbare Vektorgrafiken direkt in HTML ein. SVGs sind auflösungsunabhängig, per CSS stylbar und ideal für Icons, Logos und Illustrationen.
- [Das <table> Element](https://mitmario.dev/docs/html/table): Das table-Element stellt tabellarische Daten dar. Es verwendet thead, tbody, tr, th und td für eine vollständige Tabellenstruktur.
- [Das <tbody> Element](https://mitmario.dev/docs/html/tbody): Das tbody-Element gruppiert die Datenzeilen einer HTML-Tabelle. Der Browser fügt es implizit ein, aber explizites Schreiben verbessert Struktur und Styling.
- [Das <td> Element](https://mitmario.dev/docs/html/td): Das td-Element definiert eine Datenzelle in einer HTML-Tabelle. Es kann mit colspan und rowspan über mehrere Spalten oder Zeilen reichen.
- [Das <template> Element](https://mitmario.dev/docs/html/template): Das template-Element definiert wiederverwendbare HTML-Vorlagen, die beim Laden der Seite nicht gerendert werden. Per JavaScript lassen sich Kopien der Vorlage ins DOM einfügen.
- [Das <textarea> Element](https://mitmario.dev/docs/html/textarea): Das textarea-Element erstellt ein mehrzeiliges Texteingabefeld in Formularen. Es eignet sich für längere Texte wie Kommentare, Nachrichten oder Beschreibungen.
- [Das <tfoot> Element](https://mitmario.dev/docs/html/tfoot): Das tfoot-Element definiert den Fußbereich einer HTML-Tabelle. Es enthält Summenzeilen, Zusammenfassungen oder Gesamtergebnisse unterhalb der Daten.
- [Das <th> Element](https://mitmario.dev/docs/html/th): Das th-Element definiert eine Überschriftenzelle in einer HTML-Tabelle. Es wird für Spalten- und Zeilenüberschriften verwendet und ist essentiell für die Barrierefreiheit.
- [Das <thead> Element](https://mitmario.dev/docs/html/thead): Das thead-Element definiert den Kopfbereich einer HTML-Tabelle. Es enthält Spaltenüberschriften und verbessert Semantik, Barrierefreiheit und Druckverhalten.
- [Das <time> Element](https://mitmario.dev/docs/html/time): Das time-Element kennzeichnet Datums- und Zeitangaben in einem maschinenlesbaren Format. Über das datetime-Attribut wird der Wert im ISO-8601-Standard angegeben, während der sichtbare Text frei formuliert werden kann.
- [Das <title> Element](https://mitmario.dev/docs/html/title): Das title-Element setzt den Titel der Webseite, der im Browser-Tab, in Lesezeichen und in Suchergebnissen angezeigt wird. Es ist ein Pflicht-Element in jedem HTML-Dokument.
- [Das <tr> Element](https://mitmario.dev/docs/html/tr): Das tr-Element definiert eine Zeile in einer HTML-Tabelle. Es enthält td- oder th-Zellen und wird innerhalb von thead, tbody oder tfoot platziert.
- [Das <track> Element](https://mitmario.dev/docs/html/track): Das track-Element bindet Text-Tracks wie Untertitel, Captions, Beschreibungen oder Kapitelmarken in video- und audio-Elemente ein. Es verwendet das WebVTT-Format.
- [Das <u> Element](https://mitmario.dev/docs/html/u): Das u-Element kennzeichnet Text mit einer unartikulierten Annotation — etwa Rechtschreibfehler oder chinesische Eigennamen. Es erzeugt eine Unterstreichung, sollte aber nicht mit Links verwechselt werden.
- [Das <ul> Element](https://mitmario.dev/docs/html/ul): Das ul-Element erstellt eine ungeordnete (Aufzählungs-)Liste. Die Reihenfolge der Einträge spielt keine Rolle.
- [Das <var> Element](https://mitmario.dev/docs/html/var): Das var-Element kennzeichnet Variablen in mathematischen Ausdrücken oder Programmierkontext. Browser stellen es standardmäßig kursiv dar. Es wird für Variablennamen, Platzhalter und mathematische Formeln verwendet.
- [Das <video> Element](https://mitmario.dev/docs/html/video): Das video-Element bettet ein Video direkt in die Webseite ein. Es unterstützt verschiedene Formate, Steuerungselemente, Poster-Bilder und Autoplay.
- [Das <wbr> Element](https://mitmario.dev/docs/html/wbr): Das wbr-Element markiert eine optionale Umbruchstelle in einem Wort oder Text. Der Browser bricht dort nur um, wenn der Platz nicht ausreicht — ansonsten bleibt der Text zusammen.
- [HTML-Attribute](https://mitmario.dev/docs/html/grundlagen/attribute): Attribute erweitern HTML-Elemente mit zusätzlichen Informationen. Lerne globale Attribute, Boolean-Attribute, data-Attribute und ARIA.
- [Barrierefreiheit in HTML](https://mitmario.dev/docs/html/grundlagen/barrierefreiheit): Barrierefreies HTML sorgt dafür, dass alle Menschen deine Website nutzen können. Lerne ARIA-Rollen, Alt-Texte, Formulare und Tastaturnavigation.
- [Block- vs. Inline-Elemente](https://mitmario.dev/docs/html/grundlagen/block-vs-inline): Block-Elemente nehmen die volle Breite ein, Inline-Elemente fließen im Text mit. Lerne den Unterschied und die CSS display-Eigenschaft.
- [HTML-Dokumentstruktur](https://mitmario.dev/docs/html/grundlagen/dokumentstruktur): Jedes HTML-Dokument folgt einer festen Grundstruktur: DOCTYPE, html, head und body. Lerne, was jeder Teil bedeutet.
- [HTML validieren](https://mitmario.dev/docs/html/grundlagen/html-validieren): Lerne, wie du HTML-Code auf Fehler prüfst. W3C Validator, Browser DevTools und häufige Validierungsfehler erklärt.
- [Das popover-Attribut](https://mitmario.dev/docs/html/grundlagen/popover): Mit dem popover-Attribut baust du Overlays, Menüs und Hinweise direkt in HTML. Lerne popovertarget, Light Dismiss, den Top Layer und die Popover-API.
- [Semantisches HTML](https://mitmario.dev/docs/html/grundlagen/semantisches-html): Semantische HTML-Elemente geben deinem Inhalt Bedeutung. Lerne, warum header, nav, main und article besser sind als div.
- [Tags & Elemente](https://mitmario.dev/docs/html/grundlagen/tags-und-elemente): HTML besteht aus Tags und Elementen. Lerne den Unterschied, wie verschachteln funktioniert und was Void-Elemente sind.
- [Was ist HTML?](https://mitmario.dev/docs/html/grundlagen/was-ist-html): HTML ist die Sprache des Webs. Lerne, was HTML ist, wofür es verwendet wird und wie es mit CSS und JavaScript zusammenarbeitet.

## CSS-Referenz

- [accent-color](https://mitmario.dev/docs/css/accent-color): Mit accent-color native Formularelemente wie Checkboxen, Radio-Buttons, Range-Slider und Fortschrittsbalken einfach farblich anpassen.
- [Animation Erweitert](https://mitmario.dev/docs/css/animation-erweitert): Erweiterte CSS-Animation-Eigenschaften: animation-delay, iteration-count, direction, fill-mode, play-state und will-change. Steuere Wiederholungen, Richtung und Performance.
- [Animation Grundlagen](https://mitmario.dev/docs/css/animation-grundlagen): Lerne CSS-Animationen mit @keyframes, animation-name, animation-duration und animation-timing-function. Erstelle mehrstufige Animationen ohne JavaScript.
- [Animation Praxis](https://mitmario.dev/docs/css/animation-praxis): Praxisnahe CSS-Animationen: Loading Spinner, Fade-In, Slide-Animationen, Hover-Effekte, Skeleton-Loading und Performance Best Practices.
- [aspect-ratio](https://mitmario.dev/docs/css/aspect-ratio): Lerne CSS aspect-ratio: Feste Seitenverhältnisse für Bilder, Videos und Container. Ersetzt den padding-top-Hack. 16/9, 1/1 und responsive Layouts.
- [background Erweitert](https://mitmario.dev/docs/css/background-erweitert): Erweiterte Background-Eigenschaften: background-size (cover, contain), background-clip (auch text), background-origin, background-attachment und das background Shorthand.
- [background Grundlagen](https://mitmario.dev/docs/css/background-grundlagen): Lerne die vier Basis-Hintergrund-Eigenschaften: background-color, background-image, background-repeat und background-position. Von einfachen Farben bis zur gezielten Positionierung.
- [Blend Modes](https://mitmario.dev/docs/css/blend-mode): Mische Farben und Ebenen mit mix-blend-mode und background-blend-mode. Lerne multiply, screen, overlay, Duotone-Effekte und isolation für Blend-Kontrolle.
- [border](https://mitmario.dev/docs/css/border): Erstelle Rahmen mit border und seinen Einzeleigenschaften. Lerne Shorthand, Styles, Farben und einzelne Seiten zu kontrollieren.
- [border-radius](https://mitmario.dev/docs/css/border-radius): Runde Ecken mit border-radius erstellen. Lerne Shorthand, einzelne Ecken, elliptische Radien und wie du Kreise und Pillenformen erzeugst.
- [box-shadow](https://mitmario.dev/docs/css/box-shadow): Erstelle Schatten mit box-shadow. Lerne Drop Shadows, inset-Schatten, Material Design Elevation, farbige Glows und animierte Hover-Effekte.
- [box-sizing](https://mitmario.dev/docs/css/box-sizing): Steuere mit box-sizing, wie width und height berechnet werden. Lerne den Unterschied zwischen content-box und border-box und den globalen Reset.
- [clip-path & mask](https://mitmario.dev/docs/css/clip-path): Schneide Elemente in beliebige Formen mit clip-path und mask. Lerne circle, ellipse, polygon, Clipping-Animationen und Gradient-Masks.
- [color](https://mitmario.dev/docs/css/color): Steuere mit der CSS-Eigenschaft color die Textfarbe von Elementen. Lerne alle Farbformate (hex, rgb, hsl, oklch), currentColor, transparent und Barrierefreiheit.
- [Spalten-Styling](https://mitmario.dev/docs/css/column-styling): Lerne column-gap, column-rule, column-span und column-fill: Abstände, Trennlinien, überspannende Elemente und Füllverhalten für CSS Multi-Column-Layouts.
- [CSS Spalten](https://mitmario.dev/docs/css/columns): Lerne CSS columns, column-count und column-width: Text in mehrere Spalten aufteilen wie in Zeitungen. Responsive Mehrspalten-Layouts ohne Flexbox oder Grid.
- [Container Queries](https://mitmario.dev/docs/css/container-queries): Lerne CSS Container Queries: container-type, container-name, @container-Regeln und Container Query Units (cqw, cqi). Komponentenbasiertes responsive Design.
- [content](https://mitmario.dev/docs/css/content): Erzeuge mit content dekorative Inhalte über ::before und ::after. Lerne Strings, attr(), counter(), url() und warum Generated Content nicht ins DOM gehört.
- [CSS Zähler](https://mitmario.dev/docs/css/counter): Automatische Nummerierung mit counter-reset, counter-increment, counter() und counters(). Verschachtelte Zähler, eigene Zählstile und Abschnittsnummern.
- [cursor & caret-color](https://mitmario.dev/docs/css/cursor): Lerne CSS cursor: Mauszeiger-Stile für Buttons, Links und Drag-Handles. Dazu caret-color für farbige Text-Cursors in Eingabefeldern.
- [display](https://mitmario.dev/docs/css/display): Steuere mit display, wie ein Element dargestellt wird. Lerne block, inline, inline-block, none, contents und flow-root und verstehe den Unterschied zwischen äußerem und innerem Display-Typ.
- [Farbverläufe](https://mitmario.dev/docs/css/farbverlaeufe): CSS-Verläufe mit linear-gradient, radial-gradient und conic-gradient erstellen. Lerne Color Stops, Winkel, Formen und Repeating-Varianten für Muster.
- [filter & backdrop-filter](https://mitmario.dev/docs/css/filter): Wende visuelle Filter auf Elemente an: blur, brightness, contrast, grayscale, sepia, hue-rotate. Lerne auch backdrop-filter für Glassmorphism und Frosted-Glass-Effekte.
- [Flex-Items](https://mitmario.dev/docs/css/flex-items): Kontrolliere einzelne Flex-Items mit flex-grow, flex-shrink, flex-basis, der flex-Shorthand, order und align-self.
- [Flexbox Ausrichtung](https://mitmario.dev/docs/css/flexbox-ausrichtung): Richte Flex-Items aus mit justify-content, align-items, align-content und gap. Lerne den Unterschied zwischen Haupt- und Querachse.
- [Flexbox Container](https://mitmario.dev/docs/css/flexbox-container): Lerne die Grundlagen des Flex-Containers mit display: flex, flex-direction, flex-wrap und flex-flow. Verstehe Haupt- und Querachse.
- [Flexbox Praxis-Layouts](https://mitmario.dev/docs/css/flexbox-praxis): Baue reale Layouts mit Flexbox: Zentrierung, Navigation, Card-Layouts, Holy Grail und Sticky Footer. Praxisnahe Beispiele zum Nachbauen.
- [float & clear](https://mitmario.dev/docs/css/float-clear): Lerne float und clear für Textumfluss um Bilder und Elemente. Verstehe den Unterschied zu modernen Layouts, den Container-Kollaps und display: flow-root als Lösung.
- [@font-face](https://mitmario.dev/docs/css/font-face): Web-Fonts mit @font-face laden. Lerne Formate (woff2, woff), font-display-Strategien, Performance-Optimierung und Self-Hosting.
- [font-family](https://mitmario.dev/docs/css/font-family): Schriftarten mit font-family festlegen. Lerne Font-Stacks, generische Familien, System-Fonts und Web-Fonts richtig einzusetzen.
- [font-size](https://mitmario.dev/docs/css/font-size): Schriftgroesse mit font-size steuern. Lerne px, em, rem, Prozent und responsive Typografie mit clamp() fuer flexible Designs.
- [font-style & font-variant](https://mitmario.dev/docs/css/font-style-variant): Kursivschrift mit font-style und typografische Varianten mit font-variant setzen. Small Caps, tabellarische Ziffern und Ligaturen.
- [font-weight](https://mitmario.dev/docs/css/font-weight): Schriftstärke mit font-weight setzen. Lerne numerische Werte (100-900), Schlüsselwörter, variable Fonts und das Faux-Bold-Problem.
- [Grid Ausrichtung](https://mitmario.dev/docs/css/grid-ausrichtung): Richte Grid-Items und Tracks aus mit justify-items, align-items, justify-content, align-content, place-items, place-content und gap.
- [Grid Auto Flow](https://mitmario.dev/docs/css/grid-auto): Steuere das implizite Grid mit grid-auto-flow, grid-auto-rows und grid-auto-columns. Lerne den dense-Algorithmus und automatische Track-Größen.
- [Grid Container](https://mitmario.dev/docs/css/grid-container): Lerne die Grundlagen des Grid-Containers mit display: grid, grid-template-columns, grid-template-rows und der fr-Einheit. Erstelle flexible zweidimensionale Layouts.
- [Grid Platzierung](https://mitmario.dev/docs/css/grid-platzierung): Platziere Grid-Items gezielt mit grid-column und grid-row. Lerne Liniennummern, span, negative Werte und Überlappung.
- [Grid Praxis-Layouts](https://mitmario.dev/docs/css/grid-praxis): Baue reale Layouts mit CSS Grid: 12-Spalten-Grid, Dashboard, Magazine-Layout und responsive Patterns. Praxisnahe Beispiele zum Nachbauen.
- [Grid Template Areas](https://mitmario.dev/docs/css/grid-template-areas): Erstelle übersichtliche Grid-Layouts mit benannten Bereichen. Lerne grid-template-areas und grid-area für visuelles Layout-Design in CSS.
- [Der :has() Selektor](https://mitmario.dev/docs/css/has): Lerne den CSS :has() Selektor: Elemente anhand ihrer Kinder oder Geschwister stylen. Der Eltern-Selektor für Karten, Formulare und Zustände ohne JavaScript.
- [letter-spacing & word-spacing](https://mitmario.dev/docs/css/letter-word-spacing): Zeichenabstand mit letter-spacing und Wortabstand mit word-spacing steuern. Gesperrte Ueberschriften, Laufweite und typografische Feinheiten.
- [line-height](https://mitmario.dev/docs/css/line-height): Zeilenhoehe mit line-height steuern. Lerne unitless Werte, die richtige Zeilenhoehe fuer Lesetexte und den Unterschied zu Einheiten.
- [list-style & ::marker](https://mitmario.dev/docs/css/list-style): Listen mit list-style, list-style-type, list-style-position und list-style-image gestalten. Aufzählungszeichen mit dem ::marker Pseudo-Element individuell anpassen.
- [margin](https://mitmario.dev/docs/css/margin): Kontrolliere Außenabstände mit margin und seinen Einzeleigenschaften. Lerne Shorthand, auto-Zentrierung, Margin Collapsing und logische Properties.
- [Media Features](https://mitmario.dev/docs/css/media-features): Lerne CSS Media Features: prefers-color-scheme für Dark Mode, prefers-reduced-motion für Barrierefreiheit, hover und pointer für Geräte-Erkennung.
- [@media Grundlagen](https://mitmario.dev/docs/css/media-queries): Lerne @media Queries für responsive Webdesign. Mobile-First mit min-width, Desktop-First mit max-width, logische Operatoren und Print-Stylesheets.
- [object-fit & object-position](https://mitmario.dev/docs/css/object-fit): Lerne object-fit und object-position: Bilder und Videos in Container einpassen mit cover, contain, fill. Responsive Bildgrids und Avatar-Styling.
- [opacity](https://mitmario.dev/docs/css/opacity): Steuere mit opacity die Transparenz von Elementen. Lerne den Wertebereich 0 bis 1, Stacking Context, den Unterschied zu rgba und praktische Hover-Effekte.
- [outline](https://mitmario.dev/docs/css/outline): Zeichne Umrisse mit outline und seinen Einzeleigenschaften. Lerne den Unterschied zu border, outline-offset und warum du outline nie entfernen solltest.
- [overflow](https://mitmario.dev/docs/css/overflow): Steuere mit overflow, was passiert, wenn Inhalt größer als sein Container ist. Lerne hidden, scroll, auto und die Achsen-spezifischen Varianten.
- [padding](https://mitmario.dev/docs/css/padding): Kontrolliere Innenabstände mit padding und seinen Einzeleigenschaften. Lerne Shorthand-Notation, logische Properties und den Unterschied zu margin.
- [pointer-events & touch-action](https://mitmario.dev/docs/css/pointer-events): Lerne pointer-events und touch-action: Klick-Durchreichung, Touch-Gesten steuern, Overlays transparent machen und mobile Interaktionen optimieren.
- [position](https://mitmario.dev/docs/css/position): Lerne die CSS-Eigenschaft position mit static, relative, absolute, fixed und sticky. Verstehe die Offset-Eigenschaften top, right, bottom, left und das inset-Shorthand.
- [Scroll-Verhalten & Scroll Snap](https://mitmario.dev/docs/css/scroll-verhalten): Lerne scroll-behavior für sanftes Scrollen, scroll-snap für Karussells und Fullscreen-Sections. Dazu scroll-padding und scroll-margin für Sticky-Header-Offsets.
- [Scrollbar-Styling](https://mitmario.dev/docs/css/scrollbar): Lerne scrollbar-width und scrollbar-color für schlanke und farbige Scrollbars. Dazu overscroll-behavior für kontrolliertes Scroll-Verhalten in Modals und Sidebars.
- [Subgrid](https://mitmario.dev/docs/css/subgrid): Richte verschachtelte Grids am äußeren Raster aus: Mit grid-template-columns: subgrid und grid-template-rows: subgrid teilen sich Karten ein gemeinsames Raster.
- [Tabellen-Styling](https://mitmario.dev/docs/css/tabellen-styling): CSS-Eigenschaften für Tabellen: table-layout, border-collapse, border-spacing, caption-side und empty-cells. Modernes Tabellen-Design mit Zebra-Streifen und Hover-Effekten.
- [text-align](https://mitmario.dev/docs/css/text-align): Textausrichtung mit text-align steuern. Lerne left, right, center, justify und die logischen Werte start und end fuer flexible Layouts.
- [text-decoration](https://mitmario.dev/docs/css/text-decoration): Textdekorationen mit text-decoration steuern. Lerne Unterstreichungen, Durchstreichungen, Linienstile, Farben und text-underline-offset.
- [text-overflow & hyphens](https://mitmario.dev/docs/css/text-overflow): Textüberlauf mit text-overflow und Silbentrennung mit hyphens steuern. Lerne das Ellipsis-Pattern und automatische Silbentrennung für deutsche Texte.
- [text-shadow](https://mitmario.dev/docs/css/text-shadow): Textschatten mit text-shadow erstellen. Lerne einfache Schatten, Glow-Effekte, Praegeeffekte und mehrfache Schatten fuer kreative Typografie.
- [text-transform & text-indent](https://mitmario.dev/docs/css/text-transform): Gross- und Kleinschreibung mit text-transform und Texteinzuege mit text-indent steuern. Uppercase, lowercase, capitalize und haengende Einzuege.
- [text-wrap](https://mitmario.dev/docs/css/text-wrap): Zeilenumbruch mit text-wrap steuern. Lerne balance für ausgeglichene Überschriften, pretty für schönere Absätze und die Longhands text-wrap-mode und text-wrap-style.
- [transform 2D](https://mitmario.dev/docs/css/transform-2d): Verschiebe, drehe, skaliere und verzerr Elemente mit CSS transform. Lerne translate, rotate, scale, skew, matrix und transform-origin für 2D-Transformationen.
- [transform 3D](https://mitmario.dev/docs/css/transform-3d): Erstelle 3D-Transformationen mit perspective, rotateX/Y/Z, translateZ und backface-visibility. Lerne Card-Flips, 3D-Buttons und perspektivische Effekte.
- [transition](https://mitmario.dev/docs/css/transition): Erstelle sanfte Übergänge mit transition. Lerne transition-property, transition-duration, transition-timing-function und transition-delay für animierte Zustandswechsel.
- [user-select, resize & appearance](https://mitmario.dev/docs/css/user-select): Lerne user-select für Text-Selektion, resize für größenveränderbare Elemente und appearance für native Formular-Styling. Drei Properties für bessere Benutzerinteraktion.
- [vertical-align](https://mitmario.dev/docs/css/vertical-align): Vertikale Ausrichtung von Inline-Elementen mit vertical-align. Lerne baseline, middle, top, bottom und die Ausrichtung in Tabellenzellen.
- [visibility](https://mitmario.dev/docs/css/visibility): Steuere mit visibility, ob ein Element sichtbar oder unsichtbar ist, ohne es aus dem Layout zu entfernen. Lerne den Unterschied zu display: none und den Transition-Trick mit opacity.
- [white-space](https://mitmario.dev/docs/css/white-space): Leerzeichen und Zeilenumbrüche mit white-space steuern. Lerne normal, nowrap, pre, pre-wrap, pre-line und break-spaces für präzise Textformatierung.
- [width & height](https://mitmario.dev/docs/css/width-height): Steuere die Breite und Höhe von Elementen mit width, height, min/max-Varianten und logischen Properties wie inline-size und block-size.
- [word-break & overflow-wrap](https://mitmario.dev/docs/css/word-break): Wortumbruch mit word-break und overflow-wrap steuern. Lerne den Unterschied zwischen break-all, break-word und anywhere für lange URLs und Strings.
- [writing-mode](https://mitmario.dev/docs/css/writing-mode): Schreibrichtung mit writing-mode, text-orientation und direction steuern. Lerne vertikalen Text, RTL-Layouts und den Zusammenhang mit logischen Properties.
- [z-index](https://mitmario.dev/docs/css/z-index): Steuere mit z-index die Stapelreihenfolge von Elementen. Lerne Stacking Contexts, positive und negative Werte und typische Probleme mit der Stapelung.
- [CSS Custom Properties](https://mitmario.dev/docs/css/grundlagen/css-custom-properties): Definiere Variablen direkt in CSS mit Custom Properties. Lerne Scope, Fallbacks und wie du damit ein Dark/Light Theme baust.
- [CSS einbinden](https://mitmario.dev/docs/css/grundlagen/css-einbinden): Es gibt drei Wege, CSS in HTML einzubinden: Inline-Styles, internes Stylesheet und externes Stylesheet. Lerne die Unterschiede und wann du welche Methode nutzt.
- [CSS Funktionen](https://mitmario.dev/docs/css/grundlagen/css-funktionen): Berechne Werte direkt in CSS mit calc(), min(), max() und clamp(). Lerne die wichtigsten CSS-Funktionen für flexible Layouts.
- [CSS Nesting](https://mitmario.dev/docs/css/grundlagen/css-nesting): Verschachtele Selektoren und Media Queries direkt in CSS, ganz ohne Build-Tool. Lerne den &-Selektor, das Spezifitäts-Verhalten und die Unterschiede zu Sass.
- [Das Box-Modell](https://mitmario.dev/docs/css/grundlagen/das-box-modell): Jedes HTML-Element ist eine Box. Lerne Content, Padding, Border und Margin kennen und warum box-sizing: border-box zum Standard gehört.
- [Einheiten & Werte](https://mitmario.dev/docs/css/grundlagen/einheiten-werte): Pixel, rem, em, Prozent oder Viewport-Einheiten? Lerne die wichtigsten CSS-Einheiten kennen und wann du welche verwenden solltest.
- [Kaskade & Spezifität](https://mitmario.dev/docs/css/grundlagen/kaskade-spezifitaet): Die CSS-Kaskade bestimmt, welche Regel gewinnt. Lerne Spezifität berechnen, Vererbung verstehen und wann !important sinnvoll ist.
- [Responsives Design](https://mitmario.dev/docs/css/grundlagen/responsives-design): Baue Layouts, die auf jedem Bildschirm funktionieren. Lerne Media Queries, Mobile-First, Breakpoints und Fluid Design Grundlagen.
- [Selektoren Erweitert](https://mitmario.dev/docs/css/grundlagen/selektoren-erweitert): Kombinatoren, Pseudo-Klassen und Pseudo-Elemente: Lerne erweiterte CSS-Selektoren, um HTML-Elemente noch gezielter auszuwählen und zu gestalten.
- [Selektoren Grundlagen](https://mitmario.dev/docs/css/grundlagen/selektoren-grundlagen): CSS-Selektoren bestimmen, welche Elemente gestaltet werden. Lerne Element-, Klassen-, ID-, Attribut- und Universal-Selektoren kennen.
- [Was ist CSS?](https://mitmario.dev/docs/css/grundlagen/was-ist-css): CSS gestaltet das Web. Lerne, was CSS ist, wie es mit HTML zusammenarbeitet und wie eine CSS-Regel aufgebaut ist.

## Kurse

- [KI Coding Mastery](https://mitmario.dev/kurse/ai-coding-mastery): Du nutzt Claude Code. Aber nutzt du es richtig?
- [KI Coding Partner](https://mitmario.dev/kurse/ai-coding-partner): In 5 Tagen vom Prompt-Tipper zum systematischen KI-Entwickler.
- [HTML Email Grundlagen](https://mitmario.dev/kurse/html-email-grundlagen): In 5 Tagen die Email-Entwicklung verstehen.
- [HTML Email Mastery](https://mitmario.dev/kurse/html-email-mastery): Schluss mit Outlook-Crashes und stundenlangem Debugging.
- [Web Security Mastery](https://mitmario.dev/kurse/web-security-mastery): Mach deine Web-App systematisch sicher, in 30 Tagen.