{"id":6183,"date":"2024-02-22T21:34:20","date_gmt":"2024-02-22T21:34:20","guid":{"rendered":"http:\/\/b.parsons.edu\/~dejongo\/?p=6183"},"modified":"2024-02-23T16:35:16","modified_gmt":"2024-02-23T16:35:16","slug":"05-ai-for-layout","status":"publish","type":"post","link":"http:\/\/b.parsons.edu\/~dejongo\/05-ai-for-layout\/","title":{"rendered":"05 AI for Layout"},"content":{"rendered":"<p> 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\u2019re hoping to make. That said, it\u2019s 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\u2019s why I\u2019m 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\u2019s the answer I\u2019m looking for.  Be liberal in the the questions you ask and request corrections, to get the code you want.<\/p>\n<h2>ChatGPT 3.5<\/h2>\n<\/p>\n<p>I\u2019ve had some luck with ChatGPT 3.5 and 4, but it\u2019s 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\u2019t expect everyone to spend the $20 a month on the newer version, so this uses 3.5.\n<\/p>\n<p> Open up a <a href=\"https:\/\/codepen.io\/pen\/\"> CodePen<\/a> 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.\n<\/p>\n<p>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. <\/p>\n<style>\nBlockquote {font-size: 80%; padding-bottom: 20px;}\n<\/style>\n<blockquote><p><a href=\"https:\/\/chat.openai.com\/share\/9f127a7c-5785-445f-9162-696d7fd8a984\">First AI Example<\/a> 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.<\/p><\/blockquote>\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"XWGwwGE\" data-user=\"onno\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/onno\/pen\/XWGwwGE\"><br \/>\n  AI#3<\/a> by onno de jong (<a href=\"https:\/\/codepen.io\/onno\">@onno<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<blockquote><p><a href=\"https:\/\/chat.openai.com\/share\/9a162714-0f65-4610-b029-e64fa7fa891a\">Second AI Example<\/a> 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.<\/p><\/blockquote>\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"KKELLJW\" data-user=\"onno\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/onno\/pen\/KKELLJW\"><br \/>\n  AI#2<\/a> by onno de jong (<a href=\"https:\/\/codepen.io\/onno\">@onno<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<blockquote><p><a href=\"https:\/\/chat.openai.com\/share\/08056f8d-b7f2-46f7-b557-dca386d5d50b\">Third AI example<\/a> 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\u2019s background a different color.<\/p><\/blockquote>\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"abMrrYY\" data-user=\"onno\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/onno\/pen\/abMrrYY\"><br \/>\n  Untitled<\/a> by onno de jong (<a href=\"https:\/\/codepen.io\/onno\">@onno<\/a>)<br \/>\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><br \/>\n. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>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, &hellip; <a href=\"http:\/\/b.parsons.edu\/~dejongo\/05-ai-for-layout\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[11,9],"tags":[],"_links":{"self":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/6183"}],"collection":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/comments?post=6183"}],"version-history":[{"count":7,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/6183\/revisions"}],"predecessor-version":[{"id":6197,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/posts\/6183\/revisions\/6197"}],"wp:attachment":[{"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/media?parent=6183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/categories?post=6183"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/b.parsons.edu\/~dejongo\/wp-json\/wp\/v2\/tags?post=6183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}