Anwendungen HTML & CSS
Anwendungen
HTML & CSS
Hamburger Menü
Hier findest du den Code für ein Hamburger Menü Icon. Das Icon ist responsive,
d.h. es ist sowohl für Mobil- als auch Desktopgeräte optimiert.
Die Balken des Menüicons verwandeln sich beim Klicken in ein Kreuz.
Navigationsmenü
Du benötigst ein Navigatiosnmenü mit mehreren verschachtelten Unterseiten. Dann schau dir gerne
mal
den
Code bzw. das Video an.
Das Menü ist nur mit HTML & CSS erstellt. In Kombination mit dem Hamburger Menü hast du ein
vollständig
responsives Design.
Footer
In diesem Anwendungsbeispiel zeigen wir dir den Aufbau eines Footers. Der Footer enthält Links
einer
Datenschutzseite und zu einem Impressum,
sowie ein Feld zur Newsletter-Anmeldung.
Weiterhin kannst du dein Logo und Social Media
Verlinkungen unterbringen.
In der Desktopversion ist der Footer horizontal aufgebaut und in der Version für mobile
Endgeräte
vertikal.
Layout
Hier findest du einige Ideen für das Gestalten deiner Website.
Teil des Codes ist der Parallax-Effekt und eine Anordnung für eine Bildergalerie mit Texten und
Animationen.
Natürlich alles wieder responsiv!.
Anwendungen HTML & CSS & JS
Anwendungen
HTML & CSS & JS
Slideshow
In diesem Video lernst du wie du eine Slideshow mit beliebig vielen Bildern erstellen kannst.
Nutze die Vorlage und füge deine eigenen Bilder hinzu.
Zusätzlich verfügt die Slideshow über eine optionalen Beschriftung.
Die notwendigen Icons werden mit Fontawesome eingefügt.
Slide-In Effekt
Verpass deinen Layout einen Feinschliff. Und werte deine Design mit etwas JavaScript auf.
In diesem Anwendungsbeispiel zeigen wir dir wie du Elemente von rechts und links einfliegen lassen kannst.
Countdown
Erstelle auf deiner Seite einen Countdown.
Mit Hilfe des Date-Konstruktors und des Math-Objekts lässt sich ganz einfach mit dem Datum rechnen.
Hütchen-Spiel
Starte in die Spielprogrammierung mit einem einfachen Ratespiel.
Das Math-Objekt mit der random-Methode liefert die Basis für dieses Mini-Spiel.
Parallax Cards
Nutzen diesen Effekt um dein Layout attraktiver und interaktiver zu gestalten.
Das Bild der Karten verändert sich je nachdem wie der Mauszeiger bewegt wird. Grundlage bilden die mouse-Events.
Mobile Drag&Drop Liste
Erstelle eine Liste bei der du die einzelnen Listenelemente auf mobilen Endgeräten per drag&drop einem Bereich zuordnen kannst.
Die Skript-Datei baiert auf den touch-Events
Preloader
Hier findest du den Code für einen animierten Preloader. Also eine Grafik welche der Nutzer sieht bevor die Seite vollständig aufgebaut ist.
Load-Event kommen hier zum Einsatz.
Back-To-Top Button
Hier findest du den Code für einen back-to-top Button. Dieser Button taucht auf sobald ein Benutzer nach oben scrollt. Beim Klick gelangt man ganz nach oben.
Scroll-Event und scroll-Eigenschaften werden genutzt.
Sidebar Menu
Hier findest du den Code für ein Sidebar Menu. Die Sidebar besteht aus Icons. Aufklappen lässt sich das Menü mit einer Animation.
Verschiedene CSS-Stylings werden genutzt.
Lightbox
Hier findest du den Code für eine Bildergalerie. Das ausgewählte Bild wird vergrößert. Dort Klicken kann zum nächsten oder vorhergenden Bild navigiert werden.
Zustätzlich kann auf touchfähigen Geräten mit "Wischen/Swipen" gearbeitet werden.
Formular Validierung
Hier findest du den Code für eine Formularvalidierung mit JS. Die Eingabefelder werden sowohl beim input- als auch beim submit-Event überprüft.
Es können mehrere Fehlernachrichten angezeigt werden. Zusätzlich zeigt ein Icon den aktuellen Überprüfungsstand an.
Flex Layout
Hier findest du den Code für ein responsives Layout, welches auf den Prinzipien der Flexbox basiert. Die einzelnen Slider werden beim Klick vergrößert.
In der mobilen Ansicht wird die Ausrichtung von horizontal auf vertikal geändert.
Kalender
Hier findest du den Code für einen Monatskalender. Das aktuelle Datum wird hervorgehoben.
In der Monatsübersicht werden ebenfalls die Wochentage angezeigt.