Um die Portfolio-Website zu erstellen, gehen wir zu chatgpt und legen etwas namens fest individuelle Anweisungen.
Dies ist eine Funktion, mit der Sie eine Reihe von Informationen einmalig in ChatGPT eingeben können. ChatGPT behält diese Anweisungen und wendet sie auf alle Ihre zukünftigen Gespräche an.
Benutzerdefinierte Anweisungen können die Qualität und Genauigkeit der Antworten von ChatGPT erheblich verbessern.
Um auf benutzerdefinierte Anweisungen zuzugreifen, wählen Sie einfach Ihr Profil in der unteren linken Ecke des Bildschirms aus. Wählen Sie dann „ChatGPT anpassen“ und Sie sollten zwei Felder sehen, die so aussehen:
Feld 1: Persönliche Daten
Im ersten Feld müssen Sie Details eingeben, die ChatGPT bei all Ihren zukünftigen Gesprächen speichern soll.
Dazu können Ihr Name, Ihr Beruf, Ihre Hobbys und Ihr Studienfach gehören.
Lassen wir das vorerst leer.
Feld 2: Bevorzugter Antwortstil
In diesem Feld werden Sie gefragt, wie ChatGPT in all Ihren Gesprächen reagieren soll.
Wir werden dieses Feld verwenden, um ChatGPT ein Framework bereitzustellen, das beim Erstellen der Website befolgt werden kann.
Auf diese Weise befolgt das Modell diese Anweisungen jedes Mal, wenn wir es zum Erstellen einer Portfolio-Website auffordern.
Hier ist die benutzerdefinierte Anweisung, die wir in dieses Feld eingeben werden. Sie finden es in google.com/file/d/1dOfywO4xQlT_NirgyzLO2inFgrnNzOBM/view?usp=sharing” rel=”noopener ugc nofollow” target=”_blank”>dieses Dokument enthält alle Eingabeaufforderungen für dieses Tutorial:
Stellen Sie sicher, dass Sie dies in das zweite Feld des Dialogfelds „Benutzerdefinierte Anweisungen“ einfügen – „bevorzugter Antwortstil“.
Hier ist eine kurze Erläuterung der von uns eingegebenen benutzerdefinierten Anweisung:
Stellen Sie HTML- und CSS-Code bereit
Erstens bitten wir ChatGPT jedes Mal, uns HTML- und CSS-Code zur Verfügung zu stellen, wenn wir es zum Erstellen einer Website auffordern.
Bootstrap-Styling
Dann,Wir bitten ChatGPT, etwas namens zu verwenden Bootstrap um die Website zu gestalten.
Bootstrap ist ein beliebtes Webdesign-Framework, das zum Erstellen optisch ansprechender Websites verwendet wird.
Wenn Sie beispielsweise einen Abschnitt „Projekte“ wie diesen erstellen möchten:
Bootstrap verfügt über ein einfaches Rastersystem, mit dem Sie dieses Design in nur wenigen Codezeilen erstellen können.
Es stellt außerdem sicher, dass die Website responsiv ist, das heißt, sie sollte auf verschiedenen Gerätetypen wie einem Mobiltelefon oder Tablet gut aussehen.
Einzelnes Dateiformat
Mit der dritten Eingabeaufforderung bitten wir ChatGPT, uns den gesamten Code – HTML und CSS – in einer einzigen Datei zur Verfügung zu stellen.
Das liegt daran, dass ich keine Verwirrung durch den Wechsel zwischen verschiedenen Codedateien haben wollte, sondern es einfach halten wollte.
Klare Anleitung
Abschließend sage ich ChatGPT, dass wir Anfänger im Webdesign sind und weder HTML noch CSS kennen.
Ich bitte darum, uns jeweils eine klare Anleitung zu geben, wo der Code eingefügt werden soll und wie vorzugehen ist.
Stellen Sie sicher, dass Sie Ihre Änderungen an diesen benutzerdefinierten Anweisungen speichern, damit wir mit der eigentlichen Erstellung der Website fortfahren können.
Lassen Sie uns nun den ersten Abschnitt der Website erstellen – „Info“.
Um diesen Abschnitt zu erstellen, laden Sie bitte das folgende Bild hoch und geben Sie die folgende Eingabeaufforderung in ChatGPT ein:
Generate code for the "About" section of my portfolio website.
Please structure the website to look like the uploaded image,
and include a placeholder for a personal picture.
Reference the picture as "images/about/1.jpg" within the code.
Wenn Sie keinen Zugriff auf die Funktion zum Hochladen von Bildern haben und die kostenlose Version von ChatGPT verwenden, finden Sie eine alternative Eingabeaufforderung unter Das Verknüpfung. Ersetzen Sie außerdem den von mir angegebenen Bildpfad durch Ihren eigenen.
In meinem Fall hat ChatGPT die folgenden Codezeilen generiert:
About
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet dolor dolor. Suspendisse ligula elit, hendrerit ut bibendum quis, facilisis vitae est. Vivamus vitae felis sit amet sem rhoncus euismod. Praesent commodo lorem porttitor. Nam in condimentum ex. Nam accumsan nisi turpis, sed tempus dolor volutpat non. Proin id enim feugiat ipsum consectetur mattis. Nam blandit venenatis nisi, convallis imperdiet nisi condimentum at.
Duis convallis ligula sed pretium tristique. Duis nunc risus, lacinia eget cursus id, suscipit ac metus. Sed varius sed tortor congue aliquam. In in dapibus diam, in auctor purus. Praesent vitae tristique diam. Donec tincidunt hendrerit tortor, vitae lobortis purus rutrum sit amet. Nunc non arcu vitae leo rhoncus tincidunt vel sed urna. Sed sed efficitur dui. Morbi id velit nisi. Fusce luctus placerat purus eu cursus.
Nachdem Sie den von ChatGPT generierten Code in Ihr kopiert haben index.html Speichern Sie Ihre Änderungen an der Datei und doppelklicken Sie darauf, um sie im Browser zu öffnen. Es sollte ein Abschnitt „Über“ angezeigt werden, der wie folgt aussieht:
Hier ist das Bild und die Eingabeaufforderung, die wir zum Erstellen des Abschnitts „Projekte“ der Website verwenden werden. Beachten Sie, dass ich nur drei Projekte einbeziehe. Sie können das Modellbild gerne ändern und fragen, ob Sie weitere hinzufügen möchten:
Following the "About" section, please generate code for a "Projects" section as displayed in the uploaded image. Please structure this using Bootstrap's card layout. The projects should use images named "images/projects/1.jpg," "images/projects/2.jpg," and
"images/projects/3.jpg."
Nachdem ich diese Eingabeaufforderung eingegeben hatte, generierte ChatGPT zwei separate Codeblöcke für mich – einen für HTML und einen anderen für CSS:
HTML
Projects
Project 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed nisl erat. Sed et purus ornare, eleifend tellus ut, fermentum arcu.
Blog Post
Source Code
Project 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed nisl erat. Sed et purus ornare, eleifend tellus ut, fermentum arcu.
Blog Post
Source Code
Project 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed nisl erat. Sed et purus ornare, eleifend tellus ut, fermentum arcu.
Blog Post
Source Code
CSS
/* Additional CSS for Projects Section */
.projects-section h2 {
margin-bottom: 40px;
font-size: 2.5rem;
}
.card {
box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Adds a subtle shadow around the card */
}
.card-img-top {
max-height: 180px; /* Adjust this value to fit the image properly in the card */
object-fit: cover; /* This makes sure the image covers the area properly */
}
.card-body {
padding: 15px;
}
.card-title {
font-size: 1.25rem;
}
.card-text {
margin-bottom: 15px;
}
ChatGPT gab mir auch detaillierte Anweisungen, wo ich diesen Code einfügen muss. Der HTML-Code sollte laut ChatGPT direkt nach dem Schließen eingefügt werden Tag des About-Abschnitts. Das CSS sollte unmittelbar vor dem Schließen eingefügt werden Etikett.
Nachdem Sie den Code in Ihr HTML-Dokument eingefügt haben, sollte auf Ihrer Webseite ein Abschnitt „Projekte“ angezeigt werden, der dem unten angezeigten ähnelt:
Jetzt können wir den Abschnitt „Fähigkeiten“ ausbauen, in dem wir relevante technische Fähigkeiten und Soft Skills hervorheben, die wir mitbringen.
Hier ist das Modellbild und die Eingabeaufforderung, die wir in ChatGPT eingeben werden:
Please generate code for a “Skills” section that will follow the
“Projects” section. The layout should match the uploaded mockup image.
Use Bootstrap’s grid system to achieve this. The icons for the skills should
be referenced as “images/skills/1.png”, “images/skills/2.png”,
“images/skills/3.png”, “images/skills/4.png.”
Auch hier hat ChatGPT für mich zwei separate HTML- und CSS-Codeblöcke generiert:
HTML
Skills
Python
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed nisl erat. Sed et purus ornare, eleifend tellus ut, fermentum arcu.
Link to course or bootcamp
Data Visualization
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed nisl erat. Sed et purus ornare, eleifend tellus ut, fermentum arcu.
Link to course or bootcamp
SQL
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed nisl erat. Sed et purus ornare, eleifend tellus ut, fermentum arcu.
Link to course or bootcamp
Data Storytelling
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed nisl erat. Sed et purus ornare, eleifend tellus ut, fermentum arcu.
Link to course or bootcamp
CSS
/* Additional CSS for Skills Section */
.skills-section h2 {
margin-bottom: 40px;
font-size: 2.5rem;
}
.skills-section .card {
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.skills-section .card-img-top {
padding: 20px; /* Add padding around your images if needed */
background-color: #f8f9fa; /* Adjust the background color if your images have transparent areas */
height: 180px; /* Fixed height for consistency */
object-fit: contain; /* This will make sure the image is scaled properly within the container */
}
.skills-section .card-body {
padding: 15px;
}
.skills-section .card-title {
font-size: 1.25rem;
margin-bottom: 15px;
}
.skills-section .btn-outline-primary {
color: #007bff;
border-color: #007bff;
}
.skills-section .btn-outline-primary:hover {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
Nachdem Sie den obigen Code eingefügt und Ihre HTML-Webseite aktualisiert haben, sollte ein Abschnitt „Fähigkeiten“ angezeigt werden, der wie folgt aussieht:
Lassen Sie uns nun einen „Kontakt“-Bereich für die Website erstellen.
Hier fügen wir Kontaktinformationen wie unsere Telefonnummern und E-Mail-Adressen hinzu.
Wir können auch Links zu Plattformen wie LinkedIn und GitHub einfügen, damit Arbeitgeber sich problemlos an uns wenden können, um nach Möglichkeiten zu suchen.
Hier ist ein Modellbild und eine Aufforderung zum Erstellen dieses Abschnitts mit ChatGPT:
Please generate code for a “Contact Me” section to be placed following
the “Skills” section on my portfolio website. It should visually match the
uploaded mockup image. Ensure that the icons for the platforms are referenced
as “icons/linkedin.png”, “icons/twitter.png”, “icons/github.png”,
“icons/medium.png”, “icons/youtube.png.”
Hier ist der Code, den ChatGPT generiert hat, nachdem ich das obige Bild und die Eingabeaufforderung eingegeben habe:
HTML
LinkedIn
Twitter
GitHub
Medium
YouTube
CSS
/* Additional CSS for Contact Section */
.contact-section {
padding: 50px 0;
}
.contact-section h2 {
font-size: 2.5rem;
margin-bottom: 40px;
}
.contact-section p {
font-size: 1.2rem;
margin-bottom: 20px;
}
.social-icon {
width: 50px; /* Size of your icons */
margin-bottom: 10px;
}
/* Hover effect for icons */
.social-icon:hover {
opacity: 0.7;
}
/* Style for links in the Contact section */
.contact-section a {
color: #fff;
text-decoration: none; /* Removes underline from links */
display: inline-block; /* Allows for margin on the bottom */
margin-bottom: 10px;
}
.contact-section a:hover {
color: #ddd; /* Color when hovering over the link */
}
Nachdem Sie den obigen Code in Ihr HTML-Dokument eingefügt und Ihre Webseite aktualisiert haben, sollte ein Abschnitt „Kontaktieren Sie mich“ angezeigt werden, der wie folgt aussieht:
Beachten Sie, dass die hier angezeigten Links nicht funktionieren, da Sie sie zu Ihren relevanten Social-Media-Handles umleiten müssen.
Navigieren Sie dazu zum Abschnitt „Kontakt“ im index.html Datei und ersetzen Sie die URLs in jeder Zeile durch a href Attribut, wie zum Beispiel dieses:
Abschließend erstellen wir eine Navigationsleiste für diese Portfolio-Website.
Dies sind Leisten, die sich normalerweise oben auf Websites befinden. Wenn Sie darauf klicken, werden Sie zu verschiedenen Stellen auf der Website weitergeleitet.
Geben Sie diese Eingabeaufforderung in ChatGPT ein, um die Navigationsleiste zu erstellen (wir werden für diesen Abschnitt kein Modellbild hochladen):
Please provide HTML and CSS code for a sticky navigation bar to be placed at the top of my portfolio website.
It should remain at the top of the page as the user scrolls down, and must include the following links:
Home (which will take the user back to the top of the page)
About (which scrolls to the About section)
Projects (which scrolls to the Projects section)
Skills (which scrolls to the Skills section)
Contact (which scrolls to the Contact section)
Hier ist der Code, den ChatGPT als Antwort auf diese Eingabeaufforderung generiert hat:
HTML
CSS
/* CSS for Sticky Navbar */
.navbar {
box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Adds a shadow for depth */
}/* Ensure padding is added to body to avoid content being hidden behind the navbar */
body {
padding-top: 56px; /* Adjust this value based on the height of your navbar */
}
/* Smooth scroll */
html {
scroll-behavior: smooth;
}
/* Style for navigation bar links */
.navbar-nav .nav-link {
color: white;
}
.navbar-nav .nav-link:hover {
color: #f8f9fa; /* Slightly lighter white when hovering over links */
}
/* Media query for responsive navbar collapsing */
@media (max-width: 992px) {
.navbar-collapse {
background-color: #343a40; /* Same as navbar color for seamless look */
}
}
Um sicherzustellen, dass die Links in Ihrer Navigationsleiste ordnungsgemäß funktionieren, müssen Sie jedem Abschnitt der Website, der mit den Navigationslinks übereinstimmt, eine ID hinzufügen.
Navigieren Sie beispielsweise zum Abschnitt „Info“ in Ihrem HTML-Dokument und geben Sie „id=“ einum“, wie unten angezeigt:
Machen Sie dasselbe für jeden anderen Abschnitt.
Nachdem Sie Ihre Änderungen am Dokument gespeichert haben, sollte oben auf der Webseite eine Navigationsleiste wie diese angezeigt werden:
Wenn Sie auf die einzelnen Abschnitte in dieser Navigationsleiste klicken, gelangen Sie zum entsprechenden Abschnitt auf der Website.
