Transcription
In today's video, we're going to learn how to code with ChatGPT. More specifically, I'm going to go over my roadmap when it comes to coding with GPT. Right now, I'm building out an entire artificial intelligence integrated software and using ChatGPT as a helper here and there. So I'm going to give you my insight, everything you should know above the board, and let's go ahead and jump into today's video.
Okay, so I'm going to go ahead and give insight on how to start coding your ChatGPT, whether you're a complete beginner—e.g., you've never, maybe all you've done is print "Hello, world" in the console—all the way to a very advanced user. I'm going to give you my insight on how to use this platform effectively in the context of coding. Now, the languages I'm going to be talking about today are going to be Python, Node.js, CSS, HTML. You can procure this however you want, depending on the context and the situation you're dealing with.
First major thing we're going to do together is create custom instructions for ChatGPT, so we get more effective outputs of code. Next, we're going to learn whether you would ever use 3.5 when coding, and funny enough, you actually will, and I'll give you the use case for that. Finally, if you're completely new to coding, I'm going to give you a GPT in this store that will actually be extremely helpful in your journey in beginning software development. Let's go ahead and figure out how the heck we can use this platform.
If you're familiar with this channel, you already know I've talked about this a ton. I've always referenced it; I've given videos on it in the context of building out custom instructions, but I never actually did a full-on dedicated video with coding with ChatGPT. So that's the purpose of this video. Let's go ahead and start. We're going to hit our profile here, customize instructions, and this right here, my friends, is going to be the saving grace of how we're going to code with ChatGPT. Personally, I don't like creating a GPT specialized for my project; I actually like using customized instructions, as I have discovered better outputs this way. So we're going to go and create these together.
The first part of custom instructions gives context to ChatGPT of what the heck you're even creating. So we're going to be very detailed here, a lot more detail than you expect, in order to ensure we get consistent outputs when we keep coming back to this model. Therefore, let's break it down sentence by sentence and create our custom instructions together. First sentence: What is our platform? I'm transforming audio notes into a versatile platform for podcasters and audio content creators. Now users can either upload their audio files directly or submit links to their content. For context, this is not a platform I'm currently developing; this is a pseudo platform. If you want to take this idea, go ahead. Add another sentence to further explain the platform. Audio notes upgraded capabilities will feature automatic generation of key topic summaries, translation of spoken words, and provisions of transcriptions in various languages. Another sentence: The main objective is to derive and amplify the value from audio transcripts, offering an all-inclusivity set of tools to boost audio content accessibility and usefulness.
I'm going to go ahead and leave the custom instructions I make today either in the comments or the description down below, so you want to copy it, paste it over, maybe change some words, change it to your project, or whatever software you're developing, to make this a little bit easier. Because what you'll see in this video is that these are very, very in-depth and very, very descriptive. We're sitting at 542 of the 1,500 words, and we're not even done yet. But as you notice, we're getting very descriptive on the description of our product. Once we've described the underlying software, its use case, its customers, everything like that, we're going to go and provide the underlying hardware and software you're going to use to create said thing. So we're going to say, "My development process includes" continuing on Visual Studio Code using Mac OS, utilizing React for user interface and Firebase for data management. Notice how I'm providing the front end, the back end, and the hardware. So when I get into conversations with ChatGPT, it isn't super annoying thinking I have a Windows computer or thinking I'm using AWS, and it knows what I'm using, and when coding, that's very important.
And finally, our last part here: My coding practices remain consistent, favoring parentheses, parameters, and arrow functions, and preferring concise formatting within object literals. The purpose of this part is that you notice within the code there's certain code that is outputted that's bad or outdated. You can include it here so ChatGPT recognizes it and knows for future conversations with it; it will give you the correct version of the code. Finally, just to make it simple when you're dealing with Git and pushing and pulling and origins, we're going to put the project directory, which for this fake project is audio-note-a. Don't worry if you've never coded before; you're like, "Corman, what the heck are you saying right now? This is not what I clicked on." I'll show you at the end here. If you've never coded before or you're a complete beginner, a useful tool to use on top of custom instructions so you can really get going here next is a pretty important part, y'all, is how you want it to respond.
So our first sentence here is going to be, "Begin with a one-sentence summary of the main goal for clarity. I appreciate concise, step-by-step instructions tailored to my specific code or files I'm currently working on." Let's not go down a rabbit hole where all of a sudden ChatGPT is talking about a file that doesn't exist; we stay on topic. Next sentence: "Please ensure your Visual Studio Code, Mac OS, React, Firebase setup—obviously, plug-and-play, whatever you're using—is up to date and aligned with these new capabilities. For each feature addition to modification, I'll provide concise, stepwise guidance, relevant code snippets, and configuration strictly adhering to your coding preferences, such as parenthesis usage and arrow functions," noticing how I'm repeating this, "and minimal spacing with object literals." This is on purpose; we want to ensure that when we come back to this days later, we don't have the same issues with bad code or outdated code. Following this, as we know, sometimes ChatGPT can just keep rambling on, which can get very annoying when you only want a very specific part of code. So our next sentence says, "Before diving into specific instructions, I'll seek clarification on exact updates or changes you're aiming for to avoid assumptions about your current setup or progress," so it's not going to assume that like five steps ahead we're on step one, and alternatively, it's not going to assume, "Oh, wait, have you even imported Firebase tools yet? Yeah, no, I did that like months ago." So this kind of stuff is very important; we don't want ChatGPT to make assumptions in coding, cuz that can get very frustrating. And in our final sentence here, we're saying, "In discussing external resources or potential solutions, I'll keep in mind the context of your project's current functionality and Firebase integrations, aiming for clarity, consistency in our dialogue, reminiscent of Jarvis, assistant to Tony Stark from Iron Man." Added there for a little bit of fun; it doesn't really work that well, that last part, but it's pretty fun just to throw stuff in there. Maybe you wanted to have it talk to you like Shrek.
Now, once we put in our instructions, all I have to do is save, and once I make a new chat, ChatGPT is ready to go. To gut-check this right off the bat, we can go ahead and say, "What software am I creating?" and it will say Audio Note, or I think it's called Audio Note—Audio Note. Okay, there's a gut check; it sees the custom instructions; it knows this. Now, before I give you an example of me coding with it, let me just show you a very, very special tool you can start using if you're completely new to code. Coming to the GPT store, we're going to scroll all the way down here, keep scrolling. Oh, research analysis. I wonder who made this PDF reader. Y'all should check that out, click it, and give it five stars. Keep coming down here. I would suggest you use AskTheCode. What AskTheCode allows you to do is connect to your GitHub repository, and therefore, when you're coding on a file, instead of you needing to paste the code into the chat, you can go ahead and reference it using a GPT like this, saying this. I only ask you to do this, or I would only do this if I was brand new to coding and I was very limited in the knowledge of how to code. This is helpful; it allows you to reference the file in its entirety when you're coding it out. So something in the pair with AskTheCode and your own ChatGPT chat—that's the way I'd go about it in that context. Knowing this, if you're genuinely—if this kind of scratched a part of the brain, you're like, "I like this, I like this"—check out this video right here where it basically goes over every single software and tool you need to build out an AI software; it's like a five-block process; it goes over the front end, the back end, resources, everything above the board. Check out that video here. Let's go and code.
Now that we have custom instructions like this, you'll notice it becomes a lot easier when coding. Corin, why are you so big right now? That's because I want to show you something really cool. So I got a little graph paper here, and we're going to code out a little bit of a front end right now, but it's going to be like basically just showing you the power of ChatGPT. Now, what I will say when it comes to ChatGPT is that this is not going to be your end-all, be-all, but alternatively, once you have enough context of how to code—so you're more in the intermediate/advanced coder—you're going to be able to leverage this in, like, you already know what to say and write out, but this is just going to print it out a lot faster. So the way you talk to it is very important here. Let's go ahead and first draw out a front end and then code a front end.
Okay, so here's my drawing; it's probably going to be backwards, y'all, but basically this drawing—actually, I can just show you with a photo. So I'm going to take a picture of this, but here's the drawing. We're going to take a picture of this; this is what I drew. And the reason I'm showing you this is, of course, code can work in the context of back end as well; I just want to show you this really cool trick when you're coding out a front end that you can do. You can actually draw out your front end, and it can look this bad, and you'll get enough just like basically structuring for you to play off of it past that. So here is our structuring right; so we got our maybe our profile on the left here; we got our stats: dog, cats, dog, cats. I'm going to go ahead and say, "Based on this image, provide me the JSX React front-end structuring. We want to have it aligned vertically in the middle." You don't have to spell everything correct, and let's go ahead and enter here. It's not going to be perfect output, of course; it's not going to be perfect output, but we're going to be able to procure it past that. Let's just get the structuring first. Major thing: Notice how we are importing React; it understands we're using React, partly because I identified that. Second major thing is that right off the bat here, here is a major issue with this code. Oh, this code's horrible, Corin! Like, I'm not going to call it app. Of course, you're not. So first thing I like to do when coding is—no, stop. We are going to make a new file for this called—uh, what is this say? userProfile.js or .js and user.copy.css. So working with React specifically in the context of front-end development, you're going to be dealing with a lot of just plug-and-play blocks. Typically, you have a meta file where basically you put in like the entire structuring of whatever that page is, but within that structure, you have different components. We got our import of the CSS, we got our JSX front end here with return, and we got a nice little structure so far. So first, first thing I really like about coding with ChatGPT is the fact that it will personalize the CSS names, and it will personalize different functions you have within your logic. This is little—this is small, but end of the day, it saves you time because I'd have to type out userProfileContainer, profileCard, profileDetails, but when I reference this code in the future, maybe like a month from now, I'll be like, "Oh, okay, this—this makes s—this makes sense." We got a relevant CSS right off the bat. You can notice that some of these parts don't have CSS. If what I'm describing to you right now is a little confusing, you're like, "Whoa, whoa, what's going on? What's going on?" It's okay; use what I referenced earlier with the GPT; also use this as code. Typically, you're not going to be able to procure as well as this in the beginning, like right off the bat; you may have gotten this block and be like, "I guess this is the code." Ask questions; ask questions; ask questions. That's how you're going to learn this stuff; it takes time; it's not a joke; it's not a game. Those videos that say, "Oh, code an entire platform in 10 minutes," not true.
We're coming back over here. Here's what's great, and here's why it's so advantageous to any coder. So I have my structuring here; go ahead and grab stuff like this: Command C, Shift Enter, Enter, Command V, Command C, Shift Enter, Enter, Command V. We would say, "Please give each of these CSS classes"—CSS classes in this context is how we visually see it, of course, so like the UI here, it's made of CSS—"when you give each one a class specifically, this allows you to change the underlying variable how it looks." These could be variables or fix; obviously, this is fix, but alternatively, for example, the name, I could increase the font size, the different bold. In theory, I could use the class as the outside and then reference the name using the class namespace P, but I like giving classes to every single element; it allows just for clarity when I code. But here we go. So this is a nice structuring of my original image here, but there's other stuff that could be in play here. So let's say I'm coding and I'm like, "Man, I have no clue how to import or how to even deal with an image file." What I can do now is I can go ahead and just play around with it. So sadly, when you click stuff like this, it doesn't show you the other part of the div, which would be nice. I believe it's right here. You can say right here, "Okay, for this part, can we add an image?" These are the type of questions you ask when you're very new to coding or maybe you've never—you're not comfortable with React yet, and these are the kind of questions that could lead to productive responses. First thing I want to point out: This is not perfect, but here's when it gets perfect when you actually can understand and really understand the code, cuz you know when it's BSing you, basically. And sometimes this thing can BS you, as you saw for our original output. Keep that in mind. This actually was pretty accurate; you'd have some path within your VS Code project to the image they're dealing with. When coming with web development, you want to use JPEG, you want to use it very small, or WebP. And here we go; that's actually correct; it's a variable; it's this variable; what it in there. I could go way more in-depth with coding with the back end and front end, so let me know in the comments if you want to see more videos like that. It's a little bit more niche than what I typically do on this channel, but I feel like it's important because of the fact that you can do so much stuff with ChatGPT.
Now, now there was one last thing I talked about in the beginning of this video, which is 3.5. Why would I use 3.5? I would say if you're more on the advanced end/intermediate and you know how to code, you're comfortable with code, 3.5 can be very useful. And the reason this is useful is because—watch this—I want a front end of an image and a title text saying "Apples," really random, whatever, whatever. That—look how fast it's—it's—it's like just shooting it out. This is useful when you already have code; maybe you want to paste it over, and you're like, "You know, I just need you to print out this," and the code will come out like 90% correct, and you're like, "Okay, this is good." Copy, paste over, and you basically critique—not critique, but you edit and make the 10% that's incorrect correct. This is so useful that when you can download a model like this—AI—on your machine, holy smokes, would that be fun? If you're on an airplane ride and you could use 3.5 while coding, just expediting the overall processes. So I encourage you to use 3.5 more in the context of really just getting the code out fast, and then you just have to do a little bit of edits, right? It's like getting like an essay back; it's 85% correct; you got to fix the other 15%, but at least you got the code.
That just about does it. Now, there is so much more and so much more intricacies when it comes to coding with GPT, but this gives you a really general oversight of like how to approach it. I'm going to leave a GPT in the description down below that is made for creating—got some instructions you can start using yourself for completely free. So make sure to leave a like, cuz it's completely free, free, free, free, free. I'm going to leave a playlist at the end here from concept to software if you want to see more stuff when it comes to building out software with this new market we have emerging. I'll see you in the next video. That's the playlist I was referring to; it's been a 9-month-old playlist since the beginning of the creation of my software. That's a random video; could be good, could be bad. That's my face. I'll see you in the next video.