# Challenges
Stell dich unseren Challenges! Diese sind im Guide nicht dokumentiert und sollen dir dabei helfen, dein Frontend KnowHow selbstständig anzuwenden.
Tipp
Falls du nicht genau weisst, wie eine Challenge zu lösen ist, schau dich mal bei Codepen oder Codedrops um. Dort findest du unzählige Beispiele inklusive Code. Auch das Forum Stackoverflow ist ein unerlässliches Hilfsmittel um auf Development-Fragen Antworten zu finden.
Versuche deine erste Challenge - Viel Erfolg!
# #1 Sticky Header
Aufgabe: Fixiere den Header, sodass er beim scrollen sichtbar bleibt.
Schwierigkeitsgrad: 1
# #2 Alternative About Layout
Aufgabe: Erstelle dein eigenes Layout für die Section About.
Schwierigkeitsgrad: 1
# #3 Branding
Aufgabe: Füge dein eigenes Logo im Header ein.
Schwierigkeitsgrad: 1
# #4 SVG Color
Aufgabe: Verändere die Farbe einer SVG Grafik bei hover.
Schwierigkeitsgrad: 1
# #5 SVG Mask
Aufgabe: Nutze SVG um ein Bild zu maskieren.
Schwierigkeitsgrad: 2
# #6 SVG Animation
Aufgabe: Animiere den Pfad eines SVG Icons. Schwierigkeitsgrad: 3
# #7 CSS Transition
Aufgabe: Bewege Elemente animiert bei hover.
Schwierigkeitsgrad: 2
# #8 Parallax
Aufgabe: Bewege verschiedene Elemente und Bilder unterschiedlich schnell beim scrollen.
Schwierigkeitsgrad: 3
# #9 Image Editing
Aufgabe: Manipuliere Farben, Helligkeit und Kontrast eines Bildes mit CSS.
Schwierigkeitsgrad: 2
# #10 Smooth Scrolling
Aufgabe: Scrolle die Seite "smooth" beim Klick auf ein Navigationselement.
Schwierigkeitsgrad: 2
# #11 Back to Top
Aufgabe: Füge einen Button ein, um "smooth" zum Seitenanfang zu scrollen.
Schwierigkeitsgrad: 2
# #12 Mouse Events
Aufgabe: Lass ein Element dem Mauszeiger folgen. Schwierigkeitsgrad: 3
# #13 Perspective
Aufgabe: Kippe ein Element perspektivisch.
Schwierigkeitsgrad: 2
# #14 Viewport Animations
Aufgabe: Animiere Elemente sobald sie in den sichtbaren Bereich (Viewport) gelangen.
Schwierigkeitsgrad: 3
# #15 Video
Aufgabe: Füge ein Video ein das auf allen Geräten ohne Klick automatisch abspielt.
Schwierigkeitsgrad: 3
# #16 Slider
Aufgabe: Stelle Bilder in einem Slider dar.
Schwierigkeitsgrad: 2-3
# #17 Lightbox
Aufgabe: Biete Nutzern die Möglichkeit, Bilder zu vergrössern.
Schwierigkeitsgrad: 2-3
# #18 Previous/Next-Navigation
Aufgabe: Füge eine Navigation ein, um zur nächsten oder letzten Seite zu gelangen.
Schwierigkeitsgrad: 1-2
# #19 Select Dropdown
Aufgabe: Füge ein Dropdown mit Auswahlmöglichkeiten zum Formular hinzu.
Schwierigkeitsgrad: 2
# #20 CSS Animations
Aufgabe: Füge eine Animation mit CSS ein die niemals stoppt und unabhängig von einer Nutzerinteraktion funktioniert.
Schwierigkeitsgrad: 2-3
# #21 Click Events
Aufgabe: Tausche ein Portfolio-Bild aus, sobald es angeklickt wurde.
Schwierigkeitsgrad: 4
# #22 Dynamic Date
Aufgabe: Füge im Footer die aktuelle Jahreszahl hinzu, die sich dynamisch jährlich ändert.
Schwierigkeitsgrad: 3
# #23 Dynamic Hello
Aufgabe: Begrüsse Website Besucher passend zur Tageszeit. (z.B. Good Morning, Good Evening etc.)
Schwierigkeitsgrad: 3
# #24 Lazyloading Images
Aufgabe: Lade Bilder erst, wenn Sie in den sichtbaren Bereich (Viewport) gelangen.
Schwierigkeitsgrad: 4
# #25 Hamburger Menu
Aufgabe: Füge für Smartphones ein aufklappbares Menu (Hamburger) ein.
Schwierigkeitsgrad: 3
# #26 Modularize
Aufgabe: Zerteile dein Portfolio in Module, sodass du z.B. Header und Footer global ändern kannst, statt wiederholend auf jeder Seite einzeln.
Schwierigkeitsgrad: 4
# #27 GIT Deployment
Aufgabe: Veröffentliche deine Website mit GIT. Schwierigkeitsgrad: 4
# #28 Content Management
Aufgabe: Integriere ein CMS deiner Wahl, damit du Texte und Bilder auch ausserhalb der Code-Ansicht verwalten kannst.
Schwierigkeitsgrad: 5
# #29 Likes
Aufgabe: Lass Besucher auf deiner Website Beiträge "liken". Stelle sicher, das diese Likes gespeichert und zusammengezählt werden. Schwierigkeitsgrad: 5