Mit ChatGPT HTML und CSS generieren lassen

Symbolbild: HTML-Quelltext

Aus eigenen Versuchen weiß ich, dass du dir mit ChatGPT Code generieren lassen kannst. Wie gut er ist, ist von der Qualität der Frage, von der Problemstellung und von der Sprache abhängig. Heute wollte ich mir an ein paar Beispiele, die Qualität des generierten HTML- und CSS-Codes anschauen.

Einfaches HTML-Grundgerüst

An ChatGPT habe ich folgende Aufgabe gestellt: “Erstelle mir ein modernes Grundgerüst eines HTML-Dokuments”. Ausgegeben hat ChatGPT Folgendes:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Title</title>
  </head>
  <body>
    <!-- Page content goes here -->
  </body>
</html>

Das ist richtig. Das ist ein minimales Grundgerüst eines HTML-Dokuments. Das hat prima geklappt, war aber eine sehr einfache Aufgabe. ✅

CSS: Mit Flexbox Boxen horizontal anordnen

An ChatGPT habe ich folgende Frage gestellt: “Ich möchte drei Boxen horizontal anordnen, wie würde der CSS-Code dafür aussehen? Nutze Flexbox.” Das hier war die CSS-Ausgabe:

.container {
  display: flex;
  justify-content: space-between;
}

.box {
  width: 30%;
  height: 200px;
}

Und das hier war die HTML-Ausgabe:

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Die Ausgabe ist richtig und es funktioniert. Ohne Schnickschnack und auf das notwendigste reduziert. ✅

Einfaches Layout mit CSS-Grids

Das waren bis jetzt zwei einfache Fragen. Mal schauen, wie ChatGPT mit CSS-Grids umgehen kann. Hier die Frage:

“Ich würde gerne eine statische Seite nur mit HTML und CSS erstellen. Ich bräuchte ein Layout mit CSS-Grids: oben der Header, der über die gesamte Breite geht, darunter die horizontale Navigation, ebenfalls in voller Breite. Darunter kommt der Mittelbereich, der aus zwei Unterbereichen besteht: links der größere Inhaltsbereich (75 % der Breite) und rechts die Sidebar. Unterhalb des Mittelbereiches kommt der Footer in voller Breite. Das Layout sollte responsive sein.”

Hier die HTML-Ausgabe von ChatGPT:

<div class="grid-container">
  <header class="header">Header</header>
  <nav class="nav">Navigation</nav>
  <main class="main">
    <section class="content">Main Content</section>
    <aside class="sidebar">Sidebar</aside>
  </main>
  <footer class="footer">Footer</footer>
</div>

Und hier der CSS-Code:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas: "header header" "nav nav" "main main" "footer footer";
  height: 100vh;
}

.header {
  grid-area: header;
  background-color: lightblue;
}

.nav {
  grid-area: nav;
  background-color: lightgray;
}

.main {
  grid-area: main;
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.content {
  grid-column: 1 / 2;
  background-color: lightgreen;
}

.sidebar {
  grid-column: 2 / 3;
  background-color: lightyellow;
}

.footer {
  grid-area: footer;
  background-color: lightcoral;
}

@media (max-width: 700px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "main" "footer";
  }
  
  .main {
    grid-template-columns: 1fr;
  }
}

Das sieht schon mal gut aus und fast ist man geneigt ChatGPT zu loben. Wenn man aber den Code ausprobiert, dann wird man feststellen, dass es einen kleinen Schönheitsfehler gibt. Die entsprechende Stelle im CSS-Code habe ich hervorgehoben. Ich habe den Code auf CodePen eingefügt und dort kannst du den Fehler erkennen. Anstatt 75 Prozent für den Inhaltsbereich und 25 Prozent für die Sidebar, hat der Bot einfach das umgedreht.

Das ist zwar einerseits nicht richtig, aber deswegen die ganze Aufgabe als falsch zu deklarieren, wäre jammern auf einem ganz hohen Niveau. Daher würde ich auch hier wohlwollend einen Haken davor setzen. ✅

Ein bisschen Bewegung mit CSS

Dann versuchen wir es mit einem Beispiel, das etwas ausgefallener ist. Mit CSS kannst du Boxen und Objekte verschieben und auch drehen. Folgende Aufgabe habe ich an ChatGPT gestellt:

“In einem HTML-Dokument gibt es eine grüne Box, die 200 × 200 Pixel groß ist. Wenn ich mit dem Maus-Cursor darüber gehe, soll sich Box 30 Pixel nach rechts verschieben und dabei in einer sanften Bewegung um 90° nach rechts drehen. Nutze dafür nur HTML und CSS.”

Hier zuerst der HTML- und anschließend der CSS-Code:

<div class="green-box"></div>
 .green-box {
  width: 200px;
  height: 200px;
  background-color: green;
  transition: all 0.5s ease-out;
}

.green-box:hover {
  transform: translateX(30px) rotate(90deg);
}

Das Beispiel funktioniert einwandfrei, wie du auf diesem CodePen gut erkennen kannst. Auch hier können wir es als erledigt abhaken. ✅

Fazit zu HTML und CSS aus ChatGPT

Das waren lediglich vier Aufgaben, aber ChatGPT hat sie recht souverän umgesetzt. Gut, in der 3. Aufgabe musste man einen Zahlendreher korrigieren, aber das ist zu verschmerzen. Sicherlich, ich hätte das Ganze auch durch Googeln herausfinden können. Aber es macht doch etwas mehr Spaß, mit ChatGPT zu arbeiten. Es fühlt sich zum einen eher wie ein Gespräch an. Zum anderen, ist es zumindest bei mir so, dass wenn ich mir Gedanken mache, wie ich die Frage eintippe, ich ein Problem viel konkreter eingrenzen kann, als wenn ich Google bemühe.

Klar, noch hat die Google Suche die Nase vorn, und zwar bei Weitem. Aber das Gesprächs-Konzept von ChatGPT hat mehr Charme und könnte mittelfristig doch problematisch für Google werden.

Ich werde mir dann in den nächsten Tagen auch die Qualität des Codes in anderen Bereichen anschauen. Speziell in Bezug auf WordPress.

Image(s) licensed by Ingram Image/adpic.

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

3 Kommentare

    1. Als Webworker der ersten Stunde des WWW sehe ich mit dem überaus strunzdummen, aber blind gehypten ChatGPT den 2. großen Anschlag auf den schönsten Beruf der Welt, auf den Webdesigner:
      Denn nachdem Mr. Mullenweg’s Strategie, diese Leute mit FSE usw. obsolet zu machen, scheitern wird, wird man bald Websites aus der ChatGPT Retorte sehen müssen …

      Gute N8, WWW …

      1. Dann kannst Du mir sicher sagen, ob 1fr 1 frame bedeutet?
        Und dann:
        ChatGP gibt doch nur wieder was ihr schon geleistet habt, Routineaufgaben können damit schneller erledigt werden, deren Ergebnisse kontrollierbar sind. Wichtig ist doch dann sich neuen Aufgaben widmen, wer und wie kontrollieren wir denn, ob die Ergebnisse richtig sind?
        Bei Texten fehlen am Ende die Quellenangaben, damit die Ergebnisse nachprüfbar sind! Wer glaubt da wem noch, wenn z.B. die Texte nur phantasieren, statt Fakten zu liefern? Wissenschaft und ihre Überprüfbarkeit ist ein ausgehandelter Codex der Weltgemeinschaft. Das ist bisher nicht machbar in Chat GP! Ich denke da liegt auch eine grosse Verantwortung für die Edition sich solchen Kriterien anzunähern.

        Bei der Entwicklung der Webseite sieht man am Ergebnis, ob das stimmt, aber da sind sicherlich noch viele Herausforderungen möglich.
        Ich bin auf den nächsten NL von perun gespannt.

Schreibe einen Kommentar zu Claudia Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert