VelinStyle Setup · Teil 2
Editor & Projekt-Scaffold: erste Seite
Serie VelinStyle Setup · 2/28
Richten Sie Editor und Projektstruktur ein und bauen Sie die erste vollständige VelinStyle-Seite.
Voraussetzungen
VelinStyle installiert · moderner Browser — Schwierigkeit: beginner.
Was Sie in diesem Teil erreichen
Nach der Installation fehlt oft die klare Projektstruktur. Ohne Editor-Setup und ein kleines Scaffold verlieren Einsteiger schnell den Überblick zwischen CSS-Import, HTML-Grundgerüst und Live-Reload.
Dieser Teil führt Sie von einem leeren Ordner zur ersten sichtbaren Seite. Sie richten Autocompletion ein, legen index.html an und bauen einen schlichten Hero mit Container, Headline und Button. Das entspricht dem Geist des Landing-15-Minuten-Guides — bewusst kompakt, aber vollständig.
Am Ende haben Sie eine Seite, die auf Desktop und Smartphone lesbar ist und als Ausgangspunkt für die nächsten Kapitel dient.
Dieser Teil führt Sie von einem leeren Ordner zur ersten sichtbaren Seite. Sie richten Autocompletion ein, legen index.html an und bauen einen schlichten Hero mit Container, Headline und Button. Das entspricht dem Geist des Landing-15-Minuten-Guides — bewusst kompakt, aber vollständig.
Am Ende haben Sie eine Seite, die auf Desktop und Smartphone lesbar ist und als Ausgangspunkt für die nächsten Kapitel dient.
Nach der Installation fehlt oft die klare Projektstruktur. Ohne Editor-Setup und ein kleines Scaffold verlieren Einsteiger schnell den Überblick zwischen CSS-Import, HTML-Grundgerüst und Live-Reload.
Dieser Teil führt Sie von einem leeren Ordner zur ersten sichtbaren Seite. Sie richten Autocompletion ein, legen index.html an und bauen einen schlichten Hero mit Container, Headline und Button. Das entspricht dem Geist des Landing-15-Minuten-Guides — bewusst kompakt, aber vollständig.
Am Ende haben Sie eine Seite, die auf Desktop und Smartphone lesbar ist und als Ausgangspunkt für die nächsten Kapitel dient.
Lesen Sie die Abschnitte der Reihe nach und setzen Sie die Codebeispiele direkt in Ihrem Scaffold um. Am Ende jedes Kapitels steht eine Checkliste — erst abhaken, dann weiter.
Dieser Teil führt Sie von einem leeren Ordner zur ersten sichtbaren Seite. Sie richten Autocompletion ein, legen index.html an und bauen einen schlichten Hero mit Container, Headline und Button. Das entspricht dem Geist des Landing-15-Minuten-Guides — bewusst kompakt, aber vollständig.
Am Ende haben Sie eine Seite, die auf Desktop und Smartphone lesbar ist und als Ausgangspunkt für die nächsten Kapitel dient.
Lesen Sie die Abschnitte der Reihe nach und setzen Sie die Codebeispiele direkt in Ihrem Scaffold um. Am Ende jedes Kapitels steht eine Checkliste — erst abhaken, dann weiter.
Kontext und typische Fehler
Typische Fehler in „Editor & Projekt-Scaffold: erste Seite“ entstehen durch unvollständige Imports, doppelte CSS-Quellen oder fehlende Accessibility-Attribute. Gehen Sie systematisch vor: erst Struktur, dann Styles, dann Interaktion.
Wenn etwas nicht greift, prüfen Sie DevTools (Computed Styles, Console, Netzwerk) bevor Sie weitere Klassen stapeln.
Wenn etwas nicht greift, prüfen Sie DevTools (Computed Styles, Console, Netzwerk) bevor Sie weitere Klassen stapeln.
Praktische Umsetzung
Beginnen Sie mit einem minimalen Markup, das nur das aktuelle Muster zeigt. Erweitern Sie erst, wenn das Minimum stabil ist. So bleibt der Diff im Git klein und reviewbar.
Dokumentieren Sie Abweichungen von den Docs kurz im README Ihres Projekts — besonders Token-Overrides und Theme-Namen.
Dokumentieren Sie Abweichungen von den Docs kurz im README Ihres Projekts — besonders Token-Overrides und Theme-Namen.
<!-- Beispielstruktur für: Editor & Projekt-Scaffold: erste Seite -->
<section class="velin-container py-4">
<h1 class="h3">Übung: Editor & Projekt-Scaffold: erste Seite</h1>
<p class="velin-lead">Hier Ihr Inhalt aus diesem Kapitel.</p>
</section>Vertiefung und Docs
Checkliste Teil 2
- Beispiel lokal nachgebaut
- Mobile Breakpoint geprüft
- Tastaturbedienbarkeit kurz getestet
- Docs-Link geöffnet und quergelesen
- Fragen/Abweichungen notiert
So gehen Sie vor
-
Lesen
Kapiteltext vollständig lesen und Docs-Link öffnen.
-
Nachbauen
Codebeispiele lokal umsetzen und speichern.
-
Prüfen
Checkliste abarbeiten, Mobile und Tastatur kurz testen.
-
Weiter
Nächstes Serienteil erst starten, wenn die Checkliste grün ist.
Offizielle Dokumentation
Vertiefen Sie „Editor & Projekt-Scaffold: erste Seite“ hier: https://velinstyle.info/docs/getting-started/editor-setup.html — sowie weitere Leitfäden unter https://velinstyle.info/docs/.
Teil 2 von 28 — als Nächstes der folgende Schritt der VelinStyle-Setup-Serie.
Nächstes Tutorial
Kommentare 0
Noch keine Kommentare. Seien Sie der Erste!