Zum Inhalt springen

Mit dem Starterkit Websites einfach erstellen

Das GT 1191 Starterkit ist ein vorkonfiguriertes Projekt, mit dem du im Handumdrehen Single- und Multi-Page-Websites erstellen kannst.

Das Starterkit basiert auf Parcel, einem schnellen und einfachen Build-Tool für Webanwendungen. Um das nutzen zu können, solltest du dir zunächst eine Entwicklungs­umgebung einrichten und dir Visual Studio Code installieren.

Neue Website erstellen

Um eine neue Website zu erstellen, musst du das Starterkit über Git herunterladen und in einem neuen Ordner auf deinem Computer speichern. Das geht so:

  1. Erstelle dir auf deiner Festplatte einen neuen Ordner für dein Projekt.

  2. Öffne Visual Studio Code und öffne über das Menü über Datei > Ordner öffnen den neuen Ordner.

  3. Öffne das Terminal in Visual Studio Code über das Menü Anzeige > Terminal oder Terminal > Neues Terminal.

  4. Führe im Terminal den folgenden Befehl aus, um das Starterkit herunterzuladen:

    Terminal-Fenster
    git clone --depth 1 https://github.com/HAWK-GT1191/gt1191-starterkit.git .
  5. Installiere die Abhängigkeiten des Projekts, indem du die folgenden Befehle ausführst:

    Terminal-Fenster
    corepack prepare
    yarn install
  6. Starte den Entwicklungsserver, um deine Website im Browser anzuzeigen:

    Terminal-Fenster
    yarn dev

Alle Änderungen, die du an deiner Website vornimmst, werden nun automatisch im Browser aktualisiert.

Bestehende Website bearbeiten

Nachdem du die Website eingerichtet hast, reicht es, deinen Ordner in Visual Studio Code zu öffnen folgenden Befehl ins Terminal einzugeben, um den Entwicklungsserver zu starten:

Terminal-Fenster
yarn dev

Zum Hintergrund

Das GT 1191 Starterkit wurde von David Maciejewski erstellt, er ist Dozent des Seminars GT 1191, das im Studiengang Bachelor of Arts (BA) der Fakultät Gestaltung im Kompetenzfeld Digital Environments an der HAWK Hochschule für angewandte Wissenschaft und Kunst in Hildesheim angeboten wird.

Auf der Website zum Seminar findest du haufenweise Links zur Dokumentation von HTML und CSS, Assets wie Texte, Farben, Fonts und Bilder für deine Website, sowie zahlreiche Tutorials, die dir den Einstieg in die Webentwicklung erleichtern.