React Responsive Real Estate Website Tutorial Using ReactJs | React Projects for Beginners | Deploy

foreign [Music] [Music] foreign [Music] [Music] [Music] [Music] foreign [Music] [Music] [Music] [Music] foreign [Music] [Music] [Music] today we are going to build the best Real Estate website you can currently find on YouTube in terms of design responsiveness code style and many more and if this tutorial gets enough number of requests then I would make a full stack tutorial means we will include the back end as well so let me know down in the comments let's see what we are going to learn throughout this tutorial so first who will get to know how we can build a project from scratch like this we will also enhance our CSS skills by writing pure CSS you would get to know how you can make the responsive designs that look equally good on the tablet mobile and desktop screens on next we will learn how to manage the states and hooks in react we will also make a react Carousel by using the swiper JS the famous Library and then we will use the framework motion for a little bit of Animation in our hero section at the last here comes the most important part deployment we will get to know how we can deploy over such kind of front-end projects so you can show off them to your potential clients your friends and anyone you want so without taking more time let's start building this website but until I roll the intro make sure you hit the like And subscribe button it would encourage me to make more content for you guys so make sure you hit those buttons let's get started so first thing first let's see what are the requirements for making this project the very first thing you have to do is to install a stable version of node.js into your machine so here I have written very simple query node.js download and on the very first link here you can download the windows version of node.js if you are on Windows otherwise on the Mac OS you can try this one and on the Linux you can download this one as I am on the window so I would simply install this one by clicking on this the installation would start but as I have already installed this so I am just canceling this by the way on your side if you have not already installed then you should install from this setup it's very simple like the next next 10 install now to confirm the installation here I would go to my Powershell okay inside the Powershell uh here I am writing a command node minus b means what the version of installed node.js and it is saying 18.14.0 means the node installed correctly now the next thing you have to install is the yarn package manager you can install by writing npm then I and minus G for the global installation flag and write yarn it would install the yarn package manager globally on your machine okay as it is already installed so it did not so it did not take so much time on my side but on your machine for the first time it could take around one minute or maybe less depends on your internet connection okay now let's close this and here I am in a blank vs code directory now I am not going to do the traditional npm create react app because it would take a lot of time and I don't want you people to spend so much time just deleting the default settings that come up with the create react app so instead of this what I am going to do here I have made a GitHub repository with the name of real estate web starter pack currently it's private Ben but at the time of publishing this video I would make it as public so what you have to do you just have to copy this URL and then in the terminal write git clone paste the URL and then full stop and backslash hit the enter buttons the full stop with the backslash would clone this repository directly in this folder so when I hit the enter button okay it's cloning here and it won't take so much time yeah so here the step of cloning is successfully completed let's close the terminal by pressing Ctrl J and here what comes here here just the very basic structure of a react app but while explaining the starter pack I would like to start the installation so here I just simply write yarn and what it will do it will install all the required packages so which are required to complete this tutorial at once so when I hit the enter button after writing the yarn what it is doing it is reading the package.json and here I have specified all the required dependencies that are necessary for making this video and all of these dependencies are installed at once so we would not have to install again and again okay so now let's explain what is this starter pack in the starter pack the first thing you get is the index.html which is the very basic structure of any website having the title of real estate and the basic boilerplate nothing special and then inside the app.jsx we are having a very very basic react component which is only saying subscribes and keeps code and yeah you definitely do this now on the next we have index.css in the index.css what I did I have defined some variables which are mostly the colors because by doing so we would not have to write the colors code manually so it would be faster in the tutorial and here again it's a gradient color and it's the shadow of a deal nothing so much and then this is a very margin 0 padding zero the basic setup of a page and similarly all of these properties I would explain you you when we are going to use them in the video so nothing of them is so much complicated as you can have an idea this is just a flex and setting of any div and similarly all the other property now the next step how we have to start this project again open the terminal by pressing Ctrl J and in the terminal first I am going to clear my terminal and here write yarn run Dev and hit the enter button so now it is running our wheat server and here it is saying localhost 5173 Port you see how fast that was because we are using veed for this project which is very very you can say much faster than the create react app so just control and click on this URL and here our project is successfully running as it is saying subscribes and keep score if I zoom and this is the same thing that I had written in my app.jsx if I visit my app.jsx here it is saying subscribes and keeps code okay the only thing that remained is the utils folder inside the utils folder I have first of all slider.json as you remember when I get the demo of our completed website there was a carousel so the data for that Carousel is here it's just simply an array of objects I would explain it when we are going to use this and similarly this is the accordion data as we are also making accordion in our website so it's just simply a starter data with that being said let's actually start our tutorial let's actually start coding now here is the deployed version of our website and when I look at this website the first thing that comes in my mind is the font family so I have to import this font family from the Google fonts so I am going to the Google fonts and here I would search for a font whose name is Poppins so it is basically a very famous font and here in the Poppins family okay I would take it some variance the first variant should be the 400 regular 400 and then the 500 the 600 and I would also like to take the 700 okay so here it has made some code for me I just have to copy all of this code and in my index.html after this meta tag in my index.html I am pasting this code that is generated by Google font it's just a link for these fonts let's save this okay so now if I again visit the Google font here you can see at that it is saying to use this font you have to specify this CSS rule the font family equals to pop-ins otherwise sensitive so it is already enabled as if I go to index.css which comes with the starter pack for all of the devs I have specified font family Poppins already so you won't have to do this step but if you are making an other project from the very scratch then you have to specify this one okay so now yeah I am saving this and let's see at the results this is our under development version if if I see this now the font is enabled as yeah this font is exactly same as it is okay now start making the components in our website so I am closing the Google phones this URL this URL and there are only two tabs the under development and the developed version cool so let's close the index.html and the first step is the app.jsx here I am removing this I am making a div with the class name of app and here I would say simply app let's see and in the SRC I am making a new folder with the name of components in the components I am again make I am again making a new folder with the name of hero section so inside the hero I am making a file with the name of hero dot GSX and and other file with the name of hero.css yes you are predicting rightly the in one file we are only going to write only the CSS while in the second one we are going to write the GSX component but as there is a hero section so similarly we would also have to make an other folder for the header section so inside the header again make two files header dot GSX and header.css okay so we are going to start from the very beginning from the header so in the header.jsx right rafce for the react fat Arrow function and it's a shortcut that you can make enable by right by installing an extension and extension name is es6 so Yeah by installing this extension you can also enable this type of shortcuts short Snippets so okay now let's save this one and inside the app.jsx and here instead of simply saying this app I am going to import the header so import header by the way it's also giving me odd suggestion so I can use it but for the first component I am doing it manually so from the components go to the header folder and yeah import this header.gsx now I can write this component like this let's save this and see the results in browser now it is saying header means the component is imported successfully here I am removing this pre-built div and first of all make a section and for this section I am giving it a class name of header wrapper means the edge wrapper inside this I am making a div with the class name of H container means the header container and then the first thing should be the logo so I am writing the image by the way one thing that I forgot to explain that inside of a directory inside the public folder I have pasted all the images that are required for this tutorial they come by default with the starter pack so when you are cloning the starter package means you are also cloning these images so from these images now I am going to use this logo dot PNG okay so you can easily access by just writing a DOT and then backslash logo dot PNG and for its alt I am going to say it as logo and I would give it a width of 100 so let's make text a little bit small okay like this now after the logo the second thing should be the menu like where we are seeing residencies or values like those things so for that I am saying header menu inside the header menu I would make the five links so a multiply by 5 and let's format this by pressing shift alt F okay there is some kind of material uh yeah now it's good okay by the way for the hrf attribute I would specify them at the end of the tutorial uh for now I'm just giving them some headings like the first one should be the residencies then the second one should be our value similarly the third one is contact us and then get started so here I can write the get started and at the last we should have a button of saying contact so instead of just simply saying it is a I wouldn't close it inside a button tag okay so let's format It Again by shift alt F and then for this one I am giving it a class name of button let's save this now why I'm doing this yeah here you can see uh I should make it to 100 percent but it would be so small yeah here is our total menu uh there is our logo and there is the button if I go to the developed version here you can see these are the menu icon these are the menu items this is the button of contact and this is the logo so we have to give structure like this for making a structure like this what I have to do first I have to make this container as a flexbox in the developed version all of these items means the all of in the developed version all of these things are aligned on the center and are aligned with the specific gap between the menu items so there is a very particular alignment to achieve that I have to make the header as a flex box so how can I do this the first thing is I can do this by writing in the header CSS that is the header container make display flex line item Center and then justify content Center but if I do it again and again for many divs then it would not make a good impact so instead of doing this I can use my index.css by the way I forgot here we should also import the CSS by saying in the relative folder import the header.css okay let's save this I am removing this one for now and what cut what could I do here I am going to index.css opening it here and yeah here if you see I have made some classes the first one is flex Center whenever you would specify the flex Center what it would do it would make the display Flex with the row gap of 2 REM content Center item centers and the flex wrap as wrap so I'm going to use this class here on my container I would simply say select Center and then the second thing I could say is as the padding so what is the paddings similarly as we have the flex Center we are also having the paddings class as I want that the padding between all sections should be consistent so I am just going to use this padding everywhere in my website so it won't be inconsistent over website would be particularly aligned okay and then the last thing is I would want to specify the inner bit so let's see what is the inner weight inner width a is the width 100 percent on the normal screen sizes but when it goes to the very used screens like the more than 1500 pixels then it is saying the inner width should be maximum of 1280 pixels and the margin Auto and similar case is for the paddings okay so let's focus on the inner width right now as you know the current screen has a huge width on which we are currently seeing the tutorial so our website is aligned and consistent between the screen means in the very center of the screen it is not spanning towards the end of the screens like if I am on a small screen then it is automatically adjusting its size to the end of the screens but when I'm on a very large bit then it is in the center of the screen for making its design consistency so for achieving this effect what I did I have used this inner bit so it would take control of the bit I have specified it here now let's save this also I am going to header.css and I am targeting Edge wrapper for its background color I would like to use our variable black one like this one okay yeah let's save this let's save this and see here here you can see it is consistent and we are not able to see anything right now but we can fix this by writing very simple thing that the color of the text should be uh sorry white inside the header so now yeah everything is visible okay the second thing I would want to do here for the edge menu as it is the line item and justify Center so there is no gap between the items but we want the Gap sorry not the menu but the container yeah my bad okay for the container I would say justify content space between let's save and yeah now they are at the end of the screens and this time is to do some paddings more so I would say padding top should be one REM with the padding bottom of one REM it would increase the padding and then I would say the color of anything inside this container should be our variable secondary color let's save this and yeah now you can see now the opacity of color is a little bit lower than the white color so it is our secondary variable here okay the next thing I would do is to Target our H menu and for this menu I am saying the gap between the items should be 2 REM and whenever we are going to hover at anything inside this menu means when we are going to hover at any a tag so here I can specify like this then I would want to make cursor as the pointer let's save this and see here okay I think the Gap is not applied and let's see why okay the edge menu is here the edge menu yeah the Gap is not applied because on the edge and because on the edge menu we have not made it as Flex Center let's save this and that's it now the last thing is to style over this button of contact so how can I style this button so as you can see in the developed version we are using the button many times first we are using button here then we are using the button here then we are using the button here and then we are also using the buttons here so instead of writing the CSS for the button specifically only for the header I would like to write the CSS of this button for the complete website so for writing the button for the complete website inside the index.css after this means on the top of the media queries here I am making a class of button as I have given the class name of button here so it would take the styling from the index.css for this one I would say font weight of 500 with the padding of 0.6 RM and 1.4 RM 1.4 RM from left and right and point six from top and bottom after this the color of text within this one should be the white with the background color not the background color but here we would take the background so background is our gradient which is blue gradient yeah after this one I would say the Border should be none with the Border radius of 4 pixels and then I am applying a transition property because we are scaling the button upward on hovering so for giving the smooth effect on hovering I am missing all 300 Ms is in it would produce a smooth easing effect when we are going to hover and the button is scaling so for that scaling up effect I am going to say the button on hovering should be cursor should be the pointer and it should be transformed to scale up to 1.1 percent let's save this now let's see in the under development yeah our button is exactly like what we like to have this is the developed version and this is our website so our header for the desktop version is completed now we would move towards this hero section and then we will see how can how we can make this blur effect and how all these things are working let's see I am making this side a little bit smaller and in the hero.gsx again write rafce okay now remove this and here write section dot again here I can write it as hero wrapper I am not saying it as only Edge wrapper because I have already used H wrapper here in the header so I would say it as a hero wrapper now inside this what I would like to have is first of all the paddings then the inner width after this I would say it as the hero container yeah and I think that's enough but it would be better if I could also make it as Flex Center I think as we also have to modify the hero container so it would be better if we write the flex Center behind the hero container so that the hero container can override the properties of flex Center if we need okay now let's have a look at the developed version in the developed version we can easily identify that there are two parts of the hero section the first one the left and then the right one in the right we are simply having an image while on the left we are having a many things like the title then description a search box and these numbers that are actually moving if I refresh here you can see these numbers are actually moving so to make this effect we would again use a library but for now our focus is on this right side okay so what I would do here in this first I would say as hero left and inside this I am just saying left section and then I am also making a div for this one I am saying as hero right okay now let's see what could we do in the hero right first of all for this I would make it as Flex Center so everything would be align item Center and justify content Center by default and then I'm making a div for which I am giving a class name of image container now inside the image container I would need an image so for that image I would say heroimage dot PNG that I am again having inside the public folder here hero image dot PNG by the way just like just have a look so it is a scary image and if we have a look at developed version it is having the Border as rounded so let's see how we can make this now it's time to make the CSS so inside the hero.css here I am targeting the hero wrapper the most parent class first for this one I am making the color as white and then I am making the position as relative with the padding bottom of 2 REM now let's move to the hero container so for the hero container I would say justify content space between because if you look here the content is separated on the sides of the screen so therefore we have to make it as justify content space between then the Align items Flex send let's save this now I am making a comment and inside the comment I am saying the right side I am directly targeting the image container here and making the width of this container as 30 REM with the height of 35 REM the Overflow should be hidden because as we know the image is secure but the container should be rounded from the top corners so we have to make the Overflow hidden after this the Border radius is the most interesting thing because the 15 REM for the top right 15 REM for the left right and then 0 and 0 for the bottom corners now the Border should be 8 pixels solid and then I am giving it a manual value and the value is two five five two five five two five five with the opacity of I think 0.112 yeah and let's adjust the sizes okay let's save this and see the results okay I forgot to import the hero section inside our app.jsx which is the most important thing to see the result again go to app.jsx after the header I would write hero and it is giving me out of suggestion so I'm just clicking on this and it is auto imported on the top by the way if Auto importing is not working on your machine then just simply write this manually okay and close this component let's save this and now expect the results okay I think there is something missing and I am already predicting that I forgot to import the hero CSS now it should be better yeah I am clearly having a container which is having the corners as we want but the image is not in the correct position so let's see what can we do for this image uh here I am writing a style that inside image container I am having an image as you can see this is the image container and here I am having the image so I'm targeting this image making the width 100 and the height 100 of the parent container now it should work yeah now this is exactly what we want but again the very important thing that we are missing is the background color of our hero section so here I would say the background color is our variable black let's say this now we can see this is the left section and the right section is ready according to the developed thing okay so now let's move towards the left section and see how we can make contents here it would be better if I make a comment here and say it as the right side let's format The Code by shift alt F by the way for the formatting of the code I am using a very popular extension with the name of pretty tier okay I think my internet connection is lost so by the way the name of extension is prettier you can easily find it in the marketplace in the extension in your inbuilt vs code Market section okay similarly I am also making the command for the left side so left side like this now instead of just simply saying the left side the first thing we have to make is the title on the left so I would say hero title and inside the hero title I am simply making an H1 heading inside the H1 heading I am giving what we have let's just copy and paste so there won't be a mistake discover more suitable property so just copy and paste it here format the code again and after the Discover I would like to have a line break and then similarly after the most suitable I would again have a line break let's form in the code again by shift alt F okay let's save this and see in the ER development version okay here we have this the next thing is to have the description like we have this one so for making this description after the hero title I am making the hero description and for this description I would make the two spans and inside these spans I am simply copy and pasting some text that you can also do from this video okay this is the first text and then this one is the second text okay so these are the two texts that I have written and now let's see in the developed version the third thing is to have this input bar so for now I am just saying it as search bar and here I am saying search bar we would make it on the letter and let's see what are the results this is the result that I am seeing here as we not at the right side of our hero section has moved down so we have to figure why this happened because here I have made two spans and the width of span has become so much larger so to accommodate the space the right side has moved towards the downside so now how can I fix this okay in the code what if I make this description as Flex call and then start means the flex with the direction of column and the justify content at Center if I move towards index.css and let's see yeah here is the flex call sent here the flex call start means the display Flex Direction column justify content Center and align item starts so before my mistake not the justify content start but the line items at the start so now if I save this okay so yeah here you can see the hero section is again in the alignment but what if I make this hero left also the flex call start okay because I want all the items in the column Direction with the display flex and the line items at the start so I am simply writing it like this now for this title I have to do some manual CSS so on the top of this right side here and now I am saying the left side and for this left side I am writing the hero left for first thing I am making the gap of 3 RM between all the elements now I am targeting the title and for the title I am making the position relative with the Z index of one why I am doing so because if I have a look at the developed version you can see I have a orange div means the orange circle in the background of the title so I'm going to make this position absolute relative to this title therefore I have declared the position as reality for the hero title but we would see later how we are going to make this circle first let's style the title means that when heading so in the hero title I have an H1 heading for that make the font weight of 600 with the font size of 3.8 REM and the line height of 4 RDM let's save this and let's see okay yeah we are achieving what we require and now I am going to make that orange circle so here I am making a div giving it a class name of orange circle and let's make itself closing div like this okay here uh now I'm going to style this so for the orange Circle like this make the height of 4 REM width of 4 REM let's make the font bigger yeah like this and then I am giving it a background so for the background again I am using my variable with the orange gradient like this with the Border radius of 999 pixel you can also use the 100 percent so the position absolute let's save this and I think it's not applied let's see okay here is the orange circle is there anything that I have missed here yeah the spelling is not correct here I have to make the r and now here I am having this circle okay so yeah the alignment is not correct for position for making the position correct I am giving the right as 28 percent and then with the top of uh I think minus ten percent let's save this and see okay now it's in correct position but still there is something wrong with the index so I am giving it a z index of minus 1 here and for my title I have given the Z index of one so now it should be behind the title yeah now our title is in the most correct form as we have here so similarly we are having here within this search bar the first thing that we want is a location icon so here I am importing the H allocation marker from the react icons I have to import it manually and then I am giving it a color of our variable blue yes we can use our sketches variable inside our jsx and then I am giving it a size of 25 pixels now as I have to import this so just copy this name and on the veggie top I would write import this icon from react icons and from the hi directory let's save this and see yeah the icon is successfully imported if I have a look at a developed version I have an Ike I have an icon then I am having an input and then I am having this button so let's complete all these requirements Now icon is imported the second thing should be the input yeah with the type text and now I am making a button with the class name of button and inside this I am just simply saying search let's see our version here I have it's time to style the search bar okay so after this orange circle here I am saying our search bar let's make it bigger like this for the search bar again I am having the background color as white with the Border radius of 5 pixel and now I am giving it a border of 3 pixel solid with a custom color so I'm giving it a value of 120 120 120 with the opacity of 0.374 and after this make the padding 0.5 REM from the top and bottom and one REM from left and right with the justify content space between let's save this and see here yeah now I have to fix this input bar so for fixing this input bar here I would say inside the search bar I have an input for that one make the Border none and also the outline none let's save this yeah now it's looking good but what I am feeling that there is something missing which is the alignment of this search bar so for the alignment of the search bar here in the class name I would give it Flex Center let's save this and yeah now the alignment is also perfect but still I am having some issue with the width of this input bar so what I would do here for this search bar I would save width as 100 let's save and yeah now it's looking perfect the next thing is to make the counting up numbers so for those counting up numbers this is our search bar I am minimizing this I am minimizing [Music] this description here and after the search bar we are good to go with the stats means those numbers so here I am making a div with the flex Center and giving the name of stats for this team as we know there would be three stats if we have a look at a developed version the first stat is the number of Premium products then the happy customers and finally the award winning so there are three stats let's focus on the very first stat for now so for the first that I would use the class name of Lex call start and giving this div the name of stat inside this I would make the two spans So within the second span I am simply having the name of stat which is the premium products and in the first pen I would use the count up library which we have installed at the start of tutorial actually it is automatically installed when we were installing already Tendencies okay so for the count up numbers here it takes two parameters the first parameter is the start and then the second parameter is the end so for the end I would say as nine thousand so I am saying start the counting from 88 000 and take it up to the ninety thousand uh I think I have made it so much large it is 8 800 and 9000 sorry yeah is the correct one now what should be the duration of this animation I am saying the duration should be only four seconds after discounting up number I would also like to have a plus icon in front of these numbers so let's save this of course we have to import this counter so on the very top count up uh yeah count Tab and not from this it's a wrong or the suggestion there should be simply react counter yeah like this one let's save this and see the results in the browser here and yeah the number is increasing it's working perfectly now if I similarly make two more stats so this is first that I am minimizing this copying this and below I am pasting this one and for the second one I am saying start from 1950 and take it up to that 2000 and again the duration is same but now here I am saying happy customers happy customers okay and just minimize it similarly again copy this stat div and I'm pasting it for the third time and here I am removing this start parameter and only saying that take it up to the number 28 with the duration uh I can also skip the duration here because it's very small counting okay and then here I would like to say award winnings or simply award winning let's save this and if I refresh my page here you can see all of these numbers are counting up it's time to style these divs now let's go to our vs code here inside the CSS and after this search bar styling here I am targeting the stats div making the width as 100 percent and that the justify content space between now inside the stat I have the first child which is the I think yeah the first child is the actually number so for the numbers I am giving the font size of 2 REM after this I am saying again go to the stat go to the nth child the first child inside this go to the last child so what I am basically targeting here if I have a look at the GSX this is the stat inside the stat I have this panel the first child and then this plus one sorry only the plus is the last child okay so I am ultimately I am targeting this plus sign here so what I am saying for this plus sign simply make its color as Orange let's save this now see these numbers they are looking very perfect but the spacing is something which is not very good okay so let's see what we have messed up here uh where are these pens okay this is the hero description then search bar okay this is our first stat okay here I I would like to give it a class name of secondary text that we have made in our index.css here if I have a look at secondary text it is having the font size of 0.9 REM with this color a type of gray color uh with less opacity okay so uh just copy this class name and inside the second span again I am using it here and then for the third one I am using it here let's save this [Music] and yeah yeah still it is having some problem with the alignment of the number and this description so what could I do more if instead of having this Flex call start if I use flex call center then it should fix our problem yeah it is fixing our problem so I am copying this and then here I am pasting this and on the third one again I'm pasting this let's save this now everything is up to the mark and our hero section is almost completed but still this description have to be styled okay if I have a look at a developed version this is also the secondary text so let's go to the description this is our hero description and for both of these I I could say here as secondary text just copy this and for the second span simply paste it let's save and have a look here refresh here now everything is looking perfect the only thing is meaning is to add this white gradient behind the hero section and this header so let's see how we can do this for doing this I am going to my app.jsx and here I am making a div okay now the header and hero should be enclosed under this div so why I am doing so because if we have a look at the developed version you can see the blur is the gradient is spanned between the hero section and the header so you have to make an alignment that is common between the header and between the hero section for achieving this effect I am making a div around both of header and hero and then here I am making a deal giving it a class name of white gradient and then making it a self closing tip the next thing that can I do do inside the hero.css I am going to vary top and removing the background color from here and similarly for the index.css I am removing the background color for here then I'm closing all the things here inside the SRC I'm making a new file with the name of app.css okay I am targeting app as the first you can say the most parent element making the position relative and overflow acts as clip for this okay now what I am saying I am saying inside the app I have its nth child one so when I am saying the first child it means I am targeting this div that we have made as a wrapper around the header hero and this white gradient now for this common I am making the background as our variable black like this and then again the position relative let's see of the results of doing this okay okay so still there are no results because we have not imported type.css it's my bad I always forget to import the CSS in the relative jsx so now it should be okay yeah now it's looking same as the previous one the next thing I have to do I have to style this white gradient so here I am writing the white gradient for this one make the position absolute with the width of 20 RM height of 20 REM and now I am giving it a background color not the background color but only the background because these actually the color would also work if it's not a gradient but mostly I prefer giving the background not the background color because I am mostly using the gradients in many of my projects okay then this is the important property of filter with the blur value of 100 pixel this is the thing that would make it as a gradient if I uncomment this and see the results here so here is the result without giving the property of filter it is looking like this one and now if I enable this filter property with the blur value of 100 pixels now it is looking like this I would also want to give it some border radius so uh although it's not making too much difference but it's always good to give about radius okay so now it is exactly looking like our developed version everything is in its correct position the next thing we have to do is to enable the logos of different companies as we have in the developed version we have the four logo so let's see how we can make such type of logos here in our version so actually it's very easy to make this inside the components I am simply making a folder with the name of companies inside the company make a GSX for this one so companies Dot jsx and then a CSS u m p n i e s dot CSS like this open them side by side and inside the jsx light rafce okay imported CSS here so import sorry from the relative [Music] companies dot CSS like this and now we have to import these companies component inside the app.jsx so after this div here I am importing companies so here it is giving me an auto suggestion I am accepting this sort of suggestion let's save this and see the results here it is saying companies means the component is successfully imported okay again go back to the companies and instead of this default text I am making a section with the class name of companies wrapper C rapper and then I am making a div giving it default paddings with some inner width like this and then Flex Center and C container means the company's container okay now inside these companies container I am simply pasting four images you can do this from this video all of these images again coming from the public folder which is here so I am importing these four Images one by one let's format the code let's save this and see the results so here these are the four logos now we have to style this it's only the container for the container make justify content space around okay space around like this with the gap of one REM and then I am again targeting the images inside this container and making the widths of each logo as 9 RDM let's save this and here we are done this is the total logo section means this is a total company's component it's exactly looking like our developed version so this is completed now let's move towards our next section which is this Carousel actually here we have used the swiper JS for making these custom buttons for making this custom behavior of the cards that are embedded in the carousel so this is very interesting component to see that how we can build this let's start the building of this component for making the carousel let's go to the directory and inside the components folder I am making a new folder with the name of residencies I am just giving the name on the basis of its heading and then inside the residencies make a new file for its jsx and other one for its CSS so let me make it quickly here okay let's open them side by side like this and in the jsx I am writing rfce for the fat react Arrow function and also I am importing all the required packages here for making the carousel so here's first of all write the swiper which is very famous library for making the Carousel and it is the most stable one as far as I use different libraries and then we have to import it from the swiper react directory so we have basically imported three classes swiper swiper slide and two swiper these are the components from the swiper react okay now we have to import the CSS for this Carousel which is built in from the library and you can import it by writing import swiper slash CSS now I am importing our own CSS residencies.css like this and then the last thing we have to import the data for our sliders so for that here I am writing import data from go outside then outside and then inside the utils I have slider.json if you remember the slider.json comes with the starter pack here inside the utils I have the slider.json if I open it you will see it's a simple array and it's an array of objects let's try to map these objects on our developed version so we can have more understanding about this data so first of all we are having the name of the property and then the price now let's open our developed version here you can see we have the name of property and the price of that property then I am having the detail and the image image is basically the path where it lies if I open the public folder here you can see I have R1 dot PNG R2 so I am specifying that path in the image so similarly I have the second property three four five six and if I have a developed one again here you can see I have 4 5 and 6 properties that are mapped according to this data so therefore I am importing this data inside my component and now let's remove this pre-built section and here write the section dot or wrapper and inside this simply I am simply writing residencies like this let's save this and try to import it in our app.jsx in the app.jsx after companies here I am writing residencies and it is giving me artificiation which is I am importing again if it is not working on your vs code sometime it doesn't work because of some slow machines and maybe other causes so you can import it manually by writing this line okay let's save this and see our development version Here Comes The Residency means the component is imported successfully now let's get back to the GSX remove this dummy text of residences and I am making a div with the class name of paddings to apply the default paddings with the inner wish to make it Center on the huge bits and then the parent name of our containers means The Residency is container the first thing I am going to make is the head so for the head I am writing our head and I would also like to give it Flex all start to make the headings in the column Direction and with the Align items at the start okay so why I am doing so if I look at the developed version here you can see in the heading I have two spans the best choices and the popular residencies I have made them in a column Direction and also to start them from the start of flex therefore I have written this class name okay said let's make the two spend inside it the first pen is saying best choices and the second span is saying popular residencies okay let's format The Code by pressing shift alt F let's save this and try to write the CSS for this section so here I am targeting the r head inside this I am only a very simple styling of margin bottom 2 REM let's save this and see the results in the development version yeah here I have the two taxes let's give these spans some class names to apply some stylings on them so here I am giving a class name of orange text if you look at the index.css here I have a pre-written orange text class which is doing nothing but giving the color of orange and the font size of 1.5 RM with the font weight of 600. now similarly I am going to give the class name of primary text which is also a pre-written class in the index.css with this color code the font weight of pole and the font size of 2 REM let's save this and see the results yes both of the spans are styled now let's make the carousel so for making the carousel after this head here I am using the swiper component and inside the swiper component I would map through the data so to iterate through the data we have imported I would use the JavaScript so data dot map and while mapping I am saying each object in Diary as card I as its index number and then what it should return it should return a swiper slide yeah and inside the swiper slide I am making a div with the class name of residency card okay so as we have used the I and in the JavaScript when you are mapping so it's important to give a unique key to eat children so here I am giving a key of i as the index number so it would not raise our warning in the console which is actually very irritating now if I look at the developed version here the first thing in the card of a residency we have the image of that residency and then the price so let's clear these two things first so inside the card I would say make an image and fold the source of this image use the car dot image as we have in the slider.json we have the image attribute so I am using that attribute here and for resolved attribute I am simply giving this home image okay and then to make the price I'm making a span with the class name of secondary text and our price okay inside our price I'm making two spans now inside the first pen simply make the dollar sign while in the second span use the car dot price yeah let's save this and see the results now in the development version here I have the image here I am having the price of The Residency and they are actually sliding like a carousel means our component is working fine the only thing remaining is to style our cards for this dollar sign I would like to give it a style of very simple color make the orange let's save this also format the code next thing is to display the name so for displaying the name I am using the car dot name and also we can use the pre-built class here so here I am using the primary text let's copy and paste this and for the second one I am using the detail chord or detail and for this one I am using the secondary text class name let's save this and see if everything is rendering yeah everything is rendering let's move to the CSS part now I am targeting the r card and inside the r card giving the gap of 0.6 RM as I am giving the Gap so the div should be a display Flex so therefore here in the r card I am giving a pre-built class of flex call start so that everything would be in the column Direction and with the Align items at the start of our Flex box okay so let's save this also save the jsx see the results here yeah now these things are in the column Direction the next thing I would like to give is the padding of one REM with the Border radius of 10 pixels to the most parenting of the card with the maximum width is maximum content and the margin should be Auto so that slides can be aligned Center if the screen are relatively small and the last thing is to apply the transition so for the transition I am showing on all type of movements make the duration of 300 Ms with the type of ease in animation let's save this and see okay still now we don't have much to see the changes because we have not directly changed anything inside the car jet we are just changing the properties of its parent name okay now actually try to Target the elements inside the car so inside the card I am targeting the image for the image making the width 100 of the parent div with the maximum bridge that a card can attain in as the 15 REM let's save this and yeah now it's looking very good after this I am targeting the second child inside our cards so here I will write the nth Child 2 and what is our nth child two if I have a look here the second child is this one the price tip so for the price tip I am saying make the font size of 1.2 RM and a font weight of 600. let's save this and yeah our price is now looking good similarly I am going to Target the third child inside our R card so here I am copying pasting changing 2 to 3 and making the font size of 1.5 RM now similarly Target the fourth child so for the fourth child again copy and paste like this by the way third child is this one the name of our card and the fourth child is the detail okay so now for the fourth child again I am making the font size of 0.7 REM with the width of 15 REM let's save this and see the results here we are if I have a look at the developed version our card is almost in a perfect shape as we have here the only thing is meaning to give the hover effect on this card and also make the alignments as the four cards on the large weight and then make the number of cards smaller on the small screens but we would handle it on letter first make the hover effect on these cards okay because still now we have no hover effect so for making the hover effect here I am getting again the r card and I'm seeing on Hover any of it make the scaling about 1.025 percent with the cursor as pointer then the background color the background color is the most important thing to notice here as I am giving to give a linear gradient color here like this one you can copy and paste by pausing this video and then I am giving a box Shadow for the Box Shadow you can repeat this step by copy and pasting and pausing this video I am writing it directly to save the time so this is our background gradient color and this is our back box Shadow on hovering the card let's save this and see if it is applied or not yes our cards are giving a beautiful hover effect but there is a problem that I am noticing here look at the developed version first when I am hovering the shadow behind this card is looking perfect but on our development version I am not able to see the shadow why I am not able to see the shadow because our div is restricting the Overflow this is the class which is built in the swiper and it is restricting our shadow property so we have to modify a built-in class so here after our horror effect I would say the swiper horizontal container should make the Overflow as visible let's save this and now yes our shadow is visible behind the card similarly you can inspect any other classes in any pre-built library and you can modify that Library according to your needs as I just did okay so the next thing is to make the number of slides correct on the large screens and similarly for the small screen for that thing what I would do here inside the utils folder I would make a new file with the name of common dot GS and inside the common dot JS I am exporting the slider settings Slide the settings and here the first setting is slide so it slides per view slides per view should be equal to 1 space between the slides by default should be the 50 pixels and then I am still showing the breakpoint which is the most important thing to look here okay so break point what is this now I am going to specify the width of different screens and I would say on that type of screen show this number of slides and then on the other type of screen show other number of slides so first of all I am targeting smaller screens like the 480 pixels on the maximum width of 480 pixels show the slides per view up to one then the next thing okay we should have put a comma here and then for the 600 pixels make the slides per view as the two similarly for the 750 lights per view should be 3 on maximum 750 and then on the 1100 pixels make the slides per view as four let's save this now I am going to import this in the residencies.jsx again on the very top here I would write slider settings and it is giving me out of suggestions so I am accepting this and yeah here the part is correct so I would hope that so I hope that it would work perfectly okay now in the swiper I am saying just desstructure our slider settings so all of these things that we have specified in the slider settings uh would be de-structured as the props in the parent component let's save this and see the results okay uh we should refresh the page and yeah here we are we are having the four number of slides in the center of our screen but there is a problem because we are allowing the power flow therefore uh we are able to see the slides that should not be in the view like this one and now this is the most left side and the most right side slide should not win the view so for fixing this problem what I would do here on the very top I would say our container that is our most parent div and for that one make the Overflow as hidden let's save this and now see yeah now it's looking perfect the next thing is to make the buttons like we have in a developed version we have two buttons so let's see how we can make them for making these buttons here in the most parent component before rendering our slides here I am making a component as slider buttons okay now I am going to make this component because we have to Define it so as slider buttons making it as a jsx component and yeah the GSX component should return something so here it is returning uh div with the class name of residencies buttons and here just say it as or buttons now what this com now what this component is going to do here it is going to use the use swiper hook which comes with the swiper JS as you remember on the very top we have imported the U swiper hook so now we are going to use this here I am writing the calls swiper as the U swiper hook now inside the r buttons instead of rendering this dummy text here I am making two buttons so buttons multiply by two in the first button I am going to use the symbol of less than and similarly for the second button I am going to use the simple symbol of let's format The Code by pressing shift alt F now save this and see the results here are the results and here I am having the two buttons but these buttons are not actually working because we have not written the logic yet so for writing the logic it's very simple for the less than I am saying on click it has to execute a function and this function right swiper dot slide to previous slide and similarly I am copying this logic and pasting it here like this and now instead of slide preview I am saying as slide next and there is an error let me see okay I have to enclose it like this let's save and see now now if I click on the next button our slides are actually moving and similarly for the previous button let's style this button now okay so for the styling I am again opening my residencies.css here I am targeting the r buttons and yeah let me know okay there should be our buttons let's save this inside the R button first of all I'm going to make it as position absolute as I am making it position absolute so its parent div should be position relative as we know the parent div of our slider buttons is this our container this one so let's go to the r container and here I am making the position relative let's save this let's get back to our our buttons now and for this one I am making the gap of 1 REM as I am giving the gap of 1 REM so I should make these buttons as the display Flex so for making display Flex here I am saying Flex Center okay the next thing we have to do is specify its position so I am saying from the top it should be minus 4 REM let's save and see the results in browser okay so here are our two buttons but they are on the very left side but on contrary to that we have to make them on the right side let's save this here now they are at least in their proper position but not styled for making them fancy again I am targeting the R button inside the r buttons I am having some buttons so for them make the phone size as one point through REM with the padding of 0.2 REM and the 0.8 RM now the color should be blue yeah like this one then then the Border should be none and I am also giving a border radius of 5 pixels with the background color of these buttons should be white the cursor is pointer is very basic styling that we mostly do for any kind of buttons let's save this and see here here I am having these two buttons but because of no Shadow and no background color we are not seeing them as we want as we have in a developed version I would Target the first button inside our R buttons and for the first button I'm changing its background color so what I am giving as a background color here you can copy and paste this code like this one and then I am targeting the second button so nth child [Music] two and for that one I am so I am specifying a box Shadow you can copy and paste this value again I am doing it directly to save the time okay let's save this and see in our browser what happened here now these buttons are in the most correct form so our slider component is completed now the next component that we have to make if I look at a developed version is this our value component where we have a type of accordion section which is very satisfying to see because it's not changing its length when we open a section then the section becomes closed by itself so let's see how we can make such type of functionality let's again go to our component section inside the components I am making a new folder with the name of value and inside the value again making the two files first for the GSX value Dot jsx and the second one for the CSS like this one open them side by side like this here writing rafce let's save it and now I am importing this component inside the app.jsx so after the residences I am having the value component accepting this Auto suggestion let's save this and see the results here above development version and this is saying value here so it is imported correctly now let's start making this component so before starting the code of this component first I am writing all the import statements okay so here we are using our react library with the name of react accessible accordion so I am going to import all components from here so first thing is to import the coding component then the accordion item the third one is accordion I item heading like this the third one is the accordion item button and then the accordion item panel and the last one is the accordion item state okay so we have to import all of these things from the react accessible accordion here it is giving me an artificiation and then we have to import the CSS which comes pre-built with this Library so you can import this by writing this line of coding now I am going to import an icon from our react icons MD and the icon name is MD outline Arrow drop down and empty directory okay and then the last thing I have to import is the it's CSS of our value.css okay so let's save this and now if I look at the utils folder here inside the utils I have the accordion.jsx that comes with the starter pack so what is this accordion.jsx it is nothing but as we have the slider.json we have all the raw data for making the slider similarly we have all the raw data so here I am having an array of objects so in each object I am having an icon that I have imported from the react icons then the heading and the third one is the detail let's try to map this on our developed version if I look at the developed version here I have the icon that is specified here then the heading which is specified here and then the detail that comes when we expand the accordion section that is written here so we will iterate through this array of data and we will try to make our value.jsx component here but here I am seeing that we are having an error so let's see what's the error here it is saying syntax error uh okay I think yeah here I have made a typo I have not written the spelling correctly so it should be accordion item heading let's save this and see here try to refresh and here now it's working perfectly let's remove this pre-builtive and here making a section with the class name of V wrapper means the value wrapper inside this again I am making Ado with the class name of paddings and giving it an inner width and also I am making it as display effects Flex with the line item Center and justify content Center and making it as V container now inside this if we look at the developed version here we can categorize the two section the first one is the left one and then the right one so we can code them differently so here I am making a comment for the left side first and for the first side let's say it as V left now inside the V left here I am making an image container that we built in the hero section so I am going to use add Clause again inside this uh here I am specifying an image for its value I am saying value dot PNG that lies in the public directory yeah here we have this image okay so let's save this and see the results what we have here in the development version we are having this image so now we can start coding of the right section so here I am saying the right side for the right side I am making a display with the column Direction so the display flux with the column Direction and the start then I am giving it a class name of we write in this I am going to make the three spans so span multiply by three why I am making the three spans here let's have a look at developed version the first pen this one then the second one and then this one is the third one now you have idea why we are making the three sponge so in the first pen I am writing our value then in the second span I am writing value we give to Q let's format the code and in the second in the third span I am just copying pasting some text so you can also do this let's format it again here I have made a line break between these two lines in this bands okay let's save this and for the first pen I am giving a class name of orange text again then for the seconds pen I am giving a class name of primary text and similarly for the third span I am giving a class name of secondary text let's save this and see the results in the developed version we are having these spans here I think that's a time to write some CSS for this section so for writing some CSS here in the value dot CSS I am targeting the V container and I am saying inside the V container I have an image container for that specific image container make the Border as R8 pixels solid and this RGB value then I am saying inside the V container I have div so what are these divs these two divs are the left side this one and the right side this one so I am targeting these two divs and saying for both of them make the width equal means now we can also share with 50 and as we are using flexbox so we can also see it as Flex one so both with so both would have the equal weight now for the we write section specifically I am making the gap of 0.5 REM between all of its elements let's save this and yeah now this is looking in a very correct format with the correct CSS it's time to make our accordion section so for the accordion section again in the right side after this pen here I am making the coding section let's make a text little bit smaller and then I'm making the most parent accordion and for that according I have to specify some settings okay so these settings are just the props that we can pass to this Library so the first prop is allow multiple expanded equal to false so it would make sure that at a single time only a single section would be expanded so then it is also accepting pre-expended so I am saying the zeroth index section should be extended as a pre-extended and now it's time to iterate through our data whether before iterating I would also want to give it a class name so for the class name we can say it as accordion okay then inside this here I am writing some pure JavaScript so data dot map as we have included or not data yeah still we have not included the data so we can include this data by writing import data from go outside then go outside inside the utils and then cite the accordion let's see in the accordion yeah let's save this and then here while we are mapping I am saying for each accordion item along with its index number return some GSX so while returning some GSX the parent section should be accordion item and I am giving it a class name so why is giving me an error on sing accordion item let's see it is saying me jsx closing tag for accordion okay okay so the problem was here I made a symbol by mistake so yes now I can make my accordion item let's close and for each accordion item write the class name so the class name should be accordion item I am giving very simple class name so we should not be confused while writing the CSS okay now inside this accordion item first thing is to make the accordion item heading okay format the code again and have a look at the developed version what we have in the heading okay it's again giving me an error let's save this again now there is Con okay let's see it on letter so on the heading we have three things the first one is the icon the second one is the heading and the third one is this Arrow icon let's make them one by one so in the accordion item heading I want all of these things should work as a button herefore I am directly targeting accordion item button inside the accordion item heading and for this one here I am making a div with the class name of flex Center and also giving a name of Icon so here we can write item dot icon like like this as we have inside the accordion dot GSX you can see we have the icon so I'm giving it here and let's save this also this is necessary that we should give a key to the children so I am giving key as index and uuid which is necessary for this accordion section so for this according section I am giving you ID as the index number so why we need this ID because when we are specifying the pre-expended indexes then it is considering these IDs after making the icon here I am making span with the class name of primary text and inside this when I am saying item dot heading like this now the last thing is again the icon so again giving the flex center with the class name of Icon and now I am using our imported icon MD outline Arrow drop down and giving it a size of 20 pixels [Music] like this let's save this and now see the results here okay so here I have these headings but the expanded detail is not included so let's include the detail after the heading here we can make the accordion item and panel inside the panel I am making a P tag with the class name of secondary text and inside this I am making the item dot detail let's save this and see yeah now I am having details also and the functionality is done the last thing is meaning is to make the styling for this section let's move to the CSS part now so below this right section here I would say for my accordion section I would want margin top as 2 REM and the Border none the next thing I would want is the accordion item should have a background color of white and the border is I am just copy and pasting the Border value okay so just copy this paste this let's save this and see here yeah so the border is applied and it is having background color or not let me see here okay this is the accordion item this is the code in item uh if I give it a background color of red let's see yeah it is taking the changes so it's working fine next thing I would want is to give a border radius of 8 pixels to make it according to our developed version and the Overflow as hidden so I am making too much typos in this section and the margin bottom of 20 pixels let's save this now our each section of accordion is having some distance because we have specified the margin bottom and it is also having all the CSS that we have specified here means it is having rounded Borders or flow hidden let's continue the styling so on the next I would want to style the accordion button let's confirm whether we have given the name or not so yeah we have not given this name so here I I can say as accordion button let's save this also I can do one thing here I can make it as Flex Center so now if I have a look at my section yeah everything is in a flex Direction but I can make it more correct by writing background color as white with the padding of one REM width as 100 percent justify content space between and the cursor as pointer [Music] yeah now the things are not centered but they are Justified between so let's continue it and now I am targeting the icons inside our button I am giving them the padding of 10 pixels with the background color so again I'm copy and pasting a color code you have to copy and paste it from the video giving a border radius of 5 pixels let's save this and see our icons yes our icons are having this border and then I am targeting the svgs inside our icons so SVG make them fill with our variable color of blue let's save and yeah icons are having a very perfect color after this I am saying inside the accordion button I am having a type of primary text for that text make the font size as 1.1 RM because for now it's too much huge and yes it's looking perfect as we want but if I look over the developed version here you can see our expanded sections are having a beautiful box Shadow which is not present here because we are not measuring whether a section is opened or it's in a collab state so how can we specify this for making this possible again I am going to GSX and okay here I am having the buttons here I'm having the panel and inside the accordion item button before making the content for this one here I am targeting accordion item State yeah and this state component is just giving us the information that whether the section is opened or not so here it is taking a parameter of expanded and then it is returning some value so I am saying expended if expanded then set class name as expended otherwise set the class name as collapsed or you can say non-expended and T1 so I am saying collapsed let's format the code and we have to make a use state for making the U State on the very top I am saying const class name set class name equal to use State let's import the use state from the react make it as null and in the accordion item the most parent instead of writing it in the double quotation marks I am enclosing it inside the back ticks and then inside the curly braces now while we are specifying the accordion item we can also specifying the class name so let's make it a class name so now we can give the dynamic class names to our accordion item and then if an item is expanded then it would have the name of accordion item expanded otherwise it would have the accordion item collapse so we have to make the Box Shadow for the expanded State here I would go to a guardian item and after this one I am saying accordion item if it is expanded then make the Box Shadow and for the back Shadow I am using my variable of Shadow and then I am giving a border radius of 6 pixels not the 5 pixels but the six pixel let's save this and see yes now the expanded sections are having a very beautiful box Shadow around them so our value section is also completed now let's see our next section in the developed version which is this one contact Section and it is very interesting because here we are having the hovering effectives and they are very satisfying to see let's see how can how can we make this section close all of these extra files here and also I am just closing all the files here now go to our directory inside the components sorry close inside the components making a new folder and for this one giving a name of contact uh not talking to contact and then inside this again make the two files the first one contact Dot jsx and the second one dot CSS okay open them side by side and in the GSX rfce again let's save this import the CSS from the relative like this I am doing all of these things very quickly because now we are used to making these things again again okay now let's go to our app.jsx so you can go by like this and after the value here I am writing contact component are to importing it let's save and in the browser in this version they are the component is imported now I am removing this and here writing section dot C wrapper and inside this we have to make the container now make make a div with the class name of paddings and inner width then we can also make it as Flex Center [Music] with the c container again this component consists of a left and right side if we have look here we can see on the right side we are again having the image container so let's make the right side first I am just making the comments also left side it would be like div dot C left right the left and similarly the right side here I am writing C right okay inside the right div making a div for our image reusing the image container here writing the image and for this one we have the image with the name of contact jpeg see the results here in this version yes we are having our image rightly imported we can start building the left side okay so in the left side we have to make the four divs like we have in the deployed version we have four divs and how we are going to design these divs uh I would make the two rows in each row there would be two divs so the upper two days would be in the first row and the lower two divs will be in the lower means in the second row by the way before making these deals let's make the head of this left section so in the head I have the three spans for the first pens and then in the seconds when easy to contact us now in the third span I am formatting the code and simply pasting this text here give class names to each of the spans so the first span should be the orange text now the second span for the second span it is the primary text and the third span is the secondary text thank you save this and here we are having these pens okay I can also make the left section as the flex call start so they would be in the column Direction yes now they are in the column Direction okay let's style okay let's start The Styling for the C container I am saying the justify content space between and again as we did in the value section I am again doing the same approach making each div as the flex one means the direct child of container and for the right side I am giving it the width so as the 100 percent save okay they are aligned let's make the left side with some Gap so for giving some Gap here we can write gap of 0.5 REM and everything should be fine okay now we can start building those four blocks of contacts so for building them after this span okay so here I am making some space like this make the flex call start because as I said there will be two rows and two rows would be in the column Direction and here I am giving this div it's the most preventative so I'm saying it as contact modes and write the comment of first row okay so for the first row again making it as the flex call start actually both the rows would have the same styling but for the Simplicity I'm just targeting the first row and now inside this first row make our first Contact mode so for the contact mode I am making Flex call center with the class name of mode then make an other div with the class name of start and in this div Flex Center icon as we have already used the icon class previously in our value Con in our value section so I am just reusing that and here I am going to use MD size with the 25 okay the full name is MD call by the way let's import all the icons that are required for this section at once on the top of our file here I am importing empty call from the react icons [Music] MD directory and then I am importing vs fill chat dot fill from the react icons and the directory is PS the last one is hi chat bubble bottom center High chat bubble bottom center from the react icons hi directory okay and here close this icon div make a div for the detail of the contacts contact mode and I am giving it as Flex call start with the class name of detail inside this we would have the two spans the first span will give the name of the mode and second one is what's the number for using that mode so and here our detail div ends okay and okay so this one this one this one is our complete section and by the way this is the most parent and it's a the ending section for this div before the end here I am making a button with the class name of flag Center giving it as button and here I am saying as call now save this okay there are some issues let's see the console is saying okay there is an issue while importing the icon let's see what's the issue uh I must made some type of strike okay the issue is the directory of this icon is hi2 not the simple Hai now data should be gone yes and this is our first mode do some CSS now so after this C left here I'm saying the contact moves the most parent making at the margin top of 2 REM with the gap of 1 REM between the rows and then inside the contact modes I have rows for each row make the gap of 1.5 volume between its element now for each mode make the width as 16 RBM with the padding of 1 REM I am giving some border here so you can also write this value and then the Border radius of 5 pixels gap of 1 REM between each both left and right element and a transition of all 300 MS is in as we have to make the hover effects therefore I am specifying transition all 300 Ms easy the button is not looking perfect because in the deployed version button is something like this on a non-hour state so here in the mode I would say I have some buttons for those one make the widths as 100 of the parent with the background color of our variable which is light blue and then a color of our variable blue for the fonts the font size should be 0.9 REM with the font weight of 600. okay [Music] yeah now it's having the perfect width and the styles I am also seeing the text inside our mode is in the center which should not be the case so let's try to fix this by targeting the first child making the width as 100 percent and a gap of 1.6 REM and yeah now it's perfect try to change the primary text inside our details so I am saying Target the detail and then the primary text make the font size as 1.1 RM with the font weight of 600. and if kids are deployed version I think I think it's not applied yet [Music] and why it's not applied because in this pen I have not given it the class name of primary text now if I see yes it's applied and similarly I have to do for the second detail here I am giving the class name of secondary text let's make the hover States for our modes so here I am saying on hovering the mode make it scale 1.1 percent with the Box shadow of our variable shadow [Music] now I have a button inside the mode and on hovering that button make the background color for that one as the variable of our blue gradient [Music] and the color of text should be white [Music] with the scale so it should be scaled down in its size and it should be 0.8 percent of its original size on hovering and as we have already defined the transition of 300 Ms is in so it would provide us a smooth effect let's try it in the browser Jeff perfectly as we require for making the second mode here I am going to do a very simple thing okay so this is our mode make it minimize by clicking this arrow in the vs code copy this complete debuff mode make a space here and you can make a comment that it's a second mode if you are so much confused and then paste that div now change the text here instead of call this should be chat I am keeping the number same and instead of saying call now I am saying chat now and there instead of MD call here I can say BS fill chat dot fill okay save this and see our second mode should be there yes this is there and okay while for now it's like this because still we are not having our second row let's minimize this one and this is our complete row if I minimize our complete row and copy this make a space write the comment as second row paste this here change the details inside our second row okay so this is the row and this is the MD call icon instead of MD call icon now we have this icon here instead of saying simply call here we are saying video call then video call now this should be the fourth mode [Music] for the fourth mode we are having this icon and this is not the chat this is message and instead of saying chat now say the message now hope for the best results in the browser but unfortunately that are not the best result let's see what we have messed up the first problem that I identified if I make it simple Flex start instead of saying the column Direction because row should be in the row Direction I made this mistake a yep these are in now correct shape similarly if I can do for the first row but if I expand it it would take the same shape and yes our four boards are in the perfect shape let's move on to our next section which is making this blue Dev a kind of very popular and very common Dave in the modern websites and after that we would be towards our last footer section so I'm closing not the clothing but just making a new component inside the components making a new folder with the name of get started inside get started making two files GSX and CSS and then the GSX simply write this imported CSS and finally import this component inside the app.jsx after the contact Section so get started like this okay instead of making the simple div write a section and for this one I am saying G's wrapper I hope we have not made this before then make a container and for the container we have to make the padding with some inner weights finally its name g container okay now I'm making a div with the flex call center and giving it a name of inner container why I am saying it is an inner container because this is the container which is going to have the blue color we can't give the blue color to the G container because of the paddings and the inner width actually inner width is not our problem but the padding is problem if we give the blue color to G container then it then it it is going to have some white spaces around its corner okay let's make the three spans for the first pen get started with home is for the second span I am writing some text here I'm pasting this again format the code and I think we don't need the third span here I'm giving it a class name of primary text and for the second one the secondary text save this in the browser this is our get started section try to style this in our CSS here I am writing the inner container make the gap of 1.5 RM background color I am writing a color code you can copy and paste from here [Music] then giving a padding of 2 REM border radius of 10 pixels with the border of 6 pixels solid again I am writing a color code you have to copy and paste from the video at the last make the text line as Center save yes but our primary text should have the white color and same course and same case for this section yeah I'm saying inside the inner container I have primary text before that make the color as white and the font weight of 600. then similarly inside the inner container I have the secondary text and for that one make the color like this yes both of the styling are perfectly aligned the final thing in this section is to make this button let's try to make this button [Music] for making the button after this pen here I am making a button with the class name of button let's make an H tag so the a tag here and for this make mail to I am writing my Gmail here by the way when you specify this mail to this is a kind of specifier for the hraf attribute if you specify mail 2 then it would open your Gmail or your Microsoft Mail for contacting this address here I can write it as get started save this and this is the button uh this button is not looking good when there is the blue color behind it uh we can always modify this so try to modify in our CSS after the inner container [Music] I am writing pattern for that one make the background with some color code [Music] I forgot import this color codes in this starter pack but you can follow from that tutorial [Music] thank you I have completed the styling for this button and it's looking good let's move to our last section which is the footer of this website so just repeat the steps for the footer section [Music] make two files inside the footer foreign [Music] this into the app.jsx after get started remove this div and making a section F wrapper here making the paddings in a width and flex center with the F container see inside this I am again Distributing it between the left and right side for the left side making this as Flex call start with f left have a look at the deployed version you can see in the left side we have the logo and this secondary text and these things are in the column Direction therefore I have specified as the flex call start and the first thing is the logos for the logo I am saying logo 2 dot PNG and giving it the width of 120 pixels the second thing is a span with the class name of secondary text writing some text here format the code save and see in the browser yes this is our left section and after completing the left side now I am going to the right side so F right by the way I can also make the right side as the flex call start [Music] in the right side I am having the two spans first why I am having these two spans you can see in the deployed version this one is this pen and this is the second span let's complete these things so information with the class name of primary text then in the second span writing some Demi address like and after these two spans I am having a menu of our footer so for that menu Flex center with the class name of F menu I forget to make it as a secondary text let's make it also and where I made a typo okay so for making this menu just make four spans forward the code and inside these pens write the headings for all of the menu items like this okay format the code and see in the browser what happened okay our left and right sides are developed this there is some issue with the spacing and some alignments for handling those issues in the CSS you can Target for handling those issues in the CSS you can Target the F container and make justify content space between and then for the left side make the gap between the items as one REM if they are Justified and now I can Target the right side in the right side I have the menu for that menu make gap of 0.5 REM 1.5 REM margin top of 1.5 REM with the font weight of 500 yes so our footer is also completed if we if we look the bigger picture then you can observe the static version of our website is now completed let's start the part of the tutorial where we have to make our website responsive for the mobile screens and for the tablets and similarly the desktop version is already built so for starting the responsive design let's right click and click here on the inspect button here you can click on this tool device and now your browser can give you a view where you can expand and collapse your screen to see it on the screens of multiple devices like I can select iPhone x 12 Pro and sorry iPhone 12 Pro and on the 12 Pro the website is looking like this means on the phone and which is not very good because we have not made it responsive so I am keeping it as the responsive and collapsing it okay let's have a look on the deployed version now if I inspect this version like and let's refresh so this website is having a proper responsive view we have to convert our website in such kind of view so let's start by the header as we can see that in the header instead of seeing the complete menu now we are seeing a menu icon on clicking this the menu appears from the right side and clicking outside of this menu it goes away so let's start by making the static standard menu for the mobile screens I am not going to implement the logic for now first we just try to make this type of menu we have to convert this menu in that version and then we will see how we can apply Logic for moving its outside and then inside the screen and then how can we click outside of the menu to make it go away again so in the vs code here I have my header dot GSX open and this is the header.css as we saw we have to make our menu icon so at the very end just above the section here I am making a div with the class name of menu icon and for this I am just pasting a react icon with the name of bi menu alt right with the size of 30 pixels let's make it a self-closing component and on the very top I am going to import this let's save this and see if it's imported or not and and yes it is imported here okay now inside the CSS I am showing uh generally it should not be in the view so here I would say for the menu I can make the display none so it will not be visible on the standard desktop screens but now I have to specify the screen sizes of small devices so I am saying on the media screens with the max width of 768 pixels make this menu icon as save this and now see what happened in the browser okay the menu icon is not visible but here I made extra braces let's remove this save our CSS and see in the browser if it's working or not okay on the small devices here you can see our width is smaller than 768 pixel it's currently 494 pixel so our menu icon is visible but if I expand this View and go above the 768 pixels then it became as display none okay this is working now we will try to convert this menu in the mobile version for doing that here I am targeting our Edge menu and first of all I am making the color of text inside this with our variable black and then making its position absolute and as I'm making position absolute so I have to give it a reference from our Edge container here is the AC container but not the edge container because still I am not specifying the provision relative for the edge container so it would go towards app.css yes the parent container for the edge menu is the position relative and then it is position absolute with respect to the app with respect to the app I am saying its top distance should be 3 REM and from the right side it should be 4 REM now next thing I would say the background color on the small screen should be white for this menu and then the flex direction should be column let's see in the browser yes we are getting our menu and then I have to specify some paddings and some general styling so I would give the font weight of 500 with the gap of 2 REM and the padding of 3 RM let's save and see here okay okay one thing I can also do I am making all the other components inside the app.jsx as a comment so I am commenting on all these components by pressing Ctrl and backslash like this I would also comment the hero section let's save this and see in the browser yes only header is visible so here I would say the Border radius would be 10 pixels and align items Flex start with the Box Shadow so for the back box Shadow here I am pasting some value you can just copy it from the video let's save this yes it's almost getting the shape okay if I paste the same width in the deployed version and then the same height 850 yeah they are pretty much same so the static version of our menu is complete but I am noticing the position of our icon is not correct so what I would do in my vs code I would go to the header dot GSX and I am moving my menu icon inside this div means inside the edge wrapper not the edge wrapper but the edge container sorry my bad because HD Apple is our section and then is The Edge container so I am wrapping my menu icon inside the edge container let's format the code and yes now our icon is in the correct position let's try to apply the logic behind the movement of our menu for for making this on the very top here just above the return statement I am making a use State for the use State I am giving name of menu open and it is handled by set menu open yeah so as it is a used stair so I imported so I am importing it from the react as you can see on the top it's Auto imported and by default it is having the value of false now here I am seeing on clicking this icon it would execute a function and function is very simple from the use State set menu open take the previous value from the state and set the negation of our previous value if you have the complete view so I am executing a function of set menu open taking the previous U State value as the argument and setting the new state as the negation of our previous state if it falls then it will be converted into true and if it is true then it would be converted into false okay now how we can use this U state for rendering the H menu so in the H menu here I am making some styling on the basis of a function with the name of get menu Styles and I would pass the menu open as the prop so we have to Define this function get menu styles again on the top here I am defining this function with the name of get menu Styles which is taking the argument of menu open and then it's a react fighter function so first it would check if we are actually at the smaller screens so here I am making the condition if document dot documentelement dot client width so it would decline where it's like is smaller than 800 means if it is up to the 768 pixels then return this styling the right distance means the position from the right side of the screen would be minus you can say at minus 100 percent but there is a condition of doing the minus 100 percent if and only if menu is not opened so again let me explain first I am seeing if the width is smaller or equal to 800 which is Sim which is pretty much similar to this condition we have in the CSS so I am checking if we are actually at the smallest screens and if we are then we are checking if the menu is not opened then push our menu to the minus 100 means the out of view let's save this and see how much it was okay so if I click here our menu is appearing and if I click again on this icon it is disappearing but I am not able to see the movement of menu uh like in the developed version when I click it is actually moving out of view and then coming into view uh with a kind of sliding animation which is not available here so for making this here in the etch menu I would say make all type of transitions as the all 300 Ms is in okay so is in let's save this now if I click it is actually coming up and going back but still there is a problem if I click outside of this menu it is not going outside which is the default behavior for the mobile sequence for doing this I am importing a very useful package actually so here write import so it is giving me an auto suggestion because I have installed this package so you have to import the outside click Handler from the react outside click Handler now we have to wrap our component inside this click Handler so I am going to my H menu and before this Edge menu here I would say outside rear Candler and move its closing tag up to the closing of edge menu so this is our Edge menu so now if I format the code it's giving perfect view but this component accepts a pro that what it should do if you are clicking outside of its contacts means if you are clicking outside of its Edge menu then the profits on outside click execute a function and I am saying set menu open as false pretty straightforward let's see in our browser I click menu comes and I click outside of this menu goes outside of The View a very clean logic very cleanly we have implemented this now let's try to make the hero section responsive as we have in the developed version I am going to hero.gsx so inside the hero folder this is the hero.gsx and opening the CSS side by side most of our work is in the CSS hardly we have touched the GSX let's see so I am targeting the small screen so on the media and I'm targeting the maximum width of 640 pixels this time okay now have a look at the deployed version if we look at the deployed version there is some additional space on the top so for making this additional space I am saying hero container should have the margin top of 2 REM by the way I forget inside the app.jsx we have to make this uncomment let's save this again move to hero.jsx so I have given some additional margin on the top side to this hero container okay let's save and see [Music] yes there is additional margin now the writing is so much big for the mobile screens so now I am targeting the hero Title Here hero title and side hero title we have H1 heading for that one make the font size of 2.5 REM with the line height of 3 REM and yes they are looking good according to a deployed version then if I look at the image container it's not looking aligned in the Mobile screen so for making it aligned in the Mobile screen here I am targeting the image container specifically image container make the width as 95 percent with the height of 25 REM on the mobile screens let's save and just now it is aligned within the mobile screens as it is in the deployed version the next thing is to make these stats fix so for making these stats I am targeting stats making justify content center with the gap of 1.5 REM and let's save this and see yep they are working correctly now if I visit to the iPhone XR it's looking good here it's looking on Xbox Pro but I am seeing that our image container is not in the center of the screen so for fixing this again move to our CSS and here I would Target the right side of 0 section your right side and I'm making the width as 100 percent so now if I visit okay there is something problem uh I have to refresh the website okay still it's not in the very center let's see okay it's not the edge right it's the hero right so that was my bed here I have to like this now see yeah it's perfectly in the center it's time to fix the font weight and the font size is not the phone weight but the phone sizes for these stats as in the deployed version they are relatively small and giving a good look for the mobile screens okay for doing this here I am saying stat make the nth child the first child means which is the number make the font size as 1.5 REM and similarly inside the stat I have the second child which is the name of stats so for that when I'm making the phone size of 0.8 REM and Yep this is our version looking perfect for the mobile screens let's try to see it on a relatively large devices like the tablet so if I expand it okay this is the standard tablet size and it's not looking good here let's see what we can do in our CSS so yes I've I am just guessing if in that hero container instead of space between I make it space around and now see yes it's looking perfectly fine for the big secrets for normal laptop screens for the tablet screens and then for the mobile screens okay on the mobile screens when the menu is incoming there is something wrong with the Z indexes so let's fix this Z indexes on on the hero CSS here I am giving it a z index of one and on the head is CSS I am giving it a z index of 99 it should fix our problem try to refresh okay there is still a problem within this title div specifically so inside the hero.css this is the Z index of one then what can be the problem here if in the orange circle [Music] for bits everything is looking fine but still we are having this issue let's try to inspect and try to debug it together okay so our hero menu here H menu if I try to give the Z index 99 here [Music] yes it has fixed our problem so what we can do inside our hero dot inside our header.css when we are writing code for 768 pixel 16 first make the Z index as 99 and it is fixing our problem we just have to do this let's try to move on the next section and the next section okay go to the standard Mobile screen then yeah this one so next screen is these logos and this is the most easiest part of the tutorial so I'm just uncommenting and see the results this is the companies section I have to uncomment all and then and make comments one by one like this let's see and this is our company section looking very perfect in the mobile screens and on the tablets it's also looking good and yeah we know on the desktop is perfect so we have nothing to do with the company logos we can securely move to the next section and the next section is I should make the width same so we can make a fair comparison between both the screens so this is the deployed one okay our next is this Carousel section try to make it responsive on the mobile screens so here I am making this as a component and see what is happening here so it is already looking very good because we have made the dynamic slides per view in the settings as the prop for this Carousel but the only thing we have to fix is this heading should be the center of the screen and similarly these buttons should also be the center of the screen so in the right side I am opening the CSS of the residencies and at the very bottom here I am targeting the media screen with the maximum width of 640 pixels I am targeting this width and I am saying the r head which is the heading and make the line item Center then I am targeting the r buttons and I am saying on the mobile screens make the position as not the inherit but the initial screen let's save and see the results yes it's looking good okay the next screen is this value screen so try to uncomment this in our app.jsx here and see the results okay there is there is something more to fix than than I expect so I'm opening value dot CSS here and at the very bottom of this file here I am targeting the media screens from the width of uh I believe one zero two four pixel 1024 pixel and I'm saying the value container should have the flex direction of column from this width let's see in the browser yes at least they are aligned but there is something wrong with the heading of this accordion if I look at the developed version the accordion is looking perfectly fine while here it's not looking good because of the font size so I am targeting the maximum screen size of maximum width 768 pixels I would say the accordion buttons and the primary text should have the font size of 0.8 REM from the 768 pixels and yes now it is looking cool actually okay the next section is this contact a section and I'm expecting that we have used a lot of flex boxes in this section so we should not be fixing a lot of things here but try it first okay so this is our contact tax contacts section we have to fix the rows on the mobile screens on the tablet I believe it's looking good but on the mobile screens it is overflowing okay let's fix this so here open the contact dot CSS and at the very bottom I'm saying the media screen with the max width of 1024 pixels again I am targeting C container the most Bandit making the flex direction of column from right there the right side should be justified content Center because in the right side we are having the image container so see here okay because the width of the upper section is too much therefore image container is making its content center with relative to the upper content but when we fix that side means the left side then it should not be the case and each row should have the flex direction of column then the width of 100 percent the last thing I would say the mode so each mode again have the width of 100 let's see and yes our work is done with this context section now again in the app dot GSX I am uncommenting this let's see what happens okay it's it's looking fine as in the developed version we are having the same results we can fairly move towards our footer now so I am uncommenting our last component which is the footer and footer is also looking good we just have to make its content in the center for the Mobile screen so go to the footer and here I am saying at the rate media screens with the maximum width of 768 pixels make the F container with the justify content Center then in the F container each div must have the Align item Center I am making it important so it should overwrite pre-built CSS rules and then the text align Center let's save and see yes it's looking fine on the tablet screens on the large width [Music] so yes so our responsive version is also completed now the last thing we have to do is to add the animations as we look effect as if we have a look at the deployed version okay so I am disabling this View and refreshing this deployed version here you can see there is a very smooth animation on the start of website let's see how we can make this animation for making this animation I am visiting the hero.gsx and only our hero GSX is having the animation so on the very top here I am importing motion from framer motion it's very famous library for making the animations and I have used it in many of my projects and it's very stable and the type of Animation is actually very cool that comes with this package so motion dot H1 we I I have converted the H1 as the motion dot H1 it's the standard way for working with this Library anything you want to convert in an animatable div or H1 or span you just have to write motion Dot so initially I am saying on the y-axis my H1 heading should be displaced around 2 REM and initially the opacity should be zero now it should be animated so it should be animated on the y-axis the displaced value should be null and opacity becomes 1 means the default setting of our heading now I can specify the transition type so in the transition type I am saying the duration of this animation is 2 seconds with the type of I like rainbows but here you can also use the ease in so save this and see the results let's refresh and here you can see our H1 heading is animating similarly I can apply this towards my image container so for the image container go back to the studio and I am making this as motion dot div initially give some props on the x-axis it should be displaced around 7 Rem with the opacity of 0 then copy and paste here I am saying instead of initial it should be animated towards the zero pixels means the default position and the opacity 1. now again I have to specify the transition here so you can also make a constant object if you want to use the same transition all over your components so here I am again saying duration two seconds with the type of praying let's save this try to refresh here and just it's looking perfect and the developed version it's a little bit slow because I have used ease in animation here but I like spring most so you can apply anyone you want now let's get towards the last section of our tutorial which is the deployment how we can deploy this fully functional website not in terms of backend as I discussed in the start of tutorial if this video gets enough number of likes or comments or request in comments then I would make a full stack tutorial of this website but for now let's focus on the front end so let's see how we can deploy this front-end project to the internet for deployment I am using the cloudflare pages here Cloud flare pages go to this first link you can make a new account if you don't have otherwise you can simply do a login as I am doing so such dashboard would appear in front of you when you do a login or sign up you have to visit this section pages so in the pages we are going to deploy our on page so here I can do a create a project and I'm going to use the direct upload option so for doing the direct upload go to your vs code open your terminal by pressing Ctrl J you can stop this server by pressing Ctrl C clear your terminal and here write yarn run build so it would make a production build of our application and it took very little amount of time in the five second our production build is ready where it lies if I go to a directory close the terminal on the very top here you can see a folder with the name of this actually this test folder is our production bill so I am right clicking this clicking on the reveal in File Explorer and here it comes I am just dragging this and in my Google Chrome okay I have to click on the direct upload so click here direct upload give the name of our project so I am giving the name of Real Estate web and at the last time including the YouTube click on the create project [Music] here you have to upload your disk folder now so I am dragging this folder and here drop this it is preparing itself to upload to server [Music] it can take different time depends on the size of your project you just have to wait here okay so all files were successfully uploaded now finally you can click on this button deploy site so as you click on the stipula site it takes around five to six seconds and your page is ready you just have to click on this link and your website is deployed to intranet you can see the animation you can see all of your sections I would also provide a deployed Link in the description of this video so you can visit on your devices that how it's working on the mobiles how it's working on the desktop if I refresh now then you would be able to see the animation more clearly because now it is in the cache of our browser if this video has inspired you for making the new front-end projects for using these animations for using these responsive CSS then hit a like subscribe and share button I hope this video gets the enough number of likes so I should be encouraged to make a full stack version of this but let's see I hope you enjoyed this tutorial very much you can also support me on the patreon and please subscribe the channel because I am observing that most of the viewers are not subscribing so keep sporting keep learning I would see you in the next tutorial till then goodbye

Channel: ZAINKEEPSCODE

Views: 247,893

Keywords: react js, react website tuto, react website, react, react js real estate website tutorial, complete react real estate website project, react js tutorial, learn react js, responsive react js webiste tutorial, how to build website using react, build and deploy the real estate website, best react tutorial on youtube, best react project tutorial for beginners, react ui, react site, reactjs, react website from scratch, react website design, real estate, ecommerce, react tutorial

Id: edBx-fjgh4k

Length: 153min 55sec (9235 seconds)

Published: Tue Apr 04 2023