{"id":640,"date":"2026-04-01T17:03:01","date_gmt":"2026-04-01T17:03:01","guid":{"rendered":"https:\/\/www.gptguides.co\/?p=640"},"modified":"2026-04-10T17:32:26","modified_gmt":"2026-04-10T17:32:26","slug":"diy-web-design-with-ai","status":"publish","type":"post","link":"https:\/\/www.gptguides.co\/hr\/diy-web-design-with-ai\/","title":{"rendered":"DIY Web Design with AI: Use AI to Write Custom HTML and CSS"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><div class=\"vc_row wpb_row vc_row-fluid\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p data-path-to-node=\"3\">Have you ever opened your own website and felt a wave of &#8220;cringe&#8221;? Maybe the colors feel uninspired, the layout is generic or half your pages still say &#8220;coming soon&#8221;. For a long time, my own site, <a href=\"https:\/\/www.gptguides.co\/\"><b data-path-to-node=\"3\" data-index-in-node=\"198\">gptguides.co<\/b><\/a>, felt exactly like that&#8230; boring and uninspired.&nbsp;I wanted to be the ultimate destination for AI and productivity, but I didn&#8217;t know how to build the vision in my head. That changed when I stopped fighting with basic WordPress editors and started using DIY web design with AI to write custom code.<\/p>\n<p data-path-to-node=\"5\">This approach isn&#8217;t going to save you time (you&#8217;re probably going to spend quite some time doing it yourself), but it\u2019s going to save you hundreds, if not thousands, of dollars in developer fees. Whether you are a total beginner or someone who knows a little HTML, AI can now act as your personal UX expert and lead developer.<\/p>\n<p data-path-to-node=\"6\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-643 size-full\" src=\"https:\/\/www.gptguides.co\/wp-content\/uploads\/2026\/04\/8.png\" alt=\"Comparing standard templates to DIY web design with AI results\" width=\"600\" height=\"337\" srcset=\"https:\/\/www.gptguides.co\/wp-content\/uploads\/2026\/04\/8.png 600w, https:\/\/www.gptguides.co\/wp-content\/uploads\/2026\/04\/8-300x169.png 300w, https:\/\/www.gptguides.co\/wp-content\/uploads\/2026\/04\/8-18x10.png 18w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<h2 data-path-to-node=\"7\"><b data-path-to-node=\"7\" data-index-in-node=\"0\">Why DIY Web Design with AI Beats Standard Templates?<\/b><\/h2>\n<p data-path-to-node=\"8\">Most people get stuck because they rely on the standard &#8220;drag-and-drop&#8221; blocks. While tools like WP Bakery or Elementor are great, they can often feel restrictive. By using the Raw HTML element in WordPress, you can paste custom code that looks exactly how you want it to.<\/p>\n<p data-path-to-node=\"9\">To start your journey into DIY web design with AI, you don&#8217;t need expensive software. All you need is:<\/p>\n<ul data-path-to-node=\"10\">\n<li>\n<p data-path-to-node=\"10,0,0\">A domain and hosting.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"10,1,0\"><a href=\"https:\/\/notepad-plus-plus.org\/\" target=\"_blank\" rel=\"noopener\"><b data-path-to-node=\"10,1,0\" data-index-in-node=\"0\">Notepad++<\/b><\/a>: A free, lightweight note-taking app that allows you to write and test code on your computer before going live.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"10,2,0\"><a href=\"https:\/\/coolors.co\/?home\" target=\"_blank\" rel=\"noopener\"><b data-path-to-node=\"10,2,0\" data-index-in-node=\"0\">Coolors.co<\/b><\/a>: A free tool to find your brand&#8217;s specific &#8220;hex codes&#8221; (e.g., #FFFFFF for white).<\/p>\n<\/li>\n<\/ul>\n<h2 data-path-to-node=\"11\"><b data-path-to-node=\"11\" data-index-in-node=\"0\">Step 1: The Strategic Prompt for DIY Web Design with AI<\/b><\/h2>\n<p data-path-to-node=\"12\">Before you write a single line of code, you need a plan. Use your AI chatbot to determine the best practices for your specific page. Ask it what a high-converting homepage should contain, and then use this specialized prompt to generate your structure.<\/p>\n<h3 data-path-to-node=\"13\"><b data-path-to-node=\"13\" data-index-in-node=\"0\">Prompt to Try<\/b><\/h3>\n<p data-path-to-node=\"14\">\u201cAct as a web designer and UX expert. Based on my brand (colors: <b data-path-to-node=\"14\" data-index-in-node=\"65\">[insert hex codes]<\/b>, style: <b data-path-to-node=\"14\" data-index-in-node=\"92\">[describe your vibe]<\/b>), create a <b data-path-to-node=\"14\" data-index-in-node=\"124\">[page, e.g. home\/about\/FAQ]<\/b> structure with sections and copy suggestions, and then generate clean HTML and CSS code with comments explaining what I can easily edit.\u201d<\/p>\n<blockquote>\n<p data-path-to-node=\"14\">If you don&#8217;t know any HTML or CSS, a great resource is <a href=\"https:\/\/www.w3schools.com\/\" target=\"_blank\" rel=\"noopener\">W3Schools<\/a>.<\/p>\n<\/blockquote>\n<h2 data-path-to-node=\"15\"><b data-path-to-node=\"15\" data-index-in-node=\"0\">Step 2: Testing Your DIY Web Design with AI Code<\/b><\/h2>\n<p data-path-to-node=\"16\">Once the AI generates your code, copy it and paste it into Notepad++. Save the file as a &#8220;.html&#8221; or Hyper Text Markup Language document.<\/p>\n<p data-path-to-node=\"17\">Now, find that file on your computer, right-click and select &#8220;Open in Browser&#8221;. You will see a live preview of your website. This allows you to play with the style and layout without breaking your actual website. If you don&#8217;t like a section, simply tell the AI what to change (or change it yourself), while reminding it to keep the parts you do like.<\/p>\n<h2 data-path-to-node=\"18\"><b data-path-to-node=\"18\" data-index-in-node=\"0\">Step 3: Mastering the Basics of Custom Code<\/b><\/h2>\n<p data-path-to-node=\"19\">You don&#8217;t need to be a programmer, but knowing where to look in the code makes the process much faster.<\/p>\n<h3 data-path-to-node=\"20\"><b data-path-to-node=\"20\" data-index-in-node=\"0\">Quick Guide to Editing HTML<\/b><\/h3>\n<ul data-path-to-node=\"21\">\n<li>\n<p data-path-to-node=\"21,0,0\"><b data-path-to-node=\"21,0,0\" data-index-in-node=\"0\">Text content<\/b> \u2192 Look inside the <code data-path-to-node=\"21,0,0\" data-index-in-node=\"31\">&lt;body&gt;<\/code> section; this is the text that actually shows up on your page. The text that actually appears on the site is usually black (the rest of the code can be red, blue, purple or green).<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"21,1,0\"><b data-path-to-node=\"21,1,0\" data-index-in-node=\"0\">Links<\/b> \u2192 Edit the URL found inside <code data-path-to-node=\"21,1,0\" data-index-in-node=\"34\">&lt;a href=\"your-link-here\"&gt;<\/code>.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"21,2,0\"><b data-path-to-node=\"21,2,0\" data-index-in-node=\"0\">Images<\/b> \u2192 Change the source URL inside <code data-path-to-node=\"21,2,0\" data-index-in-node=\"38\">&lt;img src=\"image-link-here\"&gt;<\/code>. Tip: Upload your image to your WordPress Media library first to get the URL. Once you upload it, click on it and find the URL on the right.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"21,3,0\"><b data-path-to-node=\"21,3,0\" data-index-in-node=\"0\">Colors &amp; design<\/b> \u2192 Adjust values inside the <code data-path-to-node=\"21,3,0\" data-index-in-node=\"43\">&lt;style&gt;<\/code> section. Look for hex codes like #000000.<\/p>\n<\/li>\n<li>\n<p data-path-to-node=\"21,4,0\"><b data-path-to-node=\"21,4,0\" data-index-in-node=\"0\">Sections\/layout<\/b> \u2192 Look for structural tags like <code data-path-to-node=\"21,4,0\" data-index-in-node=\"48\">&lt;div&gt;<\/code>, <code data-path-to-node=\"21,4,0\" data-index-in-node=\"55\">&lt;section&gt;<\/code>, <code data-path-to-node=\"21,4,0\" data-index-in-node=\"66\">&lt;header&gt;<\/code>, or <code data-path-to-node=\"21,4,0\" data-index-in-node=\"79\">&lt;footer&gt;<\/code>.<\/p>\n<\/li>\n<\/ul>\n<blockquote data-path-to-node=\"22\">\n<p data-path-to-node=\"22,0\"><b data-path-to-node=\"22,0\" data-index-in-node=\"0\">&#x1f4a1; Tip:<\/b> If you\u2019re unsure what something does, change it slightly in Notepad++, save and refresh your browser page to see the result.<\/p>\n<\/blockquote>\n<figure id=\"attachment_642\" aria-describedby=\"caption-attachment-642\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-642 size-full\" src=\"https:\/\/www.gptguides.co\/wp-content\/uploads\/2026\/04\/7.png\" alt=\"How to edit HTML code for DIY web design with AI\" width=\"600\" height=\"337\" srcset=\"https:\/\/www.gptguides.co\/wp-content\/uploads\/2026\/04\/7.png 600w, https:\/\/www.gptguides.co\/wp-content\/uploads\/2026\/04\/7-300x169.png 300w, https:\/\/www.gptguides.co\/wp-content\/uploads\/2026\/04\/7-18x10.png 18w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><figcaption id=\"caption-attachment-642\" class=\"wp-caption-text\">Notepad ++ interface<\/figcaption><\/figure>\n<h2 data-path-to-node=\"24\"><b data-path-to-node=\"24\" data-index-in-node=\"0\">Step 4: Going Live with Your Custom AI Site<\/b><\/h2>\n<p data-path-to-node=\"25\">When your code is ready, go to your WordPress dashboard and add a new page. Add a &#8220;Raw HTML&#8221; element and paste your entire block of code.<\/p>\n<p data-path-to-node=\"26\">I used this exact method to build my <a href=\"https:\/\/www.gptguides.co\/tools-library\/\" target=\"_blank\" rel=\"noopener\"><b data-path-to-node=\"26\" data-index-in-node=\"37\">Tools Library<\/b><\/a>. Because I used custom code, I was able to include advanced JavaScript features like search bars and collapsing dropdown menus that a standard template simply couldn&#8217;t handle. I basically built my entire website that way, but the Tools Library just has to be my favourite!<\/p>\n<h2 data-path-to-node=\"27\"><b data-path-to-node=\"27\" data-index-in-node=\"0\">Conclusion: Launching Your DIY Web Design with AI<\/b><\/h2>\n<p data-path-to-node=\"28\"><b data-path-to-node=\"28\" data-index-in-node=\"0\">DIY web design with AI<\/b> is about empowerment. It turns your website from a generic placeholder into a professional asset that truly represents your brand. Plus, you\u2019ll learn a valuable new skill along the way.<\/p>\n<p data-path-to-node=\"29\"><b data-path-to-node=\"29\" data-index-in-node=\"0\">Want to see the results?<\/b> Visit my <a href=\"https:\/\/www.gptguides.co\/tools-library\/\" target=\"_blank\" rel=\"noopener\"><b data-path-to-node=\"29\" data-index-in-node=\"34\">Tools Library <\/b><\/a>to see how custom HTML and CSS transformed my site.<\/p>\n<p data-path-to-node=\"30\"><b data-path-to-node=\"30\" data-index-in-node=\"0\">Are you ready to stop cringing at your homepage?<\/b> Grab your hex codes and try the prompt above! If you get stuck or want to work on your website together, send me <a href=\"https:\/\/www.gptguides.co\/contact-me\/\" target=\"_blank\" rel=\"noopener\">an email<\/a> or DM me on Instagram <b data-path-to-node=\"30\" data-index-in-node=\"193\">@GPTGuides<\/b>.<\/p>\n<h2 data-path-to-node=\"0\"><b data-path-to-node=\"0\" data-index-in-node=\"0\">FAQ: Mastering DIY Web Design with AI<\/b><\/h2>\n<h3 data-path-to-node=\"2\"><b data-path-to-node=\"2\" data-index-in-node=\"0\">How does DIY web design with AI save money for small businesses?<\/b><\/h3>\n<p data-path-to-node=\"2\">DIY web design with AI eliminates the need for expensive professional developers by using LLMs like ChatGPT or Claude to write custom HTML and CSS. This allows non-technical users to build high-end features, such as custom search bars and interactive libraries, for the cost of an AI subscription rather than thousands in agency fees.<\/p>\n<h3 data-path-to-node=\"3\"><b data-path-to-node=\"3\" data-index-in-node=\"0\">Can I use AI to write code for a WordPress site?<\/b><\/h3>\n<p data-path-to-node=\"3\">Yes, you can use AI to generate clean HTML and CSS code, which is then pasted into a &#8220;Raw HTML&#8221; or &#8220;Custom HTML&#8221; block within your WordPress editor. This bypasses the limitations of standard &#8220;drag-and-drop&#8221; templates, allowing you to create unique layouts while keeping your site lightweight and fast.<\/p>\n<h3 data-path-to-node=\"4\"><b data-path-to-node=\"4\" data-index-in-node=\"0\">Do I need to know how to code to use AI for web design?<\/b><\/h3>\n<p data-path-to-node=\"4\">You do not need to be a programmer, but a basic understanding of HTML structure helps you guide the AI more effectively. By using tools like Notepad++ to test AI-generated snippets, you can learn to identify and edit text, links, and colors manually, turning the AI into a collaborative lead developer.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t<div class=\"wpb_raw_code wpb_raw_html wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@type\": \"FAQPage\",\n  \"mainEntity\": [{\n    \"@type\": \"Question\",\n    \"name\": \"How does DIY web design with AI save money for small businesses?\",\n    \"acceptedAnswer\": {\n      \"@type\": \"Answer\",\n      \"text\": \"DIY web design with AI eliminates the need for expensive professional developers by using LLMs to write custom HTML and CSS. This empowers business owners to create bespoke features without the high overhead of agency fees.\"\n    }\n  },\n  {\n    \"@type\": \"Question\",\n    \"name\": \"Can I use AI to write code for a WordPress site?\",\n    \"acceptedAnswer\": {\n      \"@type\": \"Answer\",\n      \"text\": \"Yes. You can generate custom code using AI and insert it into WordPress via the Raw HTML block. This method provides more design freedom than standard templates and improves site performance by reducing plugin bloat.\"\n    }\n  },\n  {\n    \"@type\": \"Question\",\n    \"name\": \"Do I need to know how to code to use AI for web design?\",\n    \"acceptedAnswer\": {\n      \"@type\": \"Answer\",\n      \"text\": \"No prior coding experience is required. AI acts as your lead developer, while tools like Notepad++ allow you to preview and test the code safely before publishing it to your live website.\"\n    }\n  }]\n}\n<\/script>\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"Have you ever opened your own website and felt a wave of \"cringe\"? Maybe the colors feel uninspired, the layout [...]","protected":false},"author":3,"featured_media":643,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-640","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>DIY Web Design with AI: Use AI to Write Custom HTML and CSS - GPTGuides<\/title>\n<meta name=\"description\" content=\"Learn DIY web design with AI to write custom HTML and CSS, saving thousands on development while building a unique site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.gptguides.co\/hr\/diy-web-design-with-ai\/\" \/>\n<meta property=\"og:locale\" content=\"hr_HR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"DIY Web Design with AI: Use AI to Write Custom HTML and CSS - GPTGuides\" \/>\n<meta property=\"og:description\" content=\"Learn DIY web design with AI to write custom HTML and CSS, saving thousands on development while building a unique site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.gptguides.co\/hr\/diy-web-design-with-ai\/\" \/>\n<meta property=\"og:site_name\" content=\"GPTGuides\" \/>\n<meta property=\"article:published_time\" content=\"2026-04-01T17:03:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-10T17:32:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.gptguides.co\/wp-content\/uploads\/2026\/04\/8.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"337\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"gptguides\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Napisao\/la\" \/>\n\t<meta name=\"twitter:data1\" content=\"gptguides\" \/>\n\t<meta name=\"twitter:label2\" content=\"Procijenjeno vrijeme \u010ditanja\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minuta\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.gptguides.co\\\/diy-web-design-with-ai\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.gptguides.co\\\/diy-web-design-with-ai\\\/\"},\"author\":{\"name\":\"gptguides\",\"@id\":\"https:\\\/\\\/www.gptguides.co\\\/#\\\/schema\\\/person\\\/f05160e0e5942ea5b7b525b0af26519e\"},\"headline\":\"DIY Web Design with AI: Use AI to Write Custom HTML and CSS\",\"datePublished\":\"2026-04-01T17:03:01+00:00\",\"dateModified\":\"2026-04-10T17:32:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.gptguides.co\\\/diy-web-design-with-ai\\\/\"},\"wordCount\":1252,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.gptguides.co\\\/#\\\/schema\\\/person\\\/7a73d64f9b255b4a42a7e4c3e54639b4\"},\"image\":{\"@id\":\"https:\\\/\\\/www.gptguides.co\\\/diy-web-design-with-ai\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.gptguides.co\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/8.png\",\"articleSection\":[\"Uncategorized\"],\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.gptguides.co\\\/diy-web-design-with-ai\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.gptguides.co\\\/diy-web-design-with-ai\\\/\",\"url\":\"https:\\\/\\\/www.gptguides.co\\\/diy-web-design-with-ai\\\/\",\"name\":\"DIY Web Design with AI: Use AI to Write Custom HTML and CSS - GPTGuides\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.gptguides.co\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.gptguides.co\\\/diy-web-design-with-ai\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.gptguides.co\\\/diy-web-design-with-ai\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.gptguides.co\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/8.png\",\"datePublished\":\"2026-04-01T17:03:01+00:00\",\"dateModified\":\"2026-04-10T17:32:26+00:00\",\"description\":\"Learn DIY web design with AI to write custom HTML and CSS, saving thousands on development while building a unique site.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.gptguides.co\\\/diy-web-design-with-ai\\\/#breadcrumb\"},\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.gptguides.co\\\/diy-web-design-with-ai\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/www.gptguides.co\\\/diy-web-design-with-ai\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.gptguides.co\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/8.png\",\"contentUrl\":\"https:\\\/\\\/www.gptguides.co\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/8.png\",\"width\":600,\"height\":337},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.gptguides.co\\\/diy-web-design-with-ai\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.gptguides.co\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"DIY Web Design with AI: Use AI to Write Custom HTML and CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.gptguides.co\\\/#website\",\"url\":\"https:\\\/\\\/www.gptguides.co\\\/\",\"name\":\"GPTGuides\",\"description\":\"AI made easy\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.gptguides.co\\\/#\\\/schema\\\/person\\\/7a73d64f9b255b4a42a7e4c3e54639b4\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.gptguides.co\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"hr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.gptguides.co\\\/#\\\/schema\\\/person\\\/7a73d64f9b255b4a42a7e4c3e54639b4\",\"name\":\"Nika\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/gptguides.co\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/profile-photo.png\",\"url\":\"https:\\\/\\\/gptguides.co\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/profile-photo.png\",\"contentUrl\":\"https:\\\/\\\/gptguides.co\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/profile-photo.png\",\"width\":320,\"height\":320,\"caption\":\"Nika\"},\"logo\":{\"@id\":\"https:\\\/\\\/gptguides.co\\\/wp-content\\\/uploads\\\/2023\\\/05\\\/profile-photo.png\"},\"sameAs\":[\"https:\\\/\\\/www.instagram.com\\\/gptguides\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.gptguides.co\\\/#\\\/schema\\\/person\\\/f05160e0e5942ea5b7b525b0af26519e\",\"name\":\"gptguides\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/52326da76127a66729539329c9868fc4d39b628709edf9d02fceb725e8ab2d30?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/52326da76127a66729539329c9868fc4d39b628709edf9d02fceb725e8ab2d30?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/52326da76127a66729539329c9868fc4d39b628709edf9d02fceb725e8ab2d30?s=96&d=mm&r=g\",\"caption\":\"gptguides\"},\"url\":\"https:\\\/\\\/www.gptguides.co\\\/hr\\\/author\\\/gptguides\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"DIY Web Design with AI: Use AI to Write Custom HTML and CSS - GPTGuides","description":"Learn DIY web design with AI to write custom HTML and CSS, saving thousands on development while building a unique site.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.gptguides.co\/hr\/diy-web-design-with-ai\/","og_locale":"hr_HR","og_type":"article","og_title":"DIY Web Design with AI: Use AI to Write Custom HTML and CSS - GPTGuides","og_description":"Learn DIY web design with AI to write custom HTML and CSS, saving thousands on development while building a unique site.","og_url":"https:\/\/www.gptguides.co\/hr\/diy-web-design-with-ai\/","og_site_name":"GPTGuides","article_published_time":"2026-04-01T17:03:01+00:00","article_modified_time":"2026-04-10T17:32:26+00:00","og_image":[{"width":600,"height":337,"url":"https:\/\/www.gptguides.co\/wp-content\/uploads\/2026\/04\/8.png","type":"image\/png"}],"author":"gptguides","twitter_card":"summary_large_image","twitter_misc":{"Napisao\/la":"gptguides","Procijenjeno vrijeme \u010ditanja":"5 minuta"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.gptguides.co\/diy-web-design-with-ai\/#article","isPartOf":{"@id":"https:\/\/www.gptguides.co\/diy-web-design-with-ai\/"},"author":{"name":"gptguides","@id":"https:\/\/www.gptguides.co\/#\/schema\/person\/f05160e0e5942ea5b7b525b0af26519e"},"headline":"DIY Web Design with AI: Use AI to Write Custom HTML and CSS","datePublished":"2026-04-01T17:03:01+00:00","dateModified":"2026-04-10T17:32:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.gptguides.co\/diy-web-design-with-ai\/"},"wordCount":1252,"commentCount":0,"publisher":{"@id":"https:\/\/www.gptguides.co\/#\/schema\/person\/7a73d64f9b255b4a42a7e4c3e54639b4"},"image":{"@id":"https:\/\/www.gptguides.co\/diy-web-design-with-ai\/#primaryimage"},"thumbnailUrl":"https:\/\/www.gptguides.co\/wp-content\/uploads\/2026\/04\/8.png","articleSection":["Uncategorized"],"inLanguage":"hr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.gptguides.co\/diy-web-design-with-ai\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.gptguides.co\/diy-web-design-with-ai\/","url":"https:\/\/www.gptguides.co\/diy-web-design-with-ai\/","name":"DIY Web Design with AI: Use AI to Write Custom HTML and CSS - GPTGuides","isPartOf":{"@id":"https:\/\/www.gptguides.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.gptguides.co\/diy-web-design-with-ai\/#primaryimage"},"image":{"@id":"https:\/\/www.gptguides.co\/diy-web-design-with-ai\/#primaryimage"},"thumbnailUrl":"https:\/\/www.gptguides.co\/wp-content\/uploads\/2026\/04\/8.png","datePublished":"2026-04-01T17:03:01+00:00","dateModified":"2026-04-10T17:32:26+00:00","description":"Learn DIY web design with AI to write custom HTML and CSS, saving thousands on development while building a unique site.","breadcrumb":{"@id":"https:\/\/www.gptguides.co\/diy-web-design-with-ai\/#breadcrumb"},"inLanguage":"hr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.gptguides.co\/diy-web-design-with-ai\/"]}]},{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/www.gptguides.co\/diy-web-design-with-ai\/#primaryimage","url":"https:\/\/www.gptguides.co\/wp-content\/uploads\/2026\/04\/8.png","contentUrl":"https:\/\/www.gptguides.co\/wp-content\/uploads\/2026\/04\/8.png","width":600,"height":337},{"@type":"BreadcrumbList","@id":"https:\/\/www.gptguides.co\/diy-web-design-with-ai\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.gptguides.co\/"},{"@type":"ListItem","position":2,"name":"DIY Web Design with AI: Use AI to Write Custom HTML and CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.gptguides.co\/#website","url":"https:\/\/www.gptguides.co\/","name":"GPT vodi\u010di","description":"AI made easy","publisher":{"@id":"https:\/\/www.gptguides.co\/#\/schema\/person\/7a73d64f9b255b4a42a7e4c3e54639b4"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.gptguides.co\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"hr"},{"@type":["Person","Organization"],"@id":"https:\/\/www.gptguides.co\/#\/schema\/person\/7a73d64f9b255b4a42a7e4c3e54639b4","name":"Nika","image":{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/gptguides.co\/wp-content\/uploads\/2023\/05\/profile-photo.png","url":"https:\/\/gptguides.co\/wp-content\/uploads\/2023\/05\/profile-photo.png","contentUrl":"https:\/\/gptguides.co\/wp-content\/uploads\/2023\/05\/profile-photo.png","width":320,"height":320,"caption":"Nika"},"logo":{"@id":"https:\/\/gptguides.co\/wp-content\/uploads\/2023\/05\/profile-photo.png"},"sameAs":["https:\/\/www.instagram.com\/gptguides\/"]},{"@type":"Person","@id":"https:\/\/www.gptguides.co\/#\/schema\/person\/f05160e0e5942ea5b7b525b0af26519e","name":"gptguides","image":{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/secure.gravatar.com\/avatar\/52326da76127a66729539329c9868fc4d39b628709edf9d02fceb725e8ab2d30?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/52326da76127a66729539329c9868fc4d39b628709edf9d02fceb725e8ab2d30?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/52326da76127a66729539329c9868fc4d39b628709edf9d02fceb725e8ab2d30?s=96&d=mm&r=g","caption":"gptguides"},"url":"https:\/\/www.gptguides.co\/hr\/author\/gptguides\/"}]}},"_links":{"self":[{"href":"https:\/\/www.gptguides.co\/hr\/wp-json\/wp\/v2\/posts\/640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gptguides.co\/hr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gptguides.co\/hr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gptguides.co\/hr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gptguides.co\/hr\/wp-json\/wp\/v2\/comments?post=640"}],"version-history":[{"count":2,"href":"https:\/\/www.gptguides.co\/hr\/wp-json\/wp\/v2\/posts\/640\/revisions"}],"predecessor-version":[{"id":664,"href":"https:\/\/www.gptguides.co\/hr\/wp-json\/wp\/v2\/posts\/640\/revisions\/664"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gptguides.co\/hr\/wp-json\/wp\/v2\/media\/643"}],"wp:attachment":[{"href":"https:\/\/www.gptguides.co\/hr\/wp-json\/wp\/v2\/media?parent=640"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gptguides.co\/hr\/wp-json\/wp\/v2\/categories?post=640"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gptguides.co\/hr\/wp-json\/wp\/v2\/tags?post=640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}