css-generator- was ist das genau? – Programmieren für Anfänger Informatik-studenten-coden lernen

Es ist Mitternacht, Jacky die Informatik-Studentin steigt in den tiefen Tunnel und will die Riesenspinne Lilly besuchen, da sie technische Probleme hat mit der Stylesheetsprache CSS. Die Spinne will nämlich in Visual-Studio-Code ihre eigene homepage entwickeln. Dort schreibt sie den Code rein. Lilly begrüßt Jacky und die Spinne fragt sie, ob es eine technische Möglichkeit gibt, CSS-Code automatisiert zu erzeugen. Doch geht das und wie kann es eine Hilfe sein? Denk 1 Minute darüber nach und klick dann auf Lösung.

Einfache Erklärung: Zunächst mal möchte sich die Spinne eine eigene Homepage entwickeln. Sie benötigt dazu, einen Quelltexteditor, dort schreibt sie ihren Code rein, Zeile für Zeile. Sie nimmt dafür Visual-Studio-Code und spielt sich den Live-Server drauf. Den Live-Server benötigt sie, dass sie die homepage im Browser auch anschauen kann in Visual-Studio-Code.

Um eine homepage zu machen, benötigt sie also HTML für das Grundgerüst der Webseite, das hat sie sich schon alles aufgebaut. HTML ist keine Programmiersprache sondern eine Markup-Sprache. Das ist wichtig ! Was ihr Sorgen macht, ist das CSS. CSS bedeutet, das ist die Stylesheet-Sprache. Mit dieser Sprache hat die Spinne die Möglichkeit, den Style und das Layout ihrer Webseite cool aussehen zu lassen. Das heißt, sie kann mit dieser Sprache die Farben bestimmen der Webseite, oder bestimmen, wo sollen die Bilder genau hin, oder soll die Webseite komplett schwarz sein, oder einfach im Hintergrund weiß. Das machst du alles mit der Stylesheet-Sprache CSS.

So sieht CSS aus

Diese Stylesheet -Sprache ist sehr mächtig, weil du damit das gesamte Aussehen beeinflussen kannst mit Code.

Die Spinne möchte aber wissen, ob man so kleine Teile von einem CSS-Code auch automatisiert erstellen lassen kann.

Antwort: Ja, das ist möglich, mit einem sogenannten CSS-Generator. Ein praktisches Beispiel. Die Spinne möchte wissen, wie man ein Bild an allen 4 Ecken abrundet, dann geht sie in den CSS-Generartor und schaut dort nach dem Begriff „Border-Radius“ und kann das Vorschaubild dann so einstellen wie sie es möchte. Gleichzeitig wird ihr parallel der CSS-Code angezeigt dazu.

Das ist ziemlich cool. Falls du es noch nicht so richtig verstanden hast, dann schau dir dieses Video hier an, wie der CSS-Generator genau funktioniert.

Hilfe ich bin neu hier und verstehe nur Bahnhof-:)

Wenn du noch nie im Leben eine Zeile Code geschrieben hast und komplett neu bist, dann klick in den Cyberspace -Raum 2 für Anfänger. Dort findest du auch einen kompletten Lernplan, wie du z. B. in die Frontend-Entwicklung einsteigen könntest. Lade dir Visual-Studio-Code runter und lerne zunächst HTML… dann CSS…. dann Java-Script….

Video – Wie funktioniert ein CSS-Generator?