Here’s how you can use GPT-4 to generate a website

Yes, you heard that right! Today I’ll be walking you through creating an entire frontend website with 0 knowledge on anything website related.

A little bit about myself, I mainly only have experience with CI/CD and IaC as a DevOps Engineer. I’m completely clueless about Frontend design, React, UI/UX; so do take this article with a pinch of salt.

Now let’s get started :)

Walk Through:

First off, since we(I) know nothing about UI/UX. Let’s get the A.I to understand some context and about our ignorance.

First Prompt:

Explain to me the relevant terminologies of UI/UX in creating website designs. Do it in a way that a newbie would understand it and be able to think about the components in creating a website.

Second Prompt:

continue

Third Prompt:

With these terms in mind, now imagine a website’s homepage with a header, navigation bar, feature image and content page, then I would like you to now create the website using React.

If you understand the assignment, reply ‘I understand’. After I reply with ‘proceed’, you may continue to show me the commands used, file structure of the project and codes in the relevant files that you used to create the website.

Fourth Prompt:

I understand

Now you may be wondering. What is the point of asking such questions, this is to allow Chain Of Thought Prompting to occur which will allow the model to gather better information about the objective you’re trying to accomplish and overall better results. So do try it instead of asking 1 sentence prompts.

Now for our results !

You can just scroll through quickly if you’d like
Link to github: https://github.com/BrianLYS/MediumTopics/tree/main/WebsiteCreation

Steps:

Initialise react

npm install -g create-react-app
create-react-app my-website

Fill in the files

src
├── components
│   ├── Header.js
│   ├── Navbar.js
│   ├── FeatureImage.js
│   └── Content.js
└── App.js

Start server

cd my-website
npm start

This is how the website looks !

Standard template nothing much to look at

Well it looks like it could use alot more work, but at least we got our headers, menu, a picture and content! I don’t even have to watch spend hours watching videos for this.

You could probably ask copilot to make more edits and stuff but i’ll just end it here.

Now have fun generating your new website then claiming React experience in your CV. Brian signing out :D

Bonus

I tried getting GPT4 to generate the website in another theme for me with this prompt

Prompt 1:

With these terms in mind, now imagine a website’s homepage with a header, navigation bar, feature image and content page, then I would like you to now create the website using React.

If you understand the assignment, reply ‘I understand’ only.
After I reply with ‘proceed’ and ‘theme of the website’, you may continue to show me the commands used, file structure of the project and codes in the relevant files that you used to create the website.

Prompt 2:

proceed, sci-fi

Ehhh it looks the same, guess we’re not getting replaced yet ? At the time of this writing, I still don’t have access to the plugins so maybe that could spice things up. Stay tuned for more !