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 |
Tools: ChatGPT & 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: |
Open ChatGPT and Replit in separate browser tabs. |
Follow this step-by-step guide to complete todayâs lesson. |