Das Projekt wurde im Rahmen der Weiterbildung in IT Career Hub als praktische Anwendung und Vertiefung von Frontend-Kenntnissen entwickelt. Ziel war es, die erlernten Fähigkeiten in HTML, CSS und JavaScript strukturiert umzusetzen und einen komponentenbasierten Ansatz in der Praxis anzuwenden.
• Wiederverwendbare UI-Komponenten (Buttons, Inputs, Cards) • Strukturierte CSS-Architektur mit Variablen & Reset • Integration von Google Fonts (Outfit) • Interaktive Elemente mit JavaScript (Accordion, Slider) • Responsives Design (1440px, 800px, 440px) • Einsatz von AI zur Code-Generierung
Die Entwicklung erfolgte in Visual Studio Code. Zunächst wurde die Grundstruktur der Website in HTML aufgebaut und in semantische Sektionen unterteilt (Header, Hero, Portfolio, Footer usw.). Externe Ressourcen wie Google Fonts (Outfit) sowie die CSS- und JavaScript-Dateien wurden im Projekt eingebunden.
Zur besseren Strukturierung wurden alle UI-Komponenten zunächst in einer separaten HTML-Datei erstellt und anschließend modular wiederverwendet. Bilder und Icons wurden in optimierte Formate (SVG und AVIF) konvertiert, um Performance und Ladegeschwindigkeit zu verbessern.
Im nächsten Schritt wurde die CSS-Struktur definiert: Ein globaler Reset über den *-Selektor bildete die Grundlage, anschließend wurden im :root Farb- und Typografie-Variablen festgelegt. Für das body wurde eine maximale Breite von 1920px definiert. Zusätzlich wurden Breakpoints für ein responsives Design bei 800px und 440px implementiert. Anschließend erfolgte das Styling der einzelnen Bereiche mit Flexbox und Grid.
Die JavaScript-Implementierung umfasst die dynamische Hervorhebung aktiver Navbar-Kategorien, einen wiederverwendbaren Infinite Slider sowie ein Accordion-Element. AI wurde gezielt zur Strukturierung und Optimierung des Codes eingesetzt.