|

Day 21 of 100DaysOfAI Coding

Day 21 of #100DaysOfAI
Hello there!! 👋
Today you’ll be using ChatGPT to write code for a landing page and then bringing this code to life in a tool called Replit.
As always, no coding skills are required!
Okay, time to build 👩‍💻
Task for the Day 
🧱 Project: Generate Code with ChatGPT
⏲️ Estimated time: 30 minutes
🛠️ ToolsChatGPT & Replit
Context Building 
This lesson is all about learning how to use ChatGPT for generating code. No coding experience or knowledge is required to take this lesson.
The beauty of AI!
You’ll use ChatGPT 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 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 ChatGPTHow to build a landing page project in ReplitHow ‘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 ChatGPT, 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 ChatGPT 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 hereCreate an account with Replit here
Time to Cook 
Follow the steps below to build:
1️⃣ Open ChatGPT and Replit in separate browser tabs.
2️⃣ Follow this step-by-step guide to complete today’s lesson.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *