pablo-sch
diff --git a/‎docs/README.de.md
Lines changed: 92 additions & 74 deletions b/‎docs/README.de.md
Lines changed: 92 additions & 74 deletions
@@ -1,106 +1,124 @@
-# Wählen Sie Ihre Sprache.
+# Abgabeprojekt für CSS und HTML
 
-- 🇺🇸 [English](README.md)
-- 🇪🇸 [Español](README.es.md)
+**KeepCoding Projekte - Web 18**  
+Die vollständige Liste der Repositories und Beschreibungen findest du in [repos-kc-web-18.md](https://github.com/pablo-sch/pablo-sch/blob/main/docs/repos-kc-web-18.md)
 
-# CSS- und HTML-Projektabgabe
+## Wähle deine Sprache
 
-Dieses Projekt wurde mit dem Ziel erstellt, das in den virtuellen Klassen über HTML und CSS erworbene Wissen zu üben und zu demonstrieren.
+- 🇺🇸 [Englisch](README.md)
+- 🇪🇸 [Spanisch](README.es.md)
 
-## Das Projekt umfasst die folgenden Schlüsselaspekte:
+<!-- ------------------------------------------------------------------------------------------- -->
+## Projektziel
 
-- Implementierung von strukturiertem **HTML** und dessen Interaktion mit dem **DOM**, begleitet von kaskadierenden Stilen mit **CSS**.
-- Richtige Verwendung der **Semantik** der HTML-Tags, kombiniert mit CSS-Regeln, die die Zugänglichkeit und Leistung verbessern.
-- Entwicklung von **Media Queries**, um ein **responsives** Design zu gewährleisten, das sich an verschiedene Bildschirmauflösungen anpasst.
-- Erstellung dynamischer **Animationen** und **Übergänge** mit **CSS**, um das Benutzererlebnis zu verbessern.
-- Anpassung von Animationen durch die Verwendung von **Keyframes**, um einzigartige visuelle Effekte zu erzielen.
-- Gestaltung eines **responsiven Layouts** mithilfe von **CSS-Grids** für eine flexible und skalierbare Struktur.
-- Anwendung einer korrekten **CSS-Hierarchie**, um eine korrekte Formatierung und visuelle Konsistenz der Elemente zu gewährleisten.
-- Analyse des Verhaltens der verschiedenen **HTML-Tags** und deren Interaktion mit **CSS**, um die Präsentation des Inhalts zu optimieren.
-- Implementierung von **Eingabefeldern** mit effektiven **Validierungen**, um die korrekte Benutzerinteraktion mit Formularen zu gewährleisten.
-- Einbindung von **Links** zur Navigation zu anderen Websites, um die Konnektivität und Zugänglichkeit zu verbessern.
-- Gewährleistung der **Kohärenz und Sauberkeit des Codes**, mit einer organisierten Struktur, die die Wartung und Skalierbarkeit des Projekts erleichtert.
+Das Hauptziel dieses Projekts ist die Entwicklung eines **persönlichen Portfolios** (oder eines Portfolios einer fiktiven Figur), wobei das im Unterricht erlernte Wissen angewendet wird. Ziel ist es, eine interaktive und optisch ansprechende Präsentation zu erstellen, die die Fähigkeiten und Projekte unserer gewählten Figur zeigt, unter Verwendung der im Kurs behandelten Technologien und Best Practices.
 
-## Projektziel
+<!-- ------------------------------------------------------------------------------------------- -->
+## Erlerntes und Angewandtes Wissen
 
-Das Hauptziel dieses Projekts ist die Entwicklung eines persönlichen **Portfolios** (oder eines für eine fiktive Figur), unter Anwendung des in der Klasse erlernten Wissens. Die Idee ist, eine interaktive und visuell ansprechende Präsentation zu erstellen, die die Fähigkeiten und Projekte unserer gewählten Figur zeigt, unter Verwendung der Technologien und Praktiken, die während des Kurses erlernt wurden.
+- Umsetzung von strukturiertem **HTML** und dessen Interaktion mit dem **DOM**, ergänzt durch **CSS**-Stilregeln.
+- Korrekte Verwendung der **semantischen** HTML-Tags in Kombination mit CSS-Regeln zur Verbesserung von Zugänglichkeit und Performance.
+- Entwicklung von **Media Queries**, um ein **responsives** Design zu gewährleisten, das sich an verschiedene Bildschirmgrößen anpasst.
+- Erstellung von dynamischen **Animationen** und **Übergängen** mit **CSS**, um das Benutzererlebnis zu verbessern.
+- Individualisierung von Animationen mittels **Keyframes**, um einzigartige visuelle Effekte zu erzielen.
+- Gestaltung eines **responsiven Layouts** mit Hilfe von **CSS Grids** für eine flexible und skalierbare Struktur.
+- Anwendung einer klaren **CSS-Hierarchie**, um ein konsistentes und gut organisiertes Design sicherzustellen.
+- Analyse des Verhaltens verschiedener **HTML-Tags** und deren Zusammenspiel mit **CSS** zur Optimierung der Inhaltsdarstellung.
+- Implementierung von **Eingabefeldern** mit effizienter **Validierung**, um die Benutzerinteraktion mit Formularen sicherzustellen.
+- Einbindung von **Links** zur Navigation zu externen Websites und zur Verbesserung der Zugänglichkeit.
+- Gewährleistung von **sauberem und kohärentem Code**, mit einer organisierten Struktur zur Vereinfachung von Wartung und Erweiterung.
 
+<!-- ------------------------------------------------------------------------------------------- -->
 ## Projektdetails
 
-- Ein **Header** muss erstellt werden, in dem die Links einen sanften `hover`-Übergangseffekt haben sollen. Diese Links sind in der mobilen Version nicht notwendig.
-- Ein Abschnitt mit einer **Über uns**-Beschreibung und unseren Fähigkeiten, dargestellt durch **Fortschrittsbalken**. Diese Balken müssen mit **CSS** animiert werden.
-- Ein **Banner**, das ein Hintergrundbild haben muss. Auf mobilen Bildschirmen sollte ein anderes Bild angezeigt werden (Implementierung von **Media Queries** oder **Responsive Images**).
-- Ein Kontaktformular mit **Eingabefeldern**. Alle Felder müssen die richtigen Typen und die korrekte HTML-Validierung verwenden:
+- Ein **Header** muss erstellt werden, in dem die Links einen sanften `hover`-Übergang aufweisen. Diese Links sind in der mobilen Version nicht erforderlich.
+- Ein Abschnitt mit einer **Über uns**-Beschreibung und unseren Fähigkeiten, dargestellt durch **Fortschrittsbalken**, die mit **CSS** animiert werden.
+- Ein **Banner** mit einem Hintergrundbild. Auf mobilen Geräten soll ein anderes Bild angezeigt werden (über **Media Queries** oder **Responsive Images**).
+- Ein Kontaktformular mit **Eingabefeldern**. Alle Felder sollen korrekte Typen und HTML-Validierung enthalten:
   - **Vorname**, **Nachname**, **Telefonnummer** (Pflichtfelder).
-  - **Radio-Button** zur Beantwortung der Frage "Wie hast du mich kennengelernt?" (Pflichtfeld):
-    - Universität
-    - Keepcoding Kick-off
-    - Schule
+  - **Radio Button**, um die Frage zu beantworten: „Wie hast du mich kennengelernt?“ (Pflichtfeld):
+    - Universität  
+    - Keepcoding Kick-off  
+    - Schule  
     - Auf GitHub
-  - **GitHub-Tag** (Verwenden Sie den regulären Ausdruck `^@[^\s]+` zur Validierung - `@Benutzername`).
-  - **Textarea** mit weiteren Informationen des Nutzers (maximal 180 Zeichen) (Pflichtfeld).
-  - **Checkbox** für die Anmeldung zum **Newsletter**.
-  - **Speichern**- und **Zurücksetzen**-Schaltflächen.
-- **Footer** mit Links zu unseren sozialen Medien unter Verwendung externer Ressourcen.
-- Eine neue Seite, die ein **Video** enthält, das beim Betreten der Website automatisch abgespielt wird und mit einer **FadeIn**-Animation erscheint.
-- Erstellen Sie eine neue Seite mit einem **Grid**, das unsere Projekte anzeigt.
+  - **GitHub-Tag** (Regulärer Ausdruck `^@[^\s]+` für die Validierung — `@username`).
+  - **Textarea** für zusätzliche Informationen (max. 180 Zeichen) (Pflichtfeld).
+  - **Checkbox** zur Anmeldung für den **Newsletter**.
+  - **Speichern**- und **Zurücksetzen**-Buttons.
+- Ein **Footer** mit externen Links zu unseren sozialen Netzwerken.
+- Eine neue Seite mit einem **Video**, das beim Laden der Seite automatisch abgespielt wird und mit einer **fadeIn**-Animation erscheint.
+- Eine neue Seite mit einem **Grid**, das unsere Projekte darstellt.
 
-## Technologien
+### Optionale Ziele
 
-Dieses Projekt wurde ausschließlich mit den folgenden Technologien entwickelt:
+- Erstellung eines Burger-Menüs nur mit CSS und einem Checkbox-Input, ganz ohne JavaScript.
+- Deployment über GitHub Pages.
+- Eigene 404-Seite.
+- Eigene 500-Seite.
 
-- **HTML**: Zur Strukturierung des Inhalts und der Erstellung des Seitenlayouts.
-- **CSS**: Für das Design und Styling der Seite, um ein attraktives und konsistentes Benutzererlebnis zu gewährleisten.
+<!-- ------------------------------------------------------------------------------------------- -->
+## Verwendete Technologien
 
-## Installations- und Nutzungshinweise
+### Sprachen
 
-### Softwareanforderungen
+- **HTML**: Für die Strukturierung des Inhalts und Aufbau der Webseite.
+- **CSS**: Für das Design und visuelle Erscheinungsbild, um ein attraktives und einheitliches Benutzererlebnis zu gewährleisten.
 
-- **Git** (Erforderlich)
-- **SourceTree** (Optional)
-- **Visual Studio** (Version 1.99.0 verwendet) (Erforderlich)
-- **Live Server** (Visual Studio Addon, Optional)
+### Abhängigkeiten
 
-### Programmbeschreibungen
+Keine
+
+<!-- ------------------------------------------------------------------------------------------- -->
+## Installations- und Nutzungshinweise
 
-- **Git**: Versionskontrollwerkzeug. Essenziell, um das Repository zu klonen.
-- **SourceTree**: Ein visuelles Tool zum Verwalten von Git-Repositories. Ermöglicht die einfache Interaktion mit Git, ohne die Befehlszeile zu verwenden.
-- **Visual Studio**: Integrierte Entwicklungsumgebung (IDE), die notwendig ist, um das Projekt auszuführen. Stellen Sie sicher, dass Sie Version 1.99.0 verwenden, um Kompatibilitätsprobleme zu vermeiden.
-- **Live Server**: Visual Studio-Erweiterung, die es ermöglicht, HTML-Dateien lokal in einem Browser anzuzeigen und Änderungen in Echtzeit zu sehen.
+### Software-Voraussetzungen
 
-### Schritte zur Nutzung dieses Projekts
+- **[Git](https://git-scm.com/downloads)** (getestet mit Version **2.47.1.windows.1**)
+- **[Visual Studio Code](https://code.visualstudio.com/)** (getestet mit Version **1.99.0**)
+- **Live Server** (VS Code addon, *optional*)
 
-1. Klonen Sie das GitHub-Repository mit **SourceTree** oder direkt mit folgendem Git-Befehl:
+### Repository klonen
 
-   ```bash
-   git clone https://github.com/PabloSch26/keepcoding-html-css-submission-2.git
-   
-2. Sobald das Repository geklont wurde:
+Projekt
 
-2.1 Öffnen Sie das Projekt in Visual Studio, indem Sie den Projektordner zu Ihrem Arbeitsbereich hinzufügen.
+```bash
+   git clone https://github.com/pablo-sch/keepcoding-02-html-css.git
+```
 
-2.2 Öffnen Sie die Dateien index.html, proyect.html, 404.html und 500.html mit Live Server, um sie im Browser vorzuschauen.
+![Demo](https://github.com/pablo-sch/pablo-sch/blob/main/etc/clone-tutorial.gif)
 
 ### Hinweise
 
--Stellen Sie sicher, dass alle erforderlichen Programme korrekt installiert sind, bevor Sie mit dem Projekt fortfahren.
--Wenn Sie SourceTree nicht verwenden möchten, können Sie das Repository direkt über das Terminal mit dem git clone-Befehl klonen.
+Nach dem Klonen des Repositories öffne die Dateien `index.html`, `project.html`, `404.html` und `500.html` mit **Live Server**, um sie im Browser anzuzeigen.
 
-## Keine Beiträge oder Lizenzen
+<!-- ------------------------------------------------------------------------------------------- -->
+## Projektvorschau
 
-Dieses Projekt hat derzeit keine externen Beiträge oder eine Lizenz.
+### Index-Ansicht
 
-## Projektvorschau
+![Index View](../etc/preview_images/index.png)
+
+### Mobile Index-Ansicht
+
+![Index Mobile View](../etc/preview_images/index_mobile.png)
+
+### Projektansicht
+
+![Projects View](../etc/preview_images/projects.png)
+
+### Mobile Projektansicht
+
+![Projects Mobile View](../etc/preview_images/projects_mobile.png)
+
+### 404-Ansicht
+
+![404 View](../etc/preview_images/404.png)
+
+### Mobile 404-Ansicht
+
+![404 Mobile View](../etc/preview_images/404_mobile.png)
+
+<!-- ------------------------------------------------------------------------------------------- -->
+## Beiträge und Lizenzen
 
-### Index View
-![Index View](etc/preview_images/index.png)
-### Index Mobile View
-![Index Mobile View](etc/preview_images/index_mobile.png)
-### Projects View
-![Projects View](etc/preview_images/projects.png)
-### Projects Mobile View
-![Projects Mobile View](etc/preview_images/projects_mobile.png)
-### 404 View
-![404 View](etc/preview_images/404.png)
-### 404 Mobile View
-![404 Mobile View](etc/preview_images/404_mobile.png)
+Dieses Projekt enthält keine externen Beiträge und steht unter keiner Lizenz.