Projektierung von Projekten ist sehr wichtig, um zu lernen, wie man programmiert. Wenn du ein Projekt erstellen kannst, erweitert du dein Portfolio und lernst, wie du deine Fähigkeiten in neuen Situationen anwendest.

Wir haben gerade einen 2-Stunden-Kurs auf dem freeCodeCamp.org spanischen YouTube-Kanal veröffentlicht, der dich Schritt für Schritt durch die Erstellung von 3 Projekten mit HTML, CSS und JavaScript führt. Du kannst deine Fähigkeiten praktizieren, indem du eine responsive Navigation bar mit Dropdown-Menüs, einen Slider und eine Landing Page mit einer benutzerdefinierten Modal-Fenster erstellst.

Wenn du spanischsprachige Freunde hast, kannst du diesen Spanische Version dieses Artikels mit ihnen teilen.

Jordan Alexander Cruz Garcia lehrt diesen Kurs. Er ist ein Web-Entwickler, der darauf brennt, sein Wissen zu teilen und anderen beim herrlichen Welt von CSS zu lehren.

💡 Tipp:Bitte beachte, dass der Kurs auf HTML und CSS konzentriert ist, aber grundlegende Kenntnisse von JavaScript für die Implementierung der Interaktivität erfordert.

HTML, CSS und JavaScript

HTML steht für HyperText Markup Language und CSS steht für Cascading Style Sheets. Während HTML die Struktur und Inhalte einer Webseite bereitstellt, bestimmt CSS, wie der Inhalt dargestellt wird. Es kontrolliert die visuellen Aspekte der Webseite, wie z.B. Schriften, Farben, Layouts, Abstände und Animationen.

Mit CSS kannst du leicht verschiedene Stile und Layouts für verschiedene Bildschirmgrößen erstellen, sodass deine Webseite auf Desktopcomputern, Tablets und Mobilgeräten gut aussieht.

💡 Tipp: Webseiten, die sich an verschiedene Bildschirmgrößen anpassen, werden als „responsive Webseiten“ bezeichnet.

Wir verwenden CSS meist in einer externen Datei, die wir als „Stilvorlage“ bezeichnen. Dann verlinken wir diese Stilvorlage mit der HTML-Datei, und alle Stile werden auf Basis der CSS-Selektoren und Eigenschaften auf die entsprechenden HTML-Elemente angewendet.

Den Inhalt der Webseite von ihrer Präsentation zu trennen ist sehr hilfreich. Dies führt zu einer aufwändigeren Projektstruktur und einer effizienteren Renderung, da Browser die Struktur schneller rendern können, während CSS-Styles im Hintergrund heruntergeladen werden.

Grundlegend ist CSS ein unerläßliches Werkzeug für die Erstellung der heutigen schönen, visuellen und benutzerfreundlichen Webseiten.

JavaScript fügt der Webseite Interaktivität hinzu. Es verwandelt einfache Elemente in interaktive Elemente, um engagerende Benutzererfahrungen zu schaffen.

HTML, CSS und JavaScript-Projekte auf Spanisch

Super. Nun, da du mehr über HTML, CSS und JavaScript weißt, lass uns die Projekte anschauen, die du während des Kurses bauen wirst.

Projekt 1: Navigationsleiste

Du beginnst mit dem Bau einer Navigationsleiste mit Dropdown-Menüs. Diese Navigationsleiste ist responsiv, sodass sie sich auf die Bildschirmgröße anpassen kann. Wenn der Bildschirm zu klein ist, wird sie automatisch in eine Seitenleiste verwandelt.

💡 Tipp: Die Hauptoptionen werden immer angezeigt. Wenn der Benutzer auf „Über“ oder „Projekte“ klickt, wird ein Dropdown-Menü mit zusätzlichen Optionen angezeigt.

Desktop-Version

Hier siehst du die Desktop-Version.

Mobile-Version

Dies ist die mobile Version, die du auf kleinen Geräten siehst.

💡 Tipp: Diese Technik, die Navigationssleiste zu verstecken und umzuschalten, wird sehr häufig verwendet, um den Platz für den Inhalt so optimal wie möglich zu optimieren.

Projekt 2: Slider

Als nächstes wirst du einen Slider mit drei Positionen bauen, der sich ändert, wenn der Benutzer auf die Pfeile links oder rechts klickt. Jede Position wird einen Titel, einen kurzen Absatz und ein rundes Bild haben.

💡Tipp: Sliders sind hilfreich, um Nutzeraussagen, Zitate und Bewertungen zu teilen.

Projekt 3: Landing Page

Schließlich wirst du eine Landing Page Schritt für Schritt mit CSS Grid erstellen.

Wenn der Benutzer auf die Schaltfläche „Trete uns bei!“ klickt, wird ein benutzerdefiniertes Modal angezeigt. Du wirst dieses Modal Schritt für Schritt mit HTML, CSS und JavaScript implementieren.

Wenn du bereit bist, deine HTML-, CSS- und JavaScript-Fähigkeiten zu verbessern, sieh dir den Kurs auf dem freeCodeCamp.org Spanisch YouTube Kanal an:

✍️ Kurs erstellt von Jordan Alexander Cruz Garcia (AlexCG).