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

1

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.

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, 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.*

3

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.

4

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

5

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

6

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

7

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

8

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

9

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

10

Select the "**Files**" option.

11

Select "**style.css**"

12

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

13

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.

14

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.