How to Build a Landing Page with an AI Assistant and Replit
- Scott Colenutt |
- 12 steps |
- 2 minutes
1
Let's write our prompt in ChatGPT to create our code.\
\
Navigate to [ChatGPT](https://chat.openai.com/)
2
Submit the prompt below in your AI assistant, **replacing \[your name\] with your name**.\
\
---\
\
*Act as a web designer and Replit expert. \
\
Create the HTML and CSS code for a simple website landing page. \
\
In the centre of the page there should be some text in a large, bold and black font saying 'I'm \[your name\]. Welcome to my 100DaysofAI Experiment.' \
\
In some smaller text below this heading there should be a line of text that reads' Sign up to hear about my latest experiments.' \
\
Below this should be a text entry box that allows users to enter their email address. The placeholder text within the box should read 'Enter your email address'. There should be a submit button next to this field. The Submit button should read 'Submit' and should turn light green when hovered over. \
\
Please write a simple step-by-step guide, including the HTML and CSS code, so I can copy and paste this into Replit to create the landing page.*
3
While ChatGPT is processing your request, login to Replit and on the Home screen click the blue **+ Create Repl** button.\
\
Select the option that says '**HTML, CSS, JS**' from the drop-down template menu.
4
Under the '**Title**' field, **give your Repl the title '100DaysofAI Landing Page'**.\
\
Click the **+ Create Repl** button.
5
You'll now be inside the Replit console for your project.\
\
There are three preloaded template files for our project in the left-hand menu. \
\
**You won't need the 'script.js' file** for this lesson, **so delete it** by clicking the three dots at the end of the file.
6
Now delete this file using the submenu that appears by clicking on '**Delete**'.\
\
On the pop-up that appears, click the red '**Yes, Delete**' button.
7
Head back to ChatGPT where you should now see some instructions and code files that have been created by ChatGPT!\
\
Your ChatGPT response might not look exactly like what's in the screenshot below, but you should still have generated some instructions, alongside some HTML code and CSS code.\
\
Locate the HTML code and copy the code to your clipboard.
8
Head back to your Replit console, ensure the '**index.html**' file is selected and **delete all the code that's in this file**. You can do this by highlighting the code as you would in any text editor and pressing delete.\
\
**Now copy and paste in the HTML code from your clipboard**, starting from the first line of this file.
9
Head back to ChatGPT and **locate the CSS code it has generated for you.** \
\
Copy this code to your clipboard.
10
Head back to your project in Replit and ensure the '**style.css**' file is selected. \
\
Again, delete all the existing code in this file and copy and paste the CSS code from your clipboard, starting from the first line.
11
Your two sets of code are in place, so now all you need to do is click '**Run**' to execute your code and preview it in Replit.
12
Your newly created landing page will now appear in '**Webview**' on the right-hand side of the page!\
\
**Don't worry if your landing page doesn't look exactly like what's in the screenshot below.** The HTML and CSS code that's generated by ChatGPT will vary slightly for each user. \
\
**The goal of this lesson is to understand how you can create code using ChatGPT and execute it for demonstration in Replit.** As you become more comfortable generating code using ChatGPT and using platforms like Replit for AI-powered product creation, it'll become easier to know how tweak things to get them exactly the way you want them.
