Lesson 7 - Mobile Responsiveness & Footer Design
Create an App's Frontend with AI📅 2024-09-21
Transcript
[00:00] and this will get you to the point where you have a mobile responsive web application you're still paying for a website you're still paying premium to just host a website let's stop paying welcome back to the series where I'm taking my current website and making it so I never have to pay for a website again I'm showing you step by- step how to use artificial intelligence if you've never coded before and showing you how to code an actual website therefore the strategies I'm about to show you in this series can work with cursor AI can also work with repet because to be brutally honest with you you really only have to pay for a domain now everything else is free if you know how to code it but
[00:31] don't worry I'm going to show you how so in this entire series let's learn how to start using artificial intelligence to build out a website and remove a business cost sound good let's do it 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 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 now if you just found this video or you just found me well hello I'm Corin Brown and you're just like how is this lesson seven what did I miss because of the fact that I'm actually showing you how to build out a real
[01:02] website this isn't a like 10minute video it's like here's a website or like here's a little game this is like an actual showcasing for beginners of how to start and finish a real website and the reason I keep annunciating real is that you probably already know this there's a lot of fairy dust out there where it's like it shows you a 20-minute video and by the end of it you're like that was cool but what did I actually learn therefore in order for me to show this in the context that you're a beginner I really had to build out a playlist we're talking about 30 minute videos 37 minutes 30 minute like this is lengthy by the end of it you'll be able
[01:32] to have a full comprehensive idea to be a front-end engineer that works with artificial intelligence therefore if you haven't started at the beginning which is lesson one right here check it out in the description down below just click the description scroll down it'll be the playlist I'll leave it as well on my channel so you can just kind of find it it's called building a real website but before you leave make sure you leave a like it's free and you'll be back here anyway so you'll be able to see this video again and you'll be like oh I remember this video this is where I started sound good I'll see you there okay for everyone else that's watched lesson 1 through six and we we've been going a lot here this is a lot this is a
[02:03] lot for now though we're on lesson 7 last major announcement before we jump into lesson 7 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 newsletter CTA what I mean by that is basically the ability to handle web hooks effectively and securely within your softwareweb app application EG but you put your email there and it signs it up to any newsletter that you currently
[02:34] 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 nine which is I'm going to build our real quick contact page for anyone that wants to have a contact page on the website and the ability to have a custom domain EG not Firebase domain but like webcafe ai.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
[03:06] 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 walk in $19 now or just be like I don't need those lessons that's fine you don't 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 you never done web development the footer is anytime you scroll down to the
[03:36] 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 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
[04:06] 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 but what we care about 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 over responsive here or be like how does this look on iPhone 14 pro
[04:38] 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 to kind of see how your website interacts with different screen 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 we finally jump in you're like Corbin stop talking you talk too much I get it okay let's go to vs code we're in vs code we're going to go
[05:08] let's go to our cheat sheat 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 learning like when you hear it multiple times you be like okay now I remember so from here though remember mpm start mpm 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
[05:39] this is where we're at up to this point we currently have a nav bar we have a nice little notification bar or 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 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 the low 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 npm start
[06:10] running in one terminal window just hit command new control new or sorry command n uh command control end 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 coffee coffee I'm G listen to some Swedish House Mafia mix mix I'll come 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
[06:42] 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 purpose of the footer and responsive so we're do get check out dasb going 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
[07:12] or foter 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 obviously the footer is not using the correct copy for web Cafe it's using Apple copy here when I say copy I'm referencing shop and learn account manager 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
[07:43] out how I did it coming over here to Chad 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 foo.js footer. CSS let's copy exactly what's shown in the attached image and use this as a placeholder image for the icon and then gave a placeholder image you're probably 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
[08:14] 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 like a nice little like subsection 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
[08:45] 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 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 Cs CS as well copy CSS paste over here let me 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 go Ahad 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
[09:16] back to a JS file we're exporting as footer therefore 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 that original output was the underlying logo was all the way over here we want 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
[09:47] 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 me the code remember copy paste copy paste JS 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
[10:18] 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 therefore we need to wrap this in another CSS class to do so let me explain that a little bit more when I say rap code in another CSS class here's what's going on originally footer toop did not exist therefore when photo toop did not exist the footer columns this
[10:48] 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 is that sometimes for alignment and structuring 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 phoo columns basically before I wrapped it in the CSS
[11:18] 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 manipul 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 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
[11:49] 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 I want to place an element below this div 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
[12:21] 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 relevant 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
[12:51] 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 cont comments here comments are codee 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 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
[13:21] 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 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
[13:52] here is that we can create an entire div elment 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 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
[14:23] in a different manner as originally when we were creating the Border as we did here we did this has 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 this is going to be providing a entire div element that is just a border itself so for the Border two different ways you can approach the same type of logic
[14:54] 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 a 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 footer 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 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
[15:24] here I actually plan on going full-blown digital Nomad next year me traveling around different countries I'm going to show you how to do it as well what the cost is associated with it everything about 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 pay promotions then obviously we just changed the copy over 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
[15:55] provided these files I simply asked to hate I want to do something very specific here and it say okay what do we want to do how would you like to proceed I went ahead and said okay help me create links 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 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
[16:25] 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 gonna 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 by that purple or blue tinge 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
[16:56] 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 responsiveness 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 good let's go and 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 talked to AI everything by the board
[17:28] 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 passible for a real 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
[17:59] 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 for the footer the investment in 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
[18:30] 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 width 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 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
[19:01] how I have a font size of 2.4 remm and then if I come out here to just our regular code notice how the font size there is for 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 specific context if it's found in a media screen that is Max 768 pixels we're under that we're going to override the original value of four and we're
[19:34] 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 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 mobile tablet or a smaller laptop screen knowing this just as an
[20:05] 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 obviously pretty decently big here so as you get a smaller and smaller screen font size for automate everything's 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
[20:37] 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 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 be like why do we care is that this gives Chad gbt the structuring of whoever is the larger div you know
[21:08] 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 output we need that minwidth you need this trust me so add that if it isn't on this output from chat 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
[21:39] the next file okay good next file whatever your next section is so for me is video module JS and visual module CSS wred 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 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
[22:10] 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 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 it helps me out
[22:40] 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 photo rep get add get commit dasm we'll say responsiveness good get push origin and then whatever Branch you're in grab that here we go so we you push this to GitHub this will all go away cleared coming over to GitHub here we're going to hit compare and pull request if you've seen my previous lessons you already know what's up and we'll say footer done and responsiveness here we go come down here
[23:11] create pull request with that done we're going to say merge pull 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'll notice is that all those changes they don't exist because we need to pull the most recent Branch from the cloud the most recent code where we just merged get pull origin main boom there we go we have successfully pulled the most recent main
[23:42] 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 merge merge 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 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
[24:13] software in a similar style but that just about does it make sure to subscribe here and I'll see you in the next video oh we're mobile responsive now oh it's responsive check out these videos if you want to see other stuff on my channel that's my face and this is mobile responsive I'll see you in the next video