feat: add Emmet pro tip to FAQ accordion lesson

Explain details*3>summary+p shorthand for quickly scaffolding
multiple disclosure widgets with nested summary and p elements.
This commit is contained in:
2025-12-30 12:36:05 +01:00
parent ac062d5c53
commit b375b7f3af
2 changed files with 2 additions and 2 deletions

View File

@@ -62,7 +62,7 @@
{
"id": "faq-accordion",
"title": "FAQ-Akkordeon",
"description": "Mehrere <kbd>&lt;details&gt;</kbd>-Elemente erstellen ein Akkordeon-artiges FAQ. Jede Frage kann unabhängig aufgeklappt werden.<br><br>Dies ist ein häufiges Muster für FAQ-Seiten, Dokumentation und Hilfebereiche.",
"description": "Mehrere <kbd>&lt;details&gt;</kbd>-Elemente erstellen ein Akkordeon-artiges FAQ. Jede Frage kann unabhängig aufgeklappt werden.<br><br><b>Pro-Tipp:</b> Tippe <kbd>details*3&gt;summary+p</kbd> und drücke Tab für Emmet-Expansion. Das <kbd>*3</kbd> erstellt 3 Elemente, <kbd>&gt;</kbd> geht eine Ebene tiefer, <kbd>+</kbd> fügt Geschwister hinzu.",
"task": "Erstelle einen FAQ-Bereich mit:<br>1. Einer <kbd>&lt;h1&gt;</kbd> mit dem Text 'Häufig gestellte Fragen'<br>2. Drei <kbd>&lt;details&gt;</kbd>-Elementen, jeweils mit einer Frage im <kbd>&lt;summary&gt;</kbd> und einer Antwort im <kbd>&lt;p&gt;</kbd>",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui; min-height: 100vh; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); display: flex; flex-direction: column; justify-content: center; padding: 40px; margin: 0; box-sizing: border-box; } h1 { font-size: 2.5rem; color: #4a4a4a; text-align: center; margin: 0 0 30px 0; } details { background: white; border-radius: 12px; margin-bottom: 15px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } summary { font-size: 1.3rem; font-weight: 600; color: #5c5c5c; cursor: pointer; list-style: none; } summary::before { content: '▸ '; color: #fcb69f; } details[open] summary::before { content: '▾ '; } details p { margin: 15px 0 0 0; color: #666; line-height: 1.6; }",