Astro-Kurs 01: Was ist Astro?
Astro, statische Webseiten und Einsatzgebiete verstehen. Schritt-für-Schritt-Lektion für den Astro-Anfängerkurs der Know-How-Schmiede.
Themenwelt
Astro
Moderne Webseiten mit Astro erstellen: Grundlagen verstehen und die erste eigene Webseite Schritt für Schritt umsetzen.
Astro für Anfänger – Etappe 1: Grundlagen
In elf Lektionen von den Web-Grundlagen zur eigenen responsiven Website: Richte deine Entwicklungsumgebung ein und baue mit HTML, CSS und Astro die Übungswebsite „Meine Modellbau-Werkstatt“.
Du brauchst keine Vorkenntnisse. Arbeite die Lektionen der Reihe nach durch und entwickle dein Projekt Schritt für Schritt weiter.
Astro-Kurs 02: Wie funktionieren Webseiten?
Browser, Server, Domain und Dateien unterscheiden. Schritt-für-Schritt-Lektion für den Astro-Anfängerkurs der Know-How-Schmiede.
Astro-Kurs 03: Entwicklungsumgebung einrichten
VS Code, Node.js und Terminal sicher bedienen. Schritt-für-Schritt-Lektion für den Astro-Anfängerkurs der Know-How-Schmiede.
Astro-Kurs 04: Das erste Astro-Projekt
Ein Astro-Projekt erstellen und im Browser öffnen. Schritt-für-Schritt-Lektion für den Astro-Anfängerkurs der Know-How-Schmiede.
Astro-Kurs 05: Die Astro-Projektstruktur
Ordner und Dateien eines Astro-Projekts zuordnen. Schritt-für-Schritt-Lektion für den Astro-Anfängerkurs der Know-How-Schmiede.
Astro-Kurs 06: HTML-Grundlagen für Astro
Die wichtigsten HTML-Tags korrekt einsetzen. Schritt-für-Schritt-Lektion für den Astro-Anfängerkurs der Know-How-Schmiede.
Astro-Kurs 07: CSS-Grundlagen für Astro
Farben, Abstände und Gestaltung in CSS einsetzen. Schritt-für-Schritt-Lektion für den Astro-Anfängerkurs der Know-How-Schmiede.
Astro-Kurs 08: Die erste eigene Startseite
Aus HTML und CSS eine ansprechende Startseite gestalten. Schritt-für-Schritt-Lektion für den Astro-Anfängerkurs der Know-How-Schmiede.
Astro-Kurs 09: Unterseiten und Navigation
Mehrere Seiten verlinken und dateibasiertes Routing anwenden. Schritt-für-Schritt-Lektion für den Astro-Anfängerkurs der Know-How-Schmiede.
Astro-Kurs 10: Flexbox und CSS Grid
Mit Flexbox und Grid responsive Inhaltsbereiche aufbauen. Schritt-für-Schritt-Lektion für den Astro-Anfängerkurs der Know-How-Schmiede.
Astro-Kurs 11: Responsive Webdesign
Die Webseite für Smartphones und große Bildschirme optimieren. Schritt-für-Schritt-Lektion für den Astro-Anfängerkurs der Know-How-Schmiede.
Astro für Anfänger – Etappe 2: Komponenten, Layouts und Inhalte
In den Lektionen 12 bis 22 entwickelst du deine Modellbau-Werkstatt weiter: mit wiederverwendbaren Komponenten, Props, Layouts, Markdown und einem eigenen Wissensbereich mit Content Collections.
Diese Etappe baut auf dem Übungsprojekt aus Etappe 1 auf. Arbeite im selben Projekt weiter und folge der Reihenfolge der Lektionen.
Astro-Kurs 12: Aufbau einer Astro-Datei
Du verstehst Frontmatter, Template, Ausdrücke und Styles.
Astro-Kurs 13: Komponenten erstellen
Du zerlegst eine Webseite in wiederverwendbare Bausteine.
Astro-Kurs 14: Props – Daten an Komponenten übergeben
Du passt Komponenten mit Eigenschaften an, ohne sie zu duplizieren.
Astro-Kurs 15: Layouts und Slots
Du verwendest Kopfbereich, Navigation und Fußzeile auf allen Seiten gemeinsam.
Astro-Kurs 16: Listen und Bedingungen
Du erzeugst wiederholte HTML-Elemente aus Daten und blendest Inhalte bedingt ein.
Astro-Kurs 17: CSS sauber organisieren
Du strukturierst Farben, Abstände und wiederverwendbare Styles.
Astro-Kurs 18: Markdown-Grundlagen
Du verfasst einen ersten Beitrag mit Markdown statt HTML.
Astro-Kurs 19: Markdown-Frontmatter
Du verwaltest Metadaten von Beiträgen mit YAML.
Astro-Kurs 20: Content Collections einrichten
Du organisierst mehrere Beiträge nach einem einheitlichen Schema.
Astro-Kurs 21: Dynamische Beitragsseiten
Du erzeugst aus Blogeinträgen automatisch eigene URLs.
Astro-Kurs 22: Blog und Wissensbereich
Du ergänzt Kategorien, Schlagwörter und eine verständliche Beitragsübersicht.
Astro für Anfänger – Etappe 3: Interaktivität, Veröffentlichung und Wartung
In den Lektionen 23 bis 32 ergänzt du JavaScript und interaktive Elemente, lernst Astro Islands kennen und verbesserst Bilder, Performance, SEO und Barrierefreiheit. Anschließend veröffentlichst und pflegst du deine Website mit Git, GitHub und Hostinger.
Setze dein Übungsprojekt aus Etappe 1 und 2 fort. Domains, Bilder und Hosting-Angaben in den Beispielen ersetzt du durch deine eigenen Angaben.
Astro-Kurs 23: JavaScript-Grundlagen
Lerne javascript-grundlagen mit praktischen Beispielen im Astro-Projekt Meine Modellbau-Werkstatt.
Astro-Kurs 24: Interaktive Elemente
Lerne interaktive elemente mit praktischen Beispielen im Astro-Projekt Meine Modellbau-Werkstatt.
Astro-Kurs 25: Astro Islands verstehen
Lerne astro islands verstehen mit praktischen Beispielen im Astro-Projekt Meine Modellbau-Werkstatt.
Astro-Kurs 26: Bilder und Performance
Lerne bilder und performance mit praktischen Beispielen im Astro-Projekt Meine Modellbau-Werkstatt.
Astro-Kurs 27: SEO und Barrierefreiheit
Lerne seo und barrierefreiheit mit praktischen Beispielen im Astro-Projekt Meine Modellbau-Werkstatt.
Astro-Kurs 28: Git und GitHub für Astro
Lerne git und github für astro mit praktischen Beispielen im Astro-Projekt Meine Modellbau-Werkstatt.
Astro-Kurs 29: Astro Build verstehen
Lerne astro build verstehen mit praktischen Beispielen im Astro-Projekt Meine Modellbau-Werkstatt.
Astro-Kurs 30: Astro bei Hostinger veröffentlichen
Lerne astro bei hostinger veröffentlichen mit praktischen Beispielen im Astro-Projekt Meine Modellbau-Werkstatt.
Astro-Kurs 31: Automatisches Deployment mit GitHub Actions
Lerne automatisches deployment mit github actions mit praktischen Beispielen im Astro-Projekt Meine Modellbau-Werkstatt.
Astro-Kurs 32: Wartung und Weiterentwicklung
Lerne wartung und weiterentwicklung mit praktischen Beispielen im Astro-Projekt Meine Modellbau-Werkstatt.
Beiträge und Downloads
Kompakte Zusammenfassungen zum Lesen und die passenden Materialien zum Herunterladen.
Astro für Anfänger – Moderne Webseiten einfach erstellen
Ein verständlicher Einstieg in das Astro-Webframework: Installation, Seiten, Komponenten, Layouts, Markdown und Veröffentlichung.
Astro-Praxiskurs: Die erste eigene Webseite erstellen
Schritt für Schritt zur ersten eigenen Astro-Webseite: Installation, Layout, Startseite, Projekte, Kontakt, responsive Gestaltung und Veröffentlichung.
Die besten VS-Code-Erweiterungen für Astro
Astro, Prettier, Error Lens und weitere VS-Code-Erweiterungen: Empfehlungen für Einsteiger, Installation und passende Einstellungen für deinen Astro-Kurs.