All-in-One Cheatsheet für meine Tutorials

HTML Kopieren

<div class="grid-2col">

<div class="code-block">
    <div class="code-header">
        <span class="code-lang">HTML</span>
        <button class="code-copy">
            <span class="copy-icon">
                <img src="/assets/icons/clipboard.svg" alt="Copy Icon" width="16" height="16">
            </span>
            <span class="copy-text">Kopieren</span>
        </button>
    </div>
    <pre><code class="language-html"><!-- HTML Code -->
</code></pre>
</div>

<div class="code-block">
    <div class="code-header">
        <span class="code-lang">CSS</span>
        <button class="code-copy">
            <span class="copy-icon">
                <img src="/assets/icons/clipboard.svg" alt="Copy Icon" width="16" height="16">
            </span>
            <span class="copy-text">Kopieren</span>
        </button>
    </div>
    <pre><code class="language-css">/* CSS Code */
</code></pre>
</div>

</div>

HTML Kopieren

<!-- Eine Spalte -->
<div class="code-block">
    <div class="code-header">
        <div class="box-title"><strong>Eine Spalte - hier ist kein Copy-Button nötig</strong></div>
    </div>
    <pre><code class="language-text">1. Inhalt
2. Inhalt
3. Inhalt</code></pre>
</div>

HTML Kopieren

<!-- Zwei Spalten -->
<div class="code-block">
    <div class="code-header">
        <div class="box-title"><strong>Hier ist kein Copy-Button nötig</strong></div>
</div>
<div class="grid-2col">
    <div>
        <pre><code class="language-text">1. Inhalt 
2. Inhalt
3. Inhalt</code></pre>
    </div>
    <div>
        <pre><code class="language-text">4. Inhalt 
5. Inhalt
6. Inhalt</code></pre>
        </div>
    </div>
</div>

HTML Kopieren

<h2>2 Spalten mit Hintergrund</h2>
<div class="grid-2col">

    <div class="grid-2col-bg">
        <strong class="box-title no-toc">Was dich hier erwartet</strong>
        <p>Ein gutes Stylesheet ist logisch aufgebaut. Du kannst Regeln nach Themen ordnen, z. B.
            Typografie, Layout, Navigation.</p>
        <p>Die Kaskade (Cascading) sorgt dafür, dass später definierte Regeln frühere überschreiben –
            das eröffnet viele Gestaltungsmöglichkeiten.</p>
    </div>

    <div class="grid-2col-bg">
        <strong class="box-title no-toc">Warum CSS wichtig ist</strong>
        <p>CSS trennt Content von Design – ein Prinzip, das deine Website wartbar und skalierbar macht.
        </p>
        <p>Mit modernen Features wie Flexbox, Grid und CSS Variables kannst du komplexe Layouts
            erstellen, ohne auf JavaScript zurückgreifen zu müssen.</p>
    </div>

</div>

CSS Kopieren

/* Generisches 2-Spalten Grid */
.grid-2col {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
    /* 1 Spalte auf Mobile (< 640px) */
    align-items: stretch;
    margin: 0;
}

.grid-2col>.code-block {
    margin: auto 0 0 0;
}

.grid-2col .arrow-list {
    margin: 0;
}

/* 640px: 2 Spalten */
@media (min-width: 640px) {

    .grid-2col {
        grid-template-columns: repeat(2, 1fr);
    }
}

.grid-2col-bg {
    padding: 1.5rem;
    background-color: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.grid-2col-bg h3 {
    padding: 0.75rem 0 0;
}

.grid-2col .arrow-list,
.grid-2col-bg .arrow-list {
    margin: 0;
}

.grid-2col ol,
.grid-2col-bg ol {
    margin: 0;
}

HTML Kopieren

<!-- Blue Tags -->
<div class="tag-item tag-blue">
    <strong><code class="inline">&lt;html&gt;</code></strong> – Root-Element
</div>
<!-- <div class="tag-item tag-green"> -->
<!-- <div class="tag-item tag-yellow"> -->
<!-- <div class="tag-item tag-purple"> -->
<!-- <div class="tag-item tag-red"> -->
<!-- <div class="tag-item tag-cyan"> -->
<!-- <div class="tag-item tag-gray"> -->
<!-- <div class="tag-item tag-orange"> -->
<!-- <div class="tag-item tag-mint"> -->
<!-- <div class="tag-item tag-magenta"> -->                   
</div>

HTML Kopieren

<div class="tag-grid">
    <!-- Blue Tags -->
    <div class="tag-item tag-blue">
        <strong><code class="inline">&lt;html&gt;</code></strong> – Root-Element
    </div>

    <!-- Green Tags -->
    <div class="tag-item tag-green">
        <strong><code class="inline">&lt;h1&gt;-&lt;h6&gt;</code></strong> – Überschriften
    </div>

    <!-- Yellow Tags -->
    <div class="tag-item tag-yellow">
        <strong><code class="inline">&lt;div&gt;</code></strong> – Block-Container
    </div>

    <!-- Purple Tags -->
    <div class="tag-item tag-purple">
        <strong><code class="inline">&lt;div&gt;</code></strong> – Block-Container
    </div>

    <!-- Red Tags -->
    <div class="tag-item tag-red">
        <strong><code class="inline">&lt;div&gt;</code></strong> – Block-Container
    </div>

    <!-- Cyan Tags -->
    <div class="tag-item tag-cyan">
        <strong><code class="inline">&lt;div&gt;</code></strong> – Block-Container
    </div>

    <!-- Orange Tags -->
    <div class="tag-item tag-orange">
        <strong><code class="inline">&lt;div&gt;</code></strong> – Block-Container
    </div>

    <!-- Mint Tags -->
    <div class="tag-item tag-mint">
        <strong><code class="inline">&lt;div&gt;</code></strong> – Block-Container
    </div>

    <!-- Magenta Tags -->
    <div class="tag-item tag-magenta">
        <strong><code class="inline">&lt;div&gt;</code></strong> – Block-Container
    </div>
</div>

CSS Kopieren

/* ---- TAG GRID ---- */
.tag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}

.tag-grid h3 {
    font-size: 1.4rem;
    border-bottom: 2px solid var(--accent-blue);
    padding: 0.5rem 0 0.5rem;
}

.tag-item {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 0 8px 8px 0;
    border-left: 4px solid var(--accent-blue);
    transition: all 150ms ease;
}

.tag-item:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tag-item .inline {
    color: var(--accent-blue);
    font-weight: 600;
}

/* ----- Tag Color Variants ----- */
.tag-item.tag-blue {
    border-left-color: var(--accent-blue);
}

.tag-item.tag-blue .inline {
    color: var(--accent-blue);
}

.tag-item.tag-green {
    border-left-color: var(--accent-green);
}

.tag-item.tag-green .inline {
    color: var(--accent-green);
}

.tag-item.tag-yellow {
    border-left-color: var(--accent-yellow-light);
}

.tag-item.tag-yellow .inline {
    color: var(--accent-yellow-light);
}

.tag-item.tag-orange {
    border-left-color: var(--accent-orange);
}

.tag-item.tag-orange .inline {
    color: var(--accent-orange);
}

.tag-item.tag-red {
    border-left-color: var(--accent-red);
}

.tag-item.tag-red .inline {
    color: var(--accent-red);
}

.tag-item.tag-cyan {
    border-left-color: var(--accent-cyan);
}

.tag-item.tag-cyan .inline {
    color: var(--accent-cyan);
}

.tag-item.tag-mint {
    border-left-color: var(--accent-mint);
}

.tag-item.tag-mint .inline {
    color: var(--accent-mint);
}

.tag-item.tag-purple {
    border-left-color: var(--accent-purple);
}

.tag-item.tag-purple .inline {
    color: var(--accent-purple);
}

.tag-item.tag-magenta {
    border-left-color: var(--accent-magenta);
}

.tag-item.tag-magenta .inline {
    color: var(--accent-magenta);
}

.tag-item.tag-gray {
    border-left-color: var(--text-secondary);
}

.tag-item.tag-gray .inline {
    color: var(--text-secondary);
}

HTML Kopieren

<div class="tag-grid">

    <div class="tag-item tag-blue">
        <h3 class="no-toc">Regelmäßig pushen</h3>
        <p>Mindestens am Ende jedes Arbeitstages. So hast du immer ein Backup.</p>
    </div>

    <div class="tag-item tag-blue">
        <h3 class="no-toc">Vor der Arbeit pullen</h3>
        <p>Wenn du von mehreren Geräten arbeitest: Immer erst <code class="inline">git pull</code>,
            dann arbeiten.
        </p>
    </div>

    <div class="tag-item tag-blue">
        <h3 class="no-toc">Sinnvolle .gitignore</h3>
        <p>Keine <code class="inline">node_modules</code>, keine <code
                class="inline">.env</code>-Dateien, keine
            IDE-Einstellungen.</p>
    </div>

    <div class="tag-item tag-blue">
        <h3 class="no-toc">Gute README</h3>
        <p>Dein Repository ist nur so gut wie seine Dokumentation. Erkläre, was das Projekt macht
            und wie man es benutzt.</p>
    </div>

    <div class="tag-item tag-blue">
        <h3 class="no-toc">Private für Unfertiges</h3>
        <p>Wenn du noch lernst oder experimentierst: Private Repository. Du kannst es später public
            machen.
        </p>
    </div>

    <div class="tag-item tag-blue">
        <h3 class="no-toc">Branches für Features</h3>
        <p>Auch wenn du alleine arbeitest: Feature-Branches halten main sauber.</p>
    </div>

</div>

CSS Kopieren

/* ---- TAG GRID ---- */
.tag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}

.tag-grid h3 {
    font-size: 1.4rem;
    border-bottom: 2px solid var(--accent-blue);
    padding: 0.5rem 0 0.5rem;
}

.tag-item {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 0 8px 8px 0;
    border-left: 4px solid var(--accent-blue);
    transition: all 150ms ease;
}

.tag-item:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tag-item .inline {
    color: var(--accent-blue);
    font-weight: 600;
}

/* ----- Tag Color Variants ----- */
.tag-item.tag-blue {
    border-left-color: var(--accent-blue);
}

.tag-item.tag-blue .inline {
    color: var(--accent-blue);
}

.tag-item.tag-green {
    border-left-color: var(--accent-green);
}

.tag-item.tag-green .inline {
    color: var(--accent-green);
}

.tag-item.tag-yellow {
    border-left-color: var(--accent-yellow-light);
}

.tag-item.tag-yellow .inline {
    color: var(--accent-yellow-light);
}

.tag-item.tag-orange {
    border-left-color: var(--accent-orange);
}

.tag-item.tag-orange .inline {
    color: var(--accent-orange);
}

.tag-item.tag-red {
    border-left-color: var(--accent-red);
}

.tag-item.tag-red .inline {
    color: var(--accent-red);
}

.tag-item.tag-cyan {
    border-left-color: var(--accent-cyan);
}

.tag-item.tag-cyan .inline {
    color: var(--accent-cyan);
}

.tag-item.tag-mint {
    border-left-color: var(--accent-mint);
}

.tag-item.tag-mint .inline {
    color: var(--accent-mint);
}

.tag-item.tag-purple {
    border-left-color: var(--accent-purple);
}

.tag-item.tag-purple .inline {
    color: var(--accent-purple);
}

.tag-item.tag-magenta {
    border-left-color: var(--accent-magenta);
}

.tag-item.tag-magenta .inline {
    color: var(--accent-magenta);
}

.tag-item.tag-gray {
    border-left-color: var(--text-secondary);
}

.tag-item.tag-gray .inline {
    color: var(--text-secondary);
}

HTML Kopieren

<div class="grid-2col-cards pb-lg">
    <!-- block check -->
    <div class="code-block">
        <div class="code-header">
            <span class="code-lang">Prism.js Language-Klassen</span>
            <svg class="icon-ui icon-green">
                <use href="#dpz-check-circle" />
            </svg>
        </div>
        <pre><code class="language-css">/* Unterstützte Sprachen */
class="language-html"
class="language-css"
class="language-javascript"
class="language-plaintext"
/* weitere können installiert werden */
/* Diese Sammlung wächst */</code></pre>

    <div class="code-footer">
        <p><strong>Verwendung:</strong> Klasse auf <code>&lt;code&gt;</code>-Tag anwenden
        </p>
        <p>HTML/CSS/JS: Syntax-Highlighting aktiv
            <svg class="icon icon--inline icon-red ml-sm">
                <use href="#dpz-cross-inline" />
            </svg>
        </p>
        <p>plaintext: Keine Farbcodierung
            <svg class="icon icon--inline icon-red ml-sm">
                <use href="#dpz-cross-inline" />
            </svg>
        </p>
    </div>
</div> <!-- block check -->

<!-- block cross -->
<div class="code-block">
    <div class="code-header">
        <span class="code-lang">Grid für gleich hohe Cards</span>
        <svg class="icon-ui icon-red">
            <use href="#dpz-cross-circle" />
        </svg>
    </div>
    <pre><code class="language-css"></code></pre>
        <div class="code-footer">
            <p><strong>stretch:</strong> Alle Grid-Items in einer Reihe werden auf die Höhe des
                höchsten Elements gestreckt.
            </p>
            <p>optisch saubere, gleichmäßige Card-Darstellung
                <svg class="icon icon--inline icon-green ml-sm">
                    <use href="#dpz-check-inline" />
                </svg>
            </p>
        </div>
    </div> <!-- block cross -->

</div>

CSS Kopieren

.code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.code-footer {
    padding: 1rem 1.5rem;
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;  /* Untere Ecken abrunden */
    font-size: 0.9rem;
}

.code-footer p {
    margin: 0.5rem 0;
}

.code-footer p:first-child {
    margin-top: 0;
}

.code-footer p:last-child {
    margin-bottom: 0;
}

.code-footer {
    color: var(--text-secondary);
}

HTML Kopieren

<div class="grid-2col-cards mb-md">
    <div class="grid-2col-bg">
        <h4 class="no-toc">Mobile (ohne @media)</h4>
        <div class="code-block">
            <pre><code class="language-css">/* Basis = Mobile */
.grid {
grid-template-columns: 1fr;
font-size: 16px;
}</code></pre>
        </div>
        <p><strong>Was passiert:</strong></p>
        <p>Gilt für ALLE Bildschirmgrößen als Startpunkt (0-∞px)</p>
    </div>

    <div class="grid-2col-bg">
        <h4 class="no-toc">Desktop (mit @media)</h4>
        <div class="code-block">
            <pre><code class="language-css">/* Ab 768px: Erweitern */
@media (min-width: 768px) {
.grid {
grid-template-columns: 2fr 1fr;
font-size: 18px;
}
}</code></pre>
        </div>
        <p><strong>Was passiert:</strong> <strong>Überschreibt</strong> die Basis ab 768px aufwärts
        </p>
    </div>
</div>

CSS Kopieren

/* Grid für gleich hohe Cards/Code-Blocks */
.grid-2col-cards {
    display: grid;
    gap: 1.5rem;
    margin: 1rem 0;
    grid-template-columns: 1fr;  /* Mobile: untereinander */
    align-items: stretch;  /* Gleiche Höhe erzwingen */
}

.grid-2col-cards h4 {
    padding: 15px 0 10px;
}

/* Code-Blocks in diesem Grid zu Flex-Containern machen */
.grid-2col-cards > .code-block {
    display: flex;
    flex-direction: column;
    height: 100%;  /* Volle Grid-Höhe nutzen */
}

/* Content-Bereich soll wachsen und restlichen Platz füllen */
.grid-2col-cards > .code-block > div:not(.code-header) {
    flex: 1;  /* Nimmt verfügbaren Platz */
}

@media (min-width: 1040px) {

    .grid-2col-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

HTML Kopieren

<div class="grid-2col">

<div class="info-box notice">
<strong class="box-title notice no-toc">Do
    <svg class="icon-ui icon-green"><use href="#dpz-check-circle" /></svg>
</strong>
<ul class="arrow-list">
    <li><strong>Richtig</strong>: So kannst du es machen.</li>
</ul>
</div>

<div class="info-box danger">
<strong class="box-title danger no-toc">Don't
    <svg class="icon-ui icon-red-light"><use href="#dpz-cross-circle" /></svg>
</strong>
<ul class="arrow-list">
    <li><strong>Falsch</strong>: So besser nicht.</li>
</ul>
</div>

</div>

HTML Kopieren

<div class="grid-2col-cards pb-lg">
<div class="code-block">
    <div class="code-header">
        <span class="code-lang">Richtig</span>
        <svg class="icon-ui icon-green"><use href="#dpz-check-circle" /></svg>
    </div>
    <div class="pt-lg pb-0 mb-0 px-md">
        <ul class="arrow-list">
            <li>Für <strong>Card-Grids</strong> (z.B. Blog-Posts, Produkte)</li>
            <li>Wenn <strong>flexible Spaltenzahl</strong> ok ist</li>
            <li>Für <strong>gleich große Items</strong></li>
        </ul>
    </div>
</div>
<div class="code-block">
    <div class="code-header">
        <span class="code-lang">Falsch</span>
        <svg class="icon-ui icon-red-light"><use href="#dpz-cross-circle" /></svg>
    </div>
    <div class="pt-lg pb-0 mb-0 px-md">
        <ul class="arrow-list">
            <li>Wenn du <strong>exakte Kontrolle</strong> über Breakpoints brauchst</li>
            <li>Für <strong>komplexe Layouts</strong> mit unterschiedlichen Spaltenbreiten
            </li>
        </ul>
    </div>
</div>
</div>

CSS Kopieren

/* Grid für gleich hohe Cards/Code-Blocks */
.grid-2col-cards {
    display: grid;
    gap: 1.5rem;
    margin: 1rem 0;
    grid-template-columns: 1fr;  /* Mobile: untereinander */
    align-items: stretch;  /* Gleiche Höhe erzwingen */
}

/* Code-Blocks in diesem Grid zu Flex-Containern machen */
.grid-2col-cards > .code-block {
    display: flex;
    flex-direction: column;
    height: 100%;  /* Volle Grid-Höhe nutzen */
}

/* Content-Bereich soll wachsen und restlichen Platz füllen */
.grid-2col-cards > .code-block > div:not(.code-header) {
    flex: 1;  /* Nimmt verfügbaren Platz */
}

/* 640px: 2 Spalten */
@media (min-width: 640px) {

    .grid-2col-cards {
        grid-template-columns: repeat(2, 1fr);
    }

}

HTML Kopieren

<div class="cheatsheet-grid">
    <div class="cheatsheet-section">
        <h3 class="no-toc">Text</h3>
        <ul>
            <li><code class="inline">.text-center</code> text-align: center;</li>
            <li><code class="inline">.text-left</code> text-align: left;</li>
            <li><code class="inline">.text-right</code> text-align: right;</li>
        </ul>
    </div>

    <div class="cheatsheet-section">
        <h3 class="no-toc">Margin</h3>
        <ul>
            <li><code class="inline">.m-0</code> margin: 0;</li>
            <li><code class="inline">.m-sm</code> margin: 0.5rem;</li>
            <li><code class="inline">.m-md</code> margin: 1rem;</li>
            <li><code class="inline">.m-lg</code> margin: 1.5rem;</li>
            <li><code class="inline">.m-xl</code> margin: 2rem;</li>
        </ul>
    </div>

    <div class="cheatsheet-section">
        <h3 class="no-toc">Margin Top</h3>
        <ul>
            <li><code class="inline">.mt-0</code> margin-top: 0;</li>
            <li><code class="inline">.mt-sm</code> margin-top: 0.5rem;</li>
            <li><code class="inline">.mt-md</code> margin-top: 1rem;</li>
            <li><code class="inline">.mt-lg</code> margin-top: 1.5rem;</li>
            <li><code class="inline">.mt-xl</code> margin-top: 2rem;</li>
        </ul>
    </div>
    <!-- ... -->    
</div>

CSS Kopieren

/* Spezialfall: auto-fit + minmax() */
/* ist von Natur aus responsiv und passt sich automatisch an */
.cheatsheet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.cheatsheet-section h3 {
    color: var(--heading-secondary);
    font-size: 1.1rem;
    margin: 0 0 1rem;
    padding: 1rem 0 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

.cheatsheet-section ul {
    list-style: none;
    padding: 0;
    margin: 0;    
}

.cheatsheet-section li {
    padding: 0.4rem 0;
    font-size: 0.9rem;
}

@media (max-width: 768px) {

    .cheatsheet-grid {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
}

HTML Kopieren

<div class="cheatsheet-grid-2">
    <div class="cheatsheet-section-2">
        <h3 class="no-toc">Struktur</h3>
        <ul>
            <li><code class="inline">&lt;header&gt;</code> Kopfbereich der Seite</li>
            <li><code class="inline">&lt;main&gt;</code> Hauptinhalt</li>
            <li><code class="inline">&lt;footer&gt;</code> Fußbereich</li>
            <li><code class="inline">&lt;nav&gt;</code> Navigationsbereich</li>
            <li><code class="inline">&lt;section&gt;</code> Thematische Gruppierung</li>
        </ul>
    </div>

    <div class="cheatsheet-section-2">
        <h3 class="no-toc">Semantik</h3>
        <ul>
            <li><code class="inline">&lt;article&gt;</code> Eigenständiger Inhalt</li>
            <li><code class="inline">&lt;aside&gt;</code> Ergänzender Inhalt</li>
            <li><code class="inline">&lt;figure&gt;</code> Medien mit Beschriftung</li>
            <li><code class="inline">&lt;time&gt;</code> Zeitangaben</li>
            <li><code class="inline">&lt;mark&gt;</code> Hervorgehobener Text</li>
        </ul>
    </div>

    <div class="cheatsheet-section-2">
        <h3 class="no-toc">Formulare</h3>
        <ul>
            <li><code class="inline">&lt;input&gt;</code> Eingabefeld</li>
            <li><code class="inline">&lt;textarea&gt;</code> Mehrzeiliger Text</li>
            <li><code class="inline">&lt;select&gt;</code> Dropdown-Menü</li>
            <li><code class="inline">&lt;button&gt;</code> Schaltfläche</li>
            <li><code class="inline">&lt;label&gt;</code> Feld-Beschriftung</li>
        </ul>
    </div>

    <div class="cheatsheet-section-2">
        <h3 class="no-toc">Listen</h3>
        <ul>
            <li><code class="inline">&lt;ul&gt;</code> Ungeordnete Liste</li>
            <li><code class="inline">&lt;ol&gt;</code> Geordnete Liste</li>
            <li><code class="inline">&lt;li&gt;</code> Listenelement</li>
            <li><code class="inline">&lt;dl&gt;</code> Definitionsliste</li>
            <li><code class="inline">&lt;dt&gt;</code> / <code class="inline">&lt;dd&gt;</code>
                Begriff / Definition</li>
        </ul>
    </div>
</div>

CSS Kopieren

.cheatsheet-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.cheatsheet-section-2 {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 0 8px 8px 0;
    border-left: 4px solid var(--accent-blue);
    transition: all 200ms ease;
}

.cheatsheet-section-2:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Farbvarianten für verschiedene Kategorien */
.cheatsheet-section-2:nth-child(1) { border-left-color: var(--accent-blue); }
.cheatsheet-section-2:nth-child(2) { border-left-color: var(--accent-green); }
.cheatsheet-section-2:nth-child(3) { border-left-color: var(--accent-purple); }
.cheatsheet-section-2:nth-child(4) { border-left-color: var(--accent-orange); }
.cheatsheet-section-2:nth-child(5) { border-left-color: var(--accent-cyan); }
.cheatsheet-section-2:nth-child(6) { border-left-color: var(--accent-red); }
.cheatsheet-section-2:nth-child(7) { border-left-color: var(--accent-mint); }

.cheatsheet-section-2:nth-child(1) h3 { color: var(--accent-blue); }
.cheatsheet-section-2:nth-child(2) h3 { color: var(--accent-green); }
.cheatsheet-section-2:nth-child(3) h3 { color: var(--accent-purple); }
.cheatsheet-section-2:nth-child(4) h3 { color: var(--accent-orange); }
.cheatsheet-section-2:nth-child(5) h3 { color: var(--accent-cyan); }
.cheatsheet-section-2:nth-child(6) h3 { color: var(--accent-red); }
.cheatsheet-section-2:nth-child(7) h3 { color: var(--accent-mint); }

.cheatsheet-section-2 h3 {
    font-size: 1.1rem;
    margin: 0 0 1rem;
    padding: 0 0 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

.cheatsheet-section-2 ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cheatsheet-section-2 li {
    padding: 0.4rem 0;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .cheatsheet-grid-2 {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
}

HTML Kopieren

<div class="cheatsheet-grid-3">
    <div class="cheatsheet-section-3">
        <h3 class="no-toc">Repository</h3>
        <ul>
            <li><code class="inline">git init</code> Neues Repo initialisieren</li>
            <li><code class="inline">git clone &lt;url&gt;</code> Repo klonen</li>
            <li><code class="inline">git status</code> Aktueller Status</li>
            <li><code class="inline">git log</code> Commit-Historie</li>
            <li><code class="inline">git remote -v</code> Remote-URLs anzeigen</li>
        </ul>
    </div>

    <div class="cheatsheet-section-3">
        <h3 class="no-toc">Staging</h3>
        <ul>
            <li><code class="inline">git add .</code> Alle Änderungen stagen</li>
            <li><code class="inline">git add &lt;file&gt;</code> Datei stagen</li>
            <li><code class="inline">git reset &lt;file&gt;</code> Unstage Datei</li>
            <li><code class="inline">git diff</code> Änderungen anzeigen</li>
            <li><code class="inline">git restore &lt;file&gt;</code> Änderungen verwerfen</li>
        </ul>
    </div>

    <div class="cheatsheet-section-3">
        <h3 class="no-toc">Commits</h3>
        <ul>
            <li><code class="inline">git commit -m "msg"</code> Commit erstellen</li>
            <li><code class="inline">git commit --amend</code> Letzten Commit ändern</li>
            <li><code class="inline">git revert &lt;hash&gt;</code> Commit rückgängig</li>
            <li><code class="inline">git reset --hard</code> Zu Commit zurück</li>
            <li><code class="inline">git cherry-pick</code> Commit übernehmen</li>
        </ul>
    </div>

    <div class="cheatsheet-section-3">
        <h3 class="no-toc">Branches</h3>
        <ul>
            <li><code class="inline">git branch</code> Branches auflisten</li>
            <li><code class="inline">git branch &lt;name&gt;</code> Branch erstellen</li>
            <li><code class="inline">git checkout &lt;name&gt;</code> Branch wechseln</li>
            <li><code class="inline">git merge &lt;branch&gt;</code> Branch mergen</li>
            <li><code class="inline">git branch -d &lt;name&gt;</code> Branch löschen</li>
        </ul>
    </div>
</div>

CSS Kopieren

.cheatsheet-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.cheatsheet-section-3 {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 0 8px 8px 0;
    border-left: 4px solid var(--accent-blue);
    transition: all 200ms ease;
}

.cheatsheet-section-3:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-left-color: var(--accent-blue-hover);
}

.cheatsheet-section-3 h3 {
    color: var(--accent-blue);
    font-size: 1.1rem;
    margin: 0 0 1rem;
    padding: 0 0 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

.cheatsheet-section-3 ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cheatsheet-section-3 li {
    padding: 0.4rem 0;
    font-size: 0.9rem;
    transition: color 150ms ease;
}

.cheatsheet-section-3 li:hover {
    color: var(--accent-blue);
}

@media (max-width: 768px) {
    .cheatsheet-grid-3 {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
}

HTML Kopieren

<div class="tutorial-grid">
    <div class="tutorial-card">
        <h3 class="no-toc">Zeile duplizieren</h3>
        <p><kbd>Shift + Opt + ↓</kbd></p>
        <p><kbd>Shift + Alt + ↓</kbd></p>
        <p>→ Kopiert aktuelle Zeile nach unten</p>
        <p>Praktisch für: Wiederholende HTML-Strukturen</p>
    </div>

    <div class="tutorial-card">
        <h3 class="no-toc">Multi-Cursor</h3>
        <p><kbd>Cmd + Opt + ↓</kbd></p>
        <p><kbd>Ctrl + Alt + ↓</kbd></p>
        <p>→ Mehrere Zeilen gleichzeitig bearbeiten</p>
        <p>Praktisch für: Bulk-Änderungen in Listen</p>
    </div>

    <div class="tutorial-card">
        <h3 class="no-toc">Zeile verschieben</h3>
        <p><kbd>Opt + ↑/↓</kbd></p>
        <p><kbd>Alt + ↑/↓</kbd></p>
        <p>→ Verschiebt Zeile nach oben/unten</p>
        <p>Praktisch für: Code-Reorganisation</p>
    </div>
</div>

CSS Kopieren

.tutorial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.tutorial-card {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.tutorial-card h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    padding-top: 0;
    color: var(--accent-blue);
    font-size: 1.1rem;
}

.tutorial-card p {
    margin: 1rem 0 0;
}

@media (max-width: 768px) {
    .tutorial-grid {
        grid-template-columns: 1fr;
    }
}

/* Keyboard Keys */
kbd {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    font-family: 'Fira Code', monospace;
    font-size: 0.9em;
    box-shadow: 0 2px 0 var(--border-color);
}

HTML Kopieren

<div class="shortcut-grid">
    <div class="shortcut-card">
        <kbd>Ctrl + T</kbd>
        <p>Neuer Tab</p>
    </div>
    <div class="shortcut-card">
        <kbd>Ctrl + W</kbd>
        <p>Tab schließen</p>
    </div>
    <div class="shortcut-card">
        <kbd>Ctrl + Tab</kbd>
        <p>Nächster Tab</p>
    </div>
    <div class="shortcut-card">
        <kbd>Ctrl + Shift + Tab</kbd>
        <p>Vorheriger Tab</p>
    </div>                        
</div>

CSS Kopieren

.shortcut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.shortcut-card {
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    text-align: center;
}

.shortcut-card kbd {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.shortcut-card p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

@media (max-width: 768px) {

    .shortcut-grid {
        grid-template-columns: 1fr;
    }
}

HTML Kopieren

<div class="grid-3">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
</div>

HTML Kopieren

<div class="grid-4">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
</div>

HTML Kopieren

<div class="comparison-grid">
    <div class="comparison-box unsafe-example">
        <div class="example-label">UNSICHER - innerHTML</div>
        <div class="code-block">
            <pre><code class="language-javascript">// Führt HTML/JavaScript aus!
element.innerHTML = userInput;</code></pre>
        </div>
        <p><strong>Wann verwenden:</strong> Nur mit vertrauenswürdigen Daten, NIE mit
            User-Input!
        </p>
    </div>

    <div class="comparison-box safe-example">
        <div class="example-label">SICHER - textContent</div>
        <div class="code-block">
            <pre><code class="language-javascript">// Zeigt nur Text, kein Code!
element.textContent = userInput;</code></pre>
        </div>
        <p><strong>Wann verwenden:</strong> Immer bei User-Input! Code wird nicht ausgeführt.
        </p>
    </div>
</div>

CSS Kopieren

/* Comparison Grid - für Side-by-Side Vergleiche (z.B. unsafe vs safe code) */
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.comparison-box {
    padding: 15px;
    border-radius: 8px;
}

.unsafe-example {
    background-color: var(--bg-secondary);
    border: 1px solid var(--accent-red-light);
}

.safe-example {
    background-color: var(--bg-secondary);
    border: 1px solid var(--accent-green);
}

.example-label {
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.example-label::before {
    content: "✗";
    display: inline-block;
    margin-right: 8px;
    font-size: 20px;
}

.safe-example .example-label::before {
    content: "✓";
    color: #28a745;
}

.unsafe-example .example-label::before {
    content: "✗";
    color: #dc3545;
}

/* Responsive: 768px untereinander */
@media (max-width: 768px) {
    .comparison-grid {
        grid-template-columns: 1fr;
    }
}

CSS Kopieren

svg.icon-inline {
    vertical-align: middle;
}
/* Etwas nach unten - Ersatz für middle, da es oft optisch nicht gut sitzt */
svg.icon-va-y-2 {
    vertical-align: -2px;
}

/* An Baseline des Textes */
svg.icon-va-tb {
    vertical-align: text-bottom;
}

/* An Baseline der Kleinbuchstaben */
svg.icon-va-tbase {
    vertical-align: baseline;
}

CSS Kopieren

.hero-cta {
    display: flex;
    flex-direction: column;
    /* Untereinander auf Mobile */
    gap: 1rem;
    /* = 16px */
    align-items: center;
}

HTML Kopieren

details {
    margin-top: 1rem;
}

summary {
    cursor: pointer;
    user-select: none;
    font-family: var(--font-code);
    color: var(--accent-blue);
    font-weight: bold;
    /* padding: 0.5rem 0; */
    text-align: left;
}

summary:hover {
    color: var(--accent-blue-hover);
}

/* Falls mehr Abstand benötigt wird */
.toggle-detail {
    padding: 0.5rem 0 0.5rem 0;
    margin-top: 10px;
}