Tutorial: A complete beginner's guide to building a website using AI - From Brand to Launch
An extensive walkthrough to getting started on building your first HTML website by combining multiple tools, approaches, and experiences from my career as a web developer.
What’s in this tutorial?
Over the years, I worked on hundreds of web projects and solved thousands of problems. Perhaps 30–40% of all my working time had been spent writing code. However, being a small creative agency owner, I’ve donned many hats. I’ve branded, designed, written content, performed IT services, solved technical and non-technical problems, and even helped establish a number of businesses, even though I was mostly designated the web developer. The truth is, many people decide to get a website before their business is ready for a website, and I always loved to help get them ready.
So when I decided to work on a tutorial on creating a website with AI, it was a no-brainer that I needed to go over much more than simply entering a prompt to get some code. There are many tutorials out there like that, and are always followed by a huge question mark — what do I do with this code?
This is why we will be going over a few more topics that include but are not limited to basic branding, color and font selection, content design and creation, web design, SEO, web development (HTML/CSS/JS), web hosting, domain registration, domain privacy, SSL certificates, and combining all of these elements to produce a functional website with absolutely no prior experience.
We will be heavily utilizing AI throughout the steps of this tutorial, however, the main objective will be the gradual construction of a highly-detailed AI prompt, one step at a time. The prompt will produce a high quality website draft. We will then proceed to look at working with and modifying the draft, and eventually releasing it to the world.
I'd even argue that this process can be the blueprint for creating an AI website generator software when combined with an AI API such as OpenAI's GPT.
Throughout the tutorial, I will be utilizing ChatGPT, and for most questions, I'll be using the o1 model to get the highest possible quality results under my current subscription.
I tried to follow a logical progression of processes, starting with establishing your brand, and ending with the site live on your custom domain name, hoping to make this as comprehensive a tutorial as possible. However, depending on your level of experience or curiosity, feel free to skip to the section you're most interested in.
Part1: Working With Your Brand
To start the process, we’ll work with a hypothetical business, a brick-and-mortar board game store — Jingle Board — located at 1122 LLM St. Austin, Texas, 78701 (fake address). You can choose to follow along, or go ahead and use your own business details in each step.
Creating a color-scheme
Many people who are new to web design and development tend to ignore color-schemes as an afterthought. However, a predefined color-scheme allows for a proper design process to happen. My favorite site to do this these days is Coolors.co, which allows you to generate color schemes, and to also look through trending color palettes to pick from. However, you can use any color-scheme generation website you prefer.
For Jingle Board, I decided to pick this color-scheme, which has many vibrant and playful colors that go with the theme of board games:
Once you pick a color scheme, click each of the boxes to copy the hex value for the color, and store it somewhere where you can retrieve it later. Hex values for this color scheme are as follows: Yellow: #ffbe0b, Orange: #fb5607, Pink: #ff006e, Purple: #8338ec, Blue: #3a86ff
Selecting your fonts
It’s important to decide on one or two fonts to use on your website. Two fonts is the standard, with one being used for headings and one for text, content, links, etc. You can use more than 2, but to get it right, it would usually require advanced experience in design techniques and principles.
My favorite source for picking fonts is Google Fonts. All the fonts there are free, and you can choose to host them yourself or directly embed them. For this tutorial, we will be using the direct embed method.
Once you select the fonts you like, click “Get Font,” for each of the fonts, and click “get embed code.” Save what you get for now, as we’ll be using it later in the final prompt.
This is the code I got. I selected Merriweather to use as the headings font, and Poppins to use as the general text font.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
Creating a logo
While ChatGPT can generate great imagery for certain purposes, it will not be suitable for creating a logo. Essentially, getting a logo from ChatGPT is a tedious process that will require post-production work. Take for example this prompt, which has pretty clear directives:
Prompt: Generate a flat website-ready 2d logo [colorful design] [white background] [Logo text: JingleBoard, Elements: Dice] — [Nothing else in the image]
Even though the logo looks somewhat decent, the directive for a white background continues to get missed despite multiple attempts at getting it to work, making this unusable for the web. Additionally, the letters are poorly drawn, and repeated attempts to fix these with AI are futile. It’s possible to use other tools such as Canva to complement this process.
FLUX AI, another AI image generation model can generate much nicer logos. I entered a simple prompt and got a reasonable logo. The dice are deformed, but otherwise it looks great.
But for this tutorial, I opted to use Adobe Photoshop’s generative-ai feature to create the little icon and used normal text for the “JingleBoard” part. You’ll want to ensure that the logo you create is either a transparent .png image or a transparent .svg vector image.
One other thing I’d recommend, since we started with several colors, is to pick the most important colors to go on the logo, and use them heavily across the site. This is why we’ll be seeing a lot of these colors on the site.
I think this goes without saying, but if you’re actually creating your business website, I highly recommend not sparing any time or thought on the branding process, because branding is a science, and done correctly, it could make or break your entire business.
Part2: Creating Content For Your New Website
Please note that any content you create for a website needs to be carefully and thoroughly reviewed. I’m not a proponent of the widely-held belief that everything written with AI needs to be entirely and completely re-written. I say this specifically because the method I will show you can produce relatively unique, high-quality content for your site. Regardless, it’s extremely important that you are aware of every single word on your site and the meaning it conveys.
Generating a rough outline
Prompt — Creating an outline: I’m creating a website for my [business: board game brick-and-mortar store], [name: Jingle Board], [location: Austin, Texas], [email: info@jingleboard.com] — I would like a bulleted-list of the pages you recommend I create.
Simply enter the prompt above into ChatGPT and submit. The model I highly recommend using here is o1, (or any later models you have available, such as o3).
I got a long list of pages, some of which we will not be using. But this is great at this stage. We will stay on this chat for the next few steps.
Basic SEO Research
SEO (Search-Engine Optimization) is a multi-stage process that allows your website to rise up in the ranks on web search results. In the most general terms, SEO involves optimizing the content on your site, inter-linking, keyword optimization, and regularly creating content (on-site SEO), as well as building high quality backlinks and referrals from other reputable websites (off-site SEO). For the purposes of this tutorial, we will only be covering a couple of basic aspects of on-site SEO. Overall, SEO is an ongoing process and often requires a strong partnership with an SEO professional.
In the same chat we started in the last step, we will use this next prompt.
Prompt — Keyword Research: Do a web search for related businesses in Austin Texas, and come up with 10 suitable SEO keywords to use on this site.
We got these keywords in the response:
For the purposes of this tutorial, we will be moving forward with these keywords. However, SEO optimization is more nuanced, and can take many hours of work to select the best keywords for your niche.
We will be asking ChatGPT to take care of the process, but I recommend you explore the concepts of SEO further for better chances at producing high-performing content.
Writing the content
For this website, we will be creating 3 pages (Home, About, and Contact Us). Due to the nature of the site being built in HTML/CSS/Javascript, it’s not feasible to create any e-commerce functionality, or to include a board game archive for the purposes of this tutorial.
The next prompt will go in the same chat, after we’ve completed our keyword research.
Prompt: You will use the keywords that we came up with. We will begin to write the content for each of the following pages (Home, About, Contact Us) — You will write one page at a time. First, you will ask for any additional info, then you will write the content, then you will ask for approval. If approved, you will move on to the next page. If not, you will revise as requested, then ask for approval again, or whether you should move forward. Start with the first page.
This somewhat convoluted process of telling ChatGPT to ask for approval and write the pages one at a time is a lesser-known method of allowing you to get multiple full-length responses from ChatGPT. So if we were to not include these directives, we would get a very small amount of content for each page.
In response to this prompt, we received a number of questions and requests for clarification from ChatGPT:
Your responses to these initial questions are crucial, and will set the ground rules for your content. Here are the answers I came up with here:
The last point is very important, directing ChatGPT to tell us where to put images and what their content should roughly be.
These answers will hopefully cover most grounds for the content. So let’s get the homepage written:
As you can see, there are emojis in the content. This, along with other issues probably exist within this text. So it’s very important to read it and adjust it based on your style and taste. I also encourage you to explore discussing the produced content in the chat window, asking for revisions and adjustments to the content, its length, format, tone, and style until you’re fully satisfied with it.
Additionally, with over 10 years of experience in building websites, I would never, ever, put an emoji on a website. This is why we will be addressing some of these minor issues directly in the website building prompt we will use near the end of this tutorial. Although I do recommend you manually review and edit the content before proceeding.
For now, we will move forward with this homepage. And we can get started on the next page:
Prompt: “Now write the about page”
You get the gist! Follow this method to create content for as many pages as you need, and store the content somewhere. In my case, I’m moving it all into Google Docs, where each page is labeled with a header. We will be revisiting this doc later and making important adjustments to it.
Sourcing images
Before we proceed with building the site, there is a very important step to finish. This is the step of finding the images to replace the placeholders ChatGPT placed in the content. If you are already comfortable with HTML, you may not need to do this step right away. However, I will proceed with the tutorial assuming this step is completed, because it will shorten the process and allow ChatGPT to provide a finished product, instead of something that is littered with placeholders and broken images.
For images, you can of course use AI-Generated images in Dall-E or find them on stock photography sites such asShutterStock, Pexels, and many more.
I personally prefer to go with stock photography when not shooting for a cartoonish style. It’s also somewhat difficult to get consistent results from ChatGPT. Some other tools like MidJourney or FLUX may be able to do better, but perhaps we’ll go over these another time.
For now, we will go to Pexels, a free stock photography website, and select the images we’d like to use.
A simple search for “Board Games” returns tens of thousands of options to choose from.
Preparing images for the website
This step is important, as it it’s the final step before starting to write code! For this step, we will have to do a few things. First, select a place on your computer and create a folder for your new website. This is where we will be placing all the files we generate. Let’s call it “JingleBoard.”
Inside this folder, create a folder and name it “images”
In here, we will store all the images we want to use, named appropriately, based on the placeholders that ChatGPT gave us when we generated our content. Let’s revisit that now.
On the homepage, the first placeholder was listed as follows:
[Placeholder: Hero Image of happy friends or family playing a board game around a table]
Of course, the content of the image is a suggestion by ChatGPT, which you can choose to go with or ignore. In our case, we will go with it, so I’ll paste the exact sentence in Pexels and get an image. Ideally, a “Hero” image needs to be in landscape orientation, because it will be a large, horizontal image. Here’s what I picked for this one:
It’s also important to consider the image dimensions. My personal go-to dimensions for hero images is 2000px by 600px. Which gives us a nice, horizontal hero image. Note that we don’t need it to be 2000px wide, only to match the above aspect ratio. If you have a tool like Photoshop, it can be easy to get the exact 2000x600 dimensions. But if you don’t have access to a robust image editing tool, try https://www.iloveimg.com/crop-image — Simply select the image, enter 2000 x 600 on the right side. Then press and hold the shift button on your keyboard and drag the box from any corner to cover the area you want while maintaining the aspect ratio (width to height ratio).
After cropping, we will save the image in the ‘images’ folder we just created, and we will rename it based on this rule:
[website-page]-[section-on-page]-[description].jpg (with dashes in-between words). This is not a rigid format, we just need each image file to contain the title of the page it’s on (Home), and the section it will be in (Hero), and also a brief description of the image, which in this case is something like “people-playing-board-games.” Doing this early on will allow us to request code that meets w3c standards for accessibility as well as SEO requirements by major search engines.
We will proceed to do this with every image suggestion from the content: 1) Select and download an image, 2) Crop to proper aspect ratio if necessary, 3) Give the image a descriptive file name (page+section+description.jpg)
Here’s a list of all the suggested images by ChatGPT (when we wrote the content):
In this case, since we don’t have an actual store, we will be substituting some of these ideas for general board game ideas. But in the case of an actual business, it’s highly encouraged to use photos of the store.
Here are the photos I selected, and the names I gave them:
And finally, don’t forget to place the logo you selected for your site in this folder as well, and let’s call it logo.jpg.
I do encourage you to spend enough time to find the photos that meet the following criteria:
I also recommend that you select a few additional photos to be used as needed across the site. I will be downloading a few more from Pexels as well. For these, I like to name them “extra-description.” For example, a photo of a monopoly board would be called “extra-monopoly-board.jpg.” This way we will able to tell ChatGPT to use these as needed for design purposes. All of these new photos should also be saved into the images folder.
One last thing I’d like to do here is get a Google Map embed code and provide it to be used on the “Contact” page. Go to Google Maps, enter your address, and follow these steps: (1) Click “Share” (2) Click “Embed a map” (3) Click “Copy HTML.” Save this code to be used later when we’re building the final prompt.
<iframe src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d220448.76175221082!2d-97.9205505817519!3d30.307954054935863!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8644b599a0cc032f%3A0x5d9b464bd469d57a!2sAustin%2C%20TX!5e0!3m2!1sen!2sus!4v1734713394430!5m2!1sen!2sus' width='600' height='450' style='border:0;' allowfullscreen='' loading='lazy' referrerpolicy='no-referrer-when-downgrade'></iframe>
Part3: Let’s get building!
One might think that this is the difficult part of the process. Creating the code and testing the site. And it may have been the case just a year and a half ago, but no more. This is the easiest step.
We will be preparing a master prompt that will contain the work we’ve done so far. The information we will be needing will include but not be limited to:
First, we will start by visiting the document we created earlier in this tutorial: in the section “Writing the content.” Wherever there is a [Placeholder: image of xyz…] we will change the text in there to say [image: image-file-we-created.jpg], for example, the first section of the homepage content provided by ChatGPT reads:
Austin’s Board Game Emporium [Placeholder: Hero Image of happy friends or family playing a board game around a table] Welcome to Jingle Board, Austin’s ultimate destination for board game enthusi….
We’ll be updating the placeholder part to read:
[image: home-hero-people-playing-board-games.jpg]
We will proceed to update every [placeholder:…] tag in the content as described. This way, ChatGPT will know exactly which image to reference when it’s writing the code.
The Website
Now we’re ready to go ahead and write the final prompt, which will do all the remaining steps to seeing and testing this new website. This will be a very long prompt. It contains information about everything we’ve done so far, in addition to specific technical and design guidelines that I’ve learned through my experience in the field as well as going through many iterations with ChatGPT.
The first part (Technical and design guidelines) only needs to be changed if you are familiar with the concepts within it and would like to adjust them. The following sections (Extra Images, Colors, Fonts, and Content) are where we will be adding the details of the work we completed. Make sure to replace the image file names if you have any, the colors, fonts, font embed codes, map embed code, and then paste the content we created in the end of the prompt.
For your reference, we will be using something called Bootstrap to structure the code, because that allows for a responsive website that looks good on all devices with minimal effort.
←This is where the prompt begins →
Technical and Design Guidelines:
Build with HTML/CSS/JS/Bootstrap.
Use these Bootstrap components: containers, grid, columns, elements like Jumbotron, badge, breadcrumbs, card, buttons, button group, card, list groups, modals, nav & tabs, navbar, progress, spinners, tooltips.Include: https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js (just src, no other attributes) https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css (just the link tag with href, no other attributes) Use this reference where necessary: https://getbootstrap.com/docs/5.3/getting-started/introduction/ Write the header and footer and include all of it on all pages (repeat the code, don’t use include, repeat the code). Use logo.png Within the content, any reference to an image should be used with attribute src=”images/image.extension Use the file names to write nice alt tags. Ensure that every image has the dimensions explicitly set. USE ALL OF THE CONTENT Include every section for all of the pages, make sure it’s completed. Remove any emojis, format the text appropriately for SEO. Output all the code and text needed to make this happen, in every file, and where it should go (no abbreviations or …), in complete detail. For each page, build a reasonable bootstrap layout. Header on top, footer on bottom, varied section designs in the middle. No placeholder content or components. Everything ready and functional. No placeholder components or things that are not real. Do not put anything that does not work completely. The content provided is the entire site, everything. So don’t imply that there is anything else with links that don’t go anywhere or non-functional display elements. This is going to production. Do not make up new content.
Extra images: Feel free to use them to fill spaces. For example, if you have a repeating section or a multi-column section, they have to have images and be uniform where images have the same dimensions (same width and height for column images). extra-colorful-board-game.jpg
extra-monopoly-board.jpg extra-wooden-game-pieces.jpg extra-uno.jpg extra-nice-background.jpg
Colors: Incorporate these colors: Yellow: #ffbe0b, Orange: #fb5607, Pink: #ff006e, Purple: #8338ec, Blue: #3a86ff
Fonts: Fonts to use are Merriweather (Headings) and Poppins (everything else) <link rel=”preconnect” href=”https://fonts.googleapis.com"> <link rel=”preconnect” href=”https://fonts.gstatic.com" crossorigin> <link href=”https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel=”stylesheet”>
Additional Information:
Add a contact form to the contact page that sends to info@jingleboard.com Use this map for contact page: <iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d220448.76175221082!2d-97.9205505817519!3d30.307954054935863!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8644b599a0cc032f%3A0x5d9b464bd469d57a!2sAustin%2C%20TX!5e0!3m2!1sen!2sus!4v1734713394430!5m2!1sen!2sus" width=”600" height=”450" style=”border:0;” allowfullscreen=”” loading=”lazy” referrerpolicy=”no-referrer-when-downgrade”></iframe>
The Content:
Paste the entirety of the content we created in the earlier step “Writing your content” and submit the request to ChatGPT o1.
←This is where the prompt ENDS→
Prompt Breakdown
Saving the code
For the sake of making this super easy, I recommend you download an app called “Sublime Text,” if you don’t have a code editor, otherwise, any code or text editor will do. We will only be using this app to create files and paste the code in them, so it will be super easy.
After setting it up, start Sublime Text, and you will see an empty window like this one.
Proceed to copy all of the code provided by ChatGPT for the “index.html” or homepage and paste it into the empty window.
Paste the code in sublime text:
Click File -> Save As, and save the file as “index.html” in the “JingleBoard” folder we created earlier (your root website folder).
Our folder structure currently looks like this:
And you should be able to double-click the “index.html” file and see what your homepage looks like!
Next, you will proceed to copy the code produced for about.html, and save it in a new file and call it “about.html,” then repeat the process for contact.html.
One thing I’d like to assert is that this is a responsive website. This means that if you load it on your phone, it will look pretty neat as well.
And now we get to a very important point in the tutorial. And that is, making your final changes to the produced site. You see, when you’re working with an actual team to build your website, you often get a final delivery that will require a few rounds of reviews, edits, and additions.
As we work with AI to do everything, we will definitely have things to adjust in the end, and it may seem daunting now that we have multiple pages of code. However, the approach can happen using one of two methods (or a combination), which can give you the flexibility to explore this new world (code) or continue working with ChatGPT without wading into the code.
For example, let’s say that we would like to fix the appearance of the about page so that the images aren’t stretching vertically so much and leaving this much white space. We will continue in the chat and ask for our revision as follows:
Prompt: Rewrite the code for the about page, top-to-bottom, only changing what I request be changed. Adjust each of the images so that they are squares, to reduce the empty white spaces under the text.
Once the new code is written, we will copy it and use it to replace everything on the contact.html file using Sublime Text.
The result is not perfect (as expected), but it’s an improvement! In the same way, you can ask for anything to be modified.
You can also ask for changes to specifically apply to mobile devices, and ChatGPT will use CSS media queries to make that happen.
Optional: Manually reviewing HTML Code
Before moving on to publish the site and launch it, I’d like to remind you that HTML is meant to be written and edited by humans. This means that the formatting of HTML itself is meant to make it clear where everything goes. So, at the very least, I would recommend that you simply look through the code. You will notice that the paragraphs of text we gave ChatGPT are all completely typed-out in the code. These are safe to change, you can simply change it and save the file, and your changes will be reflected on the site. A few ventures into the file and you will begin to get a feel for HTML.
Here’s a little breakdown of the code we created:
The top part, starting with <!DOCTYPE html> and ending with </head>. This part contains the file heading. Nothing here is visible on the site, but it contains calls to any scripts, stylesheets, or fonts that we’re using. Here you can see Bootstrap and Google fonts being added, in addition to some CSS styles.
The bottom part, or the footer, which starts with <footer> and ends with </footer> contains the copyrights and some links, and is repeated on every page, just like the header.
In-between these two sections, you will find everything else that is displayed on the page.
Any of the content on this page can be manually changed. You just have to make sure that you don’t leave any HTML element unopened or unclosed. Meaning for example, where you see a line of text sitting between a <p> and </p>, you have to make sure the <p> and </p> remain intact, unless you specifically know what you’re doing with them.
At this point, I think this is enough of a review for HTML/revisions. But I’m happy to answer any questions you have on the subject. Now is the time to publish our site!
Part4: Domain, hosting, and launch
Websites need a domain name “www.something.com” or similar, and a hosting server, where you would store all the files that we just created. The domain name serves as an address that knows which server the files are on, and serves them when requested. We will quickly go over getting you a new domain name (or using an existing one), as well as hosting, both from Godaddy. And while this is not a recommendation or an endorsement of Godaddy, I think they are suitable for small websites, and having both domain and hosting on the same server will save you some minor headaches in working with the Domain Name System (DNS).
Choose your domain
This is a big part of the process, and I recommend you spend time to pick a domain name that sounds good and resonates with your brand. For this tutorial, we will be going with JingleBoard.com. The first step is to buy the domain name. There are many sources and registrars that allow you to buy domains, such as Godaddy, Whois, Namecheap, to name a few. For this tutorial, we will be looking at Siteground, mainly because if you get a 1 year subscription, you can get a $3/month hosting plan that includes a one-year free registration for a domain name, then $20/year following that. $20/year is a normal rate to expect for getting a domain name, which can range from $5-$100s or even thousands of dollars.
First, let’s go to siteground.com and click “Start Now. From there, click the cheapest plan and proceed to checkout. You will be asked to enter a domain name. Enter the domain name you’d like to see if it is available, then proceed.
In the next step, you will be asked if you want any additional products. The main product I would highly recommend is “Domain Privacy.” Basically, without buying this addon ($12/year at the moment), anyone on the internet who knows your domain name can get your full name, address, and contact information using a Whois search. When you purchase this addon, your information will be masked. People will still be able to reach you, but it will be indirect and they will now know who they’re reaching.
Once you have completed your purchase, go back to the main account page, and click “Create Website.”
In the next step, make sure you select “Skip & Create Blank Site” because this is the ideal choice for the type of website we just created (HTML website). And once that step is completed, proceed to “Site Tools.”
And now we’re ready for the final step: Click “File Manager,” then double-click the folder “public_html” to open it. The view should like like this, with a default.html file visible on the right side.
Go ahead and drag/drop the files we created earlier directly into the folder, right where default.html is. Do not drag the “JingleBoard” folder that contains the files, just the files themselves as well as the “images” folder (the ones selected in this screenshot).
And voila!
Jingleboard.com now leads to the homepage! The only thing left is to setup an SSL (free from Siteground) to make sure the site gets a little secure lock next to the URL.
Congratulations on publishing your first AI-generated website!
If you have benefited from this tutorial, or have any questions, comments, or notes, please feel free to share them with me. And follow me for more in-depth tutorials and explorations of AI, programming, and other technology.
At of the time this tutorial was published, JingleBoard.com looked like the screenshots included here. Depending on when you're reading this, it may not look the same.
Really enjoyed this. Sharing…
this is awesome-