Flexbox in CSS & HTML: Aufsetzen des Initialprojekts

In diesem Tutorial lernst du, wie du dein Projekt vorbereitest, um mit CSS Flexbox zu arbeiten. Es ist wichtig, eine solide Grundlage zu haben, bevor du tiefer in die Flexbox-Layout-Techniken eintauchst. Wir verwenden Visual Studio Code zur Entwicklung, aber du kannst auch einen einfachen Texteditor und einen Browser wählen. In den folgenden Schritten setzen wir ein einfaches Projekt auf, das dir helfen wird, Flexbox zu verstehen und anzuwenden.

Wichtigste Erkenntnisse

• Die Verwendung eines Entwicklungsservers erleichtert die Arbeit an deinen Projekten.
• Du kannst ohne Frameworks arbeiten, um die Grundlagen von JavaScript und CSS zu lernen.
• Die Index-HTML-Datei ist der zentrale Punkt in deinem Projekt, von dem aus du arbeiten wirst.

Schritt-für-Schritt-Anleitung

Zuerst öffne ein Terminal in Visual Studio Code oder einem anderen Programm deiner Wahl. Stelle sicher, dass Node.js installiert ist, bevor du fortfährst. Das ist entscheidend, um NPM-Befehle auszuführen.

Jetzt kannst du das NPM-Paket für die Projektstrukturierung nutzen. Gib im Terminal den Befehl npx create-v ein, um das Erstellungsverfahren für dein Projekt zu starten. Du wirst gefragt, ob das Paket heruntergeladen werden soll. Bestätige dies.

Gib dann den Namen für dein Projekt ein. Ich empfehle, es einfach "flexbox" zu nennen, da das Thema eben genau darum geht. Nachdem du den Namen eingegeben hast, wirst du nach einem UI-Framework gefragt. Wähle in diesem Fall "Vanilla JavaScript", da wir keine speziellen Frameworks nutzen werden.

Im nächsten Schritt wirst du gefragt, ob du TypeScript verwenden möchtest. Auch hier bist du gut beraten, "nein" zu wählen, um es einfach zu halten und dich auf die Kerntechnologien zu konzentrieren.

Jetzt bist du fast fertig. Du musst nur noch in das Verzeichnis deines neuen Projekts wechseln. Das machst du mit dem Befehl cd flexbox. So gelangst du in den Ordner, der gerade erstellt wurde.

Führe dann den Befehl npm install im Terminal aus. Damit werden alle erforderlichen Pakete für dein Projekt installiert.

Sobald das abgeschlossen ist, starte den lokalen Entwicklungsserver mit npm run dev. Dies öffnet dein Projekt und stellt es auf einem lokalen Server bereit.

Jetzt kannst du einen Blick auf die erzeugte Index-HTML-Datei werfen, die sich in deinem Projektverzeichnis befindet. Diese Datei ist der wichtigste Teil deines Projekts, in dem du alle deine Inhalte und Strukturen erstellen wirst.

Was wir als Nächstes tun, ist das Standard-Script zu löschen, das für das Projekt generiert wurde. Das Skript main.js müssen wir nicht gleich zu Beginn einsetzen, also einfach löschen. Auch das Stylesheet style.css kannst du entfernen, da wir zunächst alles in der Index-HTML verwalten wollen.

In der Index-HTML werden wir unsere Flexbox-Containerstruktur aufbauen. Wir benötigen einen übergeordneten Container, der wiederum einige untergeordnete Container enthalten wird. Das ist eine grundlegende Struktur, die wir für Flexbox benötigen.

Um deine Änderungen im Browser sehen zu können, öffne Chrome und gehe zu http://localhost:3000. Wenn du den Entwicklungsserver startest, wird dir die URL angezeigt, über die du deine Index-HTML-Datei aufrufen kannst.

Ich empfehle dir, beim Öffnen von Links im Browser die Steuerungstaste (oder Command auf dem Mac) zu verwenden, um sie direkt im Standardbrowser zu öffnen. So hast du deine Änderungen im Blick.

Sobald die Seite offen ist, kannst du beispielsweise den Titel in der Index-HTML von "Weed App" auf "Flexbox" ändern und die Seite speichern. Die Live-Aktualisierung bringt deine Änderungen sofort in den Browser.

Du kannst der Seite auch weiteren Text hinzufügen, z.B. "Flexbox Kurs", und sehen, wie sich der Text dynamisch aktualisiert, ohne dass du manuell die Seite neu laden musst. Diese Echtzeit-Vorschau erleichtert die Arbeit ungemein.

Die Flexbox-Beispiele werden im nächsten Schritt in der Index-HTML weiter bearbeitet. Hier werden wir dann das Layout mit CSS gestalten und die Flexbox-Container erstellen. Sei gespannt auf die kommenden Videos, in denen wir die Flexbox-Techniken vertiefen werden.

Zusammenfassung

In dieser Anleitung hast du gelernt, wie man ein einfaches Projekt für das Arbeiten mit CSS Flexbox einrichtet. Du hast die Grundlagen für die Projektstruktur erkannt, die Index-HTML-Datei vorbereitet und den lokalen Entwicklungsserver verwendet. Dies sind die ersten Schritte auf deinem Weg, Flexbox zu beherrschen.