Lesson 5 - Best Practices & Better Top Fold

Create an App's Frontend with AI📅 2024-09-15

Watch on YouTube ↗

Transcript

[00:00] let's take the website that I'm currently paying for and not pay for it anymore using the power of artificial intelligence we're going to code out an entire website from start to finish and have it all completely deployed for free this series I'm currently doing on this channel can be applied to cursor AI can also be applied to repet no matter how you are coding this website out what I can guarantee is that it'll be free by the end of it other than the domain of course you'll be able to know how to code you'll be able to know how to deploy you'll know everything that's entailed with building out a real website on the internet without paying a hosting provider ever again sound good

[00:31] let's jump in if you found yourself on this video this has been an ongoing series I've been doing for the last couple months my intention for today is I'm completing this series so I got some coffee in front of me I am currently sitting down typically in my videos I stand up but I'm sitting down why are you sitting down Corbin because I'm coding all today I'm going to record all this I'm going to make it like all divied up into like nice little videos for you so you can just watch them lesson five lesson six Le lesson seven and proceed in that manner me personally though is I'm sitting here I'm coding all day in my way I'm to structure these videos is going to be very much so big

[01:02] parts of a website so this video we did a top fold in the last video but it's been like a month so I'm going to create a better top fold and I have a different vision for this landing page right now I'm paying web flow around 18 USD a month to host just this when I say just this this is basically nothing therefore I might as well code it out now I'm going to go ahead and approach this in a very specific way of how I want my landing page to work the way I'm going to present these episodes from here and out is very much so is I'm going to code out an entire section then I'm going to walk you through the types of AI prompts

[01:33] and why I chose those AI prompts to get out the certain type of code in addition giving you developer Insight of good practices when it comes to coding this involves how to create a branch what is a branch why do we do branches this involves how to create certain sections within the website that are more intuitive such as newsletters such as Nas such as anything so if you watch this series by the end of it you have a pretty full comprehensive idea of front-end development now before I get comment saying oh this is clickbait you said cursor AI you said repet let me lay

[02:04] you in on a little secret y'all an IDE which those are is an integrated development environment basically what I'm trying to say here is in this video we're going to be using VSS code and chat gbt separate that's how I code of AI regardless of what you're about to watch right now you can do the same thing with cursor you can do the same thing with repet as you're going to learn ways to give dictation to these models how to structure your prompt to get specific types of code now if you want to still leave that com comment go ahead as it'll give me free engagement and it push this video further let's go and proceed if you just found this

[02:35] episode I encourage you to check out all the other episodes when it comes to why this is free setting up your GitHub project setting up your vs code project setting up with custom instructions in Chad gbt like I go over a ton of stuff as right now we are in the emulating and development phase where everything's structured everything's good we have security set up with ourv what's A.V Corbin check out the earlier lessons you'll understand and just as a side notv basically makes it so that high-risk variables found within your code are hidden EG let's say I have a web hook for handling a web hook in this

[03:06] context is how we send data between software if I have a web hook in the in the code I'm going to want to put that in my EnV and not actually display the web hook so I can't get abused in that way enough talking though I'm going to go ahead and put this IDE VSS code as its own page and then I'm going to put my Local Host right here this website this emulator as this own page as well so we get two big Pages here of how this is going to look now typically when I code and specifically code out software in in this context in this series is very much a website it's not really software but the way I like to approach it is let's get the entire shabam out

[03:37] when I say shabam here I'm referencing let's just get what this website's supposed to look like as a desktop version one of these lessons I'm going to dive into how to make this mobile responsive for now my objective is let's make this look good on desktop and then there'll be a whole lesson dedicated towards how do we structure this so it looks good on tablet looks good on your iPhone or your Android whatever it may be now one last little shout out before we dive into today's lesson and the lessons I plan on grading today is going to be the school Community why am I shouting this out why are we talking about this that's because of one of the

[04:09] major elements of this landing page is our ability to provide an email that automatically subscribes the user to our newsletter this kind of function and this kind of logic is very intuitive in the sense of we're going to be passing data as a web hook we're going to learn how to secure web hooks you're going to learn a ton of stuff that can be applied outside of just simply providing an email and on top of that I'll make a whole contact page as well cuz I know a lot of people want to see that as well but those lessons will be found on the school Community check it out if you don't want to see those lessons that's fine you'll basically get 90% 80% of

[04:41] what is possible in frontend development through what is found on YouTube let's go to get going here though here's our terminal commands here's our cheat sheet that we created in earlier lessons here why I'm referencing this is let's go and launch our development environment here so we can see the code in the website or in Local Host 3000 this basically so right now I just kind of canceled my terminal so this happens so I can just show you live go ahead and open a terminal window here if you run into issues of terminal when it comes to npm commands not working and anything like that I encourage you to check out my cursor AI video that's 30 minutes long shows you how to install from complete

[05:12] scratch you never coded before all the relevant dependencies that are needed in this context for now though all I need to put in is going be npm start well actually one last thing we need to go to the underlying directory this directory is where all this relevant code right here is found within my computer therefore when I do mpm start we are starting the specific code found here mpm start this is going to launch up our nice little landing page here boom now I'm going to go ahead and rip this up I'm I'm ripping it up I don't like it it's done got I'm going to rip this up

[05:44] and I'm going to go ahead and start coding here and I'm going to walk you through how I code I'm going walk you through the prompts everything let's burn it delete so when I do that we get a white page here let's proceed to start off here I'm going to go ahead and just rename some classes and I'm going just show you an air I got off just right off the bat so right now we're getting this air right what I did is I went ahead and changed my header. Js and header. CSS to top fold if you don't know what a top fold is this is basically let me show you real quick a top fold in this context is what you see initially when you load into a website page so for

[06:15] cursor AI we see this nav bar we see like this little section right here for download watch demo one minute and then like a video right here that's their top fold so what I'm going to do is I'm going to Encompass all those elements into one class and we're going to call it top fold the first thing you'll notice is that when you rename elements so I Ren name the CSS here rename the file here and the export here as long as the file's over there I get an error here so let me go and explain to you how to read errors like this first thing you'll notice is that it's going to give you in categorization where this error is found Source views homepage. JS

[06:46] Source views homepage. JS coming over to homep page.js it then says can't resolve header. JS and and then it you know gives the directory again so what can it resolve it can't resolve header. Js is header. JS coming up here you'll notice is that this is what it's referencing the header this is what we're importing from Top fold now therefore what it's basically incurring here is that we renamed it from header to top fold so I'm going to command C this contrl C then I'm going to go and paste this instead because we're importing top fold

[07:17] instead of header Now command save no issue that's how you should kind of walk through errors now what I'm going to do right now is I'm going to drink some coffee play some Swedish House Mafia on Soundcloud crazy mix and my intention is that for this top fold is I'm going to replicate what cursor ai's top fold looks like why cuz I think it looks sexy this looks cool I like it so I'm going to take it I'm going to show you how to take it so first let me go ahead and do the heavy lifting here of coding it all out and then what I'm going to do with you is we're going to walk through stepbystep of why I did what I did how I

[07:47] did what I did and how you can do the same thing for any type of website sound good I'll see you in like 10 to 30 minutes actually before I do that let me show you some good practice here we're going to create a new branch that is dedicated for this new addition to our website opening up a terminal window here let's go to our directory found on our cheat sheet and the first thing we need to do in order for us to create a new branch and what branches are different versions of the code this will make more sense let me just show you is we need to make sure that little asteris right there which indicates that something new has happened is completely cleared out basically in this context we want to make sure that the main branch

[08:18] is most up to date and this has to do with the fact that you know we changed it from Top fold from header to top fold so now it's called top fold. JS and CSS let's proceed to do this and I suggest you add this to your cheat sheet in least in the beginning so remember how to do it we're going to first off let's just make sure we're in the right Branch we say get Branch okay we're in main we're going do get add get commit dasm and then name it to whatever is relevant about this commit what has changed from the last time you saved so in this context we renamed it to tap fold. JS going to say tap fold renaming and then

[08:51] we'll add a quotation mark here hit enter we're going it get push origin and then we're going to say the branch name so this this context it's main get push orange and Main hit enter and then what you'll notice is if I come over to GitHub I reload this our most recent push is top fold renaming so far so good now let's do some good practice here and this is very powerful this is extremely powerful this is going to basically make it so that this is going to set you apart this is going to make it so that you can actually structure scalable applications here we need to

[09:22] make a branch so we're going to do get checkout dashb creating a new Branch we'll say for now I'm going to show you delete one as well let me just do that real quick so we'll say apples right so this is what the branch name is okay so I do get Branch again now we got oh oopsie control C to get out of that get Branch so we have apples and we're Main and right now we are in apples now just to show you real quick that what that looks like on this end here it's not going to show yet because we need to commit something so for example let's just say you know come up here I just add some s's here and then I come back

[09:53] over to here and you notice how it's an asterisk now it's different so we can go ahead and say same commands here I can hit up on my arrow key I'm going to do get add up on arrow keys commit and then get push origin but this is not going to be to main this is going to be to Apples hit that and then what you'll notice is that this is going to create a PR request which we'll get into and we'll explain what even is a PR request for now though I'm going to delete this so let me show you how to delete a branch let's say we're like oh we messed up big time this is no good we shouldn't be here right now I just completely messed

[10:23] up we can do get Branch get checkout checkouts how you move between branches get check out Main so now that I'm going to get check out main this isn't going to have those s's look at no s's here right this is going to be you know like the stable Branch this where we want to keep stable here what we can do here is be like uh I messed up big time with those apples how about them apples I can do get Branch Dash D capital D and then the branch name hit that and this no longer exists locally on your machine so hit your branch again only main so

[10:53] earlier that deleted it locally but you we already pushed it to the cloud so in order to get out of this situation we can simply let me went a little fast there we can simply come over to branches here click it and then what you'll notice is that right here next to my face there's a little garbage delete we're going to go com command R reload control R and there we go that's how you successfully create a new Branch delete a new branch and commit a new Branch if you're still not clear on what branches are check out those earlier tutorials where I gave you cat gbt chats to help

[11:23] you out on that specific terminology also the more you do the more you learn with all that though let's create a new brand here and the purpose of this branch is going to be for today's video which is going to be get Branch dasb write this in your cheat sheet we're going to say top fold new messed up there get check out B try again get check out B then we'll do top fold new and enter and we are in our new Branch okay we're going to do everything we need to do in top full new in addition by the end of this video you'll

[11:54] understand how to handle a poll request you'll understand the implications of poll request and you'll even understand how to merge a poll request into our main branch which in the context of development that's going to be your stable Branch this is the branch that you don't want to touch any time you want to make a change to your code you rarely ever want to actually code within the main branch got it let me code it out this is how far I've gotten so far let me show you how I use artificial intelligence to help me start mimicking what we saw Chris AI in her own code just for context this is a good amount

[12:25] of chat as you'll see in this little sidebar here there's a lot of chat going back and forth Chad gbt to get exactly what you want when it comes to coding so my plan is I'm going to go and give you some pointers of ways to talk to Chad gbt in this context so you don't get lost you restart proceed to start off here make sure you have custom instructions enabled we did this in lesson two you can check it out how to make custom instructions specific to your version of the software or website you're creating make sure to have that enabled once you have that enabled this

[12:55] is how you typically start chats I like to start with one sentence very simple give context okay we are creating the top fold of our website ready to see what we want next what I'll do is I'll feed the relevant code I have so far up to the point of that development so in this context I'm going to provide the JS and CSS files so this is going to be the CSS file here the JS file there at this point in the chat it was very small obviously right so we just had like a very small JS file and then we had basically nothing for the CSS and then

[13:26] notice how I end this I provide the code then I say ready to see what we want it to look like exactly there's going to be instances in this chat where I repeatedly ask it to either say just say yes or just do this like you have to kind of guide chbt so it doesn't go on rants because one thing with AI and coding is sometimes it can go on rants so these are ways to circumnavigate that when I say rants I'm talking about like you're giving out code I didn't ask for so now that it knows the structuring it knows my code it'll then ask basically okay yeah cool what do you want it to

[13:57] look like so in this context I literally screenshotted cursor ai's landing page screenshot that's it and I say give me all the code for everything JS and CSS now what will happen in this context is that it will give you code but it's not going to be perfect obviously it's going to like get you in the right direction but from what you see here we got the relevant j6 code and we got the relevant CSS code first major issue of this code and this is something that you may not be able to notice or recognize if you're pretty new to coding is notice how it's giving very general

[14:29] CSS this is no good because of the fact of how we're treating this element within our code this kind of code like very general code how do I know if it's General Corbin if it has like body or asteris it isn't like a class name like dot top fold container that's how you know it's General you want to delete this code that kind of code is the kind of code we give with the parent component now the parent component in this context or what we call the parent component is the one that's going to be the overarching global like how does

[14:59] this look visually so what you'll notice is that I'm importing the code for the top fold here which is this code right here I'm importing this in our homepage. JS just as a component this is the child this child is then going to be manipulated by the CSS of the overarching div found in this element now that is where we're going to put our major type of structuring in the underlying web page so if I come over to the CSS here this is like bigu structuring notice how it's like Max

[15:30] width 12,000 or 1,200 in this context if I put like Max width 100 it's going to affect every single imported child in this component Max width 100 PX would lead to something like this it affects everything let's go back to 1200 I'm opting for 1,200 rather than like percents like 50% of the component size because of the fact that that is what cursor AI is doing and the way they're structuring their code what you'll notice is that there's a lot of empty space between the left and right and this has to do with the fact of just

[16:01] mobile optimization and responsiveness on the screen which we'll get into in later tutorials here but for now so far so good with this what you want to do is simply copy and paste the relevant CSS code and the relevant j6 code over to its relevant files once you do that you'll obviously visually see it within your development environment and start getting an idea of what direction or how to Proctor CH gbt from that point and as good measure here so that in future output at least within this chat I don't repeatedly get a general CSS like we saw

[16:33] with body and the asteris I simply will put don't need paste. code we'll apply this elsewhere when we're ready for what's next now let me show you an example of if you mess up with a code input now typically what you can do is come back here to the pencil select that and then readjust the way you're phrasing it to get a better output and you'll know if it's a bad output if you paste a code over and you're just like whoa what just happened and typically you just scroll back up and copy and paste over you know the better looking code but let's say you import another image here and you get a bad output

[17:04] these type of inputs on cat gbt you can't actually adjust again or change again therefore let me show you how to get around this my objective with this one was to Simply add a round rectangle make the corners round add some separation essentially make it look more like this situation so what I did here was I was providing blocks of code and asking for specific elements to Output but what happened was the code was just no good this was no good this code was horrible and I couldn't go back to readjust the prompt so what I did was this I simply did this this is a great way so either you can start a new chat

[17:36] but they can take a little time or alternatively just do what I do okay take a step back I paste over the code I like the JS again the CSS again so whatever code you really like paste it again so it can just take a step back and and not go down a rabbit hole of bad code and then I ended with the sentence ready to see what I want what this does for us is this recess Chad gbt to be like okay okay whatever I just out put it previously was no good but refer back to the code that was just provided here understanding that you know the process here is as you saw in Lesson Four is

[18:06] very much copy and paste over copy and paste over maybe make little changes here and there once you understand more of how to work a CSS element but for now you know early early stages is very much copy and paste over a little bit of talking paste it does it look good doesn't look good readjust so then coming down here what you'll notice is that you can actually get pretty intuitive with your images here so one issue I was having is the ability to separate between the header section and the Navar section EG what's incurring here notice with the image I provide which you can basically use any type of image editor whether Windows or Mac and

[18:38] just draw a line notice how I draw that little red line here to identify the exact issue I was having it's smart y'all it can actually see that and it can actually understand what you're saying and basically what I asked for here is I need a gap between the Navar and the hero section why did I call it the Navar and hero section that's because the way that it outputed the code it understands that this section right here is the nav bar it's like a comment and then coming down here it understands that this is the hero section especially with all the CSS elements called it as well so when conversating with Chad gbt make sure to

[19:09] reference these specific ways it's already calling it within the code it's going to make it so that it understands exactly what you're talking about and you can take it one step further here and actually draw on images to get the outputs you're looking for which leaves us to where we are right here not bad so far right this is actually pretty good considering this only took me around 20 minutes to do and and we are getting going here so my plan obviously is I'm not going to keep the same copy I'm going to start changing the copy here to reflect more of what web Cafe is and my website on top of that there is going to be some element features here that I

[19:41] switch up with the buttons I'm going to show you real quickly how to embed a YouTube video or actually alternatively I'll show you how to embed a YouTube video but in reality I could have this so we could store it in our database but I'll do a YouTube video as sometimes that's just good for exposure and getting more views on your underlying video If you have a video element within your website on top of that I plan on changing this Navar a little bit oh you can see the potential here we're getting pretty far here and before I dive into that and start jumping into that one

[20:11] last thing I want to leave you with is understanding how to conversate in the context of a child parent relationship so if we come back to our hom page.js here we obviously know this is the child here and then like the ultimate parent the grandparent it's going to be the app.js this is how it's rendered so we actually have the homepage being imported here but the actual situation here with the hom page.js is you know this is all the elements that we found within our homepage what you want to do here is what I did here this element is imported here so I reference that this entire element we've been working on the top fold is imported into this class

[20:42] here and then I give the CSS for the underlying homepage right so that's the cafe homepage as we know right here now if you're having a situation here where you're like this doesn't look good it's left aligned what's going on notice how I just simply ask how do I make with smaller and Center all the elements and it provided me the correct code here now to be fair it provided me 50% here which what this does is that depending on whether you're an iPhone tablet computer it will be 50% of the screen this is

[21:13] good some context but when you're dealing with like Global CS classes like I call them here you want to do much more of a hard fix so I'm going to do 1,200 PX as our Max width in this context this will change when we do our responsiveness lesson later in this series let me go ahead and change the copy here some structuring give you some more insight went ahead and updated the copy here so right at the bat this is more tailored to what web Cafe AI is went ahead and did our slogan here automate everything then we got our nice little disclaimer of getting more

[21:43] context of what web Cafe AI does up to this point furthermore what you'll notice is that we've actually taken that button made it into one button here and we're using a nice little play icon here let me show you where I get that go ahead and type in Google font awesome what font awesome is going to allow us to do is is use icons within our website or software that just look good so for example I typed in play here and what you want to do is Select free with free selected you can use any of these in your software or website for free simply click one and proceed everything is

[22:15] looking pretty good the way I'm going to go ahead and proceed from here is that when I click this this is going to create a popup YouTube video I'm going to link it I'm going to show you how to link it and on top of that when I click these two these are going to be two separate external links what's going to be very specific about those external links is that it's going to open a new tab within our browser content catalog is going to bring them to the YouTube channel take this website is going to take them to the very specific playlist that you're watching right now that I'm currently building out this website with let's walk through some more Chad gbt

[22:45] chats so you can learn some more skills when talking to AI in the context of coding one of the major things that you might have noticed that has gone from the Navar now was the little sections to click to different parts of the website the reason I personally got rid of it is because the fact that this is is a landing page so I'm only going to have one page here I don't need multiple sections in theory I could have kept it there and if you click it it brings you to that certain part of the page but my intentions with this landing page is to make it as small as possible but has the most value as possible so from here I simply asked Chad gbt to get rid of it now Theory I could just remove it myself in the code but if you're not very

[23:17] comfortable with the div yet what you can do is simply copy over the code that you think is relevant to the code you want to get rid of and then just ask for it to remove it okay actually just remove the code entirely and then it'll give you the update code here here's a quick tip when it comes to structuring if you come over to an element and you don't necessarily know where it stops or ends or closes you can simply highlight it like this and you'll see it will close here or alternatively select this and you'll see it closes here this is important as any div element within a div div div div is going to be affected

[23:50] by its outer bracket so everything within hero section such as hero title hero subtitle if I put hero section is with 50% everything within here is going to be 50% with that's the idea and then of course you're going to have your overall div here so if I select this one right here come all the way to the top the overall one is going to be the top fold container that is why within CSS the top fold container is going to have very general type of CSS Direction such as display Flex Flex Direction column

[24:20] column everything about the board there in addition to helping with coding it can also help you with copy or how you want to phrase things within your web page so for example here I originally had holding company AI s syester webcafe AI I didn't really like how it flowed so I gave the cursor subtitle as an example but then gave more context of what I want to show in this underlying subtitle and based off this it gave me a very long sentence which I didn't like either so I simply just said make it shorter and make it sound more like what we sawed cursor shorter and sound more like and then the cursor example if you don't

[24:51] know I'm referencing I'm referencing this subtitle then they gave me a subtitle I could work with and from there was able to put it out so let's go ahead and wrap up our top fold here I'm going to show you three major things first major thing is that how to do external links correctly second thing is how to embed videos based off a click so it's a little popup and then finally all this working in motion sound good let's do it welcome back we went ahead and added everything we needed to add so now when you use this website couple things on Hover we have a nice little hover effect we make the buttons slightly larger add a little opacity as well so

[25:23] notice how it gets a little bit more bold in your face when you hover over did that when I user clicks on it it's going to open a new tab so for example a Content catalog will be the YouTube channel and the take this website will be the entire playlist that you're currently watching in addition to this we went ahead and added this little section here so the user will see a nice little like highlight and then when they click it will automatically play a video that I grabbed from YouTube this in theory could have been a video that I stored in my fire store or alternatively the storage within firebeast but for now

[25:55] I'm just going to use the YouTube video as this is pretty simple to implement and then what you'll notice is that the obviously the user can watch this or alternatively if they want to leave it they can simply click anywhere outside of the video and it goes away let's go and break that down with Chad gbt but also how it looks in the code so first let's go over the new tabs being open first off I started a new chat for these next two editions here when you start going a little bit further into a chat it sometimes can give bad outputs so I typically like starting a new chat to do so I simply put in okay we're working on

[26:25] the top fold of the website today I provided the entire J file and the entire CSS file just paste and paste once I did that Chad gbt just started spewing random stuff I typically just stop Chad gbt his tracks by clicking this on an output just cuz like I'm not trying to do that right now let's do something else to add the hover effects it's really easy so all you have to do is simply do okay first let's add some hover effects you'll provide the relevant buttons so for me it was these two buttons right here notice how I simply just pasted the buttons over and then I provided the relevant CSS so as

[26:56] you know or maybe not know to find whatever the button CSS is correlated with you can simply come over to your button here and notice how it says content catalog button command F crlf go to your CSS here and that's it that's the CSS correlation right there with this though I simply asked for a hover effect and it went ahead and give it to me I did some slight changes here so what the hover effect is though in this context is simply adding the original CSS class name and adding hover so coming over here you'll notice that we have the original CSS class name and

[27:28] then what do you want it to do on Hover so for me I wanted to get the opacity slightly higher so you know it's slightly phased out to completely in your face and then the scale that that's what causes like the slight enlargement is 1.02 just to give you an idea of what this can do if I did two it's going to be twice the scale or boom we don't want that so I'm going keep this at 1.02 but you successfully learned how to do a hover element within CSS and how to talk to Chad gbt in that context now the next piece of that we added which is Major is

[27:59] the ability to open a new Link in a tab so notice how it references this specific function here which is window open blank no opener no rerer this is going to be the logic we use when we open new tabs in the browser it references it and it uses it twice for these specific links the reason we're doing it like once here and then twice here is so we don't have to repeat this logic in this code twice here right so we can just reference the actual function itself for either one of these urls in order to get that with in Chad gbt it's pretty simple what I typically

[28:31] like doing is that go ahead and paste your entire file that's relevant so for this context it was the top fold when I say paste the entire file you could quite literally paste the entire thing or alternatively come over to this little gold bracket right here and just slide all the way up here and copy up to the top const paste that over as you're about to do a big logic change with this new logic change I put it simple I said for this specific button take me to this specific Link in a new tab for this specific button take me to this specific Link in a new tab notice how it's very

[29:02] much like just be as specific as possible with your actions and with this it gave me the relevant code that I cared about and on top of that the relevant code that's going to allow it to open on a new tab this is a very simple copy paste over one thing to keep in mind with these copy and pasting over is that notice your Imports sometimes with Chad gbt outputs it won't give you all these Imports therefore when you paste over you're going to get a ton of Errors like Corin you messed them up what happened that's just because it went ahead and you overc on your import make sure you always have your import at the top there you go so we've successfully learned how to open up a

[29:32] new link for a new tab and we're going to go make sure you leave a like if you found value so far now let's go and learn a more complex element of this page which is the ability to click a button have a popover effect and on top of that PL a YouTube video automatically this is Bump UPS the best way to therefore let me show you the exact dictation I used when talking to Chad gbt so coming down here if I go to the button that I care about which was this button this button is is the active investment button this is the one that shows the little play icon this is this button what I did was I simply obviously

[30:04] hovered over it found out where the button closes which you'll see is right here copied this over command C then pasted it right here and I say when I click provide the button code can we have a popup open and play this video and then provide the video link that's it and this starts taking you in the right direction so the first thing it wanted me to do was create a module component the way I want you to think of this is that within your actual website you're going to a new folder here it's going to be called components think of components as like little parts of your website now not necessarily like a whole section like a footer but more of like

[30:36] you gone to a website and sometimes you get that little popup saying do you accept the cookies do you that little popup of cookies could be a cookies component right we have a whole JS and CSS file dedicated towards the cookies popup this context is for the video popup we have a whole component that will import from here to here so we can do some logic in showing it or not showing it if that sounded confusing don't worry because when I asked Chad gbt to do it for me it gave me that answer so first off it gave

[31:07] me the video module component the JS and if you're ever wondering of whether or not this is going to be the original file that you just past it over or a new file it's just whatever is the const and then the name right there so as you'll notice it says video module here it is not say con top fold that tells me this is a whole new Js file with this though a I simply went over here right clicked on Source I hit new folder created a folder called components as we'll create more components later on and then basically put the two files here the JS

[31:37] and the CSS this was the JS file and if you want to know what a JS file looks like typically it has the Imports it has the return has the export default and then it gave me the CSS so I went ahead and created both files pasted both of this code over and then finally what's really cool because it has context it's able to give me the final top fold file as well so notice it gave me the entire top fold file on top of that and it went ahead and found it right here and I pasted that over now with this kind of logic the first area you're going to run into is that it's not going to know where to import video module from so

[32:09] you're going to get an error saying like it can't find it don't worry this is how you solve for that first off this is like a hierarchy in the sense of where the actual file is found so notice how video module which is video module JS right here is found within the components folder therefore one before that should be called components the other very important thing that you need to add here as it won't be relevant if you don't do this is that notice with top. CSS it's one period That's because of the fact that they are both found within the same folder they're just

[32:39] nestled together alternatively this is found within a different folder that we're referencing the components folder therefore we need to add this second period there in order to identify that this is coming from somewhere else in our directory just to show you if I do this I'm going to get an air here like where where is it found what's going on on therefore just know when you're importing from separate folders that aren't in the original folder so this folder calling views add that second period there and then when I hit save we're good to go now that we understand that we can actually reference video module so coming down here you'll notice

[33:11] it right there so this has a little bit of buling logic that you have to worry about but for now up to this point if you copy paste copy paste over and then import it correctly you'll be good to go and everything will work so within the JS itself though if you have issues with the specific way that the module looks then you just edit it here or the popup so for example when I originally created this Logic the video wouldn't automatically play it would just have a play button like it would just show and I simply just said okay cool can we actually have the video automatically play and it was able to give me the exact code I needed went in and copied

[33:42] that and pasted it over here and it worked keep scrolling down okay cool can we remove the close button and can we only have it closed when you click outside the popup receed it'll give me the code so that's the flow that's the process paste over paste over oh something messed up badly okay revert back to the original code like keep going in this logic because up to this point I've successfully created a top fold that I am satisfied with we got three buttons that work we got whatever might active investment is is going to be a video that plays right there therefore let's go to push this commit let's make a PR request and understand the logic that's entailed with that so

[34:13] coming back to terminal we say get Branch always make sure you're in your directory that's whatever you called your project from here I'm going say get add get commit solid top fold we're going to do get push origin and then whatever our Branch name is so if you don't know what it is I always suggest you do get Branch so you can kind of see it here and copy right here also you'll notice is it's right here when you do certain commits so I'm going to do this enter boom cleared up good to go coming over to our GitHub here we push this

[34:43] Branch to the cloud so I'm do compare and pull request you can add another Title Here for reference so I'll just say completed top fold for future reference I can say create pull request so now we have an active pull request incurring here this is basically like hey I want to merge this to the main does everything look good and for you to confirm if everything looks good here you can go to files changed within files changed here you can just basically see what the heck happened so I was going notice here if I come down here we added a PNG of these two different files here we added a new component folder that's

[35:15] why there's a little plus sign here all this code I go to top fold I noticed that like oh so we added all this code right here okay so we removed header but now we're naming it top like this is like your way to going through to make sure nothing change that you aren't expecting once you're satisfied though I can come back into this PR request here and I hit merge pull request then I simply say confirm merge so now that we successfully merged this to main I can go and delete this Branch I don't need it anymore delete Branch coming back over to main notice how the most recent commit was from that merch so what this means is that we still currently have

[35:47] top full new Branch locally in our machine so if I hit get Branch we're still here so in theory I could keep it here I have some like old branches of some of the software I've developed that I just keep keep my local and I don't have in the cloud up to your preference alternatively what I suggest you to do is do get checkout main let's go back to the main main branch here let's go to the stable one once we're here do get pull origin main put this in your cheat sheet this is going to find the most recent up-to-date code that we have in the cloud and it has updated right because we merged the previous Branch

[36:18] all that code we just changed there we merged with main doing this command here you'll notice some plus and some minus there we go we have the most recent main branch now now notice within main the existence of Vis modules here the existence of the renaming of top fold is here all this relevant code is here in main now pretty good so now that our main is good and is ready for our next video or our next lesson here we can get rid of top full new in local if we choose to do so I'm going to do that get Branch D capital D copy the name and

[36:50] it's deleted we're good back to main I'll create a new Branch for the next lesson that completes lesson five here make sure leave a like if you value in today's video it's completely free I'm going to try to wrap up this series within the next couple days here so I'm hitting this thing head on so expect some big videos from me if you of course want to see more comprehensive videos on this topic for example me setting up a newsletter CTA the ability for a user to put in an email and then automatically subscribe to whatever newsletter provider you have make sure to check out my school Community without further Ado I'll see you in the next video okay we are almost done with the website we got

[37:21] our top fold we're going to add a little bit more we'll be good to go those are random videos that's my face and I'll see you in the next video