GT 1191 Starterkit

Mit dem Starterkit für Single- und Multi-Page-Websites sparst du bei der Erstellung viel Zeit und kannst dich aufs Lernen konzentrieren.

Die Entwicklung einer modernen Website erfordert viele Einzelschritte. Ein Bild, das auf allen Endgeräten gut aussieht und Ladezeiten reduziert, muss dafür in mehreren Größen vorliegen. Dessen Erstellung ist in der Regel ein Ping-Pong-Spiel zwischen Bildbearbeitung und Website-Entwicklung. Das Starterkit nimmt dir diese und viele anderen Aufgaben ab.

Zum Starterkit

Mit dem Starterkit arbeiten

Folge bitte vorab der Installationsanleitung. Erfüllt dein Computer danach die Vorraussetzungen, lege dir ein Verzeichnis für deine neue Website an. Öffne dieses anschließend in Visual Studio Code über Datei > Ordner öffnen und gebe nun im Terminal – das erreichst du über Anzeigen > Terminal anzeigen – folgenden Befehl ein:

git clone --depth 1 https://github.com/HAWK-GT1191/gt1191-starterkit.git .

Dieser Befehl kopiert dir die Dateien des Starterkits in dein Verzeichnis.

Installiere nun einmalig das Starterkit:

yarn install

Die Installation ist vergleichbar mit dem entpacken einer ZIP-Datei.

Mit dem folgenden Befehlt wird ein Webserver gestartet, der die vorkonfigurierte Website im Browser öffnet.

yarn dev

Den Prozess kannst du mit CTL+C bzw. CMD+C beenden.

Hintergründe und Alternativen

Das Starterkit basiert in der aktuellen Version auf dem Build-Tool Parcel und dem Bildkonverrter Sharp. Diese Kombination hatte in der Vergangenheit auf manchen Rechnern nicht funkioniert.

Wenn das bei dir der Fall ist, oder du nach einer Lösung suchst, die etwas simpler aufgebaut ist, kannst du Sass direkt im Terminal ausführen, oder das GT 1191 Starterkit Mini nutzen.

Starterkit Mini

Das GT 1191 Starterkit Mini wandelt SCSS in CSS um, startet mit BrowserSync einen Server und öffnet deine Website im Browser. Optimierte Bilder und andere Features sind nicht enthalten.

Sass ohne Starterkit

Auch ohne Starterkit kannst du Sass nutzen. Der folgende Befehl wandelt die Datei src/styles.scss in CSS um und speichert diese in public/styles.css:

sass --watch src/styles.scss:public/styles.css

Es gibt in Visual Studio Code auch Extensions, die das automatisieren. Diese verwenden in der Regel allerdings veraltete Versionen von Sass und sind daher nicht zu empfehlen.