Frontend-Refactoring einer Tourismus-Plattform für Mobile-First
Übersicht
Worum es bei diesem Projekt geht.
Sie erhalten Zugriff auf das aktuelle Repository (React 16, viele inline-Styles, keine Komponenten-Bibliothek), die Lighthouse-Reports der letzten drei Monate und die Heatmap-Daten von Hotjar. Definieren Sie zunächst Performance-Budgets (LCP unter 2,5 Sekunden, Cumulative Layout Shift unter 0,1, Total Blocking Time unter 200 Millisekunden). Bauen Sie die drei Seiten Mobile-First neu mit Tailwind CSS und einer kleinen Komponenten-Bibliothek (10-15 Komponenten). Validieren Sie auf zwei echten Geräten (Mid-Range Android + iPhone SE 2020) und vergleichen Sie Vorher/Nachher mit Lighthouse. Liefern Sie das Repository, die Komponenten-Doku und einen Performance-Vergleichsbericht.
Das Briefing
Was Du tust und was Du zeigst.
Wie sieht ein Mobile-First-Refactoring aus, das den LCP von 4,9 auf unter 2,5 Sekunden senkt, ohne die Funktionalität zu reduzieren?
Earning criteria — what you'll demonstrate
- Mobile-First mit modernen CSS-Layout-Techniken umsetzen
- Performance-Budgets definieren und messbar einhalten
- Eine kleine, kohärente Komponenten-Bibliothek strukturieren
- Performance-Verbesserungen auf echten Geräten validieren, nicht nur in Chrome DevTools
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.
Karrierewege, die das aufbaut
Kanonische RollenNoch eine Sache