Code
Responsive Kundenportal für einen Erneuerbare-Energien-Anbieter
Übersicht
Worum es bei diesem Projekt geht.
Du arbeitest als Junior Frontend Developer im Team mit einer weiteren Studierenden. Gemeinsam entwickelt ihr ein responsives Kundenportal mit HTML5, CSS3 und JavaScript ohne Framework-Einsatz. Das Portal umfasst eine Startseite mit dynamischer Verbrauchsgrafik (Canvas- oder SVG-basiert), eine Rechnungsübersicht mit filterbarer Tabelle sowie ein Kontaktformular mit Echtzeit-Validierung. Die Umsetzung muss drei Breakpoints (Mobil, Tablet, Desktop) berücksichtigen und in einem gemeinsamen Git-Repository versioniert werden. Erfolgskriterium ist eine funktionsfähige Demo, die auf verschiedenen Browsern und Gerätegrößen konsistent dargestellt wird.
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.
Fähigkeiten
Fähigkeiten, die Du unter Beweis stellst.
Jede taucht auf Deinem verifizierten Zertifikat auf.
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