To build the portfolio website, we’re going to go to ChatGPT and set something known as custom instructions.
This is a feature that lets you enter a bunch of information into ChatGPT one time. ChatGPT will retain these instructions and apply them to all your future conversations.
Custom instructions can dramatically improve the quality and accuracy of ChatGPT’s responses.
To access custom instructions, simply select your profile at the bottom-left corner of the screen. Then, choose “Customize ChatGPT,” and you should see two fields that look like this:
Field 1: Personal Details
In the first field, you must enter details you’d like ChatGPT to remember in all your future conversations.
This can include your name, occupation, hobbies, and field of study.
Let’s leave this blank for now.
Field 2: Preferred Response Style
This field is asking about how you’d ChatGPT to respond in all your conversations.
We are going to use this field to provide ChatGPT with a framework to follow when building the website.
This way, the model will abide by these instructions every time we ask it to create a portfolio website.
Here is the custom instruction we will be entering into this field. You can find it in this document containing all the prompts for this tutorial:
Make sure to paste this in the second field of the Custom Instructions dialog box — “preferred response style”.
Here is a brief explanation of the custom instruction we’ve entered:
Provide HTML and CSS Code
Firstly, we’re asking ChatGPT to give us HTML and CSS code every time we ask it to build a website.
Bootstrap Styling
Then, we’re asking ChatGPT to use something called Bootstrap to style the website.
Bootstrap is a popular web design framework that is used to build visually appealing websites.
For example, if you want to create a “Projects” section like this:
Bootstrap has an easy grid system that lets you achieve this design in just a few lines of code.
It also ensures that the website is responsive, meaning, it should look good on different device types like a mobile phone or tablet.
Single File Format
With the third prompt, we are asking ChatGPT to give us all the code — HTML and CSS in a single file.
This is because I didn’t want any confusion with having to switch between different code files, I wanted to keep it simple.
Clear Guidance
Finally, I am telling ChatGPT that we’re beginners to web design and don’t know HTML and CSS.
I am asking it to provide us with clear guidance as to where to paste the code and how to proceed each time.
Make sure to save your changes to these custom instructions, and we can proceed to actually building the website.
Let’s now build the first section of the website — “About.”
To create this section, please upload the following image and enter the below prompt to ChatGPT:
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.
If you don’t have access to the image upload feature and are using the free version of ChatGPT, please find an alternative prompt at this link. Also, replace the image path I’ve included with your own.
In my case, ChatGPT generated the following lines of code:
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.
After copying ChatGPT-generated code into your index.html file, save your changes to the file and double click on it to open it in browser. You should see an “About” section appear, which looks like this:
Here is the image and prompt we will be using to build the “Projects” section of the website. Note that I am including only three projects — feel free to amend the mockup image and prompt if you’d like to add more:
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.”
After entering this prompt, ChatGPT generated two separate blocks of code for me — one for HTML and another for 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.
Project 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed nisl erat. Sed et purus ornare, eleifend tellus ut, fermentum arcu.
Project 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed nisl erat. Sed et purus ornare, eleifend tellus ut, fermentum arcu.
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 also gave me detailed instructions as to where to paste this code. The HTML code, according to ChatGPT, should be pasted right after the closing