From 68f93d1b778b2971227d252a75cd3968ad647a6a Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Tue, 30 Dec 2025 14:54:43 +0100 Subject: [PATCH] docs: expand help dialog with learning modes and editor tools - Add About section mentioning open-source and no account required - Add Learning Modes section (CSS, Tailwind, HTML) - Add Editor Tools section (undo, redo, reset, show expected) - Add dedicated Keyboard Shortcuts section - Update Emmet examples to be more practical --- src/index.de.html | 42 ++++++++++++++++++++++++++++-------------- src/index.html | 44 +++++++++++++++++++++++++++++--------------- 2 files changed, 57 insertions(+), 29 deletions(-) diff --git a/src/index.de.html b/src/index.de.html index 9aa481d..2304aa4 100644 --- a/src/index.de.html +++ b/src/index.de.html @@ -145,34 +145,48 @@
-

So verwendest du Code Crispies

-

Code Crispies ist eine interaktive Plattform zum Lernen von HTML, CSS und Tailwind durch praktische Übungen.

+

Über Code Crispies

+

Code Crispies ist eine kostenlose Open-Source-Plattform zum Erlernen von Webentwicklung durch praktische Übungen. Kein Konto erforderlich - einfach loslegen!

+ +

Lernmodi

+

Erste Schritte

-

Öffne das Menü (☰), um ein Lektionsmodul auszuwählen. Jedes Modul enthält eine Reihe von Lektionen.

+

Öffne das Menü (☰), um Lektionsmodule zu durchsuchen. Jedes Modul behandelt ein Thema mit aufeinander aufbauenden Übungen.

Lektionen abschließen

    -
  1. Lies die Anleitung auf der linken Seite
    2. +
  2. Lies die Aufgabenstellung auf der linken Seite
  3. Schreibe deinen Code im Editor
    4. -
  4. Klicke auf "Ausführen" oder drücke Strg+Enter zum Testen
    5. +
  5. Klicke auf Ausführen oder drücke Strg+Enter
  6. Folge den Hinweisen, um Fehler zu beheben
    7. -
  7. Klicke auf "Weiter", wenn du fertig bist
    8. +
  8. Klicke auf Weiter, wenn du fertig bist
-

Tipps

+

Editor-Werkzeuge

+ +

Tastenkürzel

+

Emmet-Kürzel (HTML-Modus)

-

Tippe Abkürzungen und drücke Tab zum Erweitern:

+

Tippe Abkürzungen und drücke Tab zum Erweitern:

diff --git a/src/index.html b/src/index.html index 22cc878..8f98d39 100644 --- a/src/index.html +++ b/src/index.html @@ -145,34 +145,48 @@
-

How to Use Code Crispies

-

Code Crispies is an interactive platform for learning HTML, CSS, and Tailwind through practical exercises.

+

About Code Crispies

+

Code Crispies is a free, open-source platform for learning web development through hands-on exercises. No account required - just start coding!

+ +

Learning Modes

+

Getting Started

-

Open the menu (☰) to select a lesson module. Each module contains a series of lessons.

+

Open the menu (☰) to browse lesson modules. Each module covers a specific topic with progressive exercises.

Completing Lessons

    -
  1. Read the instructions on the left
    2. +
  2. Read the task instructions on the left
  3. Write your code in the editor
    4. -
  4. Click "Run" or press Ctrl+Enter to test
    5. -
  5. Follow the hints to fix any issues
    6. -
  6. Click "Next" when you're done
    7. +
  7. Click Run or press Ctrl+Enter to test
    8. +
  8. Follow hints to fix any issues
    9. +
  9. Click Next when complete
-

Tips

+

Editor Tools

+ +

Keyboard Shortcuts

+

Emmet Shortcuts (HTML mode)

-

Type abbreviations and press Tab to expand:

+

Type abbreviations and press Tab to expand: