Only AI Frontend Coding Tutorial You Will Ever Need
Create an App's Frontend with AI📅 2025-01-12
Transcript
[00:00] let me show you the new way front-end development is being done with AI this video right here is going to allow you to take any element on any website and get the code for it any element Corbin any element we could take Apple's website Macy's website we could take all the UI elements from X as well therefore by the end of this video you'll know how to leverage AI front end and code sound good let's jump in today's tutorial could not have been done like two years ago it would have been impossible that's why I making it because basically there is no videos on this topic on the interwebs if there is put it down in the description down below I guarantee either isn't I'm going to show you how
[00:31] to do it in basically as fast as possible this new strategy so I have my react based app here this is going to work with any type of text app though so whatever language you typically code in the strategy about to show you will work to be clear though if you're just like Corbin how the heck did you just get to this step it feels like you skipped some since the purpose of today's tutorial is to show you the strategy and not how to just build out a react app I'm going to leave in the description how to build out a react app with cursor AI also with wind surf obviously you can also set up with vs code as well but like the big one here that if you really want a
[01:02] full-blown 3-hour and 11 minute video showing you how to do front end development in this new age check out that video right there 3 hour and 11 minutes this shows you strategies that were only possible in the last year and a half to realistically year therefore every single piece of coding content when it comes to frontend development pre 2022 is not as relevant as it used to be obviously it's relevant in the sense of maybe like fundamental stuff and structuring but not the way we approach it so let's approach it so here is step one to the strategy find something you like so so for example I am on Stripes web page here you know I'm
[01:32] scrolling through this looks cool that looks cool I find myself here and I'm like you know what I really like this section I want to take this for my own website or software therefore all we need to do is this screenshot that specific section so for me I'll just grab this command Shift 4 on Mac screenshot Step One is done so now that I have that and I have that screenshot obviously let's come back over here to our react app here in theory I should make a separate file that's just for this component so let's actually go ahead and do that is not perfect structuring I know I'm just trying to show you how this strategy I'm going to
[02:03] go ahead and call this like Carousel DJs and then we'll do Carousel CSS whatever language you use obviously go for your type of formatting with that done let's jump over to Chad gbt actually one thing before we jump over to Chad gbt notice the UI element I'm taking there is photos associated with each one of these little tabs therefore tip number one when doing the strategy is have a placeholder image that we can just reference and then fill in with the correct image later on so I'll just create a new folder here real quick just called like images and then let me drag an image here we're going to do a
[02:34] pancake image why because I like pancakes not as good as a corn beef hash though americano coffee no cream no sugar so that image in there and we can go ahead and make sure we use the right way of importing that image from the directory let's jump over to Chad gbt this strategy works with either 40 or 01 why because we have the ability to actually attach a file here does this strategy work with other AI models EG Claude EG Gemini well yes I guess if you like those models better proceed personally I just like Chad gbt why
[03:06] because I like Chad gbt okay from here I'll go and show you the strategy of 40 because that's more accessible to a lot of users attach that image of that screenshot of the stripe UI with that image attached to here here's what we're going to do if you don't have custom instructions set up in your Chad gbt I would suggest you do that so you get better answers and outputs I'll leave a video right there in the description down below what you put in custom instructions is stuff like we're creating a react based app we use Js CSS our backend is python base we use Firebase to connect Integrations like stuff like this for now though that
[03:36] doesn't matter so here's what we're going to do we're going to say we like this element we want to add it to our app.js give me the code for this but we want it in the file of carl. JS carl. CSS then we'll provide the relevant code for wherever we're going to import this so for example app.js code provided that code then coming down here we're going to say output the entire code for Carousel and use this as the placeholder image wherever needed and then provided that little pancake image remember we're doing that so that it can use it as a placeholder for this this and this hit enter here's the second tip when it
[04:06] comes to this sometimes when talking to Chad gbt in the context of this strategy it'll output little Snippets of code relevant to the UI you provide this can be annoying so to not do this ask for it to do the entire file we don't want a lazy Chad gbt I found better results using the o1 model and just basically getting it right on the dot right on the first input with the 40 you're going to have to play around a little a little bit in the sense of structuring and making it look perfect for now though let's proceed we're going to copy the JS code here come over to car. JS paste and
[04:38] to make sure we can even see this react project let's go ahead and run it so we're going to come over here terminal as I stated before make sure to watch that 3our video 3 hours of free content you really want an in-depth tutorial on all this even going to as far as showing you how to push it to a live website link that you can access newsletter ctas everything like that npm start let's get the local 3000 going here coming back over here let's go to see SS copy code go ahead and paste it and then finally let's go ahead and paste over the JS so we actually import it and render it into an element once we paste it over we are
[05:08] currently rendering it from that code let's jump over this is what the code currently looks like this is not bad considering this only took 20 seconds 30 seconds of time as you can see we got a nice little hover element here let's go and keep improving it also what I want to point out here which is pretty cool if I hit inspect we can go into developer mode here in Chrome it's pretty cool that it already is a little bit mobile and tablet responsive in the sense of it's not keeping these in a row it actually goes to a column for responsiveness this also shows the reasoning of why we provide a placeholder image right here here and
[05:38] here so that when we want to put the real images it's a very simple just like input output within the code itself like looking at the carousel JS here I could just simply just like add three more files here of the actual Correct images one thing I want to point out though is that when you do this method because of the fact that we're referencing the screenshot so heavily the actual copy that it will use in the code is going to basically be exactly what was found in the screenshot so you can see this copy has to do with stripes such as build stripe certified experts work with stripe Consulting partner that can integrate and deploy stripe solutions for you but in F development all we
[06:09] really care about here is our ability just to change that right so we could just be like no no no no no not stripe experts I like coffee and then we already have the UI structured where it's going to go from here you have two major routes the first route is that you provide the code that was just generated you attach the exact same screenshot from Stripes UI and you identify a very specific part of that screenshot you want replicated so let me show you that route so first step here is we're going to copy all the code in our JS file for Carousel to paste all the Js come over the CSS I'm paste all the CSS I'm going
[06:41] reattach the strap UI and from this UI there might be a couple things that is missing from what we wanted so the first one could be the idea of highlighting certain text in a certain color from what we see here of stripe with this purple Hue the next one being the top code being left aligned so let's do both so here's what we got looking at this again we want to make sure some words in a green Hue like it is in a purple Hue there obviously we don't have to speak perfect English here CAD gbt can you know understand that also for this part and usually when there's specific UI elements found within a design that I
[07:11] want changed I'll provide that exact code so because here I want this text to be left aligned I'm providing that exact code and I'm simply saying I want this text to be left aligned hit enter sometimes you got to Rector chat gbt and be like make sure to give me the entire new file or alternatively it would just give you the Snippets that change relevant to the file that you just provided what's nice here is that I remembered that I wanted the entire file so it's going to be a simple copy and paste so I got my Js file I'll copy code command a control a paste it over everything command save if you don't save it's not going to reflect in the
[07:43] emulator got my CSS let's copy that and went over to Carousel CSS command V paste over there we go so we got a left Al line text on top of that we have little Parts here my head's covering a little bit of it being highlighted in a green Hue not perfect what this allows you to do from here is let's say for I like coffee I want to change that green Hue it is added the logic for us in the code for you to identify highlight Green in the CSS class here and be like yes and proceed now throughout this entire
[08:14] UI you can use this like Hue like effort you understand how to use it because you can reference that CSS class you see how it's built into the j6 and keep going what's really cool here is I did all this in probably a minute I built out the skele in of a UI element from a specific website within a minute this is like unheard of so if you want to really see this strategy played out in multiple ways of approaching the front end then I got a little gift for you this right here I'll leave in the description down below I'll leave it at the end 3 hours
[08:45] and 11 minutes of me diving into this strategy but it isn't like a let me just show you how to make a fake little element and then just say bye-bye now I actually show you how I created this website right here at webcafe a.com a live website link you can go to play around with see see how it's mobile responsive tablet responsive see how the different UI elements interact with each other this was all done with this coding strategy that I just showed you the beauty of this is that this all can be done with little to no coding knowledge copy and paste copy and paste and proceed front and coding two random
[09:17] videos that's my face I'll see you in the next video