ChatGPT ist seit knapp drei Monaten öffentlich zugänglich und seitdem hat dieser Chatbot einen medialen Aufstieg geschafft, wie kaum ein anderes Tool vorher. Auch wir haben ChatGPT neulich um Rat gefragt: Safer Internet Day: Welche Tipps hat ChatGPT auf Lager?
ChatGPT kann allerdings deutlich mehr als nur Texte produzieren. Mit diesem neuen Werkzeug kannst du auch Code generieren lassen und das wollte ich für euch an einer konkreten Aufgabe testen.
Wir haben Ende Dezember ein kostenloses E-Book zum Thema HTML und CSS veröffentlicht. Mit diesem E-Book bist du in der Lage eine einfache, aber dennoch ansehnliche und funktionierende Website zu erstellen.
Daher wollte ich ChatGPT fragen, ob er nicht etwas Ähnliches für mich erstellen kann. Bevor du allerdings bei ChatGPT mit den Fragen loslegst, ist es wichtig ein paar Tipps & Tricks zu besseren Fragetechniken zu kennen, damit die Antworten auch möglichst gut und nützlich ausfallen.
Stelle dir vor, du bist ein erfahrener Frontend-Entwickler und ich würde dich bitten, eine einfache statische Website für mich zu erstellen?
Meine erste Frage an ChatGPT innerhalb des Versuchs
Die Antwort von ChatGPT fiel so aus:
Gerne, ich helfe dir gerne dabei, eine einfache statische Website zu erstellen. Bevor wir starten, würde ich gerne einige Details erfahren:
- Worum soll es auf der Website gehen?
- Welche Seiten möchtest du haben?
- Gibt es spezielle Funktionen, die du benötigst?
- Hast du bereits Design- oder Inhaltsvorstellungen?
- Möchtest du, dass die Website für Suchmaschinen optimiert ist?
Sobald ich diese Informationen habe, kann ich dir ein besseres Verständnis dafür geben, was wir brauchen, um deine Website zu erstellen. Anschließend kann ich ein Konzept und ein Design für deine Website erstellen und es in HTML, CSS und JavaScript umsetzen.
Antwort von ChatGPT auf meine Eingangsfrage
Damit die Antwort so hilfreich wie möglich ausfällt, ist es wichtig, dass ich die Frage bzw. die Anforderungen so präzise und kleinteilig wie möglich formuliere. Hier meine Frage:
Ich benötige einen einfachen One-Pager, wo ich als freier Autor meine Dienstleistungen und die letzten Arbeiten präsentieren kann. Die Website sollte auch optimiert für mobile Geräte sein. Die Seite sollte aus fünf Bereichen bestehen. Im obersten Bereich, dem Header, würde links oben ein mein Name “Alexios Barnabas” stehen, gefolgt von meiner Berufsbezeichnung “Freier Autor”. Ebenfalls im Header kommen die Links zu den einzelnen Unterpunkten: “Über mich”, “Publikationen”, Kontaktdaten”.
Im zweiten Hauptbereich (“Über mich”), der darunter folgt, kommt ein Text (bitte mit Blindtext füllen) über meine Erfahrung und Dienstleistungen. Dieser Text besteht aus einer Überschrift, 2 Absätzen und einer Auflistung.
Im dritten Hauptbereich (“Publikationen”) listest du bitte die letzten drei Publikationen von mir auf. Bestehend aus einer Unterüberschrift und einem kurzen Text.
Im vierten Haptbereich (“Kontaktdaten”) kommen die Kontaktdaten.
Darunter kommt zum Abschluss der Footer mit Copyright und den Links zu Impressum und Datenschutz.
Die Website sollte responsiv sein, die Schriftfarbe sollte dunkelgrau, aber nicht schwarz sein. Als Schrift setzt du bitte den System-Fontstack ein. Die Farbe der Verweise sollte Petrol sein. Die maximale Breite des Inhaltes sollte 960 Pixel betragen.
Meine konkreten Anforderungen an ChatGPT
Auf diese vergleichsweise langen Frage hat ChatGPT dann den folgenden HTML-Code ausgegeben:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alexios Barnabas - Freier Autor</title>
<style>
/* CSS hier einfügen */
</style>
</head>
<body>
<header>
<h1>Alexios Barnabas</h1>
<nav>
<a href="#about">Über mich</a>
<a href="#publications">Publikationen</a>
<a href="#contact">Kontakt</a>
</nav>
</header>
<main>
<section id="about">
<h2>Über mich</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget lectus vel sapien finibus facilisis. Etiam at mauris a purus tincidunt viverra. Nullam ultricies ligula eu odio blandit fringilla.</p>
<p>Donec fermentum massa eget leo mollis, vel gravida orci pulvinar. Fusce sollicitudin massa eget rhoncus dapibus. Sed condimentum, nulla a auctor consectetur, ipsum enim venenatis ipsum, vel pharetra orci tellus vel ipsum.</p>
<ul>
<li>Erstellung von Inhalten für Online- und Printmedien</li>
<li>Lektorat und Korrektorat</li>
<li>Beratung in Fragen der Content-Strategie</li>
</ul>
</section>
<section id="publications">
<h2>Publikationen</h2>
<ul>
<li>
<h3>Artikel 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget lectus vel sapien finibus facilisis.</p>
<p><a href="#">Mehr erfahren</a></p>
</li>
<li>
<h3>Artikel 2</h3>
<p>Etiam at mauris a purus tincidunt viverra. Nullam ultricies ligula eu odio blandit fringilla.</p>
<p><a href="#">Mehr erfahren</a></p>
</li>
<li>
<h3>Artikel 3</h3>
<p>Fusce sollicitudin massa eget rhoncus dapibus. Sed condimentum, nulla a auctor consectetur, ipsum enim venenatis ipsum, vel pharetra orci tellus vel ipsum.</p>
<p><a href="#">Mehr erfahren</a></p>
</li>
</ul>
</section>
<section id="contact">
<h2>Kontakt</h2>
<p>Bitte kontaktieren Sie mich per E-Mail oder Telefon:</p>
<p>E-Mail: <a href="mailto:alexios@barnabas.com">alexios@barnabas.com</a></p>
<p>Telefon: +49 123 456789</p>
</section>
</main>
<footer>
<p>© 2023 Alexios Barnabas</p>
<nav>
<a href="#">Impressum</a>
<a href="#">Datenschutz</a>
</nav>
</footer>
</body>
</html>
Im Großen und Ganzen hat ChatGPT genau das umgesetzt, worum ich ihn gebeten habe: eine einfache Website, wo ein Freiberufler sich vorstellt. Die Seite hat drei Bereiche: »Über mich«, »Publikationen«, und »Kontaktdaten«, die untereinander angeordnet sind. Interessant ist, dass ChatGPT anhand unserer Konversation gemerkt hat, dass wir Deutsch sprechen und dementsprechend auch die passende Sprachangabe im HTML-Dokument untergebracht hat: <html lang="de">.
Hinterher hat er dann im zweiten Block auch den dazugehörigen CSS-Code ausgegeben:
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: #333333;
line-height: 1.5;
margin: 0;
padding: 0;
}
header {
background-color: #ffffff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
padding: 20px;
}
h1 {
font-size: 2rem;
margin: 0;
}
nav {
display: flex;
align-items: center;
}
nav a {
color: #00788a;
text-decoration: none;
margin-left: 20px;
}
main {
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
section {
margin-bottom: 40px;
}
h2 {
font-size: 1.5rem;
margin-bottom: 20px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin-bottom: 10px;
}
a {
color: #00788a;
text-decoration: none;
}
footer {
background-color: #f7f7f7;
padding: 20px;
text-align: center;
}
Wenn du dir das Endergebnis im Browser anschaust, dann wirst du zwar einerseits feststellen, dass die Seite sehr schlicht ausschaut, aber sie ist an sich voll funktionsfähig und kann von hier aus, an eigene Bedürfnisse angepasst werden.
Wenn du mal nicht weiter kommst: ChatGPT um Hilfe fragen
ChatGPT ist nicht nur interessant, um Code generieren zu lassen. Du kannst dir von dem Chatbot auch Code erklären lassen. Nehmen wir mal folgendes Beispiel:
Kannst du mir erklären, was
ChatGPT den Code erklären lassen<meta name="viewport" content="width=device-width, initial-scale=1.0" />ist und wozu das gut ist?
Und hier die Antwort von ChatGPT:
Sicherlich, das
viewportMeta-Tag ist ein wichtiger Bestandteil von Responsive Webdesign und ermöglicht es, dass Webseiten auf mobilen Geräten korrekt dargestellt werden.Das Meta-Tag definiert den Bereich, der auf dem Bildschirm des Geräts sichtbar ist, und steuert das Zoom-Level. Durch das Hinzufügen der
viewportMeta-Tag-Zeile in den Header einer HTML-Datei können Sie die Breite des Anzeigebereichs auf die Breite des Geräts einstellen.Das
width=device-width-Attribut teilt dem Browser mit, dass die Breite der Seite auf die Breite des Geräts eingestellt werden soll. Das bedeutet, dass die Seite auf jedem Gerät mit einem unterschiedlichen Bildschirmmaßstab gleich aussehen sollte.Das
initial-scale=1.0-Attribut gibt an, dass die Seite standardmäßig mit einem Zoom-Faktor von 100% angezeigt werden soll. Wenn dasinitial-scale-Attribut nicht festgelegt ist, verwenden viele mobile Geräte einen Zoom-Faktor von etwa 0,5, um die Inhalte der Webseite zu verkleinern, damit sie auf dem Bildschirm passen.Zusammengefasst hilft das
Die Antwort von ChatGPTviewportMeta-Tag, die Breite des Anzeigebereichs auf die Breite des Geräts einzustellen und das Zoom-Level zu steuern. Durch die Verwendung des Meta-Tags können Sie sicherstellen, dass Ihre Webseite auf verschiedenen Geräten korrekt dargestellt wird und ein optimales Benutzererlebnis bietet.
Damit hast du die Möglichkeit, ChatGPT in deinen Lernprozess zu integrieren.
Fazit zu ChatGPT als Website-Generator
Wie du an diesem einfachen Beispiel gesehen hast, ist die Ausgabe von ChatGPT recht gut. Das funktioniert allerdings nur dann, wenn du vorher weißt, was du benötigst und worauf du achten sollst. Die Fragen müssen präzise und zielgerichtet sein. Hier ist es wie bei allen Werkzeugen auch. Es dauert eine Weile, bis man es halbwegs gut beherrscht.
Beim Erklären des Codes ist der konkrete Nutzen allerdings schon etwas früher da. Es kann dein nützlicher Begleiter beim Lernen sein. Falls du am Anfang der Reise bist, dann könnte die Verbindung von ChatGPT und unserem E-Book für dich eine hilfreiche Kombination sein.
Aber in allen Belangen gilt es im Hinterkopf zu behalten, dass du ChatGPT nicht blind vertrauen sollst. Du solltest dir angewöhnen, öfter mal zwischendurch die Ausgabe von ChatGPT zu überprüfen, etwa in dem du gezielt nach dem Problem in der Suchmaschine deiner Wahl suchst.
Foto von Florian Olivo auf Unsplash
Vladimir Simović
Vladimir Simović setzt seit 2000 mit HTML & CSS und seit 2004 mit WordPress Website-Projekte um. Seit Januar 2004 hat er als einer der ersten Blogger im deutschsprachigen Raum zu den WordPress Anfängen Tipps und Tricks veröffentlicht. Seit April 2022 ist er als Redakteur für den Blog-Bereich von STRATO verantwortlich und verfasst Informationsartikel insbesondere zu WordPress Themen. Im Laufe der Jahre hat er Fachbücher sowie über 60 Fachartikel publiziert und weit über hundert WordPress Projekte betreut und umgesetzt. Aktuell beschäftigt er sich mit dem Einsatz von KI im Content-Marketing.
Benjamin sagte am
Sehr interessant, danke für den Blog-Text