Responsive Kundenportal für einen Erneuerbare-Energien-Anbieter
Übersicht
Worum es bei diesem Projekt geht.
Baue ein responsives Kundenportal mit Verbrauchsgrafik und Rechnungstabelle. Erhalte ein verifizierbares Zertifikat.
Das Szenario
Das Unternehmen versorgt über 12.000 Gewerbekunden in Baden-Württemberg und Bayern mit Solarstrom aus eigenen Anlagen. Der Anteil mobiler Zugriffe auf die bestehende Webseite stieg 2023 auf 67 Prozent, die Absprungrate bei mobilen Nutzenden liegt jedoch bei 78 Prozent.
Das Briefing
Was Du tust und was Du zeigst.
Wie gestaltet sich ein Kundenportal so, dass es auf allen Gerätegrößen gleichermaßen bedienbar ist und gleichzeitig die Markenwerte Nachhaltigkeit und Transparenz visuell kommuniziert?
Earning criteria — what you'll demonstrate
- Responsive Layouts mit CSS Flexbox und Grid systematisch umsetzen
- Native JavaScript für DOM-Manipulation und Datenvisualisierung einsetzen, ohne auf externe Bibliotheken zurückzugreifen
- Versionskontrolle mit Git im Team koordinieren und Merge-Konflikte lösen
- Cross-Browser-Kompatibilität gezielt testen und sicherstellen
Studienpassung
Wo dies in Dein Studium passt.
Schärft dieselben Fähigkeiten, die Dein Studium von Dir erwartet.
Web and Mobile Application Development
Bachelor · Digital
Strong alignment
This challenge maps to Web and Mobile Application Development at the Bachelor level. It sharpens the same practical skills your coursework expects — but in a real industry context with actual constraints and deliverables.
Fähigkeiten
Fähigkeiten, die Du unter Beweis stellst.
Jede taucht auf Deinem verifizierten Zertifikat auf.
- Responsive Web Design
Apply responsive web design to solve real industry problems and demonstrate production-level capability.
- Javascript Programming
Apply javascript programming to solve real industry problems and demonstrate production-level capability.
- Html5 Css3
Apply html5 css3 to solve real industry problems and demonstrate production-level capability.
- Git Version Control
Apply git version control to solve real industry problems and demonstrate production-level capability.
- Cross Browser Testing
Apply cross browser testing to solve real industry problems and demonstrate production-level capability.
- Data Visualization
Transform complex data into clear, insightful visual representations.
Karrieren
Berufe, auf die dies Dich vorbereitet.
Echte Berufsbezeichnungen. Echte Skill-Brücken. Wähle die, die Deinem Werdegang am nächsten kommt.
Digital Marketing Analyst
Die Erfahrung in der datengestützten Visualisierung von Nutzerverhalten und die Umsetzung von Conversion-optimierten Oberflächen sind direkt auf digitale Marketing-Rollen übertragbar. Das Verständnis für responsive Design hilft bei der Bewertung von Landingpage-Performance und Nutzer:innen-Engagement.
Dieses Projekt schärft
- data-visualization
- responsive-web-design
- cross-browser-testing
Junior Data Analyst
Die eigenständige Implementierung einer Verbrauchsgrafik mit nativem JavaScript schult die Fähigkeit, Rohdaten in verständliche Visualisierungen zu transformieren. Diese Kompetenz ist grundlegend für Datenanalyst:innen, die Erkenntnisse für Entscheider:innen aufbereiten müssen.
Dieses Projekt schärft
- data-visualization
- javascript-programming
- html5-css3
UX Designer
Die praktische Konfrontation mit der Umsetzbarkeit von Design-Entscheidungen im Code und das gezielte Testen auf verschiedenen Geräten vertiefen das Verständnis für nutzerzentrierte Gestaltung unter technischen Randbedingungen.
Dieses Projekt schärft
- responsive-web-design
- cross-browser-testing
- html5-css3
Noch eine Sache