Learn Coding and Build a Web App Using ChatGPT In a Day, Part I
By asking clear and thoughtful questions
ChatGPT is great at explaining complicated concepts in science and engineering. I’d go out on a limb and say that it’s better than any college class I’ve sat in. I know the concept sounds scammy, and I contemplated on whether I should write it, but ultimately I felt that the benefit outweighs the skepticism. Okay, let’s get started.
Have a Design
Here is a simple design we’ll implement. It’s a landing page that collects user email and puts them in Google Sheets.
Anatomy of a Web App
Frontend refers to all the elements on the client-side that involve creating and modifying the visual components that you see on your computer, mobile, and tablet screens. In the case of web applications, we're referring to HTML, CSS, and Javascript.
HTML is used to create the structure of a webpage, and it includes everything you see on a web page. You can either write it statically by editing .html files or dynamically generate it using any programming language such as Javascript.
CSS is used to apply styles to HTML components, such as changing the color of buttons or the text on a page.
Javascript is used to add logic to HTML components, such as making text move based on the location of the mouse on the screen and requesting information from a server to display on the webpage.
Backend development primarily involves manipulating local and remote computers to store and serve information.
Packets of information travel between the frontend and backend via protocols named HTTP (open) or HTTPS (encrypted).
Asking the Right Questions
We want to start by creating a basic index.html, styles.css, and script.js file. Although the naming of these files is not crucial, it is good practice to use descriptive names that reflect their purpose. In the image below, on the left, you can see the files you need to create in your folder, while on the right, you can see the question I asked ChatGPT.
It looks great! Let's copy and paste the code into the index.html file. You can use any code editor or even the TextEdit app on your computer. Once you've pasted the code, you can go to your web browser and navigate to the index.html file using the 'File' -> 'Open' option. You should be able to see the changes immediately, which is quite exciting!
In HTML, if one component is nested inside another component, such as <body><div></div><body>, then we say that the <div> is a child of <body>, and <body> is the parent of <div>.
To implement our design, we will use four HTML components: <div> to group the left and right sections, <img> to display an image, <p> to display text, <input> to collect the email that users type in, and <button> to send the email to our backend.
ChatGPT generated the perfect answer. I copied and pasted the code inside the <body> tag. The only changes I made were moving the 'balls.jpg' image to the same folder and updating the <img> tag's src attribute to reference 'balls.jpg'. If you refresh your browser for the index.html file, you should see the updated web app. It's pretty magical!
Now, it's time to make it look pretty. According to our design, the image is on one side, and everything else is on the other. To achieve this, ChatGPT recommends wrapping our two <div> elements inside another <div> tag. We can add an additional class attribute to the <div> element with the value of "container" to make it easy to select in CSS.
Now, let's get into the basics of programming. HTML and CSS are markup languages, which means that they don't allow you to write logic. This is where Javascript comes in. With Javascript, we can create server-side code using Node.js. Node.js is a variant of Javascript that can control the network layer of your computer. To use it, you'll need to install Node.js on your computer. Once it's installed, you can copy the entire code and paste it into a file called server.js.
That's pretty much perfect. When you navigate to this folder using terminal and type node server.js, your computer will open a network port and serve all the content in this folder. You can access it by typing http://localhost:3000 in your browser.
Parting Thought
There are still a few things left to do here, such as filling in our content, finishing up styling, and implementing an API. However, the key point is that by asking thoughtful questions to ChatGPT, we can pretty much learn anything we need. Why don't you try completing the rest of the project by using ChatGPT? Here's the link to the code at this stage. If a particular line of code doesn't make sense, you can ask ChatGPT to explain it.
