August 4, 2023
.svg)
Update 1. After a few days of researching and testing, I finally decided to build this website with the help of generative AI. Please do check back from time to time for the progress. I will try to document as much as I can including the prompts that I have written to generate code.
There is no intention on my part to violate any copyright in mentioning Google and using its image.
My intention for this website is to demonstrate my learning as well as the creative power of Google Bard.
Update 2 as of 7:22pm. After setting up the website, I installed a Google tag for GA4 (Google Analytics 4) to see traffic data. So far, no data yet coming through the stream. It might take at least 24 hours...or the tag might not be installed properly.
Prompt 1
create HTML and CSS code for a simple blog website with provisions for text and images. Use placeholder images and copies for the first three entries. Each entry displays a summary of the content along with the image and a read more button that when clicked will reveal the whole page.
Prompt 2
Center the content on page and justify the text.
Prompt 3
add a header with two links to the website. Justify to the left the links aligned horizontally.
Prompt 4
layout each section by threes horizontally on desktop. On mobile, the sections should appear vertically.
Prompt 5
Place black border around the image and replaced all the placeholder images with this https://theperfectroundgolf.com/placeholder-png/
Prompt 6
make the title image and body copy of each section vertical
Prompt 7
minimize the read more button to about 300 by 150 pixels and the images to 720 pixels maximum width
Prompt 8
make the read more buttons much smaller and use white over white text. Center the button and the image on page
Prompt 9
Revise read more button to have black background and white text. Reduce image size to 50%
Prompt 10
center the read more buttons on page and make the edges round. Add a little bit of shadow. Wrap each section on black bordeline.
Prompt 11
center the buttons on page
Prompt 12
remove borderline and add space between each section from the top
Prompt 13
what are fonts I can use for CSS
Prompt 14
Center Home and About on page and make button retain size no matter which screen
Prompt 15
Make image sizes 50% smaller
Create a class for the images on HTML named blog-images. Create a CSS for this class as well.
Prompt 16
Include all the blog-image HTML and CSS to the main HTML and CSS codes