React Website Tutorial From Scratch - Responsive React Js 18 & React Router 6 Project Tutorial

what up guys and welcome back to another react js project tutorial in this tutorial we are going to build and deploy a fully responsive modern react website using react 18 and react router 6. now before i walk you through the finished project let me tell you some of the things that you're going to learn throughout this video right so by the end of this video you should know how to use react 18 some of the best practices and all that you will know how to use react router 6 at least the basics for your routing you're also going to learn how to use react items okay for your icons that's the icon library that we are going to use or the package that we are going to use for our icons we are also going to create a lot of reusable components okay so throughout the project we will be creating a lot of components to make our lives easier since react is a component based library we are going to use the usted hook that is the only hook and that we are going to use in this project in my next project or in my next tutorial we will be using a lot more hooks they use context hook they use effect hook and all of that but for this project we are only going to use the use state hook so if you're a beginner i think this project is going to be very very helpful since we are not going to be doing a lot when it comes to hooks we are going to use css transitions and css keyframes for animation as well okay if we are going to animate some elements on the page so you're going to use transitions and animations you'll know how to customize your themes or customize your website using css variables so for the css we are going to use css variables so that one we don't repeat ourselves and also for easy customization okay so if you need any changes we can just change a value and all the elements that uses that variable are going to be affected so as you can see all as i'm going to show you in a minute this website is very modern and very beautiful and very responsive as well okay so this website is going to look good on mobile phones tablets and desktops so we are going to use media queries for responsiveness and alongside that we are going to use some css variables that helps when it comes to building responsive websites okay so we are talking of rams we are talking about percentages viewport heights viewport width and all that okay so those are the units that we are going to use for most elements okay also at the end of the video we are going to deploy our website to the fastest hosting or to the fastest service okay so that we can make our website available for everyone around the world all right so this and more things that you're going to learn in this tutorial now let me walk you through the finished project all right so this is the homepage of the project or this is the index of the project and as you can see we have a beautiful number at the top and then we have this header section we have more elements or more sections on this page which we are going to explore but notice this cool um this cool style that we have for the active link for the nav the active page is going to have the style for its link okay in the nav section which is really cool all right so let's go back to the home page so we can click on this logo or on the home to come to the home page and let's explore the home page okay so we have the nav of course we have this header section as well with this cool button over effects and then this text that we have on the left we have this image on the right and this cool background as well which we are going to create ourselves okay this is actually not an image we are going to create this ourselves okay so you are going to know how to do that let's go down and we have more sections okay we have this our programs section with this cards and this cool hover effect that we have here and notice the texture for the background as well which i think is really really cool so this card is going to be a reusable component that we are going to build and we are going to reuse it for most of the elements okay for a lot of the elements all right so here on the values section you can see we have this cover effect for the image on the left here and we have the same hover effects for the card as well which i think is really cool we have this frequently asked questions section as well okay so we can toggle the questions sorry the answers to the questions that we have okay and we are going to use the use date hook for this toggle scrolling down we have the testimonials section okay so we can see the testimonials of our happy clients and all that okay so this would be the testimonials of your clients okay and these are local data that we are going to use you're not going to fetch anything from an api or anything like that right and lastly we have the footer section okay down here okay so we have our socials as well instagram obviously stripping we have twitter we have facebook so this would be real links okay or real handles to your all right now let's explore the other pages as well so let's go to the about page okay so we have this for the about page and notice we have this cool hover effect for the images on the about page so we have our story section we have our vision with this cover effect for the image as well and then we have our vision our mission section sorry and lastly we have our photo so that's all for the about let's quickly move on to the gallery and notice the header for almost all the other sections which is going to be a reusable component that we are going to create almost all the sections have that okay so let's come back to the gallery section which there's not much to talk about we just have our images and then i'll put that okay so that's for our gallery section let's quickly move on to our plans and we have this card which is the reusable components that i talked about for the home page and we have our footer section as well let's quickly move on to the trainers and we have our trainers okay with this cover effect as well and their handles right so you would have the handles of your trainers for your gym right now let's move on to the last page which is the contacts page and we have the header the contacts so we have email um facebook messenger and then um whatsapp okay so for the whatsapp your visitors can just click on that link or now whatsapp icon and then your whatsapp is going to load okay so they can directly send you a message on whatsapp okay without having your number or anything like that okay so right here we can see right and then send a message which is really cool right this is the same number that i'm using that is why it's being read directly okay all right so let me close this back to the project we have meal as well so people don't have to select your email like this or anything like that before they message you okay so with this a link or this icon they can just directly click that and then your email is going to be populated okay and they can enter their subjects and then the message okay so they can enter your message and then send you that message and you're going to receive it in your mail okay whether being a gmail email a gmail yahoo or anything okay which is really cool and we have messenger as well which i don't have a facebook account so i wasn't able to test this but this should work okay you just i'm going to show you how to do it so you just add your link and you're going to be able to receive messages okay so they just click this and then they can all your visitors can directly message you on facebook messenger all right so those are the pages that we are going to create basically it's a single page website as you know for react we are going to hook everything in a single dip and you have this okay but now let me walk you through the responsiveness okay let's see how this website looks on tablet and mobile phones and this our website is going to look on tablet we have the cool hover effects as well in that case it's going to be a touch effect since we will be on tablet we have our frequently asked questions section okay we have that beautiful toggle we have our testimonials section everything is working perfectly we have our folder section which has a slightly different style now since we are on a tablet let's explore the other pages quickly so we have our about very very simple we have what else and notice the animation okay so we are going to use css keyframes for this animation that we have there for the nav menu so this is our gallery section or gallery page we have our plans we have whatever's trainers our trainers right and lastly we have our contacts okay so everything is working perfectly now let's see how this is going to look on a mobile phone and and this is how the contact page is going to look which is looking beautiful we have different style for the footer as you can see here everything is aligned perfectly let's check the other pages we have the trainers okay with this beautiful effect as well of course the photo is going to be a reusable component so it should look the same for all the pages let's move on to the plans okay everything is looking amazing we have the galleries we have um the about of course still having the cohort effect and then lastly we have the home page okay all right so that's what we are going to build and we have a lot to do so let's get started now as i said earlier we will be deploying our website and that means after building the website you will be uploading the website files to a server okay and make it available for everyone around the world so for that we are going to use hosting guide hosting is by far the best hosting provider right now and that is because they are very reliable and affordable as you can see here for three dollars and 50 cents per month you're going to have your website hosted right so here they have different options they have different plans that you can select so i prefer this plan okay i prefer this package as i'm going to be able to host 100 websites they give me 100 gigabytes of ssd storage i can have approximately 25 000 monthly visitors on my website they give me a free email okay so you can get maybe hello at your website.com and they're going to give you a free ssl as well okay and ssl is the lock that you usually have on your website okay making your websites secure they give you a free domain name as well which usually costs with other hosting providers so hosting actually gives you a lot of free stuff so that is what i am going to use and i have my affiliate link in the description so if you appreciate this tutorial you can use that and i may get a commission when you make a purchase okay and you're also going to get a discount so here i'm going to select the package that i want and hosting is very affordable so i'm going to go with this that is the 48 months i'm going to enter my email and i'm going to use paper okay so let me go straight ahead and submit i'll make my payment let's proceed and claim our domain okay so they are giving us a free domain let's proceed to claim it so your domain name is going to be your website's name all right so the domain name for this i'm going to say okay so this is going to be my domain name let me check to see if it is available and it is available okay so i'm going to claim it and we are going to create our websites ourselves so we are going to escape this step alright so now that we are done purchasing our hosting and claiming our domain name let's proceed to building the website all right now let's go ahead and create a react app okay so you can do this on your desktop or wherever you want on your computer right but i'm in my tutorial certain main folder and this way i'm going to create my project as you can see i have my previous tutorial maybe the react portfolio website and i'm going to create a new folder called react website one okay and this way our project is going to leave our app is going to leave so right away i'm going to right click and then open this with vs code that's a text editor i'm going to use let me zoom in a little bit so that you see what's happening all right let me open my terminal and let me click this okay so we can run npm sorry npx create react app dot slash okay so we are creating a react app in our current directory which is uh rw1 okay all right so i'm going to hit enter and react up is going to be created for us by the way make sure you have node.js installed before you run npx create react app okay npx and npm which we are going to use to um install other packages that's the npm node package my manager we are going to use that to install other packages that we are going to use so make sure you have node installed which comes with um npm and npx all right so right away as you can see everything is installed our react app has been installed we have our load modules with all the packages and let's actually proceed and install the other packages or the dependencies that we are going to need okay so we are going to use react icons so we can right away install react icons let me actually open my packet.json and as you can see we have and as you can see here in the dependencies we have react react dom and all that okay so let's install other dependencies that we're going to need let me actually clear this and install react icons okay you can add that shape so that you make um we make sure it is actually included in the dependencies okay so as you can see we have react icons and also we are going to use react router so when pm install react router dom okay that is safe just to make sure it is actually included in the dependencies okay we could install both in one line but yeah all right let me clear this and i'm going to run npm start to start our development server let me close this package.json all right so as you can see we have our running react app all right now in our projects here we have to clean up some files that we have here okay some of these files you are not going to need and some we need but we have to clean the code inside and all that okay so to know waste time i'm actually going to delete everything in the public folder we only need the index file and here to in the source folder i'm going to clean up everything okay so i'm going to delete sorry i'm going to delete every file in the source folder as well let's do everything from scratch okay so when we come back to our app we have a big error beautiful all right so in our public folder we are going to create our index html that is the only html file that we need for this whole project okay so we are going to create index.html all right and with emit which comes with vs code it's an extension that is print stored in vs code i'm going to do doc tab okay and i'm going to have this boilerplate and for the title i'm just going to say responsive modern website or react website and we are going to have our div okay our route the which our app is going to live in okay we are going to our whole app is going to live in this root dev okay this day with the id of root all right now i'm going to come back to this html file um we are going to link our font but for now i can just close it okay now in the source folder in this source folder we're going to have some sub folders and some other files and all that so here is where we are going to do all of our work okay now i'm going to bring in the images that we are going to use so in here as you can see i have a lot of images and i'm going to leave a link to this in the description okay basically this is going to be part of the starter file right or the startup project so i'm going to leave this in the description and i'm going to bring this in my source folder okay so inside the source we have this images folder okay now in the source folder i'm going to create some more photos first you're going to have the pages folder which is going to have all the pages for the projects or for the app in the source as well we are going to have a ui folder which is going to have the some components okay some components like the card components and all that and finally we're going to have another folder called components okay in the source folder directly we should have some files as well the main one is going to be the index.js which is where we are going to link our whole app to that root dip okay so right here we can import react come on react dom from import so this should be import we are going to import reactdom from react dom slash client okay let's actually we are going to import our app component as well which we don't have yet okay so let's create that right now i'm going to create my app node.jsx okay and with this extension which is reacts where is it oh my god this right here es7 plus reacts redux react native snippets okay with this extension i can do rafce and then enter okay and i'm going to have this functional components all right i can remove the react import we don't need that there's going to be a root component and we are going to link that up okay to our index html or to that root david m in the index atml so we are going to create a constant here called root and that is going to be equal to react dom dot creates root okay so we are going to use this create root method and then link that root div okay so i'm going to use the query selector here and we give that an id of fruits so we do that and down here we can call the render method on that root okay and then our app component okay which we have we have to import so import up from so now when we come back let me refresh this and we have our app okay we're just coming from this div that we have here okay if i should change this to react website i'm doing some typos but that's no problem and come back we have it right now before i close this index.js let's create a css file for it okay if it is going to hold some general stars for our whole app all right so in our source we are going to create come on we are going to create index let me save this so index.css all right it's going to be directly in the source folder right so we should link that to the index js okay so we are going to import index.css and we are done with our whole index.js file okay so we can close it let's close our index.css tool for now okay and maybe close the app.jsx as well in the pages folder okay we are going to have all the components for the different pages right and let's actually have each of them each of the pages in a folder okay so we are going to have about page okay we are going to create a jsx file and then um a css file for it okay so all the pages are going to have the jsx file with a css file as well okay so in the pages as well we are going to create contacts so a contacts folder let's create i'm doing this in alphabetical order okay so we are going to have our gallery as well and we are going to have home or the index page we are going to have the not found okay so in case i actually didn't show you that okay so for a wrong path or a wrong route we are going to send them to this not found page okay which is going to have a button to bring them back to the home page it's going to have the nav as well the nav with the navbar as well right so we have the note found we have plans so come on that should be so we have the plans page we have the trainers page here is the last one right now in the components folder we are going to create the different components as we work along the projects but for now let's create all the files that we need for the pages okay right so in the about let's create our about jsx and also you know what let's directly run array fce so let's have a component here so we have um a functional component using the arrow function and then we have this about okay and let's create a css file for it as well so about those css each of the pages are going to have their own css okay so we can directly import that so import about the css okay let me have some space here beautiful so we can close these two pages or these two files in our contacts let's do same so contact dot jsx alright fce we have our function components and we are going to create our css so contact.css right let me save let me come back here and import contacts and the css okay let's close these two as well come to the gallery and lastly our trainers right so we are going to create trainers.js all right fce here i'm going to remove the react imports and let's create the css so trainers.css and let's make sure that is linked so we are going to import trainers.css save and that is all okay so we can close these two as well beautiful let me minimize this let me actually minimize the whole pages right all right now if you come to our page of course we just have this react website text which is coming from the app components right our main components right here in the app in the app.jsx okay this right here all right and to make sure we have our pages working well i'm going to import all the components from the pages okay and have them here have them shown the um on the website okay we're actually going to use react router for the routing but for now let's actually import them okay so we can do let's bring in the home uh okay that doesn't seem to be working so i just have to import it manually okay so let's import our home components from let's go into our pages folder home folder and then the home dot jxx okay which has the home components now i'm just going to duplicate this and we're going to get the abouts inside the about folder we have the about jsx which has which has the about component we have contact inside the contact folder we have the contact gsx we have not found so our error page basically so now found inside our not found folder we have node found or jsx all right so i'm going to remove this so we have all seven components or all seven pages here all right so let me actually just um have them here so we have the home component we have about and then we have nodes found okay to remove this and when we come back to the page we should have all those pages okay or all those components right so everything is working perfectly all right so let's proceed and start working on our route okay so we are going to first create our number it's going to be a reusable component on all the pages right and you know what before we do that i'm going to bring in this data.js um file okay i'm going to put that directly in the source folder okay so we have that here and this just has array of some objects okay so we have the links um array which is this which we are going to use in the now okay in the number when we get to the programs section on the homepage we are going to use this array of objects as well for the values to your so this is just some data that we are going to use for our project okay let me actually leave this opened let's come back to the object yes and as i said we are going to start working on our routes okay so let's create our number which is going to be a reusable component so here in our components folder let's create a file now jsx okay that's going to be our number let's create a css file for this as well number no css let's make sure that it's linked to this so import nava css all right so i'm going to do ifce here as well so that we have some a functional component okay our function components and our navbar is going to be inside a nav tag okay here is an html5 semantic tag and we are going to wrap all the elements inside the debit a class of container which is going to be a general class container and a specific on the class of nav and that's one that's called container okay so this is going to be specific to this now okay which is the nav container right now we are going to have our logo on the left and then um so we have the logo we have links and lastly we all have a button okay it is going to be the hamburger and then the close button that is going to show on mobile and then tablet devices right all right so first we have our logo right so let's actually make sure we import the logo okay there is an image inside our images folder as i showed you in the file in the file so let's import our logo from let's go into our images folder and get the logo.png okay that's the name i gave it so in an html file this would be inside a link so that we can click on it but here since we have or since we are using react router we are going to import link and nav link okay from react router dom react router dom okay the link is going to be used for the logo and then this is going to the nav link is going to be used for the the nav links itself okay and the reason why i'm using the nav links is because it comes with a prop that is active prop which you are going to use to detect which page we are on okay so that we can have a special style for that link okay now for the logo there's going to be inside the link tag and let's give this a class okay a class name of logo okay and this should be going to the home page okay this should bring us to the home page right and of course inside it we are going to have our logo so that is going to be an image of course and we are going to have our logo okay which is this which is this image right here and for the outs i'm just going to say nav logo all right so let's actually make sure this is the last import that the css file so that it it affects all the elements okay before it right so let's see what we have and nothing and that's because we don't have this number linked to our app okay so right away you know what i'm going to import a browser router okay so we are going to wrap our whole app component inside our browser router okay i'm going to import browser router i'm going to get the routes and then the route okay singular from the react router dome so instead of the div i'm going to have the comma this should be browser router so browser router okay and i'm going to import my navbar okay so um number and i have that imported right away which is cool okay as you can see here we have inside our components right and now let's come back and we have our logo okay so let's proceed or let's go back to our navbar after the logo as i said we are going to have our knob links so right away let's import that from the data js okay up here as you can see we have links we are exporting that as a named export that's the links array okay and we have the links right each of them has has the name that's the objects has the name and then the path to that page okay so we have the about with the about path and then all that right so let's go back into the number and import that data oh sorry that's the links from data um that's let's go back and then the data.js right okay so we're going to have that inside the uo or an added list and let's give this a class name of nav and that's one that's called links okay and inside it we are going to map through okay this array and show the links okay using this nav links that we are importing from the react router and dom okay so we are going to i'm going to use the map method since each of the elements okay each of these is an object we can right away um destructure them okay we can use object destructuring here okay so we can get the name and then the path okay which are the only two things that we need and also i'm going to get the index and for each iteration we are going to return we are going to return an li and the nav link okay which is going to be inside the li okay so the nav link is going to have a two okay which is the path right and we are getting that here okay we are destruction in that here so we can right away pass it in and the name of that link okay and we are getting that too so we can right away pass that in here as well inside the opening and closing tab all right and if we save that and then come back we have our links okay so we have home about gallery plans trainers and contacts in the order that we have in the array as you can see here okay beautiful now outside this as i said we are going to have a button okay we are going to have a button so and this button is only going to show on tablet setting mobile devices okay so i'm going to have a button and give that a class name i'm going to give that a class name of nav toggle btn okay inside this i'm going to have that button okay so i'm going to import or you can actually go to let's just search react like icons okay so you can go to this github and you can search any icon that you want okay so let's say bus and you can use this okay so you can just copy this and use that or anyone that you want okay you can use any one that you want so i'm going to use this one so i can just click on it and it is going to be copied to clipboard and i'm going to import that as a named import from the react icons package okay and make sure you have the initials okay that's g oh in this case okay and we're going to use this for the icon and we are going to use it like a component okay so just like this okay as a closing third component so we come back and we have that icon okay beautiful now we're actually going to use the state we are going to use the ustate hook to actually toggle that on mobile and then tablet devices and all that but for now let's actually style this okay let's start our number and then we'll come back to adding the functionalities okay adding the um active nav and all that okay so let's go into our nerve css and actually you know what let's go into our index.css okay we are going to have some general styles first before we start styling or start working on the navbar styles okay so let me put this come on so let me put this side by side all right now let's clean up our page okay so we have as you can see we have some padding that we don't want we have these bullets we have these underlines for the links and all that we don't want any of that okay so we can actually target every element and maybe target the before and then after pseudo elements as well okay so before and after of all elements we're targeting them as well and let's give them margin of zero same for the pattern i'm going to do the same for the border and then the outline as well okay let's give them zero and as you can see we have some clean up there and for the you know what let me uncomment this and then show you something real quick okay so see these bullets here i can i could actually target the list items okay the ul or the eyes okay and then set the list out to none but right here i'm going to say let's style for every element should be none okay and it's going to be removed right the underlines too i'm going to say text the decoration and i'm going to set that to be none as well all right now i'm going to set the box sizing for every element to be box border box okay and now i can uncomment this pattern and we have everything cleaned up okay this space is the logo that's why we have the space here okay something is actually there all right now as i said for easy customization we are going to use css variables okay so i'm going to set some rules variables here and this first one let me call it primary hue okay so this is how your name variables in css and i'm going to give this a value of 210 okay that's our primary hue we're going to use the hsl okay that's the color um format that we are going to use right and another um variable that i'm going to have is this which is going to have a value of 240 and that is going to be for the grid this is actually not great but buried me here you're going to understand what i'm doing um very soon okay so i'm going to have my first color that's the primary color so i'm going to call this color primary and as i said we are going to use h sl that's huge saturation lightness right and the first value which is going to be the hue is going to be the variable that i have up top raise the primary heal okay now um by three coats it should be only so we have the heel here okay and then the saturation is going to be 100 and the lightness is going to be 50 okay so let's save and just for you to see what is happening i'm going to target the body and then give the background oh the background is going to have the color of the color primary okay and that's how you use um variables on elements on your page okay so instead of me having a hex code or whatever here and then repeating that for all elements i can just have this variable okay with the hue also as a variable that i have up top right so if i change this here to a different value notice we have a different a difference color right this is very very handy for easy theme customization and all that okay so this this is the approach we are going to use okay nice now let's come back to this and let me remove this body here and i'm going to have some more um i'm going to have some more variables okay so instead of me wasting your time i'm just going to paste them in i'm just going to paste in all the root variables that i'm going to need all right let me make this bigger variables that we have here for the color setting we have some for the width of the container we are going to have a general container class as you saw in the navbar there's a general container class that is going to apply or we are going to put that on many sections of the page okay so that it helps center the website right so on large devices we are going to have the width of the main container or the general container to be 80 right and on mobile and then tablet devices we are going to set it to 90 okay so that is why i have this set as variables okay if you if you don't want these values you can just come up here when you get a source code and then you change it okay or as you are typing with me you just change them right we have this transition um as well so all 500 milliseconds is so we are going to make sure our transitions have a constant um effect okay so these are the values that we are going to use right all right so we can proceed and have some more general styles okay so let me just say general styles here all right i'm going to grab the body okay and let's actually change the font that we have here okay let's use monster it's that's my favorite font if you haven't noticed that already so let's go to google phones or just search let's go to phones.google.com rather and let's search montserrat okay that's what i'm going to use i'm going to click that and get the ones that i want okay so i'm going to grab from the light that's the 300 phones weights um the italics i don't want them so the regular um the medium the semi bold and the bold okay those are the only ones that i want and i'm just going to link or bring it in the html okay so i'm going to copy this link you can also import it if you want so you can just grab this from here and then import it in your css but i prefer the html route so i'm going to grab that come back to our html file so inside our public html i'm going to put that here okay let me leave a comment um and just say google fonts uh monster it okay that's the name of the phone and i'm going to paste that link i copied save and we are done with this html file perfect all right so we can use that font now that we have it can just close this we can use that font right here so the font family is going to be the montserrat font and just the backup sound serif okay save now and rephrase this and now as you can see our phones have changed okay now i'm going to set the color for the text to be the variable color grade 200 okay which is a variable we have up top let me maximize this so that you see it well okay so this is it and notice we are using a heal for all of them okay we are only changing the saturation and then the lightness for each of them okay that is why the values of each of these are going to be different okay since the saturation and the lightness are going to change if you don't know you can read more about hue saturation lightness we have rgb hex calls and all that okay but that's basically it okay now let's set the line height to be 1.7 okay so the text is going to have a line height of that i'm going to set the overflow x for the body to be heading and i'm going to set the background color to be let me just do background and i'm going to set that to be color gray 600 all right so now we have this beautiful okay let me make this yeah now let's give the general container class as i said and the width is going to be like container with lg okay which is 80 and i'm going to give it a max width of 1920 pixels and the margin of zero or two okay zero or two okay you can actually do margin in line of auto as well it's basically the same thing okay now let's okay now you can see the white part of the logo is actually showing right because we have the that background background now i'm going to target the headings okay so the h1 the h2s h3s the h4c and the h5s right and i'm going to give them a line height of 1.2 and give them a color of color gray 100 okay which is almost white right now let me target the h one itself or the h1 is alone come on h1 yeah and i'm going to give them a phone size of 2 or let's do it 3 ram i'm going to target the h2s and give them a font size of 2 ram okay so each ones are going to be 3 ram each tools 2 ram and also i'm going to target every link and give them the almost white color okay the light gray color that is color gray 100. let's save and now our links have this white color okay which is this color and it's almost white because of the lightness okay the lightness is almost 100 or very close to 100 percent right and the last time that we are going to have here is the image so every image is going to have a wreath or first let's display that block every image is going to be displayed block and let's set the object fit to be cover and they should have a hundred percent of the appearance with so we save and that is what we have okay so with this styles or with this general styles we can proceed to styling our number okay we're actually going to come back to this um file but for now let's style our number now for the number remember we put that inside a nav tag right that's the html5 semantic tag so we can just grab that and the height i'm going to give that five frame the width i'm going to come on so with is going to be 100 report width okay which is exactly 100 of the screen right of the browser of the window okay and the background um let's just do the primary background or the primary color so color primary and let's display and create okay the reason why i'm displaying great is because i want to place items to the center okay and that's going to put the direct child exactly in the middle okay which is in this case the nerve container which is the direct child of the nav attack right perfect so you don't see that right now but but with me here as we are styling is we are going to understand everything let me position this fixed so that um it doesn't move okay so that it doesn't move so that from the top is going to be zero and from the right is going to be zero as well let me give it a z index of 99 okay so that it sits on top of everything on the page perfect so now we can grab the nav container so now container that's another last one that's called container i'm going to set the height for that to be the 100 of the appearance height i'm going to display that flex let's save and see what we have and we have this which is not terrible but of course we have to work more on it and as i said unlike devices or large screens we don't need this icon okay or this button all right so i can right away display that num okay so let me actually do that here let me leave a comment saying only shows on medium and small screens so we can grab the nav um toggle bcn that's the class we gave it and then display is none okay we don't need that right now all right now let's continue with our container class that's enough container we are going to justify content to be space between and i'm going to align items as well to the center and position this relative let me target the logo okay it's too big so we give that a class of logo i'm going to give that a width of seven ram and that's what we have it is not centered well in the nav because of this okay because of this so let's target the we give this the ul okay then added list we give that a class of nav links yeah so let's target that so now links let's give that a display of flex and now we have this okay let's have some space between nope here let's have some space between the elements so a gap of 3.5 should be good perfect right what else um i'm going to align items to the center so now it's almost done okay now some of these elements are not showing because they are under this number okay since this um displayed flex that is why these elements are beneath it okay and we are almost done with another but as i said i'm going to have some active class and all that and you know what let me actually have some hover effects for the nav links okay so i'm going to target the nav links and get the anchor tags and that should be on hover right on hoover i want to change the color to be the secondary color okay which is yellow okay and it's working but i want this to be smooth okay so we are going to add that transition okay that transition variable so the transition is going to be the transition variable okay um you can give it a comma transition that's the variable name you can give it your own transition if you want but now it is smoother okay you don't need that but it looks cool all right now as i said the active link okay so the active link here we're going to use a prop okay from the nav link that we got from that we are getting from the react right at home right we are going to use a prop called is active and that is going to help us know the link or the route that we are on okay so that we can style the link differently right i don't know if that makes sense so let me first have those styles that we are going to use for the active link right so down here i'm going to have a class called active now i'm going to position that relative okay because i'm going to target the after studio element okay and position that absolute okay so the active now the game i'm going to target the after the content is going to be an empty um empty quote i'm going to display it block give it a wait of come on 1.2 ram um height of 1.2 ram as well i'm going to give it a primary background so that it matches but for now you know what let me give it a red background okay um let me position the up absolute okay i'm going to give it a left i'm going to calculate 50 50 minus half the width okay which is 0.61 right and i'm going to transform rotate 45 degrees and also give it a margin top of zero points in iran okay now you can't see anything on the page yet because none of these links have that active class okay or that active nav class right so let's go back to our nav bar component here now we are going to use that is active prop actually you know as let me just show you okay so the class name we are going to check to see which routes that we are on okay so that we can put the class that is the class that we just styled on that active route element it's active so there's going to be an arrow function and we are going to check if it's active okay it's true if so then we want to give it that class that we we have in our css okay that is active nav class right if not then it should be empty um codes so the link with the current route is going to have that active class right and all the other ones are going to have this empty class right so if you go back we have that on the about since we are on the about route okay like if i go back here it's going to be on the home if i come here it's going to be on the gallery it's going to be on the plants here since you're on the plans and we are currently on the trainers and all that okay now if i click the logo we should have it on the home since that link brings us home right here okay so that is what we are doing here perfect now i'm going to change this back to match the background of the nav so that we have that uniform style there okay so i'm going to change this to the primary color okay so color primary save and now we have it okay perfect all right so now we can actually proceed it and make this responsive okay this does not look good on tablet and mobile phones so let's proceed and have some media queries for that so right here i'm going to leave a comment uh media queries and it's going to be for medium and small screens okay this is the only media chorus that is going to apply for both medium and small screens all other ones are going to be different we're going to have separate ones okay for medium and in small screens but for this knob it's going to apply for both okay now let's say as media screen and max width okay let's do 1024 pixels okay so from this screen size or window size and below we should have these styles okay right to see what is happening i'm just going to target the now and then change the background to red just so we see the breakpoints and as you can see right here is the breakpoint okay so below here you're going to have the size for tablets and mobile phones right anything below this is going to be for tablets and mobile phones okay all right so i'm going to target the nav toggle btn and i'm going to bring that up okay i'm going to show that um let's display that inline block give it a background of transparent and font size of common font size of 4.8 ram let me change the color to big point as well so that it looks clickable okay so we have this right now i'm actually going to target the svg this is actually an svg right so i'm going to target the svg that's the icon and give it a color of the color light okay or the color gray 100 which is that almost white color which is color gray 100 so we see where we have the light gray or white color all right now let's grab the nav links okay let's position them absolute okay that is why the parent which is the nav container we initially positioned that relative okay so yeah let's give the top of 400 a right of zero and flex direction to be column okay this actually already displayed flex so here we are just changing the flex direction to be column okay we don't need this active class on the tablet and mobile phones so we're actually going to remove that but for now i'm going to remove the gap here as well and now we can remove that active uh medicine so let me set that to display of man beautiful all right um yeah that's that's all right okay so let's actually target the nav links okay so the li's rather inside the knob links okay let's give them heights of 4m a width of 100 and i'm actually going to give them a box shadow okay negative 2 ram for the exercises to run for the y axis five frame for the blade and it's going to be black with some alpha okay so 0.4 should be good box shadow good now we have some box shadow we don't have a background for it right now but we have a box shadow right there as you can see and let me actually target the links okay inside of it okay when these are rendered each of the nav links that we have are going to be anchor tags okay so we can right away target the anchor tags and let's give them some styles as well okay so we are going to give them a background color of color primary and i'm going to set the height to be 100 same for the width 100 as well and i'm going to display it flex align items to the center let's save and that's what we have let me give it some padding okay so a pattern of one rim for the um top five frame for the right one room for the bottom and then three room for the left okay and i think we have this before studio elements so yeah okay and the before so it's active that's actually the after right and now we don't have it okay so we are removing that as well and now this this is the styles that we have for our tablets okay so i'm actually going to add some animation and all that but for now let's actually be able to toggle this okay so initially this should be this shouldn't be showing but on click of this icon we should show it and we will have the close icon okay so that we can close this back okay so for that we are going to use the use state hook here in a nav component or number component all right so i'm going to import the usage hook right up top so import use state from react okay and in our component directly in our components let me destructure this okay usage returns exactly to um array elements or array which is only two elements the first one is going to be the state value so let me call this snap showing and the second element is going to be the state updating function okay so this function is what we are going to use to update this state okay so we are going to set that to the use date hook and initially this should be false okay the initial state should be false okay so the nav won't be showing initially we should have i'm actually going to use template literal for the class okay we're going to have a little bit of logic here so let's enter javascript mode and use the template literal okay so this nav link is going to be there so if the s now showing state is true okay if that is true then i want to show this nav menu okay so i'm going to have a class called show nav all right and if not okay if this state is false then i want to have hide nav instead okay so let's actually come back in the navbar css and have those two styles okay so we have show now we're just going to display flex okay and hide enough it's going to be display none that's the only thing that you're going to do hide now so this is display none and as i save as you can see this is gone okay because the state value is false okay so if it is false then we are hiding then now which is the ul okay if not then we are showing it using that display flex okay so if i should come back here and then change this to true or now should be showing okay but initially it should be false okay now to show it we are going to put an embedding list on this button okay to actually toggle this state okay so here on click of this button so i'm going to add that on click prop so on click i want to get the state updating function that is set is now showing and i'm just going to set the opposite of the state value okay that we currently have okay so it's now showing is going to be opposite of what we currently have okay so if we come back here we can now talk about this okay so initially it's going to be false but on click of this the opposite of false is going to be true so we are going to set it as true and then the class that is going to show the ul is going to kick him okay so we have that toggle now we should actually be able to change the icon as well okay so in here we are going to have a little bit of logic so let's enter javascript mode here and we are going to check if it's now showing is true if so then we should have the close okay if we are showing the nav then we should have the close icon instead if not then we should have the bar icon okay or the hamburger icon right so i don't think we actually have the close so i'm going to import that i'm going to duplicate this and import the i'm just going to write the name okay of the icon you can search on the react icons page and then get that that icon or any icon that you want okay so md outline close i think that is it and we can show that here okay md outline close okay so now we should be able to toggle this okay so now you notice we have this close icon showing okay so if this is not showing is true then we have the closed house we have the hamburger icon instead right so that is all for the responsive design for the navbar okay so let's actually reach out okay so we actually since we are mapping through this we should have a unique key and that is why i had the index but i forgot so that is why we have the error that if i refresh this we should have any errors right i'm going to maximize this and let's view this on an actual device render okay so on mobile that's what we have okay on tablets too it's going to work perfectly right i'm actually going to have some animation on this so let's actually do that right now so that we have some animation now for the animations i actually have a dedicated video on how to create um navbar animations like responsive nav bars and how to animate them and all that so i'm not going to waste time showing you how to create responsive number animations but i'm just going to paste that in so i'm just setting some keyframes here i'm targeting the li which i'm going to put the animation on right so i have the animation so the keyframe that i'm using for the animation is right here the duration the easing function and all that okay so this is very very simple i'm going to leave a link to that tutorial or to that video so that you check it out all right so with this code right here so from here so down here with this code let's see what we have okay so as you can see you have this cool effect okay now for this to even look cooler i'm going to target the parent of what we are trying to animate that is the li we are animating the li so the parent of those is going to be the ul and i'm going to add a perspective of 400 pixels i save and this now going to look a little 3d-ish okay and that's what we have here which is beautiful right perfect so we are done with our number okay now let's proceed to the other sections of the home page right so i can go ahead and close the number let me go to the home page and let's work on the other pages okay so we are going to treat all the other sections of the home page as component okay as different components and some of them are going to have some sub components inside of them so yeah so that's what we're going to do we're going to start with the header okay so this part this part right here this section right here that is going to be the header section and once again notice everything for the nerve is working okay just so we are sure okay if i click this we come to the home page right or the index page perfect so now let's get to the header so i'm going to create a header component so inside our components i'm going to have a header node.jsx now the css for this header is going to be inside the home.css okay i don't want to create too many i don't want to create too many css files for each of the components that we are going to have okay so this header section is going to have the css inside the home okay so all the components on the home page is going to have or they are going to have their css in the home.css okay if that makes sense all right so for the head.gsx i'm going to have my simple components and let's make sure we are importing that here okay in our home okay so we are importing that as well make sure you import that and now we should have our header it's not showing because of the because of this okay because of the number right but we are going to have some general stuff which is going to take care of that real soon i don't even know why i'm brushing to get started with the header section right but i think there's a lot more to do for the navbar okay let's take care of the routing as well all right now before you even um take care of the routine inside the app dot jsx let's go back into our components are in the nut bar okay and we are going to do one last thing so when we come to the medium and then small devices that is for the number you can see when we click any of these links the route changes but this doesn't close okay so that's what we are going to take care of and even here since we are depending on the previous stage okay we should use a function here instead right this should work as early the same but that's the best way to do it okay we get a previous state and then we return the opposite of the previous state okay so that's what we are doing here and let me just copy this one click and then paste it on the nav link okay so he's going to get our same prop don't click prop so since it will be showing before we click once we click it it is going to set the state to the opposite of the previous states okay so let's go ahead and try this out okay so we click we get that path and then the menu closes right perfect now one thing if the menu is showing and i click this um logo i should close it as well okay so let's go back to the now and on the logo we're going to add an on click property as well or an event listener and we're just going to set the it's not showing state to false okay so it's now showing and we are going to set it to false right so on click of the logo it is always going to be false okay so i open and i click this and it is false okay perfect so that's all now let's take care of the route okay now as i said some of the components are hidden under the navbar so i'm going to go to the number css and we have some parts and direct okay so now everything should be showing it was because of the fixed um position we gave to another okay so let's take care of the routing and i'm going to remove all these components except for the number okay now we are getting the browser router the routes which was previously called swish and the route as well okay we are getting all these from the um react router dom right now this navbar is going to show for all the pages okay so the dynamic page or the dynamic components that we want to render we are going to wrap those inside the routes okay so inside our routes and we are going to use our routes that is the singular depending on the path that we are on we are going to render the elements or the components that we want to um show so for this about we want to render the about components and make sure that um that i've closed that and actually let's have this first one i want it to be the index and that is going to be the home page okay so i'm going to duplicate this one multiple times so we have about we have um contacts we have um gallery so if you go to our website okay currently it is localhost so if you go to um localhost slash contacts we should get the contacts component okay so right here if i save let's come back here we have it okay if i go to the about we have the about okay so that is what we are doing and notice the number is outside this route okay that is why it is going to show for all the other components right so let's proceed with the gallery so for the gallery route we are going to get the gallery components the next one is going to be plants and we want to show the plants component we want to render that and the train is i think that's the last one so that's the trainers components right now if you are trying to access any path that doesn't match any of these then we should show the not found page okay or the not found components okay so we are going to use the star and then the not found component so that's what we want to render okay so let's come back and try everything out so you go to gallery notice how gallery component is what's showing plants we get the plants trainers contacts and all that okay so everything is working smoothly i click on the logo then we come home okay which we don't have anything um on the home page let's go to the home which is even open okay so if i showed right home here so in this case i have to i'm going to use a react fragment here since we can't return multiple elements right so if i should write home we are going to get the header and then home okay we have the header here which is coming from the header component right so our route has been taken care of let's actually try the not found okay so we go to any other page we get enough not found component all right all right so now we can proceed to start working on the header okay the header component now even for this header i think i should change the name to main header okay so main header the jsx right i'm going to have another header component um of course i'm going to create another header component and that is going to be for the header for the other pages okay as i showed you in the beginning i think you're going to get that when we actually get there okay but for now let's work on our main header okay um i think i'm importing that in home that's why i'm having that problem okay so this should be main header come on all right let's see and now we shouldn't have that error okay so this what we are going to this section that is what we are going to work on perfect all right so in here there's actually going to be the html5 header tag okay we should give this the class of main and ask underscore header and direct dave of this header is going to be the general container class and let's actually give this another class of main header container okay now we are going to have a left side so let's just call this main header left and then the right side as well okay so left hand and the right okay this left side is going to have some text and a button and the first one is going to be an age 4 and there's going to be a hashtag okay let's just say 100 days of workouts we're going to have our h1 under that and it's going to say join the legends of the fitness world below these two you're going to have a paragraph and 20. i think that's too much long 15 should be good and lastly we are going to have our button okay we are going to have a link actually it's going to be a link so i'm going to import our link from of course reacts router dome and that is what we are going to use so link and it's going to go to the plans page basically and it's just going to say get started okay let's actually give this a class name of btn and another class of lg alright so that's all for the left side now let's have something in the right side as well okay so the first thing we are going to have is that circle okay that yellow circle that you saw um in the demo so let's call this main header cycle okay so i leave it a class of main header cycle nothing is going to be in there but below that we are going to have another div with a class of main header image and that is going to have an image okay so let's actually import that image as well i'm going to import that image um let's let's call this yes let's just call it image from um let's go into our images folder and get main header.jpg that's the name of the image okay so in here the source is going to be image let's just say header image or main header image that makes more sense yeah all right so that is all for our main header okay so i'm actually going to call this main header right it's a default export that's why we didn't get any error all right so let's actually go ahead and install this okay um mojo result really oh this should actually be a png it should be a png it's a png file right now we are trying to import okay so we come back and now we have our image as well all right so let's actually proceed and install this main header okay so for that i'm actually going to make this a little smaller and let's remember we gave that a class that's the header we gave that a class of main header right main and last one as co header so let's get that and let's give it a width of 100 viewport width okay a height of 100 report height as well and we are going to display this in grid okay just because i want to place items to the center all right now i'm going to give it a margin top of the vram as well let's save and see what we have and there's it okay not too bad i guess but let's proceed and remember i commented this position okay the number had a position of fixed but i commented that out so i think we can actually now um comment that okay um so the number css i had the position fixed okay i'm going to yeah so that's what we have and so you can see some of the elements from our main header is hidden okay that's because the height of the nub bar is five frames right but no problems you're going to take care of that and we are going to get our main header container okay which is specific to this main header we're going to give that a height of a hundred percent a display upgrade and we are going to give it a great template columns of one fr one fr okay so 50 on the left side and then 50 on the right side okay now i'm going to align items to the center and justify content to be spaced between let's save and that's what we have okay now let me actually have a gap between them so a gap of six rams should be good okay now you don't really see it but there's a gap between the left side and then the right side right now i'm going to target the left side and i'm going to give it a margin top of negative three rams okay i want it to go up a little bit okay so if i save this this goes up by negative three rams okay right now let me target the left again the main header left and i'm going to get the h4 which is the hash tag okay this right here i'm going to get that and i'm going to give it a margin bottom of one room and a color i'm going to give it that yellow color which is color secondary and the font weight i'm going to reduce that to 400 let's save come on the fonts wait yeah and that's what we have perfect all right so now for the h1 i'm not going to touch it but we can proceed and then target the paragraph okay so main header left and then the p tag i'm going to give that a margin of one ramp for the top zero for the left and right and then 3.5 frame for the bottom let's save and that's what we have of course let me increase the font size to 1.1 ram yeah that's perfect all right now i'm going to target this okay actually you know what i'm going to have some general styles for buttons okay so let's go back into our index just so we see what's happening i'm going to bring this to the right side come on what is wrong yeah and remember we gave this link right here we gave it a class of btn right so let's have some general pattern classes or some batman styles okay so for a class of btn we are going to give the elements a color of color gray 100 the width is going to be fit content the margin is going to be zero auto pattern of point nine ram two ram so zero point nine round for the top and bottom and then two rail for the left and right the background is going to be the primary background and the border radius is going to be 1.5 frame okay let's actually give it a transition as well since you're going to have some hover effect okay so let's give it a variable transition perfect so now you can see the styles kicked in okay now remember we give this um another class of lg okay so let's first have the hover okay so on hover i want the background to be the secondary background or the yellow color so color secondary and the color is going to be um should i make it white let's see let me save let's see what we have yeah let me make that the background color it's just color gray 600 okay so the color on hover is going to be color gray 600 we save and now we have this okay now as i said we give this another class of lg so any btn with another class of lg should have a pattern so we are just going to increase the pattern to 1.2 run for the top and bottom and then 3 ram for the left and right okay the border radius is going to be 2 ram 2 ram should be good and the font size let's increase that a little bit 1.1 ram you save and that's what we have perfect now some buttons are going to have another class of sm okay for small so let's give those a pattern of zero points forum for the top and bottom and one point two for the left and right okay the font size as well is going to be 0.9 ram all right now we don't have any buttons like that for now but but with me here okay let's actually change the cover for those okay so the background is going to be white okay order light gray color gray 100 and that's all we need for the buttons okay so we can now go back to our home that is our home.css and proceed with the styling okay so we're actually done with the left side now let's work on the right side okay this side right here all right so so i'm going to target the right so may header right that's the class we gave it and i'm going to display this grid okay and place items to the center as well okay so that anything i position absolutely is going to be right in the middle all right now let me actually position this relative okay so that any element we position absolutely is going to be contained in the right okay if that may change all right so let's grab the main header cycle okay and let's give that a width of 25 frames okay same for the height 25 frame as well and a background of we are going to use a linear gradient here okay and the angle is going to be 75 degrees and it's going to be the secondary color so color secondary and transparent okay so it's going to go from the second recolor or the yellow color to transparent right so it's going from this to this perfect now let's make that perfect circle so border radius is going to be 50 and i'm going to position it absolute and as i said it's going to bring it right in the middle all right now i don't know if this looks good okay let me actually target the image and that is the that's the header image i'm going to position that relative so that it sits on top of this and i actually think this looks better than the the demo okay i don't know for you but this looks cool okay but just so we have exactly what we we showed or what i showed you i'm going to give this a filter there's going to be a blur and let's make this 15 pixels okay let's save and we have some black okay i don't know which is which looks better whether this or the blade okay yeah let's just keep this all right this is okay and i think this can even look cooler if we add some hover effect to the main header okay so on hover of the main header we are going to give this some transition okay a cool transition from the sharp to or from the blade to sharp right or should we make it blurry or we could make it sharp by default and then on over of the main header we get the main header cycle and then we make the filter let's just cut this and then paste it here and i'm going to uncomment that okay so we have this okay if you want you can pull the hover on the left on the right side or whatever you want but i think that looks cool okay let me add a transition here of the transition variable okay this is not bad i think we should actually put the hover effects come on let's put the hover effect on the right okay let's save so when we hover here on the right side you have the blade which does not look bad perfect all right so now we are done with this um this header section you know what since i gave this a height of 100 viewport heights and also gave it a margin we can subtract the margin okay which is i think 3 ram we can subtract that from the okay so let's calculate 100 viewport height minus 3 ram okay average is the margin that we keep and now we should have that um overflow okay on the the on the vertical axis perfect now we are going to take care of the media queries at the end okay so when we are done with this whole home page okay that is where we are going to take care of the media queries okay so for now let's move on to the next section which is going to be for which is going to be the programs okay so let's go back here and let's create let's create programs for jsx rafce of course i don't need this input in here we are going to return a section okay wait let's give this a class of programs okay and we are going to have that general container class and another class of programs container right and here we are going to have um a div with the class of programs head all right and in here we are going to have a span which is going to hold an icon okay so we can go to um i can why do i keep saying i can scout we can come here and then search an icon let's say diamond okay or chrome yeah this makes more sense i guess and you can you can use any of these okay but i'm going to just write the name of the icon so i'm going to import from the react icons library or the package okay and i'm going to bring that in here so this right here copy that paste close javascript mode now we should make sure we are bringing in this component in the home page okay so that is um programs come on all right so let me just import programs from components and in programs dot jsx we save and now yeah we have our crown okay right here perfect okay so let's go back let me close this main header we don't need that and yeah all right so next to this spawn we are going to have an h2 as well and they're just going to sell programs okay and we should have that as well perfect now one thing this is going to repeat for multiple sections of this home page okay so we can right away then this into a component okay so i'm going to cut this and i'm going to create another component called section head okay.jsx should be hit and r a f c e i don't need this react import and we're going to be expecting some props okay and i can okay so we are right away the structure in the prop props is an object so we can right away destructor it so we need the icon or we are expecting an icon prop a title and then a class name okay in case we give it some other class name we're expecting that as well okay so right here we are going to return and div oh what we just copied i can just paste that yeah okay so we are returning a div with a class of i'm going to give this a general class of section and that's going to go ahead and we are expecting the icon so and also the title okay so this should be dynamic so now everything should be good right and we can use this okay we can reuse that component on any section that we want to use it okay so we can bring that in that is section head and let's pass in the props okay so the first one is going to be the icon so the icon or it is expecting an icon prop and this is the icon that we are using right so let's put that in here and also the title okay and it's expecting a title probe as well and they're just going to say programs come on programs all right for the class name we'll just leave it okay perfect so we come back and everything is working exactly the same beautiful now i think i didn't use or i didn't make use of this class name and i don't even think we are going to need that okay but for safety reasons i'm just going to use template literal here so let's enter the javascript mode let's put in that section head class which is going to be there by default again in case we passed in any class names okay we add that as well right so i can close this section head okay now here we are going to have a div with a class of programs wrapper and that's just going to wrap around the different programs okay we are going to have about four programs so in here in our data.js okay we are using some local data here as you know we have an array of programs okay an array with four objects i think one two three yeah four okay and as you can see i'm importing an icon here and we're just going to use that same icon if you want you can go ahead and get some different icons and use for each of these but i'm just going to use one icon okay all right so we are going to import this in our programs and then loop through that okay and then show the staff that we want okay so i'm going to import i'm going to import my programs okay and come on and that's going to be from [Music] let's go back into our data and that's where we are getting our array from okay so here we are going to map through so let's enter javascript mode programs okay so our array we are going to run the map method on it and right away we can destructure some the elements or the items that we want in here okay so each iteration is going to return an object as you can see so we are going to get the id the icon the title the info and the path as well okay so let's destructure that the id the icon the title the info and then the path okay and for each iteration we are going to return something okay so if i return let's say um i don't know some jsx let's just do h4 and say hi we're going to get four just because we are having four elements or four objects in our array right but of course we want to return something meaningful so let's actually create a card okay it's going to be reusable for different elements as well all right so inside my ui i'm going to create a card component so card.jsx and in here let me just do our afce a simple component here simple functional component i'm going to remove this react import and this card component is very very simple so this just going to return an article tag with a class so let's actually enter javascript mode here we're going to use template literal a card class and any class that we add onto it okay so in case we add another class to it then we are going to use that as well of course we should be expecting this prop that is the class name prop so we are going to the structure that so we are going to the structure the class name and then children okay so for this inside the opening and then the closing attack tag we are going to have our children okay our children prop all right so this is going to work almost like a react fragment and that's what we need to do here in the card jsx okay so let me actually close this and in here we're going to return that card jsx okay so let's get the card all right and that is going to wrap around the elements that we are going to have in here all right now as i said we can actually give it a class name prop which will be added to the already existing class all right so let's give this uh my class of programs program since this is a list we should have a unique key and we're having an id for each of the objects okay so one two three four we having that id so we are just going to use that here okay now in here we are going to have span and that is going to have our icon we are going to have an h4 that is going to have the title we are going to have a small tag and that's going to have the info we save let's come back and that's what we have okay now as i said the icon is going to be the same but you can of course come here and then get some different icons for them okay so we are getting program one two three four as you can see from the data we have program one program two program three and then program four all right perfect now let's go back here and we're actually going to give them a link okay so we are going to have a link here so let's actually import link from react router dom okay and we're going to use that down here so link be the path okay the path that we are getting here or we are the structure in there and let's give this a class name as well a class name of btn and then sm okay the small class as well and let's just say learn more all right and i'm actually going to bring in an icon as well here let me copy this and then bring that here as well we save back and this um i have an arrow correct okay save and copy this paste it come back and now we have it okay we have our buttons as well thanks to our general btn classes okay we have the sm as well perfect okay so now let me close this card and now we can proceed to actually style uh programs okay our programs section now even before we work here in the home css let's go back to the index okay let's continue with some general classes or some general styles and we first have that reusable section head component okay and also we are going to take care of the card components as well right so let's have each section every section is going to have a margin top of 10 ram okay let's save that and i'm going to put this on the right okay now i'm going to target the section head okay so we give that a class of section underscore and let's go ahead okay um and that is going to have this icon and then the h2 okay i don't know if you can remember that let me actually show you so in our component we have this section head jsx okay so we have an icon and then the title i'm going to display flex um i'm going to align items to the center and then a gap of one room okay so that's what we have perfect i'm going to target this pan okay which has the icon right so section head and then the span let's give that a background of color gray 500 a pattern of 0.8 ram border radius of one rim a color of color secondary and then the font size let's just increase that to 1.5 frame and that's what we have all right now remember we have a general card as well which is a reusable component and we give that a class of card right and let's actually come down here and let's let's have some styles for that as well okay so the card class let's give that a background of color gray 500 border of two pixels solid transparent okay so it's going to be transparent for now it takes a line of center okay pattern three ram two ram so three for the top and bottom and then two for the left and right border radius zero for the top left three ram for the top right zero for the bottom right and then three round for the bottom left let's save and we have something okay but it's not it is not showing well because we don't have this abstraction fully okay that is why but we are going to take care of that okay in the home page right these are just some general styles that we are giving to our card okay all right let me actually add a transition to our card so let's give it that variable come on variable transition okay now let's have some hover effect so card on hover i want the background to be transparent you can type and the border color is going to be color grade 400 okay so it's transparent but on hover it's going to be color grade 400. i want the case uh to be um i want the cursor to be default okay so even if you're hovering over a text it doesn't look like we want to select it all right now i'm going to get a span so card and then spam okay any card that has a span is going to have a width the spawn is going to have a width of 3 ram same for the height background is going to be the primary background and let's give it a color of color gray 100 a font size let's increase that to 1.5 frame padding of 0.8 frames so basically any card that has a span the span is going to be an icon okay so as you can see here these icons are being affected right so padding of 0.8 frame let's give a display of grid just so we can place items to the center and let's give it a margin bottom of 1.5 frame as well and imagine inline of auto okay i'm going to give it a border radius of one rim and let's give it a transition okay so that we have a cool hawaii effect we save and that's what we have okay now we don't have the over effects yet so let's just do that i'm going to copy this and on over of the card that is when i want to give this span a different style okay so i'm going to change the background to be the yellow color that is color secondary and the color is of the text or the icon is going to be color gray 500 now let's just do 600. okay so on over this card you see we have that okay perfect now i'm going to target the small so card and then the small tag the margin bottom sorry the margin top is going to be one room display block and font weight weight of 300 all right that's enough okay so now we can come back to our home.css and work specifically on this program's wrapper okay okay since we have some of these styles done already it's going to be very simple okay so i'm actually going to yeah let me just keep it like this and let's select our programs okay so programs i'm actually going to change the margin top here to the forum okay all right so we have that did we give it a cl a class so yeah we did i didn't see the effect kicking that as well i was just trying to confirm that let's see yeah okay it's actually working all right so let me get the programs wrapper okay that has these cards so i'm going to display great the grid templates columns is going to be repeat 4 times 1fr okay so we have that um did we give it that general container class did we do that let's see container i have this programs wrapper actually outside of the okay so um i have this container forgot yeah so this should be inside okay the programs wrapper should be inside the container all right so now we should have this okay so let's go back to our home css and continue okay i'm going to give a gap of 3 ram between the elements okay so between the cards and i'm actually going to give it a margin top as well forum so that we have some space between that and the header okay or the head all right so that's good we can proceed and get this button okay this link okay so programs program let's get the link or the anchor tag and let's give that imagine top of 2.5 frame okay that doesn't seem to be working so let's actually display flex okay we save and now it works we are going to align items to the center so that the text aligns with the icon that we have inside and also i'm going to justify content to the center as well now i'm going to give some hover effect on hover of this card i want to change the color of the button as well okay so on hover i want to change the button color to a background of color secondary which is the yellow color and also the text as well so the color itself is going to be color gray 600 perfect so now we have this and i think we are done for this section all right so let's move on to the next section we can actually close this up so the next section is going to be the values okay the values section all right so in here i'm going to create a nope in our components okay values come on dot jsx all right fce let's remove this react imports and let's make sure we have this in here okay so that is values right so if i come down here and now we have the values okay so let's work on that section all right so right away i'm actually going to import this tab that i'm going to need so i'm going to have an image okay so i'm going to import image from um let's go into images folder and get values.jpg okay and i'm going to import some more stuff i'm going to import a section head so the section head components that's the reusable components we created and also i'm going to import some icons okay actually only one i can so that is j i cut diamond from react i can slash gi okay you can go to the page and get any icon that you want for this and we are going to import the values okay which is an array that we have here it's a named export like the other arrays so we are going to import this as well which we are using the same icon okay that we use for the programs okay if he wants we can change the icons i don't want to waste time on that let's bring that in okay so that is a named exports values right and i think the last thing is going to be our card okay our card component from ui all right so in here there's going to be a section tag let's go that's what we are going to return and let's give this a class name of values okay and in here we are going to have the general container class and another values underscore underscore container we save and if i type some great share come in here this is what we have right we are going to have a day with a class nameless values left and of course you're going to have the right as well okay and the left is going to have an image and the right is going to have the cards okay now let's have values image we're going to have the image so the source is going to be the image that we imported up top and let's just say values image for the alt okay now for the right side let's bring in that okay so we have that section header already so that is what we are going to use in here that is the section header component and that needs an icon so we are going to use the icon here okay and also we need a title okay the title is going to be values let's just say values right and that's it okay so we can actually make this a self-closing tag or self-closing component we save we come back we have the image and then we have our title perfect right now below this we are going to have a paragraph um let's just do lorem below the paragraph you're going to have a div with a class of values wrapper and we are going to look through our values array okay and then show the stuff that we want in a card okay so values don't map and we can right away the structural things that we want since each iteration is going to return or is going to be an object okay so we need the id icon title and then the description okay so we need the id the icon the title and then the description and let's return something let's return some gsx so we are going to return that card let's close that and let's actually give this a class of values value okay and in here we are going to have a span which is going to have the icon and h4 is going to have the title and lastly you are going to have a small tag it's going to have the info or the description okay we save let's come back and we have this perfect so most of the work is already done for us okay we just have to display this grid or flex or whatever we want to do and we will be done with our values section okay so we are done here for the jsx let's get back here in [Music] the home css i'm going to have a comment here it's going to be values i'm going to target the values container class display it's great great template columns is going to be 38 for the left 50 for the right and then let's give it a gap of the remainder of this okay which if you calculate it will be 12 remaining right perfect so we save let's come back and that's what we have okay so let's take care of this part okay this is almost done actually let's have that hover effect on this image okay so let's target the values image and let's have a filter saturate of 0.25 okay so 25 percent initially and since we are going to have over effects let's have that transition so that we have a smooth effect in there so on hover we are going to set this to a hundred percent uh loop should be in this filter okay so there's going to be one which is a hundred percent so now we should have the hover effect here perfect now let's work on this right side values right let me select the paragraph okay and i'm going to give it a margin of let me actually put this side by side so that we see what we're working on so the margin is going to be 1.5 frame for the top zero for the left and right and then five frame for the bottom all right now i'm going to select the values wrapper which has the cards and displays that are great of course and the grid templates columns i'm going to make that one if i want a file okay let's have some space so a gap of 3.4 ram for the row gap and then 2.4 ram for the column gap and that's what we have all right now i'm going to target the i want this icon to be right here okay on the top right right so i'm going to target the each of the cards okay so let me get the card and values value okay there's the card for the card components and then remember we can add another class okay and we give it that class of values value right so here i can give it a pattern top of three come on pattern top of three ram or 3.5 frame and i'm going to text the lines to the left next align to the left and position this relative okay since i'm going to position the i can absolute all right so let me select the icon that is the span and position that absolute okay we save that's what we have but i want the i want it to be from the top negative 1.5 frame okay we just have the height right remember we gave all response a height of three ram so half the height is this and we have this which is cool and that is all for this values section okay that is all for this values section perfect and this card hover or this effect that we have is coming from the index remember we have this general card styles okay so we have this over effects and all that okay we have the styles for the span as well and as i said we give that a height and a width of three rim and all this okay so most of the work is done let's move on to the next section which is going to be our frequently asked questions section all right so in our components folder i'm going to create frequently asked questions section um jsx rafce of course let me remove this let's make sure we are bringing that in here so that is frequently asked frequently asked yeah we save and we have that imported as well okay so we come down here we have it all right so let's work on this component you can close the values all right so i'm going to bring in the stuff that we are going to need i'm going to import section head i'm going to bring in an icon so and i'm going to bring in my frequently asked questions array as well okay which is coming from uh data dot js okay so in here we have oh yeah x button are frequently asked questions sorry okay which i think we have yeah we have six i can remove this we have six objects here okay all right so let's go back and lastly we are going to bring in or we are going to create another component it is going to be frequently asked question.jsx so singular so lets do rfce here as well and let's bring that in okay so let's bring in a frequently asked question from this jsx file all right so here you're going to return a section with a class of fa qos okay let's have a container class and a frequently asked questions container class as well all right now we are going to have a section head self-closing tag we need an icon and that is going to be this question icon or the question mark icon and then the title for this or we need a title prop as well which is going to say frequently asked questions okay faqs all right so that's all for the section head now i'm going to have a div with a class of recordedly asked questions wrapper okay and in here we are going to loop through this array and for each iteration we are going to return this frequently as question okay so singular we're going to return this component all right so for now let's have something here so we are going to return an article tag with a class of frequently asked question you're going to have a div okay let's just have a div and on h4 is going to have the question so let's expect some props okay so we are going to the structure the props we need a question and then we need an answer and in here for the h4 we are going to have the question and of course inside the div we have a question and then the plus button okay so that is going to be inside the button tag and i'm going to give this one or a class of frequently asked question i can okay i don't think we are even going to use that class but let's import this icon ai outline plus okay from the react icons hey okay i'm going to duplicate this and we'll have the minus as well okay we're going to use or we are going to import your state as well but for now that's enough right so in here let's have the plus for now self-closing tag okay so i can bring this component in here i already have it so let's loop through and then return that component okay so we are bringing in the array that is the frequently asked questions array that we are getting from the data and we are going to map through with that okay so frequently asked questions the map by the way i'm going to the structure the stuff that we are going to need you will need the id the question and then the answer okay each object in the array has the id the question and then the answer as you can see here right so that's what we are getting and we are going to return some jxx um just some gsx okay and in this case that is going to be um the frequently asked question okay this component that's what we are going to return here and as you can see here we need the question and then the answer as well okay but since there is a list we should have a key a unique key so we are going to use the id for that we need a question prop and that is going to be the question that we are destructuring and we need an answer prop as well okay that's going to be the answer that we are destructuring yeah so we save come back here and we have it okay so we have all the questions that is in the array here okay i think we forgot about the answer okay so in here i'm going to have a paragraph and that is going to have the answer so we save and we're getting the question for each iteration and then the answer as well okay perfect all right now let me actually just see and we and we have a bunch of errors okay it's not defined and i should be checking this very often so that we didn't we don't end up with okay so let me correct this first we need a unique key somewhere in the values of course i forgot you you call me there but in here we are returning a list so we need a unique key okay so that is why i destructed this id all right so let's bring that in here we save come here and then refresh hopefully that's the only error that okay we have some other error as well okay so it seems we are returning um a function instead of a component right so um [Music] okay so here it should be a component okay self-closing component the icon and we have no more errors perfect all right so let's go ahead and install this okay let's start our frequently asked question section okay and after i will come back to the frequently asked question that is the singular and actually add the functionality okay let me close these values and the section head as well so let's go home i'm going to copy this comment paste it down here that's going to be for the frequently asked questions section and put this side by side so that we see what's happening and right away going to get the frequently asked questions container i'm going to display that um you know what let me give it a margin top now foreign okay to do now let me get the wrapper instead okay yeah give it a margin top and i'm going to display grid and the grid template columns is going to be one of our nfr element so a gap of 1.5 frame for the row gap and then 5 for the column gap okay so we have that i'm going to align items to flex that all right so let me get a frequently asked question which is the article with that class i'm going to give that a background of grade 500 color grade 500 the pattern is going to be two ram border radius one rim keza is going to be pointer okay so that it looks clickable all right so let's get the div remember let's let me actually make reference so that you see what exactly okay so there's the frequently asked question class and we have a div inside of it okay which has the question and then the icon okay let me actually put this on one line so that you see it well so we have this and then we have the paragraph under it okay so let's style that so frequently asked question and the div inside of it let's display that flakes just for content to be spaced between and also align items to the center i'm going to get the icon we give that a class of frequently asked question i can the background is going to be transparent i'm going to get i'm going to change the color to be color gray 100 and the font size is going to be 1.5 frame we save and that's what we have not too bad i guess let's get the paragraph and push it down a little bit so frequently asked question and then the paragraph margin top is going to be come on imagine top 1.5 frame yeah i think that's all right that's good all right see right so now we can proceed or go back to the frequently asked question that is singular and add the functionality to show or hide this okay that's a question sorry that's the answer okay the questions are going to be showing but for the answer we need to toggle that okay so i'm going to bring in the use date hook so i'm going to import oh my god use state from react and directly in our component i'm going to have a state so i can write away the structure of this that you state hook returns an array which has a little element right the first one being the state value and i'm going to call this is answer showing and then the state update function okay i'm going to call this set is answer showing okay let's set that to the equal to the use date and initial is going to be false so the answer is not going to be showing okay so here we can check if the answer is showing okay so if this is true okay if this state is true then we want to show the answer okay if it is true then we should show the answer so we come here it's not true that is why audiences are not showing if i should change this to if i should change this to true then they should be showing so initially is going to be false all right now we are going to toggle this okay i'm going to add an event listen on this but for now let's actually work on this icon okay so if it is true we should have the minus icon if it is false then we should have the plus icon instead okay so it's answer showing if that is true then we should have the minus okay else we should have the plus so i'm going to paste it down here as well and change this to minus let's save come back everything is working if i change this to true come back here we have the minus okay perfect all right so i'm going to add a click event to the article tag let's use the state updating function that is set is answer showing okay let's use that to toggle this okay this event let's use that to toggle the state okay so let's get the previous states and then return the offset of the previous states okay we are going to return a new state where is the opposite of the previous state all right so now when we come back here of course this should be false by default i don't know why i changed that we come back here and then we click we can now toggle it okay and this aligned well because i set the align items to flex start when we come to the home right here i set it to flex that if i should comment that out you can say that it's going to stretch as well which we don't want right so remember to set that to flex that if you're having any issues there right so now we can toggle our answers okay everything is working as early as we expect all right so that's all for this frequently asked questions section let's move on to the next section okay it is going to be the testimonials section all right so let me close the frequently asked questions and let's create a new component testimonials jsx okay rfce of course and let's make sure we are bringing this in the home come i'm gonna close that okay so testimonials and we have our testimonial section all right so let's work on that and here i'm just going to bring in the stuff that we are going to need okay let me bring in those stuff first i'm going to import the section head i'm going to bring in an icon from the react icons library i'm going to bring in the card two more icons okay so i'm going to import and lastly we're going to bring in our testimonials testimonials array okay that is coming from this okay this file that we have here okay so we have about five testimonials here so we have name quotes job adding avatar okay all right so let's come back in here and we are going to have or we are going to return a section with the class of testimonials okay i'm going to have my general container class and the testy money house container class as well and let's first have our section head and we need the icon okay there is going to be a component so we need a quote let's close that self closing component and we need a title as well okay we need to pass in a title prop as well and let's just going to say testy ammonia's all right let me actually make this a self-closing component right below this we are going to have a card let me actually give this the class name of testimonials in here we are going to have a div with a class of testimonial avatar okay so that's going to have the avatar and there's going to be an image so we can right away get the avatar let me just say for the alt i'm going to say oh should i have the name here okay i'm going to the structure that's right here so const um [Music] yeah i'm going to destructure this i'm actually going to import that you state hook so import use state from react and let me first have a state here okay called index and set index for the state updating function so this is going to be zero initially okay and let's get the first object in our testimonials array okay so we're going to get the first object so let's just use the index okay and since there's an object we can right away the structure it's okay so close and we're going to the structure let's get the from the area what we have we have the id name codes um job and all that okay so i don't think we even need the id okay so let's get the name the code the job avatar okay okay so we are getting that and in here we should be getting the avatar so now we should have an image in here as we can see so let's proceed in here right it should be getting the code itself so i'm going to actually give this a class name of testimonial code okay javascript mode here i'm going to use the template literal okay so i'm going to have two quotes around it and our quotes that we destructed right so i saved that we should have our quotes and also what we need we're in that h5 and that is going to have the name of the person and lastly we need a small tag for the job okay so a small i'm actually going to give this a class name of testimonial title okay and we are destruction the job so we can bring that in here as well we save and that's what we have okay so you have the image the quote and all that perfect now if i should change this to um sorry if i change the state to let's say one we should be getting the second object from the array okay we should be getting the second object since we are passing in the index state so if i say when i come here we have the second object right if i make if i should make this two i'm going to get the third okay so this is how we are going to um show the different testimonials that we have okay now before we proceed to actually styling this we will face all this and then come back to under functionality right but before that i'm going to have two buttons okay so outside of the card i'm going to have a dip with a class of testy money house vtn container and you're going to have a button with a class of testimonials btn and they should have this first one is going to be the left and let's duplicate this and we will have the right as well so we save and we should have those icons down here as you can see perfect so now let's proceed to the css style this and then we'll go back and add the functionality to show the different testimonials okay so there's going to be the testimonials save all right let me get the testimonial section testimonials i'm going to give that a width of 50 ram and the margin in line is going to be alt of course to put it right in the middle perfect let me get the testimonials head um did i give you that class i don't think so let's see yeah so let me give this a class of um class name testy come on that's the moneo's head okay let's save that come back to the css and in here i'm going to justify content to the center okay so we have this heading in the center now let me get the card which has another class of testimonial singular okay we are going to position that relative text align since we gave our general card class a text line of center we are changing it to the left here margin top two five frame so that they push it down okay now i'm going to target the avatar okay so that has the image avatar let's give it a width forum same for the height i'm going to give it a border radius 1.5 frame overflow we hidden position absolute is going to be negative two ram from the top from the left i'm going to calculate fifty percent minus half the width okay so minus two ram in this case we save that is what we have now i'm going to give it a box shadow of um zero for the x axis 1.5 for the y axis that's 1.5 for m 2 ram for the blur and an rgba of 0.4 for the alpha we save and we have this all right we are going to have some hover effects so i'm going to add that transition on over testimonial i want to get the testimonial butter and the border radius is going to be fifty percent then the border color is going to be color and gray four hundred we save and let's hover there we have this uh border color color girl what is wrong here what do we do is watercolor why is it not working i don't see the border color here did i not give it a border all right so i should give it a border here right i'm going to give it a border of two pixels solid um this should be transparent for now transparent yeah okay so it's going to be transparent but on hover you're going to have it okay perfect all right now let's have some more styles i'm going to target the um the title that's the small tag here i'm going to target the program the code itself as well so let me target the code first that's the paragraph i'm going to change the phone style to be to be italic and give it a margin of one room for the top zero for the left and right and then to run for the bottom and do we have a problem testimonial quote they should be working did they not give you that class then come on okay so we save come back and we have it right i'm going to get the card small testimonial title okay i'm going to get this small tag that is the job i'm going to get that the margin top is going to be 0.3 ram okay i made it one ram but i'm changing it back to 0.3 all right now i'm going to get the buttons okay the container first that is the buttons container remember we gave we wrapped them inside the debris the class of testy money house btn container right let's give that a width of phase content margin of 2.5 frame auto zero display of likes that's for content center line items center and a gap of one room let's save and testimonials between i think i made a temple there as well oh god help us i can type today all right so we have this okay now let's target the buttons inside of it so we give them um we give them a class of testimonial yeah i think it was testimonials btn let's give them a background of transparent kaiser of pointer okay now i'm going to get the svg that's the icon itself and the fill is going to be the color primary font size 0.8 ram let's make the width 3 ram and the height 3 ram as well okay perfect so we are done with the styling for now okay now let's come back to the testimonial components and then let's actually be able to click this and then change the testimonial all right so i'm going to add and unclick event here and on click of this button we should have a function to show the previous testimonial okay the previous testing mono so i'm going to call a function i'm going to reference this function which is previous or pre testimonial handler okay and we're going to have this function here it's going to be an arrow function and also for this button as well as the second button we're going to reference a function and this is going to be next testimonial handler okay and this is also going to be an arrow function so let me just duplicate this and change this to be next so let's work on the next testimonial okay so i just want to change the index okay since that is what we are putting in here okay let's actually make this zero for initial is going to be zero and on click of the button i want to change the index i want to just increase it okay so i'm going to use the set index and let's get the previous states and return the previous state plus one okay so if i come back to the browser if i click notice we are showing the the next um testimonial okay now if i continue this is going to eventually crash and that is because eventually we are not going to have or we are going to have an index that doesn't exist in this array okay so to prevent that if we get an index that is more than the length of the array minus one then we are going to come back to zero okay or come back to fetch today first testimonial all right so i'm going to check if the index is greater or equal to the testimonial dot length minus one okay so we are getting the length of the testimonial array this should be greater than or equal to if that is the case then i want to set the index to be zero okay so the state is going to be zero so now if i should come back here if i should continue i come back to the first one okay i come back to the first one now we should be able to also show the previous testimonial right so here minus one okay so we come back here we can increase and then we can also show the previous ones okay now if i continue eventually we are going to go negative and that is going to cause a bug so here also we are going to check if the index is less than zero okay if it is less than zero then we want to show the last object or the last testimonial in the array okay so here the testimonial.length or the testimonials array.length okay minus one what is it or he's going to give us the last object or the last testimonial in the array this should be less than or equal to and now we can show the previous set in the next testimonials all right perfect so that is all for a testimonial section okay now let's move on to the next section which is going to be the folder section so in the components i'm going to create filter.jsx and alright fce let's remove this react import let's make sure we are bringing in this in the home page as well right so footer okay let's save and we have our photo here okay so let's work on that now in here i'm going to import the stuff that we are going to need and i'm going to need the link i'm going to need um a logo or the logo that we use for the knob right we are going to need that same logo here all right i'm going to bring in some icons as well so [Music] we're going to have this in a footer tag it's an html5 semantic tag that's our container and photo container class okay now in here we are going to have an article tag and we are going to have our link okay it is going to be the logo right so let's have um we have the link and this is going to go to because we should have our image let me actually give this a class name of logo i'm going to have a paragraph um this is going to say let's just do dorm 20 okay get some dummy text and i'm going to have my social media handles okay so for the socials and you're going to have our links that's going to go to linkedin so https linkedin.com and slash your handle right but i'm going to just leave it now i'm going to set the target to um underscore blank so that this opens in a new tab and in react we should set a rail of no referrer and no opener okay and in here we are going to have our linkedin icon let's bring that in as a component okay so i'm going to duplicate this three more times and this one is going to be facebook so twitter and we have instagram right so instagram.com now we are going to have some more articles so go and in here we are going to have some permalinks okay so let's put permalinks so let's just give it a heading permalinks and we're going to have a link it's going to take us to about so let's just have this say about i'm going to duplicate this a few times and then contact okay for now i'm just going to duplicate this twice or two more times and lastly i'm going to have my copyrights okay so outside the container i'm going to have a date with a class of folder copyright okay i'm going to have a small tag in here 2022 in gato if you get a source code you can actually change this okay you can remove it if you want all right so let's save and let's style this okay i'm going to come back again actually you know it's let me replace this right here okay these two are the code tags okay all right so now let's go on and then style this okay so um that should be home or css i'm going to copy those comments come down here i'll sign space and paste it so that's inside the photo tag let's give that a background or the primary background the margin top i'm going to give it a margin top of seven firing top as well of seven room that's what we have the font size for this i'm going to make that 0.9 just to decrease it a little bit and the font color is going to be color gray 100 okay all right now unless i get the container so photo container and i'm going to display great okay the great template columns is going to be 20 26 ram for the first one and one room for the rest perfect now i don't know why this is not working okay this should be working since we gave it that class name of logo so let's come here and let me go back to my nav css okay i think it's because i didn't display it or i didn't give it a display okay so here i'm going to give it a display of block save yeah so it should be affected here as well okay perfect so i can close this up let's go back to our home css and let's proceed with the styling all right so let me actually give a gap of six from here as well i'm going to get the articles okay each of the articles so folder container i'm going to get the articles and then display them flex the flex direction is going to be column and i'm going to align your times to be flex start and also give them a gap of 0.7 ram now i'm going to get the paragraph so footer container and then the paragraph which is this okay this right here i'm going to get that and i'm going to give it a margin top of 0.5 frame i'm going to get the titles okay or the headings that's the h force so footer container article h4 i'm going to give it a margin bottom of 0.6 ram a font size of one room i'm going to get the socials which is right here so let me put this on this side so for the socials i'm going to give it a margin top of 1.5 frame display of flex gap of one ram and i'm going to align items to the center perfect now i'm going to get the anchor tags okay which are the icons so the anchor tags i'm going to give them a background of the color gray 100 i'm going to give them a pattern of 0.7 ram border of one pixel solid transparent border radius of 0.6 ram and a transition of the variable transition we save and that's where we have now let me actually okay so let me grab the svg okay which are the icons that's vg i'm going to give them the background color which is color gray 600 all right now i'm going to have some hover effects for the anchor tags so so on over the border color is going to change and the background is going to be transparent nice so now we have this i think i should choose a different [Music] icon for the facebook and i'm going to use this instead okay i'm going to use that for facebook paste save come back here and that's what we have i prefer this okay now let's target the copyright okay that's the last one that we have so [Music] we gave that a class of photo copyright i'm going to give that a color color gray 100 and i'm going to text the line to the center pattern of 1.5 frame for the top and bottom and a 0 for the left and right border top of two pixels solid color primary variant and imagine top of five frame we save and we have this perfect all right so we are basically done with our whole homepage okay with everything on our home page and i think we can proceed to make this home page and everything on it's responsive all right on tab later then on mobile phones okay now even before we start working on our homepage i'm going to go back into our general css okay so our index no css i'm going to have some general styles for our media queries okay that's for tablet and mobile phones even before we work specifically on the home right so then i'm going to have a comment media queries medium devices or medium screens okay the way to have one for small screens as well alright so at media screen and max width 1024 pixels that's for tablets just so we see what's happening i'm going to set the body oh i'm going to give the body a background of red okay just so we see the breakpoints right so if i shrink this down eventually we hit that breakpoint as you can see here all right so this and below we want to have these styles okay so i'm going to bring this on the left side let me actually make this even smaller all right we don't need this red so i'm just going to remove it okay so the general styles we are going to have here let's change the width of the container on medium devices okay it is actually going to apply for the smaller devices or the small screens as well so let's target the container and we are going to give it a width of width md okay so container with md that's the which we are going to give it so now notice we have we have some changes okay let's target the h1 okay so come on what is happening here okay so outside this let me actually make this bigger let's target the h1 let's give them a font size of one or two ram tablets okay the h2s are going to have a font size of 4.6 rim all right and that is all for this media query okay so i'm going to copy this come down here and then paste this for the small screens okay there's going to be 600 pixels and below and it's going to say small screens all right i'm just going to change the font size for the h1 and i'm going to change the line height as well to be 1.3 ram sorry 1.3 pixels we can just do 1.3 all right so who does it okay it does it for this media queries we're actually going to come back to this that's when we are working on the other pages okay we will be coming back to this file but for now i think we can okay let's actually leave it open okay so let's go back into let me actually copy this let's go back into our home and let's start working on the home media queries okay all right so i'm right away going to target let me leave a comment here this is going to be for the main main header section these styles let's right away target the main header and i'm going to give it a height of fit content or you can do auto if you want a pattern of 12 ram for the top and bottom and 0 for the left and right and i think that's enough let's target the main header container as well and i'm going to remove the gap okay so the gap is going to be zero all right so we have this now i'm going to target the main header circle and reduce that so main header circle i'm going to give it a width of 16 ram same for the height of course let's save and that's what we have okay not too bad i guess let's actually see um let's not indicate that so we can ignore this for now all right i want to see how this is actually going to look on a real tablet okay so let's keep working on this okay i'm going to copy this comment we are basically done with the main header okay so let's work on the programs okay let's work on this section right here all right so i'm going to right away target the programs wrapper okay i'm just going to change the grip and the grid templates columns i'm going to make that one for our nfr yeah so that's what we have we can ignore the overflow for now okay we have some overflow but for now we can ignore that all right so that's actually all for the programs let's move on to the values section for this section i'm going to target the let's go and then see in here i'm going to target the values container and give it a great template columns of 1fr okay let me actually scroll down so that we see the cars as well justify content to the center and the gap is going to be forum now let me get the values wrapper the gap here i'm going to make that for room for the road gap and then 3 room for the column gap perfect now i'm going to remove this image okay if you want you can keep it but i don't think i need it here so i'm going to remove the values image let's display that now okay all right so i'm going to copy this comment and then let's move on to the next section which is going to be this frequently asked questions section okay so i'm going to grab my frequently asked questions i'm going to grab the wrapper great template columns for this i'm going to make that one fr i think this looks good okay so we can proceed to the next section let me copy this comment paste it down here so here i'm going to get the testimonials okay the section we give that a class of testimonials i'm going to change the width okay so let's do 75 okay so we have that and that that's perfect right that looks perfect so let's leave it like that that's enough and finally let's move on to the photo okay so let me change this comment let me grab the photo container and the great templates columns here is going to be one of our one of our okay now the gap is going to be forum we save and the footer was causing this whole overflow okay but since we've taken care of that you can see everything is in view now so we are basically done with the media queries for tablet devices okay so let's move on to the next media queries that's for phones media query which is going to be for phones so i'm just going to copy that change in this to 600 pixels and below and let me actually have a mobile rendering view okay so let's use pixel 5 here let's grab the main header i'm not going to be using comments a lot here actually you know let me just use it okay so main header let's give that a margin top i'm going to remove the margin top actually zero for the left and right and zero for the bottom okay i'm going to give it a height of an android report height here i'm going to remove the image and then the circle background as well okay so let's target the header image and the main header circle okay let's display those none all right now let's target the container so the header container and change the grid templates columns okay so main header container let's change the grid templates columns to b1fr all right so let's move on to the next section all right so here i'm right away going to let's see programswrapper change the grid templates columns to 1fr the gap i'm going to reduce that to rem and let's actually reduce this margin top okay so imagine top of three ram should be good yeah and this card is too big okay i want it to be a little smaller okay so let's target the programs program and i'm going to give it a width of 84 percent let's save and that's what we have let's actually give it a margin in line okay you can actually do margin zero auto okay and i'm going to put it right in the middle perfect and we can move on to the next section this looks pretty good let's move on to the next section that's the values and we're going to do similar thing here okay so let's get the values wrapper and the grid template columns is going to be wonderful i'm going to reduce the gap to 3 ram i'm actually going to get the values value i'm going to give it a width of 84 percent as well and margin inline of auto perfect so you can do margin in line auto or margin zero or two basically the same all right if that's if the top and bottom is going to be zero okay if you don't need any extra margin for the top and bottom that's why you can use this but if you want only the left and right to be auto then that's the perfect thing to use all right now let's move on to the next section and that's going to be frequently asked questions section in here um let me just grab the frequently asked questions wrapper and i'm going to reduce the gap to one rim okay and maybe the margin top as well margin top let me make that to be red okay let me copy the comments paste it down here all right so let me right away get cindy that's the money or let me grab the testimonials instead that's all we have to do here i'm going to move on to the next section and that's going to be the photo right here let me grab the photo tag itself and the margin top and this time it's going to be 7 ram i'm going to grab the let me scroll down the footer container great templates columns here is going to be 1fr i'm going to reduce the gap to 3ram as well and let me grab the articles okay so folder container and then the article tags i'm going to align items to the center we save and we're going to have our elements in the center here now let's target this paragraph it's being stubborn so let's target that and then the p tag right let's text the line back to the center so we save and we have this all right so we are done with our home page okay our media queries is working and everything is working as expected beautiful now let's move on to the other pages okay so we have about gallery plans trainers and contacts now most of the styles are done already that's the general styles so these five remaining pages or components shouldn't be a problem okay so i'm just going to close these two and we're going to take them in alphabetical order okay so inside our page we are going to take care of the about page or the about component now i have the finished project opened in a new tab okay convert the window and i'm going to make reference to some things here okay let's take an essential all right now this header okay this header that we have is mutual feeds for most of the pages okay my internet my internet is terrible so that is why this the okay so basically you get the idea this header section is going to repeat um for all the base right so we are going to create a reusable components for that okay so you pass in the props which is going to have um the title and then the program okay and also the image okay notice the images are different for all the pages right so let's work on that okay so before we work on the about let's create a component in the components folder a header component header.jsx and rfce i'm going to remove this import now in here i'm going to expect some props okay so i will need the title the image that the background image and then the children okay the children prompt i'm going to return a header it's an atm of first logic tag you know that already i'm going to give this a class name of header okay you're not going to be expecting any other class name so we can just leave it like that and in here we are going to have our header container okay and then with a class of header container and we are going to have a header container bg okay for background which is basically going to have the image okay so the image is going to be the prop w passing and for the old you can just say header background image okay now next to this there is going to be a div with a class of header content okay and that is going to have an h2 for the title okay and a paragraph okay that is going to have the children okay the children that will be passing in to this component right so we can come back and then actually import that component that the header component we just created so let's import header from our components folder right and we can right away use it right here okay so we're actually going to wrap everything inside a react fragment and we're going to have our header we're going to be expecting some props and title prop so what is going to say about us sorry this should be a strength about us we are going to be expecting an image prop as well so let's actually import an image so let's import i'm just going to call this header image from let's go into our images so let's go up one more time into our image setting get header we save come back let's go to the about and we have this okay we have our title as well now we need the children prop okay we need to pass something in between the opening and then the closing tag and that's going to be the children prop that we are destruction and passing inside this paragraph that okay so let's just do lauren i don't know 20 or we can just copy from a finished project okay i won't need to look as a link exactly like we have in the finished project okay so let's save come back and we have it okay we have it here all right so even before we have more things or more elements on the about jsx let's go into let's go back into our index.css okay let's have the general style for our header components all right so before media queries for the medium devices i'm going to have some styles for our header okay all right so here let's get the margin top let's give it a five frame height of 21 come on 20. overflow hitting border button of 2 pixel solid and let's get the color grade 400 all right so we have this beautiful let me actually shrink this so that let me see what's happening i'm going to get the head up on cleaner okay and a container uh oh come on we are now writing sauce here okay i'm going to get the header container and give it a width of 100 percent of its variance width height of 100 as well i'm going to position it relative position relative and also let me display grid okay just so i can place items to the center center um i'm going to give it a a background of black okay you can use any background you want but i think black is going to work pretty well that's gonna be header contents bg okay or header container bg that's the class we gave it we're going to position that absolute so that's going to place it exactly in the middle since we displayed grade and then place items to the center right so let's position this absolute and give it a weight of a hundred percent now we are going to grab the image inside of this and give it an opacity of 0.5 rmg yeah so we have this now you can see this actually on top of the contents okay so as you can see i can't even select the text okay so we can just select the header content that's what the text is in and then we can give it a position of relative and that should be on top now perfect all right now let me actually do some more things with it i'm going to give it a width of 44 percent i'm going to give it an imagine 0 auto text align to the center color is going to be the color grade 100 and i think that's enough okay so we have this i'm going to grab the paragraph uh that's h2 the paragraph okay and i'm going to change the paragraph of that instead so we can actually use rgba 255 255 255 and then 0.75 okay white with sound let me actually make it 0.7 yeah that's all right and that's it okay so let's actually have the styles for its responsiveness okay for medium screens i'm just going to get the header content content and i'm going to give it a width a weight of 76 percent and on small devices i'm going to grab the header and give it a height of its content let me actually grab this section as well okay here and i'm going to give it a margin top of seven run on mobile phones okay and also i'm going to grab the header content and give it a weight of the container with md i'm going to give it a pattern of three round for the top and bottom and then zero for the left and right i'm going to get the paragraph okay the header contents paragraph and then the font size is going to be 0.85 on mobile devices all right so that's our general styles for our header okay our header component so now we can we can get back to our about and proceed and you know what um in our routing okay we're going to need the footer okay the photo component we're going to need that on all the pages as well okay so outside the routes i'm going to have our photo components okay so on every page we should now have our folder as you can see here i'm going to have that on every page beautiful all right so let's keep working on now about let's go back and outside this i'm going to have a section with a class of about story inside it i'm going to have a general container class and another class of about story container okay i'm going to have a debit class of about section image and instead i'm going to have my image okay i'm going to have an image um so let's import that okay we're going to import i'm going to call this story image and that's going to come from let's go into our images all right so the source let's bring in that story image i'm just going to say story or our story image all right so outside of this image div i'm going to have another div with a class of about section content okay and that is going to have first we are going to have an h1 let's just going to say our story and we are going to have some paragraphs okay the first one is going to have this text right here so i'm just going to copy that we are not going to be creating any reasonable components apart from this head okay for this um about page okay i'm going to copy this as well and have another paragraph tag paste that in and lastly this okay copy paste let's save and see what we have in our project so we have our image and then we have the three paragraphs okay perfect now we are going to have this similar section which is going to be for our vision okay so i'm going to copy that okay so i'm just going to change some things around right so this is going to say our vision come on okay now i'm actually going to get the text that we have here so we're going to have two paragraphs for that okay i'm going to remove the last one so this second one is going to is it the same thing yeah we can just leave it okay so let's have a different image for this vision section let's call that vision image and we're just going to grab the about two by jpg we save that and come back to our projects and we have that as well so this uh these are two different images okay now lastly we are going to have our mission section as well so we can just um you know what this vision section the content is going to come before the image okay so i'm going to cut this and that's the reason why i didn't make this reusable okay i didn't make this a reusable component because styling is an important the image on the on the right or the left is going to cause a problem right or it's going to be complicated it's actually possible but i didn't want to complicate things i'm going to copy the story section and then use it for the mission okay the mission section so i'm going to so about section here so it is going to be mission image that's what we are going to import and this is going to sell our mission okay so yeah the paragraphs three paragraphs is okay let's import that so mission image from and this is going to be the about three okay there's another another image so let's save that and then come back here and we have this okay perfect all right so that's all let's go ahead and install this page okay this about page okay so let's go into about css we already linked that as you can see here so let's go into i can close the home and close the um index as well i'm going to close the header as well so i only need the about css okay i'm going to come on about i only need the about css i'm going to have now notice some or all the three sections have some common classes okay so they they all have the about section image and they all have the about section content okay so you can see that repeats here as well and here as well okay so these three classes that we give them let's have those styles first so about section image okay let's give that a border radius of 50 to make it a perfect circle overflow of heading transform i'm going to use the skill okay and are going to transform this 15 degrees we save and let's see so you see we have a skill for all the images okay now let's actually have a transition on this since you're going to have a hover effect so we are going to use that variable transition okay so on over of any of the images so on hover we want to transform and we are going to change the scale back to zero okay zero degrees so on hover we have it going to be applied for all the images with that class all right now the mixture the vision image okay the vision image i want it to look this way okay this q is going to be a negative 15 degrees okay so i'm going to get the um i'm going to get the nth child that's going to be the second element last transform skew that's going to be negative sorry negative we save and now it's looking the other direction all right so i'm going to get the about section content let me right away get the h1 okay i'm going to give that imagine bottom of two rim that's all i'm going to get the paragraph as well okay so let's have some spaces between the paragraphs so let's get the paragraph target and give it a margin bottom of forum as well all right perfect so now we can target the individual sections okay so let's target first that's the story section so about story and right away i'm going to target the container class okay so i'm going to display that grid the grid template columns is going to be one up let's actually do 40 for the image side and then 50 percent for the content side okay and the rest is going to be for the gap which is 10 we see and we have this okay for the our story section now this is going to be the same for the this is going to be the same for about mission container okay so the mission the mission section is going to have the same style so we have it okay now i'm going to get the second one which is a vision okay the vision section so about vision i'm going to get the container directly the grid template column say is going to be 50 and 40 okay and the gap is going to be 10. let's say we first have to display flex of course great sorry and now we have this okay so i think that is all for um yeah that looks that's all right for live screens okay so let's have the media queries for this as well i'm just going to make this smaller okay i'm going to get the about section image and give it a width of 60 on tablets okay i'm going to get the let me close this i'm going to get the about section content i'm going to grab the h1 inside of it and then the margin bottom is going to be 1.2 ram all right now let's grab the about all the sections okay all the section containers so about story container the about vision container and then the about mission container okay and let's change the grid template columns to 1fr and the gap is going to be 3m so now we have this okay now i want this vision image to come first okay before the content that's one tablet and then on mobile phones all right so i'm going to target the about vision and the about section image inside of it okay and i'm going to change the grid row to b1 so we save and that comes before the content all right so that's all for our media queries for tablets i'm going to copy this come on man i'm going to copy this and use that for a small screens it's going to be 600 pixels and below let me close this curly brackets okay so let me actually shrink this a little bit more now here i'm going to get the about section image and the width here is going to be 80 and the margin inline is going to be auto okay and i'm going to grab everything as i did here that's the containers and i'm only going to reduce the gap to 2 ram and now we have this okay all right so let's actually see how they look on electron mobile phones and we have this which doesn't look uh we have a problem with the text let's see i think that should be from that problem should be in here it should be ramps okay yeah sorry about that so now everything is looking amazing all right that's on mobile phones on tablets that's how it's going to look perfect so now let's move on to the next page i'm going to close this about and let's head into the about the contact let's head into the contacts and and rather we're going to import all the stuff that we are going to need okay so we are going to need a header we need a header image so that is going to come from and we are going to need three icons okay so first we are going to have our header okay a header component and of course we need those props so the title is going to say we are going to have the image as well so image and that is going to be the header image and let's have something in between attacks okay that is going to be the children prop okay so i'm going to let's go to the uh that's context right and i'm going to copy this text come back and then paste it the something of the header is going to be a section the class of contact you're going to have a container and then contact container class let's have a dave with a class of contact wrapper okay that's where we are going to have our links okay first one is going to mail to and our email okay so here you're going to have your email right here okay and we're going to have that mail icon okay as a component here i'm going to actually give this a target of underscore blank so that it opens in a new tab and for react we have to add all right i'm going to duplicate this twice and this second one is going to be for messenger so facebook messenger when you log into your facebook and you go to your profile you're going to have the last part okay of the url that is going to be what you put in here so in my case i deleted my facebook account but i remember the previous one was a nest achiever okay and i'm going to bring in the messenger icon as a component all right the last one is going to be for whatsapp okay so one click of this link or this icon we showed or anyone clicking this should be able to message you okay so the whatsapp on their phone is going to be launched and then they can directly message you okay so this link is going to be https there's the link and the rest is going to be your number plus 233 remember to add your country code your area code or whatever and i'm going to pass in the icon as well all right so that's all we need here okay for our contact component so now let me actually push this up here so now we can proceed to the contact css and have this styled i'm going to make this smaller and contacts yeah so we can see so you can see we have them and on click of the mail my mail is going to open okay so that would be a visitor clicking on that and they can right away enter they can rather we enter subjects and the message okay and they can send it right here okay and you are going to be able to receive that for the whatsapp as well okay so they can right away entire message and then send it right here okay right same for the messenger but as i said i don't have a facebook account i can't really try this okay by should work okay so let's move on and install this i'm going to make this smaller and actually make this small as well okay yeah put this side by side and right we're going to get the contacts container and display that upgrade display great and i'm going to place items to the center let's target the contacts wrapper okay and give it a width of fate content and we are going to display that to be flex and have a gap of to run between the elements now let's get the contact wrapper and then the links inside of that so each of these icons are inside a link tag as you know right let's give them a background of the color primary font size of two ram border of two pixels solid and for now they are going to be transparent and also i'm going to have a transition okay since we are going to have f over effect so a transition of the transition variable okay let me actually give it some padding as well so a padding of two rim and actually you know what let me give it a border radius 1.5 frame perfect now let's give this some hover effects so one hover i want the background to be transparent and the border color to be the color gray 100 all right so on over we have this cohort effect now let's have a little bit of media query so this media query is only going to be for small screens or small windows or small devices or whatever i want to get the contact wrapper and the gap in between is going to be 1.5 frame and i'm going to get the contact wrapper link and the pattern is going to reduce to one ram i'm going to change the font size to 1.2 ram and the border radius is going to one rim so on tablets this one we have it's going to be the same for live screens and on mobile we have this okay perfect so that's it for our contact page or contact component let's move on to the next component which is going to be let me close this up so that's going to be the gallery component okay right away i'm going to bring in the step that we are going to need i'm going to return the jsx so let's wrap that inside the react fragments let's first have our header and we need to pass in a title so it is going to be we need our background image as well pause it as a prop so that's the header image okay and the chat and the children prop okay so let me come back here that's the gallery and i'm going to copy this i think that's actually too much okay i'm going to reduce it let me remove some stuff from here yeah that's all right from the finished project they should be okay and after that we are going to have a section with these images okay so let's actually save this and see what we have in our actual project let's go to our gallery here we have this right but i'm not going to import all the images one after the other that's going to waste too much time so i name the images in such a way that i can get them in an array okay and even in the data here i don't have the images imported for the gallery section okay so let's go into our images and i'm going to show you something real quick up here and we have gallery 1 to 15 okay so i can easily get this in inside an array okay so let's go back here in our gallery and i'm going to do something here okay i'm going to have let's have a constant here i'm going to say gallery length okay and i'm going to set that to 15. all right and i'm going to have an empty array here called images it's going to be an empty array and i'm going to use the for loop to name and push them into this array okay so for i is going to be zero i less than the gallery length i plus plus okay we are going to say images.push and we are going to use the require let's use template literal here so we are going to go into our images folder okay images and then we are going to get the gallery okay so we have gallery 1 2 3 4 5 up to 15 right so we can do gallery and then i okay so even here we can do i less than or equal to okay and here we can start with one this should be images okay and just so you see what is actually happening i'm going to console.log this images array okay so let's log that and come back to our projects um do we have a problem we probably do huh hello everyone yeah we didn't have that extension so jpg okay they all have that jpg extension so let's come back and refresh this and we should not have that error and we have the array okay so with 15 um elements right now you can say gallery one two three four five to fifteen so that is what we have in our image array all right so with this array i can actually map through and then show them okay show the images or fetch the images from the images folder right so i'm going to have a section with a class of gallery okay and in here i'm going to have the container class and a gallery container class as well and we can map through okay we can map through our images and let's get the index okay there's going to be a list so we need to have a unique key okay so we are going to return an article tag let's have the unique key so that i do not forget um so that is going to be the index and in here we are going to have the image okay and use template literal to say in gallery image and then the index plus one okay so image one two three four five up to fifteen all right so that is all we need to do here okay that is what we need to do here we save come back to our project and refresh just so we get rid of this yeah so we have our images okay and the images are pretty large that's why we are um it's taking too long to load right okay so that's how we can proceed and style this okay so let's go into our gallery css it is already already linked as you can see here so let's start this gallery section or gallery page now gallery component whatever you want to call it and you know what in order to save us some time i'm just going to paste the css okay it's pretty basic so we get the container we display grid and all that we've done this many times right so i'm just i'm just going to save and let's see what we have so we have this and we have a cool huawei effects as well okay so it is very basic you can do this so i'm going to once again show you the code so it starts from here and we have the media queries here as well okay so you can pause it and type this out all right so that's all let's actually see how that is going to look on mobile devices and on tablets so that's how it's going to look on tablets okay and on mobile that's how it's going to look all right now let's move on to the next component or the next page i don't want to waste too much time okay we've done a lot already so everything should be easily understood okay that is going to be the not found so let's quickly work on this right in here we are going to have one import apart from the css i'm going to import the link from the react router dom okay so react wrote that down right and we're going to return a section okay and we are not going to give it any class or anything but let's give it a david class of container and another class of notes found container okay now in here you're going to have an h1 you can make it an h2 if you want let's actually make it an h2 that's just going to say page now it's found okay and let's have a link it's going to go to the home page and let's give this a class okay there's going to be a button or at least we want it to look like a button so the btn class should be enough and let's just say go back home all right and that's all we need so let's quickly style this okay let's first see what we have so if you go to any page that doesn't exist okay we have this all right so let's quickly work on that i'm going to bring this on the on the right side let me actually showing this okay let's target the note found container and text align to the center let's give it a pattern top as well of each room let's save yeah we have that now let me shrink it even further and i'm going to grab the not found container again and the btn that's the button i'm going to give it a margin top of two ram and nothing seems to be happening so i'm just going to display a nine block okay we save and we have this okay so now if we click this we should go back home all right perfect so we have our above done the gallery done contacts done remaining the plan set in the trainers okay so let's work on the plans page or the plans component i'm going to bring this up you can now close these two let's go into our plans component and i'm going to pull up the data okay so that i show you something real quick um yeah we have our plans here that's the array so we have three objects in our array so the first one the second one and then third one and notice we have id name description pricing and features okay this featured this features is also an array with some objects so that's what we have okay and this applies to all three now for the features we have a feature with the text and then we check um we have available okay so some features are going to be available and some are not okay so some plus are going to have some features available right and some are not going to be available okay so not all features are going to be available for all plants if that makes sense right and we are going to use that to style it okay the only reason we have that is to help us style it well okay so if a feature is not available okay so if the available is false then we are going to have that grayed out okay as you can see here all right and for this plan all the features are available okay so they're available it's going to be true for all the features that we have here okay so as you can see they are true for all this okay but here some of them are false and here even more of them are false okay let me actually remove this comma from the last object all right so let's go back i can't even close this right let me leave it for now let's come back into our plans and i'm going to import some stuff that we are going to use all right so i just imported all the stuff that we need we need the header the header image the card we are going to use it here and we need the plans array from the data dot yes okay so in here i'm going to rub the stuff that we are going to need hold our jsx inside the react fragments and first you're going to have a head or a header sorry so we need to pass in our title and we need to have our image as well our image prop and that's going to be the header image okay all right let's have some text so i'm going to go to the finished project here and then copy this come back and then paste it save let's go to our actual working or the actual projector that we are working on and we have it okay beautiful now a sibling of this is going to be a section with the class of plants let's have our container and plants container class as well we are going to map through our plants okay so plan them up we can right away the structure the id the name the description the price and then the fee chase okay the features itself is going to be an array but we can get that here let's return some jsx okay so in this case you're going to return the card okay all right now since there's a list we should pass in a key a unique key in this case we're going to use the id that we destructed here okay let's actually give this card a class name of lan okay beautiful now in here we are going to have an h3 okay it's going to have the name of the plan you're going to have a small tag it's going to have the description of that plan okay just a brief description and we are going to have an h1 it's going to be the price okay so let's enter javascript mode here i'm going to use template literal just so we have the dollar sign okay so we are first going to have the dollar sign and the price okay now we had that we destructed here all right so what is the dollar sign and we are getting the price as well right now we are going to have an h2 um so h2 all right now we are going to have an h4 and that is going to save features okay and that's where we are going to map through our features as well so we can enter javascript mode again get our features that we are destructing here which is an array remember this features is an array itself so we can map through that okay just like we are doing here so features come up and let's destructure everything that we need here as well so we need a feature we need the available and because there's going to be a less let's get the index okay it's not going to change or anything so we can use the index for the unique key and here we are going to return a paragraph okay so a paragraph tag okay so let's give it a unique key it's going to be the index and let's actually give this a class name but this class name is going to vary okay depending on the available okay whether it's true or false but in here we can pass in the feature itself okay which is the text which is this feature okay okay so in here let's check if available is false okay if it is false then we are going to add this a board class okay if not or else we are going to have an empty coat perfect now let's see what we have so far okay not too bad i guess but outside this okay that is inside the card but outside of the loop we are going to have a button and this is not going to go anywhere that is why i'm making it a button you can make it go somewhere you can import the link from react router and make it go somewhere but i'm going to give this a class name of btn lg okay and it's going to say choose plan all right so we save come back to our project and that's what we have okay beautiful now that is all for the jsx we can proceed to actually style this okay so let's open our plan css and once again we we've wasted a lot of time on the css already so i'm just going to paste in the css for the plans as well okay this isn't too difficult to do so yeah i'm just going to paste it as i've done already okay so i'm just going to scroll through so that you can type it out or you can get a source code if you want okay so it is very basic all right so that's it now let's check it out and this is what we have okay perfect all right let's check it out on tablet and mobile phones as well okay looking amazing on mobile phones and let me quickly show you the disabled yeah right here okay so that is going to be the color gray 400 okay that is going to give it this kind of grayed out look you can give it an opacity as well if you want so yeah all right now let's move on to the next our last component or the last page the trainers okay so let's quickly move on to the trainers now let's check out the trainers and as you can see i have some constants okay for the images that we are going to need okay so each trainer is going to have its own image okay so we have one two three up to six so we have three uh six trainers you know you have the id image name job and the socials okay which is also an array all right so the socials have the links okay the social media handles for each trainer all right so let's proceed let's go back into our trainers and i'm going to import all the stuff that we need okay i'm going to do that off screen all right so i have everything imported i have my header i have my header image the trainers array from the data i have some social media icons as well imported okay so in here we have we should have our react fragments first we're going to our header so header so i had our components let's pass in our props okay so the title and let's pass in our image prop is going to be for the background so i'm going to just copy this that's probably too much but let's just keep that and we are going to have a section with a class of trainers and then with a class of container and trainers container right away we are going to map through the trainers okay so the trainers array them up we can right away the structure the id the image the name the job the socials as well which is also an array that we are going to move through later and let's return a trainer okay a trainer component which we haven't created yet right so let's go into our components folder and then create the components trainer singular.jsx okay let's have rafce remove this reacts imports and in here i'm going to import a card i'm going to expect some props okay so we will get the image the name the job and the social house all right now we are going to return the card okay in the card component let's actually give this a class name of trainer singular okay we are first going to have a div with a class of trainer image or trainer amg and that's our image okay so let's just pass in our image prop number from the structure and for the alts let's have the name of the trainer and also we are going to have an h3 that's going to have the name of the trainer as well and a paragraph that is going to have the job okay or the speciality or whatever the trainer does all right and below that we are going to have a div with a class of trainer socials okay so let's map through the socials array and here too we can right away the structure the icon the link and also i'm going to get the index okay senator is going to be let me have a comma here so there's going to be a list okay we need a unique key there and in here we're going to return an anchor tag okay now the href is going to be the link that we are restructuring let's give this a key okay unique that's the index that we are going to use and in here we are going to have our icon okay so i can and that is it okay but i'm actually going to give this a target so blank no opener we save so let's import trainer so we are important trainer from our component and trainer okay let's pass in the props okay the props that we are trying to get here okay so since there is also going to be a list we need a key a unique key that is going to be the id let's pass in the image that's going to be this image that we are the structure in here let's pass in the name prop that's also going to be this name let's pass in the job prop that's going to be the job that we are structuring here and lastly the socials okay so socials now for the socials i'm actually going to do something real quick here let me make this a self-closing tag okay the trainers or the trainer sorry and for the socials i'm going to going to have an array of objects here so i can it's going to be the first one is going to be the instagram i can so let's have that in as a component and the link okay which we are restructuring here in the home okay so we get a social setting we get the icon and then link as you can see here right so the link is going to be the socials the first element in the socials array okay so that's for one let's do two three four so we're going to have twitter facebook and then linkedin okay all right so this should be a second the index of one the index of two and then the index of three okay so this first this last one is going to have the linkedin link okay so in the data we have first one is going to be instagram as i said the last one is going to be the linkedin you have the second one as twitter and then the third one has facebook okay so this would be the actual handles of your trainers all right so that's what we are doing here let's save and then come back to our project and i have a big fat error import was not found bs instagram i'm important something different here instagram from real canvas yes this should be bs all right let's save come back and we should make sure we are returning this okay let's save come back to our projects and refresh this and we have our trainers okay perfect all right so let's move on to the css install this quickly and then get down with this okay let's move on to the trainer css for this one i'm going to type it out okay so let's get the trainer or the trainer's container okay and then takes let me put this on the side and here i'm going to display great the grade templates columns it's going to repeat three times one fr so let's actually have some space so space of i think forum should be good now i'm going to get the card trainer so the trainer which is the article right um i'm going to give it a pattern of one ram i'm going to reduce the part into one ram and let's proceed and engage the trainer image so trainer img that's the class we gave it let's give it a border radius of zero to ram we have to set the overflow to be heading to save this now we are going to get the the paragraph okay so trainer p and the margin top is going to be 0.5 frame the h or h3 let me confirm this yeah that's an h3 so trainer h3 i'm going to give that an imagine top of two rim this should actually come to the top let me put that on the top here okay so we have that now let's get the trainer socials okay and i'm going to display that to be flex give it a gap of one rim just for content to be center and align items to the center as well okay now i'm going to give it a margin of two ram zero so to run for the top and bottom and then zero for the left and right perfect right now let's target the links inside of it okay so the anchor tags and i'm going to give it a font size of 0.7 ram background i'm going to make that a 600 give it a pattern for 0.8 ram and the border radius 0.7 okay yeah we have that now we are going to have a hover effect so i'm going to give it a transition on the trend transition variable okay so on hover of the card okay on hover of the trainer i want to style this okay the background i want it to be the color bg 500 all right so let's save this and we have this okay we have this effect and i don't think this looks as early as in the finished project yeah so not bad that's all right okay you can keep this all right now let's make this responsive and that's going to be very basic so media queries it's going to be medium screens medium windows medium devices whatever you want to call it so add medium screen and come on max rape 1024 pixels that's for tablets i want to get the trainer's container and set the grid template columns to be one for our nfr okay and i'm going to change the gap as well to be 2.5 frame and that's what i'm going to do there so let's shrink this a little bit so on tablets that's how it's going to look okay now we're going to do a very similar thing for this small or for phones so this for tablets we're going to have another performance right so there's going to be small screens i'll close this yeah perfect then there's going to be 600 pixels the grid template columns is going to be wonderful i'll make this too real okay now i'm going to get the card okay and give it a width of 90 percent okay and imagine in line of auto so now let's see what we have on mobile we have this okay let's actually view this on an actual mobile render so it is going to be for tablets and on mobile you're going to have in this way okay beautiful so now we are basically done i don't have an internet connection right now as you can see and yeah that's all for the whole application guys that's all for this whole website that's all for the whole website and we can ignore these errors they are not actually errors from up or anything like that we have our plans okay and what else trainers of course we just created that all right now one last thing i want to do is this okay i want it to look as early as we have in the finished project okay i think i changed my mind but let's have it look as early as we have it here okay and also let's give it the background texture okay let's give our body the background texture so let me close all of these up and we are going to go to that's the home page css and let's go to the top so this blur i'm going to cut that and then bring it here and just remove this over effect okay let's save come back to our projects and that's what we have okay all right now let's give it up um background texture that's the body so let's go to our index css let me minimize all these okay so let's go into our index.css to the body and the background yeah the background we are going to give it a background url as well so let's go into our oh sorry let's go into our images and get bg texture okay i think that's what i called it so bg texture let's go into our images and then confirm that it's almost invisible okay it's very transparent so it's almost transparent rather so right here okay bg texture so we save this come back to our project and now it is exactly as the finished project okay you can see it is actually deployed all right so let's go back and this the project we just worked on perfect so now um we have a big fat problem here okay so on the homepage i think i imported the photo on the home right yeah okay so i'm going to remove this we are using you're using it outside the routes okay so perfect let's make sure i'm not having any other errors anyway on the pages on the other pages before we deploy this okay so everything is looking amazing now let's proceed to actually deploy this okay all right so to deploy our website let's log back into our hosting account and let's head into our age panel okay so let's go down to file manager let's click that let's click domains here and select the domain name be registered okay all right in here you should have public underscore html folder if you don't have it you can create one yourself okay and this is where our project is going to live okay now if you have anything here too you can delete it if you want all right so let's go back to our project that is in vs code i'm going to close everything okay and minimize this as well and let's go into our packet or json okay and i'm going to have my home page to be the domain name we registered okay so in this case um that is going to be a gaito tutorials right http all right um yeah let me have a comma and i can close this okay now let's make this app ready for production okay so we are going to run we are going to run npm run build okay and this build folder is what we are going to upload to the hostinger server all right so let's wait while this build is being created all right so everything is done but to make things easy i'm going to so this is the build um the build folder that we are going to upload okay the production folder all right so i'm going to compress that and this is what we are going to upload and after that we are going to um unzip it okay so let's come up here and then upload that zip zip file and upload that okay i selected and i upload and it's uploaded i can extract this okay i'm going to do dots and extract i can delete this zip file and move everything here into my main okay so i'm going to move let's go into our public and we can delete the build okay we don't have anything in it if i go into it there's nothing in the field okay so let's delete the build folder and now our size is live okay so let's test this out let's visit the site a ghetto tutorials right and as you can see the website is live okay everything is working as expected this brings us to the plans page okay everything is working as early as expected okay our testimonials as well you can go to the about and we have our kohu effects with the images as well our plans our gallery our trainers images are thinking about to load but everything is working as early as expected okay so now since i have an internet connection everything is working okay instagram actually i can't access it for some reason all right facebook and linkedin and all that okay perfect contacts as well so let's try the what's up and all that so the email should work as early as it did for production for the development okay we can enter a message and then send okay the facebook messenger should also work as well all right so that's all guys that's it for this whole project thanks for watching and i'm going to see you in the next project

Channel: EGATOR

Views: 203,938

Keywords: react js, react website tutorial, react tutorial, react, beginner react projects, react js tutorial, react js project tutorial for beginners, learn react js, responsive react navbar, react js project, react navbar responsive, react projects for beginners, react js crash course, react js 18 project tutorial, react router dom 6 tutorial, react router dom 6 project, react and react router project tutorial, responsive react js website tutorial, react 18, react router 6

Id: FiWby-T0Ec0

Length: 267min 51sec (16071 seconds)

Published: Wed Aug 10 2022