Build Multi-Page React responsive website | Beginners REACT.JS 🔥 from scratch with Login & Register

Key Takeaways

hi everyone in this video we're going to create a multi-page responsive and a modern react website from start to finish so this video turns is going to walk you through all the steps needed to create a website on react from scratch using everything you need just like you know we start with a very minimal project like create react up and we start it up till we create a full project or a full website with multi-page login register fetching data from the server like a fake json server real world one and yeah doing everything just images scraping putting colors together putting css together using style components and most importantly you're going to be using react router to do router of the page so this is the figma file or the figma design you can access it down below in the description you're going to find the link for that but this is what we're going to be turning into a real world website here you see it is a servicing website which means there's you know customers come to this website they find like services offered by specialists which means you can you know select a service for example cleaning demolition car painting or carpentry or anything like that you select that you say oh specialist you can come to my house you can do for example landscaping and there's actually our relays and there is stuff like that going to the services uh you can you can imagine like fiverr or something like that or freelance.com but it's more for oriented to your services but this is the full design i'm going to be creating so the full projects or the end projects going to be creating is actually this web page so frequency everything's pretty tidy i'll get awesome illustrations awesome text um awesome top section in here or just also landing page which is pretty well and modern and as well as responsive you go back in here you're gonna find all the services and in fact all of these services have been fetched in real time from a json server using axios and just use react state and you have contacts and stuff like that so everything is working absolutely fine we got this awesome section to you know tell specialists to join and offer their services if you have any and an awesome footer at the end with cool icons and stuff like that so yeah i'm going to be creating all of that from start to finish and never forget about the awesome login and register page of uh pretty much you know you can just takes it to a different page still on the website so this is completely multi-page and you get here you can go and log in put your email just a normal form and you can you know toggle between that with an awesome animation we created on different tutorials with this cool awesome form and cool colors matching so yeah hope you guys enjoyed this animation as i do enjoy it and enjoy everything into the making process of this website so one last thing is actually the responsiveness and everything going inside of that i'm just going to choose this oh if you go it's currency it's actually here responsive and it goes all the way to the bottom so everything is going responsive it shows all services everything is pretty tidy we can show up here images and stuff like that so it goes in the perfect way possible to make things everything going perfectly so yeah also the login register is pretty you know responsiveness it works fine everything animation still works so you got everything from start to finish using this video tutorial so yeah without further ado this is everything going to be creating this video tutorial hope you guys going to be enjoying it don't forget to subscribe push the like button and of course let me know in the comments if you really enjoyed this story if you're really enjoying these ideas enjoy the design uh anything like that i'll be very happy to you know just have a shout out with you guys tell me if you have any other ideas you're gonna be like you know wanting me to put together into a youtube channel i'll be very happy to do so well without further ado let's get started so let's just get started with the application and here i've got a basic project i've created so i've used create react app to pretty much create and set up these projects in here it's pretty simple projects using cra and here we've got a hello world application and also i've gone and installed a couple of things as well as imported a couple of things that we might need just the bare minimum things like the margin or mario and the page container this one you are probably familiar who watch my videos because i use this a lot and it's just like a component that allows you to add margin between other components without you know declaratively go and do that so you can just use the components you specify the margin boom you got your margin done right in the place which is pretty great and here we got page container which does like holds up the whole page container and have an inner container and everything we need so that's basically what it is for this uh it's pretty simple nothing too complicated so if you jump here we got the hello world application running um yeah we got so we're going to be installing a couple of things versus before and one of them is actually the json server so what we're going to use this json server library uh it's more like a cli that allows us to pretty much run a json server from the command line and this one we give it like a simple json database like we can give it a data of services or whatever and since for our application we got like a services and a specialist kind of thingy so we can just like supply it with something like you know a database of like specialists or services available like offer services and we can later on go ahead and use react to fetch this data and just like render it uh on on pretty much the webpage you're going to be using there or the landing pages stuff so yeah this is exactly we're going to be doing right here using this um particular module or cli so just going to install it and you need to of course install it as pretty much if you just go to the you know getting started you need to install to global because using npm later on you can use in whatever projects from whatever you know like path you would like to so this is the best way to go through it now let's just jump back here um we're going to create another terminal real quick so here's actually the things you're going to be installing i'm just going to do yarn and so i'm going to be using a style component as always for doing css and axios in js also going to be using react responsive and this one for making the website look responsive and just like using media queries on the react component using hooks of course and last but not least um well for this one is going to be adding like this using yarn and it's going to be added into our project dependencies now if we jump into the next section i'm going to be using npm so just do npm install that's g don't forget about the g because it's going to be installing globally and just do json server so like that it's gonna be installing json server they need your own what you can do just do like a json server okay i'm not spelling the server so just do a json server and this one is gonna be running for you with all it's just a normal cli install globally then we can use it later on so basically that's this is simply what you need to set up nothing too complicated now let's just jump let me just get rid of that for now now the tools we're going to be using i'm going to be using this hatful.shopify i always use this because it does a great job it's free of charge and what can i say it's just like straightforward points free of charge and you can easily use it so use this one for generating logos logos you see in this one has been generated by the headphone and also like you know background images stuff like that just makes the point a little bit kind of like you know accurate i use a splash for like free of charge uh high resolution photos and it does a great job for this one and last but not least i use many pixels so for many pixels in here it just gives me like a free illustrations free of charge and they are pretty accurate and can do a pretty good damn job and they just like turn your design from boring into amazing so yeah definitely check many pixels they have like um you know privates kind of like a section or vip if you want to request your design if you're doing a company or something like that something commercial you can go for it so yeah without further ado this is basically where it is and we are jumping back into our figma file here so this is basically we're going to be first starting to work on is actually the landing page then we can just create other pages as we go further further like the login page register page and we can link them with the json server we are going to be creating uh after that so here is actually the landing page it should be pretty simple the lender page always should be looking clean and show you the point and i love using this kind of like um you know background kind of images which represents what we are doing and this one i'm using like this guy that is pretty much wearing these green t-shirts putting his headphones and it's got kind of like doing some landscaping work and this one is kind of like give it so if i'm a client if i'm just jumping into this website i see this background and it matches exactly what the website is made for so this way it just like attracts more the client it gives it more context more depth of like you know what we're doing in here and how we are doing it so this one should do a great job also just putting some text in here some slogan you know just join now button will give you more inspiration to join and press that button and of course using the right installation uh life from here it just you know can can make the user or increase the user engagement and with all of that so we're just going to talk more through as we go but for now what we're going to get started is actually just create the first section so this is actually the first section for us here in here um it's just like you know the top section the top landing page section i'm going to have this one navigation bar it's going to be completely transparent background and with just like a login with just your buttons and basically here we got just got some slogan so simple button to join in and simple illustration and without forgetting exactly the actual background image is going to represent exactly what we are doing and by the way as i said before i'm using this logo in here generated which i already done done download the assets so if you would like to or need any of that you can go and grab it from my code repository i will be putting the link down below in the description so you can access all that all the assets all the code everything down in the description go go ahead and don't forget about following me up on github that would be super cool of course so yeah jumping back here um here of course as well i just like chose this kind of cool name which is you know we're offering services specialist offer services and clients go or customers go and find a service so yeah just like servicing without an eye but with with a wire so it's just like kind of kind of sick kind of cool um yeah so this is exactly what we need to discuss with design right now and let's jump back into the code so he's actually got the hello world i said before i already did run the actual application so no worries about that section anywhere in here so i think i can zoom in the editor fonts a little bit tiny here so you can better say what i'm doing and yeah so let's jump back into the actual uh application here so we got a simple hello world nothing too complicated now let's create the first top section and what i'm going to be doing this i'm going to first create like a containers page so here into the smc and then do containers and this folder is going to hold all of our web pages like the landing page or the home page uh the register page login page and so on and so forth um so here we're going to be creating first another folder i'm going to name this like home page i'm going to have an index.jsx which is going to be the main entry point for this web page and this is exactly how i like structure in my web pages which give it like more depth and you can easily understand the folder structure so you see containers oh i'm looking for web pages there you go this is the home page right then you see index and you see a couple other files so you go directly to the index because you exactly know that this is the you know the main page or the like the main function that you need to go through that calls everything else so it's the main the hierarchy the main parent and this is exactly what you need here also i'm going to be creating like top section gsx and this one's going to render that just the top section of the background and everything and going so here first going to import react as always so i'm going to do four reacts from react um also i'm gonna do um yeah i'm not using okay so i'm gonna do uh export a function and it's gonna be the same name here it's gonna be just a home page you're gonna have a props somehow and it's gonna return now here i'm gonna use the page container um my component that i've just put here so if you see components page container i've already got like page wrapper page container component just basically just puts a page dropper with a width and a minimum height of 100 percent nothing too complicated as that before so yeah so let's just jump here as i said before we should get that from the intel license and yes i can say hello from this site now if we jump back right here um where is the page okay so the up dot js i can render everything inside here so you can say page container or pretty much not the big container i don't know it's just like the home page right super cool now if we go so just like check something wrong with it yeah totally it's my bad for not doing this correctly so i can just i'm not importing install components correctly there and yeah because there was some like an issue here going on so this is exactly fixed on my page container component and now should everything working uh fine so yeah i'm going back to the home page here if we check the actual code you're going to see hello again i don't know i got two applications here okay never mind about that so yeah this is exactly what we needed now we got the hello and everything now let's start creating the container first and this is exactly what i'm visioning here i just want to create the first container so this one is actually the top section container i'm going to do import reacts from the x again i'm going to be doing explore a function and it's going to be a top section okay okay so props gonna have a simple top section in here i'm gonna be using stock component to create like the full containers and everything we're gonna be needing so here i'm gonna do like top section container i'm gonna use style components so import it here and by the way because a lot of people were asking me i don't know if i just like responded about that but they were asking me about this way i do like i just type in the name of the module and click enter and it auto import it for me this is not an extension because this exists on vs code so make sure to use the latest version of vs code and this should work for you just like type the name of the module you already installed click enter and it should like auto import from you this is actually a vs code feature okay um cool so here we've got the top like section container i'm going to do a width of like let's say 100 because it takes the full width uh for the height for now let's say i'm going to give it something like 600 pixels okay just for now just in purposes and stuff like that and also i'm going to be including some background of course you see the background that goes right here with a guy just like you know do some landscaping everything so i want to put some background right there and i'm going to use this image so for that image i need to first import it because here we are using quickly act up and it uses some webpack configuration just like auto import for you once you import the image like you do import that image from like specific folder or folder well what it does for you is pretty much like imports the url and it gives you the url in callback so this is what you need to be thinking about here i'm gonna do like um i'm gonna just like name it uh top section background okay img from i'm gonna be importing from go back go back this is their cool images then i think it's out of images i need to go and look on it um it's called lending dashp.jpg [Music] um yeah cool so here we just need to use the url i'm providing the actual uh pretty much the url this one's going to return to you once before so just providing with the url in here as a background image and that should do the job perfectly now i also need to use background position because i need to position the background accordingly in order to fit either the width and the height and just like if the screen is too wide just like it displays the full image otherwise if the screen is too short or like too small just crop it accordingly and make it come to the center so make sure to always use it uh on that particular part but for now if we like display the image like the image not gonna just what we want for example here and this one one of the guy to appear right in the center we don't want his head to be cut off on the top or on the bottom so we want him to appear in the cotton center and for that i already just like did some math and it could just be like zero pixels from the x and since we want to into the center we're gonna do like minus 50 pixels for that case just for now we will test more about those values and what we can do here just like um the background uh pretty much now the size like how it covers it so i'm just going to do background size okay we can do cover so cover means just like fits uh the image accordingly and make it just you know shrink and enlarge according to the fitting space and yeah so this is basically what we need for the top section container let's go and just return top section container here and you can just do boom and it's like for testing purposes and you can do time section center [Applause] okay uh we will see and there you go so this is what we got so far from pretty much the top section uh we got a cut off image which is not exactly as we want it to be so we might increase some height of this because uh on my security in here got like 1080p screen and it's like you know it takes it all of it but here from the other side i got like a smaller resolution screen if it just like fit it accordingly it will fit there and it just like makes a great job so that's why we can use media queries to pretty much decide uh pretty much what size and what screen size that we can display on that particular case so for now i'm just going to increase this one make it 800 pixels we will see more about the responsive design later on as we go any further so yeah it's kind of like looks a little bit better at some points and you can just go and do like minus 90 pixels i think that should be a little better or minus 100 pixels because we want him like kind of like almost full length so minus 120 pixels okay just a little bit more 140 and the okay i'm just going to increase it by one more um yeah cool so this one kind of like shows what he's doing he's just like holding something and just like trying to do work escaping like doing a service and this is exactly what our website is for so yeah that's that's super cool it looks so super cool so far and that is not really a complicated thing so this is the first one we need to do um the second one if you just take a look on the design we've got some like i don't know bluish filter in here if you see it so yeah we want to just always deem the exact background we don't want it to leave it just like this because it's too contrast it's it's a bad thing you can't put some text in here like a white text so you have to make sure to fade it into like a filter before you can use this background as a backdrop and this way we can create another component that can do this filter for us so what's going to do this i'm going to be using the magic of style components to make sure that we create the same way as we did with the top section container there so yeah this shouldn't be super hard for you to exactly understand i'm just going to create like a background filter i'm going to use file.dev again so always using gibbs for everything i'm going to do with 100 and 100 to fit pretty much you know the full width and full height of the section container and eventually i'm going to use a background color here so background color and i'm just going to use some bluish color here i'm going to copy it real quick and yeah you can you can work what color works for you the best but this is the color i chose it's like mid blue and you can with zero nine opacity and it can do the job perfectly here i'm going to use let's play flex make sure to do that and also flex direction as a column because in this background filter what we're going to be doing is actually use this one as appearance for all children like we can use it for the text and for the illustration we're going to be putting later on for the logos and stuff like that so make sure to use this and make sure to put the exact display flex in here on it otherwise you won't work perfectly as you would like it to be now we're jumping back i'm jumping to this one yeah i haven't rendered this okay it's my bad so i can do background filter real quick so background filter boom otherwise it will just like cut off this automatically by picture which i don't want to and yeah there you go so already looks pretty shiny pretty great the filter looks pretty great it's not super dark so the guy in here shows up the kind of image shows up also if you put some white text in here it would show up greatly so this one like the background image can be used like a backdrop and it can do a great job also the background here also the text we're going to be putting also the logos and all the illustrations still look pretty great if you just like put them on the foreground so yeah this is kind of trick you always need to put in mind whenever you're trying to design some kind of like length landing page or something because this is kind of like a life changer and just changes everything you would think about all right so yeah we've got here everything we need we got the exact stuff we needed right here super cool now let's create another container that's pretty much going to do the inner like encapsulation of everything that we put i'm just going to name it top section inner [Music] container so we're going to do some of the again i'm going to have a full width and a full height uh as always here so i'm just going to have with height i'm also going to display off the flex okay also here for the optical inner container because it's going to take the full width and full height i want to center out everything if you take a look at that design we got both of these like servicing a little slow gun illustration all of them are centered uh either horizontally or vertically so yeah we can we can do something like that i can do align items to the center and here make sure to use like flex direction just to be normal row so i'm just going to leave it because this comes by default i'm going to also put like uh justifying content to the center and that should do the job perfect right here but i think we sometimes if like large displays we don't want them to be completely center so we can use like space evenly to um you know give them like an even space on the horizontal axis in here but we will see about that once we display something on the uh on the display here so yeah that should do a great job over here um yeah so here i'm also going to be creating another container that holds up the actual illustration i'm going to be using so i'm just going to make it like stand out img equals style dots um it's going to be a div and this one is going to be like just the container i'm going to name this okay it's going to be better to name it image from that side well for the width and height i can give it something like because we're going to be using this illustration i can give it like 73 em by height of well we can use 24 am or i think this is not the perfect one so we can use 32 it would look better also i'm going to give it an image of width and height [Music] okay so whenever we have an image inside of it i'm going to have a width of 100 and height of 100 percent okay so this should do the job i can just like do standout image and this command is going to be a container i'm going to render up an image with an src and everything i can put alt in here like um best in the field or something just some dummy thingy and here let's import the actual illustration so we're going to do i'm pouring here like the best specialist img from just gonna go back go back again images let's see where is it so organic work only with the best so i think this is this is the one i'm just going to copy the exact name i don't want to just like put it all um yeah so this one should do a great job for that particular part you can go and put uh the best specialists img okay so we'll just check that out and see how it works well kind of like does a good job here but i will definitely increase some width in here i kind of like i'm just going to make it 93. i'm making it a 40. 42 even okay that should that should be a better one i'm 33 here yeah 34. i'm even going to increase this to 44. all right so this one should do look a better job now let's create some text on it and just like make sure to center it out that looks you know better on the center there it can do a better job obviously so i'm going to just create something like um i'm going to make it title or something so title well let's see so it's going to be the title i'm going to use like style.div here i'm going to just put a normal title but i could use something better like an h2 or h1 for purposes like uh you know ceo and stuff so it would be better for just like doing this and for sao i'm sorry about if i misspelled that uh but yeah so we can we can do that it would be a way much better so i'm just gonna like dim the margin i'm gonna make a margin like that i'm gonna make the font size i can increase it a little bit for the h2 i can make it like a 24 am i can make a color of like complete pitch white because this is exactly what we want to i can also increase some line height for it so like 1.7 or 8 line height for that's not percent and yeah i don't know let's let's see what is so we got the send out image and we should have the text before that so we can do like title um so servicing okay and this one should be a logo not a title though right yeah this is what we get out of it it's kind of like uh okay it's em i don't know i put em here let's see so i've got servicing right on the top so actually the best way to go through this and just like render up a particular since this is actually a logo name servicing and also we want to just render up some logo if you see the design here we got the logo before it then we got the name of the service here and we can just play this either like a green or but i think the wire would be better so i kind of like find it way much better just to put it all white there with the slogans too so i can create like a separate dumb component that all it does is just render up the logo with the text or with like you know the company name there and it can do a better job so i can get rid of all that and get the title or anything and all i can do just jump into components here where we create all the dummy components and i'm going to name this like a logo okay uh or i can name it better thing so it's kind of be like a brand logo all right cool so you can have index.jsx you can have react again so that uh export a function it's gonna be burned logo props and all right so this is actually the logo i'm going to be creating a container phrase i'm going to just do like uh burn logo container i'm going to use styled and autoimport again so for the width and heights i'm not going to specify a particular width and high because just like depends on what we render sometimes we're into only the logo image or sometimes you render the company name with it's like both of them so yeah it completely depends i'm not going to just like specify that third specifically you're going to do like uh display flags flex direction will be automatically be like um you know auto also i'm going to do a line items to be like vertically aligned into the center to the left and center um yeah so that should do the job also i'm going to do like logo uh image style div again i'm going to put a width and a height of what it kind of like depends so i'm just going to like depends from what the user input from the props so he enters the size and we can just you know depending on the size we can enter that so we can say size so if the size is provided we're going to do size plus pixels on the other hand if no size is provided what we can do is i don't know we can we can use uh 5 vm i think it would do a better job here so this is for the width i can also use same for the height though it's not a it's not a big deal though i think all right here we can do image make sure you take it the full width and the full height as always just to fit the actual appearance container okay so where is that percent um super cool now let's create the last thing which is actually the company name i'm gonna use i don't know uh logo title styled i'm gonna use like an h1 this time or hd i think it's way much better so i'm gonna have a margin of zero i'm also gonna have a fun size of uh well actually it depends as well on the title size but it also depends on the size here so i don't know let's let's kind of like um so which we can check if the size is provided again you can do okay so the size you can do size plus pixels um otherwise in the other hand if no size is provided whatsoever since we got five em there i think this is quite too much i don't know um okay we can uh we can use like uh [Music] 25 pixels we will see about that in a second i'm going to use a color of like fff for all of that and the front weights well the weight should be kind of like quite bold so you can use 600 of all of that and by the way also make sure to use roboto font in here as i'm using it depends exactly on what font you want but i just like going to import roboto fonts from google fonts apis and i just like made sure that we use the phone family here in the body to be roboto so that's basically as well as this also if you've got like some issues with the html body width and height to take like the full page with a full page height well what you can do is just like make sure to do like html body and make sure you do like with 100 percent high 100 so this one tells them that we're going to be selecting both them body and html and just make them take the full width and the full height as well as also make sure to select all elements and make sure to change both sides into the border box otherwise you will have like complexities doing uh some like you know box sizing calculations right so yeah this is this should do a better job and basically now we got the log title and everything so it should be working absolutely fine and i think for this one we can use something like uh something like 700 even a 900 because it's like a company name so you have to be full bold or full black yeah so we can do like return uh brain logo container so we can have the logo [Music] okay we can have a logo image inside of it i can have an image with an src i'm gonna be importing the logo here so logo ing so from okay we should go back one more we can go images logos logo.png okay cool um yeah so it should go like logo img here so i can do like servicing i'm just using this for like seo purposes just to make it more friendly with search engines but yeah you can use whatever you would like to so this one is actually the logo and also we might also want to display the tags so we can do logo title and we can say this one is kind of like servicing logo title i'm missing a v here is the v um cool also i ordered it for gas by just like passing the size so let's distract the size from the props and do props and we can pass in the size here as well as down there okay and that should do it's not there it's here okay cool now let's go and use this on the top section uh real quick so we've got background filter we got everything and if you see the design here we're gonna have is this one and the slogan both of them gonna have like a column based flexbox while both of these illustrations the like you know upper components they could have horizontal wrapper so we need another wrapper for wrapping all of that uh we can do like um you know slogan or texts i don't know kind of like a logo container okay i think it would be better for that we can do it div um we can we can just display [Music] flex and flex direction to be completely on the common uh assigned right there and yeah that should do the job we can put it up above the local container so logo container can have like a brand logo going on there and later on we can put some slogan so let's see now how does it look like so yeah i might be spelling something yes i am cool so let's see uh yeah we got the logo here being rendered with the text the logo is quite a little bit bigger than the text so yeah it's kind of kind of like hectic to use both of these what we can do is actually use logo slides and texts uh i don't know title size or yeah i think you can you can use text size better so here we can put them the size he needs and this one for the logo size so there will be no complexities no issues whatsoever and um yeah i also mean might need to increase this a little bit like uh 35 pixels to make it match exactly what we want and it kind of do now so here yeah cool i got the problem go we got everything but this one is kind of like you know being centered on the top which we don't want it to be instead of like the background filter so yeah i need to use the top section container there because i did not use it so make sure to wrap everything on fast beneath the background filter um yeah so there you go now here we got exactly what we were looking for like the image and the logo being displayed on the left and also the illustration being displayed on the right um yeah it might seem a little bit by being like space it out evenly because we're going to use or we did already use some space evenly kind of thing here so justify content space evenly so it's kind of doing a great job on the top right there now yeah super cool we got everything doing i already just like noticed about the brand logo so we have some need some spacing about from the logo image and the text in here so i can provide so once this exists margin okay it's left marginalized from 5 pixels see okay all right i might need a little bit more like a pixel okay or even two i think six will do a better job okay just leave it as it is and yeah it's kind of kind of doing like a good job now it's going to create another the slogans in here find the right specialists for the right job so i'm going to do the same thing i'm going to do like slogon next style dots i'm going to use this time in h3 um yeah i'm going to have a margin to be zero this time i'm going to like have the line height a little bit lower so 1.4 should do the job uh color should be always fff and font weight so yeah we can use something this is not quite too complicated so you can use something like a 500 for the font weight and yeah so font size again so let me check what we did to use for the font size right here we use that this is completely irrelevant so yeah i'm not going to totally put like 65 pixels but i'm going to be putting since um well let's put let's put 30 like uh 25 pixels and see how it goes all over the way here we're gonna have slogan text and let's see what can put so find the right specialist is the first one find the right specialist we can have another one okay and what is it so for the right job okay so this is what what's house logo um okay let's check this out so for the right specialists it's it's not fine it's four and this is not being centered accordingly as we want it so i want them to be all centered uh to the left so we can have okay i think you can have online items to be effects there is something wrong with this yeah it's better right now it's doing a better job but obviously this is not exactly what we wanted i want this text and both the slow gods and everything go a little bit bigger so we can go and change the size in here we can do like logo size um yeah we can do 40 what even 50 and the text size we can do uh kind of like 60. let's see how this goes okay this one is growing in a huge way which we don't want it to be so 50 and i can increase this to be 60. okay just 60. um yeah it kind of does the job a little bit better we can have 65 and just increase it by five here so it can curve a little tiny bit cool i also might need to increase the you know the slow down because it looks a little bit too small in here just like kind of unnoticeable so we might need to make it a little bit tiny bigger uh with like a 45 pixels this is quite too much 35 um okay you might increase some pixels there find the right specialist for the right job and yeah i think i think it's kind of better doing the better job and here i'm liking a lot the font weight so i might decrease this a little bit and i can make it 700 i think so yeah for a 700 it quite does a better job certainly and i can i can decrease this a little bit as well because it kind of looks intimidating all right um yeah i hope i hope this one does a bit a little bit kind of better job for this so we can use some margin area here i think what we use like the other component that we already imported so you can do more junior i might need to import this manually sometimes this code auto import doesn't work so you can do my from go back okay components in margin okay i'm misspelling everything all right so you can use margin here i can put direction to be vertical because you have to specify the direction for this also you have to specify the amount of margin you want to give and i can give like a 10 pixels gap between both of these and it kind of look uh okay i'm gonna decrease it a little bit to eight and it should be looking a little bit better yeah indeed so it does a better job in that part um yeah servicing in here it works better with this it kind of kind of does a better job so yeah i'm kind of liking it um for the space easily thing i'm not really liking it so i might just like make him to be center [Music] and yeah it kind of look better i don't know it's a lot of be kind of hectic to you know if it does look better or not but um yeah we can definitely leave it like a space evenly here and yeah i'm kind of liking it okay kind of liking it and it should be doing a better job so for this one i'm not going to be doing any smooth scrolling or something as the last video tutorial so this one's going to be just completely plain in here but you just like land and you can scroll but yeah you can easily add smooth scroll as we did the last time it's nothing too complicated nothing too hard or something um yeah so let's add the last thing in here which is the button and we can easily go in and add a button real quick so i'm going to create a new component for this one i'm going to name it a button um index.jsx again i'm going to name this import reacts from reacts again so export a function it's going to be a button function props again um here we're going to just create the style button they're going to be using so bottom wrapper okay and if you see me like naming it sometimes like you know a page container and sometimes they name it like a button wrapper it's because a page container is actually a div like holds up everything but for this one this is a button we're going to use the same thing as a bottom not going to be using a div so it's not going to be a container more precisely it's better like a wrapper we changed the style of it and it just like you know provided with the same props as a normal html button would take so yeah this is why i name it this way so i'm going to take completely full border i'm going to say border none i'm going to say outline to be none as well and also if you focus on that so if you do any kind of focus i'm going to do offline as well so hopefully that should do a better job uh if you check a lock well let me see so we're going to have some padding from the left and white a little bit from the top on the right so i'm going to use also a color of fff i'm gonna have a padding you can have a five pixels on the top of the right and we can have it two a.m from left and right all right that kind of should do the job um also i might include some font size for this we can do 18 pixels i don't know about that we will see also the font weight 500 should do the perfect job without any issues you might also need some border radius for this just like to have this kind of rounded corners and we can introduce three pixels it should do the job as we want it to be here and yeah i don't know about the colors but we can do okay we will see let's let's first see how this one looks like and you can decide later on so button wrapper and we can pass in whatever props don't children has to give us without any issues okay so jumping back to the top section we can have this one i'm going to introduce some marginers at that before for this one i'm going to have like this one going to have 15 pixels a little bit more so i'm going to introduce the button and yeah i can do join now okay see um issue nothing was returned from the render yeah probably because they forgot about return spaces cool yeah we got a total white you know button that has a lot of margin in here which i don't want to yeah let's go ahead and create like some background color with it and let me just use this background color right here all right so i can copy paste this one cool where is that and yeah so yeah there's pretty much no cursor no hover effects it's going to be adding a little bit so here i need to increase also the font weight to be kind of like 600 a little bit more it looks better now also i might increase this one to be like seven pixels because yeah yeah i think well increase it or decrease it a little bit six pixels it looks better and yeah so i'm going to just put a pointer right there just to make it a little bit more like kind of interactive button and last but not least decrease this one also i'm going to just include some hover effects for it so first i'm going to put some transition um i'm going to have a transition of like well i'm going to use all i'm going to put 200 milliseconds going to have it easing out i'm gonna put some over for this um i'm gonna completely change the actual column i'm just gonna leave the borders so for that i'm gonna do like a border one pixel solid i'm gonna use the same color for this one so which means i'm gonna be just inversing the colors uh for the background that's basically where it is or you can just simply make it total like um you know an interactive color that changes the color once we just go over it which i find a little bit more interesting i think so yeah we can we can do that so it's gonna copy the background color i can change the color here directly so i can just make this a little bit kind of darker i don't know how that does look like here but let's test this out yeah it's quite too much all right let's see now all right kind of kind of looks better once we go over it like changes the color a little bit yeah it definitely does so yeah yeah i think that's that should be a pretty good start for this one of course we can improve this one animation and hover and everything else as we go forward but i might just do a little bit tiny here yeah that looks way much better now it's more like you know obviously i'll be doing some hover effects and the bar is attractive or interactive to better say um yeah we got the service in here got the slogan everything that we'd need from that particular case but um well yeah it pretty much does a better job but what we need now is actually the pretty much the servicing or the navigation bar i'm going to be putting on the top which for this case is only going to be like transparent but if you're like i'm going to jump into a separate page like another page or something i'm gonna be changing this one from a transparent into a pretty much like you know dark blue-ish thingy the same as this uh transparent background filter because this is gonna be like our secondary color after the greenish color here or the light greenish color because this is our primary color and whenever always designing a website or trying to put a website together and for more specifically for like website designers and friend developers you always need to like decide what is your primary color what is your secondary color and then mix and match between the colors you're going to be using throughout the website because it's going to like decide the look and feel and the user experience and how the user sees his website and you know how he feels to him and yeah it kind of kind of like controversial so you have to decide it first before jumping ship um yeah so without further ado here we got created just a simple button to jump back right here i'm going to create another thing or another component it's going to be the navigation bar so it's going to be just not bar index.jsx again as always so i'm probably asked from reads so explorer interface as always or another interface just always forget about typescript um enough bar it's gonna have props again i'm going to have another bar container post some components so for the width always enough y takes a 400 width for the height well kind of kind of controversial as always they say so for this one i'm going to give it 85 pixels just for now i'm going to have a display on the flex so it's going to have a row flex direction horizontal kind of thingy and for well aligning and items it will be centered so vertically aligning items will be centered everything goes into the center and yeah so i have return of our container and the first i'm going to be putting on all the place here is the brand logo [Music] okay let's include the navigation bar um i don't want to include in here because always make sure to encode it on the top right here so this is going to be the top section so inside of it i'm going to be clearing the navigation bar why because if you include it outside of the top section what we're going to have is kind of like this issue where the navigation bar goes like outside of this background filter outside the top section filter outside of you know the background image which we don't want to i wanted to be part of it so it has to be like a child among of these and yeah we can include it throughout the children but first we make sure to use the children here throughout this so we can just you know distract the children from the prompts then we can go ahead and ease the children uh on the best place possible so we got here walking container the standout image then we got the top in your container which we don't want it to be throughout uh we got the background filter and this is the best place that you can imagine it having it on because you know being included on the image on the background filter both so you have to put it there um i'm just gonna do children being rendered up right here and here i can include um the navbar okay super cool now on i think that should do your job now perfectly well this one is is huge so i definitely need to like by default decrease the size of this like the signs of the brand logo i'm gonna have 15 pixels for this and uh like one in one end there all right that's that's too small so 2dmgm and we can have 20 pixels that definitely looks better okay uh here is about the notification bar i said before and i think i'm giving it too much height which is not advisable i can give it a 65 pixels well i think it's way much better now to have it this way i also might introduce some padding so zero from the top well we're going to have like a 15 pixels from the left to the right so it just goes a teeny tiny bit like this or even we can have it to be one m okay 1.1 em point to the last word all right cool so that looks a bit better now we can also have gonna create like the specialist portal here where he clicks it takes him to where he can log in or register as a specialist like join the team or he can go to register as a new customer as a normal client or login as a normal client of course so yeah we can we can have this in here the navigation bar i'm gonna create uh well totally we can go and create another components but that doesn't exactly worth it so it's going to introduce it right here i'm going to like accessibility container uh it's going to be installed div it's always going to have the same thing display flex because it's going to be right here flex you know direction uh nothing too complicated and um yeah so this is this is all i want it to be just flex box direction to be contained there so i can have accessibility container here and we can include some text on it so all this is going to be almost the same it's just like a simple button going on there so you can have um [Music] well definitely that should should basically look a little bit better if you just put it on a button so we could put all of those like this one could be a button this one could be a button uh everything exists on it but i don't think this is the best way possible to put it on so we can put both of these as links and yeah that would be a little bit easier so anchor blank so style.a um it's gonna be a fun size effects let's see how small is that okay should be like 17 pixels color fff cursor pointer text decoration okay it's gonna be none and yeah i think also i might need like uh for the outline to be none as well um yeah i might need also some hover effect so transition should be all about 200 milliseconds easing out and for the hover we can we can just use something like a contrast filter to give it this like kind of like you know over effect that you are going over it with the mouse so what we can do just like a filter contrast and we can give it um i don't know contrast of like 0.6 or something so we can you can put this one like anchor link specialist portal so how does this look like it goes here yeah the actual hover effect looks looks pretty great uh but the size is quite too much so i need to decrease this oh might need to decrease a little bit more and yeah there you go so that one should look way much better now let's create this spacing just by making it you know space between um here on the navigation bar so instead of like you can do justify concerns and you can have space um cool yeah and first you know it takes like the whole space but just being putting it on like the right corner which is doing it exactly as we want it to be so so far so good everything looks pretty great right now it does a good job on having all of this so let's add the other links right from this one uh but in the middle we're gonna have a button so as we did use it before because the button we're gonna be using or as we did to use it already so i'm gonna have register but this time i'm going to introduce some props to the bottom because the bottom by default some have like some huge font size which we don't want to uh let's go ahead and declare some props to control the font size so we can add size from props and uh for this one so i'm going to make sure to use the size so size f size actually is available um very sense so i'm going to use the same thing plus pixels otherwise i'm just going to put some 18 pixels 200 as a string and here last but not least just to pass in the signs just pretty simply nothing too complicated so let's jump back here and of course of course i need to override the size and i can use 13 i think that should do well definitely i hear i need to use align items again to the center they are centered um i think i'm using too much here so i just like one em i think it should do a better job and also i need to decrease the size a bit more at 12 see c11 yeah i think 11 is kind of doing a better job for this one because we need just a two small button for this nothing too big too huge so especially supporters precious border he do not need login and also i'm gonna introducing some marginer so so if you right now i kind of see uh what is the right beneficial of this component that i'm using it's quite huge because whenever you need some margin just that little teeny tiny margin either vertically or horizontally this component is can be like a day saver or a live savior and yeah it does the job perfectly so i can now use like horizontal and you can use a margin of um six pixels i think i can separate them i can use 12 pixels something like this okay i think um i might need to use a little bit more of this separation also i might need to use this one between the bottom and the actual author link so this one is just going to be tiny just a six pixels specialist portal another log in uh you can have it a bit more increased okay it's and yeah so this one should do a better job i can of course are going into like increase a little bit the padding here 1.5 i think it should do a better job and yeah it does it it definitely does with the specialized portal and everything we not need at that particular point and the last thing just we haven't added is actually this line that you know just like a separator line a vertical separate line so we can easily go and add that it's not too complicated we can do like separator equals file div so it takes pretty much full height or it takes like uh eighty percent of the height the width of this is one pixel i think it should be an fff so this way you should like win the ramp a very cool line for us likely but i don't know we will see so you can do separator let's see how that looks like it definitely doesn't so we can do minimum height um three pixels well i think i need to use this one and make it to be like height to 100 um let's see let's it's going to inspect some elements and see what is exactly going on behind the scenes so right now so specialist portal this one is actually the div but it's not being showing anything even though we increase the width and height oh yeah because i'm not putting the background color this is totally my issue so i need to get rid of this so you know yeah still the same things nothing really happened am i because i can't read this one um yeah kind of kind of kind of like needing it let's decrease this one and decrease this one yeah it should be better like 45 i think or 43 should look better now let's create some separation between it and pretty much the register button so we can have just duplicate this one put it here instead of just 18 18 all the time we can have just like 10 10 and i think it should do a better job just uh if it's 38 pixel or percent with this line separation and everything going on sk35 um yeah i think right now it should do definitely uh a better job so we gotta log in we got register we got some specialist portal from the top here bottom and we got pretty good design for the lines and everything that we need from the logo and from the top section so yeah this is basically the first section that we need to work throughout the website it looks identical to the exact design that we wanted in here of course it will look a little bit just kind of tiny different on different screen sizes and different displays but yeah as far as i tell it looks pretty amazing with illustrations the navigation bar and everything so yeah let's jump into the next section so right now let's jump into creating or making if you just take a look on the design exclusion here this is actually like more like a recommended services section where we just like list off all the recommended or the new uh most viewed services by users so yeah we can all display all the services in here just like a few of them and there's actually a button you click it it takes you to a page uh like the discover page where you see the full list of services and you can filter by like specialists or the racing or the price or something like that so yeah this is this is mainly what i am going to be saying about that in particular and this is all going to be doing in his crucible design it's pretty basic nothing too complicated but what i want to make this i want to make it a little bit more challenging and a little bit more like a real word example like real word project so i'm not going to be putting all of these as a static ones no but what i'm going to be using is just using the fake api server we're going to be creating uh which is the json server i'm going to use this json server to generate the data we create like a tiny tiny mini database and then we can just fetch this data from the database using react on you know run real time like using hoax and stuff like that and we can of course use something like axios or something to do restful api http request and fetch responses then we can render out services so this can be a little bit more interesting for you guys to understand how fetching services or how fetching data from network works how you render it properly under components and how you just like handle states back and forth on the component contacts so yeah this is basically i'm going to be doing in here uh let's jump back into our projects and here for the projects i created a new terminal so i'm just gonna use the here uh the json server but before jumping if you see the thumbnails i've just like renamed these and just like made them look a little bit better so they are better and they can easily read through them um you know names right now are more understandable so you got like the thumbnails folder where all the thumbnails awkwards so this is actually going to be thumbnails going to be used for services for sure um here we like the garden we can we can use the stuff like that offices and stuff like that so this is basically we're going to be using for services thumbnails and just like placeholders and i'm going to use this particular folder right here as a static folder which means it's going to be served by our server as a static folder then we can access all the files inside of that file or inside of that server right here all the files can be statically accessed through the server api so let's go ahead and fire up this server since make sure to already install json servers i said before so just run json server it is globally covered by npm so make sure to install it globally before and now you just do json server make sure to do watch and for the watch here you need to provide what database you do the watch for and the database is just basically a json file i've already created a simple example json file called it db.json put it on the root of our folder and it's actually just a simple json it holds you know it's like an open up closing project objects and there's just like services in here which is an array of services and it takes an array of objects each service can have an id which is just a number one two three four and there is a title and there is a thumbnail url for now and of course after all we can just go ahead and add these i under this for just demonstration purposes and show you how things gonna be working and the main part you need to be noticing is actually the thumbnail url so just take a look on this it has actually a localhost 39000 which this is the port i'm going to be running this json server on so that's why i'm putting it and i'm putting car.jpg which means we can easily access the car jpeg image uh throughout this link which gonna be using or by linking or making this thumbnails folder out of static folder so here just put the watch make sure to do it like db.json then next you need to just statically say oh we want to use a static folder then you could describe it which folder you want to use it so you just put a relative file which is inside of src then you go inside of like images right here so it's inside of images or is that it's images then you can go inside of thumbnails so just last but not least just go thumbnails and that is it make sure to pull the last uh you know forward slash in here otherwise it won't work for you so this way you can recognize this as a folder and last but not least let's change the ports i'm going to be sending the ports to be 9 000. so as simple as that it's going to just like run all the database in here and whenever we make changes to the database the watching here is going to like restart the server for us and take changes or make the changes take effect to be more sad so this is basically what we've got uh so far it's pretty simple right now it's crazy it runs a local host 9000 and you can access those resources to like 9000 state services they can get the full array of services and you can read more about the github page and you see the documentation of the json server but this is the basically how it should be working now if we jump back here let's see how things works so if you just hit 9000 uh real quick i'm gonna go graph here or something so i'm gonna find an empty object if you go for slide services so we're gonna find the full array of services if we just go forward slash another first slash is say like one which represent the id of the service we click ok and you get only the object of that service with this particular id so yeah pretty interesting for that and by default the json server module there or the cli knows that whenever you put an id field or rg attribute there it knows this is actually the main attributes going to be used for keys to look for the database like a normal myc core or a postgres database so this is the primary key where you know just like he's going to use it for searching and inserting into the database so basic enough now if we just see go ahead like seriously this is car.jpg just get rid of this and put the name card.jpg which is the name of the file we've got and yeah we got the car in here so if you can put whatever name in here it will work perfectly from thumbnails and it will do a perfect job so hopefully you guys you got the point of what i'm doing this and why i'm using it so later on we can just fetch the other from here and just insert it right into it so let me just get in full fill in here a little bit of kind timidani uh data so here i will escape your garden i'm gonna use garden dots jpg thing yeah it does exist it better says what's going on there um i'm just gonna copy this one or better say i'm just gonna add a little bit of data to it so we're gonna be needing two things one is actually um more or less what we're going to be doing is actually the rating of the pretty much the specialist or all the users or that perceived color service so the rating of that service and we can just say rating we can give it a number for example i'm going to give it a 4 and we're going to have a specialist so this special is going to be an object and it's going to represent the specialist who has created the service or is actually offering that particular service so therefore we can have for example let's say it's going to be an idf1 um that particular specialist and we can have just simple as that just the full name of that specialist okay and you can say like uh mark or something i don't know just just a dummy name there now we can be using it for uh you know testing purposes and yeah there you go shish1 should do perfectly the job for us um let's copy the object and duplicate this and create another service object gonna increase this to two uh i will i will say like here i'll paint your car from top to bottom it's more like a painting service kind of change this i'm going to leave the same special list here because i don't want to recreate the same specialist over and over but for this i'm going to give it three instead of like four i'm going to copy this i'm just going to create a couple of more uh just make this a three again so for this one i will we've got your flowers office okay i will just like i will manage manage your teams or your team during [Music] um i don't know with or with a strict plan okay this is our title and we can make this to the office as our jbg there and yeah i'm going to leave you the same thing in here i'm just going to give it a five stars okay so so far so good this one looks a little bit better if you take a look in here i'm just gonna take a look on services and there you go so we got the full services list with the titles and everything going on behind the scenes super cool now let's go ahead into our react application we create the service card in here then we can fetch the data and render all the services we've got that we're going to fetch from the services api of course we're going to render it with a title with a specialist name with the pretty much rating in here or the rate which i totally forgot about adding and i should do right here inside of each service so i can i can pretty much gonna say like rates um let's say this is gonna be like uh this is actually a landscaping so it's gonna be more like let's say 43 for raids um copy another so for this one i'll paint your car so like a 50 and it's going to be more like an hour late or you can you can take it on whatever aspect you want to but this is just like how services would work just an hour of waiting kind of thingy um here last one is i manage your office uh let's give it like a 42 you know dollars per a pretty much hour and boom so now we got things going uh the perfect way we want it to be so we need to install a couple of things before moving any further so we're going to be using axios to fetch data from the server and uh just like do http requests and just render out things and the second one we're going to be installing actually fun to awesome icons because when i'm using a little bit kind of icons on reactant here i'm going to be using find awesome icons because it's great library it provides a free icons of charge and you can pretty much use it whatever you want and however you want the props and the api is pretty pretty robust so we love to use it with our react application so it's going to add this real quick i'm going to install axios and if you go to like um the for awesome github profile here we can go ahead and just like install these three um you know different libraries you're going to provide us svg icons and everything you need so you can also add all these um it should do the job right now so just npm style it shouldn't be npm install though my bad so it should be darn add because i'm using yarn mainly and that should do the job perfectly so you can just submit all of that and start installing packages and there you go so everything now has been installed successfully we can get rid of that we can just close the terminal we don't need it anymore now let's jump and create that particular service card so i'm just going to close all of these i'm going to be needing this particular service card and we need to be creating it on a separate component so let's do that real quick in here inside of our components folder i'm going to create a new one running this service card i'm going to put an index.jsx inside of it so let's import reacts real quick um i'm gonna export a function it's gonna be the service card components and uh let's create a container so it's gonna have like you know it's a normal card with just a little bit of like um box shadow to make it stand out of the background and we can add sections to it so how i can do um i don't know let's say it's gonna be like a card container so i'm gonna be using install components say div and for example i don't know about the card but i would be so let's say it would be like 300 pixels and i'm just going to give it a minimum height of well let's see like 250 pixels or something it would do a better job that way also i'm going to add in like a background color to it so it's going to be fully white and as well it's going to add a little bit of box shadow so i'm going to save zero pixels uh zero pixels from the y and one pixel on primary china uh and all the blur and we can just add an rgb let's say well let's make it full black here's a zero zero zero 1.7 and and it should do the job i think all right it's quite too much so let's make it 0-17 because you're going pitch black and we want it to be this way also i'm just going to add a little bit of margin to all the sides or pretty much like an outside margin that you create a margin between between the other cards and i'm going to keep like a more an even margin of all this also i'm going to increase the margin bottom so for each one it's going to have a margin bottom uh greater than the top one so you can just add a little bit of margin bar and decrease some separation um i can do 1.3 and i think you do a better job also what i'm forgetting about is actually display flex and you can do flex direction um column well this way i think you should do the job just last one always can add hidden just to pretty much if the thumbnail later on wants to render it if it gets out of the boundaries you don't want it to like overflow just like cut it off and make the overflow here uh completely hidden and this can do a completely or an awesome job in that particular sense so yeah without further ado this is looking absolutely amazing so far and yeah so if we just like take a look on that we created the card now you're going to create the container which is the top container that holds uh the thumbnail then we're going to create this title then we're going to have like the bottom container which holds like you know basic information about the service and you know the rating of the service and stuff like that so pretty simple nothing too complicated i'm going to create a new top container i'm going to do style again make this to be more of a div for that i have a 100 for this top container i'm going to create an image container or like a service thumbnail for it so it's going to be styled um okay we're going to be using a div in here because it won't be that much of an issue for this we can use normally a dev so i'm just going to say by default it will take its own aspect ratio when it comes to the width so it just like fills the full container there and for the height you can limit this to like 11am well it depends pretty much but we will see how things go uh once we just go deeper with this i don't know you will see how things should be going um here for the image you're going to give full width and a full height on different aspects because you want it to fill everything and yeah so this way it should do uh perfectly the job for all that we need so let's see what left for us okay so we're going to be adding both the content container and the bottom container so the content is going to hold the main console like the title and the specialist information so we can do uh the content container so you can use the mechanic like the full width as always connect display flats in the flex direction of a column okay so that this way should do uh perfectly the job for us well for flex items we want this you know the container to take whatever the rest of the width because it is completely flexible you can just leave like too much margin or it can just like shrink it whenever we need the space so you can make flux one to make sure like we shrink it or we grow it on a one basis and that would be a really great um also i might need some padding like 10 pixels of padding from the left to the right because we want the text to be a little bit more kind of like uh you know centered and just goes a little bit so yeah it would be better to put it this way um i don't know we will see how things should be going but i think so just to find the concepts because since we are let's see so since your column and everything i okay so i think i will be adding a little bit look from here from like the top and the bottom we can increase this because once we increase the top of the bottom we need to increase that as well well as far as i see it looks it looks better i think okay we're going to create another container which is going to be the bottom container that holds the information so okay div here takes with again but this time it's gonna take a fixed height like a 32 pixels or something just like two tiny heights that fits the contents respectively you can have a display flat and flex direction gonna be automatically by a row so we can do like align items to be centered to vertically center everything uh so online items center just to find contents now we want space between because we want to like if we take a look on our design that we want this one and this that one to have as much space between them as possible so that's why we're putting like a space between uh justifying contents proper right there and that should do the job perfectly for us now what's going on is what we're going to be adding is actually this top border and it shouldn't be too uh thingy like one pixel can add a solid i can do like an rgb of um i don't know we can do 15 15 15. um okay we can um so if we take a look on the box shadow here we've got 17 uh we can we can do like one nine all right we will see how things should be going this way uh as far as we just like you know take a little bit more look on it and i think it needs a little bit of padding from the left to right so this way you can do padding only from the left and right so zero from top and bottom and 10 pixels all right so so far so good and it should look a little bit better so let's go and render out everything we need so it's going to be pop container um for this i'm going to have the top container okay i'm going to have service thumbnail inside of it i'm going to just pull out the image and whatever we put image in here so let me just go ahead and destruct all the information we need from the prompts so i'm gonna have uh thumbnail url so make sure to match it the same as this you know database thingy or whatever you pretty much uh your attributes your properties names so thumbnail got id title and uh rates then specialist is an object's id and a full name so i can do specialized i can have an id title um at last i think the last one is rate i'm rating this rank this type of props you should look uh good all the way already so if i'm there already here i can just include the alt in here or for title just you know for seo purposes uh nothing more and top container now content container so the constant container we can include a couple of things which is uh the title in here i need to create some title for it so therefore i am just going to do something called title so small div so we can have um this shouldn't be a div though i'm going to use an h2 make a margin to be zero and for the fun size let me see here how things should be going 39 okay so i'm going to make a 24 pixels for it font weights you should do it better with a 500 i think and the color should be completely black okay we will see how things should be going right this way um so let's go ahead and add some title title and uh title so as we destructive level props the later on the capacity through the prompts through the service card component then everything gets rendered out with the right data we want it to be so yeah this is exactly what we want and how we want it to be now if you take a look on the specialist since it's pretty basic so normally for a real world application the specialist here should have like an image or a thumbnail of him but right now since we don't have that we're just going to display his name because we totally got no image for him laying around um so therefore we're going to have it's basically going to create some spacing for these since it's actually a title i'm going to create some or we're going to use the marginer our secret gradients components we always use so marginal direction and for the margin we can have um like a 12 pixels margin i don't know i think 10 would do bar job and uh let's go and create this so specialist so h4 so for the color i'm going to create a kind of like a more grayish color so it's going to be like 150 150 150 um 0.9 i don't know if you can just select the color from this one i think should be good all the way there let me just uh make this one so for that also i'm gonna just make the fun size to be a little bit tiny small so i'm gonna choose 12 pixels for this and the front weight i'm going to use 500 pixels or 400 is the weight and yeah so this way you should do the job perfectly um okay so here i'm going to do the specialist name and i can access especially since the specialist is already an object so you can do specialist dot name so if we double check our database we got full name for the specialists and objects so yeah so far so good going uh all with the way good now last but not least just actually the bottom container we're gonna be rendering up a couple of things so the first one if you remember we need to render the rating star and here how much you know we give it for a rating and therefore i'm going to have a couple of things going on first um so i think let's create so rating container it's going to be a style div and it's going to have a display flex okay just as simple as that and um like i think we can include a color of this to be fully yellow all right let's see so i'm gonna copy this yellowish color and just put it right here make sure it's it's a valid color that should do the job in a perfect way anything so there you go um yeah this is actually the radiant container now for this trading container i'm going to be putting inside it's actually the front awesome icon so i don't know if i can import this okay let's go to import this manually so funds awesome icon from react i think it's uh awesome svg core yeah uh it should be valid and actually totally forgot about installing react for awesome so make sure to go ahead and do like yarn add um so just just copy this one for awesome um so let me just use this so up for awesome dash or four slash react dashboard awesome and because it's actually the main react package that's going to allow us to explore these icons or the font awesome acorns and we can use them on our projects so just install this i already did install it and it made sure that it works perfectly for jumping ship and yeah everything goes fine here so i'm simply going to add a simple star icon in here i'm going to do like import fast star i should just like say fast start it's going to auto import for us and for the size of this i'm going to use um an sm just a little tiny td small thing for it and also i'm going to provide like a number for it so it's going to be the rating i'm going to say rating right on the bat here um and also here because we already like if you take a look on the design so that's probably like we want to add something like well let's see so it's actually here the stars and the rating on the left hand also here like how much it does it cost and it's like a starting ads text so we can just do like starting ads it's gonna be style dots um h6 it's gonna be super small gonna have zero margin um i'm gonna have a color of this so it's gonna be way much like super super duper gray if you click on it it's crazy super duper gray so i'm going to increase this by like make this to be 60 60 60 and you can even make this 0.9 on the color and uh well for the phone weights also we wanted to be like 400 or 300 just a little tiny small um yeah so i think this should do the job perfectly for this guy and let's let's gonna do like const price container it's gonna be styled and i'm gonna provide well there's gonna be the container for the price you're gonna be just display flex to display it on the roadside um yeah if you take a look on that again it's christy they are on the road but this one is kind of like a little bit bold so what i'm gonna do i'm gonna create another one is price text so style div you have a little bit of margin to the left it's like uh three pixels uh just just as less as that and also i'm going to provide a little bit of like a grayish more of a darkish color so i'm going to change this color here so here's the color selector should be a little bit more darker okay also i want to change the font weight to be or i think this color wouldn't look a little bit amazing so what i want to use now is actually the primary color this this you know greenish color uh it would be looking better because just like this plays right it attracts the client or the user's attraction so yeah it seems a little bit better and i think i'm going to be using it right here so let me just grab this color from here real quick so price color okay and for the four ways i'm going to use 500 probably this should work we will see so the rating container here i'm going to do like a price container they're going to have a starting ad text it's going to be like static one so starting at where is that so yeah it has a starting add all capital letters then we can have the price text um for this one we can provide the rating so i can say just like rating and i need to provide dollars here and i can say like forward slash hr for like per hour and yeah i think this should do the job perfectly um if you take a look on the constant container well flex direction to be column here the const container um we might want to like align the items to be flex start should be by default but yeah we're just going to be using it this way and yeah so this should do a better job i think also the bottom container the timer here is quite big so i think i'm just going to use 19 pixels i think it's kind of better um yeah so let's go ahead and test that out and try to just like render a simple easy pick and see how things should be going so if we go back into the home page here we call the top section so if you take a look on the design we need like some you know big text in here then we can display this section so for that particular case i'm going to do i'm going to have a title it's going to be like uh styled so i got import styled it's going to be an h1 it's going to be quite big and it's going to have a margin and everything it's gonna have a fall weight of this to be 700 or even 900 i think it would be better now the color should be completely black i think this race should be a little bit better but that's also before creating any of these uh i think we can we can just get a startup rate because we already got uh something like the inner page container which represents the actual page or the inner page or the contents of the page which gives us some like padding and the minimum height and everything so we can use it out of the box so i can see title and so let's use the services and more um let's see how how things should be going so most easy services and more and for some reason i don't know why this is being displayed on like on the center of the inner page container does it have any kind of like center um line items okay i don't know why by default it's like aligning it on the center this is quite i i totally don't get it sometimes just like there is something wrong with it but this way should be working it should there should be no issues uh furthermore so we've got most user services and more and what i would like to do i want to just like you know give it a little bit more like um a space thing so using like or responding to a specific like responsive design pattern so we can create this in in a matter of like we can go to components so for example you can go component concrete responsive module and something we're going to create an index um just just because it's not like a react thingy and you're going to export device um okay size so it's going to be an object so you're going to just like to say cost the file size and for this one i'm going to export different device sizes and aspect ratios for example i'm just going to say for now it has a laptop with a 13 66 pixels okay just like a number there and we can add the pixels as we go in this right now here for the inner page container what i'm going to be doing or um let's see how it should go so enterprise engineer takes the full width and the full height and what i want it to be here is actually not taking the full width like when it comes to a screen that is too large like this one is taking like 1080p about 1920 so we don't want that we want to just like do a maximum width of like i don't know 1366 of a laptop and this is actually the thirds hold it can go even more larger than that so just like it stays there static and being centered and i think it should be better uh let me get creating containers so uh so content container so i have a width of 100 i'm going to do a max width now and for this one i'm going to use device size i'm going to do a laptop i'm going to add a pixel so it's going to one and just like make us uh you know do this thirst hold of width and last one always going to have display flex and make sure it is column so this one it should do a perfect job i'm just going to well the height should be automatic so i don't worry about that now for the inner page container since we already added this i will make sure that make this to be centered because we want to center everything that is you know goes over the threshold so that should do the job perfectly either i'm going to copy all of these i'm going to do contents container and put the title right into it so for some reason this one as well so i'm just gonna overwrite the default thing i don't know why i totally don't know why but there you go it's lit it feels more natural right now to be like you know this way better than just going all the way to the left so it's just like maximum width let's go ahead and render out all the data of this particular services so i'm just going to try it out with a single service and see how things should be going so i'm going to do like a service card and for this i'm going to create simply let's see here is our database json so we're just going to copy something out of it and yeah so this should do the job i'm going to create cost service um i'm just going to make this a lowercase so just going to copy it just for testing purposes and i'm going to do spread operator put the service data just to make sure that everything is working perfectly so if you take a look uh well for the borders it doesn't show up that much so there's like no borders the text is a quite huge and also this color i'm not liking it that much uh as well as these it just like doesn't seem very natural so i would just go and fix all of these design issues right here throughout the service card so first we got the box shadow which not showing at all i think i should make it um let's see it's kind of kind of started showing up okay let's make it two there yeah it just pretty much now it has been showed up i'm just gonna make it three zero point three oh well i'm gonna make this two see how things should be going they make this for all right it kind of like bumps out of the space so looking way much more familiar and way much better with the star and everything going on inside of here and here for the text it's not fully centered like it's not being aligned in a vertical manner so i can do this in a real quick way so we got so starting at text we got the price container and i think this one so i'm gonna do a line or yeah it's on an items center so this be like fully centered and it should look way much better with the star and everything going inside of that it looks pretty weird made now i just wanted to change this color i want to change the primary color overall in here it doesn't look like the best grayish thing you would go for so i might want to pick up a kind of like a different gray so let me just select this button real quick um let's go a little bit to the green here okay i think um [Music] all right this one feels more natural it does definitely so i'm just gonna paste it here okay we'll see it definitely looks way much better than it was and i can i can pretty much make this one goes like 700. you know it bumps it out and it feels way much better way much natural we can even increase the pretty much i don't know the specialist name not specialist name but the starting text here i'm just going to bump this out so it's a little bit more obvious and boom so as far as i see it looks way much better it looks you know good so far i just like need to bump the title as well a little tiny bit by 18 pixels and it should definitely do a better job so seriously we got a service card and it does a great job just by like putting everything in contrast and making sure that everything gets aligned right so so far so good everything going super great so far now let's go ahead right now which is the most important part we're going to look through the server that we've created we grab the array and it's going to render up every single service on that particular manner so let's go ahead and do this right here on the home page so we got home page i'm going to do everything all the logic pretty much writes i'm not going to be doing it right here but i'm just going to copy well both of these like the title and everything i'm just going to copy these let's leave it here for now let's create another uh component it's gonna be recommended i'm just gonna name it services just by the bad uh so for this one i'm gonna import the next one react uh explorer function services it's going to be our render or the main renderer of services and stuff like that and last but not least what i'm going to be rendering is just a bunch of services okay so i'm going to first going to have a container and resize so i'm just going to normally have a constant container so services container so style dev i'm gonna have a width of um a hundred percent obviously because we've got the thirst hold going on there uh display flats and here flex direction will be column um also align items because they have a default thingy i don't know what's going on there i want to investigate this later on let's just pretty first start or flex start for now also i'm gonna have i'm just gonna copy the title right now so just uh i think where is that okay this should do the job perfectly just putting the title and last but not least i'm going to have like services and this one's going to wrap all the services in like a flex direction where we can render a bunch of services like we can limit it to be like you know six services three on the top and three on the bottom and you should do a perfect jump so we can we can have it this way the display flex just leave it as it is and also i'm going to add flex wrap to the wrap so what i mean with flex wrap it just like once it goes out of the overflow just wrap it into the next line so it feels more natural to do so because it will work the way like flex row but well if it doesn't find the enough space to add a new item on the wrapper on the parent of course just going to get into a new line and add or start inserting on that particular line to reach to the end and just keep hoping on that same thing and over and over again so yeah this is the way to do it or deal with it i'm gonna have first year services container been rendering everything another title and i'm just gonna copy the text that we have just don't put it here i'm not going to be needing this anymore not this because i'm just going to use axio so i'm going to render up everything um from the internet and um yeah so i'm just going to get rid of this service card so i'm just going to paste that in again um so for this title we can i think we can from each one we can have margin by default so no worries about this now services wrapper let's go ahead or i think let's let's just take a look on uh i haven't used it yet so sorry for that guys i was going to call this son of the content container services to render [ __ ] the services and here we go so now we got the title we got everything going on let's go ahead and use axios and just fetch the data out of our server like mimic or our fake server json server let's do so here so inside of services i'm going to create a function so this function i'm going to name it fetch services okay and this function is just going to use the axios to flash services so i'm going to do like cost response and this one is going to be async awaits so as all we know uh once we fetch from a network or something like we do an http request most of the time and always use promises instead of callbacks and this is the easiest way to deal with it and that's what xcoc uses actually behind the scenes returns to your promise you have to wait for the promise to finish in order to continue working with a piece of data that you requested for that particular server so here i'm going to just call this as asynchronous i'm going to do a weight i'm going to call axios i'm just going to do get because that's what we want we want just like the http get method i'm going to provide it with the url so this uh i'm going to have an http localhost um 9000. and four services that simple nothing too complicated i'm just gonna provide it with a catch if anything goes out of control if any error just throws up like the server is down any error i'm just going to say okay cancel me or console log that particular error just like that and cancel the whole error objects uh super cool so you wait for this to wait for that it gives us the actual axios response now if the response is valid like there was no errors happening inside of the catch method everything went okay just straight to the point so what we can do we can just exploit the response here um for now what i can do just to see if everything works i'm going to do a response say response dot data inside of dot then it's going to like have the whole services data like an array of services so you should have now we should call this fetch services method inside of like the use effects so why is side of the used effect because use effects gets only cold once the component is mounted and that happens only once on the component lifecycle not like every single time like every single time you want to update the components or re-render the components and this kind of like prevents multiple requested server like you know it decreases the load time of server load balancing the server and stuff like that and of course it helps not crashing your react application right here so i'm going to use user fax it'll provide a callback and provide it with an empty array to tell it only to run once once the component is actually mounted on the dom tree so for therefore i'm going to call fresh services and it will take care of everything else that we want to so ctrl s save if you love i'm going to go here open up the dev tools so check out this one and there you go so if you take a look on the response we basically got everything we need so we got id title thumbnail url grades everything so all the services inside of an array has been fetched surprised successfully without any issues with all the data that we need even specialist data and everything so on and so forth so yeah going so far so good everything is absolutely amazing now now once we get a response what we want is actually to hold this response on the state so later on we can loop through it using the map method and we can render up each service so let's go do this right here i'm going to do like services services or i'm just going to name it offered services just like to differentiate the names i'm just going to leave this one so i'm going to use stays in here and for the first time it takes just like an empty array you can provide it to null but i would love it to be an empty array because once there's no services it's gonna be empty uh otherwise if there is some services it's gonna be full of like services objects as simple as that also right here like what i would like to check is just create a new variable to every single time check if the services is actually empty or no or undefined so this way we can you know have conditional rendering we render like a text message to the user like oh this services or there's no services added to the database yet so those services exist please come back later something like this just it better demonstrate to either what's going on and it's better for user experience of course so is services empty it's going to be a boolean so not offered services so if not for services for example it's undefined this one's going to return true or no it's going to be returning true or if offered services is actually valid and defined so we're gonna have overservices.length to be zero so if youtube is zero it's gonna be empty or it isn't defined or null so yeah this is one of the cases you should check for always and this way we can have it going on in a perfect manner so so far it's going absolutely amazing now we've got everything to check for for the services wrapper and everything now if as empty so just check out this so i'm gonna have if it is empty i'm gonna do gonna crease like um i don't know like warning text for this one it's going to be an h um let's see h2 or h3 i think it's better for an h3 um so the color for this one is going to be completely or it's more gray okay so 100 100 and uh weight should be like 500. it should do the job perfectly so for this one can render up with warning tanks and say no services are published yes so right now since we're not setting any state we should always see this message being popped up so clearly no service is published yet and we can even have it on the center like we can just like align uh or i think it's an extra line to the center and i don't know for some reason it's not working but never mind it's just gonna leave it like this i think yeah it does a better job this way so no services are published if it is empty but somehow we managed to change this one which is like do set services from the response and reset the data so here we go back message appears at first once it is loading then it just goes out of the way so of course we can add like a loading state for all of that to happen and we can like add like a spinner that is loading and stuff like that so it would do a perfect job for this case so i can just go ahead and do like is loading start loading these states to be false first because it starts on a non-loading state so once we start fetching we're gonna do set loading to be true and once we end it up we don't care about if the errors happen or if it's successful we're just gonna like make loading to be false so there's no further more loading whatsoever so this way should look a little bit better and here we check if it is empty and not is loading okay otherwise i'm just gonna it's gonna put this one so no services empty and is loading i can put something like a loading you can use a spinner but for now since i don't have a spinner i don't want to go into complexities of creating a css spinner you can find that out but yeah it should look better so if you see [Music] um where it says so set loading i can go and create a helper function for this so it's going to be like const ways so this one is going to wait for a number of element like milliseconds or something so say number it returns a new promise a new resolved promise um i'm just going to turn a new promise of course and it's going to have a resolve method and it returns a set timeout so once this timeline has been fulfilled using the number we're going to find so this weighs thing just going to like continue working so it's basically this we can just use it for like demo purposes so i can do a weight wait for example like on a three second basis uh let's see screw see now we get loading if i refresh so i don't know something something is completely odd so if it is loading just like you need to play it right here just clearly see now it is being loading so just loading loading loading loading after three seconds just like you know goes off because we finished loading and reloading services so yeah it looks pretty great now now this is actually just like you know better for user experience but now let's render our services into you know the actual application and show them to the actual user and for this one we're going to check is services empty so it's not empty and is not loading so if both these conditions are met we can now render services so we can go to officeservices.map we can have a service we can have an index and for this one we can just simply return a service card so for this one it's going to be pretty promising so we can do like service and we can pass in all the data of the service and before all of these we can just go and do key and idx for the actual index of that particular service just pass in a key that reacts knows how to optimize this and do a good reconstellation um you know algorithm has how to re-render everything up so yeah it should look better now so without further ado i think i totally well it should look better now so we should render all the services card in the right point and yeah there you go so you got your services right into the point with everything that you need i will escape your garden i will paint your car from top to bottom uh someone else over blah blah blah but for some reason this service card i know which why it is by default being putting them on in the middle but i think i can go and investigate this real quick so we got the actual uh title which is an h2 to align um so yeah it's not changing probably if you just title content container so we already put like flex to be on the start but still getting the title to be like in the middle for some reason i don't know it looks good to be honest but it's not really the perfect thing that you should go for from that side but okay so let's go with the text online so we should do the job now refresh loading so just like we're loading for services and boom so we've got all the services everything we need to know about the service and everything how it goes from that particular service so it's going super great so far from all that i've seen in here with like you know the top section in here that goes pretty perfect with everything like illustrations and stuff like that then we find here we just scroll down it goes into like the server it's running and it finds all the services we've got it just like renders them it renders the radius please in here so everything we've got in here even though we can go ahead and add a couple of ones to the database and they still will work um perfectly so if i just copy this one add like a new one right here for example it's going to be an id of four so [Music] make your palace garden or something uh for this one i'm going to use something like a grass mark brownie for this one you just like say it's going to be 50 okay so go back refresh that and we should get the new service being loaded for us that's crazy yeah the new image has been added and everything is going on there so yeah it's it's absolutely going fine i don't know i should i've put 15 here uh so this is rating all the rates okay there's something odd i'm just putting the same break in as the same braids which is quite weird and dummy so let me just fix that real quick i think this is a service card so i got great and they should put rates in here instead of rating i know a lot of probably people feel like laughing once i did this a couple of minutes ago but yeah those are the mistakes now it looks better and now it's more organized into the things that we want it to be so yeah it looks amazing now everything looks absolutely great we can go and add a button down there but it's not really a big deal just to respect the design because you know how it looks right here on on the bottom so yeah we can we can just make it like a few more button that takes us into the next section where we can view more about how things should be going on so let's go ahead and do this real quick in here i'm gonna so i need to look for my page all right what is that okay this is a home page and we wanted to go to the services so this is a service wrapper and we want it to go right down and we want it to have like another container that goes you know overlap there so we can create a button let's never mind about this but few more button it's gonna be styled i'm gonna be selling my own button there so the already button that you have created and here we can just you know change the background color of this uh let's see how things goes here so background color should be this way so border i think it should have like a stroke does it now it has is a box shadow let's check out the css so we inspect this i'm gonna have this black shadow i'm just gonna copy it and paste it right here for that okay we haven't got the values or the book shadow attribute name so this way it should look definitely better um just last but not least we can include the text and making it a little bit more grayish just you know just to make the contracts looks good so let's copy all of this color and we can put it here all right so this is the view more button we can create a container for it because we want the view more opponent to be horizontally centered so we can do this like uh bottom container it's gonna be a gif so at this point flex and we're gonna have like a justify content to be right into the center first make sure to set it to be 100 to the width otherwise sometimes it might not work not all the times but only sometimes for you so bought a container and we can have a few more buttons and we can do a few more so looking back into the application we got the view more here it seems like the background has not been changed okay so let's see [Music] what am i doing wrong so background color i think nothing has been changed so far i see the style button and that's because we can style this because i'm not passing the class name so it should pass in the class name in here i should do class name equals props.class name otherwise it won't work and i'm missing an s at the end here so no more problems please and there you go so now we should look a little bit better the hover effects is not really amazing what we're looking for so i can do over and i can just make out a filter to be contrast just a 0.9 okay i don't know if this is what you want it to be i don't know why you're changing the background down there it's kind of like odd truly so i'm just gonna [Music] keep the same color okay i don't want to change the colors let's gracie now it has this effect we can increase the contrast to make it a little bit more obvious which i'm gonna do to eight i think this way yeah it definitely looks better way much better um i'm just going to decrease the font size of this so i'm just going to make it like uh 13 pixels on the size or 14 pixels i think he would do the best job here and yeah there you go so we got a cool button but the only problem here the button still shows up but it's loading so it's easy effects you can just copy if both are not empty and everything so i'm just going to copy all this so for all of that i'm just going to [Music] get rid of the button okay just not completely describe the button i'm not going to render it at all now if you take a look once it is being loaded in all the data from the server the button shows up after the loading and after everything gets loads up so yeah super interesting and super amazing i've got our services we got the nice title in here just down the landscaping all the top section where everything goes up um yeah so it looks so far so good you can make this button just once you click it it takes you to like a discover page where you can see like a full list of services and how stuff should be looking like but yeah as far as i say it looks so forgot uh right now now after finishing the services and just rendering and fetching all the services that we're going to be needing now let's go and create um the specialist and you know section in here i'm just going to call this as a specialist ad because you know it is like advertisements for specialists to join the platform and just like you know this is servicing your specialist and you have an outstanding service to offer you know you can go ahead and just join us as a specialist which he can click and he takes him to like a registered page or a joint peak for a specialist where he can just like you know put his details uh you know specialist things services and stuff like that so yeah everything can go happening here well this is just simply an advertisement for a specialist to join so if you are offering any service have any service to offer you can join us as a specialist right here so yeah it's pretty simple in here i just want with just super cool illustration and afterwards we're going to be creating this pretty simple feature probably not including all of these things in here but just you know we will see and how things should be going so let's go ahead and do this real quick in here i'm going to go back into my components and everything um i don't know something isn't saved in here which i don't know what it is but i'm going to go i'm just going to close and collapse all of these so so for this one i'm going to create a dumb component so i'm just going to do a specialist and i'm going to create some index.jsx for this so simple i'm going to do and for the ads again many exports function of specialist and i'm going to have to make prompts so pretty simple now we're going to have first like a specialist add container which is the name container so we're going to do this tile to make sure to auto import it with so for the width i'm going to have 400 percent um for the height it actually depends but you're gonna do like a minimum height of like 500 pixels to you know get into the four points into there and just like show everything going on for the specialist um you know just like it takes a pretty good space for the full 500 pixels on height so i'm going to do 500 pixels uh for the display i'm going to use flexbox of course i'm going to put a basic background color so it's going to be more like um i don't know a bluish background color which is kind of like our secondary color in here so as i said before whenever you're designing or putting a website together and you want to just get the best out of the website and make sure all the color matches the ui matches perfectly well you have to you know at first before starting and once you are designing like using a figma or something just prototyping make sure to put all the colors that you're going to be using like you say oh this is the primary color then you just say this is the second or secondary color the entirety color and so on and so forth so this way it can tell you exactly what colors to use and how to match or mix and match them uh throughout the whole design just to make this line look perfect so this is what i'm doing right here uh and just for the sake of the story i'm just making it simple that's why i'm just copy pasting it but you should like to create a simple project or more saying objects that exports all the colors all the theme colors that you're going to be using then you can reuse this object over and over without just like copy pasting which is quite bad super bad actually so i'm going to use this background color right here um for like align items i'm going to probably align the items to the on the center because i'm going to put like flexbox both on center horizontally and vertically so i'm just going to also do justify content to be on the center so this way we can center up everything both vertically and horizontally then we can create some like uh you know spacing between this just some margin and it could be totally okay for both of these like you know the illustration and the text so i'm jumping back uh right here so this is the first container we're going to be creating uh the second one i'm going to be creating the contents container it's going to hold up everything so yeah whenever we like we center it's going to have it down right into the middle and it's going to be like a content container like an inner container more likely so i'm just going to name it container style div so it's going to take a full width yeah uh for that and also it's going to take a flexbox display but this time it's going to like flex for the direction it's just going to be like normally a road direction we're going to align items on the vertical sense so to be center also what i want is actually just to find the constants i'm going to give it some spacing which you're going to do space evenly and this is you know doing the same thing as we did with the top container in here like the main landing page top container which make it perfect to mix and match between the illustration and the actual text we've got so yeah it should be all okay here we can have it real quick let's see so we can do justify content um yeah let's type in justify content there you go it should be on the center now and the other thing we want to new is actually have you know the slow gun in here we already got the logo so you remember created the logo separately so we have to just make this one stand out like the slogan container and for this one i'm going to be using a couple like i'm going to see it's going to be an h2 for both of these slogans i'm going to normally what i'm going to be doing um so let's see so it's it's going to be like a container more likely so i am um actually depends on how i want it to be used so i think yeah okay so i'm just gonna use it this way right here i'm gonna do like um okay first i'm going to create the slow down container i'm going to make this a normal day i'm going to assign this display flags and flex direction of column uh as normally you would be and overall i'm going to create a slowdown which is going to represent our text for the slowdown and i'm going to make this to be h2 or something uh say margin zero let's check out the width and heights for pretty much or pretty much the font size it's quite huge there but we can see something like uh okay zero margin but the font size should be 20 pixels right and yeah we can um i think should be all okay i just add the color to ffff and the font rate as well to be matching kind of like uh i can do 700 i think probably we will see that and we will test it out and we will see how things should be going on um yeah so that's it we got the button as well we already created it so last but not least we have to do is actually the illustration from uh right here so i'm gonna do stand down image i'm going to just name it here so this one i don't know we can we can have it in between like uh for the width and highs we can have like let's say 35 em just for this one because later on once we change the you know once we try to add responsiveness to the website uh which you're going to be having is pretty much we can go ahead and control the size and we can use like media queries to resize the size and make it a little bit smaller for smaller screens um yeah so this is probably what i'm going to be doing for now just for now i'm just going to lay it out straight into the point i'm just going to say the highs for example 29 um as well so that should do the job perfectly now let's just put in our hierarchy and create the react components so it's going to be specialist add container then i'm going to have a contents container and then i have a slogan container inside of the slogan container i'm going to just like import the brand logo so remember we've got logo at first i don't know what i'm naming it i think it's brand logo right here where is that yeah there we go i don't know something it's not exactly uh let's go ahead and pull this right here so i'm just going to go back once i'm going to say frame logo and that should do the job perfectly first so that is the first one i'm going to use some marginer as always so our magical components direction so very cool i'm gonna say something like well i'm gonna say something like let's see 1am it should do the job i think but we will see more about that so here's actually i'm going to be using the slogan container and boots both of the slogans because we're going to have two slot guns the first one is actually the first line you're going to see here and the second one is actually the second line this way it tells us what allows us to create the separation and add a new line without just like waiting for css to do its magic and decide if it goes to the next line or not so yeah here we explicitly tell it to go to the next line and without just letting it to implicitly decide this for us and this is actually a good point to go and control so i'm gonna do slogan and again slow down so i am just going to copy this one right here and last but not least going to have have an outstanding service to offer so i think i'm gonna be having um okay i'm gonna have anything more than two i'm gonna have a three so yeah service to offer here's the last line uh not totally sure we will see how things goes right here uh so this is brand logo the slogan container and the other thing we want to watch is actually the standout image so just include standard image size image src so alt uh specialized drawing and specialist and here i'm going to just go ahead and use this let me just push the closing bracket and i'm going to import the image so i'm going to say just like um farming image from let's go back go back more times images i think it's it's inside let's see so organic farming which is not well formatted i'm just going to name it farming.png and that should do the job perfectly for us so just farming dots png all right so when i was going to use the forming png or farming img and there you go so this should do the perfectly the job for us let's jump back and so let me close this real quick got page container we don't need this one um so here the home page you're gonna have like top section and then we got services for the contents container then afterwards you're going to be doing like the specialist ad okay i think the contest container has um well let's see [Music] we actually does have that so yeah it's kind of like a little bit kind of awful uh let me see the inner container what does it have exactly because perhaps i'm gonna i already put some padding for the inner page container uh which i explicitly put which i think i'm going to totally just like go ahead and discover for now and i'm going to be putting some padding right here for 1 pm to make things go to normal um yeah so this is a specialist ad i'm just going to include it and let's see so let me just go back well i am here okay so go into the application again and yeah so we got this but we are not getting it right it's not the way we are expecting it to be so it's not taking the full width as well so this is also as unexpected uh we want it to take the full page with not only just state going on here and if that's because i'm putting it inside of like the content container okay something is totally wrong so let's take a look and yeah as far as see it it does perfect job when it gets like takes the full page so this is just gives a better you know understanding how the page is actually oriented and goes through but still this one is not looking pretty great and i think i know the problem because for some reason our application all the time it's just like for flexbox it by default uses flex or the center when aligning items which is i am not setting and for some reason this is happening so i think i need to change that or like automatically override it in order to make sure that it works perfectly so where is that i got the slogan container i think in here i'm gonna do like um because we got a line item so we can do align items flex turret let's see how things should be going in here and yeah they are automatically gone into flex start um the other thing i'm gonna be putting is actually the size of the brand logo so it's gonna have a logo size um i think we're gonna be using under like a 30 text size uh look at 25 or something i don't know i'm totally out of like um say 15 here and 45 will this change anything yeah it kind of like does say the same we've got it up here but for the design if you check it back we don't want a super huge logo so we can go ahead and decrease this to like um 35 to 40 and uh yeah it should do a better job now it's clearly see they're just gonna know increase a little bit like the line heights between these lines and also we can just make them a little bit bigger because it doesn't feel to be uh that's you know that good so here and we can do like mine height to be 1.6 even uh it's quite too much for endpoints x 0.3 we need to increase that still so 24. your specialist and have an outstanding service checking back then um yeah it kind of like looks better now and you think it does the job perfectly so far so yeah i think i think it's it's already better and it makes a lot of sense going on in here so yeah super cool so it goes pretty made um so flex starts and everything i think here i shouldn't justify the content to be centered i think space evenly to be spaced out evenly i am not sure so okay i should put this not right here but um i should put it right here for the space evenly because this is actually the parent container of both that we want so this way it kind of like i don't know it doesn't feel that great so i better than using this space evenly track let you make make it center one go to the slogan container um like here i'm gonna create some margin to the right so this way we can just go ahead and like we put them both in the center but from like you know the slogan container we can push it or push the illustration to the right so this way we can create some separation at the middle and it feels or it would look professional this way um yeah it's better for user experience that way to just separate sections and separate illustrations from text and yeah it kind of feels better so here i'm just going to create like a 4mm for this one or what i'm going to be doing putting is actually 10 okay so the bigger it goes the berry becomes the temperature this is a lot to process and here for some reason it does uh okay so align [Music] um show yeah it's kind of like doesn't fit correctly that's just gonna try and decrease this a little bit it's not not really it's going to use a fixed one i think it should does the job perfectly um yeah so now right now it looks way much better it just like does the job without using this percentage thingy so it already does a better job obviously and now let's pull this we're going to be putting is actually this button right here so you can go ahead and so right just beneath the slogan container i'm going to be having some marginer okay so marginal going on i'm gonna do a direction again vertical i'm gonna have some margin as well going on with like uh okay we can we can say 10 pixels for this one and last ball is just going to import the button real quick and there you go so i'm just going to say button um put it here and it should spurts um join as specialist so this way it should put a button right beneath it so the button is huge it totally is i think i do have the size for the bottom so now you can just gonna say the size should be like a let's say 14 for the bottom join as specialist 15 okay 15 does look way much better than 14 and here we can have like um 1.3 am okay and um i don't know about that but i think i could leave it just one 1 a.m or even less 0.8 mm and yeah there you go so right now it looks perfect uh the section does a great job and it looks just pretty decent all i need to do just create some margin between this and that so just like you know you've got some separation and some spacing it's always put some spatial on the web page or spacing on the web page sorry and make sure that you know it's spaced out evenly and all sections gets like enough spacing for the user to pretty much notice them just don't over put everything in the same place because this is a quite bad thing either for user interfaces or user experiences and yeah just just try to separate them um let's go back into where we left here so the index and simply what i'm going to be putting between this is actually i'm just going to do a marginer so direction again so let's see we've got some spacing but that's not much decent um yeah so there you go it does look better now i also i might create some spacing between like the inner page container and here like 2 or something i think it does look better this way so now we got the loading we got everything this one gets loaded pretty well made uh we got the bottom we got the first section going on very well uh we got like the specialist section where he can just you know go down and see oh i can be a specialist i can i have a god of service like a car painting landscaping i don't know just something web development or something and he can just go to join as a specialist and this should be awesome so now last vlog is what's left for us for the design for the landing page is actually the footage so the footage should be simple straight through points nothing too complicated we've got only just like you know two icons in here for like facebook and twitter uh servicing categories access and stuff like that so let's go ahead and just jump into making the photo real quick i'm going to be creating the photo as like a dumb component because it is really dumb it doesn't know about the state it doesn't need to know about the state so just like you're under the footer and it has like links once you click them it takes you to that links simple as that so we'll just jump right so i don't know what i'm doing okay components again so i'm going to do footer i'm going to create it in this.gsx and for that i'm going to start with like i'm going to add from the export function half props now let's create the photo container the main parent container it's going to be styled we have a div for it and for the food and container take a look on the design you know very sad so as clearly it takes the full width everything all out of the corner you're going to have like a fixed height for it to be you know just decided from the side and so let's go ahead and jump into creating this for the width as i said it's going to take 100 it's going to be a display flex and for the height i can say well the minimum height that it could take only minimum because later on once we work on responsiveness so this one can be changing so i'm just going to say minimum height ah it's not 100 let's say 300 pixels uh first um well for the actual flex direction it's going to be a column since you know it's you know column based and you want to just like one in underneath each other's um yeah so this is the first one that you want to do uh also i'm going to have a padding so i'm going to have a different pattern from the left to the right so from the top i can have something like one point or you can say 2 am and from the left and the right if you jump back into it um it should be like 3 am we will see how things should be going but yeah it should be that way i also need to include some border top here so border top and well i'm going to use rgb here it's going to be something like a gray grayish color i think i don't know so it's going to have an opacity just like or 0.6 border let's inspect that real quick so this is the border i got so i'm just going to copy paste it not really worry about much and yeah so there you go now i've got the fuller container now what we need is actually to create two separate parts the first part and the bottom part in here like the top section and the bottom section so yeah we can have both of these i can do like top container style and for this one obviously it's going to take 100 width so the width is always 100 um it's going to take display flex uh since we want them on a row manner so like each like side in here represents its own so you can have it in a row manner and we can just include some like margin from the top or simply just not include anything i'm just gonna leave it as it is okay so this is the first one the second one we're gonna be needing is more like uh like an inner container for it or something or we can name it more like a content container so just say container um then it's gonna be display alpha flex and a flex direction gonna be a comma because you wanna just like display first a title then you know beneath here like links or something that takes you like for example say categories and those are the available categories on this website and you can just you know navigate back and forth between these categories so this is exactly what i'm wanting here i also want to just like introduce some like let's say some margin between these like to make it look a little bit better i'm going to just use knots and okay oh last of joy it always just adds a dots conditionary here so i'm just going to say margin right it's going to use um all right it depends but for this one we can we can just go and do like two percent or something just for now and i will see how things should be going along the way here so this is actually the one uh the next one i'm gonna be wanting is to create well this is actually gonna be the container that we're going to be needing the most just like you know sitting down there everything going on uh now we need to actually to create the bottom container that's you know holds like for example the logo and all right to reserve it we can add icons but this is actually totally optional because they are super easy to add and stuff like that so i'm going to be adding bottom container styled div height um yeah it's okay for god's press styled so let's say the height should be 70 pixels with the display of flex so we want it a row directional flex and also i'm going to add some boring to the top so the same as the design here if you see so this is actually the border top of the design just simply copy paste in it and that should do the job for us perfectly and last but not least we also might need some padding as quickly in here it already does have some pounding so we can we can introduce this pattern it should be good so i can say padding zero from the top and just introduce like 10 pixels from the left and right and last one is here because we're using flex plus so we can um by default say uh justify content so flex start just for now we will see how things should be going on later on uh but i think because we want them as this one are going to be totally separated so we can add two containers and we can we can make you know both of these goes like in a separate way just by doing like space between so here i think you use space between and for the sake of that we can then play it like right container or right bottom container to be more concise div for this one you're going to have display flex and also left bottom container and this one should be displayed flex as well [Music] um yeah super cool so we got both of the containers going on really well and as far as i see should be added everything let's go ahead and add like the titles of the categories and the access in here and also the links that allows us to access different sections of the website like the hyperlinks in here so here i'm going to just going to create like a title um styled let me use h2 so margin 0 i'm going to create a margin bottom because you're gonna have like some separation from the links so you can create um like eight pixels for this one color should be pitch black for weights i should be 600 and the fun size well i don't know about the fun size totally but so here how much it does have like a 44 44 pixels of font size so we can have it let's say 28 thinks too much 28 24 pixels okay uh we will see so this is the first i'm going to be adding a link so i'm going to just like say footer link styled dot hyperlink in here as always i'm gonna do text decoration just override none and also i might need to like change the color to match this ones so let's copy this one um yeah should look good now and the fun tweets it should be just like regular nothing too shady like 500 or 400 will do the job let's stick with 500 for now and yeah we wants like a little bit like a spacing between these so show it look like you know space downs so you always need to say for you know spacing i'm gonna do lots or i can say [Music] well i don't know like not last of type i'm gonna be like margin to the left or to the bottom to be marking signs six pixels or five pixels all right i am not sure about this but we will see and and see how things should be going on around the scene here so let's start putting things together i'm going to first put the footer container you know the main parent container we're going to have a top container instead of that we're going to have like um it's going to be content container so each container represents you know has a title like categories or something then we've got the links that you know we're going to be linking into it so therefore in here we're going to have a title first like categories then we're going to have like an f link so for example you can do car repair you can do uh carpentry um landscaping others can even say cleaning uh so this is first like the first section or the first contents and we can just copy that and create the other one so here i've got it like named as axis so we can have it axis and this one allows us to access different links for different parts of the webpage for example login join us uh logan as specialist and become a specialist so i'm gonna get rid of this yeah so that's just looking absolutely great now let's add the bottom container so for this one i'm gonna have two we're gonna have left container first left bottom container it's going to have a brand logo so for this one i'm going to be doing a little bit like you know changing if we do like really want to conditionally through props hide the logo image and just keep it off the text or not so let's let's see how things should be going out this way and for the size logo size let's say 20 should be 16 or something like that so the left container and then also have right bottom container and here logos or icons more precisely so yeah so this looking so far so good let's gonna try to put the footage together into the home page to render your announce and see how things should be going so it should be out of the inner page and the content and everything it should be like on the same level of the navigation bar but only for this special case the navigation part is like the top section container of the landing page and stuff so therefore we have it here but otherwise everything should be like you know the parent of the for the mouth bar should be the page container and you can do footer auto import it save it real quick so jump back here and there you go so this is the footer so far that's we have gots it's totally not the best as it expects it to be but we will see what we can do so it's kind of like i've got a lot of spacing going on in here for both of these so what i think i can do is just like introduce some padding or spacing for both of these so here's some column i can do for justify content space between so this is the first one i think um so let's see so this is the footer okay i think i totally need to like ignore uh the bottom padding bottom should be zero this way yeah it should it should look this way it looks way much better than it was also over here for the bottom container we need to like align everything to the center so i'm just going to align items um center there also i'm missing a border on the top in here for some reason so i don't know why but i think because i'm not putting like enough margin between them between that so you can have a teeny tiny margin yeah it does look here way much better so the margin looks good and everything also here like the title and the text are quite big and huge so let's go ahead and just like change them back from here let's say 20 and am i using so font size 16 pixels okay 20 pixels [Music] okay i'm going to use 15 pixels for these and also i'm going to just like make sure [Music] it goes like uh what is that so god it's constant container it's going to be a line items start because it tends to have it by default and um yeah so right now it should look the way we want it to be and it does look absolutely great so the footer looks awesome we got some text in here we might create like some margin from from here just like three percent or something i don't know but yeah so this way it definitely should look better and yeah so also i'm not liking that much the borders they just don't have that much of like you know opacity so they lack in some opacity to it we can go ahead and add some opacity to this one so black i can decrease the opacity let's see you're going to change it to rgb a i'm going to make zero forming opacity and just like div it off a little bit yeah it definitely looks better now we can just have the same border top right here there's that uh there you go so it definitely looks 100 better uh everything looks better uh well for this one we can have 13 pixels yeah so this way it does look better also on my increased link that's the margin between these okay pixels well yeah it does it does definitely look better it's going to add some missing links like home improvements and demolition and stuff like that just you know testing purposes and improvements you can say nutrients okay and yeah i also might need to like put some margin from this um sorry is that a little bit kind of like the top container needs a little bit of margin to the bottom yeah this way even more i think one em would do a perfectly good job for us and yeah so without further ado it looks definitely better now with this way i just need like the f-link a little bit like a cursor and just like normal stuff so cursor yeah now it looks already feels more like a clickable link and the footer looks better so here just gonna make the uh pretty much change the color being able to change the brand logo color and just edit that just after all so just go to the brand logo and through all the props what i'm going to be having is two things i'm going to have color and show [Music] logo so if no show logo um i think it should produce like hide logo it's better and convenient for the usage and height so not hide logo so this way we can hide our logo also i might need to increase like color and say color and for the logo title we can have a color so just like instead of using fff color f the color i'm just gonna pass in the color otherwise you're going to use that effect and make sure just to put it as a string so this way we can go back here um yeah i don't really care about the logo size all i care about the color and for the color we can just grab the design see servicing well this is i think the color we're gonna be using for the logo more specifically um yeah and here also i might need to increase this a little bit like 25 and say hide logo i'm not wrong right cool so it should be looking again going back and there you go so we got servicing and it looks amazing so far with you know everything that is happening behind the scenes uh yeah so far so good it looks absolutely amazing we just like we might even need to make sure that this is getting a little bit bolder than it is which like we can increase this to 900 i think it does definitely look bored and better for like all aspects so it does look here better here is better and yeah so i'm just going to leave it this way in and everything should be looking absolutely amazing now so we got the photo got everything going on the right way so let's go and add like all rights reserved and stuff like that and let's go ahead and do it real quick here for the pretty much the footer so brand logo left bottom container i'm just gonna put it right there um privacy next i'm gonna do styled dots and h6 okay i'm gonna do the color of this one i'm just gonna copy the color from the design here okay and for the front size we all know this is going to be super duper small so i think 11 pixels or even less will be okay for it and we might want to increase or just put some margin to it so you can see like margin to the left 10 pixels all right so you can see the privacy text and i want reserved i can say 20 20. this is a thought so all right it's reserved but it's not exactly as we want it to be so it's not being centered for some reason even though we are i think century and everything else so so this one is in the center uh about this one from h6 yeah it's having a lot of margin that's why the center is not working which i totally agree all right i can go and get rid of this just like say margin will be zero make sure to put it on top so it doesn't override the margin left and um so can i put margin auto for this one just to be centered well i think yeah i think it does do that also i'm going to just put a margin tom just a little tiny tiny three pixels [Music] all right yeah i can't add a little bit of margin to it so i can use display flex and if i align items to the center hopefully yeah it does and you can do margin on top so margin should be looking zero ordering from top three pixels a little bit more so it goes right into the place and there you go so it looks better it definitely does i also might need like a little bit of opacity to it to the color here which is not exactly how they want it to be um let's see so yeah let's go and change out the color instead of changing the full opacity i'm just going to make a little bit more lighter and all right just a bit okay and there you go so we should do the job perfectly also we need just like the copyright sign in here so yeah you have to always google that out and this is the code for it just copying it um coming back and of course you can put the code here so we look this way awesome so yeah we got the servicing regards pretty much the photo going on pretty well made up and everything should be looking absolutely amazing i know last but not least gonna add in just two icons of like the three font awesome icons i'm going to open up the font awesome cheat sheet here just to see how things should be going on also i might need to be installing like a new one um since we already did not install that so if you take a look on the package.json so we got free solid svg icons and we have we haven't got like the brand solid or free svg icon so let's add this so just simply do your add and make sure to post the four awesome free brands svg icons and everything gonna be okay so it's gonna start installing and you're good to go and there we go so now has been installed successfully let's jump back and we can go ahead and use this so so this is actually the node i'm going to be needing and here we're going to be using the font awesome icons both of these icons i'm going to first do once awesome icon and i'm going to import the icon i'm going to save facebook so this should not be like recognizable but if we go to the brands section here we'll shoot it take a look on so for the facebook we find a couple of like icons uh yeah i'm gonna be using this one from the package you've just installed so it's gonna manually import these let me just say fab [Music] facebook from so for awesome make sure you just free brands icons so they do like facebook they use an f square messenger or the regular facebook and one that regular facebook also wants twitter uh it's not twitch so twitter just the normal twitter uh bird and yeah so just like facebook here icon [Applause] that should do the job perfectly for all all these let's go back we check them a screw see they're not the perfect thing so we need to add like a little bit of styling and fun sizing and stuff like that so we can do here because social icon so style dev this is like you know represents a container so the color is going to have the same color as we're going to be having in here just kind of like a grayish um more like like a greyish color i'm just going to be putting this color here for the font size going to increase it a little bit i'm going to make it 20 pixels all right and i'm also going to make sure that's not um lasts off type i'm going to just do a margin to the right like five it should look okay now so here we can do like a social icon and for this one as well so social icon again there you go jumping back we see yeah they definitely look way much better than they're looking like also i might need to increase this like 10 pixels yeah it definitely looks way much better also like we can go ahead and add some hover effect to make it more you know clickable i can change the cursor in here to the pointer um this one might be like hoover you can do a filter or you can just change the background color to a much more blue color let's see here have a color just copy this one i'm gonna use this to make it a little bit more dimmable okay so yeah going good here about points and um yeah we can go and add some transition just for a little bit tiny animation we're going to use the background color though 200 milliseconds easing out all right so hover over it yeah i'm putting the background color for some reason instead of the color so [Music] and there you go so now facebook just shines up once we go over it so as far as i see everything going on uh pretty well by making the you know the footer having everything going inside of that it just like goes in a perfect way with with everything from the design from top to bottom so as far as i see it looks absolutely amazing now yeah we got actually the full landing page actually finished from scratch just everything the top section we got the navigation bar here working with the api effects using axios and render using the state so yeah it's going absolutely fine there also here it goes absolutely fine for rendering the specialist ad so it works and the footer looks absolutely magnificent now what we need is actually two things left for us to add is the first we're going to be adding a multi page as i said so yeah i'm going to be creating like a login and a register form just like you know login for slash register just like the same form you can click it and you see login and register and if you saw my last video tutorial just the last one where i created like a login for slideshow just to perform under yanks so i'm going to be importing this particular form because it looks amazing there's animation onto it and everyone pretty much of you is loving it just like the video is rocking it and everyone loves the animation i love the the interior design of the form so i'm just going to import this one from github just you know import it real quick and you can go do the same if you would like to so just import it i'm gonna use it i'm gonna of course just you know change the theme a little bit change the color make it match our themeable color here like which is the green and yeah we can have fun with this as well alongside react router so let's go ahead and first set up react director right off the bat and start installing everything i'm going to be needing so let's get rid of this and let's go and install it um right here so i'm going to do on my terminal here i'm going to clear that out so just do yarn add react router dom and make sure to install it so react charger in that point which gonna allows us to do is pretty much add declarative browsing to our web page which means we can add multiple pages support for our react application so currently our rx application only has a single page so if you go into it there's no way to navigate into another page by multi-page what i mean is actually you can go for example you say for a fashion you can go like log in you click on it and it takes you there but for now if you just you know put a routing here like login or something we click enter it takes us to the same page like it only knows the existence of the home page it has no routine whatsoever so using the help of react routine and make sure to use the dom version because there is like react native version um yeah it's gonna allows us to create multiple pages go back and forth between pages and we can have declarative routing out of the bad on our react application so this is we're going to be doing in here and we can just go ahead and set it up after like it has been finished installing so just clear up everything and you can go to the section where let me just clear my work spacing i always love clearing workspace after finishing a really long design session and stuff like that so also tightening up vs code in here makes it look absolutely amazing so jumping back to the src we can go to let's see it's actually the index page where everything goes up and if you take a look on the app.js which i totally can't find so here where all our declarative routine should go through so i'm going to be using the router i'm going to first import these things from you know the router dom so i'm going to import browser router as browser so i'm just going to like conveniently change the name to router because this is what people use also i'm going to import this switch i'm just going to import it from react browser dom and there you go so it's going to import us the browser router as roger it's going to change the name and it's going to give us the switch so here they have roger water um yeah or browser instead of browser router um all right super cool and here we can have the switch so the switch allows us to switch between pages and this is exactly what i'm going to be needing so the switch in here is going to look for for that we're going to have a browser in here so for the page so each page in here cannot be rendered like like always like this we have to use the route component which is exported from the reactor officer dom so this rack component is going to decide throughout a path attribute prop we pass it into it for example we say once we hit or once the user goes to forward slash login you can go ahead and render him this like the home page now once he goes to the register render him the register page and so on and so forth so you can this is how declarative routine like works you declare your route and you let's like you know the switch works once the user just decides to go with the right uh portal or the route path there so here i'm going to be using the routes and it's going to import it first from the top in here i'm going to have routes i'm going to be using routes in here so the rough takes path which is the most important parameter in here and it tells it which path to look for so only forward slash means the main page which is we always go through which is pretty much this page like it has no routes only the domain name or localhost so this is pretty much um like the landing page which is like the forward slash the empty stash page you can call it whatever but this represents the home page and the main page of your website so just to say once you go to the like main page you can render out something and you say that by providing it to the components and to the components here you provide actually a react component no react elements or react components so i'm going to provide the home page just pass it in the reference of like the home page in here and it should do the rest of the job for it so perfect enough now if we just go ahead and like control s let me get rid of this go back oh we check this out it shouldn't change why because you know this is the main page in here if we decide go ahead in july for example this is going to be login uh go back into it we see nothing because we are not on the login if we go to the login boom we got our page go to something else no we've got nothing to render so yeah absolutely amazing for that particular part i'll just put it back to where it was and there you go so this is should render also you can add like an exacting here to tell it that it has to be exactly matching this path so sometimes if it doesn't find the path on the tree in here you're just going to return the first like route in here that doesn't have exacts so you can instead of like doing this technique you can render a 404 page or something like that so yeah nevertheless this is actually the home page now we're going to be needing another page let's go into our containers i'm going to be creating um so customer access page so this one is going to like represent the portal of the customer he can either log in or register so create some index.jsx i'm going to simply going to import it again and react and export now is actually the customer access page have props again and for this one we're going to be using the normal page container so we're going to say use page container inner page container 2 and last but not least we're going to be having is the nav bar so it has to be on the top outside of the inner container because remember inner container has some padding and stuff and the footer here should go all the way to the last so we can add boom to it just for testing purposes and we can go back to the app.js now here we declare our second route which is like you know the customer portal route and you can say like customer forward slash access uh you can choose a better name you can say login register but since it's actually a form where it combines both the register form and as well as the login form so therefore i'm just going to put this name frame like the customer access and i'm going to just like do import customer access page and pass it right into this and yeah and here i'm going to pass it exact to only and just only render this page when this url is provided so yeah nevertheless we can go ahead right now just put this like customer access and um yeah for some reason it's not working perfectly so let me see uh yeah i have to mark this one as exact to you because if you don't it won't work for you so yeah there you go now we got to hear everything going on the photo i've got the boom but unfortunately we got the navigation bar but the navigation bar since we already provided this as you know whites and stuff like that it won't work so we have to provide like a background color for it in order to work and we can use props for this particular manner so let's just jump back in here and let's start working on our page so with the navigation what i'm going to be doing is i'm going to expect some props from it okay um here okay it's not props there but i'm going to have props so say use transparent for this one we can change either transparency or not we can go to the navigation bar it should accept this and here it's like we say the background color this one so if use transparence i'm just going to say transparent right otherwise we're going to use the background color we are supposed to use which is um i think we should use like a blueish color like this one it has this this kind of bluish color right there so yeah let's go ahead and use this one so instead just use this one and everything should be all good i can pass this let's use transparent to use transparent okay all set now um we can go back if we just like react application screecy now has been changed in here it looks amazing but if you go back to the normal page it does not because it's not transparent we have to change this on the home page so you find the home page after i can pass them just like use transparent and there you go now we've been using the transparent for this one go back we're going to find the normal here looking absolutely fine so yeah so we're good we got the first step done for our like a customer portal page the footer is going absolutely fine at the bottom there now what's left for us to actually take care of is pretty much you know just some point of the login page or the login form out of the github repository as i said before i've already created the like on the youtube tutorial so if you don't know how this works we want to know more about it and how you know how i created it the whole process it's a great tutorial so you're going to be learning a lot you can jump back into the store you're going to find a link in description below just learn and watch it you can come back in here and continue working with us so i'm going to just find it in github real quick so you can go to my github in here and find it out by yourself but i'm gonna be looking for it i think it's called um i don't know smooth i don't know reacts login so it's called modern okay i totally forgot about like naming it this way and yeah i should do the job we're not gonna copy the whole package of course just gonna copy the files we are gonna be needing like components and stuff like that it's mainly gonna be the components because everything is actually inside the account box here and you know the signup form login form everything goes inside of it all the logic all the animation happens to be in that place so let's go ahead and copy it real quick i'm just going to copy real quick in here so a copy the full folder and everything that we're going to be needing here the contacts and everything sort of like the account box so everything is in there and before clicking control s and saving you've got to install and add one dependency so since the projects you have login register form or the account box component uses firmware motion for animation and behind the scenes you have to install it first otherwise it crashes for you and you're dead so make sure to do so real quick before just going any any any further from that side i'm just going to do a yarn add framer motion and this should do perfectly the job for us without any issues just hit enter and it's just going to start installing for you so yeah there you go i already installed it and everything i can jump back here and if you take a look on the account box so it's pretty simple nothing complicated uh both of these are exported and imported inside of the account box so this is actually the appearance and it uses some like you know use state in here to maintain like which form is active and which is not we're in the login form and sign up form and you know your respectively when doing both of these also when you're remembered like from where is that the inner container the header text or the header container in here need to make sure like you put blind items to be flex starts because remember for this project here is something inverse so just like making sure everything works up and yeah so with everything going working here let's go ahead and import the account box and start working with it so i'm just going to say account box it's going to auto import it for me just put it inside the inner page of our customer access page and just save that out real quick just go ahead and here refresh things and boom so we got the welcome or pretty much the page in here uh working absolutely fine and there's one other thing actually the text is not centered and let's make sure that we 10 century right so there's actually the small text or is results so top container i think i'm having it in the top container here yeah exactly so inside of the top container it's going to have justify content as well as online items like start so and there you go so yeah it's been like you know being put to the right place all the way to the left and it works great so this is the form i was talking about in here it looks absolutely great you can go and log in if you don't have an account you click take me to sign up and place this really cool animation it takes you to sign up and you can you know toggle back and forth between uh sign up like login and register stuff like that and how things should be going along the way so seriously it's quite yellow and uses like a yellowish theme which it doesn't match with our you know theme in here with our website at all so our theme primary theme is actually using you know green so we can find in the middle like a really good green color in here just to put it right here and make sure it matches the colors so let's go ahead and let's see let me see this greenish color in here i'm going to go to design so this is the color of glass i'm just going to test it and see how things should be going with it also i'm going to do like ccs gradients because it's clearly this this one has been created as ingredients you just like has some yellow and like darkish yellow or more like an orange color to the rice in here so we can create this gradient from this perspective what i'm going to be doing so i'm going to first choose this color for that like he goes to the green in here and more likely for the second color what we can choose is uh a little bit like more of the bluish it goes to the blue here i think that is fine let's test that out and see how how it goes along the way here so box containers clearly box shadow and the backdrop in here it does the full work so i'm just gonna replace the background with my own background here so let's see how does it look like now um well it's kind of like not looking the best out of the best color you can have but let's see also for this one we can totally change that out to a more this way i don't know i think i need a little bit of more testing on this to see how does it look like before jumping ship um well it kind of looks better at some point it does look a little bit better but i still i think i'm going to be needing to like change a little bit on it like make this one it goes a little bit darker go to this section and make it go even a bit more darker as well so just try to find the perfect niche for it okay let's try it with this one okay this will override it and we will see all right i think it definitely looks way much better this way and it does absolutely great job for that perspective it's great to see the animation as well looks amazing it's like you know the gradient changing over with the animation so as far as i see yeah it kind of can do the job now let's go and copy the same color i'm going to be copying well i'm not going to be copying this color here let's see so just for the bottom here just going to see it for the login form so there is the button using the submit button it is exactly on the commons folder or file there any kind of this is a submit button well linear gradients yeah we're using a little bit of linear gradient so i think i'm going to be needing to copy the full linear gradient here it's going to copy this one i'm going to get rid of this because we don't need it anymore so it's totally okay to go okay well it needs looking well yeah it kind of like you know it does the job it matches the theme in here with you know like the grayish or the thing that goes behind the scenes in here we can go and change or make that looking good as well so just making the sign up look the perfect way as it does with the other one so this way we can match up everything that goes this way so we can have resist the board color i'm going to copy this one make it bold again okay doesn't it look perfect as i want it to be all right something let's go with this color for the bowling still not looking actually perfect let me just try to copy that color here um right yeah forget about this see it now well definitely not it because it just doesn't match the actual theme of the color theme in here so it's not looking perfectly as i want it to be i might need to like i'm going to use this one [Music] just paste it well well well still not looking actually great i don't know i can't find a perfect color for it to be honest or it's not all right see i don't know it is totally messed up it doesn't look the perfect way and want it to be to be like you know once you click here it changes it's kind of like still a bit weird from the coloring here and after just digging a little bit just to find the best color for that well i found you know this cool website to pretty much get the perfect or the best color gradients using or through css codes so i found this color it looks amazing i copied i pasted it i integrated to the code and that way it looks like so it feels this one it looks way much better than you know the last colors like the green one and it matches more like the you know the bluish color since we've got here like a bluish we got a secondary color the bluish so this could match it a lot compared to others so here's chrissy here works perfectly you can enter that still i hear because i'm getting like yellow so i should change this to a little bit more like this color because this is what is the main theme color this is the input border all bottom i need to change that out to the new color and boom so it definitely looks better both sign up and login and it's the animation accuracy works absolutely fine it does a great job between transition standing up and logging so yeah it looks amazing now and that's we're going to be creating for the actual access control thing uh the last thing i'm going to be adding for this if i go to the customer access page i can add or make like a styled inner container so it's styled in a container so i'm going to import stack components and i'm going to just style in the inner page container for that particular case so for that we're going to just make it go centered a little bit okay um you're already being centered but i'm going to be adding a margin top of like um 4 am from the top i'm not using this so just copy paste real quick and it definitely should look better right now so as clearly it does absolutely look better uh we can go and make how the links works for it you know you know you can get the best out of it so if we jump back to the navigation bar that we're going to be finding on the top third now navigation bar can take us there but what we can be adding to you know exclusively got the button we can make the button once we click it it takes us there but what i think i can make better is actually using the link component which is exported from the react router dom that allows us to you know you you get the components and it renders up a hyperlink so once we click it you can specify a page that takes us into this but you know the router has to be to use first it has to be centered up otherwise it won't work for you um yeah we can we can make this happening here we're going to import the link i think i was gonna manually do it here it's gonna import link from uh reacts dom so this is the link i think i can put it inside of a button that shouldn't be an issue and it can make it to i can go to like customer access i don't know so let me just go back to the main page so if you click that boom it works so yeah it does does a great job in that perspective click like we say register you can take us register but this is not going to be working absolutely fine because it doesn't exactly take us to register as we want it to be so you have to like toggle between this and that in order to work perfectly for you but yeah so overall we can just gonna create like something a query in here and you can read the query and make things active depending on that particular query so we can make that happen in that particular case and i think it should be better so let's go ahead and make that happen real quick so for example you can say once you get access i say like access um you know that's gonna make this page i think equals register or i can make this action register right so let's check that out again if you go back to the main page we click that out give us like action register and we can change that depending on the action so here it could be super easy using hooks we can make this happen the right way uh we can like using just simple super simple hooks in here we can design and we can use use parameters so here i can distract like what it means name is actually action i can do since this one uses query okay and i think what i can do so for this one i can use like register in here so i can for example say like register we can go access then for flash register of course this doesn't exist because we only have in a binding for customer access but for this to work perfectly what we can do is perfectly like go to the home page or pretty much the app.js and we can introduce something called parameters on react router so this parameter is what it allows us to do is pretty much like passing variables between one page and another you see like it access a customer dashboard a user dashboard you provide an id for that user to pretty much find this exact user or like the name of it or something um yeah so therefore here i'm going to be adding like do a four slash and just like making a column this will tell you that we are using an attribute i'm going to name this just like um okay i'm going to name it well let's name action okay this should do the job so now if you check it back so you see forward slash register should return the page but now inside of the actual components we have to decide whether to render uh the actual like login page or the register page so therefore we can go to the customer access page in here we can do like use parameters and this is okay perhaps uh i think we can go ahead and import this from on react road for dom yeah seriously so this one's going to give us all the parameters you're going to be needing and here we're just structuring it and we give it the name so we have to choose the same name as you provided for the parameter in order to work we got action and once we get the action in here what we're going to be doing so i'm going to say like [Music] so [Music] um for that case i'm just going to create a state okay for that particular case i'm going to create uh page active page set page and since this one only gets like red once the page has been active already what we can do well i'm not exactly knowing about that but let me just going to console.log the action and see how does it look like so we can we can work that out real quick so we've got action there i'm going to use inspect here to check out the value and register we go to the register cannot appear as a descendant of a okay an action we get it and immediately this is just a warning just gonna ignore it for now and the register has been immediately provided throughout components so without needing a re-render or block and mouse here or something like that so we can immediately provide it throughout the props and it should work so now the account box it doesn't like accept any props but it should so here you should be like um initial page equals on initial axis it should be better to match the context and destructions from this so if initial active if that we're going to provide it initial otherwise it's going to be signed in so this is stating here it decides which page or which you know state is active either sign in if it is sign in you're going to render the login form otherwise it's going to render up the signup form so this is the way to decide it and throughout the process we can just immediately pass that in we can either sign in or not and i think we should like change this from register to sign in and sign up so for example you should like put sign up um yeah action and we can just go like initial active compassing the action there so gotta refresh see account box we got initialized okay so if initial actually we're gonna be putting it okay let me just go ahead and like do console log this one i see what is exactly wrong with it so for this we are i think it does work now because we were just like having a little bit of a tedious haunting issue so yeah i think let's clear this in here if you go back um well let's see where is the button let me go with that so if you go back into like the navigation bar and here i can change it because we changed everything so you go forward slash sign up and we will see we'll test the button so if we go back to the home page just like a normal user nothing happening we click this button it takes us right into like create an account with everything in here and of course we still can toggle between welcome back sign up and sign in and everything goes around the corner there so yeah it's going absolutely fine from all of that perspective um yeah i don't find any issues going on back and forth from any of that we just like the other thing we need to be adding is enough bar is once you click login you can take him to the login so this is already an anchor link but this shouldn't be an anchor link it should be like a styled and it should override the link already so we can have a queue here and we can take it to like first live customer access and sign in so testing that back we click on it okay so login takes us back to the sign-in uh go back here register it takes us directly to the sign up so this kind of like working perfectly from that perspective also here for the brand logo i don't have like once we click it it takes us to the home page we can add that real quick to the brand logo so it's not really that complicated to make um you can just make brand logo here i can make both of them clickable so just link again i'm going to export or import the link react router dom so i say 2 home page that should go there also we can have link to all right so so good no yeah we have got link but it's kind of like you know he uses the traditional linky thingy so it's better not to do so alright he says so we got the brain logo link here i can make like style link [Applause] and for there we can do like just text decoration and that should work perfectly just pressing link and there you go so link now doesn't exist anywhere and even though we click here also like does trigger the refresh but we are already in the home page so no effects whatsoever and it just like works for all of these and you click register to access the register page you know we can toggle between all the things in here we've got from all sides we can go back to the home page and there you go so you've got a super simple multi-page application login like register a nice form going in behind the scenes there you can add like specialist portal you can add another page for specialists obviously and you can make that page accessible by specialist once you click like especially your portal it takes in and you can render for example the same you know form we've got in here and you can got everything that you which i've streamed off just registering with specialists and binding into the api so yeah it's pretty simple in here we've got everything done as we want it to be still here actually we've got loading i think i'm still using a weight for demo purposes i'm not sure about that but let me just double check so i just like do not stay paranoid yeah there you go as i said i'm still using the ways they're just like purposely making it slow but nevertheless it works perfect and it looks absolutely amazing now now since the full pages are working multiple pages working everything is actually going on fine now let's go ahead and add something really important which is responsiveness to the website since now the website is actually you know working absolutely fine but still a little bit cliche so take a look on inspect and try to go to the mobile view like an iphone x here and yeah seriously the nav bar is quite decent not really that horrible because on this width or on this ratio it's actually the minimum ratio we can go for so this device is going pretty great so far if you go back in here using flexbox as we did already use it it is working fine so far so good so from everything we want in here flexbox this one in the illustration is is bad so we have to fix it and last but not least the footer is looking good too so with the icons and stuff like that we can we can get it like you know all right reserve it or you can just take it to the the next line or we can leave it as it is because it looks good so far already or we can just simply take out the padding and it should everything working fine so let's kind of start doing the refinements on the you know like the ratio in here on the mobile responsiveness and i already got into the responsive file in here added some other like you know ratios or sizes for mobile 7 68 like a minimum width or a maximum width in here i've got the tablets in here we got you know laptop i changed it to 24 instead of like 66 and 20 24 for the disks on which you're probably not going to be using because our you know our website where these supports and it works perfectly fine for it so yeah nevertheless for that particular case we are going to be having now let's go in to the home page and i'm going to have the top section which is this one and let's start just putting the refinement on it so first this is actually quite bad it is indeed huge so i'm gonna fix that in a quick way uh first i'm gonna fix the brand logo i'm gonna use react responsive so is we did already install at first so i'm just going to use it in here i'm going to do is move on equals use media query i'm going to say max with for that so defies size i'm going to just say wow this one is going to say oh this is a maximum size of a mobile well it just tells it immediately that this is a mobile we can tell cell by just you know also log in mobile is mobile okay we can take a look so mobile is true if you just toggle this out mobile is false and since he uses hooks so this is perfectly matching us and it will work in a perfect manner uh since you know you got the point here when hooks changes or when the ratio or the screen size changes it's going to trigger a re-render and make sure that it renders the page perfectly so that's why using this module here or this npm package is is great i'm just going to decide in here if this is a mobile otherwise i'm just mobile i'm going to choose like a 20 or even 30 is more by two for this one i'm going to do 25 [Music] let's see how does that look already yeah it already looks good but i think i'm gonna trigger a little bit of change right already just make it a little bit bigger um well i think i'm just gonna get completely out of the illustration because it doesn't look really that perfect so if it is uh where is the standard image is mobile so always make sure that mobile device or you know the mobile design thingy just keep it out of the expression just once it is mobile just make sure everything is clean and simple as possible and that should do the point perfectly now we got rid of it like servicing find the right specialties for the right job and let's just center everything up right into the center and it should do the job so here i don't know if i should leave it let's see 45 by just like 40 from that side it can even increase this to 50. all right so this way it looks way much better let's go and just you know make sure it goes right into the middle so top section container top section inner container got space evenly but now here we can use um media so you can do screen and max width luckily device size mobile make sure to put this as pixels the ones it won't work and just do it just to find content to be on the center so it might a little bit look a little bit better here but still quite huge so the problem it is actually causing this one is actually going over the flow just like over the screen or out of the screen also both the navigation bar in here also we got like a huge issue since the login here goes out of screen so that's why chloe creates this like horizontal y scrolling or something which is quite bad and nobody knows like would love to have that going over so let's go and fix this i can go and fix that real quick on so the nav bar and uh so let's see here is enough for okay enough application bar and for this one you can have expert container let me just copy the same thing we've got it here because i want to completely hide that out if it is mobile and this could help a lot so just device size and body again and import use media query so this way should work and we can totally go ahead and hide number four accessibility in here but we can hide not use mobile just hide in the specialist portal make sure it doesn't exist there also notes is mobile and just completely hide the margin so let's see how this should go [Music] okay seems to be going good so far and i think i have like space between which i don't need to and i can have the same thing going on a barrier just okay just make it center but justifying the contents okay so or just like make it flex start okay we don't need that like century thingy you should do a better job obviously so i think we can we can just leave it actually a space between because it doesn't bother that the only issue we can have is just like you know once we get of like what is it doing or causing this overflow responsive design is just going to work perfectly so we can have that as well the second thing we can be having is actually getting rid of this separator which is quite annoying yeah the superior now doesn't exist anyway now let's go ahead and fix the tanks that's we've got back all the slogans texts in here so just change the font size to be more comfortable like 22 pixels for the slogan container so it could definitely make it way much better i can think 24 pixels it will look better i also might need to like decrease this because it just ridiculously looks super big which is unnecessary to do so um servicing finder specialists for the right job so yeah blah blah we made this is going on this way um here we need to use the line items because these are column based or better knots okay just yeah just just leave it as it is because it looks good already and yeah so so far so good now if you take a look on the actual image of the background image it has some repeating going on so as you can see the image is kind of going to repeat which you don't want that so let's go ahead and just completely get over this like repeat you can say no repeat from there well for that one i can definitely go ahead and decrease the size or the height of this height let's say 700 pixels would that be okay well still i think i'm also going to just get rid of the background position there just make it zero zero pixels um yeah there you go so we go with like the unwanted you know spacing that we did not want it to be and everything else now we can also go in and fix that out like you know the sizes that goes behind everything now it's here since you fixed the first section so let's jump into the second section that we need to be fixing for like the mobile or responsive design [Music] well for this we are going to have like services section and we kind of like got the text a little bit big i can have um let me just copy this import the voice size and make sure the font size 20 pixels okay 20 pixels is uh too small all right so that should look way much better also we might include this to here and get rid of the padding which is pain in the ass we don't need that padding at all we can make even a padding just like five pixels and you could fix a huge problem for us so this this should do the job perfectly for that padding it's it's doing all the alignments uh now the services card are being displayed all right so everything is working for the card and everything else uh let's go jump into the specialist add section which i think i can find websites okay so for this one um i need also to use this you know responsive query there so i think i have it the top section let's copy it so we can do device size we use media query and we check if it is mobile now if it is actually mobile we are gonna also do the same thing we're just gonna take this a little bit like this mobile not so we're gonna make this uh like a 33 oz mobile in here so compared to that we can have like a 28 on the size so yeah it definitely did a great job in that particular sense um we might also need like you know the media query here so we need to use it for the actual slogan text so slogan we can change the font size to let's see 19 pixels okay i think i'll just you know leave it 20 pixels because we are going to get rid of like this illustration right here which kind of kind of can make a lot of sense okay to get of the illustration um where is that so stand up image no if it is not mobile all right so now the illustration completely is gone or i think why why should we like take off the illustration we can just just change this from flex direction row to flex direction column maybe that will work i don't know we will see so flagstaff action keeping a column i think and also we might just like say we're not gonna remove this completely um what it says so the contents container there yeah we need to put it right here because this is actually that's like the you know it's growing container all right it doesn't look the perfect way you want it to be but let's see so this is actually the constant container we can have the standard image goes a little bit out of control like media you can change the width and height for it we can say 20 yen heights okay 19. [Music] lighting is a lot okay so i think 18 here well yeah it kind of kind of like doing the job perfectly for this particular sense so we just need to do like column reverse just to completely reverse that you know i want the illustration to come up first then we've got the other things so this way you could have it in the perfect sense i think um anything old and that's the slogan and everything well i don't see anything coming to let me see so slow gone container okay i don't know why i'm using this silicon container right here it shouldn't be using it okay so everything is being reserved from the content container all right i think we can make the slogan container in here i can just do line items through the center so this way it could like you know goes all of it to the center instead of like since we got a column based i don't know why this is not perfectly being aligned to the center let me check that out real quick oh yeah because we got this teeny tiny margin that we are adding that is making it bad so margin zero and there you go so now it's actually right into the middle you can join as a specialist and we got everything that we need so everything is being like put in the right position we go down we find the footer there and it's even like you know going the right direction all over the way here and also we might want to just like change the top container here because it doesn't look very that professional so we can have all of them being centered uh using media queries again so top section uh where is that so we've got brand logo it's all the inside of the logo container so inside of logo container i like content okay we got it and yeah i figured out i'm using here um align content instead of align items which is completely idiots but yeah there we go so it works now it works perfectly just being centered and everything does work so the responsive design is working absolutely fast creates in here scroll up down we get all the things that we would like to have uh from all perspectives actually so yeah it's working absolutely fine we can go ahead and just edit the last one which is the footer and make it a little bit more like responsive and looking better so let's see the photo in here we can just get rid of like the padding from the left and right and that should fix the issue i think as far as i see so this is what i see it as an issue so let me just copy this media query thingy um go to where the padding exists bottom container not an issue and here where the you know the main pattern exists so you can just make in padding two again from the top zero uh from you know left and right let me just import the flights size here and there you go so i mean just like we can make five pixels padding for both of these or even a 10 pixels padding it won't hurt all right 12 pixels padding all right that is good also for the bottom container okay where is that we also need to just completely get over the padding because you don't need it it already has some padding there so this way it could be better um as well as the privacy text in here we can just go and decrease the fun size frame because it's kind of huge so the font size could be eight pixels for that's going on there alongside the social icon generator so the fun size um let's go for 14 pixels i think it's too small 16 to 17 pixels all right so for me this one does look a little bit better i might need to decrease that as well because it's still like looks a bit giant and um i hate i hate these kind of things so let's go and copy the mobile query here so we can pass some things to it you can do device size use media query report it up and last but not least and you can just since you've only got the tags so if it's mobile i'm gonna make it 20 otherwise 25 and there you go so it definitely does a better job now the photo is actually pretty tidy looks amazing we got the specialist and you got all the services uh we even got rid of like this horizontal thing because now everything is tidy up and it looks amazing so you got a full responsive website from scratch looking absolutely amazing if you go for example we want to go to the register or something it is already been worked because we fixed the nut bar we fixed the footer there and here on the last tutorial when i created this login register formula has already been created in the aspects or respecting the measurements of like you know responsive design and it is being like created in mobile first design so it is super friendly to mobile house and responsive design so yeah it's crazy it works absolutely great now without further ado so this is pretty much what we will be creating everything so responsiveness has been added all the sections of the website and yeah so yeah the full website from scratch from start to finish with axios react dom multiple pages login register footer responsive design mobile friendly design and awesome design in here as you can see has been done so yeah all i can say guys if some of you made it pretty much to the end i know if your only few of you actually can made it to the end which are champions but yeah thank you guys for watching thank you for my heart i really enjoyed making this tutorial i know it took me a long i know it's really long video tutorials but if you like this video tutorials as always let me know in the comments because this guy just you know give me this idea that oh you love this video chart so i can make more of them i can you know start putting ideas together i can schedule more tutorials like this and it can just you know get you down into deeper and more advanced like this creating more animations creating stuff that are awesome for you guys so yeah without further ado hope you guys have enjoyed the tutorial we're gonna find the full projects on github as always for free for charge you can use it whatever anywhere with you guys so yeah as i said before thank you guys for watching hope you guys have enjoyed it don't forget to just push that like button because it works hard in this video tutorial um yeah push the like button comments below make sure just you know express the love if you really enjoyed this video tutorial and don't forget to subscribe because most of you are not subscribed it is quite unfortunate and i hate speaking about this but anyhow guys hope you guys enjoyed it again for the nice time and see you guys hopefully in the next ones [Music] [Music] adios [Music] you