Build Your Own Website | A Step-by-Step Guide

For developing a basic but aesthetically pleasing webpage and marking your presence online, you don't need to be an IT professional or skilled in HTML, thanks to ChatGPT.

If you can use Microsoft Word you can develop and launch your own website. Here, we will walk through the steps to generate your first webpage using ChatGPT, which can create more modern and elegant webpages if provided with the proper prompts.

First Step: Content Generation

Start a Microsoft Word file and write the content for your website's welcome page. This can include introducing yourself, explaining why you created the website, your background, or anything you want your visitors to see when they first open your site. Format the Word document as you would like it to appear, define headings and paragraphs, and save the file. You may also include a few pictures relevant to the webpage.

If possible, create Word files for all other webpages you want to include in your site, such as the About section, Projects you've worked on, Contact Me, or any other content you want to add.

Once you have the Microsoft Word documents for the webpages you intend to include in your website, you have completed the first step.

Second Step: Generate HTML Webpages through ChatGPT

As mentioned earlier, you can generate decent-looking webpages from your content if the right prompts are provided to ChatGPT. The better your prompt explaining your requirements or wish list, the better the results you will get. While you may not get an ideal webpage design without knowing some details about HTML, the results should still meet your expectations. Before diving into ChatGPT prompts, let’s familiarize ourselves with some common HTML and webpage terms.

Glossary of Common Terms for Webpage Development

A basic webpage can consist of the following elements, many of which are similar to those in MS Word:

• Header: The portion that appears at the top of every webpage.
• Navigation Menu: A menu, typically at the top, for navigating through different webpages of your site.
• Title of Webpage: The title that appears in the browser's title bar.
• Headings H1, H2, H3, and H4: Different levels of headings for your content.
• Paragraph: The paragraphs of your content.
• Style Sheet: Defines formatting, fonts, and sizing for headings, body, paragraph elements, and their appearance.
• Body of Webpage: The entire webpage content except for the header and footer.
• Footer: The portion that appears at the bottom of every webpage.

Getting ChatGPT into Action

Open ChatGPT and upload the Microsoft Word file you created. In the prompt section, write a prompt explaining the website structure, its contents, and how you would like the page to look. Below is an example prompt to ChatGPT:

Based on your prompt, you will receive different HTML codes for each webpage you intend to include in your site. Open Notepad and save each code one by one as an HTML file in a single folder. Ensure that the filenames match exactly as defined by ChatGPT. When saving the file, select “All Files” in the “Save as type” dropdown and remember to include the .html extension at the end of the filename, such as index.html or myhobbies.html.

Once all the files are saved in a folder, open the index.html file and navigate through your content to ensure that every link is working as intended. If any link is not working, check that the filename is correct and that it is located in the same folder as the other HTML files. Remember, all HTML files need to be in the same folder to work properly.

Congratulations, you have developed your first website!

Hosting Your Website

Once your website development is complete, it’s time to get a domain name and host it on a server to be accessible online from anywhere in the world. Domain names like yourname.com or yourname.online are not free and must be purchased. For beginners, we will cover only the free route. For dedicated domains and hosting, consult my other blog sections.

There are many websites offering free subdomains and hosting services, but InfinityFree.com is the best option I have found that is truly free and without annoying ads.

1. Go to InfinityFree.com, enter your email address and password to sign up for a new account.
2. Select a subdomain (yourname.fewoptions.com) from a list of available domain names. Just enter the name and select the least awkward domain name to create a subdomain for your website.
3. Once the subdomain is created, go to the file manager. It may take some time for the website to become available, so wait for a few minutes.
4. Open the htdocs folder, which is dedicated to your website.
5. Select the index2.html file and delete it by clicking the bin icon at the bottom right.
6. From the bottom left, click Upload > Upload Files.
7. Select all the files you have created for your website and click Open / Upload.

Congratulations! Your website has been successfully hosted and is available online at the subdomain name you have selected.