Lesson 6 - Responsive Banner & Image Gallery

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

Watch on YouTube ↗

Transcript

[00:00] I don't know about you but I'm done paying for websites I'm done that website you just saw I'm getting charged $18 from web flow don't want to pay that no more therefore we're going to use the power of artificial intelligence to build out this entire website if you have no idea how to code don't worry I'm making a whole series on it and this series works with curse your AI or alternatively if you like using replit no matter what though I am done paying for a website no more money web flow no more money 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

[00:30] artificial intelligence and coding it out now if you just found me and you somehow found lesson six I would encourage you to start at lesson one as there's going to be stuff that you're going to be like wait I don't understand how did he get here or this guy's not a good teacher he didn't teach this well that's just because you missed the other Five Lessons you're going ask questions like Corin where is this playlist check the description scroll down it'll be right there but before you leave make sure to leave a like on this video check out lesson one start from the beginning 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 say I didn't teach you just

[01:00] 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 banner is 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 Investments That web Cafe AI is involved in sound good two last things I'll mention real quick fire off if you're

[01:31] using either cursor AI or repet 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 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

[02:02] 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 our directory 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 you 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 you already know what do we do npm start this is is going to launch our code found here into a development

[02:33] 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 the 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 I'm showing you how to build out this website from start to finish in this playlist and lastly what we completed in

[03:03] 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 we're you going hello this hello now let's move 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 webcafe 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 to have everything open ready to go here we're going to create a new Branch for

[03:33] 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 it 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 Main Branch if you want to make changes don't touch it this is your stable

[04:03] 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 Swedish House Mafia and SoundCloud and add mix a lot of good ones I'm going to

[04:35] go ahead and code out some files show you the end product when it came to the banner and then 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 better but for now let's go and find out how I got to 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

[05:06] 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 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 top of our landing page current structuring of our project let's create a new components folder call it banner.

[05:38] 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 is going be the top full. JS now if 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 a do js. CSS once I created those files made my life simple as I just want structuring right now I simply copied the JS pasted it over there when I say copy I mean like copy

[06:09] like that simply copy the CSS pasted it over there what do you mean by paste it over there Corbin I mean I literally went tojs banner. JS paste banner. CSS paste that's it want to render it want to see where where we even at then it went ahead and showed me were to import it into top 4. JS but it was actually incorrect I'll explain why when it comes to pathing but it did show show it correctly in the sense of how to render it in the j6 element like this so for example if you went the extra mile here and you went to top 4js and you imported the same way like it showed we obviously

[06:40] 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 exist in the components folder we went over this in lesson five and from lesson five you can see right here video module components going to command Z this so it shows it in the correct folder here Banner components Banner component on two dots because we're going inside of a folder here not one dot two dot if that didn't make that much sense watch the previous lesson I go very much in depth of how to spot

[07:10] 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 online 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 literally just do with one line what do you mean Corbin I comment this out comment out when it

[07:41] 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 cuz 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 there is no return statement let me show you a little bit more structuring here notice how

[08:12] 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 this logic IC 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 and give you my next steps I'll see you there how does

[08:42] 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 let's 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 are 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 works perfectly we have an announcement

[09:12] here we are excited to share that webcafe AI 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 creating 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 comparative to what you just saw it we have the overarching banner CSS class but now we actually have a CSS class

[09:44] 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 H1 and make it a div that's it what I found through development is that sometimes if you leave H1 on there and still try to mess

[10:15] 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 is an announcement that's not the most relevant part for Google to crawl and 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 paste so then once I did that

[10:48] 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's just not working it doesn't look good so for that I said for the banner what coloring would work better for the background no this was me kind of messing around wondering like okay what direction do I want 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 realize you know what let's find out what we actually want to do here and as aide know I went ahead and also thought the actual thing that was being said in the banner was too long so you know this is good can we make it slightly shorter give me a

[11:19] 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 Cy 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 crazy 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 website now this specific context what I did here was Apple I like I want a

[11:51] 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 grabb the colors from Apple and then made the gradient 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 comments down below but on Apple you can go ahead and just install an app called

[12:22] it's called Color Picker and basically what it 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 some color examples here proceeded therefore a lot of this process especially when it comes

[12:53] 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 will 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 fold. 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 can even come up here like maybe I want this color command save oh that doesn't look good

[13:25] 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 style 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 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 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

[13:56] page called bump UPS 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 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

[14:26] 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 ch jbt CSS wise we basically asked for this relev information where when the banner is hovered we transform and we translate y y AIS xaxis up to pixels the transform here the 02 seconds is what adds that smooth effect so it isn't just like an instant clickup like a boom it's like a slight like hover same situation

[14:56] 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 F crlf 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 transformation of 3 seconds so that we have a nice little

[15:28] you know UI El that goes up slightly adds some interactiveness for the user and then finally the last two things are the shadow element and the round wct round wct 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 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 here with this color provided the color and it actually did give me

[15:58] the wrong code here notice how it says text Shadow this isn't a text this is a element this is a div element nakub this entire thing is a div element how do I know it's a div element because of the fact that it says 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 our tap fold. CSS and got a relevant output you can push this to the limits here if you're like like you

[16:29] 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 like you're playing a video game game no this

[16:59] is not Minecraft This Is Not Call of Duty but we're going to save you a milestone here 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 the fact that we haven't actually pushed anything yet so let's do that to save your spot we're going to do 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

[17:29] that's 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 burned three files I just completely mess up I can roll back to this previous brand brch here and find

[18:00] where I just saved my last spot so in this context here make sure to use my past Chad gbt chats 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 Chad 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 20 30 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 there so I got my elements right here obviously got to do

[18:31] some CSS got to 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 see the past tutorials I took an element from another website I liked and I went ahead and did the screenshot method I 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 gallery. CSS here is the placeholder image for each card and then I use a

[19:03] placeholder image that I have already in my project so we can go ahead and insert that for these relevant images that show there I did 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

[19:34] is some stuff I didn't like so it gave me the j6 gave me the CSS 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 cuz this is 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 it's more specific so

[20:06] said okay give me again but 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 homepage. JS I imported investment G

[20:37] 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 copy is 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 Marketplace bump ups and school so

[21:08] 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 add this little cursor effect here where it turns

[21:39] 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 referencing notice how it has like the

[22:09] 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 buling 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 with Chad gbt but I realized you know what this is so limited that I might as well just put it in manually so

[22:40] 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 code 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 doesn't say iPhone anymore I simply just

[23:11] asked it to just remove some comments SL sles comments this code it doesn't read it's 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 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 it showed the entire link for bump UPS it showed the entire link I didn't like that I want the display link to look sleek and clean

[23:42] 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 landing page for my school Community you click it it goes there this is purely for UI but this is purely just so it

[24:13] looks better on your web page so what you learned here is 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 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 entire I pasted the entire JS file

[24:45] 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 opportunities there will be more little

[25:16] 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 therefore we added a bullying of is

[25:48] featured and all I simply did was ask this let's add a buling of is featured and if it's true we do a different CSS element making the card have a different background color and then provide the background color and provided me the entire GS 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 ly page so far one last thing though actually one very big last thing here what you'll notice that each one of

[26:18] these has a relevant image element here's what's extremely important about image elements 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 j6 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

[26:49] 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 to 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 merg this to main because remember this entire time we created a whole separate

[27:20] 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 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 asri will go away color will go away come back over to GitHub in GitHub here we're going to get a nice little notification

[27:50] 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 don't 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

[28:22] confirm merge once we confirm merge here we can simply delete the branch as it's not needed anymore so now that we've merge just to main we come back to our vs say get Branch say get checkout main this how we move between branches and then we are currently in an old version of main right because 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

[28:53] 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 because 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

[29:24] 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 H command save control save make sure everything is clean and boom now our main branch reflects this where we've got it and there we go we have a successful upto-date main branch based off the branch we created today pretty good make sure to leave a like is completely free and it helps me out here if you want to see other videos on other topics on this channel as this is a very very Niche topic I guess it's kind of Niche who knows check me out here I do videos on AI automation business advice

[29:55] when it comes to creating software business advice when it comes to implementing automations within your current business everything by the board and I'll see you in the next video These are videos chosen by me or YouTube who knows did YouTube choose good did I choose good I'll see you in the next video