How to use ChatGPT for web development

Ira Mataić / 19 Apr 2024
  • Inovacije
how-to-use-chatgpt-for-web-development

TABLE OF CONTENTS: 



In the world of creating modern and user-friendly looking websites, things can get pretty tricky, especially if you're not a coding expert.


ChatGPT is an AI chatbot that helps you create a basic website in just a few minutes.


No need to search through Github and Reddit posts to find code snippets to build your website. Simply ask a coding question, and ChatGPT will provide you with explanations and simple copy-paste snippets.


49% of companies presently use ChatGPT, while 30% intend to use it in the future. (Master of code)

Can we design a website using ChatGPT?


The first thing you need to understand is that ChatGPT cannot create a website for you, but it can help you with the code or provide a step-by-step guide on how to build one yourself.


It is very useful if you have limited experience in website design and development.


Here is an example for a prompt “Provide a template for a home page on a website in HTML”:

template-for-creating-the-start-web-page-in-html
webiste-homepage-made-by-chatgpt

Sometimes at the end of the generated code, ChatGPT will provide you with notes.


For example, it can provide instructions such as: “you need to change the paths of your images to display them on the page” or advice “a large, attention-grabbing section that introduces the shop and a call-to-action button.”


But coding isn’t all it can do.


AI software such as ChatGPT, can be very helpful for other things like idea generation, writing names and descriptions, and creating SEO content.

Can ChatGPT analyze wireframes?


We gave ChatGPT a wireframe of our Gauss homepage, hoping to see its analysis and suggestions.

chatgpt-wireframe-analysis-of-homepage-website-1
chatgpt-wireframe-analysis-of-homepage-website-2

You can ask ChatGPT to give you an idea how to create a specific section or a whole wireframe.


What if you don’t have any idea how to create a wireframe?


Take a look at our example:

chatgpt-suggestion-wireframe-layout-for-online-webshop

Can ChatGPT 4 turn design into code?


Last update for ChatGPT - 3 was in 2022 and, unfortunately, it does not have the latest features.


ChatGPT - 4, on the other hand, can handle text and images as both input and output, while also generating easily copied code.


For example, you can take a pen and a piece of paper, just like we did, and draw a sketch of a website page.


We have made a rough homepage sketch, submitted it, and asked ChatGPT to create a HTML and CSS code for that page.

chatgpt-website-design-based-on-a-drawing-1
chatgpt-website-design-based-on-a-drawing-2

We took that code and pasted it into a HTML and CSS visualizer.


This is the website we ended up with:

blog-website-homepage-made-by-chatgpt

From here, you can ask the AI chatbot to provide more details about specific website segments. You can continue using ChatGPT, or opt out for more coding-oriented AI chatbots such as Uizard, GitHub Copilot, or Wix ADI.

Can AI replace Web developers?


Similarly to the question „Can AI replace UI/UX designers“, the answer is, probably not.


ChatGPT certainly cannot replace web developers, mostly because it is not built to replace them.


With the rise of more sophisticated AI tools such as Devin, that can develop software independently of input, who's to say.


We asked our web development colleagues what they think of AI tools, do they use them, and where they see it going.


„I do not use AI tools. I prefer to learn and research by myself, not get handed the answer.“ said dev Laura, Ivan added „I do not use AI tools at all. Why would I contribute to something that should replace me.“


The overarching thought is that AI has a long way to go to even come close to replacing human web developers.


But even then, replacability is questionable.


One of the common reasons for questioning AI developers is the lack of creativity.


AI can be taught how to design and code, but replacing experience, intuition, and human creativity is a challenge.


Plus, the limited capabilities of testing and solving new problems, paired with a lack of communication and project management points to a long road to further improvements.


For now, it can be a useful tool to some, a hindrance to others, and for a few, something to ignore altogether.