Gemini makes webpages

Gemini Makes Webpages: I’ve been creating webpages since it became possible in the late 1990s with Geocities. However, I’ve never liked HTML coding and always relied on drag-and-drop tools. Even then, you still had to figure out the intricacies of combining different visual and text elements on a webpage. Today, your webpage also needs to be “responsive” and mobile-first >> it has to adapt to different screen sizes and aspect ratios. With Gen AI, I think the decades-old chore of designing webpages is going to be eradicated soon.

Last evening, I asked Google Gemini to research the topic of envy in the Bible. It came up with a very detailed report, but it also asked if I wanted to turn this report into a webpage or an app.

🔷 The webpage it made was a succinct summary of the report and its elements were all cleanly laid out. This could be a great supplement to a sermon on the topic, or for a Bible study session.

🔷 What was really impressive was how the webpage re-flowed on big and small displays (You can see this at the end of the video).

🔷 I then updated the color scheme from the original corporate brown to a cheery pastel blue palette. I also got Gemini to edit the HTML code so I could insert a background image for the main banner (which I borrowed from Midjourney’s library of AI images… I was too lazy to generate one.)

🔷 This website can be shared as a Google Gemini link, but I took the code and pasted it into my website ThinkTan, and it worked perfectly. You can try both links below.

⭐ This Gen AI exercise also reinforces what I’ve started to tell my workshop participants and friends: We all need to learn some basic coding, at least enough to read, understand, cut and paste code. Whether it’s HTML or Python, coding is the new language we need to learn in order to become orchestrators of Gen AI apps.

I know many of you will roll your eyes at this, but my view is that “coding literacy” will be more useful than picking up a third spoken language.

Gemini sharing linkhttps://gemini.google.com/share/2aea1a155d0c

The code when pasted on my ThinkTan sitehttps://thinktan.net/envy/