🔥 Building a Website Just Got Easier with ChatGPT
Tags: webdev, programming, beginners, chatgpt
Published: 2023-03-14 16:07:14

OpenAI's ChatGPT language model is impressive and has already shown its worth in a number of fields. 

ChatGPT has proven itself useful in a variety of settings, from customer service to programming, by providing insights on customer inquiries and creating code snippets, respectively. Its proficiency in comprehending and processing human language has made it an invaluable asset to companies and individuals alike.

In this post, we will explore the many industries, including programming, where ChatGPT has proven to be an asset.

## Making a website with ChatGPT
We have attempted several prompts to get ChatGPT to write the HTML and CSS code for a simple website template.

This is what we first prompted:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmwp80zfa39e1l98you3.png)

ChatGPT provides us with the source code for a complete website mockup, complete with a navigation bar and a few sections. You may easily jump from one part to another by clicking on the corresponding link in the navigation bar.

To see the results instantly, we copied and pasted the code from ChatGPT into [Lightly IDE](https://www.lightly-dev.com/), a web-based IDE that allows us to code in different programming languages right on our browsers.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/td9vw3wnce59ewib7fms.png)

## Requesting ChatGPT to style the website.
The first code provided by ChatGPT was rather simple and bland, so we decided to ask ChatGPT again whether is it could spice the website up with some CSS styles.
 
And of course, the answer is absolute.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2l3mntkbepk5xn86szlh.png)

It's astonishing to see the stark contrast between a website with CSS and one without it. And not to forget, we've never written any lines of HTML or CSS code by this point.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mxi0uzur5oquupmqp3ef.png)

We've even prompted ChatGPT to provide the code to import a CSS file. And one thing we really like about ChatGPT is that it gives a detailed explanation of the code it gives. This way, a beginner learner can understand what the question is asking instead of just copying the code.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zp9jgnbehwfydxjhz4ls.png)

## Tweaking the website a little further.
We would not be satisfied with these simple codes prompted by ChatGPT, as we would like to see how far it can go.

### Realigning navigation bar.
We tried to ask ChatGPT to realign the navigation bar from left to right, and as expected, the result was just perfect.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/la6xlhnhwwt0ykj1qa3w.png)

After applying the code into CSS:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00y2zuizsufhtw80td7x.png)

### Changing the website font.
We also prompted ChatGPT to change the website font to Poppins so that it may look better.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/urwd30lzq6oj4j7yakx8.png)

After applying the code into CSS:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cyhab4vpuwst6m12yjj9.png)

Check out the full code of what we did with ChatGPT here: https://d4698a5f25-share.dcs.lightly-dev.com

More possibility to use ChatGPT for the whole coding process.
ChatGPT can do a lot more than what is written in this article. ChatGPT isn't just a simple chatbot that forgets what you asked it after it gives you the answer. It remembers what you said in the chat, so the prompts you make are always related to what you said.

With this characteristic, you can also continuously improve your result given by ChatGPT.

In addition to what we've tried on ChatGPT, you can make the website even better by adding a blog module and integrating PHP and MySQL databases, and ChatGPT can provide you with very detailed steps.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrqt4z6cyrz4p9v45j9z.png)

And the most surprising thing to us is that ChatGPT reminds us to give a more clear and more specific requirement when our prompt could be too vague or subjective.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d3xj2qka3xddhdq102u2.png)

## No, ChatGPT is not your reason to stop learning to code yet.
Bear in mind that ChatGPT is not meant to replace actual coding education. Instead, it's supposed to serve as an aid to your existing coding abilities.

Despite the fact that ChatGPT may produce code snippets and provide explanations, it is still crucial for programmers to grasp the reasoning behind the code and the underlying principles. It can be difficult to make full use of ChatGPT and to troubleshoot any problems that develop without a thorough grounding in coding skills.

By the same token, you shouldn't view utilising ChatGPT as a way to abandon your pursuit of becoming a better programmer; rather, you should view it as a supplement to your existing toolkit.

## In Conclusion
ChatGPT can be a fantastic resource for developers with some familiarity with the fundamentals of computer programming. Using its prompting features, you can quickly generate code snippets for various projects, saving time and effort. However, it shouldn't be used in place of learning the fundamentals of programming. Incorporating your own expertise with ChatGPT's features allows you to advance your coding skills to a new level and complete more challenging projects.