Let's start by submitting our prompt in an AI-assistant to create our code.\
\
In this example, we're using Google Gemini, but you can use any AI-assistant of your choice and the output should be similar.

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, responsive 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\].;*

*On the line below it should read 'Welcome to my 7 Days of AI Coding 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.* \
\
*All items should be horizontally aligned. \
\
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.*

While your AI assistant is processing your request, login to [Replit ](https://replit.com/?utm_source=100school&utm_medium=email&utm_campaign=7daysofaicoding)and in your dashboard click the "**+ Create Repl"** button.

Click "**Choose a Template**" and select the "**HTML, CSS, JS**" template.

Give your Repl a Title and click "**+ Create Repl**"

Head back to your AI assistant and copy the HTML code it's provided.

Head back to Replit and replace the index.html code with the code you've just copied from your AI assistant.

Head back to your AI assistant and copy the CSS code it has provided.

Now head back to Replit and **click the + icon next to your index.html tab.**

Paste your style.css code from your AI assistant into this file.

Now that your two sets of code are in place, hit the big green "**Run**" button to render your code in Replit's Webview.\
\
...and, like magic, your landing page has been created!\
\
**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 AI assistants will vary for each user. \
\
**The goal of this lesson is to understand how you can create code using AI assistants and execute it for demonstration in Replit.** As you become more comfortable generating code using AI assistants 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.

Hit the "**New tab**" button to open up your page in a full browser tab. \
\
Resize the browser so that you can test your page's responsiveness.

How to Build a Landing Page with an AI Assistant and Replit