Let's build a web app with AI in 191 min (Cursor AI, VS Code, ChatGPT, Firebase)

Other Videos📅 2024-09-27

Watch on YouTube ↗

Transcript

[00:00] and this will get you to the point where you have a mobile responsive web application hello you're going to learn a ton of stuff when it comes to artificial intelligence and coding and if you have no coding experience don't worry that's the whole purpose of this entire course through this video you're about to watch you're going to learn how to deploy an actual live website link you're going to learn how to do external links such as if I click this it'll go to a playlist such as this in addition you're going to learn how to do functionality on the actual website such as popups like this like a YouTube link that automatically plays hello hello scroll down here you're going to learn

[00:30] really cool ways to affect the UI to make it a better user experience in addition you're going to learn how to actually securely send data outside of your website what I mean by this is for example a newsletter the user can provide their email there hit subscribe and that can go to MailChimp send grid anything and yeah we also make it so that the website you create is mobile responsive to work on any screen therefore grab a cup of coffee sit down get ready this is going to be a very long video here but I break it down in 10 easy lessons and in 10 easy steps with a ton of different resources that are completely free in this video so

[01:01] I'll see you there you don't need to be paying Squarespace web flow WordPress any of these websites to run an actual website this is episode one of a playlist that we're going to be doing together where I'm going to show you from start to finish how to build out an entire website that requires zero cost per month to be clear the only cost that will be associated with this website will be the actual domain purchase so if you buy a domain for 12 bucks you're only going to be paying $1 a month the reason I'm creating this video is I'm personally paying $18 a month just to

[01:31] host this website therefore let's stop paying $18 a month because $18 a month turns into $26 a year and that turns into $1,188 for 5 years so you're telling me just three days worth of work I cannot pay this anymore sounds good let's jump in welcome back y'all this video is going to kick off a pretty cool playlist that I'm about to release just for a timeline of what we're going to discuss in this video we're going to discuss why I'm doing this the what about it like what are we doing and how now two major things I want to get out of the way right away what you're going

[02:03] to learn in this playlist is going to give you the ability to go past just a landing page you're going to learn basically functionally how to create out an entire website with a contact page a about me page everything like that and not pay a single dime furthermore in this playlist we're going to have to create events such as a user puts their email for our newsletter I'm going to show you how to do this where if the user puts their email in we actually sign them up for the newsletter like it all works perfectly second thing I want to say is I don't want you to get worried a lot of you are like I know what you're about to say right now I know how you achieve this doesn't

[02:33] this require code yes but don't click off because I'm going to show you how to code with a new strategy that's only been really available for the past eight months to a year we're going to be using Chad gbt to build out this entire website together now yes when using Chad gbt to code you need to have some understanding of the code itself but don't worry that's why I'm here and that's why you're going to have this entire playlist to watch through this video so this isn't like 2018 where I'm giving you the same proposition and you're going to have to sit and watch me code code for hours no no no no no no no there's a new way to code y'all and this

[03:04] new way that you're about to see the code was only possible in the last year so don't worry this isn't going to be your traditional let's Cod out a website video that you saw 3 years ago or maybe you never saw at all this is going to be a video that you're going to realize real quick wait I have no coding experience and I watched this playlist and I could probably code out my own website and I can confidently say by the end of this yes and you know why because even if you get stuck I'm going to show you how I communicate with gbt how I find tune gbt how I add customer instructions to gbt how I do things in

[03:35] order to get unstuck so yes by the end of this playlist I can confidently say you're going to remove a business expense within your business which leads us to the first thing I want to talk about which is the why why are we doing this Corbin it's only 18 bucks a month you can't pay 18 bucks a month Corbin yes but let me explain why I'm doing it we're going to goad and drag this why over here the first major reason of why I'm doing this is because this is just going to be fun trust me this is not going to be your normal let's learn how to code playlist like you're this is going to give youall perspective like this is huge it can make coding fun it's

[04:07] a lot of fun too because now you're going to be like yeah I don't have to pay that 18 bucks anymore no more 18 bucks number two is I'm killing like four birds with one stone right here so we're just put one stone and you're like cor what do you mean you're killing four birds with one stone you know they saying like killing two birds with one stone no no we're killing four Birds I think the first major bird that I'm killing I've been doing a ton of content when it comes to creating an AI software this playlist has like over 43 videos it's concept of software and one request I see a lot within this playlist how to really set up a project and how to build

[04:37] out a front end and a back end what's great about this playlist is we're going to learn together how to create that now I'm not all the way to the extent of creating an AI software and to be honest of yall after this playlist I'll probably do a playlist for that as well but to the extent of setting up your tools building out a front end understanding best practices so the first major reason is y'all when y'all are watching my concept of software videos or if you if you just met me hello I'm Corbin or you watching this one y'all are going to learn a ton of information that is extremely Evergreen like this playlist is going to have relevancy 5 6 7 8 years from now so

[05:08] that's cool number two the second bird we're just saving money you're going to save money after this I'm going to save money after this what's that 18 bucks a month going to go towards now Corbin I don't know maybe I'll finally buy a Hulu subscription maybe I'll like order something on GrubHub which would probably still only pay for like 60% of it but the idea is like this is free money like why not do it if like the threshold here is like you basically put two to 3 days worth of work and then you never have to pay that again and now I got more Funny Money who doesn't like funny money and the third bird we're killing here is I'm turning a deficit of $18 lost every month into an extremely

[05:41] positive source of income basically these videos are going to be here for years from now and I'll probably make more money than A8 but that's like the bottom line of how much I'm saving the idea is like the videos are evergreen right and the last bird here which may be obvious but I was already going to do this I was already going to transition my web flow site into a site that I coded out personally but now I'm just like wait why don't I just make content around it if I'm already going to do it there's another bird that covers the why this playlist is incurring I think one other one probably is like I'm kind of

[06:12] like testing out content where I'm coding in it and seeing how it performs with my channel I usually stray away from this just because I feel like if I put too much coding content it could scare people away when it comes to exposure who knows maybe this will perform well let's see the second thing now let's go over the what like what are we going to do what are you going to learn by the end of this playlist by the end of this playlist we're going to be able to build a functional usable landing page with a custom domain and in this specific landing page I'm going to make sure I include the functionality of the user puts in an email and then that automatically subscribes them to our newsletter whether using MailChimp or

[06:43] whatever newsletter you use and on top of that we're going to add other really cool stuff that we see on this website such as like hovering over getting an image overlay furthermore coming down here we can click this and you know contact an email directly nice little ined from Twitter that's super easy to do and honestly probably a little bit more stuff so what free value are you you're going to get the ability to create an effective landing page land now what's cool about this and what I think I plan on doing once I create my own landing page here I'm going to do like little like spin-offs here I'm going to start connecting more to backend logic I'm going to start

[07:14] connecting making a contact page I know one video is going to be dedicated to a contact page because a lot of businesses what they do and how they operate now is you're not necessarily doing e-commerce on the actual website itself now if you are part of me is like shoot should I just code out my own e-commerce and get off Shopify but there's reasons why you'd stay on Shopify Etc the point is is that like on top of just a landing page I'm going to show you how to build out a full flesh website with multiple pages and directories and showing you how to use Google search console console and you know everything that is basically relevant with a good website that's not meant to scare you don't worry what I'm about to show you in this

[07:45] playlist you can do yourself you just got to have chat jbt that's like a big big thing here overall by the end of this I can confidently say you'll be able to be really good at developing front ends and then if your reason of developing a front end was purely just for the website and the lending page what you'll see in this playlist you're going to go you're off to the races start running but if your use case is like I'm watching this Corbin to get more background knowledge of how to build on AI software you're at a good start here because realistically what I'll probably do is when the AI software playlist does

[08:15] drop cuz honestly at this point this stuff's fun for me I like doing it it will drop that's going to be a lot more backend heavy comparative to this series which is going to be a lot more front-end heavy like for example I'm going to try to limit the backend use as much as possible and do most of the processes on the front end I'm also show you how to use zapier as a supplementary backend so you don't have to get too advanced really depends on your use case so that covers everything you need to know in the what like this is what you're going to end this is the end Value Point that you're going to receive by the end of this playist I don't know how many episode this is episodes or lessons this is going to be but it should be enough where you feel

[08:45] comfortable enough to go back to lesson two Lesson Four lesson one that's why like in these thumbnails I was thinking to myself I'm like how do I make it so it looks like it's the same topic on the playlist I was like oh you know what I'll do one two three so if you see my my fingers up like this that means there's some type of playlist and a lesson going on now let's get to how we're going to do this everything sounds good Corbin but how how the heck are we going to do this what do you mean to do this is actually going to be pretty simple we just need two things now if we want to implement a back end we'll need three things but for now we need two

[09:15] things we are going to download vs code and we're going to use Firebase that is horrible spelling that doesn't even look legible that say Firebase vs code is where we're going to code Firebase is where we're going to push to our hosting and then one very last huge caveat here huge you can use whatever AI model you want to use but this entire playlist is going to be dedicated towards this model which is going to be gbt I'm going to show you how to set up custom instructions here I'm going to show you how to do everything and talk to gbt in a way where you get effective code that you can use right away I said this before and I'll say it again what you're

[09:46] about to see in this playlist was only capable in the context of coding in the last year this isn't 2019 anymore this isn't going to be a traditional coding video tutorials like you're going to be like whoa wait you can do that yes you can do that just so we're clear this is the vs code you're going to download completely free this is Firebase Google and then this is chat gbt which I'm sure a lot of you probably already know now one thing I got to point out before I get absolutely spammed in the comments is that this can

[10:16] be completely free but it's dependent on variable cost the only thing that's not negotiable would be your domain where if you wanted to use a custom domain that's going to cost you basically however much your domain costs so if it's 12 bucks a year $1 a month now in theory using Firebase you don't even need a custom domain but you'll see like if you want to use okay if you don't want to use a custom domain that's fine but you'll see they give you a free domain you can use within Firebase it's like

[10:48] firebase.com domain on our website for free that's cool and multiple sites per project all for free now your first question might be Corbin what does that mean 360 megabytes a day like how do I go over that like quantify this to visitors to website I got you and the only reason I know this is cuz I did the math myself because I wanted to really make sure what I was doing was correct coming over to Chad gbt I went ahead and had to do the math for us in this playlist we're going to be creating a landing page

[11:19] together so one of the biggest metrics that we have to understand when it comes to building out a landing page and using Firebase is the actual size of the megabytes of that lny page assuming we're creating a app landing page that is effective and is very very much like to the point we're going to be only looking at around a 1 Megabyte size knowing this this is going to equate to around 5,000 people could visit our website and we're still not paying a dime now let's push it what if 20,000 people visit our website a month if 20,000 people visited our website within that month based off our calculations

[11:50] that's going to cost you a grand total of $1.50 I think that beats the 18 USD and on top of that if you're getting 20,000 people to your website a month you probably making some money that does it though we're going to officially kick off a playlist here to show you how to build a website and you never have to pay for a website again so I'll see you in the next video this is lesson two of never paying for a website again now what is super cool about this series is that I'm going to provide you with a ton of resources so now that we're jumping into lesson two this is what we're going to go over in today's video taking a step back if you have zero to little coding experience don't worry trust me I

[12:22] got a ton of resources and on top of that this isn't 2016 y'all you're not going to see me sit here and code for an hour or two there's a new way to code you're going to learn how to do that therefore in this video we're going to do these things now if any of that doesn't make sense to you don't worry as I'm going to explain it to you and on top of that you're going to get a couple things in the description down below the first thing I'm going to put in the description is this Google doc which is actually going to walk you step by step of everything that I do in today's video on top of that you can just copy stuff over which is really really cool the second thing I'm going to leave in the description down below is a chbt link

[12:54] that is specialized for this specific context what do you mean by that Corbin let me show you the whole purpose of this chat is for lesson two so everything you're going to learn today if you run into an error you can of course comment it down below see if anyone else can help you out but alternatively you can talk to Chad gbt now I've specialized it to really help you in this specific use case because we all know what's very frustrating is you follow a tutorial online it's 30 minutes in 40 minutes in you get an air and you're like how the heck do I get past this air well guess what I gave you the

[13:24] solution here both are going to be put in the description below both are going to be free so make sure to leave a like right off the the bat right off the bat cuz you already know you're going to get a ton of value and this is only lesson two let's jump in welcome back to lesson two of never having to pay for a website again and I'll be honest with y'all based off the reaction I'm getting from lesson one two things have become very clear to me the first thing that's become very clear to me is that people like this kind of content and people want to watch this kind of content I was actually kind of hesitant doing this kind of content because of the fact that it is going to be a little code heavy but I think the way I teach and I think the way I'm going to show you to get around the code stuff is going to make

[13:54] it so easy that you're going to feel like like how am I even coding right now but you are coding and then the second thing I realized is that yeah if this goes the direction I think it's going to go I can see that there's a lot of people that want to see very high value content like this where basically I'm eliminating an entire expense from your business or alternatively creating an opportunity to create a website for free Corin you're speaking too fast what's going put me down to 75 speed a lot of my viewers like me speaking fast past that though it's made it clear to me that yes an AI software playlist will come out where I show you how to build out a front end and a back end and basically create your own AI software like not a gbt rapper because that's

[14:26] lame I'm sorry if any of y'all made a gbt rapper but like an actual specialized use case for a Ai and software so keep in touch with this channel make sure to subscribe this isn't always a code heavy type of Channel although it seems like I need to Branch out a little bit in this sector because there is a lot of like people not really making content in this realm so I guess I'll fulfill this need in this video though we're just going to show you how to set up so the end goal of this video is I'm going to get a website like this so I'm going to go and make sure I I can't really zoom in here but basically you're going to have it so it's pushed to a very specific URL

[14:57] that's your own hosting URL on top of that we're going to be able to launch it within our own local machine this will make more sense as we go by the end of this video you're going to have an understanding of how to set up a project within vs code that's going to allow you to basically add text and that's going to show up on a on a web page may sound simple in the surface and honestly it kind of is once you see that the steps towards it but you're going to learn a lot here last little thing here if you want to see lesson one this goes over the what how and why I'm even doing all this and gives you an indication of the cost you save and any other cost that would be associated with creating out a

[15:28] website of this manner I'll link it up there let's jump in the first major thing that we're going to do together right now is create Chad gbt custom instructions this is imperative this is going to give you the ability to if you run into walls if you run into issues if you're like what the heck does this mean you can paste it into your Chad gbt it will already be lasered in for your specific context and you'll get better answers in the Google Doc I provide example instructions and these are going to be the ones I use personally let me go over them line by line so you can really understand why we do what we do

[15:58] it goes about saying you're going to need a Chad gbt Plus account that's just part of the game in theory you could use this on a free plan it's just going to take you a lot longer if you have more questions when dealing with this kind of stuff for now though let's go to custom instructions we're going to go up to our profile here hit customize chat gbt I'm going to go ahead and clear this and then we'll add it one by one together first thing you need to understand about custom instructions is that if you are running to issues with ch gbt when it comes to why are you talking about this right now you get into ra random rabbit holes like don't go that far chbt I wasn't even talking about Pluto we were talking about Saturn

[16:29] this is what you need to leverage so the first thing we're going to go over is what would you like Chad gbt to know about you to provide better responses let's go and paste this over and that's the reason I'm leaving this Google doc is because it's easier for you just to paste and you know copy and paste it's annoying when people use like sign up to my free newsletter and then get this Google doc no no no no no no it's just there this is the instructions for my specific context if you don't know my specific context and you just skip to lesson two basically I'm taking this entire landing page and I'm making it my own and I don't have to pay bucks anymore Ching for you you're going to

[17:00] basically fill in your context but let's go line by line for me I am creating a web Cafe AI landing page using visual studio code on Mac OS primarily with react for the front end and Firebase as the back end for you simply put in the use case of the type of website you're creating this can be long this can be short for me straight to the point number two using visual studio code on Mac OS put in your operating system are using Windows this is actually important because of the some of the short hands and short keys is going to be really relevant to your operating system for me

[17:31] it's Mac OS also the actual area you're putting the code in which I think all y'all would just use visual code Studio or Visual Studio code next we're going to identify what we're using for the front end and what we're using the back end corion what's a front end this is a front end like what we're seeing right here and what we interact with is the front end what's the back end if I were to save this that communicates to a data thing or database or data structure in the back end a lot of these lessons are going to be dedicated to the front end but it's still good to identif Iden ify the back end for example in this context we're going to use Firebase for hosting

[18:03] what do you mean hosting Corbin basically where websites going to exist on the internets so we're going to identify we're using Firebase as the back end the primary goal is to make an optimized landing page that's the goal what's your goal by coding style preferences remain the same with the parentheses around parameters and arrow functions and minimal spaces inside object braces the reason I add that personally is I noticed that at least in the past there was issues when it came to coding with j6 and re ja and cat gbt was giving some bad code in the sense that they weren't giving the correct brackets so I added that that's also

[18:34] good for you to know that if you're ever getting bad outputs or the code and you're noticing a reoccurring issue you can go ahead and identify stuff like that but for the most part you won't ever have to deal with bad code the new project directory is CD coffee fuel what does that mean Corbin don't worry this is going to be where you reference it in terminal when we reference it later what do you mean terminal basically terminal is how we're going to you know send commands to GitHub send commands to vs code send commands to Firebase what do you mean by that don't worry we'll get into it all you need to know it's your directory what's your directory where we store our code branches what's a code

[19:06] Branch basically all the files of code then finally put in your GitHub username and for me it's coffee fuel bump now before I go to how would you like Chad DBT respond let's just get some stuff out of the way real quick make sure to download vs code onto your system for me it's Macos for you it might be Windows download it go to github.com put in an email choose your profile name that's what I referenced in the Chad gbt custom instructions choose a profile name and that's all you have to do for now github.com VSS code all for now okay now let's go over how we want CH DBT respond

[19:38] so it's going to copy over my current directions of course this is interchangeable as well personally this is how I like it begin with one sentence summary of the main goal for clarity I appreciate concise stepbystep instructions tailored on to the specific code or files I'm currently working on this is helpful so it doesn't just start rambling and doesn't lose track of the underlying code we actually care about please provide code Snippets or configurations that are directly relevant to visual studio code good Mac OS react and Firebase input output depending on whatever your situation is

[20:09] adhere to my coding sty preferences when referencing external resources or suggesting Solutions consider the context provided about my project and its current state and Firebase Integrations this is important you don't want to be 3 weeks down the road and a it's asking you to install Firebase again chbt I already install Firebase what are we doing here that's annoying this solves it providing any step-by-step instructions first ask for clarification on the specific updates or changes I'd like to make avoid making assumptions that's big about installed packages or completed steps unless

[20:40] explicitly mentioned and then just as a phone one talk to me like Jarvis from Iron Man with an emphasis on maintaining code consistency and Clarity that's our custom instructions those are valuable set them for your use case save our custom instructions are done now let's start the fun stop talking Corbin been talking too much just get going all right I got it I got it got it one last thing I want to point out before we get going here is make sure to Klick that Google doc slclick the link that you'll see for this chat jbt chat why are you telling me that Corbin because if you get stuck if you get stuck with anything I'm about to show you today use this ask

[21:11] it questions put in the specific error and give it context of your specific situation and if he gets really bad send a comment down someone to help you out let's jump in here we go we got a brand new vs code here nothing's happened to it let's create our directory this is how we're going to reference on our local machine and on top of that how we're going to reference it later on when calling git or GitHub don't click off I know I I know you're seeing terminal you're like I never even opened that before Corbin what are we doing don't don't worry don't click off this

[21:43] is actually really easy I know I know terminal can be scary sometimes all right let's say first go ahead and create our project all relevant terminal commands can be found within that Google Docs so I'm going to go ahead and copy and paste using the exact same step flow explain the context and proceed so obviously our first thing here is the directory we're going to use mkdir squiggly slash and your directory so let's go and name it this is important I'm going to name my directory web Cafe land whatever you name it this is going to be it forever you could

[22:14] change it it gets difficult just name it something you like for me web Cafe land boom now let's go ahead and actually reference that in the terminal to do so we're going to do CD squiggly SL webcafe land C delete delete delete delete command V now before I hit enter here copy it why are we copying it we're going to use a little cheat sheet for our terminal commands we get used to them understand them copy paste them over this will make more sense on Mac OS it's called stickies on Windows I have

[22:45] no clue someone in the comments let them know but for now we're going to paste this as this is our directory I'm going to remove that little Bolding which means that we're going to be referencing this a lot in the future so it's always nice to step have a little cheat sheet boom first thing in our cheat cheat hit enter notice how within our terminal command now it actually leads to that specific directory so far so good once we're in this directory we're going to go ahead and make a vs code project with it and this is how we're going to import all of our stuff so all we need to do is do code dot hit enter and then watch this or it's going to pop up here not

[23:16] there so there we go though we are so far so good we are in our new vs Cod project which is web Cafe land step two here is done you just completed step two that's it set up vs Cod project boom good go now let's go ahead and install react to install react it's pretty simple we're just going to copy this make sure we're in our directory how do I know if I'm in the directory Corbin it's right there if you're ever out of a directory let's say you create a new terminal window go ahead and grab that original command CD hit paste enter and

[23:49] you're back at it let's install react though what is react react is going to be our front end this is how we're going to create designs and visual elements within the actual website itself Pace here hit enter and this is going to get load in here nice little load bars I know this looks crazy no this is not the Matrix no I'm not I'm not hacking something right now feel like if we were watching like some cliche hacker movie they would probably run this on like the screen and you'd be like oh this person's up to something it's like n it's just it's just downloading let it download with all this downloading you'll see it up there and funny enough

[24:20] look at that little message it just left me happy hacking no no no chill chill chill chill we're just making a landing page we're not doing anything crazy boom done we' successfully installed the framework for our front end what's next Corbin let's create this GitHub and the reason we're creating GitHub or we're not creating GitHub but we're creating a repository on GitHub is that we can push this and put our code in the cloud which becomes very useful in a lot of different context here we go okay so we're in GitHub you're logged in you made your profile you have like a your name which for me is coffee fuel bump

[24:52] coffee fuel bump UPS bump ups.com check it out we're going to go ahead and create a repository names this is how we're going to reference it when we are making our entire git flows for me i' just like to keep it the same name so we're going to do webcafe landan for you would be whatever yours is we're going to paste it in here and because of the fact that this is going to be your website for your business you're going to want to select private here you don't want you don't want anyone else to see your code create new repository so far so good now we need to actually set up our underlying repository and connect it to our vs code project now all this kind of looks crazy but don't worry we'll

[25:24] make it simple start off with the simple command of get in it no we're not Australian no I'm not from the UK in it inin it kind of crazy mate shrimp on the barie I haven't been to Outback Steakhouse in a long time I think I need to go back they have like a really good flaming Yong once we do get in it our Google doc ask us to do a very simple commit here so we're going to go and do Echo this is going to create a read me file also I'll go and explain this a little bit more so this is going to create a read me file we're also trying to basically create our first commit here which shouldn't

[25:54] work right away because basically because it's a private repo we need to add a little bit of like Hey we're the actual person that owns this and no one else can push to it this will make more sense first off grab that code or terminal command and paste it once we've done that we've added our read me file the read me file is like their kind of like how do you start using react like what's going on here in reality I can go like this and be like I want some coffee all a read me file is is that if you pass this to another developer you can use it as a reference basically like

[26:25] if you've installed stuff you probably know what a readme file is like the I use for my main software it's pretty funny what we have in there let's go ahead and actually connect to kit though from now now for this next command we're going to do a little bit of copy and pasting I'll explain why go and copy this and for now I'm just add it to the bottom I'll delete this once like this video comes out let's make my life easy you're going to go and paste it and notice what it's asking for so the first thing it's asking for is your username your username is your GitHub username which is over here so for me it's that

[26:57] for me is coffee bump coffee Fu bump so I'm going come over here I'm going paste don't worry about the link or I'll make it unlink paste now the git or your repo we come back over here is going to be the web Cafe land or your name so that was what we identified as the repo when we created the repo like when I hit that little create repo button that's what it is paste now we got to add an origin for where this is coming from so we're going to go ahead and add our username here again coffee fuel bump whatever you are

[27:29] we're going to go ahead and add your personal access token this next part I know for a fact is going to get the most amount of replays months if not years from now because what I'm about to show you gets annoying if you forget how to do it but don't worry we're going to come up to our developer profile here and we're going to go ahead and hit settings in our settings here we're going to go down to developer settings here we're going to go ahead and go to personal access tokens we're going to go to find grain tokens for some clarity all we're doing here is basically making it so that GI understands that on our local machine or

[28:00] our laptop or your desktop it understands that you actually own the ability to access that code within the cloud think of it as quite literally your password quite literally a key to a door if you didn't have access to this personal fine grain token then you want to be able to access your repo so we're going to go ahead and hit generate new token put in your password now this is why I know this is going to be the most replayed part of this video because the way the security works when it comes to this is that this token will expire therefore we need to reuse or create a new token and then put it back into a terminal

[28:30] knowing this you can set to 30 days 90 days 60 days or indefinite choose your amount for me I'll go of 60 token name what do web Cafe land token description add it if you want for the repository access let's choose the repository that's relevant to for us it's going to be the web Cafe land this is the repository we just created in today's video scroll back if you forgot for the permissions everything everything Corbin everything so every single one of these

[29:00] I'm not going to show you show me doing it but we're going to go ahead and just put the max amount of access why are we doing this Corbin this is because this is your code this is your this is your project so you want to basically be able to do everything that can be done when accessing your code therefore let's make this all read and write account permissions same deal read and write by the end you should see something like 27 permissions for your want repository 14 account permissions generate token now I might have to blur that out just cuz it's my token but for

[29:32] you you're going to see a huge string here it's going to start with GitHub here you're going to hit copy extremely important don't lose this if you go out of this page you won't be able to see this token ever again so I suggest you copy it and know where you're putting it let's go and put it back over to that Google doc well actually I can't because then people can roll back so I'm actually going to have to move that entire text to something else so I'm going to copy this before I add that token let me just add the last thing here so we can push it over so your username same deal your repo again is the name of the repository you made and get so I'm going to paste it here then

[30:02] just paste in your access token you're going to Simply come over here and paste now for me there's going to be a section here that's just like completely white that's because I'm still protecting the access token but just paste it should have all your relevant information in then all you have to do is hit enter I went ahead and hit enter a couple more times so you don't see my access token still but you should get a message like that that basically we have successfully created this new branch and what you'll notice is that all the information that we had in that Branch shows up here as well well there we go we have access to everything that we created with that vs code so far so let me just do one push

[30:32] with you so you can understand how you take local code push it to the cloud and I think the easiest way to do that is let's update this read me two major things I want you to note here when you make a change to a file you'll notice a couple things first thing you'll notice is that you'll get a little one here that tells you there's been a change based off the original code so we haven't saved yet to GitHub the second thing you'll notice is that there'll be a little bit of an asterisk here that tells us that something's different with the file than our original Branch just to clarify this a little bit more if I command see this and I go back to what the uh readme originally said which was this notice how I hit save notice how

[31:06] that one goes away the main doesn't have the asteris anymore and the read me isn't yellow basically what's happening here is what we see here therefore there's nothing to change there's nothing to push y'all all good but let's go and do a push together so you can understand how to push I'm going to hit command a command V I want some coffee do you want some coffee it's weird I find the best coffee is typically at like diners like really good breakfast areas right corn beef hash maybe some pancakes sometimes maybe not usually it's corn beef hash sour dough toast under easy on the eggs straight coffee

[31:37] it's even better if they give me a picture you need a little water on the side too that is the way to start your day with us changing the read me here we're going to come back to our terminal and you're going to do your first commit here if you have never done a commit before you're about to see it here live you're about to see it here live so what we're going to do is this this is how we push a new save we do get ad Dot get commit dasm and then quotation marks this is how we're naming it this is how it shows up as like a new push to the branch this will make sense once I push

[32:08] it uh new read me and this can be anything quotation mark tells you that there has been a change etc etc we're going to say kit push origin and this is going to be pushing to the branch and right now you can see the Branch's name is main so I just got to do Main and boom what just happened Corbin come back over here reload this first thing you'll notice is that now the most recent branch is new read me I clicked that what happened to new read me oh we deleted everything in the readme and we

[32:40] just added I want coffee I guess someone wants coffee but there you go we've successfully just pushed a new change to a branch together now if anything I just described there as like super confusing or you're like Corin what's a branch I want you to think of branches is like we have our main branch right this is what we're going to use as like the main thing the website's going to see if we ever want to make features past this typically we make new branches we call those new branches a specific feature name such as ad footer then we will merge that ad footer Branch to the main

[33:10] branch so that we have a stable main branch we'll get into it don't worry in this lesson series I walk you through step by step and on top of that if there's anything that just happened in that entire flow that you're like what the heck just happened ask that Chad gbt chat I just had or I showed you earlier like the one I shared and what you'll notice is that once we push if I click this it all goes away Main's regular not yellow I want some coffee boom number three is done we have successfully connected our GitHub to our vs code now let's go ahead and install Firebase now

[33:41] before we do that actually let me show you that it works and that we have a front end but just not connected to Firebase and we can do some cool stuff so in order to do that we're going to come back to our terminal usually what I like to do is create a new terminal for the use case of what you're about to see right now and what you're about to see right now is if we run this website on our local machine when I say local machine anytime I say local I'm referencing your actual computer has zero access to the internet and the idea here is that if you basically if I gave you this URL Local Host 3000 you

[34:11] wouldn't be able to see what I see because it's ran on my machine with any prompt when communicating with your project you're going to start that CD that's why we created this cheat sheet so let's add another thing to our cheat sheet the additional thing we're going to add to our cheat sheet is npm start what this does for us is this is going to launch it in a web page for us to play around with and it's going to be local so I do npm start hit enter boom starting development server what you'll notice is that in the URL itself which I can't really zoom in well here you'll see Local Host 3000 so let's add to a

[34:42] cheat sheet again anytime you're developing not to an actual website link that everyone can access we're going to do Local Host 3000 as this is going to be our ability to create edits on the go let me show you what I mean now this is going to be our first lineup code together what we're going to go to app. s now right now you might be like how the heck did you know that don't worry this is basically what we're deploying this is how you will deploy the front end this is what's referenced we're going to create other files here but all I want you to look at right now is to understand the utility of a local

[35:12] machine so right now it says edit SRC app.js and save to reload and that's actually quite literally what we're going to do but the idea here is this it says that right now right watch how fast we can make it instantly change you go like this I'm minimize that real quick and if I say n I'm good boom that's the utility here instantaneous changes to see instantaneous reactions of what a front would look like got it now that you know that in order to stop it from building to Local Host 3000 you either force quit your terminal or alternatively for macet

[35:43] control C this will stop any process and we're done therefore if I come back to that exact same URL you'll see the site cannot be reached now let's go ahead and install Firebase copy we're going to go ahead and paste mpm install Firebase this is going to give us the dependency and the packages that are required to show up here for our use of Firebase as a project what can you do with Firebase storage hosting functions a ton of stuff hit enter we are loading in what you'll notice is that when we install Firebase it's going to show up in our package lock. Json and our package.json it'll

[36:16] show up like this this is where we install dependencies for example if you were to install react or sorry if you were to install stripe it would show up here as well this is the version right here and this is the underlying package where installing or dependency now that we've installed Firebase let's actually create a Firebase project that we can reference and use within our project now that we're over in Firebase here we're going to create our own new project for you the user interface is probably to look different because you probably haven't created a project yet for me already got one we're going to hit add project to start off here we need a project name I'm going to keep it simple

[36:46] I'm going to use the same name I've been using across this tutorial which is web Cafe Landing I'm going to hit continue it's going to ask whether you want Google analytics enabled or not I think if you're making a website you probably do so hit continue make sure that is selected make sure you check all the relevant information it's requesting here create project we are loading in to our project that will make it $0 a month and no more website fee oh yeah it's ready to go let's jump in continue we are in our Firebase project here let's go ahead and add some side tabs right here they'll become more relevant in future tutorials we're going to go to

[37:17] build here let's add fir store database let's add functions let's add hosting don't worry don't worry right now we're just going to deal with hosting and actually creating this project over here so so let's go ahead and select web what's going to be your web app name let's do web Cafe Landing again web Cafe landing and you'll notice there's already an option to set up hosting with it as well because that's the whole purpose of this lesson we're going to do that we do web Cafe Landing web Cafe Landing that's fine Register App once you do that you're going to get a code block that's going to be relevant for you now this is blurred out because

[37:48] obviously this is private information but you'll also be provided with a hosting URL that we'll actually be able to push our code to on a lab live web browser we went ahead already did the first step here let's do the Second Step coming over to our next command line here we're going to do torch SRC Firebase .js this is just going to create a file for us to put all this relevant information in command V enter boom with this Firebase .js file let's copy over that code it just provided as I referenced in the Google Doc same deal same situation but all your variables

[38:19] are going to be there now I noticed one thing that doesn't show up in the Google Doc but it does show up here is your analytics which will be your measurement ID and also just analytics K analytics app that's all you to do for now though paste it in you'll learn further lessons of how to leverage this make sure to command save now that we have the file structured and we've created our project here let's go ahead and initialize tools to do so we're going to do mpm install G Firebase tools these are what it's going to give us the ability to do hosting functions in fire store hit enter as I referenced earlier if you run into issues use that CH gbt chat and straight

[38:50] up just copy and paste the entire air Message from that your like the terminal message and it will take you in the right direction okay now that we've installed the tools let's actually log into our Firebase account so we can access it within our vs code all we need to do is this Firebase log in enter I'm actually already logged in so I'm actually going to do Firebase log out so you can see the process here very very very important anytime you plan on coding using Firebase doing anything basically just start your day by doing Firebase login let's add it to the cheat sheet

[39:22] add Firebase login Firebase log out to your cheat sheet real quick in and out Firebase login when to ask all this information you're going to say why which stands for yes once you're here choose the account that you did this entire setup with for me it's contact at webcafe ai.com hit continue enter your password once you're entering your password you're going to come down here and hit allow and you should get a message like that it'll show has success logged in as your email and you're good to go now that we're logged into Firebase and it understands that this project exists and we have access to it need to initialize it initializing this context is that anytime we want to use a

[39:53] specific feature within Firebase such as hosting functions database you need to initialize it you only need to do this once typically and once you got it going you got it going for me I'm going to do Firebase in it now you have a ton of different options here for us we're going to go ahead and scroll down to hosting because that's what we're doing in today's video we're going to do hosting configure files for Firebase hosting and optionally set up GitHub action deploys we're going to hit space then we're going to hit enter we're going to select use existing project we're going to choose our project which should show up web Cafe Landing web Cafe Landing what do you want to use as your

[40:24] public directory that's going to be this right here we're we're going to say public so we're going to hit enter configure as a single page app we're going to say yes set up automatic builds and deploys with GitHub we'll say no for now file publicindex HTM already exists over right we're going to say no that's very important and there we go once we've done that you'll notice is that we'll have a new two files here we have the Firebase Json and we'll have the Firebase RC let's go ahead and see this all working together so first off let's come back to our Firebase project we're going to go to hosting going to get

[40:55] started here for the most part they should already be initialized we actually need to deploy so let's actually do that real quick and before we do that we're actually going to build it first to build it is npm run build what does that mean Corbin npm run build means in this context this is like react compiling the front end this is like the visual element we're building first Firebase deploy is like us deploying the back end front end deployment backend development or backend deployment so first let's build our app it's going to be npm run build this is different from npm start npm start is like the local 3000 npm run build means we're building

[41:27] this this file into an optimized production build that can then be pushed to our website there we go we've successfully built it this is also the sizing of your app if you're interested now let's go to deploy Firebase deploy early days this is going to be extremely fast for obvious reasons you got a small application as you keep going though this could take a while for now though we've successfully deployed let's check out this website now sometimes you going to air like this where you're getting a white page here but not the emulator typically this has to be associated with the index.html let me go ahead and confirm this first and while we confirm this we're we're going to actually do a

[41:57] little trick here you can actually run two terminal commands simultaneously so doing npm run build Firebase deploy pushes your entire application so I'm going to go and paste that hit enter here we're going to build it first and then deploy it and there we go it worked perfectly there is one thing you need to change in order for this to actually happen the issue that was incurring here was that the Json was referencing the wrong area to build the deployment so in this Firebase Json you're going to see public here switch that to build and then this should P this should put perfectly to prove it to you all we got

[42:28] to do is come to our Firebase here if you go to hosting these are going to be previous deployments and then you can click either of these links come over here you click either of these links it's going to take us to that page and this is a live URL this exists on the internet now whether we actually let robots crawl it and site ml that's going to be a later conversation but for now there we go we've successfully created a connection between GitHub VSS code Firebase and created it all together to the end point of having a deployed Firebase hosting or the website we're going to be building from here on out

[43:00] now I want to point out that if you had questions during this process talk to that chbt chat but on top of that I'm going to go into more detail of what those files represent what it means to do all this as I know this may have been a little bit fast and kind of glossing over some of those facts that's because of the fact that you know you're going to have lesson three you're going to have Lesson Four to set that all up and understand at a deeper level what every single folder means there what every single file means there for now though we've successfully done lesson two here where we set up a vs code project we've connected it to GitHub we understand now

[43:30] how to install Firebase use Firebase hosting we'll use other stuff in that as well but for now we're good to go now we're on to lesson three in lesson three we're going to go over security and how to set that up for your vs code project and then we're going to build a very simple user interface together and I'm going to show you how to render that on a website live and then finally we're going to go over SEO let's get started y'all we are going to do this today this is the guideline as you already know this Google doc is going to be in the description down below I'm also going to include a chat BBD chat that is specialized for today's lesson so if you

[44:00] run into walls run into issues have questions ask it in addition if you are skipping to lesson 3 or this is the first video you're watching in this series I encourage you to go back to lesson one and start from the beginning as some of this may look very foreign to you or may look like what is going on but in reality we already did all this so make sure to watch lesson one watch lesson two and that can kind of get you to the point of what we're about to do in today's video last two things to note here make sure to leave a like right off the bat you're going to get a ton of free value this is a free Doc free CH gbt chat and by the end of this entire

[44:31] series you're going to be able to have a website hosted on a custom URL for free which is kind of crazy if you think about it considering how much web flow Shopify WordPress and all these different websites are charging you nowadays therefore number two get a cup of coffee let's get to it no cream no sugar let's just do number one which is setting up security so what we're going to do to set up security is we're going to go to Craigslist we're going to set up a job posting we're going to save you know $22 an hour to protect no I'm just joking but in this we're going to show you what security means in this context so there's plenty of ways to do security

[45:02] in Firebase itself when it comes to storage like you'll set up storage rules this gets into more advanced development for our specific use case today it's purely going to be so we can protect high-risk variables what do I mean by highrisk variables in the previous lesson we had set up together our Firebase config variables this is going to connect us to Firebase that's going to allow us to do our hosting but these variables are high risk if anyone ever got access to those they could do some crazy stuff so what I'm going to do is I'm going to show you how to create a EnV I'm going to show you the use case I'm going to show you why we create

[45:32] these because another reason we're going to need this EnV is that when we set up our web hooks to handle the conversion event in my context the conversion event will be when a user provides their email which puts them into my mailing list now in order to do a conversion event like that we're going to need some type of web hook in order to communicate with our newsletter provider that web hook itself is high- risk therefore we're going to put that in the EnV file as well in a later lesson if anything I just said to you doesn't make any sense you're like what did this just ramble about for the last 30 seconds don't worry step by step let's jump into it this Google doc will be filled out

[46:02] completely by the end of this video right now it's not finished because I'm doing this all live let's do number one together we're going to set up our security with an environment variable but before we do that go to your cheat sheet what's the cheat sheet Corbin were you here for lesson two no and that's why you don't know what the cheat sheet is coming over to a cheat sheet grab your directory command and see paste it enter now we're in the directory last video we connect connected this to GitHub so we can push our code into the cloud let's follow some best practices here or just things you should do so you don't run into errors what do we start

[46:33] with Firebase log out Firebase log out but Corbin I logged in yesterday do I have to do this again yes because you will run into errors that shouldn't happen that's like I did everything right but I'm running into an air still these are the kind of things that you just set up in your workflow when you start coding for a day or at least start messing around for a day that you just want to do Firebase log out Firebase log in I know y'all seen Karate Kid watch was on wash off kind of same deal here there we go we're logged back in we're going to go we could take this one step further here and make sure it uses the

[47:04] correct project so let's go do that as well now in order to find what your project name is you could either go to firebase.com or alternatively just ask it within your terminal let's do that firebeast project semicolon list enter and sometimes you get little errors like this and sometimes it can help you so it says basically I forgot to add the S let's try again with this command Firebase projects list you can add that to your cheat she if you want to you can find out what the project ID is that you can reference so now that I know my project ID is web Cafe Landing what I

[47:34] can do to ensure that there's no issues with the emulator no issues when I'm pushing to it in the staging environment or production environment I guess in this context we just do Firebase use web Cafe Landing but Corbin it said it was already using it trust me best practices this is what's going to help you a lot also another thing I want to note is that when I logged into Firebase it asked me to like install an update for Firebase if you're only like one or two versions off it's not that big of a deal it only gets into a big deal for really large updates so don't worry about that kind of stuff you don't have to be fully up to date with the dependencies you use

[48:06] now in the previous video we did a ton of stuff but we never pushed it to the cloud or GitHub so let's go to do that right now this is always a good practice that if you really mess up like you delete a file and you don't know what the heck happened you can roll back to a previous commit we're going to do get ad that get commit DM quotes and then let's name it we're going to say fire base and get connected we're naming it so that if we really mess up on our new version here we can roll back to this and we're good to go we're good to go again get

[48:38] push origin and then the branch name main boom this all should go away all one away and then this new read me is going to change to the most recent Branch we just pushed here which is Firebase and get connected you can actually see what's changed within that Firebase push or get push and basically make sure everything looks good there but now we can roll back to that if you run into issues it's kind of like you're playing a video game and you started at level two you get to level four and you're like wait I missed like an Easter egg in level two so you go all the way back to level two to make sure you get that right does that kind of make sense okay let's go now that we got all that out of the way best practices let's do

[49:10] number one here in our terminal we're going to do touch. EnV enter when we do touch. EnV this is going to create a very specific type of file what does this file represent Corbin this represent any highrisk variable Keys API Keys anything security you put but in here and then you reference it in the project from this file so the next step we have to do here is we have to ensure that this specific file doesn't push to GitHub but to be honest with you to make this even more clear Let's do an example together of the type of information we'll put in this EnV I'm going to go

[49:40] and cover this just cuz you know these are high risk but when we set this up in lesson two we don't actually want to reference the specific API key o domain project ID storage bucket all this within the actual firebase.com we're going to do this we do a hashtag here to name it this is like commenting out code this is basically stuff that's not read but it's purely for your use case of like understanding what this is I'm just going to capitalize Firebase why are we doing this because of the fact that when we add future things to this EnV this just helps with organization so for example another one

[50:12] I could add is web Hooks and then we'll basically utilize this in the future as you see here what are we going to put here basically the relevant your API key your off domain your project ID everything that you saw within that fireb base.js I want you to copy it and paste it over here now once we pasted all that information in the EMV this is how we reference it in Firebase .js let's identify a couple things here first react app API key that naming is exactly how it's named here so when we reference it here we're doing process.

[50:44] env. reacta API key this is the variable that we set here and the reason we set it like this is for security reasons this.v is local to us when we build with it it is encrypted this is high security then we just follow that same logic across this file boom done one is out of the way we've successfully set up aemv which will reference in future workflows to securitize high-risk variables high-risk variables not to beat a dead horse here it's just variables you wouldn't want the general internet to

[51:14] know this could be a stripe key this could be your open AI API key to access AI like very high security variables here on top of that when you deal with backend functions you'll have a EnV like this but also you'll use a cloud form of security such as Keys within Google Cloud this will make more sense and that kind of stuff I just described there is going to be more relevant for my AI software tutorials that will come out later this year but for now number one number one is done which leads us to number two if this EMV is highrisk we can't have this in the cloud either

[51:46] unless you do the measures that I described earlier we don't want this in our GitHub so we're going to use a file within our vs code called Dog ignore what this file does is it just ignores these files and doesn't push them to the cloud so when I make an update from the main branch let's say I make an update to app.js those changes go to GitHub or GitHub but if I had app.js here those changes would not go to GitHub knowing this the way we approach it is we simply just add EnV here as well I'm going come right here and type in

[52:17] EnV that simple I want you to notice the change here it's green right now which means it hasn't been pushed to our GitHub it's like yo I'm supposed to be in the cloud bro put me in the cloud but when I add it here thatv that green goes away just like some of y'all when you invested in nfts in 2021 that green went away all right I faced it too okay we were all on the same boat during 2021 don't worry about it we all made some money lost some money we'll leave it in 2021 but there we go now your next

[52:49] question might be Corbin why is there loc. development local. test loc. production local and all this when we set up logic when building out a website and especially when building out software there's like three major stages here I don't want to get too deep into this this might have to be a whole lesson in itself but this is a quick overview let me just try to describe it to you as best as possible I don't want to get stuck here but let me explain this as fast as possible so we got our main branch this is the code let me shrink down you know like in Super Mario when I hit a mushroom or hit a shell I

[53:20] go we got our main branch and this is going to get into more logic about setting up different branches and committing but for right now all we need to understand is why is there a AMV why is there a do let's call it a staging environment and why is there a production environment got mean and we got our three emvs this will probably make this is probably going to make a lot make a lot of sense we're EMV and then we'll do QA staging could be called QA and prod thatv is your local environment your local environment is what you saw in lesson two with the Firebase emulator on your laptop this

[53:51] doesn't connect to the internet if you break something very severely it doesn't really matter cuz you just can close the program no one has access to it because it's on a local host 3000 the variables that are associated with this like they're all connected to this local environment coming over tv. q.v. staging what's the difference between stage and QA just a different way to pronounce the same thing potato Bato what this environment is is it's exactly like your production environment but it uses its own variables this is what developers use when they push out

[54:21] an update to confirm it works in a live website if it's confirmed that everything works perfectly and no breaks incur then it's pushed to prod which kind of makes obvious what prod is then right en.pr is like the live website what people on Google see as the website like this is like anyone in the world goes to this website that's your prod that's why like when you push to prod it's a big deal you don't want to work in prod you want to make sure anything you push to prod works perfectly Therefore your variables in your Dov

[54:51] between local and staging are going to be basically the exact same to an extent when it comes to open AI Keys when it comes to Firebase hosting when it comes to all those kind of variables they will be the same between these two this is due to the fact that because the local and the staging is off for testing and development the only differentiation you're going to see between aemv and a.qa is going to be like the underlying URLs that are referenced in a local environment we're going to be using that Local Host URL in the staging and QA

[55:22] environment we're going to be using like a live website URL to do the functions and to every everything necessary for that process now the EMV and QA are going to be completely different than the prod the prod is going to have its own unique IDs own unique variables everything's going to be unique to prod because it's production it's we're live let's get going someone hit record if you have any questions on that ask Chad gbt that chat that I specialized in that Google doc SL in the description Down Below on top of that leave a comment down below let me know if that was confusing that might have been a lot of information at once I try to explain as

[55:53] best as possible I could go a lot deeper than that to explain it even better but some of y'all that already know what emvs are like Corbin come on then the ones that don't even have an idea what EMV EMV is like Corbin come on okay one out of the way two out of the way let's hit three purpose of number three here is building out the homepage itself this is going to lead into structuring of how we do our folders here how everything communicates stuff like that best practices here is let's begin we're going to hit right click here we going to say new folder the First new folder

[56:24] we're going to add here is going to be called assets where we going to add an asset this is just going to be images and Gifts new folder again gifts therefore if we ever need to add images we'll add them in the images folder gifts We'll add them in the gifts folder and then the assets is just like the parent folder to make this all more organized now let's go ahead and create the folder that's going to store our homepage and do new folder here and I'm just going to say views there we go with views this is

[56:54] where we're going to go ahead and store our homepage. JS and homepage. CSS now there is a way I could approach this where we could basically make a bunch of different components what is a component think of a component like uh if I were to come here the component could one component could be like this top bar another component could be the actual page itself don't worry about that right now for now we're just going to do hom page.js and homepage. CSS as I referenced earlier check out that Google doc the code that I'm going to show you in this video is going to be available there we going to say new file homepage. Js new file home H page. CSS now this

[57:29] specific lesson I'm going to provide the code walk you through it a little bit explain it a little bit but this isn't going to be the lesson where I show you like the new way of coding the new way of using Chad gbt to code out an entire page that's probably going to come next or maybe the lesson after that purpose of this specific lesson is for you to understand how to connect this to this render it on a website understand what how to read the code basically like I got to give you a little bit of context of how read the code before I show you how to code with AI therefore let's

[57:59] begin I went ahead and pasted this over you can paste this over from the Google Doc as well I'm going to walk you through step by step here what everything means now the beauty when coding with AI in this new method is that you don't have to deal with typing all this this stuff can be outputed fast using lame IND dictation let's go and explain this real quick though first Imports what are Imports Corbin Imports are things we'll use in this file this is a react based app therefore we're going to import react and a use State I put this logic here just to show you the difference in how a file is structured

[58:29] next thing import homepage. CSS if you don't know what CSS is this is what makes things look pretty for example in this file when they chose to put the JS here in the homepage like the coloring of the actual text itself was made through CSS therefore when structuring files you'll have their Imports here what are other examples of imports we will be importing stuff from Firebase for example we may be importing things such as a database a function in this specific series we don't have to worry too much here cuz we're going to do mostly hosting now coming back over to

[58:59] Hom page.js you're always going to wrap your quote unquote component Within These Little brackets here and you'll name it this naming is important because we'll also export it therefore when we export it you know like taking it somewhere else we will be able to export it to our app.js why are we exporting this to app.js because this is what's rendered on our website using index.js notice how it's imported here and notice how it's app therefore let me go ahead and add the CSS let's launch the emulator this

[59:29] will become more clear now to launch it in the emulator all we need to do is type in npm start remember that is on the cheat sheet here this is not pushing to the actual hosting URL this is for local use let's go and copy it simply Press npm Start and hit enter here we go notice how it says Local Host up there well this looks different Corbin that's because we using this code over here now just to show you what this code does for now and the purpose of this video is purely just to teach you good practices when it comes to imp reporting files and understanding a JS and a CSS file all it does is just change color is this going

**[01:00:00]** to be the final landing page no but I want to show you functionality here now real quick things first thing notice how if I delete this command save goes away there perfect live editing live results if there's an error it will tell you like this and you'll see it over here cool command Z boom furthermore we have created a CSS for this as well we've created a JS for this and we've imported it let me explain why also side note this will all be available in the Google Docs so you can paste over as well first major thing I want you to identify is **[01:00:32]** that we've imported the homepage. CSS this is where we are referencing these specific classes when you're naming a class you don't want to use redundant class names for example if I'm creating a different button for a different use case and it looks different we want to do button button You' add some type of hyphen here to identify even further for me I just add a cafe therefore when we reference this class we can build it in the CSS that's been imported here so notice Cafe homepage command f is the **[01:01:02]** class right here for Cafe homepage actually it isn't it looks like there was a little mess up here with the four boom there we go and notice how it changed it as well so Cafe homepage Cafe homepage next major thing to identify here notice that we have H1 which is header one and P we can actually change the underlying way it looks using Cafe homepage H1 and Cafe homepage P think of it like Cafe homepage is the parent and then the little things in it is H1 and P now alternatively we could actually give a CSS class to each of these as well and **[01:01:34]** edit them that way what I encourage you to do is kind of set up the page that you see here I mean you don't have to do welcome to web Cafe AI but set up the situation you see here play around a little bit so for example what does margin bottom do so we know it's H1 which is this what does margin bottom do add five oh okay so it moves it up and down good to know what does font size do .2 okay so it shrinks it so play around with a little bit but as I said when coding with AI you don't have to worry too much about this for example if I'm coding with AI and I'm like this looks **[01:02:05]** cool but I need more spacing between the header one and the P I don't have to know that margin bottom does this I can just ask AI to do it for me and then it will give me the correct code which we'll get into in later lessons I'm just trying to show you what it means right now so now that we understand that I want you to Now understand what return means return is what we're going to visually see here think of this like HTML code HTML is the structuring of the website and CSS is the beautifying of the website making it look pretty if you just have a purely HTML site you will **[01:02:35]** know if you search the internet in like 1999 you're going to see some HTML sites so return is going to be how it's represented on the front end CSS is going to be how it looks on the front end what is this Corbin this right here is going to be functions that we use in the front end now I set up like a really dummy one right now just to show you the difference between return and the code before that and all it does is change the color from red to blue we'll get into more of what this means and how to do this I just wanted to show you this example here notice how when we're referencing it in the HTML **[01:03:07]** return here we're referencing toggle color toggle color togger color toggle color say that four times fast we're doing other things such as setting up Bowlings here which will make more sense Bowlings are true or false I don't want you to get too confused here don't worry a lot of this will be done with AI I just want to give you some structuring so now that we know the JM we CSS and that represents this how did we even render this the way we rendered this is that we used our app.js this is where we're going to put in all of our Pages we are going to use the import again this is how we import components we're **[01:03:39]** going to import the homepage why is it called homepage because the export default is homepage and then we're going to say where it's from notice how it's slash okay it's in views we know that oh and then it's named homepage okay boom that's kind of have the connection there so to slash like when you get further and further in I'll zoom in y'all my bad finally in order to actually show it we going to Simply put in this kind of structuring here notice if I delete this hit save it goes away command Z save it **[01:04:10]** comes back this is going to be the structuring now within a component itself we can make more components don't worry it's not that confusing so the idea here with the this this is this is good front end structuring the way we're going to create this homepage is in theory I could go out of my way to basically make the entire homepage like the footer the different sections all within the same file this is 100% possible this is 100% doable but for the purpose of this series I'm going to show you how to create a homepage as the **[01:04:41]** parent component and then within the parent component we're going to create child components the child components are actually going to be what structured the homepage itself what's an example of a child component the footer of our website the newsletter CTA of her website so our hom page.js is going to be our our parent if that doesn't make that much sense ask the chat gbt chat but don't worry in later lessons we'll learn more about that we did step four now we're on to step five which is going to be our SEO I'm going to explain a little bit more about this future lessons we're going to do a bunch more when it comes to just coding with AI and **[01:05:12]** start building out this web page but I think for now you're getting a better grasp on how all this works when it comes to importing exporting and really creating a visual element therefore let's set up our fave icon our logo and the way it shows up in search as you'll notice right now it shows up in that little tab right there as react app and then gives me the react icon I don't want that so in order to change that we're going to come over here to public and before we do that let's go ah and push our commit here and just call it like homepage made all right let's do get ad get Commit This is always a good practice when you make like a a decent **[01:05:43]** amount of change commit homepage made is this going to be the final homepage no I just wanted to show y'all how to do it get push origin main enter we're going to go we we have successfully committed to our Branch if we check our Branch right now if I reload and I come over to Source you will notice that in views we have homepage. Js and all of its relevant code pretty nice in public let's go ahead and set up our fave icon. Ico to set up our logo which is going to **[01:06:13]** be used in alternative ways of showing the fave icon and then finally the way it shows up on the Internet or shortterm at least how it shows up in our emulator therefore I'm going to come to my current set right now zoom in a ton and just save the image to my desktop now go ahead and find an image software that we can go ahead and create our fave icon together this could be done in C as well we're going to hit new file here typically what I like doing is just starting with like a baseline of a th by thousand hit create now with this we're going to zoom in I'm just going to Simply add my icon best practices for fave icons and in general **[01:06:43]** is typically just whatever the logo is that represents your company and you know how you want it to show on Google and being and Yahoo so for me I'm just going to go ahead and hit enter here looks pretty good and sometimes I want I like to go a little bit more to the right so move this to the right a little bit and that's good enough for me so I'm going to go and save this now that we saved it to the cloud SL your desktop let's go and Export it we're going to come up here to file export save as quick export as PNG now whatever software you're using same deal export as a PNG I'm going to put this in my desktop and hit save now that we have it saved let's go ahead and do three things **[01:07:15]** first thing is we're going to have to create two versions of this one that is 192x 192 and another one that's 512 x 512 in pixels and then finally we're going to have to create a Ico version of this which is going to going to be 64x 64 let's go ahead and do that I'm going to go ahead and double click this and actually let's make three different version this comm c command V command V for Best Practices let's go ahead and name them I'm going to go ahead and call this one 192 and we'll call this one 512 I'm going double click this now within preview on Macos all we need to do is come over to Tool adjust size if you are **[01:07:47]** currently operating windows and you know how to do this on Windows let people know in the comments I'm going to go pixels and going do 192 by 192 hit okay command save same thing for 512 tools adjust size 512 hit enter command save now that we got all that let's do one last one and we are just going to rename this to fave icon fave icon now before we convert it let's go Ahad and adjust the size down to 64x 64 yes this is going to look blurry but when it's super small you can't really tell the difference command save go to Google and just type in PNG **[01:08:19]** to Ico I'm going to choose the first option here and then we're going to select file with the selected file here we're just going to hit convert and download here we go let's go ahead and take the files we just created together and push them over here so I'm going to go ahead and make my VSS code a little bit smaller here we're going to grab our file drag it into the public folder Oh wrong one now I got the right one so we're going to drag our file come over here we're hit replace to make our life's easier so that we don't have to retype in this specifics in the code we're just going to rename this to all the way down to logo 192 delete and then we'll do that for 512 as well this is **[01:08:49]** just going to make it so that when you drag it over it'll just ask to replace both and boom replace replace there we go we have our fave icon now branded and we have our logo 192 and 512 that's use Elsewhere on the internet branded as well first thing you'll notice is that if you look all the way up to react app it's a fave icon good start here let's go and update our index.html so it stop says stop saying react app is this a react app I guess technically it is but don't worry about that now this is the default way of structuring your index.html I'm going to use a new way **[01:09:20]** this will be in the Google Doc I just like the structuring better on this it's a little bit more clear I don't like it when there's like random indentations but here we go what you'll notice is that now the description is webcafe ai ai driven web applications I'll change this in the future this is how it's going to show up when you know on Google when you search something up like apple and it has a little description under it that's what that is and then the title is just the way that the tab incurs so if you look up here it says webcafe ai webcafe ai now for me I'm just going to real quickly add what shows up on Google anyways and paste off my previous website so I'm going copy this paste it **[01:09:52]** over here for now just copy this first line here and paste it right here pretty good pretty good with all this we have successfully created a better SEO oriented site now I'm going to also show you in future tutorials how to create the social link so for example if someone were to copy your link or custom link send it in a iMessage WhatsApp or slack Channel it actually shows you like a little preview image and this looks good therefore let's go ahead and save this push this to get and then push it deploy it to our hosting URL we're going to do get add get commit DM fave icon **[01:10:27]** set up quotation mark get push origin made now what I like to do before I push and deploy to the hosting URL is typically just say Firebase you use and then the project name again to reconfirm it so we going to do Firebase use web Cafe landing and this should give me a confirmation that we are currently going to be using that project Now using web Cafe Landing coming back over to a Chichi here and my head is in the way if remember to push it to our hosting URL or live link **[01:10:58]** that's on the internet we do npm run build and then we do Firebase deploy npm run build build your front end Firebase deploy build your backend all we have initialized right now is hosting so this is just going to give us the hosting URL this should be pretty fast hit command V hit enter there we go if I go to the link presented here command C and boom zoom in there right now zoom in as you see this is our live Firebase URL with our new fave icon with our new fave title or SEO title on top of that this has the hom page.js that we showed today **[01:11:29]** this is a live URL this is good to go which means in the next lessons to come you're going to finally see how I code with artificial intelligence to make the process of building out a website extremely fast that successfully completes lesson three we've done security UI and done some 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 where 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 **[01:12:00]** 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 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 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 **[01:12:30]** 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 subscribing to a newsletter but through that lesson 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 you've watched lesson one to lesson three and what I can guarantee from here on out is now you're going to **[01:13:02]** 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 no 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 cod in 10 minutes here is your Landing p no no like this entire playlist is probably going to be around **[01:13:32]** 8 hours long but that's good because if you actually want to do this and actually 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 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 **[01:14:02]** 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 show 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 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 **[01:14:32]** 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 is very simple as a Mac User just hit command Shift 4 this is going to allow 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 we would go ahead and **[01:15:02]** drag over this 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 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 USA 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 **[01:15:34]** 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 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 does 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 **[01:16:05]** 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 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 as a back end we set **[01:16:36]** this up in lesson two let's begin refresh the chat anytime you get into a chat with chat gbt 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 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 the chat sometimes you go to 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 **[01:17:07]** and 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 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 image 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 **[01:17:37]** 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 the difference is jpeg is like you have to there is no transparency with a PNG you can create transparency but it's a little bit more higher in the memory usage category for now though we don't have to mind too much we're already creating ay 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 **[01:18:08]** 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 on adding any gifts I'm going to go and delete this folder to find set file we 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 be 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 **[01:18:39]** directory path for Source 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 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 and **[01:19:11]** 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 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 go 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 **[01:19:43]** 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 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 **[01:20:14]** identify that as well so for me we're going to say use the image as reference 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 smart enough 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 **[01:20:44]** 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 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. JS file and that header CSS file coming over to our project here and I'll move over here in **[01:21:14]** 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 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 **[01:21:47]** 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 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 **[01:22:17]** 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 you 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 and they 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 I'm going to type in pretty or P RT t e r i e r you install **[01:22:49]** 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 recognizes the two file PA 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 cuz we need to import it it's a child component **[01:23:20]** to do so we're going to Simply make sure we import our header. JS into our home.js and this will make more sense when we do it first off let's just go and copy and paste the CSS real quick as well copied well actually before we do that never mind I like the CSS naming I was going 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 **[01:23:51]** 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 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 **[01:24:22]** 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 going to allow us to if there's an issue with a certain part of our website 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 **[01:24:53]** and that's good that's all 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 we're not going to render the homepage in the homepage we're going 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 **[01:25:23]** just because of how 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 we'll have multiple components like this each with their 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 **[01:25:55]** original image this is the original image right here we 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 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 **[01:26:26]** 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 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 **[01:26:58]** 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 aligned Center I don't like that I'm going delete that I don't want to set up some Global Clause like that typically with a parent class like this it's purely for the actual layout layout itself so for example we got padding here why you think of padding like like a car cushion like a you know you ever been like a on a futon that's just like not comfortable **[01:27:28]** 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 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 **[01:27:59]** 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 Chad gbt 40 and the reason I'm doing this in theory I could continue this chat but I want to show 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 **[01:28:29]** our front end here is the code semicolon shift enter enter go to the first page you're going on command a command c contrl a control C paste the first line of code let's go to our CSS command a command C command V 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 **[01:29:00]** 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 what we call Double Double and double I'm going to upload it is this mandatory for every single time you code on the front end no just showing you good practice here this is what we say this is our current UI **[01:29:32]** 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. jss copy code come over to header. jss command a command V paste updated. CSS copy code header. CSS paste command save and it's like 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 **[01:30:03]** throughout this entire playlist as you get better at doing everything I just showed you there you will over time 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 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 **[01:30:36]** keep going with your workflow but now you've identified wait so basically text align 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 everything you want to do like this and you don't have to understand any of that right now there simple stuff you can just understand right off the bat for example the VPN that just works no **[01:31:06]** 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 in its 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 an exclusive offer where you can get it for 3 months for me it's a holding company asss investor and webcafe AI what I'm going to do here is simply screenshot this once I've **[01:31:36]** 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 to use chbt can actually read that for me so that soles 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 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 **[01:32:06]** 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 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 **[01:32:37]** 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 words that are said in the image also notice how the second word on each line **[01:33:10]** 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 to actual C CSS class like this associated with the text please output the entire new j6 and CSS file that last 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 **[01:33:40]** 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 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 **[01:34:11]** 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 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 **[01:34:41]** 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 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 err I can delete again and then I **[01:35:14]** 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 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 **[01:35:45]** 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 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 **[01:36:16]** 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 horrible didn't do at all what I wanted but that's fine all you need to do is this command **[01:36:47]** 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 G come up here to New chat and input the same amount of code we'll be working on this today CSS JS ready to help this should give me 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 re approach how I'm going to structure this **[01:37:18]** 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 you got to start smaller okay for this let's make it a div and only 80% wi enter that's why when you do this kind of style make sure to push and commit branches or updates to your code to the cloud like I showed you in earlier lessons and on top 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 pushed so you **[01:37:49]** can roll back to them or alternatively just command Z and undo like one little change it just did copy 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 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 **[01:38:20]** Output an entire file for one example of this is the actual back 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 because 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 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 **[01:38:51]** 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 code 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 I'm just showing you good rule of thumb and I say be smaller and also can we add a shadow **[01:39:22]** 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 paste code notice the new class name copy code paste code first thing that I'm recognizing is that okay the shadow **[01:39:53]** wasn't probably a good idea so we'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 border 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 important for you to remember notice how it says H2 here sometimes it defaults to the this and it causes issues and the **[01:40:25]** 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 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 to say just for **[01:40:55]** this line output 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 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 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 **[01:41:27]** we go had the curly brackets didn't even need know how to do it automate everything it forgot the period so let's add the period and we're good to go 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 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 **[01:41:58]** 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 scratch you never coded before all the relevant dependencies that are needed in this context for now though all I need to put in it's going to 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 **[01:42:30]** 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 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 **[01:43:01]** 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 the top fold in this context is what you see initially when you load into a website page so for cursor AI we see this Navar we see like this little section right here for download watch demo 1 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 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 renamed the CSS here renamed the file here and the **[01:43:31]** export here as long as the files 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 air is found Source views homepage. JS Source views homepage. JS coming over to Hom page.js it then says can't resolve header. JS in and then it you know gives the directory again so what can it resolve it can't resolve header. JS what is header. JS coming up here you'll notice is that this is what it's referencing the header **[01:44:02]** 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 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 top full looks like why cuz I think it looks sexy this **[01:44:34]** 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 step by step of why I did what I did how I 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 **[01:45:05]** new branch and what branches are is different versions of the code this will make more sense let me to 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 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 full. JS and CSS let's proceed to do this and I suggest you add this to your cheat sheet in at 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 **[01:45:39]** 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 top fold. JS going to say tap fold renaming and then we'll add a quotation mark here hit enter we're going toit get push origin and then we're going to say the branch name so in this context it's main get push origin 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 **[01:46:10]** 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 it's going to set you apart is going to make it so that you can actually structure scalable applications here we need to make a branch so we're going to do get check out dasb 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 contrl 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 **[01:46:42]** to show you real quick that what that looks like on this end here it's not going to show yet cuz 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 over to here and you notice how it's an Asis now it's different so we can go ahead and say same commands here I can hit up on my arrow keys 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 **[01:47:13]** 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 up we can do get Branch get checkout checkout it's how you move between branches get check out main so now that I'm in get checkout 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 go do get Branch Dash D capital D and then the branch **[01:47:45]** name hit that and this no longer exists locally on your machine so hit G Branch again only main so earlier that deleted needed 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 faster 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 **[01:48:16]** commit a new Branch if you're still not clear on what branches are check out those earlier tutorials where I gave you C gbt chats to help you out on that specific terminology also the more you do the more you learn with all that though let's create a new Branch 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 and we're going to say top fold new messed up there get checkout B try again get checkout B then we'll do top fold new and enter and we are in our new Branch okay we're going to do **[01:48:47]** everything we need to do in top full new in addition by the end of this video you'll 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 a 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 anytime 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 **[01:49:18]** what we saw Chris AI in her own code just for context this is is a good amount of chat as you'll see in this little sidebar here there's a lot of chat going back and forth of 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 **[01:49:50]** you're creating make sure to have that enabled one once you have that enabled this 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 **[01:50:20]** very small JS file and then we had basically nothing for the CSS and then 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 CH gbt 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 rant I'm talking about like you're giving out code I didn't ask for **[01:50:51]** so now that it knows the structuring it knows knows my code it'll then ask basically okay yeah cool what do you want it to look like so in this context I literally screenshotted cursor AI 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 **[01:51:21]** that you may not be able to notice recognize if you're pretty new to coding is notice how it's giving very general 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 **[01:51:51]** this context or what we call the parent component is the one that's going to be the overarching global like how does 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 the **[01:52:22]** underlying web page so if I come over to the CSS here this is like big structuring notice how it's like Max 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 withd 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 the fact that that is what **[01:52:52]** 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 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 **[01:53:22]** to Proctor chat gbt from that point and as good measure here so that in future outputs at least within this chat I don't repeatedly get a general CSS like we saw with body and the asteris I simply will put don't need paste that 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 **[01:53:54]** 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 these type of inputs on chat 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 spefic elements to Output but what happened was the code **[01:54:25]** 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 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 the 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 oh okay okay whatever I just **[01:54:57]** outputed previously was no good I'm going 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 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 no notice is that you can actually get pretty intuitive with your images here so one issue I was having is the ability **[01:55:27]** 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 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 **[01:55:58]** 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 jbt make sure to 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 drawn images to get the outputs you're looking for which leaves us to where we are right here now bad so far right this is actually pretty good considering this only took me around 20 minutes to do and we are getting going **[01:56:28]** 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 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 weak 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 **[01:56:59]** have a video element within your website on top of that I plan on changing this nav bar a little bit but you can see the potential here we're getting pretty far here and before I dive into that and start jumping into that one 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 **[01:57:30]** 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 referen that this entire element we've been working on it's toot fold is imported into this class 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 width smaller and Center all the elements and it provided me the correct code here now **[01:58:02]** 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 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 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 **[01:58:33]** copy here so right off 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 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 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 **[01:59:06]** selected you can use any of these in your software or website for free simply click one and proceed everything is 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 **[01:59:37]** 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 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 nav bar 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 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 **[02:00:11]** simply asked CH gbt to get rid of it now Theory I could just remove it myself in the code but if you're not very 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 updated 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 **[02:00:41]** 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 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 **[02:01:12]** very general type of CSS directions such as display Flex Flex Direction column column everything about the board there in addition to help 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 a 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 **[02:01:42]** either so I simply just said make it shorter and make it sound more like what we solve cursor shorter and sound more like and then the cursor example if you don't 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 **[02:02:14]** when you use this website couple things on Hover we have a nice little hover effect we'll make the buttons slightly larger add a little opacity as well so notice how it gets a little bit more bold in your face when you hover over did that when a 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 **[02:02:45]** that I grabbed from YouTube this in theory could have been a video that I stored in my fire store or alternatively theore storage within firebeast but for now I'm just going to use the YouTube video as this is pretty simple to implement and then what you'll notice is that if 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 **[02:03:17]** 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 the top fold to the website today I provided the entire JS 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 in 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 **[02:03:48]** two buttons right here notice how I simply just pasted the buttons over and then I provided the relevant CSS so as 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 **[02:04:20]** CSS class name and adding hover so coming over here you'll notice that we have the original CSS class name and 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 to keep this at 1.02 **[02:04:50]** 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 logic that we added which is Major is 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 riffer 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 and this code twice here right so **[02:05:22]** we can just reference the actual function itself for either one of these URLs in order to get that within Chad gbt it's pretty simple what I typically 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 past 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 **[02:05:54]** 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 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 pay over you're going to get a ton of Errors like Corin you messed them up what happened that's just because it went **[02:06:25]** ahead and you over copied 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 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 play 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 the active **[02:06:57]** investment button this is the one that shows a little play icon this is this button what I did was I simply obviously hovered over it found out where the button closes 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 provided a 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 have a new folder here it's going to be **[02:07:27]** called components think of components is like little parts of your website now not necessarily like a whole section like a footer but more of like you gotone to a website and sometimes you get that little pop-up 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 component that will import from here to here so we can do some logic in **[02:07:58]** 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 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 pasted 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 does not say con top fold that tells me this is a whole new Js file with this though I simply went over here right clicked on **[02:08:28]** 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 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 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 **[02:08:59]** 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 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 component 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 **[02:09:31]** fold. CSS it's one period That's because of the fact that they are both found within the same folder they're just 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 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 **[02:10:02]** 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 it right there so this has a little bit of bullying 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 this 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 **[02:10:33]** 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 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 rece it'll give me the code so that's the 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 my active **[02:11:04]** investment is is going to be a video that plays right there therefore let's going to push this commit let's make a PR request and understand the logic that's entailed with that so 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 **[02:11:35]** to do this enter boom cleared up good to go comeing over to our GitHub here we pushed this Branch to the cloud so I'm going do compare and pull request you can add another Title Here for reference so I'll just say completed top fold for future reference you can say say create pull request so now we have an active pull request in current gear 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 **[02:12:05]** happened so I was going notice here I come down here we added a PNG of these two different files here we added a new component folder that's why there's a little plus sign here all this code I go to top fold I notice 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 changed 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 **[02:12:35]** successfully merged this domain 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 merge so what this means is that we still currently have 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 in 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 **[02:13:06]** pull origin main with this in your cheat sheet this is going to find the most recent upto-date codee that we have in the cloud and it has updated right because we merged the previous Branch 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 **[02:13:36]** 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 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 to leave a like if you found value in today's video it's completely free welcome back y'all this is lesson six of the series I've been doing for the past couple months here showing you how to build out an entire website and actually build out a website using artificial intelligence and coding it **[02:14:07]** out now that we got that out of the way and everyone that's watching has watched the previous Five Lessons so don't leave that comment saying I didn't teach you just watch the other lessons let's check out lesson six here where I'm going to build out a banner and I'm going to show you how to build out a component that's going to be image oriented eg a gallery if you don't know what a ERS that's going to be this little green thing right here this is typically used in the context of giving announcements you could also link articles with this or just link anything with it so in this video I plan on creating a banner here and then the gallery part is going to take the section that's currently live on my website and I'm going to make it into a better looking section of all the **[02:14:37]** Investments That web Cafe AI is involved in sound good two last things I'll mention real quick fire off if you're using either cursor AI or replit what you're about to see in today's video can still be applied in this context you're going to learn how to prompt correctly in the context of coding and using artificial intelligence number two this entire series is very lengthy and the last episode is going to Encompass three major parts that aren't going to be included on YouTube it's going to be included on my school Community the three major things are going to be a newsletter type of CTA you're going to learn how to deal with web hooks the second major thing is going to be a contact page and then the third major **[02:15:08]** thing is going to be the ability to create custom domains within this website regardless if you don't want to look at my school Community you're like I don't care Corbin that's fine you'll get 80 to 90% of what you need to know about creating websites from my YouTube playlist here sound good let's jump in coming over to my project here let's start here I'm going to open up a terminal window with this terminal window here let's go into a direct three we're going to come over to our cheat sheet here Corbin I don't I don't have a cheat sheet what's a cheat sheet just skip some lessons all right I think we did this in like lesson two this is our directory now that we're in a directory **[02:15:39]** you already know what do we do npm start this is going to launch our code found here into a development environment enter we are live local host 3000 is launched here this is where we got on our previous lesson here where we created our top fold our top fold gave us the ability to get external links for example content catalog brings you to the YouTube channel you're currently watching whoever this guy is he seems chill the take this website which I may change this CTA a little bit later on depending on the dictation for now though takes you to the current playlist you're watching as basically **[02:16:10]** I'm showing you how to build out this website from start to finish in this playlist and lastly what we completed in the previous lesson was our ability to create a nice little UI element where we can see the active investment or in this context basically play a video from YouTube in a cool way click this and where're you going hello this hello now as Mo to the next part here where I'm going to create a banner at the very top here and then on top of that I'm going to create another section here which is going to be based off the current Investments web Cafe AI is involved in let's get going here so we're going to have GitHub opened we're going to have Chad gbt open we're going **[02:16:41]** to have everything open ready to go here we're going to create a new Branch for the purpose of today's video this branch is going to be banner and investment section if you remember the previous video you already got this in your cheat sheet is in your cheat sheet have you added it yet we're going to do get Branch this is going to tell us that we are currently in Main and as a side note when I ran npm start I leave that terminal window open just in the side right so we create a new terminal window when we want to do like different types of commands outside of just running the Local Host 3000 so we're currently in main branch and from what you know from previous lessons we don't want to touch **[02:17:12]** Main Branch if you want to make changes don't touch it this is your stable Branch therefore we're going to create a new branch and the purpose of this branch is going to be the banner and we'll say invest Banner invest enter I messed up again it's not get Branch I keep I keep doing this command it's get checkout DB now we'll do it again Banner invest enter there we go we created a new branch and there we go so we're good to go so here we shall proceed I'm going to go ahead and get some coffee of me I'm going to listen to a Swedish House Mafia mix which one Corbin just type in **[02:17:43]** Swedish House Mafia on Soundcloud and add mix a lot of good ones I'm going to go ahead and code out some files show you the end product when it came to the banner and then show you show you step by step how I achieved it so you can do the same thing sound good I'll see you in like 20 minutes this is what we got so far I know it doesn't look beautiful but I'm going to show you how I got to this point as all that's really left right now for me to do is add a bunch of CSS elements to make this actually look good let me show you the structuring and how I've gotten to this endpoint obviously my next step is to make that user interface look way better but for now let's go and find out how I got to **[02:18:13]** this point here is a new way you can start a chat to give a little bit more context to chat gbt for the structuring of your underlying repository and how you want to associate the files notice how I screenshotted this which can be found right here and the reason I screenshotted it is because of the fact that the component we're creating is the banner which is going to be found in the components folder we're going to go ahead and make sure we import it into our top fold. JS in short so it basically renders above the top fold here as you can see so when I provide the folder structuring here notice what I say we are creating a banner for the **[02:18:44]** top of our landing page current structuring for project let's create a new components folder call it banner. Js banner. CSS so I give the specific file names I want to create then I go one step further here and tell it where to import it which going be the top full. JS now with the response it gave me it definitely gave me too much like for example we don't need to do this in terminal what we can do in theory from here and what I did was I simply just went over here I right clicked in components and just created both files myself created ajs CSS once I created those files made my life simple as I **[02:19:15]** just want structuring right now I simply copi the JS pasted it over there when I say copy I mean like copy like that simply copy the CSS pasted it over there what do you mean by past it over there Corbin I mean I literally went tojs banner. JS paste ban. CSS paste that's it want to render it want to see where where we're even at then it went ahead and showed me where to import it into top four. JS but it was actually incorrect I'll explain why when it comes to pathing but it did show it correctly in the sense of how to render it in the j6 element like this so for example if **[02:19:46]** you went the extra mile here and you went to top four. JS and you imported the same way like it showed we're obviously going to throw an error here right because it's not going to be able to find it the reason it's not going to be able to find it is because right now Banner exists in the components folder we went over this in lesson five and from lesson five you can see right here video module components to command Z this so it shows it in the correct folder here Banner components Banner components two dots because we're going inside of a folder here not one dot two dot if that didn't make that much sense **[02:20:18]** watch the previous lesson I go very much in depth of how to spot these kind of errors and know how to reference files correctly when importing now that we've imported Banner from this section Banner where's this name coming from Corbin banner. JS export default Banner we can go ahead and leverage this and scroll down here and all the relevant code found here we can display with just this one line This is why it's really nice doing parent child relationships like this where this Banner is seen as the child component here that we can **[02:20:49]** literally just do with one line what do you mean Corbin I comment this out comment out when it does that basically like it's not reading the code what happens to the preview there is no Banner now that we have that though we have successfully created a banner or at least the formatting or the structuring of the banner I got to obviously do CSS here because that does not look good there was a couple other things that was wrong with that code output second thing is that it did not do a return for the underlying j6 here so always make sure you have a return for the j6 that's important what do you mean scroll back up here go up the banner notice how **[02:21:20]** there is no return statement let me show you a little bit more structuring here notice how everything when it comes to logic is done outside of the return statement all logic when I say logic we're thinking of stuff that incurs outside of just the rendering of the actual app an example of logic is that when I reference open link in new tab this logic will take a link and open it in a new tab I know it's in the name and then you can reference this kind of logic here make sense let me go ahead and up this CSS make this UI look good **[02:21:52]** and give you my next steps I'll see you there how does it look some of yall right now are like Corbin how do we even get to this point don't worry I'm going to show you step by step how I got to this point let me explain what I changed though first thing is I went ahead and changed the color palette here obviously so less color more of this like Sleek look I really like it furthermore I went ahead and rounded the corners a lot more here and added a shadow effect so it looks like little like blocks which is really cool in addition I went ahead and upgraded the little active investment button so it does a nice little animation now when you hover over it following this the banner currently **[02:22:23]** works perfectly we have our announcement here we are excited to share that webcafe ai's investment bump UPS has secured funding from Google what's cool is that when you click our little Banner here it would actually take you directly to bump ups.com let me go to show you step by step how I got to this point here how to create a nice little Banner here and even go as far as create an external link associated with that Banner sound good let's jump it let's walk this through step by step here first let's identify what I did with the banner first thing you'll notice is that right now the banner has two CSS classes compared to what you just saw it we have the overarching banner CSS class but now **[02:22:54]** we actually have a CSS class associated with the text before this text was wrapped in H1 now this isn't bad but personally what I like to do is typically wrap my text in divs and this allows me to really adjust the underlying CSS that's associated with that text so what you'll notice here is I simply put in this prompt I said okay for this and I literally just pasted the entire file let's gave a CSS Class 2 and then I provided the h one and make it a diff that's it what I found through development is that sometimes if you **[02:23:25]** leave H1 on there and still try to mess with it in CSS elements it doesn't necessarily follow it to a t there's additional issues and typically your H1 element is supposed to be the most relevant thing about your web page for Google to search and crawl due to the fact that this part of the web page is an announcement that's not the most relevant part for Google to crawl when I say crawl that is me saying basically when Google looks at your website and shows it for search results all right so scrolling down here gave me what I wanted announcement as a CSS class copy paste got the relevant CSS as well copy **[02:23:58]** paste so then once I did that I went ahead and provided a current image of what the website looked like and I realized you know what this coloring isn't it it just not working it doesn't look good so for that I said for the banner what coloring would work better for the background now this was me kind of messing around wondering like okay what direction do want to want to go here it gave me some suggestions I didn't like any of them so I kind of took a step back and realized you know what let's find out what we actually want to do here and as aside now I went ahead and also thought the actual thing that was being set in the banner was too long so you know this is good can we **[02:24:29]** make it slightly shorter give me a slightly shorter version of the banner message I like doing little stuff like that as it will just remove superflous words and just give me the words that are relevant to what I'm trying to say or communicate within the copy so moving forward here in the website I think the one thing I liked about my old website was how Sleek it looked it just looked Sleek it was minimalistic the coloring wasn't cra czy so in that context I was like you know what let's try to replicate something similar here therefore number two thing to learn here is that you can reference other sites or other branding when creating your own **[02:24:59]** website now this specific context what I did here was Apple I was like I want a modern look let's make it look like apple so I provided the current linear gradient which was this and asked for Apple looking type of gradient it provided one it wasn't perfect but then that kind of got my brain thinking you know what I'm going to just get it myself I'm going to do it myself so I went ahead and grabbed the colors from Apple and then made the gradient and myself so that got me to this point here where I had the colors from Apple and your next question might be is Corbin how did you get the colors from Apple I'm not sure what it would be on windows so if you know go ahead and leave in the **[02:25:30]** comments down below but on Apple you can go ahead and just install an app called it's called Color Picker and basically what allows me to do is simply go to any website select a specific color I want to get the color of or the hex of for example I could come over here and be like you know what's the color of this text click it and now I got the color you can do the same thing with Windows or Linux whatever it may be that's how you can grab color from relevant websites that you like the coloring of I then basically gave another screenshot basically saying you know obviously we can't read this white text anymore so what is a better matching color gave me **[02:26:01]** some color examples here proceeded therefore a lot of this process especially when it comes to this kind of stuff is that you'll have your development environment like on a you know left side of your screen or maybe a new window and then you'll have the code on the right side of the screen so you can do stuff like this so for example if I come to my top f. CSS here jump over here I could be like you know I'm trying to find the good coloring here when it comes to let's say the the download button so right now the download button is it has this like blackish text right what you do here is you're talking to Chad gbt you're figuring out colors you **[02:26:31]** can even come up here like maybe I want this color Comm in save oh that doesn't look good go back and it's just like a back and forth process until you find a color that you know really matches the brand and The Styling you want that's kind of what I did in the context of changing this whole palette up so now that I showed you the method of getting good palette good coloring for your brand let me show you show you every single element that I've added up to this point when it came to adding more roundness to the elements adding a shadow effect adding the ability to add a hover effect stuff like this now before I show you the CSS elements that does that for us let me just get the **[02:27:02]** non-css thing out of the way which is handle Banner click we already know this makes you so when I click the banner we go to a separate web page called bump bumps make your life easy all you need to do is this okay for this paste the entire j6 paste the entire CSS and simply ask it have it so when I hover the banner it moves two pixels up and when I click it opens a new tab provide the link and it provided everything I needed copy paste copy paste with that I was able to basically create a nav bar that moves up and also opens an external link coming over to **[02:27:33]** the code here we can go and check out what I did so obviously this is very simple here right window open we've done this before in the previous lesson made it so that when this element is hovered over and is clicked we open a new uh link here you already saw how to do in Chad gbt CSS wise we basically asked for this relevant information where when the banner is hovered we transform and we translate y y AIS xaxis up to pixels the transform here the point2 seconds is what adds that smooth effect so it isn't just like an instant clickup like a boom **[02:28:04]** it's like a slight like hover same situation was added to this CSS element here all I did was simply come up to my top fold. CSS I went to that relevant button scrolling down here watch demo button and anytime you're like where is this Associated just do command ftlf come back to your JS file and then you'll find where that relevant button is it's right here so I know this button has to do with the active investment so I come to this CSS what I did was I simply said on Hover we translate up five pixels and we have that nice **[02:28:36]** transformation of 3 seconds so that we have a nice little you know UI element that goes up slightly adds some interactiveness for the user and then finally the last two things are the shadow elements and the round wct round W is very simple here this border radius and you can just for example if I put 200 here watch this it goes super super round and keep that 20 and then the shadow itself is called box Shadow now you might be saying Corbin I I don't want to type that out don't worry it's simple to ask chbt all I did was give the relevant CSS and I say give a shadow **[02:29:06]** here with this color provided the color and it actually did give me the wrong code here notice how it says text Shadow this isn't a text this is a element this is a div element not up this entire thing is a div element how do I know it's a div element because of the fact that this say div so knowing that I knew that this was wrong Tech this is wrong code so I said this is not a text Shadow this is an element Shadow and then it gave me the correct code here a box Shadow simply copied that pasted it over to or tap fold. CSS and got a relevant **[02:29:38]** output you can push this to the limits here if you're like you don't know what you can do when it comes to CSS just ask Chad gbt copy it paste it over and just see what happens you can do animations with this you can do a ton of different stuff when it comes to CSS there's a cool there's a bunch of cool stuff you can do within your website here for now let me show you a good practice when it comes to development and saving progress we are at a pretty good spot here when it comes to this Branch here we've successfully completed the banner portion the next portion here is going to be the investment portion so for now let me show you how to save your spot **[02:30:10]** like you're playing a video game no this is not Minecraft This Is Not Call of Duty but we're going to save you a milestone here and this is how you do it within a branch so right now Banner invest hasn't been pushed to the Cloud yet or GitHub because of fact that we haven't actually pushed anything yet so let's do that to save your spot we're going to get add get commit DM add these to your cheat sheet we've done this before we're going to say Banner done and then we're going to do get push origin and we're going to do the relevant Branch name that we're currently in if you don't know look to the bottom left right now we're in Banner invest enter with that that's **[02:30:41]** going to push this to GitHub you'll notice it's a PR request but why is this important why are we doing this because of the fact that within this Branch let's say I go to the next phase here and I go to the investment section and I mess up really bad like I'm in Banner invest what I can do is I can go to Banner invest here and I can roll back to this commit here so let's say I'm working in my local branch I'm going I'm going I burn three files I just completely mess up I can roll back to this previous Branch here and find where **[02:31:12]** I just saved my last spot so in this context here make sure to use my past Chad gbt chat to show you how to do this make sure to use your current Chad gbt chat that has custom instructions to help you to do this but it very much is simply just copying this and then pasting in the CH gbt chat and saying I want to roll back to this commit let's keep going here I don't know how I'm going to structure this next element here when it comes to Investments I have a slight inkling I'm going to try it out here I'll probably see you in 2030 minutes same deal walk you through step by step what I did make sure you leave a like it's completely free and I'll see you there so I got my elements right here obviously got to do some CSS got to **[02:31:45]** adjust some stuff but what you'll notice is it's pretty much already there and this only took me around 5 to 10 minutes with this nice little hover effect obviously there's more stuff I have to do when it comes to look let me show you how I got this far as this only took me like 5 minutes as You' seen the past tutorials I took an element from another website I liked and I went ahead and did the screenshot method proved the screenshot of the relevant element that I liked in the other website and then I asked CAD gbt this okay we are creating a new section our website called investment gallery. JS investment gallery. CSS here is the place older image for each card and then I use a **[02:32:16]** placeholder image that I have already in my project so it can go ahead and insert that for these relevant images that show there provid it like this and I say make three cards make it look exactly like the attached image first major thing you need to take from this is grab a relevant image that you have from another file that you've already imported and that we've done before like this with this use this as a placeholder so that you can get the code and then provide the real images later on so you know right here placeholder super nice with the first output here though there **[02:32:46]** is some stuff I didn't like so it gave me the j6 gave me the CSS but but notice how the CSS is like super general info card button button no good therefore I went ahead and did two things first thing I did was I went ahead and truncated the size of the class name from investment gallery to just investment G so I said that here let's rename the file to investment G did that for me as a side know I went ahead and just already had these files created within the views because this is a major section within the landing page from there I also asked it to give a suffix to the underlying CSS class names so **[02:33:17]** it's more specific so said okay give me again let's make the CSS more specific by adding invest Dash in front of the Cs classes and what you'll notice is that now we get invest Dash in front of everything this is a good practice as you don't want to have CSS classes overlap between files make your CSS classes specific to what they're doing got the relevant code here came back over here pasted in the JS and the CSS once it was pasted I just followed the logic that we've done in the past which was come through our hom page.js I **[02:33:47]** imported investment G like we imported the top fold and then I put it right under the top fold therefore that's why we see the top fold here and then the investment section here also you'll notice the copies like iPhone 16 Pro obviously I'm going to change that but that's the idea here we're almost getting a done investment section pretty fast here so I'm going to go ahead and finish this up and show you what I did to make this look even better see you there and there we go we went ahead and made these cards relevant to what web Cafe AI is invested in so we have currently three major Investments AI **[02:34:18]** Marketplace bump UPS and school so what we can do here is I'm going to walk you step by step of how I got to this point what you'll notice that each one has a hover effect which is nice in addition I went ahead and specialized one of the major Investments here which is Bump UPS here to a different coloring as you'll see in the code here and everything works so what it does in this context is that if I simply go to AI Marketplace I click it it'll bring me to AI Marketplace bump UPS it'll bring me to bump UPS in school it'll bring me to school now let's walk through step by step of how I did this now first thing I'm going to show you is how to this **[02:34:50]** little cursor effect here where it turns into like a click motion right does it here does it here does it there let me show you how to do that so the relevant element that we were hovering over was invest card and how do I know that come to the JS here it is like the overarching element right here real quickly to change a cursor from default which is this right here little arrow to that little pointer thing you just saw right there it's just cursor semicolon pointer that's it and if I hover over any element that has this line it's going to have that click event when I say click event this is what I'm **[02:35:20]** referencing notice how it has like the little clicker now let's go and walk through step by step of how we got to this point so the first thing that I did was I was going to change the underlying text and copy that shows up for each card here so what you'll notice is that you know we got AI Marketplace description display link actual link the image and then a bullying here we'll go over all of this the first step was basically giving the relevant copy for what's relevant to me I initially tried to do this to Chad gbt but I realized you know what this is so limited that I **[02:35:50]** might as well just put it in manually so for me personally I went in manually and just change the name and added relevant descriptions that I know fit this link and investment the best doing that in order for me to make sure the chat is on the most upto-date codee I went ahead and reset it to do so I said okay take a step back which you're probably familiar with in previous lessons and I said here's a current file and I just pasted the entire current JS file that I like with the relevant changes that I did personally so now we're starting on a good foot once I provided the file with the correct copy when I say copy I'm referring to school AI business it **[02:36:21]** doesn't say iPhone anymore I simply just asked it to just remove some comments SL sles comments as Cod doesn't read it just for your reference I just asked it like this let's have each card click on open a new tab to a website provided the relevant code so for this card AI Marketplace goes to web cafes software.com for this card bump UPS goes to bump ups.com and followed in that manner the code provided worked but what it did though was it took the link and it displayed that for what's shown here for web Cafe software showed the entire link for bump UPS it show the entire link I didn't like that I want the **[02:36:52]** display link to look sleek and clean therefore what I said was this I said do again but let's do a display text link which will be like school.com but clicking the link we'll use the actual destination link let me make this more clear so the display Link in this context would be actually the school would be a better version of this right the display link would be school.com that's what we see right here but when I click the actual link I'm clicking to is like the actual you know land landing page for my school Community you click it it goes there **[02:37:23]** this is purely for UI but this is purely just so it looks better on your web page so what you learned here is that you can show elements on your web page in a cleaner way than alternatively me providing the entire School link here right so instead of me providing the entire School link here I click and it actually just takes me to the landing page that's relevant for this now the next thing I wanted to add here and I kind of reset the chat because you know we're getting some motion here in theory I could have started a new chat but sometimes I just do this current Js current CSS and the reason I'm doing this is because I'm I'm about to make a big CSS element change so I gave the **[02:37:54]** entire I pasted the entire JS file pasted the entire CSS file you'll notice a pattern here and from here I wanted to have it so that we just changed a couple things first off it was referencing the cards as products based off the original you know Apple products change that to Investments easy provide the line done and then finally which is really cool as you'll be able to learn a cool thing about bullings bullings in this context is yes no true false is I wanted to have the ability so as this list grows on webcafe ai.com as we invest in more **[02:38:27]** opportunities there'll be more little cards here right we can build on to this which as a side note what makes this code super clean and super nice is that now we have a new opportunity I don't have to worry command C command V that's it we just created another card and it's like built within the element that's what makes this super cool so I'm G obviously delete that because that'd be two bumps you want two bumps and from here what you'll notice is this bullying the purpose of this bullying is I wanted to kind of enunciate one of the Investments comparative to all of them **[02:38:58]** therefore we added a bullying of is featured and all I simply did was ask this let's add a bullying of is featured and if it's true we do a different CSS element making the card have a different background color and then provided the background color it provided me the entire JS and it provided me the entire CSS and as you know and I might need to make a t-shirt on this copy paste and that brought me to this point where now we have an entired investment section I'll probably add a title here but this kind of concludes up to this point in this video a pretty solid looking landing page so far one last thing though actually one very big last thing **[02:39:29]** here what you'll notice that each one of these has a relevant image element here's what's extremely important about image element especially in the context that each one is going to be different but it's going to be used in the same way so what I mean by that is obviously this is a different image from this one and this is a different image from this one but they're used in the same way in the same CSS element or Jon element of a card or card what's important for you to know is make sure when you upload these files these jpegs they're the exact same size so when you apply CSS like 300 **[02:40:01]** width it looks the same and everything looks like consistent so in this context for each one of these images I made it the size of a YouTube thumbnail went ahead and dragged it into Photoshop you can do canva and just export it the same size this makes it so when you make relevant changes to the underlying image such as width and height it looks consistent which is obviously very important in the context of building out a good-look landing page we're good to go here though we got a good Banner got a good investment section let's go to merges to main because remember this entire time we created a whole separate **[02:40:32]** Branch for the context of this new element we're adding and the reason we're doing this is that if we really mess up we can rever back to main let's do it say get add get commit DM quotation mark investment done quotation mark get push or origin the branch name you can come up here to do get Branch or alternatively find it right here and then push it once it's pushed ASX will go away color will go away come back over to GitHub in GitHub here we're going to get a nice little notification **[02:41:03]** here compare and pull request we're going to compare it we're going to pull it Banner invest let's change this to Banner done don't no no done investment section done so we can reference this later when we do this we're going to then come down to create pull request once you created the pull request since we kind of already know what the situation is we can check with the files change like what happened obviously we added some images we added some files like this is pretty standard stuff if there is a file in here that you're like I don't remember doing that this is where that would come up into play coming back over here though all we got to do is hit merge pull request confirm **[02:41:35]** merge once we confirm merge here we can simply delete the branch as it's not needed anymore so now that we merged this to main we come back to our vs and say get Branch say get checkout main this is how we move between branches and then we are currently in an old version of main right CU we haven't pulled from the cloud yet so what you'll notice is that we don't have the components that we created with the investment section in the banner section and if I even hit command save here you'll notice that we have an old version of the code oh this is old this is very old and it looks different right don't worry though cuz **[02:42:05]** all we have to do is get pull origin mean and this just pulls the code from the cloud hit boom plus minus plus minus it didn't like something let me see what it didn't like oopsie it was trying to pull this let's delete this cuz I had it open and it was freaking out so now once the main branch is clean let's try it again boom there we go now that we've done that hit command save notice all the new files and sometimes you're going to airror like this don't worry let's rerun our npm start here so this doesn't happen npm start and then this is going to rerun the emulator sometimes you got **[02:42:36]** to re-reference the code this doesn't always happen obviously I needed to do it this time and let's check it out sometimes walking through the files again just sending command save control save make sure everything is clean and boom now our main branch reflects this where got it and there we go we have a successful up-to-date main branch based off the branch we created today pretty good make sure to leave a like it's completely fore it helps me out here welcome back to one of the most In-Depth series found on the internet that actually shows you how to use artificial intelligence in the context of coding and I teach you how step by step with a bunch of different resources today's **[02:43:06]** lesson is lesson seven and we're going to be completing the footer of the website we've been working on and on top of that I'm going to make it mobile responsive okay for everyone else that's watched lesson 1 through six I we we've been going a lot here this is a lot this is a lot for now though we're on lesson s last major announcement before we jump into lesson s and I show you how to prompt with AI and code with AI in the context of a footer and making it responsive for your web application is what's happening next so what you'll notice is that lesson 8 and lesson 9 have like a little white line drawn above it why is that first off lesson 8 is going to show you how to build out a **[02:43:37]** newsletter CTA what I mean by that is basically the ability to handle web hooks effectively and securely within your softwareweb application EG but you put your email there and it signs out to any newsletter that you currently have this type of tech and workflow can be applied to anything though this kind of lesson is very powerful this allows you to connect to external apis and leverage it in a secure way so lesson eight newsletter and web hook and lesson N9 which is I'm going to build our real quick contact page for anyone that wants **[02:44:07]** to have a contact page on their website and the ability to have a custom domain EG not Firebase domain but like webcafe a.com domain those lessons are going to be found on the school Community here which is fine you don't have to join like I don't care I don't want to join I don't want to pay you that's fine you don't have to you'll get basically 80% of what you need to know through this entire playlist that you're seeing already through this entire YouTube playlist that you are currently on although that price you see right there is going to raise over time so you can lock in $19 now or just be like I don't need those lessons that's fine you don't **[02:44:37]** need those lessons it's okay I also plan on doing you know half the AI software playlist on this community as well okay you don't care that's fine that's fine let's jump in here so first off let me identify what a footer is and what I mean by mobile responsive first off never done web development the footer is anytime you scroll down to the end of a web page that's it right here so it's like section right here that you see this is the footer basically the bottom half of the website typically found in Footers you're going to find relevant links you're going to find terms and services you're going to find privacy policies you're going to find like social media links stuff of this nature now the second one which is mobile **[02:45:08]** responsive that's an umbrella term that I use in the context of does it look good on tablet does it look good on a smaller laptop screen the easiest way for us to see whether it looks good or not is we can actually leverage Chrome this works on other browsers but from my personal experience in developing web applications in softwares Chrome is amazing because what allows us to do is this we can rightclick the screen in our Chrome browser and simply hit inspect now when we do inspect here obviously it's going to you know put in the elements console is very important in the context of software this is like where you get messages console logs Etc **[02:45:38]** but what we care about in today's video is this little button right here I click this and what this allows us to do is that within Chrome we can see how our web application is going to look depending on the screen size so either we can go responsive here or be like how does this look on iPhone 14 pro Max okay kind of okay that's the idea here though how does this look on iPad Air okay I see and you can click through this you're going to do responsive here which allows you to drag this little bar right here just to kind of see how your website interacts with different screen **[02:46:09]** sizes so we're going to leverage this today I'm going to show you how to do good practices when it comes to the CSS files Etc shall we finally jump in you're like Corbin stop talking you talk too much I get it okay okay let's go to vs code we're in vs code we're good to go let's go to our cheat sheet as you already know we got to go to our directory when we do commands as this is where our code is stored so we're going to do this boom and when I say stored that's this entire shabam here obviously we went over this in past lessons I'll repeat myself a lot in these later tutorials here just because end of the day when you're learning you need to hear it again that's anything with **[02:46:40]** learning like when you hear it multiple times you be like okay now I remember so from here though remember npm start npm start here hit enter and we're going to launch our Local Host 3000 which allows us to see visually what our current web app looks like which if you didn't know this is where we're at up to this point we currently have a nav bar we have a nice little notification bar a banner that works all intuitively this all works from our past lessons here we have our current Investments found here at web Cafe and now we're going to be adding a footer here but in reality **[02:47:11]** the reason we're jumping to the footer here is due to the fact that the newsletter CTA which I may add here or alternatively add below here that's obviously going to be in the school lesson so I kind of wanted to wrap up what's found on YouTube first so what I like to do is once we have the mpm start running in one terminal window just hit command new control new or sorry command n uh command control N I believe it opens a new terminal window this allows us to then do further commands when it comes to GitHub you know everything above the board there perfect let's go ahead and do this if you've seen the series you already know the situation now get yourself a cup of coffee cup of **[02:47:43]** coffee coffee I'm going listen to some Swedish House Mafia mix mix I'll come back back here I'll show you exactly step by step how I got my new footer here AI prompts I use good practices Etc so I'll see you probably in 10 to 20 minutes here see you then wait one last thing as you already know you're like you forgot something I know I did get Branch we're going to create a new Branch here first off I'm going to delete my branch that I did in the past video because I don't need it locally anymore that's going to be get branch. d-d now let's create a separate Branch for the purose of the footer and **[02:48:14]** responsive so we're going to get check out dasb I'm want to do footer and we'll just do rep footer rep kind of like a gym when you go to the gym you like do a bench rep foot rep uh here we go so we got a new Branch here foot rep or footer rep and we're going to go so we know our main branch is our stable Branch we don't want to make any drastic changes within our main branch for obvious reasons so we can roll back to it if we mess up dearly in the footer rep Branch for now though let's proceed and do our footer we got our footer here let me show you step by step how I went ahead and created this now obviously the **[02:48:46]** footer is not using the correct copy for web Cafe to using Apple copy here when I say copy I'm referencing shop and learn account manage your Apple ID stuff of this nature from what you see here you scroll down is it pretty good structuring here for a footer let's find out how I did it coming over here to chat gbt I always like to start my chats with the broad goal of what I'm trying to do so what I said is this okay we're creating a footer for a website today call the files footer. JS footer. CSS let's copy exactly what's shown in the attached image and used this as a placeholder image for the icon and then gave a placeholder image you're probably **[02:49:17]** familiar with this with the past lessons therefore all we need to do is come over to reviews this is where we put major sections of our landing page right click new file create the foo.js create the footer. CSS blank files When approaching the footer you can either give a general direction or alternatively look at another website's footer like The Styling like the structuring everything like that and screenshot it with this screenshot I went ahead and took Apple's footer here what you'll notice is that the major components that I personally liked were the borders from here and here I like this little logo of Apple **[02:49:47]** like a nice little like subset in addition I really liked this bottom part here where it has like one sentence and then legal stuff implied at the very very bottom and then we'll get an output here that obviously won't look exactly like it but it'll put us in the right direction so we'll get our first output here of the JS and then we'll get our second output here of the CSS now all you have to do is simply copy and paste I'll give us some perspective here though this is where I started so let me copy the first initial code I got copy JS paste over here let me get the CSS as well copy CSS paste over here let me **[02:50:18]** show you what it originally looked like on the first output this was the first output and what it looked like now obviously this isn't what we want but using this we can gohe and start structuring it and get a footer that we like so that our footer can change into this and then last thing obviously in order to render it we're going to come back to a JS file we're exporting his footer therefore for in their homepage. JS so we'll import it as footer from foo.js foo.js views and then we'll place it under the investment G section and the top fold section so it's at the very bottom of our website so first major thing that you saw that was wrong with **[02:50:48]** that original output was the underlying logo was all the way over here we W it right there right so we want in the top left how Apple did it so what I did was I simply just screenshotted that very specific part and I said make it look exactly like this notice the border on the top so it didn't have the Border originally either and then I provided the relevant code that it provided up to that point which was just the image file then it said should be left and then web Cafe holding company to the right like an image and then the rest gave me the code remember copy paste copy paste JS **[02:51:19]** over CSS over that put me a better Direction and then the next thing I didn't like was the fact that all of the columns were Center aligned to solve this I simply asked it to go left align in addition notice how web Cafe holding company is in its own column here we don't want that we want it to be above right here and then everything below that so I simply said it in plain English better this is what we currently got but one issue notice this gave the relevant code which was the logo and web Cafe holding company which correlates with this code it's in its own column but with the original footer it was above all the other columns aligned left **[02:51:51]** therefore we need to wrap this in another CSS class to do so let me explain that a little bit more when I say wrap code in another CSS class here's what's going on originally footer toop did not exist therefore when footer toop did not exist the footer columns this was all jumbled up into one div here when it was jumbled up into one div it causes it so that when you try to manipulate a certain section of it everything gets manipulated therefore a workaround or something you can put in your toolbook here here is that sometimes for alignment and structuring **[02:52:22]** you want to wrap the underlying element in another div a parent div for the child div here therefore we can treat this differently than we would for the footer columns basically before I wrapped it in the CSS class this was all treated within the same parent element but now that I wrapped it in a CSS class this in a CSS class outside of this one I can manipulate this and put it above here and have everything below what's happening down there if that didn't make that much sense don't worry typically you don't even have to tell it to wrap **[02:52:52]** it in another CSS class it kind of already knows to do that if you just you know gave it the original prompt without this sentence now the next issue that was found within that original output was there was no bottom section it just completely ignored this section that I wanted so what I did was simply screenshot that section said okay below footer columns I referenced the div class here let's add the attached image how did I know as footer columns if I come back to our code here in the JS I simply double click this or hover you'll notice this little white line takes us all the way down here and I know that if **[02:53:24]** I want to place an element below this di outside of this div I'll place it like this forter bottom so what I did was I referenced the whole class rather than copying all the code I can just reference this top part here and gbt is smart enough to recognize that okay you mean everything below this and I did that went ahead and created this entire section here below that original div and just so you know when a div is closed you can kind of see it with like div here and then notice that little slash that shows you that that element is closed there now what's super cool here is that it also gave me the relevance **[02:53:55]** CSS associated with this new element just to clarify again this new element is this one right here and instead of giving me the entire footer. CSS it gave me the CSS relevant to this new element we just created which is going to be the footer bottom here's what's cool about that and here's something you can learn real quick what I like to do is that for specific elements found within a component I like adding some comments here comments are code that is not R but it's for your use so what I do is I typically just add like duplication of what section we're referring to here so for me I'm going to call this footer bottom I know that so I'll just like **[02:54:26]** paste it four times to kind of separate the CSS blocks between each other because if you get a very complex web page you're going to have a ton of different elements and it can get really jumbled up and you're like wait where is this again where's this again if you have nice little chapters here little sections here you'll be able to find that code easier the next issue I was having with this output was the Border itself wasn't going in between this sentence and then this section here and as a side note to make this so that it went horizontal like this I basically just copied that entire section and I **[02:54:57]** was just like make this a row so it's all one line but I was having issues with this border here just registering it it kept putting it in the wrong area I kept trying I kept trying I was like you know what let me just show you something new and that's something new here is that we can create an entire div element that is just a border so I simply said okay let's just do this make border and then gave the code as its own div element so I can adjust it from there and it did that what you'll notice is if I come back to the code here it's its own div element which is footer border and then in our CSS this is where I can adjust it I right here can add the height color opacity width and **[02:55:29]** everything and that allowed me to put it right above this footer section here right above these links right there so keep that in mind if it's giving you trouble or issues sometimes approach it in a different manner as originally when we were creating the Border as we did here we did this as a border top which means it's going to take the entire div element so in this context the footer top the footer top in this context encompasses the dark logo web Cafe logo plus web Cafe holding company and we use border top here in order to be like at the top of this development just give a border the alternative way to approach **[02:56:01]** this is going to be providing a entire development that is just the Border itself so foter border two different ways you can approach the same type of logic there we go so I'm going to go ahead and update this copy so it's relevant to web Cafe I'm also going to make it so that there's external links going to be associated with this footer element and keep going here I'll see you soon went ahead and changed the copy of our photo here so now we are doing something that is more aligned with web Cafe such as social media Investments education paid promotions now for all these columns except the last one they're all going to be external links **[02:56:32]** which we've learned in the past where simply you click it it'll bring you to that web page as a side note you might be like cor what is digital noad what are you talking about if I click it this is my second channel here I actually plan on going full-blown digital Nomad next year be traveling around different countries I'm going to show you how to do it as well what the cost is associated with it everything by the board that's a little side note but check it out if you want to learn all that kind of stuff the last column here is actually a button that when I click it it brings up the email option so you can automatically email me if you want to contact me for paid promotions then obviously we just change the copy over **[02:57:02]** there to reflect our branding let's find out how we did it to start off I opened a new chat I gave the entire JS file and I gave the entire CSS file copy paste once I provided these files I simply asked it hey I want to do something very specific here and it said okay what do we want to do how would you like to proceed I went ahead and said okay help me create link for all these make sure to open a new tab provided the relevant code so this would be the footer columns and then one by one I kept it simple for YouTube go to YouTube for X go to x for digital Nomad go to the second YouTube channel for AI Marketplace go to this link so this is very much just here **[02:57:34]** there here there here there once I provided all that it gave me all the relevant code and I was able to copy and paste over now one thing you'll notice about links in development is they're not going to look like this right away they're not going to have this coloring they're going to have like a blue tinge or a purple tinge how to solve for that is this in the context of coding that blue tinge and purple tinge is what we call decoration so I'm going to say okay make it so there's no decoration on the link and also make it so there's a slight hover effect give the CSS classes for the links and it did simply copy this paste it over my CSS class and I was good to go for reference what I mean **[02:58:04]** by that purple or blue Ting is if I delete that CSS that I was just given that's what my links will look like no good better we have successfully created a footer together this works this is good now we're on to the next part of this video where we're going to do mobile responsive this and just make this responsive on any type of screen layout let me show you what I mean in theory I can hit right inspect and show you or you can come up to your browser come up to the corner and then just drag over and what you'll notice is that we are not optimized yet I mean look at this watch this oh that does not look **[02:58:35]** good let's go to make this look good here so it actually looks good on a mobile view I'm going to make the relevant changes show you how I did it showed you how I talk to AI everything by the board I'll see you there I have successfully made this responsive watch this when I drag this in our Google Chrome it slides in so this is for the tablet form here everything is now structured correctly if I go all the way to mobile here slides in again and if you scroll down looking pretty good for reference this is what it originally looked like on mobile obviously not pass for a real **[02:59:06]** website this is what it looks like now on mobile though pretty solid stuff so let me show you how I did that to remind you again on how to get that responsiveness and what I just showed you right click inspect come up here to that little icon up there click it and then you can simply start dragging so the process of making a web application responsive is actually a lot easier than you would think I'll walk you through a couple examples and I'll give you some insight first off proceed with providing the entire JS file and CSS file the way you should approach this is that we're going to optimize the CSS responsiveness **[02:59:37]** for the footer the investment and the top fold we're going to go to every single one of these CSS classes over here and you'll see what we'll do so let's start off with the top fold CSS the first major thing you need to identify is that when dealing with CSS in the context of responsiveness it will have this kind of bracket at media Max with 768 pixels and then the tablet will be minimum width 769 pixels to 1024 pixels it is extremely important that you have this midwidth section here if you don't it won't read any of the code **[03:00:08]** found in the mobile one so check your AI outputs make sure that's included next major thing for you to understand for responsiveness let's look at the hero Title Here notice how I have a f F size of 2.4 remm and then if I come out here to just our regular code notice how the font size there is 4 REM you might be saying Corbin how does it know which one to default to that has to do with the fact of this one line here what this is going to do is this is going to override any code found here here so in this very **[03:00:38]** specific context if it's found in a media screen that is Max 768 pixels or under that we're going to override the original value of four and we're going to place it with 2.4 in addition if you don't adjust any of the other code found within that CSS file such as color or margin bottom 20px this code exists here already so you don't have to retype out that code it already exists there in theory though if **[03:01:08]** you wanted less margin bottom I could go here and put it to 10 Etc so the purpose of responsiveness is that we're changing very specific CSS elements to look better on on mobile tablet or a smaller laptop screen knowing this just as an overarching thing to understand typically with mobile and tablet responsiveness it has to associate with a couple of CSS elements this typically Associates with font size in addition Flex direction of the actual elements themselves let me explain a little bit more so for example here what you'll notice is that our font size is **[03:01:39]** obviously pretty decently big here so as you get a smaller and smaller screen font size for automated everything's going to be smaller the subtitles is going to be smaller like everything's going to be a little bit smaller to adjust for the screen size and then in addition notice for an investment G section here it's in a row what typically happens when you go to tablets and mobile though is that you'll flip the direction here to column boom now it's in a column notice if we kept it as a row this is kind of how the UI would look but don't worry most of this chbt handles therefore the workflow is this you're going to copy your entire JS file **[03:02:10]** top fold you're going to copy your entire CSS file you're going to say okay see this code paste over both and the reason you're copying over the JS file you might like why do we care is that this gives Chad gbt the structuring of whoever is the larger div you know different sections like it gives it context of where this CSS class is associated to once you have both though we are simply going to add one sentence here let's make it mobile responsive and tablet responsive just output the CSS relevant to this and there we go we get the relevant CSS class for responsiveness come down here notice bad **[03:02:41]** output we need that minwidth you need this trust me so add that if it isn't on this output from Chad gbt but if it is you're good to go copy paste over make your adjustments and proceed and then from there it is as simple as providing the next file okay good next file whatever your next section is so for me is video module JS and Vis module CSS proved all the relevant code then I got the relevant mobile CSS and the tablet CSS now what's great about the responsiveness and why I typically leave it till the last part is because of how simple it is to implement in your code **[03:03:11]** it really is as simple as copy code go to your relevant file here so video module CSS and just paste it at the bottom so you'll have all your main CSS here and then your responsiveness CSS at the very bottom this really good Organization for scaling with this knowledge rinse and repeat and proceed and this will get you to the point where you have a mobile responsive web application now what I suggest you to do is you don't have to follow Everything Chad gbt says to a t make adjustments for example in Mobile this font was still too big so I made it smaller made **[03:03:42]** this smaller made some adjustments here and there but overall it gave me the structure and gave me the direction of where I need to go for this to look good on any screen with all that looking good let's go ahead and push this Branch to GitHub make sure you leave a like if you felt like you learned something up to this point it's free and helps me out here so it's going to do get ad make sure we are in the current branch which is going to be foot rep so I can check that by doing get Branch okay foot rep get ad get commit dasm we'll say responsiveness good get push origin and then whatever brancher in grab that here **[03:04:13]** we go so we push this to GitHub this will all go away cleared come in over over to GitHub here we're going to hit compare and pull request if you seen my previous lessons you already know what's up and we'll say footer done and responsiveness here we go come down here create pull request with that done we're going to say merge P request confirm merge now that we've merged with our main branch we can delete this branch in the cloud with that merged we come back over here we're going to say get Branch get check out main so now we're in the main branch and what you noticed is that all those changes they don't **[03:04:45]** exist because we need to pull the most recent branch from the cloud the most recent code where we just merged G origin main boom there we go we have successfully pulled the most recent main branch which was a merge of the footer rep Branch if I come over here you'll see this in the Vlogs notice it's a mer merg pull request here we're good to go the next two lessons you'll see in the series will be found in my school Community as I discussed earlier we're going to learn how to deal with web Hooks and external applications on on top of that contact page and making a **[03:05:16]** custom domain and then finally I'll have the last lesson that wraps this all together on this YouTube series here giving you context and best practices of how to move forward from here and maybe some insight on what I plan to do next when it comes to building out an entire software in a similar style oh you found yourself trying to get to lesson 8 and lesson 9 in this really big video if you want those lessons that show you how to create a newsletter and handle web hooks in a secure manner check this out in my description down below you can find those two lessons in my school Community you can click that little button right there join check out learn in addition **[03:05:48]** to showing you how to handle web hooks securely and passing data I'm also going to show you how to connect a custom domain finally showing you how to add a contact like form on your website now if you don't care about that that's fine this next lesson here you're going to see is going to be a wrap-up and I'm also going to show you what we're going to do in the future when it comes to a new series that's super cool spoiler artificial intelligence software we'll get into that that price right there though is the cheapest will ever be though you can lock it in for life or not up to your choice let's jump into this final lesson we have finally did it we have completed our landing page here going from zero lines of code all the **[03:06:19]** way to however many using artificial intelligence to help us throughout the entire process as we know from lesson one this is going to cost me no money like absolutely no money to run the only cost associated with this now is $12 a year therefore going back to our original situation where I was paying $8 a month $216 a year and $1,188 every 5 years well guess what not anymore now that the website is complete the purpose of this video is I'm going to tell you what's next and on top of that best practices as a side know if you're just finding this video and your somehow found yourself on lesson 10 **[03:06:49]** check out the playlist in description down below we start at lesson one all the way to lesson 10 here showing you how to build out an actual website we're talking about functionality when it comes to external links EG I click this Banner go to the external link we're also talking about popups within the website what's the active investment automatically loads a YouTube video automatically gets going scrolling down here we have the ability to create different cards here we also have the ability to sign up emails to our newsletter like ton of functionality this was a web hook showing you how to secure web hooks Etc and don't worry we also Made It Mobile responsive for any **[03:07:19]** type of screen looking pretty good now the best part about creating a website is that this is basically digital real estate this will always exist at my domain for The Eternity unless I can't pay that $12 a month so that's the first good thing about this the second good thing is that best practices kind of goes over this entire tutorial here and the entire lessons you've seen up to this point when you want to add additions to your website make sure to create a separate branch do a local host and then push to here now let's take this one step above that what is the best of all best practices that is doing a QA environment or alternatively named **[03:07:50]** a staging environment let me give a brief rundown of what that is and then that's going to lead up into the final part of this video so what we've been doing up to this point is that we've been using the local environment the local environment is what we saw with Local Host 3000 and while using the local environment when we're pushing to Firebase hosting we've been just going directly to production just shooting right to the production seeing if it works seeing if we're good this kind of logic in the sense of we're in Local Host it looks good pushing to prod production live website link is find in the context of very simple websites like **[03:08:21]** landing pages like what we did in this entire series or just you know websites in general that don't have too much functionality although if we're creating software we don't do this this would be very bad if we're creating software we do local to QA and then QA to production so your first question might be is Corbin what the heck is a QA don't worry what QA is is a duplication of production but a separate environment to be more clear here this is a separate Firebase project this has separate Google Cloud functions for the backend these two are carbon copies of each **[03:08:52]** other but it's one Firebase project dedicated to QA and one Firebase project dedicated to production one Google Cloud dedicated in the back end for QA one Google Cloud dedicated in the back end for production the reason we do this is that we test the application in QA to make sure everything works good in a live environment from QA then once we confirm that we then push a prod here that allows the general user base to access the new features as well if that didn't make that much sense don't worry as that is the purpose of what's Happening next we are going to be **[03:09:23]** creating a playlist that shows you not how to actually create a website like we did in this playlist but shows you how to actually create a software I don't understand Corbin what do you mean actually I mean like we're going to do zero lines of code to however many and build out a real live software as a side note some of y'all might be like what the heck why does this guy keep showing bump UPS this is the software I'm currently developing for context what this means though is that in this series you thought this series was in depth for the last 10 episodes holy smokes I don't know how many episodes are going to be in this next playlist I do dedicated to **[03:09:54]** this topic but it's going to be lengthy as when you work and create software we're dealing with a whole another shabam what you saw in this series was purely front end development this introduces back in development this introduces a new language called python which pretty sure you guys are familiar with or at least heard in addition this includes a bunch of different stuff we can do in Firebase Firebase storage Firebase database Firebase o Firebase Etc ET like this is going to be a really In-Depth series so if you enjoyed this series and you followed me up to this point let me show you how to use artificial intelligence to actually code **[03:10:25]** out a software that is usable and as I did with this web series half of the content will be found on YouTube and the other half will be found on my school Community therefore if you actually want to learn how to build out AI software you can follow me here on YouTube make sure to subscribe you'll get the first half of how to build out software and then the second half will be found here if you don't want to join that's fine but as a side note that $19 is going to be the cheapest that ever is if you lock in now you'll get that for life in the future it'll be higher so let me go ahead and leave you with this then CU you know what's coming next in the future building a software if you have an idea for a software you kind of want **[03:10:56]** to be the focal point of this entire tutorial or this entire series and have me build it out let me know in the comments down below if something Peaks my interest I'll use that as the focal point if if something doesn't then I'll just do my own idea that completes this entire series here which is like four to five hours long I'm not too sure pretty crazy if you've been with me this entire Journey that's awesome make sure to leave a like if completely free and I'll see you in the next video