{"id":26939190,"url":"https://github.com/vsvito420/html-tutorial","last_synced_at":"2026-04-16T19:08:18.469Z","repository":{"id":270903749,"uuid":"910628885","full_name":"vsvito420/html-tutorial","owner":"vsvito420","description":"HTML + CSS Tutorial","archived":false,"fork":false,"pushed_at":"2025-01-18T12:21:18.000Z","size":404,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-18T13:37:30.822Z","etag":null,"topics":["css","html","js","tutorial"],"latest_commit_sha":null,"homepage":"https://html-tutorial.skolan.icu","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vsvito420.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-31T21:35:46.000Z","updated_at":"2025-01-18T12:21:20.000Z","dependencies_parsed_at":"2025-01-18T13:30:13.096Z","dependency_job_id":"1d0d7240-3ecf-493d-8d15-11714d07ffb3","html_url":"https://github.com/vsvito420/html-tutorial","commit_stats":null,"previous_names":["vsvito420/html-tutorial"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vsvito420%2Fhtml-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vsvito420%2Fhtml-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vsvito420%2Fhtml-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vsvito420%2Fhtml-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vsvito420","download_url":"https://codeload.github.com/vsvito420/html-tutorial/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246828485,"owners_count":20840474,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html","js","tutorial"],"created_at":"2025-04-02T14:16:57.259Z","updated_at":"2026-04-16T19:08:18.429Z","avatar_url":"https://github.com/vsvito420.png","language":"HTML","readme":"# HTML \u0026 CSS Lernplattform\n\nEine interaktive Lernplattform für HTML- und CSS-Grundlagen, entwickelt für KiberOne-Schüler. Die Plattform bietet strukturierte Tutorials, praktische Übungen, ein Quiz-System und umfassende Zusammenfassungen.\n\n## Features\n\n- 📚 Interaktive HTML \u0026 CSS Tutorials mit Live-Code-Beispielen\n- 🎯 Praktische Übungen in verschiedenen Schwierigkeitsgraden (Leicht, Mittel, Schwer)\n- 📝 Interaktives Quiz-System für HTML und CSS\n- 📋 Umfassende Zusammenfassungen der wichtigsten Konzepte\n- 🌓 Dark/Light Theme Support\n- 📱 Vollständig responsives Design\n- 🎨 Syntax-Hervorhebung für Code-Beispiele\n- 🔄 Hot-Reload während der Entwicklung\n\n## Projektstruktur\n\n```\nproject/\n├── index.html              # Startseite\n├── html.html              # HTML-Tutorial\n├── css.html               # CSS-Tutorial\n├── aufgaben.html          # Praktische Übungen\n├── quiz.html              # Interaktives Quiz\n├── zusammenfassung.html   # Konzept-Zusammenfassungen\n├── styles.css             # Globale Styles\n├── script.js              # Haupt-JavaScript\n├── js/                    # JavaScript-Module\n│   ├── quiz-manager.js    # Quiz-System\n│   ├── roadmap.js         # Lernfortschritt\n│   ├── tutorial-page.js   # Tutorial-Funktionalität\n│   └── tutorials/         # Tutorial-Inhalte\n│       ├── html/          # HTML-Beispiele\n│       └── css/           # CSS-Beispiele\n└── aufgaben/             # Übungsmaterialien\n    └── beispiele/        # Beispiellösungen\n```\n\n## Installation\n\n1. Repository klonen:\n```bash\ngit clone https://github.com/vsvito420/html-tutorial.git\ncd html-tutorial\n```\n\n2. Abhängigkeiten installieren:\n```bash\nnpm install\n```\n\n3. Entwicklungsserver starten:\n```bash\nnpm run dev\n```\n\nDie Seite ist dann unter `http://localhost:8080` verfügbar.\n\n## Entwicklung\n\n- `npm run dev` - Startet den Entwicklungsserver mit Hot-Reload\n- `npm start` - Alias für `npm run dev`\n- `npm run preview` - Startet den Server ohne Hot-Reload\n- `npm test` - Startet den Server und öffnet die Seite im Browser\n- `npm run deploy` - Deployed die Seite auf Cloudflare Pages\n\n## Features im Detail\n\n### Tutorials\n- Schrittweise HTML und CSS Tutorials\n- Live-Code-Editor mit sofortiger Vorschau\n- Fortschritts-Tracking\n- Praxisnahe Beispiele\n\n### Übungen\n- Verschiedene Schwierigkeitsgrade\n- Detaillierte Schritt-für-Schritt-Anleitungen\n- Hilfreiche Tipps und Hinweise\n- Beispiellösungen zum Vergleichen\n\n### Quiz-System\n- Separate Quizze für HTML und CSS\n- Verschiedene Schwierigkeitsgrade\n- Fortschritts-Tracking\n- Sofortiges Feedback\n\n### Zusammenfassungen\n- Übersichtliche Darstellung wichtiger Konzepte\n- Praktische Code-Beispiele\n- Schnelle Referenz für häufig verwendete Elemente\n- Responsive Tabellen-Layouts\n\n### Theme-System\n- Automatische Erkennung der System-Präferenz\n- Manuelles Umschalten zwischen Hell/Dunkel\n- Konsistentes Design in beiden Themes\n- Persistente Theme-Einstellung\n\n## Deployment\n\nDas Projekt ist für Cloudflare Pages konfiguriert:\n\n1. Cloudflare-Konfiguration in `wrangler.toml` anpassen\n2. Deployment ausführen:\n```bash\nnpm run deploy\n```\n\n## Mitwirken\n\n1. Fork des Repositories erstellen\n2. Feature-Branch erstellen:\n```bash\ngit checkout -b feature/neue-funktion\n```\n3. Änderungen committen:\n```bash\ngit add .\ngit commit -m 'Beschreibung der Änderungen'\n```\n4. Zu deinem Fork pushen:\n```bash\ngit push origin feature/neue-funktion\n```\n5. Pull Request erstellen\n\n## Richtlinien für Beiträge\n\n- Klare, beschreibende Commit-Messages\n- Code-Kommentare für komplexe Logik\n- Responsive Design beibehalten\n- Bestehende Code-Struktur folgen\n- Tests für neue Funktionen\n\n## Lizenz\n\nDieses Projekt ist für Bildungszwecke gedacht. Viele dinge sind KI Generiert. \n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvsvito420%2Fhtml-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvsvito420%2Fhtml-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvsvito420%2Fhtml-tutorial/lists"}