React Website Beginner Tutorial - Fully Responsive React JS App

what's up guys i'm excited to be back with another video and today i'm going to show you how i built this website in react i called it like execute financial basically it's like a mock-up financial advising website uh i designed it over the last couple days and threw it together it is in react so what we have here we have just several components we have a navbar component and then a hero component right here as we scroll down we have the about sections just about component and then down here we have a testimonial section and with some custom cards that i designed here and this is just one component you guys i just grouped it all together um here we have a demo section with an embedded youtube video and then just a basic footer at the bottom so notice we have some hover effect here as well as the buttons and of course if you click on the about section the testimonials they all go to the respective section here same with the demo and of course in the footer as well so and of course i made this a hundred percent responsive it looks great on tablet or mobile devices as you can see here it displays perfectly as we scroll up to the top here notice the the nav bar here there's a little bit of an overlay so you can kind of see that through the through our nav background here and uh also i'll show you as you click on a link in the nav bar notice the the menu closes so that's something we have to to code here as well and i'm going to show you how to do that so if you're ready to get started i'm going to show you how to code this exactly from the beginning to get started we're going to press the control backtick button it's going to open up the terminal here in vs code and we're going to create our react app folder here so we're going to i'm going to change the directory to the desktop that's where i want my folder to be i'm going to type npx create dash react dash app and you can name it whatever you like i'm going to name this one x q financial press enter and this will only take a moment to install your react application all right our react application has finished installing and here we are inside the directory that we just created so let's go ahead and clean things up a bit i'm going to delete some files that we're not going to be using today so we're not going to be using these three the app.test or the app.css so we can go ahead and delete those and let's press the control back tick button and i'm going to type npm start that's going to start our development server here i'm going to close this just a little bit and it's going to give us some errors because we deleted everything we need to make some changes let's go into app.cs and import react from react we can delete all this as well as this and inside the index.js we need to delete this and also the report web vitals that should be good sometimes it gives this error and you just need to refresh there we go so let's go ahead and type something in here to make sure it is working correctly the typical hello world and there we go everything is working properly we can delete this so let's go ahead and create our our file structure here so we're going to have a components folder inside our source folder and this is where all our components are going to live within the components folder i'm also going to create an images folder and inside let's go ahead and create some components here so i'm going to create uh let's do our navbar dot js first as well as there we go okay making sure that's not inside our images folder as well as our navbar.css and for images you guys i'm just going to pull them over but you guys can go ahead and download the ones from my github if you want to use the exact same ones i'm going to put the the link to this repository down in the description below so basically just click on source and this asset image is right here and these are the five we're going to use for example here's our hero and you can just click download and pull it in there yourselves but i already have them here on my uh on my desktop here in my finder so i'm just going to pull those over right here like so and here we go these are what we're going to be using for today's project so we can get out of that let's go back to our nav bar here and let me go ahead and make this full screen so it's easier to see so we're going to use a functional component i'm just going to type raf ce and that's going to create our functional component and export at the bottom the way you can do that is downloading this es es7 snippet right here for react redux and that's going to let you type in the shortcuts here so you can just type it out if you'd like i'm just going to use that to save some time excuse me so let's go ahead and type some jsx for our navbar component so we're going to give this a class name header and here we're going to have a nav the class name of let's see navbar and we're just going to have a um a tag in here and we'll just leave it to the home page with a class name logo and let's do this let's go ahead and import our file here that we're going to be using this is just our logo file so import i'm just going to say logo images logo and i believe it's just there's another yeah png here image tag with our source and then curly brackets logo because that's what we called it up here and let's give it an alt tag otherwise react likes to throw some complaints your way there we go outside of here we'll do we'll add our hamburger here hamburger and we're going to use react icons which let's go ahead and install that right now so go ahead and press the control c to um i'm going to close this as well to close your development server i'm just going to do this so we can see and we're going to use react icons so for that we're going to type npm i react dash icons then dash dash save okay and as you can see down here that's real quick just installed our package right there so we need to import this so we're gonna type import and these are the these are the two icons we're going to use fa bars and also fa times from react icons let me put this in parentheses here from react icons and make sure you do slash fa because that is what we're using here and then we can just say fa bars and we'll start our development server back up so we can see it over here off to the right where is that oh of course and first we need to also import this into our app.js components navbar all right so there's our logo it's on a white background so it looks pretty bad right now but we'll style that here in a moment so fa bars here let's go on and create our menu just under the hamburger but inside the nav bar nav right here and we're going to use an unordered list for this with the class name of nav menu and we'll use an li with a class name nav item and in there we'll use an a tag i'm just going to lead to the home and we'll just say we'll just say it goes to the um home let's copy these down i can't remember what i use i think let's just do about um testimonials and we'll have a i think we did demo all right that's looking good there okay and then after that i believe that's it for our nav bar um let's go ahead and do some and do some styling for our navbar component so we already have our navbar dot css created we're going here we're going to import that file dot slash there we go so get started with our styling and guys i like to kind of write out one component and then style it and just do one at a time some people like to create all their components and install them all at once this is just how i do things you can do it however you'd like it doesn't really make a difference i just like to see things one at a time i'm a real visual person 90 pixels and we'll do width of 100 top zero left zero and we're going to get a z index because we're going to be using an overlay and and okay so and i'm gonna give i'll wait on the active class so header we're going to display it as flex and also we're going to justify the content space between we're going to line all our items to the center with a max width of 12 40 pixels margin auto so it's right there in the middle of the page we have to give it a height otherwise it won't display the flex properly yeah okay just refresh that there we go it's laying down as we want it there so let's make this image a little bit smaller that's quite annoying let's give it a width of um try 250 pixels height we'll just leave it auto okay that's looking a little bit better we're going to change we're going to give it some media queries as well guys so it displays a little bit better let's do you know what let's go into our index dot css well and we're going to kind of give it just some global styles we'll use some colors that um that i want to use throughout here i have some pre-determined colors and let's uh let's start above here i'm going to use css variables so to do that let's type colon root and then these are the colors i'm going to use feel free to copy these down and we're going to do a few more in here we'll just do on our list with a list style type none a with a text decoration none and we're going to go ahead and do our our button in here because we're going to use those kind of throughout the throughout our application so 17 pixels eight pixels is going to be the padding font size let's do 1.2 rim i think i defined that up top onto 800 text transform let me make these all uppercase so for our background color for the regular button here's what we're going to do we're going to use variable open parentheses dash dash and whatever we named it um the color we want to use so primary color is what i want to use here as well as the as the border which we're going to set at one pixel solid and again variable parenthesis dash dash bar oops sorry dash dash primary color and we're going to give it a border radius of 4 pixels kind of give it a nice little curved curve border there and let's do our our hover class we'll do a background not background color but background bar and primary dark and i'm going to copy that down so we can just change this to border one pixel solid and the primary dark also i'm going to add one more thing here that i haven't we haven't typed out yet it's going to be a lines a little spacer that we're going to use throughout the throughout the app just blog with a width of 40 pixels height of 3 pixels margin 5 pixels auto left and right let's do a background color bar dash okay i think that's going to be it for our global styling for now at least we can close that we don't need that either so back here let's refresh this and let's continue working on our navbar so we left off at the image list out our nav menu so our links right here we want those to display as flex so they're horizontal there we go it's just not loading but it should work there and we want the nav item the padding of one ram we're going to change the font weight to 500 and we're also going to do header ul can just say item um the a tag let's give it a hover effect and we'll give padding adding bottom of 12 pixels and border bottoms this is going to give that little line underneath there whenever we are hovering and let's do the variable we're going to use our secondary like so all right and let's go ahead and what color are we going to put these here we'll leave that as it is for now we don't need to or we i guess we can do some media queries so let's go ahead and hide the uh the hamburger because as we're at full screen here obviously we don't want our hamburger to be displayed so we're going to hide that and we'll add some media queries display none and for our media queries here i'm going to add some space so you can see a little better media screen and let's do a max max width of say 940 pixels and for there we want our header the max width of 100 we're going to give it a background color of sort of rgba we're going to give it a little bit of a transparency zero zero zero it's going to be black and .9 okay and we have our their f bar we still want a hundred percent we do want to display our hamburger menu here okay so for our nav menu and we can go ahead and style it for our for our mobile devices here so let's give it a position fixed and this is going to be our drop down that we're styling right now we're going to give it for now just a left at zero top at five ram flex direction column so it displays vertically and give it a background color uh we're gonna do the rgb hey okay refresh that so we can kind of see it what we're doing there we go we do need to give this a z index guys and it's due to our overlay which we'll be doing after the component after this one nice transition okay let's add in in our index dot css box sizing i'll just do this we'll do this globally box sizing border box margin zero okay there we go it's a little bit better and don't worry about this um this blue black line up there and the white line down there we're going to change all that here uh here shortly so close this and after we styled our nav menu we're going to say we're going to go and give it an active class and this is how we're going to get the menu to toggle and the left is going to be zero and we'll do our nav item just give it a little styling here margin 1.5 rim on the top and bottom and let's change our image there bring it down by 100 pixels oh let's see that works there there we go okay so this actually we want to set at negative 100 i was just sitting at zero zero so we could see while we're starting it then when we toggle it it should come on the screen um let's go ahead and give our hamburger some some coloring because it's kind of annoying that we can't we can hardly see it i don't know if you can see it in the video but we'll give this uh we're gonna make it a little bit bigger the size let's say 30 and we'll do some style we're going to say color and then parentheses we'll say we'll just do white there we go okay perfect um let's go ahead and uh add in some some state here so we can toggle our nav bar so to do that in react we're going to go up here and where we import react we're going to put a comma then use the use state hook and it's going to be real easy we're going to type it in under here so it's nice and organized we're going to say const then some brackets and you can call this whatever you like takes two values click and set click is what i'm going to call it and that's going to be equal to use state and that takes a boolean value which we want to set as false for the default value here because we do not want it to be in the clicked state and we want to also add a handle click function here so const handle click and this is uh basically kind of like an event list or is what we're going to kind of be using it for and it's just going to be an arrow function and we're going to say that click to not click so let's go down and here and we'll go ahead and change our hamburger so this displays as the x kind of toggles back and forth between the two and in there what we're going to say is we're going to we'll start off in a new line here so what we're going to say if clicked show this is going to be the fa times else that we can put some parentheses around this and we'll cut that out somebody else show the bars and let's give this some style make it a little bit bigger like we did the bars 30 and we did style color we did white i believe okay copy that down and we need to put an on click we're going to run the handle click function as we can see this function right here and it should toggle back and forth there we go so let's now give um make our nav menu appear so down here with our nav menu is what we're going to be editing now and very similar to what we did right here we can actually just delete that and i'm just going to type over it we're going to put curly brackets and in there we're going to say if clicked we're using ternary operators here if clicked display nav menu in the active class so it's going to pull it from negative 100 to 100 or negative 100 to zero so it's going to pull our our menu onto the screen so if click display that with the active class else just the nav menu so it remains off the screen so there it is we need to give that some styling though change that let's do uh make these links white for now just put it right here you and put it anywhere you want okay however before we move on i'd like to change a few things here i'm going to make this a little bit bigger and i am going to get rid of that gap so to do that let's go up here down i don't know why i said five ram the nav bar is actually 90 pixels the header so we'll make it 90 pixels should fix that and let's make these a little bit a little bit larger and in indirection in the body we'll add a uh to a font size of 1.2 ram this is going to be all the oh for all the text on the on the site here let's get a line height also 1.2 i think that looks a little bit better there we go so you can also see we have the the hover effect of the yellow line there okay let's move on to our next component and what our next component is going to be is this hero banner here and also i want to show you that when we scroll to our full width here you can tell the background is white but it's going to take care of that because when we have our hero banner here the image is going to take up 100 viewports of the screen so don't worry about that so we can close our navbar.css as well as our navbar.js and let's create our hero so we'll come in our components folder here say new file hero.js and we're also let's go ahead and create our hero css so again we're going to type raf ce and that's going to export our functional component here let's go ahead and import this import euro from components slash hero and we'll put it right here under the nav bar okay for our hero component it's going to be pretty basic here there's really not a lot in here just the image and a little bit of text so let's give this div a class name hero and under here we're going to have a div with a class name of content and then bruce i have several p tags and a button tag and we have call us the 1-800 number and because money doesn't come with instructions like what i created there call us and let's say one eight hundred should have made this like a real phone number somebody didn't like they just get a bunch of phone calls all day perhaps next video because money doesn't come with instructions thought about doing that on the craigslist ad you know put like free lawn mower then put somebody's phone number that you hate in there just they get like blown up all day anyways button let's give it an href of um let's leave it nowhere for now and we'll give it our class name of button and free consultation see how that looks there we go uh okay let's so it's up there you can kind of see it with our little slight overlay let's give this some styling all right so for our styles let's see here our hero we're gonna give it a background color we're gonna use our bar overlay and this is how we're going to um we're gonna use an image we're gonna import our image in css then also our overlay and this is how you do an overlay um with css here so color give it a height of 104 heights width of 100 and we want this position to be relative okay because this is just going to be our uh our overlay which if we go in to our index.css this is our overlay here so this is the same thing typing in overlays the same thing is using our rgba here there we go so let's add our actual image in and to do that we're going to type hero then use the before selector we're going to have to type content and then give it some empty um empty quotes there this is we're going to use our image background url then print parentheses for quotes sorry images and this is our hero.jpg and we're going to say no repeat center center we want it to cover the page now let's give it a height of 100 also with 100 percent and this position is going to be absolute look okay 0 left 0 and this is where we need to do our z index very important guys don't forget the z index or it will not display properly oh yeah always do this import our style sheet um css there we go okay perfect so now we have our overlay and if we go in here to our css we comment this out you can see our overlay disappears so there we go but we'll comment that back in and let's style our divs here create some space so let's do our hero our content that's going to have a height of 100 we're going to display flex flex direction of column and justify content to the center with a max width let's do 1100 pixels and a margin auto with a padding of one rim okay and so i didn't give our p tags any class names so what we're going to do we're going to use the first um the child selectors so to do that content and then our p tag and so we have one two three four four p tags here so what we can do is it's version type fp and then we're going to use the first child selector okay and we're going to use font style size style we all want them to be a little bit different first one is going to be italic with a font size of 0.9 rem and then we're going to do hero content p and this is going to be you type in child and then here we say number two we'll make this a little bit bigger 1.9 rim refresh this here so as you can see not right here we're on the second child next we're going to do the third child so hero content p into child number three and we're gonna make this font size of five let's do five ram and a font weight of 700 so that because money is what we're working on right now should be font size oh a lot bigger and we're going to come back here yeah it looks a little bit better our buttons kind of funky right there we'll fix that though let's do the fourth fourth child hero content p and we'll do a font size of 2.2 ram the font style size of italic and let's go ahead and do just a few things for our button here so it looks we don't want it to take up the full width on the when we're in a full screen so hero i'll do margin one room top and bottom zero left and right let's give it a width of 300 pixels i'll get background um actually i don't think we need to do that let's see see how that looks looking pretty similar could make it i think we made it a yellow so we'll go ahead and do that background color bar make it dark let's do let's do primary and then copy this down we'll do the border here as well [Music] let's say one pixel solid see how that looks oh i'm secondary sorry the primary is is the green so it's a little bright here let's do secondary dark which is a little bit darker yellow that's a little bit better looking pretty good looking pretty good um still need to do some media queries so let's go ahead and see here let's do our hover or a button um um we even do hover on that yeah okay we'll do this [Music] okay we'll do a hero you can style it however you guys like i'm just kind of going off what i think looks looks halfway decent um okay um yeah i've seen any color there and let's do or it's only a bad thing i keep on having to look back here secondary color secondary dark um so when we hover okay dark and border one pixel okay oh my gosh okay there we go boom boom boom okay um let's do our midi queries we only have a couple we're just going to change the size on those really so media screen and i think we're doing i'm just going to do one media query on one so i'm not going to do like the full tablet and and then small mobile devices i'm just going to kind of make it look good on try and do the group the tablet and the like mobile phone together in the same thing here so you guys can go in and further detail it if you like or on your on your own projects so let's do the in child and let's do the third one where the font size was so huge let's do 2.6 rim but wait i think we can keep it the same actually let's just leave that out then hero content to the let's do the uh the fourth here 1.6 rim all right yeah it looks okay pretty close ah one two three four that's not oh yeah there we go and child okay looks pretty looks about the same oh we didn't let's change the colors on that um now see if that works okay cool all right um let's go to the next component which is this about right here which is image and then just uh some little header and then some p tags here and a button so let's move on finished up with those two next image is going to be or sorry next component about dot js and let's do val dot css go into our ballot.js rfce let's not forget to add this import about from components slash about oh there we go and let's not forget to import our style sheet this time okay let's go in here and do the about not a whole lot to do in here as well you guys just really some text and and that's about it so let's give this a class name about and in here we'll give it a class name of i want to say container we'll just give this a container so the image let's go ahead and load a load this dude in right here i think his name's like john or something whatever i called him john john doe so let's pull him in at the top import we'll just say john from images and let's do our image tag john with an alt of john that way react does not complain to us there he is no wrong one there he is okay john's looking a little big we'll go ahead and style him in a moment let's move on uh underneath this image tag let's give it a div class name column two we'll just kind of assume that first one is kind of column one so let's give this about and we'll give this span and this is we're going to use class name of line that we created in our in our index dot css here we'll close this in our index.css here at the bottom and that's that little block we're going to use right there so that's what that is if you're wondering about that so after we have the line we're going to do a couple p tags they're not gonna have any classes um you can type in whatever you'd like here i have some text that i'm gonna copy over um right there you can type anything you'd like boom and this one right here and we'll probably style these the same way we did with the hero which is the nth since we're not giving any any class names to those so under this let's do under this p tag we'll do a button and we do need to give the button a class name button and this one's just going to say what i say explore more okay how's that looking looks good just needs some styling really yeah that's it let's style this thing so in here we're going to go um was the first one we used just about i believe so about the background let's give it a kind of like a real off-white margin we want this to be auto so it remains in the middle i'll give it some padding um eight rim on top one rim zero one rim on the left i'll give it a width of a hundred percent ah let's do the container now i'll give it a width of let's do 12 40 pixels of course margin auto let's display this as a grid i'm going to put it side by side i like to mix these in here every now and then just to so i don't forget them especially if you're starting off you're new it's good to keep practicing what you've just learned it always helps just reinforcing repetition you guys style this uh h2 we're gonna put three ram and let's do our finally our column two since we're displaying it as a grid well we'll just with this one flex so it kind of lays vertically i will say justify content center align items center um let's give it some padding we'll give it three ram all the way around okay that should be good let's style our um our p tags so we just have two i believe nope i want to refresh that throwing a fit about that looking funky on mobile that's okay but yeah um this is one p tag at the top here these three and this is our next p tag so let's go ahead and say about column two p and then we can also say the burst of type let's give a margin to rim top and bottom left and right and about come to um p and child four and this is actually out of column two this is going to be our fourth so one two three four and we'll give it a font size we're making this one a little bit bigger um two one point six ram font style of italic and we'll give it a font weight of 600. we still need to give you some media craze you guys don't forget about that but that's looking pretty similar pretty pretty pretty similar maybe a little bit bigger let's do 1.8 cool cool all right um let's give our budget our button here just a little margin um margin some margin top one round okay let's do some media queries so it doesn't look too funky have a look so that's looking pretty good right here okay not bad i have the hover effect of course um they're not going anywhere because we haven't set that up yet not bad not bad okay let's do the media queries i'm really going to couple here let me get some room we'll do a media screen and let's say max with 940 pixels okay let's do our about container um and what we want to do here is a great time to call it of of one okay that way it's going to be stacked on top of each other there we go still a little bit wide here but that's the correct layout um about container let's do a width of 100 and shrink this image down we'll give it padding we might want a little padding with um let's do i'm just gonna see here yeah i don't like that let's do this let's give it a width of okay looking a little bit better there and let's do green padding that might be it you guys yeah there we go we're just taking away some of the padding that we used um we're at past our break point here that's looking okay looking all right okay um actually let's give this button just a little bit about let's see um margin bottom looks okay let's move on what is next uh testimonials here okay so give some little cards here that we're going to create we're going to do that from scratch with our three people here are three images let's do our testimonials so let's create a our components here well say testimonials and let's do our testimonials.css and we're going to type rfce whoops oh we didn't save this as a let's see rename yes there we go perfect and there you go and sometimes it'll automatically import it at the top so notice we didn't have to type that in um let's close these let's add our style sheet tested css okay so let's go ahead and import our our three images here and that is going to be import let's see here user one two and three as a who they're gonna be let's just say user1 from images user1.jpg and let's copy this down a couple times let's change that to two two three and three okay for our div here here for our dip let's give this a class name of testimonials and here we'll give this div here and create a container and let's start with a heading the heading that's going to say testimonials under here we use that span again with a class name of line we can get that little green line underneath there now we're going to do a div class name content and we're gonna have three cards um say class name card and in here we're gonna have image source and that's going to be user one with an alt user one we're gonna have a p tag another p tag and this one is going to have a span in it and a third third p tag what i'm going to do i'm gonna copy this down three more times or sorry two more times so we have a total of three let's go ahead and i'm just gonna copy this here you can type whatever you like it's gonna be our first one there there we go and and type in his name could be inside our span and his title inside this p tag here now for miss carol harper her name oops and it's going here oops copy this over as well who's this last dude snow snow junior all right managing director of pbw global let's do this global cool so it's going to look quite messy right now since nothing is styled there we go let's go ahead and make it look nice so changes user three user two just like we called them up here okay got our pictures displaying properly let's do our let's do our css now it's a little bit smaller so you can see it says have some room and give this width of a hundred percent thinner with a width of i think we're doing 1240 pixels uh a margin nope not bottom just margin so we're gonna put two values in here we're gonna do four ram on top and bottom and auto on the left and right so it's centered not bad heading and four ram top and bottom zero okay the style are h2 well h2 we're gonna give it a font size of three rim style geez and let's align this geez enter okay now we're going to do our content for h2 there we go we made the max with 1240 we haven't done any midi queries yet so that's why it looks funky like that so our container and content and we're going to display this not inline but grid and again we'll do our grid i'm 10 minute columns of weighted three and um on mobile it's going to shrink down to just one we're going to give it a grid grid gap of 20 pixels and a margin jeez margin uh four rim on the top and bottom and zero on the left and right clean that up a bit so let's style our cards now that everything is yep that's perfect let's style our cards let's give it a border of one pixel solid and we'll give it that kind of gold grayish dark gray color nice little rounded edges let's give it a little box shadow um zero pixels 10 pixels and we'll give it rgb to rgb [Music] 0.2 and padding that looks all right pretty good we're getting there let's fix up these images i think we made them a little circle and pulled them up a little bit more image to do that we're going to give a border barter border radius of 50 pixels that's going to round it out margin top negative 2 ram okay looking better looking better let's do our p tag p and let's i'm just gonna give it i don't think we have this one defined um so that works okay perfect yeah just lighten it up a little bit not let's do a font size a little bit there we go there's a little bit smaller margin 12 pixels great now let's do our span we'll color that and that should be pretty pretty well lit until we do our media queries um we'll use our variable let's do primary color it should be that green font size one rim and font weight of 700. let's do our media queries here just have a few oh my gosh so we're doing 940 pixels we'll do uh testimonials we'll do our container first give it a width of 100 then change our grid template columns to one and change our card a little bit let's see how that looks there we go looking pretty pretty much identical solid uh what is our next next component here oh it's almost the last one so it's our demo which i have actually added in a little video as you can see down here so let's go ahead and let's do that um a new new file we're just going to say um demo dot js and we'll give that a demo dot css okay that's it all right oh i have e with our style sheet okay and in our app.css should import automatically sometimes sometimes not that's okay all right everything's looking good no errors close these testimonials and for our demo let's get started um class name class name of video we'll do [Music] sorry div last name we'll give this a container and we'll probably just break this up into two columns here so we're gonna have one div class name column one and i'm gonna copy this down this one's gonna be column two inside of column one we're gonna have a few p tags and a button so we'll copy these down and let's do a button with the class class name button it says get your free financial analysis okay then we have here i'm going to copy this one philosophy there we go and over here we're going to import a video i already have the the source here so what i'm going to do we're going to use a iframe so iframe let's give it a width of 500 [Music] whoops with we'll see 70 height of 320 and we have our source here okay and let's just do a i'm going to add in some the title here [Music] you see youtube video player and this i'm just going to copy in and allow full screen um we'll close it off so allow full screen lets you obviously change it to full screen and this is just some some allows in here that i copied over from youtube all right so that should be it um see how it looks should look terrible don't have any styling let's take care of that right now so we'll go into demo dot css let's start off with demo say margin we'll do five five ram auto the padding rim with 100 demo let's do our container and we're doing 1240 pixels trying to keep it consistent again we're going to display this grid with two columns okay let's do column one padding one rim and display knight in line blanks we're going to put it as on and let's style some of our p tags here we'll do it the same way with the child selectors so demo on one e with and one i believe let's do a font size of let's do 1.8 ram and a font style metallic and we'll do the second one here that style size let's do three rim there we go let's see go back and have a look at that just a moment why do i keep doing that 1.2 ram and let's give it a margin but okay but no changes so let's go in here oh i caught it video well i'll subtract we are using a video it's going to be demo there you go perfect let's style we move this video over so it's in the middle do that let's say column two and we'll just say it margin auto okay just moved it over ever so slightly cool cool all right so let's go ahead and do some media queries on that one um make it a little bit nicer media screen next with again we are keeping it consistent and let's do the demo container we're going to change this to a max width of 100 percent grid template columns we want to be one fraction let's give it a good grab 30 pixels give it a little padding there let's style her our iframe we'll say width 100 oh looking good a little semicolon down in there somewhere there it is all right i think that's it what's the next one i think it's just the footer yeah and the footer is super basic so let's go ahead and create we'll go ahead and create our footer component so let's go over here and under souls for not source components footer.js and twitter.css we'll do our raf ce got our style sheet linked there you go if you press enter before you close it off it imports it at the top what it is there okay so just home about this monolith demo this little bottom part here let's go in and actually on our full screen we're using any i wonder if we were using any um i used any icons here react icons i don't think so so let's go ahead and give this the class name of footer all right and we'll give a class name container we'll do ul in here and we'll give these class name item and some drift uh i'm gonna leave it blank for now you guys home and copy this down if you oh back that up we want to copy the list item down as well too so about testimonials and demo there we go cool let's go ahead and do let's do uh we'll do that bottom line here so underneath the ul inside the container give it a class name of let's say bottom let's use this span class name of our line again oops underneath this 2020 we'll say execute inc all rights reserved uh okay cool let's do some some uh styling here okay so footer width of 100 background color let's do that black this color is going to be let's do that padding three ram one rim left and right for our container max width display these as flex and we'll put them in the middle and give it a little bit of padding and change this color here let's do the um let's do the hover effect in here as well we're not going to copy doors type it out it's super short uh we did the padding bottom and we did 12 pixels i think the border bottom was uh three and i think we did the yellow maybe cool let's uh let's just style that just a tad bottom give it padding top three three round oops grab this one pull it over see how it's looking that's not too bad let's put a little uh margin under here and this is for our span that we did i'm just going to put in the margin bottom here so we have to go back to the index.css and i only want that to be applied right here do we need to do any media queries on this footer i don't think so yeah it looks great perfect um oh that's a problem so you notice our header here looks fine as we're over the hero banner with it transparent however when we scroll down it's just a white over white and that's not to work so let's go ahead and let's close these footer and we'll go into navbar and mobile is fine so we'll just copy that and we'll put it here at the bottom um there we go all right um also these links aren't working so let's when we click about we want it to scroll down to the about in testimonials we want wanted to take us to the testimonial section so let's do that um let's go into the also i wonder if it closes okay it doesn't take anywhere let's do this let's go into navbar and we're gonna have to give some some ids here so we'll start with the about we're going to give this an id of about demo id oops demo and then uh do the footer nor the hero just testimonials so id testimonials then let's go into our navbar and instead of the slash home the slash is fine this will have about and testimonials and to our demo section so reload that there you go it works but our nav menu is not closing that's something we need to fix make sure it's working here perfect okay let's fix that um we're gonna use state we're gonna use state to fix that so let's go into our nav bar here and under the uh under the set click we're gonna just do a closed mobile mobile menu or under the handle click we'll do a close say const we'll say close um close menu and give a little arrow function and this is gonna set click and we're gonna give it to false as the default value and let's go down so on our on our list item or on our yeah on our list item here we want it to say um let's see here when are let's let's leave our atac here our a tag we're going to say on click close menu and let's copy this down here let's see if that works oh that one always worked let's go to demo and there we go and about perfect that is working properly all right you guys i think that pretty well sums up the tutorial here it's a basic react application um minimal features here there's plenty of room to to add some extra features and functionalities to this site but i think that looks pretty good for this video so thanks for watching guys i really appreciate it if you learned something or if you thought it was cool like i would really appreciate a like and and consider subscribing to my channel i'm going to be putting out some more content just like this one and react and also you guys if you have any um questions or comments or any advice i'd love to hear from you down in the comments below i'm always looking to to improve here on my videos and give you guys some some content that you're interested in so uh thanks for watching and i will see you guys on the next one

Channel: Code Commerce

Views: 503

Keywords:

Id: bms_e55PtmE

Length: 83min 21sec (5001 seconds)

Published: Fri Nov 05 2021