How To Use AI To Code a Website For Beginners
Other Videos📅 2025-06-19
Transcript
[00:00] Let's learn how we can take AI code as if we have no coding experience and push it to a real website like you saw on that phone. Therefore, by the end of this video, you're going to finally learn how to take code that you find in those little AI model chats and actually use it. Sound good? Let's jump in. Best showcase how to do this. I'm going to use Gemini here. We're going to put in a simple prompt, get some code, and see how we can actually start leveraging it. Obviously, with these AI models, you could use chat GBT as well, Claude, etc. Let's go and be in here. So, let's assume we were creating a chat. I'm going say, let's build a Reactbased landing page. have the landing page be for my AI newsletter. I'm going to hit
[00:31] enter here and we're coding. Now, the typical workflow here is that you're coding and then you get a nice little preview section of like what it looks like within the actual AI chatbot interface. But the one thing that as you probably already know is frustrating is like, okay, but Corbin, I actually want to use this code. I want to take it out of this. So, I'm going to show you how to do that. Throughout this video, I'm going to be pointing at different tutorials that will reference how to do certain tasks more in depth. I just want to give this real quick video just to give a brief overview of simply code here, actual output here. One other
[01:01] thing that I forgot to point out for that prompt. Make sure you have canvas selected here. So, select that then put in your prompt. So, it's generating the code here. And this is what I'm talking about. We get our preview. But what do we do now? Assuming we went back and forth here, added stuff, remove stuff, we get to a point that we like it. So, we got AI newsletter here. Scroll down. Expert insights. Ready to dive in. Newsletter CTA. Looks good. So the first thing that's native to Google Gemini is our ability to actually export this code directly into Replet. So in order to do that, we can close out of the canvas UI
[01:31] here. Come down to share and export and export to replet. Now I'm going to be honest with you all. Sometimes this little export to replet feature, it's not showing up. It's a little buggy. So if you run into this issue, I would suggest you just take the code that you currently created up to that point, paste it into a new chat, and just essentially proctor Gemini to be like, "Hey, give me this option." When you do that, you're going to be taken to Replet here and you can run it, see it in an emulator, and go as far as deploy as well. So, the first video I'll leave in the description down below if you want more context of what Replet is and how to use Replet. It's a fast 7-minute
[02:01] video. Check it out. In this video though, I want to show you how to take this code and actually push it to something like Cursor AI. I like using ideides like Cursor AI, VS Code, Windsurf when doing development as it's just better development flow and process. You're able to connect it to GitHub. GitHub's like the cloud. Think of it like Google Docs rather than a doc on your computer. Obviously, there's more tailed with that, version management and stuff of this nature. For now, let's connect it. So, first things first, let's create a folder. When I say create a folder, I quite literally mean right click on your desktop, new folder, give it a name, put in your documents,
[02:32] wherever it is, just create a folder. So, coming to my desktop, new folder, test folder code. Whatever it is, just name it. Select open project. Once you have it open, you'll see it all the way up here in the top left. And on top of that, let's open up terminal here. Simply coming down here, clicking terminal. We are inside the folder because you see it right here. So now that we're here, this next line, if you've never coded before, you're 100% going to get an error. Something along the lines of you don't have N.JS doesn't recognize the command. Don't worry. This
[03:02] is where my 28minute video showing you in depth how to set up your development environment comes into play. I'll leave it down below. It should be something along the lines of how to use Cursor AI for beginners. What's key here is that the steps and workflow that's shown there can work with any of these type of IDEs like VS Code and above the board. But once you get it working and it's good to go, we hit enter. What this is doing is this is creating a development environment which is a Reactbased app. I want to proceed. Y for yes. If you don't want to watch that 28minute video, I'll leave this doc in the description down below as well. This shows you exactly
[03:33] how to install Node.js which is required for Reactbased apps. I messed up a little bit of the command code here. We got to add that dot. Then we can hit enter. It wants to install a dependency. We're going to hit Y. It does have a slight issue with my naming my folder. Essentially, we can't have spaces in the folder. So, that's good to know. So, I'm going to remove those spaces. So, the spaces removed up there. We're good to go. Same exact line. Once we're in terminal, you'll notice that we're inside the folder. This is where we're actually just pushing the code. Enter. And here we go. We're installing a React base app. Now, what you'll notice is that while it's creating this, it's going to be creating a bunch of files
[04:03] over here. Don't worry, nothing nothing crazy is going on. This is supposed to happen from here. If you go to app.gs, this is where we render all of our code. When I say render, when you see a website and you go to a website, it's all rendered like YouTube. Right now, this is all rendered. So, we get to a point that we like our code. Let's grab it. You may need to format it. So, I'm going to just say please output as app.js and app.css. So, coming over here, we're going to scroll all the way up here. And the beginning of our JS file will always start with a React import. So, first, let's go ahead and copy over the CSS of our app. Now, CSS is what makes it looks pretty. So, like
[04:34] all the like rounded corners, the different coloring, etc. JS is more of the structuring. So for now, let's go ahead and just copy it all. Command C, control C app.js and paste over. Now, this wants to give like the CSS and the JS as well. Not necessary. Just import the React. Here you go. And then simply just grab all the components. Don't worry, I'll explain what's happening pretty soon here. And we're going to paste. There we go. Seems like I got an error here, but that's just a curly bracket situation. I guess if you ever run into this situation, always make sure your code is closed. So, we got curly bracket here. Enter. Enter. Curly
[05:06] bracket there. We're good to go. Uh, this essentially is when we're adjusting the font size or different things when the screen gets smaller. Let's get to the big part here where I'm going to show you how to actually render this code and explain a little bit of all the structuring and what everything means. Because the big thing with coding now with artificial intelligence is it's less on the fact of knowing what every single line means. That's how it was in the old days. Like you had to know everything. Now, it's more of how do you tell the AI exactly what you want to do based off your conceptual knowledge of software architecture. Sounds a little
[05:37] confusing. It's a lot simpler than you think. First off, just how do we render this? As anytime you watch a tutorial and you're like, what do I do? What do I do with the code? npm start. These kind of command lines of npm start. I wasn't just born and I knew it was npm start. Takes practice, takes learning. So, npm start enter. This is going to run our environment locally on our machine. Or in other words, if I was not connected to the internet, I could still run this. We are getting an error here. And it looks like the way that Gemini wanted to approach this was creating a global styles on top of the CSS, which is a little weird, but let's go and just
[06:07] import it over. That was the top line of this code, which honestly, let me just import the CSS. That's going to be way easier. And the reason I bring this up, and you might be asking yourself, why am I showing all these different errors? Is because end of the day when you're coding with AI, you're going to get weird stuff like that where for some reason, instead of importing it from the app.css, CSS. It wanted to do this weird global styles wrapping. This just comes with learning and when you have more experience, you'll be able to point out stuff like this with AI and be like, "What are you doing? This is not how you do it." So AI does hallucinative coding, which you probably already know. So by
[06:39] simply just importing the app.css file we have our landing page here. When it comes to stuff like Corbin, how'd you know to do this rather than that weird thing Gemini was doing? That comes with a little bit of experience. Obviously watching videos like this, you get context like that. But before I tie up this video here and just kind of run through this code real quick, just so you can start building the bricks, build brick by brick of how to understand architecture, one last thing. Cool. We have a landing page. We're able to take code and AI chatbot and actually render it onto a website page. But the fundamental thing we're missing here is
[07:09] version control and the ability to deploy this to a real website link. Eg the ability to share this with your friends, put it on Facebook, be like, I created a new app. Let me give you some resources for that. The first major video that I suggest you check after this for like the extra layers of software and web app development that are fundamentally important is going to be that 28minute video showing you how to connect this to GitHub, showing you how to install all relevant dependencies. And when I say dependencies, this if you ever played video games and you're like, I need to install this update in order to play multiplayer, think of dependencies like
[07:40] the same way in the sense of in order for me to do this functionality, I need to install the update. A good example of that is that I want to have monetization for my app. You need to install the Stripe dependency which is going to be your payment processor. 28 minute video is cool. And that's like Corbin, I just want to get as much meaty knowledge as possible as fast as possible. Let me reference two other playlists that might interest you because you might be like, you know what, this guy doesn't teach that bad. I want to check out some other stuff from him. I'm going to reference a three-hour 30 minute video that showed you how to build out a real landing page
[08:12] from zero lines of code all the way to webcafeai.com. Look it up. I show you how to build that and basically cost me nothing. The only thing that cost associated with that is a $1 domain. And then for some of y'all that are more looking towards doing something a little bit more crazy like understanding how to build out back-end infrastructure which is a little bit more complex, I built out a 2hour series that's completely free that shows you how to build out real functions. And one of the functions I built out in that series is how to create a chat completion request or essentially an AI chatbot that you can
[08:45] access through your web app. All really cool stuff. All the description down below. So check it out. All right. Coding 101 with Corbin Brown. Let's just jump through this real quick. Rule of thumb, you're going to import a CSS file for all the little cool stuff like navbar. What's the navbar, Corbin? The navbar or the navbar is obviously the top thing, but if you come over here and you know use command F, control F. So this the CSS here. Okay, here we go. What is happening with the navbar? Right. So we're dealing with the position sticky so it stays on the top. There is a backdrop filter. The color of
[09:15] the actual navbar itself, the opacity. the opacity is like, is it transparent? Everything of this nature. Now, a lot of this stuff is going to be very overwhelming in the beginning, such as what the heck does padding mean, Corbin? This is very much just plugandplay. Okay, you don't know what padding means? Put 10 here. Save. Oh, that's what padding means. It made the navbar huge when it came to this. So, a lot of this is plug-and-play in the beginning just to understand what it means. Of course using something like cursor AI we can come here hit command K ask a question
[09:47] about the code and keep learning. So that's that situation. So the CSS is what makes it look good. JS is the underlying structuring of that. So you have you know more global or parentheoriented CSS files like this. And then you could have like nesting of other CSS files not CSS files CSS classes and elements within a CSS element. I know it's CSS inception. You'll learn as you keep going here. The last thing I want to show you based off this file here that might be a little confusing is how it's rendering the underlying application. So we got navbar
[10:19] const. Okay, cool. We got hero and we got features and we got a return statement for each one. What's really happening here if we scroll down is that we then come down to our final element which is the app itself. And what you'll notice is look at this. It's calling back to these. So we got the navbar, we got the hero, we got the features, got the call to action. So for example, hero command F come up here. This is all this code and that association. So then when we render it, we only need to do with
[10:49] one line. Now here is what's happening here, but it's doing it in one file. This is what we call refactoring code, which is fundamentally extremely important for front-end development for making it scalable, legible, readable, and easy to maintain. I'll leave another video in the description of me refractoring code and showing you how to do that in 10 minutes. That just about does today's video. I know some of y'all that either are new to this channel or have been with this channel like Corbin, why were you suggesting so many videos in this video video? That's just because I don't want to feel like I'm beating a dead horse when showing this kind of
[11:19] information as I've done a ton of in-depth videos on all these topics. These kind of videos are very much like Corbin, I only came here for one situation. I got code in an AI chatbot. Show me how to put it into an actual repository, that little folder, and get something live, right? Get it going. I think the one thing I hate about YouTube tutorials is when they are teaching something but don't show you the cool stuff. So many AI coding tutorials will show you, hey look it, this is some cool code. I want to see it. I'm a visual person. So without further ado, those are two random videos. That is my face.
[11:50] I'll see you in the next