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:
@@ -62,7 +62,7 @@
|
||||
{
|
||||
"id": "faq-accordion",
|
||||
"title": "FAQ-Akkordeon",
|
||||
"description": "Mehrere <kbd><details></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><details></kbd>-Elemente erstellen ein Akkordeon-artiges FAQ. Jede Frage kann unabhängig aufgeklappt werden.<br><br><b>Pro-Tipp:</b> Tippe <kbd>details*3>summary+p</kbd> und drücke Tab für Emmet-Expansion. Das <kbd>*3</kbd> erstellt 3 Elemente, <kbd>></kbd> geht eine Ebene tiefer, <kbd>+</kbd> fügt Geschwister hinzu.",
|
||||
"task": "Erstelle einen FAQ-Bereich mit:<br>1. Einer <kbd><h1></kbd> mit dem Text 'Häufig gestellte Fragen'<br>2. Drei <kbd><details></kbd>-Elementen, jeweils mit einer Frage im <kbd><summary></kbd> und einer Antwort im <kbd><p></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; }",
|
||||
|
||||
Reference in New Issue
Block a user