{"id":5397,"date":"2024-06-05T06:58:27","date_gmt":"2024-06-05T06:58:27","guid":{"rendered":"https:\/\/favtutor.com\/articles\/?p=5397"},"modified":"2024-06-05T06:58:29","modified_gmt":"2024-06-05T06:58:29","slug":"gpt-4o-web-development-making-website","status":"publish","type":"post","link":"https:\/\/favtutor.com\/articles\/gpt-4o-web-development-making-website\/","title":{"rendered":"Is GPT-4o Good For Web Development? We Tested It Out"},"content":{"rendered":"\n

OpenAI shocked the world with GPT-4o’s powers, its highly powerful vision interactions and natural language processing capabilities. We even found out how good it is in coding-related things<\/a>, but can we say the same for Web development? Let’s find out how GPT-4o performs when we give it the task of creating a website!<\/p>\n\n\n\n

We Asked GPT-4o to Create A Website<\/strong><\/h2>\n\n\n\n

You might think that it is not so easy for an AI model to create a website from scratch, but it is not. Creating a website with GPT-4 involves using its capabilities to assist in the design and development process. All you have to do is keep the following things in mind:<\/p>\n\n\n\n

    \n
  1. Establish the Goal of Your Website:<\/strong> Choose the topic of your website and create a layout for it that includes important areas like Home, About, Services, Portfolio, and Contact.<\/li>\n\n\n\n
  2. Collect Content:<\/strong> To create text for your website, use GPT-4. For instance, you may ask it to produce a synopsis of your services or an “About Me” section.<\/li>\n\n\n\n
  3. Selecting a Technology Stack:<\/strong> Choose between using an Angular, React, or Vue framework, or just basic HTML, CSS, and JavaScript.<\/li>\n\n\n\n
  4. Create Your Development Environment:<\/strong> Create the environment by installing the required libraries and tools. All you may need for a basic HTML\/CSS\/JavaScript setup is a code editor such as VSCode.<\/li>\n\n\n\n
  5. Create the HTML Structure:<\/strong> Build the basic structure of your website. An HTML section will contain the important parts of your website such as metadata, heading, body, sub-divisions, and much more.<\/li>\n\n\n\n
  6. Style Your Website with CSS:<\/strong> Use CSS to style your website. Create a styles.css file and link it to your HTML. Try to provide as much depth as possible in your CSS file to make your website look more attractive.<\/li>\n\n\n\n
  7. Add Interactivity with JavaScript:<\/strong> Enhance your website with JavaScript if needed. Create a script.js file and link it to your HTML. These JS functionalities will give a whole new feel to your website as you could never have imagined before.<\/li>\n\n\n\n
  8. Test and Deploy:<\/strong> Make sure your website works properly and looks excellent by doing a local test. After you’re pleased, publish it using a hosting provider like Vercel, Netlify, or GitHub Pages.<\/li>\n\n\n\n
  9. Iterate and Improve:<\/strong> Use feedback to improve your website continuously. You can use GPT-4 to generate additional content or code snippets.<\/li>\n<\/ol>\n\n\n\n

    Following these instructions, you can use GPT-4 to help create a comprehensive website. It can adhere to your commands and provide you with catchy website content.<\/p>\n\n\n\n

    We started with a Portfolio website<\/strong><\/h3>\n\n\n\n

    We tried OpenAI\u2019s GPT-4o to make a portfolio website, using HTML, CSS, and Javascript. We wanted the design to be inspired by Bootstrap, and also include a few sections such as \u201cMy Details, My Education, and My Socials\u201d. This is the initial prompt that I gave:<\/p>\n\n\n\n

    \u201cWrite HTML, CSS and JavaScript code for a portfolio website using Bootstrap design. Include functionalities like a menu bar consisting of my details, my education, my socials.\u201d<\/em><\/p>\n\n\n\n

    This is how GPT-4o responded to our query with an HTML and CSS code:<\/p>\n\n\n

    \n
    \"HTML<\/figure>\n<\/div>\n\n\n

    Surprisingly there was no Javascript code here, even though I mentioned it. It simply said, \u201cJavaScript: Currently, it’s empty but serves as a placeholder for any future interactivity you might want to add.\u201d<\/em><\/p>\n\n\n\n

    I copy pasted the codes into VS Code and then used the Live Server extension to deploy the website, however, the resultant website was very boring to look at..<\/p>\n\n\n

    \n
    \"Basic<\/figure>\n<\/div>\n\n\n

    The Website looked very blank with a simple white background. The one good thing was that GPT-4o included the 3 sections that we asked for and even provided brackets where we could type out my content as we wished. However, the absence of a properly structured menu bar design and lack of intractability for no Javascript made us want to try again.<\/p>\n\n\n\n

    This time we wanted the design to be more specific, so we mentioned the background color and also decided to add some hover effects.<\/p>\n\n\n\n

    \u201cI see the background here is plain white, can you add more of an attractive design, such as a black background with red hovers?\u201d<\/em><\/p>\n\n\n\n

    GPT-4o responded well with an updated CSS and HTML file design:<\/p>\n\n\n

    \n
    \"Updated<\/figure>\n<\/div>\n\n\n

    When we ran the codes, we were quite satisfied with the website result. It reflected the changes that were needed, the subheadings were in red and the background was in black just as we needed. The menu bar on the top right also had the hover effect which we were looking for.<\/p>\n\n\n

    \n
    \"Portfolio<\/figure>\n<\/div>\n\n\n

    However, overall the whole design and the content organization wasn\u2019t that impressive and looked quite simple to me. It basically had what I asked for, but lacked innovation and creativity that I expected from GPT-4o.<\/p>\n\n\n\n

    Asking GPT-4o To Make It Using A Reference<\/strong><\/h3>\n\n\n\n

    Since GPT-4o wasn\u2019t that impressive at creating websites by itself, this time we gave a reference image to the chatbot and asked it to make a similar website to the one in the image below.<\/p>\n\n\n\n

    \"Demo<\/a>
    (source: YouTube\/GreatStack)<\/figcaption><\/figure>\n\n\n\n

    This is how GPT-4o responded.<\/p>\n\n\n\n

    \"HTML<\/figure>\n\n\n\n

    Things were completely different this time, it felt as if ChatGPT had gone from a novice web designer to an expert. This time it took more than 5 minutes to generate both the HTML and CSS codes. Interestingly there was no Javascript code again here this time.<\/p>\n\n\n\n

    There was more depth in the HTML codes, it included a navbar with various lists and applied CSS to each of the sub-sections. When we copied the codes and deployed them on VS Code, we got this:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    The website reflected everything that there was in the reference image, starting from all the details. GPT-4o did excellent in cloning the reference image website. It had only removed the person’s image and asked us to upload our image instead in the CSS section. Quite intelligent thinking from GPT-4o!<\/p>\n\n\n\n

    So, Is GPT-4o Good For Basic Web Development?<\/strong><\/h3>\n\n\n\n

    Based on the experiments we conducted, GPT-4o is better at providing website codes when you provide a detailed reference image showing what website you actually want.<\/strong><\/p>\n\n\n\n

    We feel it\u2019s still not creative and intelligent enough to make responsive and detailed websites by itself without highly specific instructions. If you query GPT-4o for a website without any reference, it will provide you with only a simple basic HTML and CSS code, that is good for a beginner level web-designer.<\/p>\n\n\n\n

    However, you can only provide reference \u2018images\u2019 for a website creation, don\u2019t try providing YouTube links as GPT-4o is still getting up the levels to improve its reading from external links. It still has to do a lot of work in analyzing long YouTube video instructions to code and deploy a highly functional responsive website.<\/p>\n\n\n\n

    Conclusion<\/strong><\/h2>\n\n\n\n

    Just like all other AI tools out there, GPT-4o is also improving day by day! No matter how powerful the model is, it still has a long way to go before it can achieve human-level web development skills. But it can create some things for sure!<\/p>\n","protected":false},"excerpt":{"rendered":"

    We tested the GPT-4o AI Model for basic web development skills for making portfolio websites. Let’s see how it performed!<\/p>\n","protected":false},"author":15,"featured_media":5414,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jnews-multi-image_gallery":[],"jnews_single_post":null,"jnews_primary_category":{"id":"","hide":""},"footnotes":""},"categories":[57],"tags":[],"class_list":["post-5397","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai"],"_links":{"self":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/5397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/comments?post=5397"}],"version-history":[{"count":6,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/5397\/revisions"}],"predecessor-version":[{"id":5415,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/5397\/revisions\/5415"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media\/5414"}],"wp:attachment":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media?parent=5397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/categories?post=5397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/tags?post=5397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}