Lesson 4 - Creating the Top Fold

Create an App's Frontend with AI📅 2024-07-17

Watch on YouTube ↗

Transcript

[00:00] you have found yourself on Lesson Four of never paying for a website again this must be clickbait what is this guy talking about no no trust me by the end of this playlist you will never have to pay for a website again if you just found this series welcome to a ton of free content that's good and actually valuable and lesson one we went over what how and why in lesson two we set up our project together with Firebase and vs code in order to start emulating our website if you just heard code and you're about to click away don't worry trust me there's a new way to code it was only possible in this past year we let AI do everything you barely got

[00:30] understand it in lesson three we went over how to set up security our user interface and SEO and Lesson Four which is today's lesson is we're going to go ahead and code together using artificial intelligence I'm going to show you how I code personally make it super simple and we're to create our top fold today your first question might be is Corbin what in the heck is a top fold that's this right here it's basically the first amount of UI that showcases when you load into a website think of it like the first 25% or alternatively this right here as always I'm going to leave a Google doc in the description down below that watchs you step by step of

[01:01] everything we do in today's video I'll also include that chat gbt chat that is specialized for this video to be clear though this chat GPT chat I'm going to share in this video is going to apply for the next three to four lessons I went ahead and calculated out how many more lessons are going to be required for this playlist and it looks like we're going to have a total of 10 lessons for the lessons coming out this is going to go over topics such as setting up a gallery with images videos within your landing page on top of that doing ctas one type of call to action we're going to do together is when a user puts in their email subscribeing to a newsletter but through that lesson

[01:32] you're going to learn a bunch of other stuff when it comes to more intuitive stuff with your landing page that's coming up let's jump in today's lesson which is going to be going over how to create a top fold with artificial intelligence let's proceed congrats to everyone that has made it this far youve watched lesson one to lesson three and what I can guarantee from here on out is now you're going to be able to see how to code of gbt that's why like the first three lessons of this playlist is very much like just getting set up when you actually code a website for real and not like oh use this service and pay $20 a

[02:03] no no like actually code out a website there's a little bit of setup and a little bit of structuring we have to do before we really dive in but from here on out the lessons are going to be very much oriented to actually building out this landing page so no this is not going to be a learn how to code in 10 minutes here is your Landing p no no like this entire playlist is probably going to be around eight hours long but that's good because if you actually want to do this and actually I want to learn how to do this you're going to need that much time to understand it therefore if you just found this video you're like what is this guy talking about check lesson one out because chances are if

[02:33] you just jumped to Lesson Four and there's something in here that you're like this guy didn't explain it well enough he didn't show us how to do this it probably was in a previous lesson let's jump in let's do step one together which is going to be us finding inspiration of a landing page we like I'm going to show you how to take that design and actually replicate it into code and use it ourselves everyone have their Chad gbt chat open in a separate tab on a separate window in a separate area make sure you watch lesson two that showed you how to create custom instructions that's going to be very important you're getting bad answers that means you didn't do lesson two make

[03:04] your custom instructions as I showed you there good so far let's find some inspiration for me I already found my inspiration I'm going to show you an image of it for you look through the internet find a website you like whether it's design wise or just overall structuring and do what I'm about to show you so for example let's say I go to MailChimp and for example that search was like landing page examples let's say I land on this landing page and I'm like you know what Corbin I like this landing page what I want you to do it's very simple as a Mac User just hit command Shift 4 this is going to allow

[03:34] you to screenshot a section of your page if you're a Windows user and you know how to screenshot as well on Windows let people know in the comments down below I don't know the shorthand for it for us though we're going to Simply grab the section that we like building a top fold today this is the top fold here you would go ahead and drag over this well let me close this little chat bot no MailChimp I don't want to talk we're going to go ahead and screenshot this this image is what we're going to base our top full design on if we were to choose this as our top full design what I'm about to show you workflow wise and

[04:05] logic wise you can apply to anything anything Corbin anything so for example let's say I'm on this web page and I'm like whoa I like this user interface what you can do is you can simply screenshot this entire thing as well or alternatively screenshot elements that you really like because what I'm about to show you is going to allow you to replicate everything you would be able to see on a website in code and put it on your own website now that we know that all we need to do is screenshot sections of a website or alternatively screenshot entire portions of a website and replicate it in code let's see how

[04:36] we do it now with the logic I'm about to show you and what's great about actually doing it from the bottom up is that you can just take inspiration from it it doesn't have to be a complete carbon copy when you code it into your website and from the example today you're about to see you'll recognize that I'm not going to follow this to a t but I like the general direction for me what I like about this is having bold letters on the left like you know your header your text and then an image on the right and then our logo in the top left this is good structural direction for me and enough for me to work on for what I'm about to show you today take your screenshot and

[05:06] let's proceed time to zoom down not that far not that far and just to show you custom instructions work and it actually listens to it let's just start off by saying what is web Cafe and what are we doing we should get something along the lines of building out a web page there you go web Cafe AI landing page is a project you're working on to create an optimized landing page using react as a front end Firebase is a back end we set this up in lesson two let's begin refresh the chat anytime you get into a chat with chat BT that is specialized for a specific context EG this chat is specialized for creating a website using the logic we've set up in earlier

[05:36] lessons understand that if you're getting bad outputs or outputs that you're just like this is way off base sometimes you got to refresh a chat sometimes you go too far into a chat you're going to get bad outputs the flip side can occur as well where the outputs actually get better and better because it has more context attach your image upload from computer now that we have the image that we want to copy and replicate into our code here let's go on prompt we are building the top fold for our website today now with the image I'm using today notice a couple of things first thing I want you to notice is that we have two relevant images within you know this Landing fold that we need to add

[06:08] ourselves the first one's going to be my logo so in the top left I'm going to go and show you how to import a image for a logo the second one's going to be whatever the main imag is on the far right here and I have an image for that as well me go ahead and import both of those and I'm going to walk you through why I did my prompt how I did it typically with website development you want to use a JPEG format this is going to allow for Less size on the actual website itself although in some context you can't really use a JPEG you need it to be PNG even if you know what the difference is jpeg is like you have to there is no transparency with a PNG you can create transparency but it's a

[06:38] little bit more higher in the memory usage category for now though we don't have to mind too much we're already creating a pretty simple website here so the first image I'm going to go ahead and upload is going to be this one notice how it is transparent it is a PNG and this is going to be my main like header to the right image also notice how I'm naming it web cf- cup- V1 this is important web development because you may have a new version of this image in the future just called V2 for now I'm going to go ahead and drag this into the correct directory that we created in an earlier lesson which will be in assets and images I'm going to Simply drag due to the fact that shortterm I don't plan

[07:10] on adding any gifts I'm going to go and delete this folder to find set file we are in Source assets images and here is our image next let's go ahead and add our logo I'm going drag it in here as well you're like Corbin didn't we just add the logo in the earlier lesson for the fave icon when we're referencing the logo in our front end we want to just go ahead and add another file here we can add a directory path for s assets images logo 512 now they have both images within my project here let's go and reference them in order to reference images from file to file it's going to be another import command what's great about this is that once you do it once

[07:40] it's a very simple just copy paste copy paste so for me I'm just going to put import actually instead of me typing out let me show you the power of AI to help you let's say you didn't know how to import this file and you're like I'm kind of lost go ahead and screenshot it screenshot this exact path once you've screenshotted it simply add it as an image say give me the import path path and there we go this is the relevant import path that we care about we got the name that we're going to reference within the code and where we can find it copy code for now I'm just going to add it here even though I'm not going to use it here although we've just identified

[08:12] together the exact way to reference image files now we know it's an assets we know it's an images it's just the image file itself I'm going to goad and copy this again and we're going to go and say web Cafe logo and for the actual file name here which is this we'll name it to what we had over here which is logo 512 boom and the reason I did both of that right now is for the gbt prompt so coming back over to my gbt prompt here notice how I'm also referencing images so we got we are building the top fold of our website today let's create the code for the file of header. JS and header. CSS when creating new files with

[08:43] AI identify the exact file names so you can reference it later on and it's very clear to you if I didn't identify that there it would just be like uh header header files. JS like it just would give me a random name like website blank. JS like identify file names furthermore when you have relevant information that you want to show up such as an image identify that as well so for me we're going to say use the image as reference to copy everything in it for the image use this that might have sound confusing when I say use the image I mean use the attached image and gbt is smart enough

[09:13] to understand what you mean and understand that this is the attached image now typically what I like to do is especially for complex work I usually just like to give it one file to reference for fillers for images that will be used on a web page but for now let's go and take it one step further here so I'm going to go ahead and use the web Cafe cup as the just image placeholder I'm going say for everything else use fix text and for the top left here is our logo and brand slogan copy the import file here put it there and our slogan is automate everything in the

[09:45] Google Doc if I don't share this exact prompt I probably will just share the chat itself so you can reference the type of prompting I do in this Logic for now though hit enter boom while this is generating we're going to go ahead and make that header doj file and that header CSS file coming over to our project here and I'll move over here in our view section we're going to go ahead and create a new file here we're going to do header. JS and then we're going to do header. CSS typically you have two options when it comes to this kind of logic you can either create a CSS class per component EG the top full today or

[10:17] alternatively create one master CSS class for the entire website depends on what you want to do I'm going to do it per component so it becomes more clear to you how to leverage this kind of CSS logic when dealing with you know more complex stuff so for now header. jss or header. JS and header. CSS now before we can see what the code looks like we got to launch our emulator so we can do this side by side make sure to go to your cheat sheet which for us it's going to be your directory so we're going to start with that enter then we're just going to Simply do the command here which is npm start what I suggest you to do especially early on is if you don't

[10:49] remember what a command does write a little note by it it's going to help you remember and then obviously long term you can do stuff like this and be good to go there we go we have it launched in our emulator which is Local Host 3000 anything we do here it's not going to break our current website it's just going to allow us to play around get fast results and get going now sometimes when you compile you'll get little warnings like this or deprecations don't worry for the most part these are just warnings they actually don't break the underlying website for example the warnings I see here are saying hey you got this image and you're not using it

[11:20] and they're referencing these images right here well yeah I'm not using it code because I haven't got to it yet so a lot of this stuff is not too worrisome in the meantime though let's go ahead and add a little bit of an extension here that's going to make our code look a little bit prettier we're going to type in pretty or p r t t e r i e r h install this kind of stuff will make more sense as you get going more this just adds a little bit more color to your code make it more clear let's get going here though we're back to our code this is the generation we got here I want you to recognize that it realizes to import the header. CSS it also

[11:50] recognizes the two file paths that provided here it's also customized with the customized instructions to recognize to use react and use the right type of language pretty good so far let's go and copy this come back to your header. JS and just simply paste command save nothing happened that's just because we need to import it it's a child component to do so we're going to Simply make sure we import our header.jpg

[12:22] to name it more specific but it already kind of did the header. dash which is good CSS naming logic come back to our CSS command V command save now let's go ahead and make sure we can see it over here instead of just looking at code which is like what's going on here to do so we're going to Simply import the header. JS into our header page.js and we can do this by simply doing this kind of logic so we're do import here I'm going to go and delete this because we're not we're only going to reference it in our header. JS file as you saw right here we're going to simply just

[12:53] import this file here which is named header so we'll do import header I'm going to Simply copy this up here to make my life easier I'm going to copy paste this and then it's not header. CSS it's header. JS in addition make sure you have a from command there because this is not a CSS component this is a JS component once we got that all you need to do in order for us to see it here is we're going to delete all this because right now we're creating this as a parent and child like structuring this is going to allow us to if there's an issue with a certain part of a website

[13:25] it's easier to identify and the actual file itself doesn't become like 3,000 lines long which can get annoying especially with the methods that we'll show you when it comes to Ai and coding for now though let's go to import so what you'll notice is from previous lessons we simply just imported the homepage here and that's good that's all we really need to do for the appjs for now this is what's actually being rendered right here but the homepage itself is this code so we need to actually put components within here to render so for us we're not going to do

[13:55] we're not going to render the homepage in the homepage we're going to to render the header simply copy the name paste it here command save there we go one thing I want you to note here is you might be like Corbin how the heck did you know his name header that's just because of how we exported it here header now that got me thinking of soccer header header header but once we do that and what you'll notice is that basically in these lessons to follow will have multiple components like this each with their

[14:26] separate file here one being like gallery CTA newsletter footer for now though we just got header once we set that up you also notice some information popped here pretty nice look how much it grabbed though based off the information we provided here is the original image this is the original image right here you get an image right there text right here logo right there not bad right we're already kind of there of where we want to be at obviously the copy is not correct there's some sizing here but

[14:58] we're going in the right direction I also want to point out that we're going to do an entire lesson dedicated towards responsiveness when it comes to different screen sizes therefore we don't get some craziness like that but that's going to be in a later lesson for now though we're just going to optimize for desktop and do that lesson where the entire lesson is going to be dedicated towards that knowing all that let's go ahead and finish this header here first thing I want to do is go ahead and clean up my CSS code found in homepage. CSS right now the only CSS we're using here is purely for structuring which is to be the cafe homepage this is what it's wrapped around they're call them rappers

[15:29] no not like 50 Cent different kind of rapper come to our homepage CSS you'll notice is that there is certain CSS classes if I command F here that just don't show up here anymore because we're not using them anymore therefore a good practice is that anytime you are not using something within code just delete it so we're going to delete all this the only purpose that the homepage is going to be for us now is purely for structuring so what you'll notice is that we set up some logic here in the parent to make it so that text align mind Center I don't like that I'm going

[16:01] delete that I don't want to set up some Global claws like that typically with a parent class like this it's purely for the actual lay out layout itself so for example we got padding here want you think of padding like like a car cushion like a you know you ever been like a on a fon that's just like not comfortable you're like how much did you pay for this they're like like 90 bucks on Amazon and you're like that makes sense padding is what adds the the like how much it goes in or out so for example if I went to 20 here notice how that popped out if I go

[16:33] to 50 it pops back in this is the surrounding area of the underlying box if you're speaking with AI you just simply say you know can we get some more space on the left and the right and the top and the bottom same deal let's go and start coding with AI here and make this look a lot better so I'm going to stop this little side by side thing we're going to have one big vs code we'll swipe over see what the website looks like any one big desktop look here's our website let's start a new chat coming over to chat gbt 40 and the reason I'm doing this in theory I could continue this chat but I want to show

[17:03] you how to start a fresh chat on a current page you're working on or a current component it's going to be very helpful and sometimes you can get into the conversations you're like this is not working out start a new chat like this hey we are working on a new page on our front end here is the code semicolon shift enter enter go to the first page you're going on command a command C control a control C paste the first line of code let's go to our CSS command a command C command V

[17:36] and boom now this is going to go on a little bit of a rant here it might tell you better ways to optimize it stop it just stop it we don't need you talking Chad gbt from here though it has your code so we can start doing stuff with it and not worrying about getting answers that aren't relevant to us this is huge let's look at that web page what's wrong with this web page first thing that's wrong with this web page that I can identify is the text is not left aligned automate everything you need that needs to be a little bit higher you know there's stuff wrong with the padding so here is what we're going to do I'm going to first off screenshot this this is

[18:08] what we call Double Double and double I'm going to upload it is this mandatory for every single time you Cod on the front end no just showing you good practice here this is where we say this is our current UI not to get too advanced here let's just start simple for the text can we have it left aligned enter and here we go updated header.jpg command a command V paste updated. CSS copy code header. CSS paste command save

[18:42] and it's left aligned what you just saw right there is huge I could basically stop this series right now and just be like go and you kind of got the workflow now of what I'm about to show you throughout this entire playlist as you get better at doing everything I just showed you there you will over time learn learn more and more about what to do in your code manually that's going to lead to the results you want what do I mean basically when you're just starting out do exactly what I just showed you and you will get pretty far over time

[19:13] through this logic and through this workflow you're going to get little messages like this ensure text is left aligned text align left oh that's cool keep going with your workflow but now you've identified wait so basically text on line left is what makes text align to the left you don't have to learn that right away when you keep seeing it over and over again through this workflow you'll learn more and more how to read your code therefore that's why I'm doing this playlist as this right here is everything you'll be able to do

[19:44] everything you want to do like this and you don't have to understand any of that right now there's simple stuff you can just understand right off the bat for example the VPN that just works no command save no you just added that to Your Arsenal now you know you can just simply take the stuff that doesn't look like code and it's fix text and be like what what this is what I'm talking about now that you know the workflow and the process let's finish our header to start off here let's go and change my text because I'm not a VPN company and I don't have

[20:15] an exclusive offer where you can get it for three months for me it's a holding company ass investor and webcafe AI what I'm going to do here is simply screenshot this once I've screenshotted it let's do this I'm going to upload it now that I have it uploaded no I don't actually have to type out the text for it to use shbt can actually read that for me so that's always one situation now in theory I could just be like replace the text with this text but I'm going to show you how to approach this in a more effective way my goal here is to remove this text and possibly remove

[20:46] this in order to communicate with Chad gbt to be as effective as possible let's actually identify that within the code so we see the VPN that just works exclusive offer so we know that's the text but how do I really identify it now in theory I could just copy and paste this over and be like change this that works although the more effective way to do this especially so you get better outputs is see what is wrapping around it so for this you'll notice it's the header text what you'll see is that the div if I can zoom in the div highlights

[21:17] another div that means that they're together if I went ahead and selected this div you'll see that all these are together what does together mean in this context that just think of it like another compartment in a shelf all this code is existing in this shelf therefore in order to change everything within the code and you know little intricacies in it you can either go to the master shelf or just this little shelf right here so for me I'm going to do is this I'm going copy this I'm going to say for this semicolon paste the code let's change it to the styling of the image also the

[21:50] words that are said in the image also notice how the second word on each line line is a different color furthermore please have each line have a CSS class right now it's just H1 default P default we don't want that typically we want an actual CSS class like this associated with the text please output the entire new j6 and CSS file that last

[22:21] line is not typically necessary to get good code but I'm going to give it to you right now because some of y'all especially if it's early days just do the copy paste method copy paste copy paste hit enter therefore in this entire playlist I'm going to try to reserve myself from just trying to code live like EG that's why I kind of went with like showing how to import an image I actually was like wait wait wait let me just show you how to do it through G gbt that's my plan of this playlist I want to make this as simple as possible so if I start coding for a little bit too long

[22:52] let me know let me know if I'm actually typing it out like I might type out some stuff but I shouldn't be typing out a lot of stuff and the reason why and honestly if you made it this far here's a little secret this is a new Niche the content I'm creating right now is a new Niche never has coding being so easy if you wanted to start coding and had zero experience you could do it right now no Niche alert all right copy the entire file come over here command a command V command save okay so we each one got a CSS class nice updated header. CSS copy

[23:23] command a command V save pretty good huh now with what we have right here I'm going to go ahead and make sure just to bold investor with this color but we have a pretty good start here notice how fast that was I didn't have to know anything about code I use all lame IND dictation and got what I wanted in order to do what I need to do notice how they're using a highlight CSS here to color it differently so for me I'm just going to delete this and anytime you want to delete code what you'll notice is that it's always bracketed into something so for example if I delete

[23:53] this and I'm like oh I don't want this here there's going to be an air and you can even see that the air what's causing the air can delete again and then I can add it here alternatively I could have just asked CH GPT to do that but I'm have to show you a little bit I'm going to show you a little bit command save and boom so far so good let's go ahead and add some more formatting here one thing I don't like right now even though this is a big screen is just too much space I need this shrinked in I need this centered I need this compressed let's do it let me show you another little tip here when it comes to coding

[24:24] like this if you've added a lot of new additions and it's starting to look better you don't want bad outputs sometimes you can do this okay great here is what we have so far and all we're going to do is simply paste in our JS file again and our CSS file again in its entirety this is going to allow Chad gbt to recognize the new code and when referencing new code it's outputting outputting it'll be this code as well so you won't get some older code kind of getting mixed in there hit enter you can stop its output because purely the use

[24:55] case of this input was purely to show you the most recent code to play with to play with therefore let's do what I wanted to do earlier and let's go ahead and Center this and structure it say okay for this section can we have the width be smaller and align the entire Block in the middle of the website I'm not even going to add that header CSS class so I can just show you you're completely just talking to it you'll still get the end goal copy paste copy paste and that was

[25:30] horrible didn't do at all what I wanted but that's fine all you need to do is this command Z command Z or undo and we're back where we're at don't worry when this kind of stuff happens just command Z and let's go and start a fresh chat together to get it actually working I'm going to go ahead and come back to JS here I noticed that it left out SAS so I'm going to put it back in there and let's do it I'm going to come up here to New chat and input the same amount of code we'll be working on this today CSS J yes ready to help this should give me

[26:01] like a one sentence response here and we'll proceed so I'm going to go ahead and do a couple things I'm going to re approach how I'm going to structure this I'm going to say let's go ahead and change this header class to a div class and on top of that let's go ahead and shrink the width sometimes we got to start smaller okay for this let's make it a div and only 80% width enter that's why when you do this kind of style make sure to push and commit branches or update to your code to the cloud like I showed you in earlier lessons and on top

[26:31] of that when you run into basically really going down a RAB like you know I'm going really iron out this component today have those branches push so you can roll back to them or alternatively just command Z and undo like one little change you just did Cy and paste over with it copy and pasted over it's shrinked looking better we're getting somewhere coming over here notice how it will sometimes leave a comment on how it's approaching it how it did its logic it added this width line here so I'm going to go and actually shrink this down to like 60 and then the margin zero Auto is what allows us to center it and

[27:04] let's actually not go to 60 let's keep it at 80 now there'll be obvious ones that you don't necessarily need to Output an entire file for one example of this is the actual background color this seems pretty simple here all you got to do is add FFF and this is why playing around is good and there you go now it's all white with our current code here I'm going to go ahead and just re-input that into Chad jbt cuz now it needs to recognize that there is a FFF or white background and then what we're going to do here is I'm going to go and Shrink this in a little bit go ahead and add the little brackets that I usually like to have around automate everything and

[27:34] that should be pretty pretty far in here this is how we're approaching our next prompt here okay for automate everything which is this right here can we just do automate everything the curly brackets and just have everything bold like the actual word everything bold and just have the word everything bold there we go next thing I wanted to work on is the gap between these two I say and can we have the gap between and then provided the CSS codee or the j6 code which is right here it's this section and this section so I just went ahead and copy and paste it over this is not necessary

[28:05] I'm just showing you good rule of thumb and I say be smaller and also can we add a shadow and a CSS class for the image what you'll notice is that there's not a class name in the line itself there is no CSS class you typically want to add CSS classes this is going to allow for you to do more and crazier and cooler stuff with all this information hit enter and the way I'm going about it is my way your way you could just use all lame indication you don't have to reference code and proceed what you'll notice though is that if you run into errors just follow that simple logic of command zing and trying again copy code

[28:35] paste code notice the new class name copy code paste code first thing that I'm recognizing is that okay the shadow wasn't probably a good idea so I'll probably remove that or alternatively we can actually play around with that if we wanted to so it added a new line here called box Shadow we can do something called order radius if you were talking to chbt you ask the same thing here all you need to do is border radius 50% and that still doesn't look good so we're not actually going to add anything here delete now what you'll notice is that for the automate everything it didn't listen and it didn't work and that's because and this is actually very

[29:06] important for you to remember notice how it says H2 here sometimes it defaults to this and it causes issues and the way it's going about this too is probably not the best way so we're going to say this for this line don't use H2 and use B bold this is how you do bold in code it would have known this anyways but say don't use H2 and use B for everything what's great is that if you don't want to just copy and paste one line it'll do the entire file again if you want just the line itself just ask specifically can I get that line for me I'm going to

[29:37] go and grab this so that worked looks good let's add those curly brackets so let me show you how to do that real quick we're going to say just for this line I'll put that line just with outside automate everything look at that I didn't even need to know how to do that kind of logic and it should work here paste still not working uh I'll give up on it or alternatively do this this screenshot with this screenshot we're going to Simply attach this is what it looks like we need it to be and I'm just going to type it out hit enter I'm going

[30:09] to let it do its entire Alo here but I'm going to go and stop it where we care about it right here paste it and there we go had the curly brackets didn't even need know how to do it automate everything and forgot the period so let's add the period and we're good to go in the next lesson we'll go and refine this a little bit more we'll create a whole another component for the content video files and image files and some type of hover over logic we'll see what it's about make sure to leave a like it's completely free all the resources described in today's video are in the description down below and I'll see you in the next video