AnnexCode – Erste Schritte (Tutorial)

Ein praxisnaher Durchgang („erste Stunde mit AnnexCode"). Whitepaper-Format, PDF-fähig. Screenshots werden nach der Shotlist am Ende aufgenommen.

Ziel dieses Tutorials

Am Ende hast du eine kleine Landingpage gebaut: HTML-Datei mit Bootstrap-Navbar und Hero-Bereich, angepasst über den Inspector, in der WYSIWYG-Vorschau für Desktop und Mobile geprüft, mit lokalem Server getestet, als .axcode-Projekt gespeichert und per FTP auf einen (Demo-)Server hochgeladen.

Schritt 1: Neue HTML-Datei anlegen

Starte AnnexCode und lege über Ablage ▸ Neu (⌘N) eine neue leere HTML-Datei an. Sie erscheint als Tab im Editor mit Syntax-Highlighting. Schreibe ein minimales HTML-Grundgerüst (<!DOCTYPE html>, html, head, body).

Schritt 2: Komponenten per Drag & Drop einfügen

Öffne in der Sidebar das Komponenten-Panel. Ziehe eine Navbar und einen Hero-Bereich in die Vorschau – die zehn fertigen Bootstrap-Komponenten lassen sich direkt platzieren. Der Quelltext im Editor wird dabei automatisch ergänzt.

Schritt 3: Eigenschaften im Inspector anpassen

Wähle die Hero-Komponente aus und passe im Inspector Text, Bild und Farbe an. Die Änderungen werden direkt ins HTML geschrieben – du siehst sie sofort in der Vorschau und im Quelltext.

Schritt 4: Vorschau und Viewports prüfen

Wechsle in der WYSIWYG-Vorschau zwischen den Viewports Desktop (1200), Tablet (768) und Mobile (375). Aktiviere den Edit-Mode und ändere eine Überschrift direkt in der Vorschau – der Text wird in den HTML-Quelltext zurückgeschrieben.

Schritt 5: CSS bearbeiten und Suchen & Ersetzen

Öffne die CSS-Datei des Projekts in einem zweiten Tab und passe eine Farbe an. Nutze die Suchleiste im Editor, um einen Farbwert zu suchen und alle Treffer auf einmal zu ersetzen.

Schritt 6: Lokalen Server starten

Starte den passenden lokalen Entwicklungsserver für dein Projekt (z. B. PHP oder Python http.server). Der Port wird automatisch aus dem Bereich 8100–8199 vergeben. Die Vorschau kann jetzt die Server-URL anzeigen – so prüfst du serverseitige Ausgabe statt statischem Rendering.

Schritt 7: FTP-Verbindung anlegen

Öffne den Verbindungs-Manager und lege eine FTP-Verbindung mit Host, Benutzername und Passwort an. Das Passwort wird im macOS-Schlüsselbund abgelegt, nicht im Projekt. In der FTP-Perspektive siehst du danach den Sync-Status jeder Projektdatei gegenüber dem Server.

Schritt 8: Upload und Speichern

Lade die aktive Datei per Toolbar-Button auf den Server – die Fortschrittsanzeige zeigt den Stand. Speichere dein Projekt anschließend über Ablage ▸ Speichern… (⌘S) als .axcode-Container. Beim Speichern wird das Projekt zusätzlich in den geteilten Versions-Index geschrieben und ist damit über die zentrale Suche in AnnexHub auffindbar.

Ergebnis & nächste Schritte

Du hast eine Landingpage aus fertigen Komponenten aufgebaut, lokal getestet und veröffentlicht – ohne die App zu verlassen. Als Nächstes lohnt sich ein Blick auf das KI-Chat-Panel (Code erklären, refactoren, Tests generieren), die Google-Codes für Analytics & Co. und das integrierte Terminal (Darstellung ▸ Terminal ein-/ausblenden, ⌃⌘T).

Alle Details stehen im Handbuch (docs/manuals/de/AnnexCode.md).

Shotlist (für die Screenshot-Aufnahme)