05 AI for Layout

using artificial intelligence to help you create your website, is not as straightforward as asking a simple question. It will answer in code, but you will need to know how to place the code, and how to fill it in, so it looks like the website you’re hoping to make. That said, it’s easy enough to use it to create various examples of what you are trying to work with, and can be an incredible learning aid. That’s why I’m pushing you to use AI to help you, because, if you become a better coder, and understand what this all means, because of it, that’s the answer I’m looking for. Be liberal in the the questions you ask and request corrections, to get the code you want.

ChatGPT 3.5

I’ve had some luck with ChatGPT 3.5 and 4, but it’s a mixed bag. Not everything works, and you have to know what you are doing before you can understand what does and does not work, so use it, but beware. ChatGPT 4 is better than 3.5, but I let my subscription expire, and I can’t expect everyone to spend the $20 a month on the newer version, so this uses 3.5.

Open up a CodePen and put in the HTML, CSS, and Javascript that the program provides. My recommendations is to build modular, meaning first get the general outlines working, then ask it to build smaller things. It does not do well to put the whole thing together, so I am not worried about you not leaning how to code. You have to know enough about what you are doing, to make this work.

What follows are a number of prompts. The first one is pretty lame, but I remain too general. I try to tighten it up, and make it more interesting, but as you can see, I never get beyond a simple wireframe. This may help you get started, and I think that, by looking at the code it produces, you get a better idea of how the code works, but I think, in the end, you will have to code your website yourself, maybe with some AI, but it sure will not create your website for you.

First AI Example I need a really fantastic dynamite pulsating illustration portfolio website that can sell my illustrations to all kinds of audiences, from hip to corporate. Make it magical.

See the Pen
AI#3
by onno de jong (@onno)
on CodePen.

Second AI Example Can you create a responsive illustration portfolio website using CSS grid? I would like it to have 6 sections for different styles . Please color the background of each section a different color.

See the Pen
AI#2
by onno de jong (@onno)
on CodePen.

Third AI example Can you help me create a complete web page using different layout strategies. This is for an illustration portfolio and it needs to have several sections. I would prefer if the menu were fixed or used sticky positioning, and that the sections are animated and slide from one the next when I press the menu. Make each section’s background a different color.

See the Pen
Untitled
by onno de jong (@onno)
on CodePen.


.

Comments are closed.