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.
(Video) Ich habe mit KI-Kunst & ChatGPT ein krasses Website Design erstellt!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.(Video) ChatGPT für Content & SEO? AI-Content die nächste Geheimwaffe?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
FAQs
Does ChatGPT give the same answers to everyone? ›
No, ChatGPT does not give the exact same answer and wording to everyone who asks the same question. While it may generate similar responses for identical or similar queries, it can also produce different responses based on the specific context, phrasing, and quality of input provided by each user.
Can ChatGPT be detected? ›Can teachers tell if you use ChatGPT? Yes, AI-detecting tools can help teachers determine whether your submitted content was human-written or AI-generated.
What is the problem with ChatGPT? ›ChatGPT has been shown to produce some terrible answers that discriminate against gender, race, and minority groups, something which the company is trying to mitigate. One way to explain this issue is to point to the data as the problem, blaming humanity for the biases that are embedded on the internet and beyond.
How do you know if my students are using ChatGPT? ›Another way to detect students who are using ChatGPT to write their assignments is to monitor their writing style. ChatGPT is designed to mimic human writing, but it may have distinct patterns or quirks that can be identified. Furthermore, ChatGPT is a powerful language model.
Where does ChatGPT get its information? ›ChatGPT, is trained on a large dataset of text data which comes from several sources, such as books, articles, Wikipedia and scientific journals. The text data is carefully curated to ensure that it represents a diverse range of topics and styles of writing.
Can professors tell if you use ChatGPT? ›It also won't be as effective as it seems, as professors can often detect ChatGPT essays using various methods. Plagiarism detection tools such as Turnitin and Copyscape can spot if your essay is generated by ChatGPT without any editing or citation.
Can you get caught using ChatGPT? ›Can my teacher find out if I am using ChatGPT? The quick answer is Yes. ChatGPT uses an artificial intelligence engine that has a combination of GPT-3.5 language technology that is trained to understand and generate text based on a large collection of data.
Can I copy and paste from ChatGPT? ›It's as easy as it gets! ⌨️ Keyboard Shortcuts: Use CMD+K on Mac or CTRL+K to copy ChatGPT responses 🚨 Automatically runs copied text through plagiarism detectors such as GPTZero to check if the generated text gets flagged and warns you about it! 🐙 100% Open Source!
Can we use ChatGPT for free? ›Is ChatGPT free? Yes, you can use ChatGPT for free -- for now.
Is it unethical to use ChatGPT? ›Firstly, 'Chat-GPT' is not programmed to recognize unlawful statements. This means that it is highly likely that a user may input unethical language which may then be outputted by the system.
What does ChatGPT stand for? ›
ChatGPT is an intelligent chatbot that helps automate chat tasks. Its name is the acronym for Chat Generative Pre-trained Transformer.
What are the pros and cons of ChatGPT? ›Pros of Chat GPT include improved natural language understanding, faster response times, and the ability to generate more natural-sounding conversations. Cons of Chat GPT include difficulty training models to respond appropriately to a wide range of topics and potential bias from the data used to train it.
How many data points does ChatGPT have? ›The viral chatbot interface is based on GPT-3, said to be one of the largest and most complex language models ever created – trained on 175 billion “parameters” (data points).
How do I know if my text was written by ChatGPT? ›You can detect Chat GPT-written text using online tools like OpenAI API Key. The tool comes from Open AI, itself, the company that made Chat GPT. It's worth noting that the app isn't perfect.
Can professors detect ChatGPT code? ›Can universities detect ChatGPT code? Whether or not universities will know if you have copied code from Chat GPT, is tricky to answer. Technically, code will not be flagged by most plagiarism detectors, so your professors may have some difficulty actually identifying what is AI-generated or not.
What percentage of students use ChatGPT? ›The survey found that 43% of college students overall say they've had experience using AI tools like ChatGPT, and half of those acknowledge turning to those tools to work on assignments or exams. This figure translates into 1 in 5 college students admitting they employ AI to complete their schoolwork.
What data does ChatGPT collect? ›Collecting user data: ChatGPT collects data from users in order to improve the chatbot's performance and provide a personalized experience. The data collected includes user input, chat history, and user preferences. This data is used to train the chatbot and improve its accuracy and responsiveness.
What are the benefits of ChatGPT? ›The biggest advantage of ChatGPT is its ability to understand natural language and have a text conversation with people. The system can answer questions about nearly any subject with authority and even understand a customer's intent.
What do college professors use to check plagiarized? ›If the work is original or all words and ideas that belong to other authors are cited, then the student will likely not be guilty of committing plagiarism. Professors use TurnItIn to ensure students submit original work.
Can canvas tell if you use ChatGPT? ›Canvas offers proctoring tools that instructors can use to monitor students during exams and detect the possible use of external sources such as ChatGPT. These tools include live proctoring, recorded proctoring, and automated proctoring.
Can a professor look through your phone? ›
Generally, they can't. Teachers have every right to seize your phone, but they have NO right to go through its contents unless you give them permission.
How do I stop ChatGPT from being detected? ›- Rewrite the following text so that it's harder to detect as coming from ChatGPT by a ChatGPT detector.
- Rewrite the following text. Write like a human, more spoken language, more line breaks.
- Paraphrase the following, use random words and rare words. Write more like a human.
For research-based written work, there are rules to follow in order not to be accused of copying/pasting or plagiarism: put text in quotes, add references and footnotes, apply citation standards, write a bibliography, etc. In order to promote copyright and intellectual property, you must indicate the sources you use.
What app can detect copy-paste? ›Plagiarism Checking
Grammarly's plagiarism checker can detect plagiarism from billions of web pages as well as from ProQuest's academic databases. Our free plagiarism check will tell you whether or not your text contains duplicate content.
Note: You can still do simple cut, copy, and paste the way you're used to, either by using the buttons on the ribbon or the keyboard shortcuts CTRL+X (Cut), CTRL+C (Copy), or CTRL+V (Paste).
How much does ChatGPT cost per month? ›Chat GPT Plus was announced at the end of January 2023 and is priced at $20 per month. At the time of writing it is available as part of a pilot plan only though, so only a select amount of users currently have access.
How long is ChatGPT free for? ›Yes, ChatGPT is unlimited in use and free to use just as long as you can access it.
What is the difference between ChatGPT and ChatGPT Plus? ›ChatGPT uses a 12-layer transformer model with 117 million parameters, while ChatGPT Plus uses a large 24-layer transformer model with 1.5 billion parameters. In other words, while ChatGPT Plus has a high ability to learn complex language patterns, it also requires more computer resources to learn and execute.
Why is ChatGPT better than Google? ›Both ChatGPT and Google utilize Natural Language Processing (NLP) to understand and respond to user queries. However, ChatGPT is designed specifically for conversational AI, making it more adept at handling complex conversations and understanding natural language inputs.
Why is ChatGPT controversial? ›What ChatGPT's controversy tells us now. The controversy around ChatGPT is an example of misplaced faith in the power of artificial intelligence. This technology will continuously disrupt tech and many industries for years to come. It will improve, simplify tasks, get content written faster, and forever change our work ...
Which AI is better than ChatGPT? ›
Expenses: Chatsonic is a better option for startups and small enterprises since it is cheaper than ChatGPT.
Why does ChatGPT need my phone number? ›ChatGPT doesn't accept VoIP (Voice over Internet Protocol) numbers, which means you'll need an active mobile number to verify your account.
Who created ChatGPT? ›ChatGPT is an artificial intelligence (AI) chatbot developed by OpenAI and released in November 2022. It is built on top of OpenAI's GPT-3.5 and GPT-4 foundational large language models (LLMs) and has been fine-tuned (an approach to transfer learning) using both supervised and reinforcement learning techniques.
What language does ChatGPT use? ›What languages is ChatGPT written in. ChatGPT is a machine learning model which is primarily written in Python. The model is implemented using the deep learning framework PyTorch, which is also written in Python.
Is chat GTP good? ›Best AI tools!
According to the developers, Chat GPT does have the potential to produce biased and harmful content. What's particularly concerning about this model is that it can deliver this content in a very convincing, plausible way. OpenAI does warn users about this before using the AI tool, however.
ChatGPT has the potential to be transformative in the business landscape. With its ability to automate routine tasks, provide real-time data analysis, support multiple languages and improve data accuracy, ChatGPT could change the way time and resources are allocated.
Which companies have blocked ChatGPT? ›JPMorgan Chase, Amazon, Verizon and Accenture staff reportedly have been barred from using ChatGPT for work. Companies are concerned sensitive information is being put into the chatbot. JPMorgan ban comes after staff were fined for speaking to clients via WhatsApp.
Which country is the most popular for ChatGPT? ›Lilienthal's rule: If you want to fit a straight-line to your data, be certain to collect only two data points. A straight line can always be made to fit through two data points. Corollary: If you are not concerned with random error in your data collection process, just collect three data points.
Is ChatGPT output unique? ›The text generated by GPT is based on patterns and associations learned from the training data, and it may include words or phrases that are similar to those used in the input. However, the output of GPT is not necessarily unique and may include repetitions or variations of the same information. How does chat Gpt work?
What is the difference between ChatGPT and ChatGPT plus? ›
ChatGPT uses a 12-layer transformer model with 117 million parameters, while ChatGPT Plus uses a large 24-layer transformer model with 1.5 billion parameters. In other words, while ChatGPT Plus has a high ability to learn complex language patterns, it also requires more computer resources to learn and execute.
How unique is ChatGPT? ›It's unique in that it has been designed specifically to help people engage in natural language conversations with their technology. Unlike most chatbots, ChatGPT uses an AI-based neural network that enables it to understand complex conversational contexts and formulate new conversations.
What are the ethical issues with ChatGPT? ›Many leading cultural commentators have voiced their concerns about the ethical implications of AI language models like Chat GPT. One of the foremost concerns is the issue of bias. AI models learn from the data they are trained on, and if this data contains biases, the AI may inadvertently perpetuate them.
What is the benefit of ChatGPT Plus? ›ChatGPT Plus is now available for $20 a month. It offers a number of key benefits, including access to ChatGPT, "even during peak times," faster response times in general than previous iterations of ChatGPT and early access to "new features and improvements," according to the app's website.
Does ChatGPT Plus have a limit? ›It is currently unclear whether ChatGPT Plus subscribers have a different input limit to regular free subscribers. At the moment, it is rumored that the input limit for ChatGPT is around 4,000 tokens or around 3,000 words. Once you exceed this, you will have to start a new chat thread with the bot.
Is ChatGPT Plus more accurate? ›OpenAI's ChatGPT Plus is a convincing AI chatbot that can offer excellent features and benefits compared to the basic free version of ChatGPT. Features like higher accuracy, no downtime, faster response, and more make it suitable for research papers, data analysis, customer support, and more at $20/month.
How much does ChatGPT cost? ›ChatGPT Plus is the premium version of ChatGPT, priced at $20 per month, and provides exclusive access to GPT-4, the latest version of OpenAI's disruptive software.
What is Google's answer to ChatGPT? ›Google just launched Bard, its answer to ChatGPT—and it wants you to make it better. Under pressure from its rivals, Google is updating the way we look for information by introducing a sidekick to its search engine. Google has launched Bard, the search giant's answer to OpenAI's ChatGPT and Microsoft's Bing Chat.
Is ChatGPT safe to use for school? ›But when asked to answer the same question on its own, ChatGPT offered this more measured warning: “As a general rule, it is not appropriate to use ChatGPT or any other automated writing tool for school papers, as it is considered cheating and does not benefit the student in the long run.”
Which company are using ChatGPT? ›Companies like Salesforce , Air India, Duolingo, and others use ChatGP- powered tools in their businesses.
Is ChatGPT free? ›
Is ChatGPT free to use? Yes, the basic version of ChatGPT is completely free to use.