|
1 | | -# CSS- und HTML-Projekt-Abgabe |
| 1 | +# Abgabeprojekt für CSS und HTML |
2 | 2 |
|
3 | 3 | ## Wähle deine Sprache |
4 | 4 |
|
5 | 5 | - 🇺🇸 [Englisch](README.md) |
6 | 6 | - 🇪🇸 [Spanisch](README.es.md) |
7 | 7 |
|
8 | | -Dieses Projekt wurde erstellt, um das Wissen, das in den virtuellen Kursen zu HTML und CSS erworben wurde, zu üben und zu demonstrieren. |
9 | | - |
10 | | -## Das Projekt umfasst die folgenden Schlüsselaspekte |
| 8 | +<!-- ------------------------------------------------------------------------------------------- --> |
| 9 | +## Projektziel |
11 | 10 |
|
12 | | -- Implementierung von strukturiertem **HTML** und seiner Interaktion mit dem **DOM**, zusammen mit kaskadierenden Stilen mit **CSS**. |
13 | | -- Richtiges Verwenden der **HTML**-Tag-Semantik, kombiniert mit CSS-Regeln, die die Zugänglichkeit und Leistung verbessern. |
14 | | -- Entwicklung von **Media Queries**, um ein **responsives** Design zu gewährleisten, das sich an verschiedene Bildschirmauflösungen anpasst. |
15 | | -- Erstellung von dynamischen **Animationen** und **Übergängen** mit **CSS**, um die Benutzererfahrung zu verbessern. |
16 | | -- Anpassung von Animationen durch die Verwendung von **Keyframes**, um einzigartige visuelle Effekte zu erzielen. |
17 | | -- Design eines **responsiven Layouts** mit **Grids** in CSS für eine flexible und skalierbare Struktur. |
18 | | -- Anwendung einer richtigen **CSS-Hierarchie**, um eine ordnungsgemäße Gestaltung und visuelle Konsistenz der Elemente zu gewährleisten. |
19 | | -- Analyse des Verhaltens verschiedener **HTML**-Tags und deren Interaktion mit **CSS**, um die Präsentation des Inhalts zu optimieren. |
20 | | -- Implementierung von **Inputs** mit **Validierungen**, um eine ordnungsgemäße Benutzerinteraktion mit Formularen zu gewährleisten. |
21 | | -- Einbindung von **Links** zur Navigation zu anderen Webseiten, um die Konnektivität und Zugänglichkeit zu verbessern. |
22 | | -- Sicherstellung der **Kohärenz und Sauberkeit des Codes** mit einer organisierten Struktur, die die Wartung und Skalierbarkeit des Projekts erleichtert. |
| 11 | +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. |
23 | 12 |
|
24 | | -## Projektziel |
| 13 | +<!-- ------------------------------------------------------------------------------------------- --> |
| 14 | +## Erlerntes und Angewandtes Wissen |
25 | 15 |
|
26 | | -Das Hauptziel dieses Projekts ist es, ein persönliches **Portfolio** (oder das Portfolio einer fiktiven Figur) zu entwickeln, wobei das in der Klasse erworbene Wissen angewendet wird. Ziel ist es, eine interaktive und visuell ansprechende Präsentation zu erstellen, die die Fähigkeiten und Projekte unseres gewählten Charakters zeigt, indem die im Kurs erlernten Technologien und Praktiken verwendet werden. |
| 16 | +- Umsetzung von strukturiertem **HTML** und dessen Interaktion mit dem **DOM**, ergänzt durch **CSS**-Stilregeln. |
| 17 | +- Korrekte Verwendung der **semantischen** HTML-Tags in Kombination mit CSS-Regeln zur Verbesserung von Zugänglichkeit und Performance. |
| 18 | +- Entwicklung von **Media Queries**, um ein **responsives** Design zu gewährleisten, das sich an verschiedene Bildschirmgrößen anpasst. |
| 19 | +- Erstellung von dynamischen **Animationen** und **Übergängen** mit **CSS**, um das Benutzererlebnis zu verbessern. |
| 20 | +- Individualisierung von Animationen mittels **Keyframes**, um einzigartige visuelle Effekte zu erzielen. |
| 21 | +- Gestaltung eines **responsiven Layouts** mit Hilfe von **CSS Grids** für eine flexible und skalierbare Struktur. |
| 22 | +- Anwendung einer klaren **CSS-Hierarchie**, um ein konsistentes und gut organisiertes Design sicherzustellen. |
| 23 | +- Analyse des Verhaltens verschiedener **HTML-Tags** und deren Zusammenspiel mit **CSS** zur Optimierung der Inhaltsdarstellung. |
| 24 | +- Implementierung von **Eingabefeldern** mit effizienter **Validierung**, um die Benutzerinteraktion mit Formularen sicherzustellen. |
| 25 | +- Einbindung von **Links** zur Navigation zu externen Websites und zur Verbesserung der Zugänglichkeit. |
| 26 | +- Gewährleistung von **sauberem und kohärentem Code**, mit einer organisierten Struktur zur Vereinfachung von Wartung und Erweiterung. |
27 | 27 |
|
| 28 | +<!-- ------------------------------------------------------------------------------------------- --> |
28 | 29 | ## Projektdetails |
29 | 30 |
|
30 | | -- Es muss ein **Header** erstellt werden, bei dem die Links einen sanften `hover`-Zustand mit einer Übergangsanimation haben. Diese Links sind in der mobilen Version nicht erforderlich. |
31 | | -- Ein Abschnitt mit einer Beschreibung von **uns** und unseren Fähigkeiten, die durch **Fortschrittsbalken** dargestellt werden. Diese Balken müssen mit **CSS** animiert werden. |
32 | | -- Ein **Banner** mit einem Hintergrundbild. Auf mobilen Bildschirmen sollte ein anderes Bild angezeigt werden (implementiere **Media Queries** oder **responsive Images**). |
33 | | -- Kontaktformular mit **Inputs**. Alle Felder sollten die richtigen Typen und HTML-Validierungen für jedes Feld haben: |
34 | | - - **Name**, **Nachname**, **Telefon** (erforderliche Felder). |
35 | | - - **Radio-Input**, um die Frage "Wie hast du mich kennengelernt?" zu beantworten (erforderliches Feld): |
36 | | - - Universität |
37 | | - - Keepcoding-Kick-off |
38 | | - - Schule |
| 31 | +- Ein **Header** muss erstellt werden, in dem die Links einen sanften `hover`-Übergang aufweisen. Diese Links sind in der mobilen Version nicht erforderlich. |
| 32 | +- Ein Abschnitt mit einer **Über uns**-Beschreibung und unseren Fähigkeiten, dargestellt durch **Fortschrittsbalken**, die mit **CSS** animiert werden. |
| 33 | +- Ein **Banner** mit einem Hintergrundbild. Auf mobilen Geräten soll ein anderes Bild angezeigt werden (über **Media Queries** oder **Responsive Images**). |
| 34 | +- Ein Kontaktformular mit **Eingabefeldern**. Alle Felder sollen korrekte Typen und HTML-Validierung enthalten: |
| 35 | + - **Vorname**, **Nachname**, **Telefonnummer** (Pflichtfelder). |
| 36 | + - **Radio Button**, um die Frage zu beantworten: „Wie hast du mich kennengelernt?“ (Pflichtfeld): |
| 37 | + - Universität |
| 38 | + - Keepcoding Kick-off |
| 39 | + - Schule |
39 | 40 | - Auf GitHub |
40 | | - - **GitHub-Tag** (Verwende den regulären Ausdruck `^@[^\s]+` zur Validierung - `@username`). |
41 | | - - **Textarea** mit mehr Informationen über den Benutzer (maximal 180 Zeichen) (erforderliches Feld). |
42 | | - - **Checkbox** für den Newsletter. |
43 | | - - **Speichern**- und **Zurücksetzen**-Schaltflächen. |
44 | | -- **Footer** mit Links zu unseren sozialen Netzwerken über externe Ressourcen. |
45 | | -- Eine neue Seite, die ein **Video** enthält, das beim Betreten der Webseite automatisch abgespielt wird und mit einer **fadeIn**-Animation erscheint. |
46 | | -- Erstelle eine neue Seite mit einem **Grid**, das unsere Projekte anzeigt. |
| 41 | + - **GitHub-Tag** (Regulärer Ausdruck `^@[^\s]+` für die Validierung — `@username`). |
| 42 | + - **Textarea** für zusätzliche Informationen (max. 180 Zeichen) (Pflichtfeld). |
| 43 | + - **Checkbox** zur Anmeldung für den **Newsletter**. |
| 44 | + - **Speichern**- und **Zurücksetzen**-Buttons. |
| 45 | +- Ein **Footer** mit externen Links zu unseren sozialen Netzwerken. |
| 46 | +- Eine neue Seite mit einem **Video**, das beim Laden der Seite automatisch abgespielt wird und mit einer **fadeIn**-Animation erscheint. |
| 47 | +- Eine neue Seite mit einem **Grid**, das unsere Projekte darstellt. |
47 | 48 |
|
48 | | -### Optional |
| 49 | +### Optionale Ziele |
49 | 50 |
|
50 | | -- Erstelle ein Burger-Menü nur mit CSS und einem Checkbox-Input, ohne JS zu verwenden. |
51 | | -- Deployment auf Github Pages. |
52 | | -- 404-Seite. Freies Design. |
53 | | -- 500-Seite. Freies Design. |
| 51 | +- Erstellung eines Burger-Menüs nur mit CSS und einem Checkbox-Input, ganz ohne JavaScript. |
| 52 | +- Deployment über GitHub Pages. |
| 53 | +- Eigene 404-Seite. |
| 54 | +- Eigene 500-Seite. |
54 | 55 |
|
55 | | -## Technologien |
| 56 | +<!-- ------------------------------------------------------------------------------------------- --> |
| 57 | +## Verwendete Technologien |
56 | 58 |
|
57 | | -Dieses Projekt wurde ausschließlich mit den folgenden Technologien entwickelt: |
| 59 | +### Sprachen |
58 | 60 |
|
59 | | -- **HTML**: Für die Strukturierung des Inhalts und das Erstellen der Webseitenstruktur. |
60 | | -- **CSS**: Für das Design und die visuelle Gestaltung der Seite, um ein attraktives und konsistentes Benutzererlebnis zu gewährleisten. |
| 61 | +- **HTML**: Für die Strukturierung des Inhalts und Aufbau der Webseite. |
| 62 | +- **CSS**: Für das Design und visuelle Erscheinungsbild, um ein attraktives und einheitliches Benutzererlebnis zu gewährleisten. |
61 | 63 |
|
62 | | -## Installations- und Nutzungshinweise |
| 64 | +### Abhängigkeiten |
| 65 | + |
| 66 | +Keine |
63 | 67 |
|
64 | | -### Software-Anforderungen |
| 68 | +<!-- ------------------------------------------------------------------------------------------- --> |
| 69 | +## Installations- und Nutzungshinweise |
65 | 70 |
|
66 | | -- **Git** (erforderlich) |
67 | | -- **SourceTree** (optional) |
68 | | -- **Visual Studio** (Ausgeführt in Version 1.99.0) (erforderlich) |
69 | | -- **Live Server** (Visual Studio Addon, optional) |
| 71 | +### Software-Voraussetzungen |
70 | 72 |
|
71 | | -### Beschreibung der Programme |
| 73 | +- **[Git](https://git-scm.com/downloads)** (getestet mit Version **2.47.1.windows.1**) |
| 74 | +- **[Visual Studio Code](https://code.visualstudio.com/)** (getestet mit Version **1.99.0**) |
| 75 | +- **Live Server** (VS Code addon, *optional*) |
72 | 76 |
|
73 | | -- **Git**: Versionskontroll-Tool. Erforderlich, um das Repository zu klonen. |
74 | | -- **SourceTree**: Ein visuelles Tool zur Verwaltung von Git-Repositories. Es ermöglicht eine einfache Interaktion mit Git ohne die Verwendung der Kommandozeile. |
75 | | -- **Visual Studio**: Die integrierte Entwicklungsumgebung (IDE), die erforderlich ist, um das Projekt auszuführen. Stelle sicher, dass du Version 1.99.0 verwendest, um Kompatibilitätsprobleme zu vermeiden. |
76 | | -- **Live Server**: Eine Visual Studio-Erweiterung, mit der du HTML-Dateien lokal in einem Browser anzeigen kannst, während Änderungen in Echtzeit angezeigt werden. |
| 77 | +### Repository klonen |
77 | 78 |
|
78 | | -### Klonen des Repositorys |
| 79 | +Projekt |
79 | 80 |
|
80 | 81 | ```bash |
81 | | - git clone https://github.com/PabloSch26/keepcoding-html-css-submission-2.git |
| 82 | + git clone https://github.com/PabloSch26/keepcoding-02-html-css.git |
82 | 83 | ``` |
83 | 84 |
|
84 | 85 |  |
85 | 86 |
|
86 | | -Sobald das Repository geklont wurde, öffnen Sie die Dateien index.html, project.html, 404.html und 500.html mit Live Server, um sie im Browser anzuzeigen. |
87 | | - |
88 | 87 | ### Hinweise |
89 | 88 |
|
90 | | -- Dieses Projekt verwendet keine externen Bibliotheken. |
91 | | - |
92 | | -## Keine Beiträge oder Lizenzen |
93 | | - |
94 | | -Dieses Projekt hat derzeit keine externen Beiträge oder eine Lizenz. |
| 89 | +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. |
95 | 90 |
|
| 91 | +<!-- ------------------------------------------------------------------------------------------- --> |
96 | 92 | ## Projektvorschau |
97 | 93 |
|
98 | | -### Index View |
| 94 | +### Index-Ansicht |
99 | 95 |
|
100 | 96 |  |
101 | 97 |
|
102 | | -### Index Mobile View |
| 98 | +### Mobile Index-Ansicht |
103 | 99 |
|
104 | 100 |  |
105 | 101 |
|
106 | | -### Projects View |
| 102 | +### Projektansicht |
107 | 103 |
|
108 | 104 |  |
109 | 105 |
|
110 | | -### Projects Mobile View |
| 106 | +### Mobile Projektansicht |
111 | 107 |
|
112 | 108 |  |
113 | 109 |
|
114 | | -### 404 View |
| 110 | +### 404-Ansicht |
115 | 111 |
|
116 | 112 |  |
117 | 113 |
|
118 | | -### 404 Mobile View |
| 114 | +### Mobile 404-Ansicht |
119 | 115 |
|
120 | 116 |  |
| 117 | + |
| 118 | +<!-- ------------------------------------------------------------------------------------------- --> |
| 119 | +## Beiträge und Lizenzen |
| 120 | + |
| 121 | +Dieses Projekt enthält keine externen Beiträge und steht unter keiner Lizenz. |
0 commit comments