How to Code with ChatGPT: Complete Guide for Beginners to Advanced Programmers
Other Videos📅 2024-04-07
Transcript
[00:00] in today's video we're going to learn how to code with chat gbt more specifically I'm going to go over my road map when it comes to coding of gbt right now I'm building out an entire artificial intelligence integrated software and using Chad gbt 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 Chad gbt whether you're a complete beginner EG 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 G to give you my insight on how to use this
[00:31] 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 repr 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 a Chad gbt so we get more effective outputs of code next we're going to learn whether you would ever use 3.5 whenn 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 gbt in this store that will actually be extremely helpful
[01:01] in your journey in beginning software development let's go Ahad 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 fullon dedicated video with coding with Chad gbt 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 going to code with chat gbt personally I don't like creating a gbt special specialized for my project I actually like using
[01:31] 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 Chad gbt 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 no into a versatile platform for podast casters and audio content creators now users can either upload
[02:02] 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- incumbency set of tools to boost audio content accessibility and usefulness I'm going to go ahead and leave the custom instructions I make
[02:33] 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 it customers everything thing like that we're going to go and provide the underlying hardware and software you're
[03:03] going to use to create said thing so we're going to say my development process include to continues 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 Chad gbt 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 a parameters and arrow functions and preferring concise
[03:34] formatting within object literals the purpose of this part is that you notice within the code there's certain code that is outputed that's bad or outdated you you can include it here so Chad jbt 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 gits 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
[04:04] 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 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 a sudden Chad gbt 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
[04:34] obviously plug- andplay 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 chadu te can just keep rambling on which can get very annoying when you only want a very
[05:04] specific part of code so our next sentence says before diving into Specific Instructions I'll seek for clarification on exact updates or changes you're aiming for to avoid assumption 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 chbt to make a assumptions and coding CU that can get very frustrating and in our final sentence here we're saying in discussing external resources or
[05:35] 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 Tonio 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 chat GT is ready to go to gut check this right off the bat we can go ahead and say what
[06:06] 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 gbt store we're going to scroll all the way down here keep scrolling oh research analysis I wonder who made this PDF reader y y'all should check that out click it and give it five stars keep coming down here I would suggest you to
[06:36] use ask the code what ask the code 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 gbt 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 is it allows you to reference the file in its entirety when you're coding it out so something in the pair with ask the code and your own chat
[07:07] gbt chat that's the way I'd go about it in that context knowing this if you're genuinely if this kind of scratched part of the brand 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 about 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
[07:39] going to Cod out a little bit of a front end right now but it's going to be like basically like just showing you the power of Chad gbt now what I will say when it comes to Chad gbt is that this is not going to be your end all end 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
[08:09] 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 as 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
[08:40] our profile on the left here we got our stats dog cats dog cats I'm going to goad and say based on this image provide me the j6 react front and 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 Proctor it past that let's just get the structuring first major thing notice how we are importing react to understands we're using react partly because I identified that second major
[09:11] 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 the 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 user profile 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
[09:41] plug-and-play blocks uh 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 jss frontend here with returned and we got a nice little struction so far so first first thing I really like about coding with chat gbt 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
[10:11] out user profile container profile card profile details 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 whoaa what's going on what's going on it's okay use what I referenced earlier with the gbt also use this as code typically you're not going to be able to Proctor 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
[10:44] questions ask questions that's how you're going to learn this stuff 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 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
[11:15] context is how we visually see it of course so like the UI here it's made of CSS uh 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 uh the class name space p but I like giving classes to every single element it allows just for clarity when
[11:46] 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
[12:18] you're very new to coding or maybe youve 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 is 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 dealing with when coming with web
[12:49] development you want to use jpex you want to use it very small or web PS 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 in 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 Chad gbt 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
[13:19] can be very useful and the reason this is useful is because watch this I want a front end of a 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
[13:50] 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 Al 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 a essay back is 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
[14:20] intricacies when it comes to coding with gbt but this gives you a really General oversight of like how to approach it I'm going leave a gbt 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
[14:51] see you in the next video