React Website Responsive Tutorial - Beginner React JS Project Using Hooks and Router

yo what is going on everyone so today i made another site with react and i'm gonna show you exactly how i did it so let's just go through the design really quick pretty standard like sas startup looking design but basically we got the nav menus up here which we're going to be utilizing uh react router and also hooks mainly for this design and then pretty much standard stuff here and then also the uh the pages they do navigate in this little cool card thing i'll show you later i actually put some more effort into the pages instead of just adding like an image but you can see that they switch back and forth and then let's just scroll down and look at the design so pretty much these right here they're components so basically this is the same exact thing i just reversed the positioning and then also the background i have it as a light background and then here again got another component right there and then here just a little some ui stuff i just wanted to add a little fancy i actually had to make this from scratch and check out my my ugly figma little concept i was going for and then it basically turned out to become this so not too shabby uh but definitely let me know your feedback if you don't like it in the comments but then again we have it another component and then i just utilized a footer here and this is the same one from the previous uh tutorial website that you saw except i did refactor some of the code and also like if um you click here i just add some more links so here just opens up to my youtube so again if you haven't subscribed go click it somewhere on my link or wherever you're watching this and go subscribe to that there's something i want to show you that it opens up links in another tab and the most important thing is that it is mobile responsive so let me go back to the top and then pretty much i will shrink everything so right now we're still not a tablet at least right here now we have the uh hamburger menu pop out and then let me go a little farther you can see what happens when it switches so now it goes it goes like this and then all the images these are svgs they go underneath so if you notice how before the they like switched but when i put on mobile i made it to where they just they all have to be text first and then and also the buttons widen out here and you can see and then also clean um cards right here pricing cards i also took off the hover effect so it's fixed there and then the footer obviously nice and clean here and then last but not least we'll click on the mobile menu boom i got a little different effect this time today but basically you know you click here got that little switch roo and then if i click on all of these they basically go to different pages and even though um the home logo icon there too and then one little trick i want to show you before we get into the code editors uh i told you these are components right so i literally could print infinite sections of these with just different texts so the way i did it was basically like let me go here let me just copy this like a million times right so like one two hit save if i go now to my site it's probably gonna go crazy let's see scroll all the way down let me go out farther i added i think was like six under so like under the here now you can see it's like all right so it should be i don't even know where i'm at i think this should be the last one and then these are the ones i just added so you can see if i'm scrolling really quickly i just added like infinite good put this on another page you can map through them so you don't have to put it like multiple times if it's all the same and then also the cool thing too one thing i want to show you is the way i have it is where all of these components or these uh these sections are within a data file to where these are just objects i have all this custom data that i can pass in so like for instance right now the background is false right so i have light bg so if i want to change this to true and i hit save it's going to turn white and then i can change the light text it says it's currently true i want it to become false and then the description i want that to become false and save it and then boom now you can see the entire thing change also like the svg if you want to change this like two and hit save it goes like this and now it's a different svg and it's that easy and that's simple and that's mainly the main concept of this design i'm going to show you and also in terms of the like way to do this and also i did refactor the nav bar so it's much cleaner when i shrink it so that it matches with the width too as well but that's basically what we're gonna work on today so let me just command z all this back to how it was and then without further ado let's hop into our code editor and let's get started coding alright so here i am on my terminal so go wherever you need to go to open up your terminal basically go ahead and let's type in npx and then space create react app and then let me call this uh let's do react website version two and let me just put yt for youtube just so i know you name whatever you want to and then go ahead and press enter all right once that finishes uploading go ahead and cd into the file you just named it so mine is react dash website dash v2 dash yt and if you uh before we do the yarn or npm i'm going to type in code and dot to open up vs code so if you don't have this installed just simply google search how to install or have code.work and then basically when you type it on your terminal it opens up the app so here we are on vs code and we could do is just go to our terminal but what's probably gonna happen is gonna ask me to add that emv file probably but basically if you have uh npm type in npm start but if you don't and you have yarn then obviously type in yarn so whatever your second line says type that in terminal and then basically press enter so it's going to say this thing for me if yours doesn't say this then don't worry about it you're good to go but i have to copy this text every time right click and uh let's do a new file and if you know way to make that go away let me know but um right now i'm just gonna do this and then save it so basically i just created dot env file and then type this in and then i could basically go here and just go and type it again so yarn start or you would be mpm start and this will load up the react application and here we go all right so here we got the react spinning logo so if you made that before you already know the drill so let me just resize my screen really quick all right so now we got vs code opened up and let's just start by cleaning out the src so let's go ahead and click on setup test worker i'ma hold shift and click on all three of these so logo servers and setup let me get rid of those index.css gotta get out of here deletes app.tests deletes let's go and now should have three files left and then let's go to index.js let's get rid of this stuff here and then let's get i'm just getting rid of strict mode for this video and then let's do this part service worker's gone the index.css is gone command save and i have the app prettier installed so if you're wondering like why is this doing this crazy magic where it saves and formats that's the extension over here which i'm sure if you've made it this far to react you probably heard of it but if not just download it now go into the app.js and let's go in let's get rid of everything here and let's do h1 the typical youtuber coding thing let's just say was uh save and it's going to give me here because i can get rid of the logo save this all right now we got it perfect all right so at that css let's just command a this and let's just put these stylings right now because uh this technically is like our global page i mean you could name your own css follow that but this is basically it and let's just set the box sizing to be border box let's do margin zero padding to be zero and then uh i got the font family pt sans and then comma sans serif so right now that uh font is right here so i don't have this imported in my um yes it looks like it just automatically worked by default i guess but we're actually gonna have to go and google fonts later we'll worry about that later because um i think i want the bolder version but anyways that's pretty much the setup there and then let's start ahead and uh let's create our components folder so right now let's go to src right click this and let's do a new folder i'm going to call this components and then inside the components i'm going to want a pages folder so let's do pages i messed that up must be a folder not just random so let's do components right click new folder pages and then inside of uh hover back over um the components and then right click then do new file and then let's just create uh let's do our nav bar first so navbar.js so this isn't this is not inside the pages there's nothing in pages just just components right now and then let's do uh right click again and let's do navbar.css and basically in the navbar.js let's just add in some code so if you watched the previous tutorial it's very very similar the difference is i refactored it and i added a bunch of other stuff but um before we do go to your extensions if you don't have this just type in um react snippets or es7 it should show right here this one ds z nate basically install this snippet um has like 1.6 million when i'm filming this and it's gonna save your life because basically here let me get rid of this real quick exit off here you can type in rfc e and then press enter and boom we have everything function export import and if you're you download it's like not working like yo what's going on literally just go make sure your vs code save and then just quit it and then restart it basically and then go back and it should work again and sometimes it randomly doesn't work even when it working it's so weird but um that's what i found but basically that's how i get it working and now pretty much here i just want to go ahead and let's just start creating the nav bar so let's go with the typical i'm going to close actually i want to get rid of these and make these fragments and then inside here i'm going to do dot nav bar press tab then press enter and then if you're if yours isn't auto completing then uh check and see if you have the right settings or just simply google search how to have i think it's react i mean it's pretty much you you'll have to research it if it's not already doing it but um mine automatically autocompletes and then now let's go to dot nav bar dash container and then we say dot again so creating another class called just container and press tab and let me command b like this a little bigger so now we have this line here and then let's go and let's create a link so now we're going to use react router so we're going to install that in the terminal just a second but let's just go ahead and type everything out first and then we can worry about that later but basically i'm just going to say link and ideally if you've never used the link before it's basically it's in replacing the a tag except it's utilizing react router instead and so i'm going to say link dot nav bar dash logo press tab and then inside of the link i'm going to just say lavish which is what i call this site i even spelled that right how to do it lavish like this and then inside of the link i want to have it's going to have a two path so instead of href and the a tag it's gonna say two so equals code slash and again if you've watched the previous video it's it's super similar there's a lot of little things i i refactored though so just know if you watched the previous website tutorial then you're like oh my coping is over and over well there's something that changed but um here let's go and go under this link tag and then basically press enter and then let's do dot menu dash icon press tab and then inside of here is pretty much we're going to create a function and this is the mobile menu so we're going to install the icons really quick so you can see this but basically i'm going to create a function that let me actually install it because it's not going to make sense if you're like just getting started so let's do command j or just open up your terminal vs code and then if you have mpm then here's react icons you would just copy this npm dash react icon but i have yarn so i'm going to say yarn add and then just say react dash icon just press enter and then mine's going to load up and then while while this is loading we can uh actually install react router once it gets done too so let me actually pull it up and show you guys real quick and here i'm on react router so basically if you have npm just copy this into your terminal npm install react rider dom i'm just going to say yarn add and then say react router dom and then press enter and once this loads i'm not too sure in line this one's going to take but pretty much what we're gonna do now is we're gonna have to go up to the top of the bar now up by the import and let's import the react router and also the uh icon so now let's do imports and i'm going to import curly braces i'm going to import link for this one because we're only using link and then from react router dom and then under here this is if you've never used react icons it's super simple but basically it's similar you just say import curly braces and then you want to import whatever icons that you want so we have quite a bit so let me just start off with the ones we're going to use so i'm going to say f a bars and then i need f a times and this is utilizing font awesome they're icons except i don't have to actually download it like final awesome i can just go in here and just type it in myself so react icons and then fun also has a slash of f a so if you're like yo what is going on pretty much like here you can just search react icons but if i want to type in um bars for instance it's gonna give me a bunch of other uh let's see if i can open this like other icons from other places so you got like material design bootstrap etc but here this is literally what it does you just copy this and that that's pretty much it and then uh you can search whatever icon you want as long as you import it and then basically let me close out my terminal we can just go down here to the actually let's import the um i import another one it's called md fingerprint so let me just update it here really quick so that's the first one so i'm gonna say imports curly braces capital m lowercase d and then just say finger print so this is what i use for the um here let me just show you really quick yeah so this after fa fingerprint but i use this one md so it's a different um place where this icon comes from so we're going to say from react dash icon md and then pretty much we're going to do this for now we're set we're good right now so underneath this link i'm just going gonna say opening tag and then pretty much just say md so whatever the uh the icon you imported so i'm gonna say finger print and then i'm gonna say class name to be equal to navbar icon so i misspelled that should be nav bar dash icon and then basically close it out with a slash and then we save this actually you know when i save this probably let's see if it loads up that's not the same one all right save this nothing is going to show up because we are currently not importing the nav bar into the app so let's go back to app and let's just straight up say um nav bar and then there's a shortcut if you just press enter it automatically imports it if that's not working for you do control space it should pop up there press enter boom and then close it out save it and let's see what's happening go back to navbar it's saying link in router so pretty much what i have to do now is um wrap this with router because router does not like this when you do this so what i have to do is pretty much just get rid of this this div and then just say router and those are the same or automatically autofit for me but pretty much i'm gonna have to click on the end of the router control space press enter and autobot imports it if it didn't well just type that line there let's save this and let's see if it loads up this time and now it's gonna say location of undefined so right now it's saying writer.js so it looks like i'm going to have to go under the navbar because i have the the path to a slash so i have to actually create that so let's just go here and just do switch and then let's create a route so this is essentially wherever the um you click it it's going to open up that so let's see if i need the component for it now right now it's going to say no so i have to import from router i'm going to say actually this should say browser router as router browser router space as router and then let's do switch and then let's do routes save it and boom now we got it going so now you can see if i zoom in it automatically imported this icon without doing anything but doing the terminal install so that's pretty cool there so let's go back to the nav bar and now what i want to do is actually let me write out this code for you so it makes sense and then we can actually add that stuff later so let me command b under the menu icon so we're inside this div we're going to do curly braces now so we're gonna add some javascript so pretty much i'm gonna use state and i'm gonna create a click so basically if i click and this is going to be the hamburger menu and then the x so whatever when you saw over here this thing right here this is what we're about to create is just this section so i'm gonna say use a ternary operator so it's like if else but it's short pretty much short of code so question mark and then if you click it it's true i want to display this icon right here and if it's not basically replay the fa bars and then i save this and nothing is going to compile because it's saying click is not here so let me zoom this back to normal so it's going to say click is not defined so what we need to do now is add state so if you've done hooks before you know use state pretty basic but pretty much function that bar underneath it i'm going to say cons and then the brackets and say click and then i want to be able to set the value to so i'm going to say set click and then we're going to set this equal to use state and i want the initial value to be false that way it's showcasing the bars aka the hamburger menu and then what we need to do now is create a function that whenever i click on it it's going to actually display it so i'm just call this handle click handle click and then i'm gonna set this equal to and arrow function and pretty much i'm just gonna set the click to the opposite value of click so it's almost like it's toggling it and then all you need to do is go to the the div where you have the menu icon and let's just say on click i want to equal curly braces and it's pretty much going to be whatever you name the function which we have here called handle click now we're almost done the last thing you do is go up to react up here import react do a comma curly brace and just say use state and then we save it and boom so now if i click it let me see what's going on zoom in let's command i'm going to do command shift c let me check my console and why in the world is it not all right so i realized that's why i'm going crazy because this automatically self closed so it shouldn't be like that this should be wrapped around a div so i'm closing div and now if i save it let me try it again all right now i'm going crazy now never mind we're good now so basically make sure that this is its own div little minor mistake but if you had it right you didn't typo like me you should look like this all right perfect all right so now let's move on to the actual menu so let's go and do ul now so we're creating our list items so basically here is going to be a little tricky because we don't have a css yet but let's say ul and let's just press tab so inside the ul i want to create the lis before i do that let me add a class so let's say class name and i'm going to say equal to curly braces it's going to be click again and if click is true i want to toggle nav dash menu active so this essentially will be a css class that shows the actual css menu whenever we click it and if that's not true i want nav dash menu and let me assume this little it's hard to see so inside now we're inside the ul i'm going to say li now and then we'll say dot nav dash item and then press tab so now we have this li created and then inside the other i'm going to put the link tag i'm going to say link and then i can press or i'm going to say dot nav dash links press tab so now we have this and then inside of the link i just want to put the word home and then for the path i want you want to set equal so two equals quotes slash and then let's see save this really quick and let's see what we got for now perfect all right so we've got the home going and then we pretty much can copy and paste this so let's just go and copy and paste that to save some time so go and just the allies with the link and then go underneath the li here paste and then we can update this to say services services here services there class names are still the same and then let's go under here again so let's save this really quick perfect make that caps one sec and then let me tab in here paste this again this is going to be just products so products slash products and then underneath there this is where we're going to create a button component so my previous video i had it whereas an li and i made like a custom css but this time i actually refactored it to where it's pretty much the component now so basically let's just write this out one by one so it makes sense because there's a lot of code here but uh i'm gonna say li dot nav dash btn and then inside of this li i'm going to put some javascript code here so curly braces and then we're going to create another stay with button and pretty much we're going to say button let me go up really quick and then do ternary so the question mark and if button is true i'm gonna put parentheses and then let me press enter you can see this then i'm gonna say link dots btn-link and let me press tab so now we have this link created and then inside of this we're going to put our button component which we haven't created yet but we will eventually i'm going to say button capitalize and then press tab and then inside i'm just going to say sign up now here we're going to add a style to it and then you'll see where this makes sense eventually so button style it's equal to btn dash dash outline so this is kind of like a class but we're going to add essentially classes onto the button component to where we can just put this on anywhere on our web page that will showcase that specific style so this is the one i have for this section and then go outside of the parentheses but we're still inside the blue curly brace do a colon and then do the parentheses this time so basically if it's not true i want to display link dot btn dash link so that same class and then press enter and then this time i'm going to say button so capitalize tab it and then we're going to say sign up except on this one we're going to add a button style of btn-out and let me say this so it like goes on another page really quick so go underneath still we're still inside this button and then we're going to say button size equal to btn-dab so this is a a mobile version so that it expands the width of the actual uh page and then let's just save this really quick and you're gonna have a bunch of errors but basically have these two in here and then for the we have another function oh i actually have to add the two so go back to your top link say two equals quotes slash sign dash up and then if i enter there i put the wrong hold up let me put the single quotes and then just copy this to path because it's the same exact thing on the uh other link and save this so right now you're probably confused what's going on but basically we have to create a button component which we have not and then we're gonna have to create state two so pretty much it's going to showcase the button on the desktop but then once we shrink the screen it's going to change it out basically you'll see that in just a second but let's go ahead and create this button component while we're here so src new file button.js and then we're going to do new file here and just say button dot css so in the button.js if you follow the previous tutorial then you already know but i did add an additional code to it so it's not the exact same but basically you can type in imr if you have the snippets import react from react and then also import dot slash button that's css so now underneath this i'm going to say cons styles equal to and what we're doing here is we're essentially setting classes that we can apply and styles and colors whatever you want to call it to the button to where it doesn't matter where it is on the page we can pretty much update it without having to go into the css and add custom classes so b b10 primary and then we're going to do btn outline so in case you're like what's going on basically like this one it's uh it doesn't have an outline but then um if i scroll it out like this this has btn outline class applied to it this one doesn't so let's go back here and then uh underneath this we're going to say cons sizes so that equal to btn-medium so that's medium size i mean these are just preferences but btn-large and let's do btn-mobile so this is a new feature i've it and then also we can do btn dash dash wide so some of the stuff you might not use but it's just showing you like how you can utilize it and then the last thing i added this new one color and you can play around with this this is just a starter to show you like what i did but feel free to go you know have fun with this this is just like uh showing you what you can do in some alternative ways but like red and then green that doesn't have a bunch of stuff now pretty much now we have to export this button so let's do export cons button i'm going to set that equal to parentheses and then curly braces and then inside here we have to pass in all our values that we're going to eventually target so for now i'm going to say children is one the type is to on click is the third one but in style so let me say this if it stays there and there we have button size and then button color so now i save it it automatically drops my line and then outside of the actually this should have been a parenthesis so make sure you put that back and then i'm gonna say equals two so it's arrow function and then curly braces here now inside these curly braces what we're gonna do is going to return the actual value you want so we're going to say return a button with the class name so let's put inside the button first and then inside of the button i want to pass in the children so basically children meaning whatever words letters we put inside so like this would be like sign up or you know get started like here basically these words that's the children that we're passing in so whatever you put it will update accordingly and i'll go inside of the button now and let's add a class name equal to curly braces and then put the back tick so it's at the top left next to the number one on your keyboard say btn and then dollar sign curly braces check button style so we're gonna actually add these eventually i'll show you in a second but this is the way you can make it to where it's pretty much you can update this button properties wherever you want so then check button size the next one and then dollars let's see yeah dollar sign again curly brace check button color and then outside of this double curly brace here we're still inside the button i'm going to add on click equals to on click and then just say type equal to type so now we're not done yet go above the return but inside that curly brace and then now we have to create these essentially functions to showcase the specific style we want so i'm going to say cons check buttons style which is what we named it right here i'm going to set this equal to styles which is what we have up here and then say dot includes button style which is the value we passed over here so basically what's happening is is going to see if the button that we created has a button style and if it is we're going to use a generic operator it's a question mark if it's true we have a specific style we've added then we just want to make sure that it uses that specific style so i'm going to type in button style now if there is no style you just type the regular button with nothing no styling added to it we're just going to say so does it go to style styles of the array of zero aka the first position in our styles right which is button primary so basically in short this code saying if you set a specific style like i want it to be button outline then it'll be button outline but if it nothing's there just be sure to put a button with no styling anywhere it automatically defaults back to the primary style which is the the non-outlined version right here and then this is pretty much the same for the rest of the two so let's just copy this and then change this from check button style to change check button size go here same thing button size and then do button size here and then we just change this one to sizes and now you can see everything fills out here and then rinse and repeat one more time check button let's do color button color here button color here and then last one would be to be colored and now i can save this and then i can go into button css and let me show you how i added these class so basically the root file which is going to be our primary some say dash primary color it is going to be a standard white i just have it there just in case i want to easily update the primary code i can do that so let's say btn let's add padding of 8 pixels by 20 pixels border dash radius to be 4 pixels outline will be none border will be none cursor pointer and then white space to be no wrap so that's the standard on all the button classes are going to have it and the btn-primary is basically going to say background color equal to var of dash dash primary which is the white that we set above then we have color which equals your hashtag two four two four two four which is the like darkish black color and i want it to be a border of one pixel solid for dash dash primary and then btn outline so dot btn-outline it's equal to background dash color and i want to be transparent so that there's no background color to be hashtag fff padding to be 8 pixels by 20 pixels and then border one pixel solid i should just copy this link here and as the transition to be all 0.3 s e's dash out and then the next step is the sizing so this is when we add the sizing classes so basically it's going to say that btn-media padding equal to 80 pixels by 20 pixels and then font size is going to be 18 pixels and then we do btn-large and it's going to say higher padding so padding to be 12 pixels by 26 pixels and then font size to be 20 pixels and then we have btm mode which is a new one added that wasn't part of the previous tutorial i believe and basically this is a different style so basically text align center and this only will apply on the mobile so border radius for pixels i want the width to span 80 percent and then let's do text decoration to be none let's do font size to be 1.5 ram one ram is equivalent to essentially 16 so we could just say this to be like 24 pixels same thing and then let's do background dash color to be transparent let's do color to be hashtag ffff padding to be pixels by 20 pixels bordered to be one pixel solid fff and then last thing would be transition all s e's dash out and then the additional ones so this is bt and y just add this one basically it's just btn-y just to add additional sizes so padding will be 12 pixels by 64 pixels font size will be 20 pixels these are the hover effects i use so i did btn btn-large colon hover and then btn-medium colon hover and then btn-mobile colon hover and basically you can play around with this code but it just whenever you hover over these specific sizes you'll get a specific outlook so this one 0.3s ease dash out let's do background to be hashtag fff and then color to be 242424 and let's do btn dash dash wide colon hover so there's a different style i have for this one color is going to be white background color is going to be f 0 0 9 4 6. it's like a reddish looking and then transition to be 0.2 seconds ease dash out we can put on the front of this semicolon save that and then these last ones here so these are basically the colors so we can do one more btn-link so btn-link and i think i added this on the um actually i think we should we could be good if you should be fine without this like yeah so let's just do uh about blue and basically this is going to make the background color of the button to hashtag 276 afb i want the color of it to be white and then border i don't want it to have a border so border to be none and let me just copy and paste this oh what happened command c two three and then four so instead of here i'm going to say this to be red change this color to f 0 0 9 4 6. keep those the same let's change this one to green yeah see actually let's do primary primary background color is going to be two four two four two four and then we can have uh let's do underneath this one before we target the last one primary hover i want it to be let me just copy this really quick background color to be fff and then the color of the text would be 2 4 2 242424 and then the last one is green and you can play around with this but basically this is just an additional color added but you can add up to whatever you want and name it whatever you want and that's here and if you want to do like dot green hover change the background color to like dot green colon hover you can just say that here too and this is pretty much completes the button component you know it was a bunch of css but i just want to show you like what's the purpose of all the stuff we have here in like these classes and then now when i go back to our nav bar it's currently saying that button is not defined so let's go and actually import that so if we already have a button here i can just go to the bottom end of it on this online 41 from me but basically any anywhere yet button control space press enter and then now we have it import if not just type this line here save it and now it's saying right here let's see saying button is not defined on navbar.js in line 40. so let's check 40 button so now what we need to do here is add some state so basically go back to the top same concept let's create cons and we're going to say button comma now we got to set the button into something so say equal to use state and let's set the value to true and now what i'm going to do here is i'm going to create another function underneath this one so we're going to do two different functions but let's do let's just add this one for now this is pretty much the close the mobile menu which will be whenever you click on i'm going to show you really quick like whenever you click something it basically turns it off basically so you don't have it there so we'll just add this one here for now i'll just say cons close mobile menu equal to parentheses set click to be false and we're going to implement that in a second but for now let's do the show button section now so this function essentially will you see here show the button depending on what screen size you are on and then boom basically like that so here i'm going to say const show button equal to arrow function and then here when i say if the window dot inner width is less than or equal to 960 which is the is in pixel basically which is the breaking point i put i want to set the button value to be false so the opposite of what it's currently at else i want to set the button to true and then outside of the show button we're going to have to actually call the function so that it actually works so let's say window dot add event listener i'm going to say resize so basically when i resize the screen i want to trigger the show button function we created up here and now it's going to say cameras all button.css and what's going on here so let's command b let's go back to our button js let's import that it's imported oh it's because i have it on the pages so let's drag this out to here so why is it is it on the pages hold on modular found cannot resolve dot buttons css all right let me see really quick what's going on oh it's in the component all right so yeah the button.js should be in the components folder so now let me see so now let me go back to the nav bar let me check yeah i have over there so what's probably gonna happen is i have to re-import this so let's go back down to our button and then i'm just going to command space it enter save it now all right so basically what you need to do is just change it because it was in the wrong path so make sure yours has this and now we have it like this so pretty much right now nothing's going to show because we don't have the navbar css and i don't want to bore you again like last time where we spent like a year uh typing out the css code so i'm just going to copy in my code here and then i'm gonna show you where you can get access to this code so let's just say save this and when i save it it's going to show up so let me actually import it really quick and then i'm gonna show you how to get this code in case you're like yo what's happening so let's just import really quick and then i'll show you where i got the um the code all right so let me save it just to make sure everything's working all right yeah so everything's working all right so the only difference is the um yeah we're going to add that but now if you want to get the code i'll include the github in the bio below so just go down to the github and then you can have access to that code so here's the github and this is the starter file too so if you wanted the images just go and just go over here and then download the zip file and you'll have all the images that we have basically so actually let me let's do that first and then we can actually copy the um the what's it called the nav bar css so you should go ahead and go to code and download the zip file i already have my images open so what i'm going to do is actually let me drag it over to vs code real quick and then i can show you what's going to go on so i'm just going to drag my images folder over to the public and then just copy the folder now we've got images and then now let's show me let me show you how you got the actual navbar suggest code now so just go into starter branch and change it to master and then once this decides to load up i'll show you exactly what to do go to the src click on components go into navbar.css click on raw and then just go and type command a or basically copy all of this and then command c and then let me close this out and then go to the navbar cs and then copy in this code and if you want to look at the code feel free but basically i added some different um code to where it's much cleaner when you actually uh resize it but right now you can see this is what everything is looking like right here right this is not what we want to happen so let's go to navbar.js and we're going to utilize something that this is like i guess you can say like the easiest way to see but basically let me see if i can show you because right now alright so this is the first thing i want to do is actually change the button um color because you can't see what's going on so let's go down to our button all right and i want to have let me see so it looks like it's not let me see if i'm missing something btn that's the one thing i forgot i actually let's go back to button.css i thought i didn't need that class but it looks like we need it so go here and actually just go at the bottom i guess you could go and add the class btn-link curly braces and let's say display to be flex justify content center align item center text decoration none and let's do padding of 8 pixels by 16 pixels heights 100 percent and then with 100 all right so let's see right now i haven't changed anything yet but we'll you'll see what that does in a second let's go back to network.js and basically let me see why the um current beats in that i misspell the outline let me just make sure that could have been a super basic mistake yeah color primary should be there yeah so let's check my um console right now see why in the world it's not working command shift j or command shift c let's open this wire and let me hover over the btn and it's saying right now btn is adding primary to it so why is it doing that so right now i have btn outline but it's adding this random primary class that i don't need so let's go back to js and let's see what happened here also this is the mistake i should have the button color it shouldn't target the color should be no because that's what's messing up my stuff so now my go now there we go perfect all right so now it looks how it should look all right so that's perfect now so quick little debugging and that's what it looks like right here all right so now let's command b this back let's go to navbar.js and then what i want to do is actually uh i want to show you what happens right so right now this whole show button function we just created with the resize button when you resize it you see how it disappears and you can't really see the icon right now because it's dark but eventually i'll show you how to change it but right now i'll show you we'll stay on this for a second right now it showcases like this but what happens when i refresh the page you can't see it actually so let me see refresh the page so right now when i refresh the page it's currently not doing what it did beforehand so i guess i'm sure if react had some updates but beforehand what happened basically it kept re-rendering but instead let's just add this in case you do have this issue but my previous tutorial i showcased it basically but basically we're going to use use effect so that only renders one time i'm going to pass in the parentheses and then i'm just going to have show button call it here and then pass in the empty array and then we just gotta go to the top and import use effect so it might be that or it's probably because my colors you can't even see it one second that could be a possible issue too but we'll go back and let's change the icon colors for right now and then we'll actually implement this close mode menu button as well but right now i want to show you how to actually um change the icon colors using contact api so essentially in short that we're going to be able to pass data to pretty much everything that's wrapped around the provider so if you haven't used context bi before it's like a short easy way to say you can pass in properties pretty much anywhere as long as you have it wrapped around so we're going to do is go to top say import icon contacts from react dash icon slash lib all right where do i going right yeah and what we're going to do now is going to do we have to wrap the entire application with this so i'm going to go here and say icon context dot provider set this value equal to double curly braces color colon and then ff for white and then we're going to need to do is close this out and then what's going to happen is it's going to showcase the closing text so command x this and then drop it all the way to the bottom of your last div and basically paste it in there and we see this what happens is we basically add this essentially you think of it's like a global style where it's one color white so now it's white here and i cleaned it like this but i'm being about a boom now you can see that right there and now let's go and update this mobile menu function we have here so basically close mobile menu i want to add this to our link here so this first link inside of the tag say on click equal to close mobile menu so this is the nav bar link with the lavish here and i'm gonna do is actually let me me save it really quick just to show you what happens so like if i click here then i click on this see how nothing happens like nothing closes it right it's just there but then when i click on the lavish icon we just added the function close mode menu to see how it changes the uh state and basically closes it out for us which is pretty cool and you wouldn't notice that unless you actually have that there so now all we need to do is add this to the rest of the links so for instance i want to add this to let's see where's that the home link the services link and the products link and then also on the button link so i save this now we can test it out but i mean do it there right there and then last but not least it looks like the sign up isn't doing it let me see if i add it in the right place yeah add in the wrong spot my bad it should be on the second one the second link the basically the other one after the colon so save it so now your code should look like like this and now if i check it it should do it there all right awesome perfect so now that's everything's working here so i'm gonna scroll up and there's another let's see yeah this is the class where the active part we have that there so this basically this right line right here when i click it showcases it and then goes back like that and that is looking good here there's just let me see there's one little thing i want to update really quick so let me check my um btncss just to make sure because it looks like right now my my styling isn't applying to my button properly so i want to make sure i have everything set up to where it actually should be there so let's see put install button size and let's check the there button stop on the size button color all right so i realized the one issue why it's not working is i forgot to change this to say color and then this one needs to say sizes all right so a little typo but that's part of development and now boom okay now it looks perfect here and then looks perfect here let me just scroll this out really quick so pretty much here's a navbar basically done with this and then that's basically it so now let's start creating the actual home section component you can call it the hero section but technically it's um more than that because we're using on other parts of the page but let's go ahead and create the hero so let me go over to our components right click this hit new file and let's just say hero section dot js now you can call this whatever you want to but i mean i'll just stick with this for now and then say hero hero section dot css and let's go over to hero section.js and let's do rfce and then press enter now let's go inside this div and then let's get rid of this so let's add our jsx in here so let's start off with actually let's import our button component first so import button from dot slash button and then let's import our link from react writer dom so import link from react writer dom and then let's import the uh css to so imports codes dot slash hero section dot css all right let me see that really quick and then let's go inside of this fragment and then basically i want to it should be privacy so should be like this and then i want to make a div i'm going to say div and then i have a custom class name so basically you'll see a lot of this is using the data file which we'll end up making eventually but basically actually on this yeah so i'm going to say class name i'm set equal to curly braces and then what's going to be is if this has a light background so light bg let me use turning operators and why is this i have no idea how to get rid of this hopefully you can see what i'm saying so light pg turning operator i'm gonna set this equal to the class of home underscore underscore hero dash section which will add our css eventually and if that's true else i want to toggle the home underscore underscore hero dash section and then space dark bg let me save this really quick actually let me put this on the second line here and then let me close this out and then have that div here so for now let me just put test for now and let me explain what happened so pretty much we're gonna add our custom css and i'm gonna go through it with you the first section just because i don't think there's many tutorials where people show how they created this sort of setup if you don't care then you can just copy the code but i'm gonna go through it for this video and basically we're gonna add actually let's add this up here so it makes sense so let's go into hero section let's add our curly braces and then these are all the properties that we're going to pass into the component so that way we can pretty much copy and paste it all across the website and just update the values on the data file whenever you like so here i want to add in light background so light bg so if it's a light it's true i want it to be white or whatever like light white and then if not i want it to be the darkest black we had and then i have top line which is going to be that little heading we have then i'm going to say light text and then we have light capital t text dsc description and then we have headline and then we're gonna have description of whatever we put in here and then let's see i'm gonna have button label and then also the image the alt tag and then image start so the image start is basically this whether it's on the left or the right side and all those products you just added are all of this characteristics here so whatever the word here says whatever these say etc so let me go over here and let's start editing the actual jsx and then afterwards we'll create the um the css so right here inside this div i'm going to create a container so i'm going to say dot container press tab and press enter now within this container i'm going to say dot row dot home underscore underscore hero dash row press tab now this is the current class name for this now within this actual uh thing right here i'm gonna add a style so i technically could have um let's just add this in really for now just because uh it's just so much easier in terms of tutorial set you can go back and refactor this into a class but i just want to show you the concept what i did this is another alternative but this isn't essentially best practices but let me just show you the concept so pretty much here i put a in inline style here saying display flex and then we can actually go later at the end and update this if you want to let's say flex direction and this is pretty much saying image start and if it's equal to start then i'm going to say i want to toggle all right what's happening all right let me go back command b and so basically if image that start is saying equal to start i want to toggle the flex to be row reverse which essentially rep it switches the positioning of the image else i want it to be row so that's the one i have here and then let's go outside this div and this basically allows it to wear the image again like i said earlier it it switches the positioning so it's either going to start meaning this is starting and then it's not starting and then inside this div here what we're going to do is say dot call so this might get a little crazy because it's like there's so many different divs in here but just bear with me and then inside this div i'm gonna have the wrapping for the text so dot home underscore underscore hero dash text dash wrapper press tab and then here i'm going to have dot top dash line so that was a thing you saw above earlier which is what we have here top line and basically i'm gonna pass it in curly braces and say top line so now we have that here so now it highlights it and then outside this div i'm gonna say h1 and then i'm press tab because i want to add in uh inside this h1 i'm going to say headline so it's curly braces here so now you can see we have this one now inside the h1 i'll add a class name i'm gonna set this equal to curly braces and they want to say if light text is true then just have the class heading else colon so that i will have heading dark and now if you're trying to get the pattern basically we're just doing ternaries for all of these so i'm gonna say p now press tab then inside the p tag i'm gonna say description curly braces and now in the p i want to add the class name equals to curly braces now i'm gonna say light text description so esc for short and if that one is true i want to toggle home under underscore hero dash sub title else i'm going to toggle home underscore underscore hero dash sub title space dark so essentially changes it from light to dark text now under the p tag we're going to add our first link tag so this is going to say link and then in the link i want to make the two path equals to just sign dash up now in here i'm going to create the button component now so button press tab now inside the button i want this to be button label so now you can see we have majority of everything highlighted we're just missing the image and the alt so we'll add that eventually so i'll go for the button and i want to add a button size which remember from our button component i want this to be btn-wide and then have button color equals to i want to make this blue so now save this nothing's going to happen because we haven't import anywhere but let's just keep it open for now so now outside of the link tag we're almost done actually let me make sure i have everything properly set so we have another div here so this is the text wrapper and then we have the column and then now outside of that i created another column so just make sure you're under link there's two divs here so that's the call up here so underneath that second one i'm going to say dot call again now inside this div i'm going to say dots home underscore underscore hero dash img dash wrapper press tab and then inside here is we're going to pass in our image i'm going to say img dot home underscore underscore hero dash image self closing and then for the src i want it to be just src curly braces and then for the orange one to be alts so now if i save this we should have everything here filled out and actually for src i put image my bad so change this to image doesn't really matter as long as you have it in this box position and looks like we have our hero section pretty much done so now we need to actually add the css so you can see what's going on but before i do that i want to create the data file because if i don't you're just not going to be able to see everything so pretty much let's go and go over to pages right click this and then click on new folder and then let's call this folder home page now inside the pages folder we have the home page folder and then i want to right click home page folder and then i want to say data.js and then also i want to right click this and say home.js so right now in the home i want to essentially do the rfce and then i want to return so let's put the fragments here i want to showcase the hero section and then let's just do the first uh and i'm gonna say pass in so say spreading all the data so home obj one and then curls it out and then let's go to the hero section control space so it imports automatically and then i'm going to import curly braces the home obj1 which i'll show you what we're about to create in just a second from quotes dot slash data so this is essentially going to be the object with all of the properties we're going to pass in on data so let's go to data now and then just say exports cons home obj1 equals two so let's just show for object one and then let's go and fill in all the properties that we just created so let's say light bg i wanna set this value to false so i want it to be a dark background i want the light text to be true so i'm going to have light text i want the light text description i want that to be true so meeting with the light text description for the top line which was our top heading i want this to be exclusive access and then for the headline i want this to say unlimited transactions with zero fees and then under that i'm gonna say description and i'm gonna say get access to our exclusive diamond card that allows you to send unlimited transactions without getting charged any fees if you're probably wondering when i get this copy i i just made it up myself and that's the button label let's just call it get started so that's what i want the button to say then i want the image starts to be an empty string because i don't want it to be starting i want the text first i want the image to be if you imported it from the github it should be images slash svg-1.svg and then i have alts basically have credits card now i save this here and then i go to home and then i save home here and then i'm going to go to app and then i want to pass in exact and say components equals to home and that's the imports home so let's just say imports home from and it's going to be course dot slash components folder then i gotta go into the pages folder then i got target home page folder and then i got target home so now if i click here on the i was on a different slash so basically make sure on the normal slash here if you go over now you can see this is what everything looks like so basically the object the data that we just passed in is all of this stuff showing on the screen so right now you can see the light background if i were to change this to true it basically let me see if it makes sense it's not going to show anything actually because there's no css let's actually change this to you know one two three four five whatever now you can see you have the number up here so this is literally what we just added mine is the css so let's just go and add the css now and then show you guys actually how i made this too since i don't think there's many tutorials showing how to make this design at least that i've seen let's go to hero section css now and let's have some fun with this section so this one's not too big but let's just target uh see dot home underscore underscore hero dash section let's set the color to white and then the padding to 160 pixels by zero so let's actually get this smaller command b yeah make it a little a little smaller just going to see a little bit what's going on and next i'm going to target home underscore underscore hero dash row i'm going to say align items to be center and then let's do dot row i'm going to say display flex margin dash rights to be minus 15 pixels margin dash bottom to be minus 15 pixels margin dash left to be 15 pixels and then it looks like i missed about this here and then let's say flex dash wrap to be wrap here and line content say stretch and actually let me comment this out for a night now because you can't really see what's going on here we go and then let's do dot calls or the columns i want this to be margin dash bottom to be 15 pixels padding dash right to be 15 pixels pane dash left to be 15 pixels and then let's do flex to b1 max with to be 50 percent and flex basis to be 50 percent so now we got a little movement going on and i know the little shortcut if you just did padding 0 15 you could also do that as well but i did it so you can actually see like what what design i think as far as like css is actually happening and now let's do dot home underscore underscore hero dash text dash wrapper and then set max width to be 540 pixels i want the padding on the top to be zero and then the padding on the bottom to be 60 pixels and then let's go under this text wrapper and let's say top line so this is the exclusive access text i'm going to say color set this equal to red f00 946 font size to be 16 pixels line heights i want this to be 16 pixels let's say font weights to be 700 letter spacing i want it to be 1.4 pixels let's do text that's transform i want that to say uppercase and then margin dash bottom to be 16 pixels so now you can see we have some styling on the top line i call the top line you can literally call whatever you want to and then say dot heading now set a margin bottom to be 24 pixels font size to be 48 pixels line heights i want that to be 1.1 font weights i want it to be 600 and then the color i want to be hashtag f7 f8 a and right now you're like yo what is going on so right now this is actually let me see i have dot dark now and then i'm going to have color i want this to be hashtag one c two two three seven and then i have a dot dark bg this is going to say background dash color i want that to say hashtag 1c2237 so now you can see that you can see the actual color text now and then let me uncomment this up here now so you can see what's happening so there we go here and then under the dark background i want to have the subtitle dot home underscore underscore hero dash sub title max with to be 440 pixels margin dash bottle to be 35 pixels font size i want that to say 18 pixels and then line heights i want it to say 24 pixels so now we got a little bit nicer looking here now let's do dots home ownership underscore hero dash image dash wrapper and let's say the max width to be five five five pixels and then let's do dot home launcher underscore hero dash image let's say max with to be 95 margin dash top to be zero and let's do margin dash rights to be zero as well and then margin dash left to be 10 pixels and then padding dash reds to be zero so now we got the nice clean looking image and this also could just be margin and top first one and then it's right and then bottom so essentially there's no bottom right now so you can just say zero here and then left would be 10 pixels and they would essentially the same thing so nothing happened here so yeah and then let's do uh image now so just say img i'm gonna say border to b0 max with i want it to be a hundred percent vertical line just say middle and then display inline dash block just keep it there and now let's target the uh media queries now so at media screen and say max dash width to be 991 pixels and again this would be dependent on your container and your break point let's say i want the padding dash rights to be 30 pixels and the padding dash left to be 30 pixels so it's technically in uh the mobile screen right now and then let's do let's just copy this again so let me go under let's change the width to uh 768 pixels was that here let's change this class to home underscore underscore hero text wrapper and let's just do a padding so erase most of this dash bottom to be 65 pixels and then i want the dot call to say max dash width of a hundred percent and then flex bases to be a hundred percent so right now if i zoom this out this is what a current site looks like nothing else is here and then i zoom in let me drag this out here you can see it and i can see this is what it currently looks like so nice mobile looking and pretty much good on the css and the uh html i mean css and the uh jsx for this one so now let's go back to home page let's go to data and let's just add some more now i'm just going to shred a copy my um alternative ones in my code so you can go ahead and go to github and copy this too if you want to or you could just straight up copy and paste um actually let me see x export here so again just go to github and go to the home page data folder and then just get the data file here you can copy this into your thing or you can just copy the what you already have here and just customize yourself so i'm gonna save this now and then all i'm gonna do here is just straight up copy and paste this down so i have four now and i'm going to say i want to say 2 and let me see if i um so let's start with 3 actually so i want to say 3 here and then two and then let's do four so now he's gotta copy these into the uh top so copy it here let me just comma copy that and change that to two and then just copy this one here and let's just do three save that now and when i scroll you can see we just pretty much created like probably 80 of site just there just from straight up component don't have to do anything and you can see the hover effects nice and clean so i want to do i want to add the pricing and then also the footer so let's actually let's go over here and let me just add the footer in for now because i've already made a whole like step-by-step tutorial with the footer so for this sake i'm just going to copy css and the um here let me show you really quick so just create a new file or let's do a new folder in the pages let's just say footer dot http footer and then right click and say new file i'm going to say footer.js and then also new file footer.css so i could go in here one by one and type in every single thing but i've already done that my previous tutorial and it's literally gonna take like probably 30 minutes for me to do that again so if you really want me to show you exactly how i did it step by step then i'll i'll link the previous website so you can show me um or see me doing it uh exactly code by code or line by line but for this sake for this video the main focus was this like component section so i want to show you that so instead just go to the github and basically copy this footage let me show you really quick in case you're lost so just go back to the github link go to the master file and then go to src go to components go to pages go to footer then go to footer.js and then click on raw and then command a command see this and then go in the code now i'm going to talk about the code really quick and just paste this in so if you want to see again like i said the entire like code line by line i did in my previous tutorial so i'll just save you guys some time in case you're watching this as a part two so the main difference here from part one or the previous design was that i imported react icons and basically instead of using fun awesome i just have them here so i imported facebook instagram youtube twitter linkedin and then i also printed the um the logo here and then the same stuff still the exact same as the previous video so all the footer stuff is the exact same so if this is your first tool you're watching then definitely go back to that if you want to see me code this out like line by line so it makes more sense but basically that's the jsx there and then when we go to the css it's basically the same exact stuff too so let me see go back go to footer css and the reason why i'm copying this because this isn't really react i guess besides i mean if you want to say the rack icons you can say so just go to the css copy that then paste that in here and then i did i think i'm not sure if i did i'm pretty sure i went line by line two on the um the footer css in the previous tutorial too so again if you want to see everything that line by line then just go check out the um those the video in the description and let me see what happened here let's refresh really quick okay yeah so right now nothing's showing up so i'm gonna go now to the go over to app.js now and underneath the switch i'm just gonna pass in the footer component that we just had save it and should load up at the bottom all right so it's nice and clean so again this is basic html css style but uh just with react and jsx so again if you want to see how like all this stuff works line by line just go back to the previous tutorial and i have in the timeline like exactly where it starts so if you want to check that out but again if you want me to make a separate video too i can too but this is you can just read the code i'm pretty sure you'll have it but the main part was um to show you this section here now you can reuse this so now let's finish up and let's add in the uh pricing component so that's something that isn't in my previous video i made this one brand new and i'll actually code this one out because this one's i don't have any videos showing how i did it let's go to components right click this and click on new file i'm going to say pricing.js and then also right-click components new file and let's just say pricing.css so here let's go over and let's pretty much utilize the same thing rfce and then inside of this i want to say dot pricing underscore underscore section press tab and this is copying right now i don't know why it's doing that and then here let's do dot pricing underscore underscore wrapper and then let's do h1 dots pricing underscore underscore heading and then let's just say pricing here and now underneath the h1 let's say dot pricing underscore container and then i have a link so link press tab and let me control space so i can import this set the two equal to slash sign dash up and then also i want the class name of this to be pricing underscore container dash card now in the link i'm going to say dot pricing owners underscore container dash card info press tab and then in here i'm going to say dots icon now underneath that i'm going to pass in this icon from react so f a capital f i r e slash close it out and this is essentially uh react icon here now this is the control space to import this and then under here i'm gonna say h3 is gonna be starter and then we have h4 is going to be dollar sign 8.99 and then we're going to say p so per month now under here i'm passing ul let's say dots pricing underscore underscore container dash features and then here i'm gonna say li to be 100 transactions next outliers you can say two percents cash back then the last live is going to say ten thousand dollar limit now under the ul i'm just going to go underneath this and we're basically going to add the button component now so let's say button so this is how it's reusable so you can pretty much have it anywhere you want and then command or control space to import it and then let's do size equals to btn dash let's see btn-wide and then i want the button color button color equal to primary so inside here i want to just say choose plan save that now outside of oh i'm going crazy outside this button i'm just going to have the closing div and then the closing link tag and then underneath this link tag i'm going to say pretty much the exact same thing except we're just going to change like the logo and the text and everything so i'm just going to say copy this here and then paste it and then here we can change this icon to uh bs x diamond fill so import that let's see if it did it doesn't look like it's importing it properly make sure it doesn't look like it imported right so i'm just going to go and add this link here so i'm saying imports bs xd diamond fill from react dash icon slash bs so it's a different um thing from fun awesome and then here we can pretty much change up the uh stuff let's just say gold here price let's just put um 29.99 per month uh how many transactions we want one thousand let's do 2.5 and let's do a hundred thousand limits and then we just basically copy this again this one wasn't too bad paste it change this one to i think diamond price let's do 99.99 per month unlimited uh five percent cashback and let's say under here on limit is bending and then here i want this to be uh gi crystallize and i don't think that imported it so yeah i have to go up and put that again so let's go imports curly braces gi crystal from react icon slash g i and then i need to import uh the icon contacts let's do imports curly braces icon context from react dash icon slash lib now let me just double check all of my code make sure we are good and now let's add under let's go back to the top and let's just say icon context dot provider and then i want to just close it out really quick so we can get the second piece but in here i want the value equal to two double curly braces i want to set the color for all the icons to be white and then i want to set the size to be uh 64. and i need the the coins to be around in quotes and also i didn't put the um icons in i have a class around it because when i try to do margin bottom on it directly it wasn't doing it so i had to add a div around the icon for that which we'll see in just a second but basically if i go here command b and i want to add this to our home page so go now to our left go to home page go to home data and in between the two underneath that say pricing enter and let's just add it there and now it's going to tell me uh let's i need to wrap so i must be missing some sort of um let me see if i missed type something yeah so i don't remember yes just make sure you have the closing tag around the bottom yeah christopher no yeah so make sure you have that there and then let's see is it working so now it works here and then i'm gonna go to the second third fourth one now we have uh our beautiful pricing cards all right just kidding we have to add css to that so let's go ahead and add some css so here nothing too crazy but uh let's do pricing underscore section padding to be 100 pixels by zero by 160 pixels display flex flex direction column and then under your justify content center and then background i want to be like a not white but like not dark either so you can't really tell right now but um here let's do dot pricing honest underscore container dash card let's say background i want to be a linear gradient 45 degrees with a hashtag of 06609 six a fb a hundred percent and a semicolon what happened right circle here and then let's do box shadow to be 0 6 pixels 20 pixels rgb a of 56 comma 125 comma 255 comma 0.2 and then width i want to be 280 pixels height i want to be 500 pixels text decoration to be none and then border dash radius to be 4 pixels and then under there we're going to have dots pricing under underscore container dash card i'm going to target the nth child so the second one i want to do transform scale to be 1.05 so this is just going to make the middle one a little bigger so right now you can't really see anything because i think i didn't import the um let's go back to pricing.js let's import dot slash pricing dot css so nothing yet yeah we haven't got that hard yet so let's go here and then let's do uh background to be hashtag two four two four two four and maybe because it's response isn't it i'm working right now okay let me just finish adding this first and then if i see anything wrong i don't know we'll see that should have actually worked so let's make sure pricing container card let's check the um let me see let me command shift c real quick make sure we're even targeting this let's see here yeah so showing it is showing up here so maybe i need to um let me change something really quick so let me go to sure dot slash pricing did i spill everything right let me just check real quick so i add a color red it's working okay so you just couldn't see everything because it was white i was like what's going on all right so we're pretty much good here let's go back here and then um let's add the under this and child let's do dot let's just copy this doesn't take um it'll take forever so yeah actually yeah let's do let's add under the end child to margin of zero 24 pixels and then here i'm going to say i'm just going to copy this class pricing card contain your card and then i want to have this say uh hover actually hover and then i want to say transform [Music] scale 1.06 and then transition to be all 0.3 s e's dash out and then last but not least i want to be hashtag 1c2237 not dollar sign let me change that and i might be missing a um no i should be working hold on make sure i spell everything right yes i just gotta add more closet to this first that's probably why it's not showing right now so it looks like we got the hover effect there pretty good pretty good all right so now under this i'm gonna do pricing container now so dot pricing honestly underscore container let me just bring this over here i'm gonna say display flex all right so now that makes more sense i was like what is going on all right here we go now i can see it alright so this is pretty much what we have so far so then you can see the scale stuff works right here awesome okay then we're going to say justify content center what happened and then we're going to say align items to be center here awesome cool and then we'll say dot pricing on an underscore wrapper display flex flex die direction column align items not content let's see a line items to be starts and then margin will be zero auto so just centers it and then underneath this let's do dot pricing underscore underscore heading say color equal to 1c2237 margin dash bottoms be 24 pixels let's do dots pricing underscore container dash card info display flex flex direction column height to be 500 pixels padding to be should be padding 24 pixels let's say align dash items to be center and then color will be hashtag fff so now we're making some progress okay and then let's do dot pricing honestly underscore con container dash card info h3 let's do margin bottom to be 5 pixels and then font size to be 24 pixels and then for the h4 i'm going to say dot pricing underscore underscore container dash card info for h24 will be font size of 40 pixels and then here we'll do let me just copy this again for the p tag let's say do um font size is 14 pixels margin dash bottom to be 24 pixels okay looking much better and let's just do that pricing underscoring score container dash features and let's just say margin 16 pixel 0 by 32 pixels list style to be none and then under here we'll just copy this again except i'm going to say li and then i just want the margin dash bottom to be 10 pixels and then let's do a dot let's say i actually have a toy yeah so let me make sure i have everything let's go here and just do display flex flex direction column let's do a line dash i am center and then last thing before the media queries you can say just icon will be margin of 24 pixels by zero and that's pretty much what we got going on right now and this isn't without the media query so the one thing is this middle blink i want to go back to pricing and i think it's should be the 1000 and it says btn size or beats in sizes wide color is primary so it should not be primary i think it should be um i'm going to put blue let me put blue real quick all right it looks much better all right so boom now we got that here and let's go back to the pricing css and now we just need to add the midi creators because right now when we shrink it it just does not do anything so here at media screen and will be max width of 960 pixels i'm going to say dot pricing underscore underscore container will be display flex flex direction column justify content center line items center with to be a hundred percent then under here when i say dot pricing under underscore container dash card with to be 90 and then we have dot pricing underscore underscore wrapper to be margin of 0 30 pixels display flex flex direction column align items center and then here let's go to the yeah let's do this dot pricing honestly underscore container dash card and child 2 transform scale 1 and then let's do background to be hashtag two four two four two four margin 24 pixels so nice little wider and the last one we're going to have the pricing on it's gonna underscore container dash card colon hover transform to be none so right now when i hover it doesn't scale it and looks nice and clean here all right so shrink it over boom check it out now you can basically place this component wherever you want so if i want to go here and go back to home.js and i want to add another one like to the top i don't know why you do this but you could you can go up here and basically it's right there so you could technically hang these custom cards into other components where you can like pass the data but since i'm only having it like right in this section and i'm not reusing it like like the other ones then i just have it like that but feel free to refactor the code and send me a link but let's get rid of this now and now the last thing i want to do because for the most part the main parts are done but the thing is whenever we uh like click on something like we don't have anything here so that's basically what i'm going to show you how i did that so pretty much you just go to pages new folder and then we'll do services first so say services and then within the services folder new file let's say data.js and then also new file in the service folder services.js and then we're literally just going to straight up copy the um the home page data because this is just filler stuff to just show you like how i did it so copy the data from home page back into services and then services just straight up copy um you pretty much copy the same thing to for home here the only difference is we're not going to use pricing on here actually yeah we can keep that never mind let's just get rid of like these real quick and i think i did i should do that for now and let's just say put that as one and then save that and now if i switch to services nothing happens and the reason is because i go to app.js and then we have to import this route so let's copy this down here change the path to services take off this exact word right here and then they can just say component services here and then all we need to do is actually import this at the top so if you wanted to make your life easy just copy home change this say services and then instead of saying home page slash home you just say services slash services paste it there and now we have it like this so now if i were to go out click on home and now services now you can see we have some sort of components here now you would obviously fill this up with whatever you make but since we're here let's just do it again for the products and then also the sign up and that way we can fix everything here so let's just say products products here and then sign up and then let's just say sign up here and then let's just go ahead and i'm holding alt shift the down arrow when we're copying it twice so i'm gonna go to services highlight that command d command d again let's change this to see products and then also for sign up so services again here let's just say sign up and then command b to save this and let's just create those new folders here so go to pages new folder let's just do products within the products folders new file products.js and then i'm just going to pass in the data for now data.js just copy and paste the exact stuff here so services copy and paste this and the one problem was this should be um services not home so yeah let's change that there and then we can get rid of these since we're not using them yeah and then for products same concept just say products see pro ducks and then just do it again except we can just say two just so you can see there's a difference and right now the same part is not available so let's make sure we have everything set up properly components pages products as products let's see server x data see react hero objects and pricing and app.js here it looks like product is fine is just saying sign up whatever okay let's go crazy all right now let's do it again new file folder sign up and then let's just new file here let's just say sign signup.js and then you file say data.js let's just copy this for now this is just filler just to show you like how i did anything but yeah let's copy this into sign up here too and then let's just do sign up and then sign up it should be a little case let me just leave yeah i'm gonna say this one to be three three here and let's get rid of this real quick and let's refresh it should be working i don't know why it's telling me it's not all right there we go so now when i go over this is currently the services page here products sign up so i think i have products and services the same so let me just change um products really quick let's just say four this time so now we got home services products why is it not updating services here products ah so let's change the data on products for i don't know why is it the same it should not say the same thing home object four home object four oh it's gonna have pricing up here okay let me touch this all right so now did i now save it what's going on here this should be here section four so why is it showing me doesn't make any sense hold on all right so now we're yeah we're actually acting so weird today what the heck so now services products sign up home and then more responsive everything looks like it's working now the one thing i did want to show you i showed you in the beginning that's like a little extra and you probably wouldn't know this but basically when you click on these uh links me go to footy really quick in order for you to import like a youtube link for instance like this you have to say two equals curly braces and then slash slash www.whatever your link is so this is what i did and then basically at the end go here click it and then it'll open up the new file here so again this is pretty much the uh website and if you want to see that um yeah let me go back you want to see how i made the photo like line by line then it's this video right here so i'll link that one in the description but uh this should be yeah it's pretty much the entire design for today so if you did enjoy this video saw some value in it then definitely go down below hit that subscribe button give this video a thumbs up comment down below what you think share this with your friends let me know and aside from that if you want to follow me on my coding journey where i'm literally just learning code and documenting it and building random things for you on my channel then definitely make sure you subscribe so you can follow me along that journey and aside from that i will see you in the next video peace

Channel: Brian Design

Views: 202,787

Rating: 4.9456868 out of 5

Keywords: react website, react website tutorial, beginner react js project, build a react website, how to make a react website, react website tutorial for beginners, react website project, react website from scratch, react website example, react website design, react website portfolio, react tutorial for beginners, react js, react js project, reactjs tutorial, react js full course, react js website, reactjs for beginners, react js project from scratch, react website responsive

Id: 3nLTB_E6XAM

Length: 120min 44sec (7244 seconds)

Published: Sat Aug 15 2020