Table of Contents
Do not index
Do not index
Hello there!! 👋
Today you’ll be using ChatGPT (or your preferred AI assistant) to write code for a landing page and then bringing this code to life in a tool called Replit.
As always, though you’ll be spending time in a more technical environment, no coding skills are required!
Okay, time to build 👩💻
Today’s Task📝
🧱 Project: Generate Code with ChatGPT
⏲️ Estimated time: 30 minutes
🛠️ Tools: ChatGPT & Replit
Context📄
This lesson is all about learning how to use AI assistants for generating code and learning new platforms. No coding experience or knowledge is required to take this lesson.
The beauty of AI!
You’ll use ChatGPT (or an alternative) to write HTML and CSS code that can be used to build a simple landing page.
You’ll then use AI-powered software creation platform, Replit, to bring your landing page to life.
We’re only going to graze the surface of Replit in this lesson, but if you’d like to learn more about more advanced use cases for Replit, check out their YouTube channel.
This thread on X from product creator Charlie Ward is also a great demonstration of how a Chrome app, using just ChatGPT and Replit, can be built with a little more time and experimentation.
Don’t worry about the aesthetics of your landing page creation for today’s lesson. The goal today is just to get a feel for how AI assistants like ChatGPT can be used to act as copilots, helping you to use new tools and platforms and even to create code from scratch to build your own tools and assets.
In this lesson you’ll learn:
- How to write code using AI assistants
- How to build a landing page project in Replit
- How ‘Run’ your code in Replit to bring it to life
Let’s Prep 🥗
Before starting the lesson, make sure you have accounts set up for ChatGPT and Replit, as you'll be switching between the two.
Don’t worry if the screenshots you see in the guide don’t quite match what you’re seeing. The outputs in AI assistants, and subsequently in Replit, will vary slightly for each person.
If you’re more comfortable with HTML and CSS, feel free to tweak the suggested prompt (in the step-by-step guide) or the code that’s generated by your AI assistant to customise your landing page.
🔥 Get ready to build!
To make your life easier when you build, it’s good to get some practical stuff out the way first. Follow these steps so you’re ready to build:
- Create an account with ChatGPT here
- Create an account with Replit here
Time to Cook 👩🍳
Follow the steps below to build:
- Open ChatGPT and Replit in separate browser tabs.
- Follow this step-by-step guide to complete today’s lesson.
That’s a wrap, we hope you found this lesson helpful!
- If you have any questions, feel free to reach out.
- Want to learn NoCode? Join #100DaysOfNoCode for free.
- Want to learn AI skills? Join #100DaysOfAI for free.
Written by
