React Fiverr App Design Tutorial | React UI Full Course for Beginners

Hello friends today we are gonna design a fiber clone using react and CSS this is the home page we will create this beautiful neighbor that changes its background color and shows this menu let me scroll there is an infinite slider here that shows the categories some other homepage components project slider and footer let's open any category page and here we have all the gig cards in this category in the next tutorial we will cover all these functionalities let's visit a single gig page we have a slider [Music] product and seller information and reviews and in this sticky box we will show other details let's assume that I'm a seller in this case I can see my Geeks I can create a new gig I can see my orders and messages and I can send a new message to a customer if you are just a member there will be only orders and messages on this menu and in the next tutorial we will create a backend server we will fetch all these data from a database and we will be able to sell or buy a service so let me know in the comments what kind of Technologies you want to see for this project I will read them and start the next tutorial as soon as possible by the way it's been a long time guys since we created any projects together it's so exciting to be back and be with you I really appreciate the kind messages that you sent to our social media groups while I was on a vacation and I would appreciate if you could like this video because it will really help bring the channel back to the good old days okay that's all if you are ready let's get started okay I created a new folder and here I will install my react application unlike last year we will be using vit instead of create react app most probably you have already heard bits from some other react developers but let me explain one more time why we are using bits the main reason is it's faster than create react app when you make any changes in your application in development mode it's reflected in the browser faster and same goes for the build time you can build your applications much faster create react app is a little bit slower because it uses a webpack under the hood anyway I'm not gonna Deep dive into details in this video but if you want me to create any video about these topics how react Works what's webpack what speed just let me know in the comments but I want to say one more thing and create react app is not a monster yes which is better and faster it has many features but you can still use CRA especially if you don't have any complex project there will be no big difference anyway let's create our application you can come here and say yarn create with and you can set up your application but when you do that it's gonna give you some unnecessary files images and some styles to prevent this you can use Mama dev's GitHub page and in this repository by the way don't forget to give a star for this repository because all our projects will be in this repository this year so it will be easier for you to follow our projects okay I will come here and choose this branch in the source folder as you can see there is only main file and app.js nothing else it's super clean you don't have to delete anything you can drag this start writing your code okay let's include this project to RV escort let's come back I will come here and copy this link and I will say git clone I'm gonna install a single branch my Branch name I will paste my link and I want to install everything in this folder so I will say dot and they are here of course we don't have our libraries let's install that I'll say yarn and let's check what we are gonna have before starting any components we can create our Pages as you can see this is our home page we will have register and login pages category page single gig page orders messages and others let's create them I will come here and new folder is going to be pages my first page will be homepage kicks which is going to be our categories page single geek page and login register if we are a seller we will be able to see our Geeks so I will say my Geeks my orders and messages and single message page and finally we will be able to add new gigs so I will say at let's create our files it's going to be at Dot jsx and we are going to be using scss file so it's going to be at dot CSS to use scss files we have to install SAS first so I'm gonna say yarn at SAS of course if you want to you can use plain CSS or any UI library but I prefer using scss okay let's create our function I will say new react function and I'm going to import my CSS file here add Dot scss and I can give here my class name is going to be at okay basically this is our main structure a simple function here by the way it's going to be dot CSS okay let's do the same thing for other Pages I'm gonna do this quickly okay they are ready we have all our pages so what I want to do is to install eslint first I will say yarn at yes mint and it's going to be a Dev dependency we are going to need it that because it allows us to catch our errors quickly you are gonna see what I mean by that let's initialize our eslint I'll say MPX yes didn't and init let me make this bigger I want to check my syntax we are going to be using import export we are using obviously react and no type script we are running our application on the browser and the config file should be Json and we are going to be using react plugin so I will say yes yarn and it's gonna install let's check here as you can see we have some configuration here and let's check let's make a mistake here let's write here a function and as you can see it warns us that because we created this function but we have never used it this is why it shows this red warning and also if I make here any mistake as you can see it says unexpected keywords there is an error here it will be const this is how we are using eslint okay let's rate this and we can get started let's see okay firstly I want to create this Nail Bar as you know it says sticking Rubber and when we scroll down this menu appears let's create that by the way we can start our application I will say yarn run there let's click here and as you can see this is our application let's create our first component I'm gonna show it this and I will come here and say components and first component will be never jsx and CSS let's create our function and import our number CSS and give a class name here okay to see our changes I'm gonna go to app.js and use it here I'll say another like that by the way there's a warning here that because we are not using import react actually we don't need that but eslint wants us to import this like that of course you don't have to you can go to your config file and get rid of this kind of warnings but it can stay not a problem and let's check our application as you can see it's here firstly I want to create a container that because we are going to give some space here to left and right so let's say a container we are gonna have two sections first one will be this logo section and second one will be our links so let's say we'll go and one more and it's going to be links that's right here expand is going to be our name and one more thing as you can see there is a DOT here I'm going to create another span and it's going to be just plot so I can give here any class name let's say text and number okay it's going to be Dot okay by the way this warning is just a spell check if I do this Fiverr it's gone but our website name includes 2R this is why it's blue don't worry about that and what about our links Let's see we have five links here and one button I will just copy and paste them there is nothing important here like that they are just spins and I'm gonna add here a button and it's going to be sign in I like that sorry it's join I'm gonna change it and after that we are gonna give our style I will see join and let's open up our CSS file here and I'm gonna close this menu okay let me showing this firstly I will say rubber and inside we have our container inside this container logo and link steps inside logo we have our text and Dot and inside links we have our spans firstly I'm gonna give here a bit 1040 pixels that we cannot see it right now if I Center this just by contact center as you can see we have a space here let me give here a background color and you are going to see better okay as you can see this is what we want like here let's separate our items to do that I'm gonna give again display Flex this time justify content will be space between so it's going to separate our items I can give some padding gear from top and bottom let's say 20 pixels and zero from left and right like that and what about this logo let's come here actually I can write it here because it's going to affect our DOT span also from fate bolt and I'm gonna change its color and it's going to be this green color like that perfect what about those links let's come here and display flex and I'm gonna give a gap between them as you can see they are separated right now by the way I can Center this button and those links to do that I will say align item Center and it's going to Center them vertically and I can change its font weight let's say 500 by the way if you want to you can change your font family I checked font family or Fiverr but they are using premium font family so we are gonna be using default one we don't have to change it what about this button let's see as you can see there is a border first and when we hover over it changes its background color let's do that we don't need those span sighting I'm Gonna Change it to button and font color will be white I'm gonna give some padding time to to any and all the radius is going to be five pixels and I'm gonna give some border it's gonna be one pixel solid and white and I will say cursor pointer so we can click by the way we don't have any background color let's change it it's going to be a transparent of course we cannot see it that because we don't have any background yet let's go to our neighbor our parent deal and I will say background color this green color like this but as you can see our texts are black let's change them okay perfect and when I hover over here I'm gonna change its background let's give here our over effect I'm going to change its background color and also border color it's going to be our green color oops there is something wrong because I forgot here this and sign and perfect I think I've used different font family here doesn't look same let me check this quickly okay I'm using different one let's open up our index file here as you can see by default we are using Roboto but I'm gonna add one more link here and it's going to be Montserrat if you check this letter have it so I'm gonna come here find my links and I'm gonna change its font family like that okay it looks much better and what else as you can see we have a menu here let's create this quickly by the way those links are not clickable for example I cannot click on this logo let's handle that of course you can use anchor attack here but I don't recommend to use it that because we are going to be navigating through our Pages using react rather Dom let's install this I'll say yarn add react router and after that we will be able to use its link let's come here and say link as you can see it comes from via cladour Dom I will import and wrap my logo here and I will write here wherever I want to go and it's going to be home page of course it's not gonna work properly that's because we didn't wrap our application with react rather than what I want to do this later first I want to finish this never after that you are gonna see how they work I'm just gonna comment this out for now and create my menu let's give here HR tag is going to give a line between our links and our menu actually it's going to be after our container that because it's going to contain as you can see all our Navar not only container and after that I will say menu let's create here some span like that we are going to change them after covering our application with react rather Dom that's because I'm gonna give a link but for now just for testing purpose they can stay like that as you can see they are here that's because we said display Flex for the snapbar I'm gonna come here and change it as you can see it's horizontal and it's going to be vertical so I will say Flex Direction column like this let's change its Style I will say menu again I'm gonna give a thousand four hundred I'm gonna give some padding from top and bottom but as you realize since we made our Nail Bar vertical this justify content is not gonna work instead I'm gonna just say align item Center okay let's come back I will say display flex and justify content space between in this case it's going to separate our Links of course we have only two links right now but when we create more it's gonna look like this okay let's change from fate and color will be Gray by the way I can use same font framework here like that by the way this HR tag looks a little bit weird it's just a dot let's change it before this menu I will say HR tag and it's beautifully 100 percent height zero and I'm gonna give some border and it's going to be 0.5 pixels solid and let's say light gray let me make this white for now after that we are going to change okay as you can see it's a little bit lighter you can leave it like that or change it whatever you like okay it can stay like that okay we have almost finished our number but there is something important and it's this screwing effect as you can see we don't have menu anymore and its color is green but when I scroll it becomes white and this menu appears to do that we have to check if we scroll down or our neighbor is still on the top I will close here of course it's red that because we are not using yet I will say const active set active we are going to be using use datehook and at the beginning it's going to be false and when it's true I'm just gonna change my class name here that's right here a condition I will say if it's active the class name will be number and also active if it's not it's going to be just never let's give our style first and we can see it better I will come here and say one more class name and if it's active its background color will be white and text color will be black Let's test I'm gonna make this true as you can see it's white if it's false it's going to be green so I can write the same condition for this menu I will come here let's actually take this HR also but if you are using multiple components don't forget to write here react fragments like that and I'm going to write here my condition I will say if active just show those components okay let's make this true again as you can see it's here okay awesome but we are gonna trigger this effect using use effects and when we scroll down it's going to be active let's do that I'll say use effect and we are going to be using window here add event listener normally we are not using event listeners for react applications but there is something different here that because we are using window we are not using any HTML elements here so you can use event listener it's not a big deal so we are going to check its screw effect and let's write here a function actually I can create here cost is active we are going to check whether it's active or not and we are going to check window Dot scroll y it's going to show us our position so I will say if it's bigger than 0 it means we have scrolled in this case it's going to be set active and true if it's not in this case it's going to be false let's use it here and I'm going to use a cleanup function here by the way if you didn't watch my user fact video I highly recommend you to watch it if you don't know how to use use effect properly after you screen app functions and I'm just gonna delete my event listener here scroll and is active by the way it's gonna be semicolon let's check but of course we don't have any content here yet let's open up our app.js and right here some random texts I'm gonna duplicate this couple times and when I scroll as you can see it works as we expected but we don't have any animation let's add here I will say transition 0.5 seconds and it's gonna include all effects and timing function so it's going to be a little bit slower let's check okay perfect as you can see it's much better right now but there is a problem here when I screw as you can see this is sticky let's give this effect I will come here and say position sticky in this case I should give my position here and it's going to be top zero it's gonna stay on top zero all the time like that perfect so it works I can delete my H1 tags here and there is one more thing if you have a user let me change here I'm gonna add here a current user like that as you can see when I click here we are gonna see this menu so I'm gonna need one more condition here and it's going to be a user of course in the next tutorial we are going to fetch our user from our database but for now let's say current user of course const I'm gonna give some ID here maybe username and one more thing we are going to need and it's gonna be is seller not because if you are not a seller we will not able to see our gigs and add new gig section we are going to see our orders messages and this logout button that's all by the way let's add this user I will come here by the way I don't want to see those red warnings I'm going to open up my yes and configuration and add here my rules in this case they are not going to be red they are going to be yellow it means okay it's not vital but there is still error here it's not an error it's just a warning okay so after those buttons let's add here some conditions firstly this one I will say if current user is seller don't show this link that's because we are already seller we don't have to see this and this one if you have a current user we don't have to see this button and I will say if there is a current user add here a div and it's going to be a user div and inside we are going to have our username let's say current user dot username and also you can add here your profile picture and under this I can add my menu let's say maybe options we already have menu so I'm gonna add my items here but as I said if you are a seller we will be able to see this and this link otherwise we are gonna see only those three so I need one more condition here I will say if current user is a seller show here kicks add new gig and here add two more and it's gonna be orders messages and log out okay let's give a style inside links we have a user View and it's going to be a display Flex I will say align item Center and I'm gonna give a gap between this image and username of course we don't have any image chat let's copy and paste here and I'm gonna give some width and height for this image I'm going to make this a circle 50 percent and object width is going to be covered like this as you can see they are centered right now and we will be able to click on this user so I will say cursor pointer and what about our options I will write here options remember it's our menu so what I'm gonna do is using here a position absolute that's because we are going to show our box somewhere here it's going to be underneath this user div like that let's do that position absolute I will say top 50 right zero and I will give some padding insights let's change its background color it's going to be white I will give some border then pixels I can give some border and we can see better one pixel solid and light gray okay as you can see it starts from here not here that because we didn't say position relative for the primitive like that by the way I said border is going to be border radius and for the items inside I'm gonna say display Flags black extraction column and I will give some Gap and it's going to be 10 pixels of course we cannot see them that's because they are white right now I will say color and gray okay I can give some bit here it's too small let's say 200 and font which will be a little bit smaller like that okay awesome and let's write our functionality when I click here we are gonna see our menu to do that we are gonna need one more use state and I will say open and set open it's going to be false and when I click on this user button I'm gonna open it so I will say set open and I will say if it's true it's going to be false if it's false it's going to be true so it's the opposite of open variable and I can write my condition for this box also I will cover this option like that and I will say if it's open like that perfect so let's take care of Ria Groudon I'm going to open up its homepage as right now as you can see we are gonna need react value Dom provider here and inside this provider we are gonna pass our router and it's going to include all our pages but there is something important here for the home page for the category page or single page or Geeks for example we have our neighbor and footer all the time so we don't have to write them in every page we are gonna write only ones using react router Dom and we are going to wrap our pages to do that we are going to be using react rather Dom Outlet I'm gonna explain this soon but before let's import them let me close them and open up my app.js I will import I'm going to create my router of course I'm gonna change it and finally I'm gonna wrap my entire application using react rather okay as you can see it says hello world but if I write here home page as you can see it shows our home page so what about react router Dom Outlets that's right here Outlet basically I'm gonna create here a layout let's say const layout and it's going to return us a simple layout which includes our neighbor and also our footer of course we don't have yet but we are going to create and between them I'm gonna use black rather than Outlets as you can understand instead of these Outlets we can give any page like home page profile page whatever you like of course I should wrap them react fragments or you can create here any deal doesn't matter let's open up our components and create one more component here and it's going to be footer okay let's create our CSS file okay right now I can use it let's import like that right now I can use my layout here the elements will be my layout and for each page I'm gonna return different components so I'm going to create here an array path is going to be our home page and its element will be the home page element and right now as you can see we have now bar home page and footer I can do the same thing for other pages for gigs for a single gig of course we are going to have its ID orders my Geeks what else we have let's check add new geek messages and single message it's gonna have ID and that's all I think let's import our Pages here like that and let's see a single gig as you can see it's here are categories like that messages perfect it works right now we can use our links when I click here we are going to go to home page let's open up our neighbor and right now I can open my comment here like that and I can import I will click as you can see we are in the home page but as you realize there is a default styling here to prevent this I can open up my menu here and create a common style let's say app.css and for the entire application I'm gonna give a link class name and I'm going to delete this text decoration and its color so if I give class name here and Link it's not gonna work that because we didn't import our app CSS let's come here actually it's here I can import my CSS file app.scss and right now as you can see we don't have any decoration or color we can use this link everywhere for example here let's open up nerbar instead of those spans I can use Link it's gonna be kicks actually it's gonna be my Geeks at orders messages and also I can give my class name and it's going to be link like that I will click as you can see it works okay awesome before starting other components I want to show you one more thing here if I visit any category here as you can see even if I'm not scrolling it's still white and we can see this menu so we are gonna need one more condition here if you are not in the home page it's gonna be active all the time to do that we can use our location here we can do this easily I will come here and say const use location hook as you can see reactorado Dom and we can choose our path name using use location so let's come here and I'm gonna write one more condition or if path name doesn't equal home page if it's not home page it's going to be active I can do the same thing for our menu here I will say if it's active or path name is not home page by the way I can update my links right now like that as you can see we are using react router Dom link and our titles nothing else okay as you can see we are in the home page and it's green but if I click here it's white perfect it works so we have finished our number it was quite long let's make this a little bit faster otherwise this video will be really long I don't want to do that let's create this featured component I'm going to close everything and open up my menu and I'm going to create my other component and it's going to be featured let's create quickly of course we are going to have a container I'm writing in advance and right here import ant featured scss class name is going to be featured and inside we are going to create our container by the way for the consistency I can make this capital letter like that and let's open up our home page and right here featured that's right anything here okay it's here so let's see what we are going to create firstly we are gonna have our container is going to be same size a thousand four hundred and inside this container we are going to have two sections both texts and this image here that's right here left and right and inside left we are gonna have a title I will copy this and search inside this div we are going to have three items this icon these inputs and this button but as you can see this icon and this input are really close each other but this button is on the other side it means we are gonna wrap those items with a deal let's do that search input and we are going to have our search icon and input that's right here a placeholder I'll copy paste it's gonna be try building mobile app and after this input we are going to have our search button and not us we are going to have this section after this search I will say popular and we are going to have our buttons here web design WordPress logo design and AI services for the right side this image by the way let's import our images here I'm gonna create a new folder and it's going to be our public folder and inside this public folder I can create images I will just drag and drop my images here by the way in case of any copyright problems I can change those images that because they belong to fiverr.com maybe they don't want us to use their special images so I'm gonna change them in the GitHub repository but don't worry I'm gonna find a nice one okay that's right here images man.png and for this button search.png oops okay let's open up our CSS file here and give some style firstly I want to give here a height that's a 600 it's going to be display Flags justify content Center that's because we are going to Center our container and remember its size and we are going to separate our left and right side so I will say display Flex and by the way we can give our background color here like that and text color will be whites like this let's take care of our left side firstly it's going to be display flex but vertical I'm going to create left and right sides display Flags Flex Direction column and I'm gonna give gap between my items like that for this H1 tag let's say bigger like that and after search div remember it includes our search inputs here it includes our image and input and a button and after this search there we have our other div here and inside we have a span and some buttons okay let's make this search display Flex so they are going to be horizontal I will say align item Center I'm gonna separate them using just file content and I want to give a background color it's going to be white and or the radius will be 5 pixels so what about this other div search input div again it's going to display flex and an item Center and gap between this icon and this input perfect and I can change this image size let's say 20 I can give some margin Maybe or if you want to you can give padding for this search doesn't matter and after this image I will say input I'm gonna delete its border and its outline okay awesome what about this button I will give some width and height let's say 50 I'm gonna delete its border let's give background color it's gonna be this green color and phone color will be white and cursive pointer okay awesome so let's give style for those items I'm gonna give space between them let's say time pixels and for those buttons as you can see we are going to have some border here and we are going to delete this background color let's say color white background color transparent let's give our border one pixel solid and it's going to be white I can give some padding from top and bottom left and right and both the radius will be 20 pixels and font size a little bit smaller 14 pixels I like that of course we can click on the cursor pointer we have a proper image here but if we don't have if we have bigger or smaller images I'm just gonna give here a hundred percent and for image height will be a hundred percent an object which will be contained okay by the way we can change this freelance world where is our H1 tag here I'm just gonna write here and I tag like that and maybe I can decrease this font weight where's our H1 tag here inside we have I and its front width will be 300. like this so let's take care of this section I'm going to come here close everything and create a new component I'm not sure should I create a component for this small basic component but anyway we can create or just you can use your home page and create a div there doesn't matter foreign it into our home page here like that okay let's see what we have as you can see we have a text here and our images I will just say spend and some images here I just want to copy and paste like that nothing else let's come here I'm gonna change its background color that because as you can see it's this gray color life will be a hundred I'll say display flags and justify content Center that because remember we have a container here I'll say with 760 is going to be a little bit smaller and I'm gonna Center everything I'm gonna give gap between my items and this text color will be let's say light gray font weight by the way why it's not gray let's check okay something is wrong here oh I forgot creating here a container okay let's take this back like that and I'm gonna make those images smaller let's say 50 pixels an object that will be contained okay but it's not centered let's say just y content Center okay awesome so let's create this slider of course we can create our own slider as we did before but this time we can use a library it's going to be much easier don't worry it's really easy to use firstly I want to create a new component let's say slide okay let's see how we are gonna install okay this is our library we are going to be using this code like that and let's see how we are going to use it firstly we are going to import this slider and inside this component we are just gonna pass our cards our images any component here doesn't matter in our case in our application as you can see we are going to pass those cuts to do that we are going to need another component let's create those cards actually I'm just going to copy this and paste let's change the name I'll say gig card actually let's say category card that because our gig cards will be different I'm going to change its name like that so what I want to do is to create a w data which includes those images this title and this title so using those data we can map through our cards and we can show inside our slide components let's close everything here and inside source holder I'm going to say data dot JS and here I'm gonna add my fake data of course in the next tutorial we are going to fetch our data from DB but for now we can use them as you can see they have title description and image title description and image we can use this so basically we are going to have an item here and I'm gonna add here a link by the way that because when we click time we are going to open up our category I'd say any ID here doesn't matter we are going to change it later and here we are not gonna need any container we are going to have only those texts and this image I will delete this and that's it and which is going to be item dot image span and it's going to be our description and title item dot description item dot title okay that's all actually it's not a single gig it's a category so it's gonna be gigs and we can give here any query of course we are going to handle them later but for now it can stay like that so when we click on those cards we are going to open up our category page and we will be able to see our gigs and where we click them it's going to be this single page okay let's take care of each CSS here we don't have any container I'm gonna give some with and height font color will be white and I'm going to give some border radius just five and cursive pointer by the way I will give position relative that because we are going to cover this component with our image and those texts will be positioned absolute let's do that with a hundred percent height a hundred percent it's gonna cover all our components let's say color and after that for description for weight 300 and Position will be absolute and let's say top 15 left 15. he's gonna start from here and for this title so let's say title from page will be bigger font size will be bigger and again position absolute that 15 but this time top will be let's say 40. okay we are gonna see them right now but we have to import our slide first let's see I'm gonna import this slider and let's see first I'm just gonna copy here and paste I'm gonna open up my home page and add my slide component and as you can see this is our component when I click here it turns the two three four like that and also we can change them using both dots but in our example we don't have any dots so we can delete them let's open up slider and delete this and basically we are going to pass here our card component let's try category card of course we didn't pass any item here I will say cards dot map for each card I'm gonna return category card and as an item I'm gonna pass my card let's import this data by the way we need to add here a unique key and it's going to be car dot ID and right now as you can see our item is here and I can scroll them using those buttons but we can see only one image here we can change it let's come here in the documentation as you can see we have slides to show we can show five slides let's say five as you can see five items but when I click here it adds only one image here as you can see we can change how many slides to scroll by default each one we can change it and it's going to be 5 also and right now it skips five items and the best thing is it's an infinite slider so even if we are in the last slide it shows the first slide right after that and it's awesome so right now what can I do I can take them as a prop here like that and I can drag this set here my children basically we are gonna take those props and these children from home page I'm doing this that because we are gonna need one more slider here let's see as you can see this is different one in this case we are gonna send another card here so let's delete them actually I will copy this I will come here and import and right now I can map through my cards here as a children category cards and key will be cardboard ID and item will be the card itself it's exactly the same thing as you can see by the way I didn't pass my props it's going to be five it's going to be five and that's all okay let's give some style here as always display Flags justify contact center and I want to give some padding from top and bottom from here and here and in container which will be 1400 and perfect if you want to you can change those icons to do that we can use their class names they have some default class names inside so if I say carousel previous and next let's say with 50 height 50. background color will be light gray let's make this circle as you can see by the way it can be a little bit lighter Maybe okay and I'm gonna give some position using position absolute that's a position absolute I'm gonna Center this vertically to do that I'm gonna use top zero bottom zero and margin Auto okay it's much better right now you can change them as you wish using those class names by the way if you want to see more features you can just visit this page it's an awesome Library and that's all let's create this component to do that I'm not going to create a new component I'm just going to create inside my home page let's close everything and open up home page and after this slide let's say features yeah I'm gonna have a container and you'll have two items as you can see left and right part and inside this left part we are going to have H1 tag this title but as you can see there's an icon here so we have to create another div and finally this P tag and for the right side we are going to have only this video let's say item another item is going to include only our video video thought MP4 and I want to see its controls in this case we will be able to see it play button this line or time and inside this item we are gonna have H1 attack let's copy and paste this and I'm gonna create a div here it's going to include our checkbox and title like that and after this view we are going to have a P tag and inside this tag I'm gonna paste this text okay as you can see it's really huge let's create our other items here and after we are going to give our styles I'm going to open up my home page home CSS and inside home features we have item insights H1 tag P tag and title let's see as you can see we have this background color inside features I'll say background color it's going to be display Flags just y content Center and I'm gonna give padding from top and bottom like that and by the way let's take care of this video first because it's really big so I will say 720 by the way there's a problem here as you can see instead of Navar we keep seeing our cards to prevent this I'm going to open up my navbar CSS and I will say c Index and let's say 999. okay so let's separate them by the way do we have a container or not okay we have I forgot that let's add it here after features so it's going to be display Flex of course are with an align item Center and cap between my items will be 15 pixels okay in our example as you can see this part is a little bit bigger to do that I can use flex we have item here and the first item will be I'll say first child Flex 2 is going to be two units and the last child Flex will be three as you can see it's bigger right now if I give any background you will see better let's say black as you can see it ends here it's bigger of course you can give different names like left and right but I just wanted to show you how you can use first and last child so let's make this item display Flex and fly extraction will be column and cap will be 15 pixels like that 15 pixel Space by the way they are to close each other let's come here and change this maybe 200 okay much better right now I can take care of this image this H1 and my title this H1 is here font weight will be 500 and I'm gonna give some margin margin bottom 10 pixels and let's say a little bit bigger font size 0.3 it will be 300 I'm going to change its color it's going to be Gray like that but their letters are to close each other let's check here as you can see its readability is higher I'm gonna change a little bit so let's say line height is going to be 28 pixels and I'm going to give letter spacing and it's going to be one pixel like that it's much better what about this title it's going to be display Flex align item Center I'm gonna give cap between them it's going to be thicker and bigger and color will be let's say gray I can decrease this inward size it's inside title don't forget it's going to be 24 High 24 okay perfect let's see okay what else by the way we are gonna use one more features of course we are going to add this component part before let's add this one I'm just gonna come here and copy this component and paste one more time as I said if you want to you can create a different component but we are not going to use it anywhere else it's going to be only in home page so I prefer using just home.jsx if you want to you can change let's see what we have here we have this image let's copy its address and instead of video we are going to have an image and for this left side we will have this H1 tag and another one that's actually too late those it's going to be easier to see H1 tag and one more and it's going to be this text after that we are going to have a P tag I'm going to copy this and again I'm going to create a title Loop and inside we are going to have image which is going to be our check icon and a text here like that so I can copy and paste other divs here and finally we are going to have this button okay let's see as you can see it's here but it's a little bit different but don't worry we are going to change it in our example as you realize its background color is different to do that I can add here one more class name and it's going to be dark let's come here inside features I'm gonna say if it's dark mode change its background color and also color will be white actually let me see okay as you can see they are great that because we have given different colors for each item so I have to do this one by one I'll say H1 color will be white P tag is going to be white and I'm gonna give some margin button because there is a space here and for title color will be white font weight will be 300. font size will be 14. and for image I'll say a hundred percent if we do that as you can see our items are still gray that because it's overwriting our dark component here to prevent this I can come and say important in this case it's not gonna overwrite anymore like that let's check okay we can change this button foreign color text color will be white I will give some padding font size will be 16 pixels we can click on it and margin button will be to any pixels like that by the way there is a border here I can delete it border no let's check as you can see its width is a little bit smaller and there's a space here I set margin bottom it's going to be top of course like that and its size will be maximum content so I'll say with maximum content in this case it's going to be smaller like that okay so we have here one more slider let's create I'm gonna do exactly the same thing it's going to be easier I will copy this and paste right after this features component and we are going to have our projects let's see in this case we are going to be using different dummy data let's open up our data.js and I'm gonna paste here my data as you can see we have some projects which includes image profile picture category and the owner name this username let's use it it's going to be projects we are gonna have different cards let's create I will copy this and paste and it's going to be project card let's change those names I will delete them and you're not gonna give any URL here it can stay like that and let's see what we are gonna have as you can see there is an image and we will create one more div here which includes the user profile picture its name and this project name so let's say image it's gonna be item dot image let's create a div I'll say info it's going to input our user image which is item dot profile picture and I'm gonna create one more div texts and it's going to include the project name let's check what was that okay category item dot category and S Pen we chose our username let's open here I'm gonna delete everything and start from scratch firstly I'm gonna give some width and height I'm gonna give a border radius it's going to be flat pixels and cursor pointer and inside we are gonna have our image it's a hundred percent and it's going to be 70 percent and the other 30 percent will be our user image and its information let's say object fit and inside info remember user image and texts and it includes our category username let's give some Style I will say display Flags align item Center gap between them and I'm gonna give some Paddock of course we cannot see right now let's import our project card okay they are here those images are too big let's say 40 and Border radius as you always do object fit okay what about those texts font size will be 14. and 500. okay as you can see we have a link style here to prevent this remember what we are doing where is our project card here okay we'll see class name and it's going to be pink by the way they are too small I think I'm gonna give here a box Shadow to see better okay I'm gonna give some margin here and we can try hmm okay it's not working that's because we are trying to show five items let's open up our home.jsx and it's going to be four items and right now it works as we expected okay by the way those points are too sharp to prevent this I'm gonna say overflow hidden that because we have a positive radius here this time it's going to be rounded and one more thing for the home page and it's going to be our footer let's close everything and open up filter quickly let's see what we should create as you can see we have two parts this top part which includes our links and this bottom part I'll say container first inside top and bottom and inside bottom we have left and right and for the top part basically for each column I can create different items which include this title and those links so I'll say item H2 let's say categories and after that those links I will just copy and paste and we are gonna have four items it's four or five okay five items okay and for the bottom we are going to have our logo and S Pen this copyright text now for the right side we are going to have some images here and two links and one more image actually let's create a social div for those icons another deal for this icon and text exactly the same thing and image so I'll see social is gonna have our icons social media icons after this I will say link actually let's create a span and it's going to be language.png and one more link is going to be coin dot PNG let's say USD and after this link one more image and it's gonna be accessibility.ph okay they are here let's give our style it's going to be easy I will say footer inside our container top button and inside left and right let's quickly Center our items display Flex justify contact center we are going to give a color text color and it's going to be this gray color and I'm gonna give a margin from top and bottom like this 50 pixels 50 pixels what about those images let's give directly 24 like that and for this container let's give our size and for the top section display Flex justify content space between like that but it's overflowing that because we see all our links in the same line let's prevent this for each item display flags flag extraction column and Cat between them like that for this category remember it's an H2 tag all size 16 and color will be a little bit darker like that and for the span which are our links front page will be 300. okay awesome by the way we can add here this line where is our bottom here before this I'm gonna add HR let's write it here firstly I want to give a space as you can see they are really close let's say 50 I'll say height zero and I'm going to give a border and light gray this is a little bit lighter I'm gonna choose different color of course you can create a variable for the consistency but for not wasting time I'm just choosing immediately I'm trying to do this as quick as possible okay what about this bottom let's make them horizontal Airline item Center just five contacts space between and for the left side it's going to be exactly the same align item Center I'm gonna give gap between them like that for this span I'm gonna change its font size it's going to be smaller perfect and for the right side again display Flex right item Center gap between them and I should Center them also what was the name okay link and by the way we have social also display Flags align item Center and Gap oops and after that finally our link is by flex and an item Center and Gap okay perfect we have finished our home page right now we can take care of our categories let's open up any category here foreign so firstly we need those gig cards let's create new components okay inside we are going to have this image this gig information and the geek details so we are going to have three different items so I will say image we are going to take this as a prop this item and its image let's write it here by the way I can wrap this with link and when we click them we'll go to any geek like that and we are going to have geek information and details and in this information we have this user which includes this user image and its name after we are going to have description and this start div it's going to be image item dot profile picture and I'm gonna have a span item dot username and after this user I can create my description and start you and it's going to be image folder star dot PNG and finally another span and it's going to say item dot stack let's create our fake data I will come here I will paste and as you can see click image profile picture description its Price Star number and the username so after this info I can write my details and it's going to input the heart image this image and this component starting at a price title dot price okay I can open up my CSS and I'm gonna give some bits and height I will give some border it's going to be non-pixel solid and light gray and I'm gonna give some margin to bottom that because after each card we are gonna need this space let's give height for this image which will be a hundred percent but the height will be 50 it's gonna end in the middle of the card right 50 percent and object with color info section and details section I'm going to give some padding here 10 to 20. it's going to be display Flex Flex Direction column and I'm going to do Gap doors gaps and for this user it's going to be horizontal and again I'm going to give space inside info we have a user view display flags and an item Center and Gap and inside this user we have our profile picture it's going to be a circle for the radius and our description it's going to be a little bit softer you don't have to change here but anyway and after our description we have this start div let's give Gap I'm gonna decrease this inward size be it 14 height 14. and for spend on size will be 14 monthly it will be bold and its color will be exactly the same color that this image uses like that and for detail actually before detail I'm gonna add this HR tag let's come here that will be zero I'm going to add border 0.5 pixels solid and light gray for details I'm going to give some padding from left and right also it's going to be display Flex align item Center and I'm going to separate my items remember they are separated and for this image I can decrease number I mean its size and we can click on it and after this image you're gonna have a price TV did I create that divor no I did it like that so we have a span and H2 I'm going to change its color it's going to be softer and font size will be really small and what about this price it's gonna be darker and font size will be bigger and let's see here I'm going to open up my Geeks page let's close everything here and open up there is our categories here before showing our cards I want to create first those items let's create this we are going to have a container first and it's going to be a span and let's say bread crumbs and H1 Tech and a P tag like that and finally we are going to have a menu oops it's gonna be Dot and this includes two sections first one is budget section and second one is sorting section so I will say left and right so I will say span budget and we are going to have two inputs let's check two inputs and after one button let's say placeholder and it's going to be minimum price and one more is going to be maximum price and finally a button and I'll say that like now for the right side we are going to have this text and this icon and when I click on this icon we are gonna see a menu here exactly the same thing as we did here let's create to say span sort by let's give a class name sort by I'm giving that because we are going to have one more span here and it's going to be sort type and it's best selling it's going to be dynamic that because when we choose another option here it's going to be changing like that and let's create this image and our menu tone dot PNG and right after that I'm going to create my menu let's say right menu and two options used or best select okay let's give a style and after that we are going to take care of this menu display Flags justify content I'm gonna give my beat I'm gonna give my padding and it's going to be Plex Direction column and gap between each item okay there is no space here oh I'll say pixels okay right now let's take care of those items breadcrumbs front weight a little bit thinner font size a little bit smaller like that and for this description it's a p-tack remember color will be soft gray like that and front page okay let's give style for this menu it's going to be display Flex align item Center and I'm gonna separate them just file content space between and inside this menu remember we have left and right side let's check here as you can see and that size will be display Flex align item Center I'm gonna give Gap and color will be five five okay what about those inputs I'm gonna give some heading border one pixel solid and that's a light gray I just want to delete this outline this blue outline is going to be North line not and let's change those placeholder texts they are too dark I will say placeholder and color will be Gray maybe light gray okay Gray is better it can stay like that and for this button as we always do background color yeah I've already done this couple times so I'm not going to explain what I'm doing cursor will be pointer and let's give some painting Maybe radius five pixels okay awesome and what about here display Flex align item Center and gap between items and for this sort by color will be 555 and front page will be thinner and for sword type it will be thicker and there is a Dom image here it's going to be 15 pixels and cursor will be pointer that's because we are going to click on it and see these options let's give a position absolute for this right menu this one but remember if you are using position absolute the parent should be position relative firstly I'm gonna make you a padding background color is going to be white for the radius like pixels we can give a border 0.5 pixels and light gray let's create position absolute and give our positions right zero and it's going to be display flex and flag extraction column that's because our items will be vertical and I can give some Gap and color will be 555. like that by the way I set light gray but ah sorry okay and for those items we can click so I'm gonna choose those spans inside this menu and cursor pointer okay right now I'm gonna create exactly the same functionality I will come here and say const open set open use State hook and the initial state will be false let's close here and when I click on this button this down button I'm going to open or close my menu so I will say set open it's going to be opposite of open and I can write here my condition if it's open like that so how I'm Gonna Change here to do that I need one more use State and it's gonna store this value let's create one more use state and I'll say sort set sort and this value will be at the beginning sales I'm writing sales here not best selling that because in the next tutorial we are going to make an API request and our query will be this sales number for example we are going to make requests like API Geeks and we are going to give here any query like sort and sales or sort and create it add date if you want to see the newest items this is why we are storing like this and let's create here a function I will say const Resort we are going to take a type from user and we are going to set our state here and also we are going to close our menu when we click one of them and let's use this if I click here I'm going to give type and it's going to be created at let's copy this and paste here and it's going to be sales and we should change here I'm gonna come here and say if sort equals sales is gonna write here pass selling if it's not it's gonna write here newest let's see I'm gonna click as you can see perfect but in this case we shouldn't see this button we have already chosen so we are going to need one more condition and I will say leave sort equals sales is gonna be this spend if it's not it's gonna be this bad I will refresh as you can see only newest I'm gonna click and right now only best selling let's check here okay awesome and we are going to show our cards right now it's really easy where is our menu I'm gonna come here and say Cuts it's going to contain all our cards so let's say geeks.map for each item we are going to return our key card of course we should add here its key to ID and item will be kick let's import this data and also we are gonna need our component let me paste it and let's see okay there here as you can see we forget writing link class name let's open up key card it's gonna be clicked foreign as you realize it's vertical let's make this horizontal after this menu I will say cards is going to be display flex but this time it's gonna overflow to prevent this I'm going to write here flagstrap and it's going to be wrap it's much better but I can separate them justify content space between and awesome maybe I can make this border softer whereas our gig cards okay this one is grabby lighter like that so I can do the same thing for this HR tag here okay right now we can click on them and open up our single gig page let's create let's check here first as you can see we are going to have two sections first part and second part the first part will include those items and the second part will be this D key card as you can see it stays in this position let's create I will close everything and open up git page let's create container left and right sides let's create this breadcrumbs and H1 tag and after we are going to create this user section and it will include our profile picture username let's say John Doe and stars how many stars this user has you can see there are five stars and this span but of course it can be four three depends on our user so I can create five star inside for now image folder star.png five of them and finally a span is going to be five where are our stars I should do it like that I think okay and after that we are going to have this slider after this user I'm gonna call my slider from my library and inside we are gonna have let's say three images actually I will just copy and paste them and slide to show will be just one it's gonna show only one image each time and when we screw this Arrow scroll and it's gonna show only one more image let's see okay I'm clicking second start one two three okay perfect and after that we are going to have this H1 tag actually that's a H2 that's because we have H1 here and after this P tag let me copy this after this slider H2 and P tag and what else there's a seller section we are going to have H2 attack again and after that this user section user image and other details I will say seller section h2 tag what was that about the seller and user section it's going to include user image let me paste here by the way did we use user image here okay I forgot I will add and after this image we will create one more div and it's going to include this username dot stars and this contact me button let's say user info again I'm gonna use those stars like that and a button what else we are gonna have this box and in this box we will have two sections those items and this P tag and between them we are going to create this HR tag so let's say box items and a P tag let's copy and paste this okay so inside these items we are going to have each individual item and it's going to include one title and one let's say description it's going to be from USA and I'm going to copy and paste others like that and after those items we have this description but before as I said we are gonna need an H attack and after that finally we are going to have our reviews so after this seller section I'm gonna create one more section where is seller okay it ends here so I'm gonna say reviews H2 attack and we are going to have three items here and each item includes again user section Stars description and those items let's say helpful section let's do that I'll say item and user user image and I'm going to create one more div here that because it's going to be display flex and first part will be this image second part will be this name and discount three let's say John Doe and one more View and it's going to include the flag the country flag and the country itself United States I'm gonna copy and paste this user image and USA flag like that and after that we are gonna need those Stars it's exactly the same component after this user I'm gonna create my stars here it's going to include 5 stars and five and a P tag like that and finally The Helpful section is text icon text icon text it's gonna be yes or no and between them we are going to add our icons image like dot PNG and one more and it's going to be dislike.png and that's all I think and between each item we are going to need this HR let's choose this item HR tag one more item HR and the last item okay let's care about them and after we can create this box firstly what I want to do is to make our container display flex and this left side will be twice bigger than this right side let's open up kick dot as CSS display Flags justify contact center for the container with 1400 I'm gonna give my link from top and bottom and as I said display flex and maybe gap between the and finally I can create left and right side and it's going to be Flex one sorry it's going to be Flex 2 because it's the bigger part Flex one okay let's make this vertical oops I need semicolon here relax Direction column and Gap 20. okay let's start with this breadcrumbs let's open up here okay inside left I'm gonna say 300 font size 13 pixels and color will be the meat gray color and this tag H1 tag actually we don't need to change it it looks okay let's see okay it's exactly the same and this part this user part they are gonna be horizontal and I'm gonna decrease this image and this in which size and give some color I'll say user display Flags line item Center cap between each item and for this image actually I can say class name I don't wanna affect any other images here so let's say PP profile picture pursue High 32 and portal radius after this image I'm gonna say span our username font size 14 4.8 500. like that what about those Stars after the span I'm gonna say Stars and an item Center gap between them for each image I'm gonna say 14 pixels and for this number I will say spam class size 14 4 to 8 balls and I'm going to change its color it's gonna be orange let me copy this color like that and what about this section in our example as you can see our images are not covering this slider so object fit will be contained let's come here and say class name it's going to be slider okay after this user I'm gonna say slider and image inside I'm gonna say maximum height 500 pixels and object bit is going to be contained in this case it's gonna look better like that let's see okay awesome and for those H2 tags let's see after slider here phone paid will be 400. now for the description let's say 300 color will be mid Gray okay but to make this more readable I'm gonna give line height and it's going to be 25 pixels okay and for this seller section I'm gonna give first a space here I'll say seller margin top 50 pixels is going to be display Flex Flex Direction column and cap between each item will be 20 pixels let's take care of this user section gap between them and this image hundreds and it's going to be Circle and after that I will say info remember this is our info section let's see again I can say display Flags Flex Direction column and gap between them and finally those Stars actually I'm gonna do exactly the same thing I can copy here like that and this button I'm gonna give a background color I'm gonna delete that gray color it's going to be white for the radius 5 pixels let's give a border one pixel solid and gray and padding will be 10 pixels like that awesome of course cursor pointer okay and this box I'm gonna give a border and a padding inside where is our seller section here before this I'm gonna say box let's see here okay it's here let's say border one pixel solid and light gray I'll say pour the radius five pixels padding too many pixels and I'm gonna give margin top and it's going to be 20 also like that and for this item section I'm gonna say display flex and flex drop will be wrap remember why we are doing this space between oops of course they look like that that because we didn't give any beats for each item let's do that let's say 300 I'm gonna say column Flags like that and gap between each item and margin bottom will be 20. after each item there will be 20 pixels space and remember it was title and this was description let's check title and description I'm gonna change this title and a little bit thinner okay let's check here perfect let's create this HR and change this P tag after items I'm gonna say HR Tech right zero I'm gonna give border light gray um margin button will be 20 pixels I'm doing this that because we already have 20 pixels space here remember for each item there was margin bottom so we are giving only here we don't have to change here it already looks great and we have only those reviews here and after that we are going to create this box okay seller section and Sear and reviews section firstly I'm going to give a space here come back okay let's write this item display flags for extraction and I'm gonna give some margin let's decrease this input size and we can see better inside item I'm gonna say user and profile picture it's going to be 50 pixels and there is a country deep here align item Center space and color will be Gray and inside this country section we have one more image okay it's going to be 20. by the way why it didn't change I remember I gave class name here but okay so I have to change for others okay after this country actually after this user I think yes after this user we have stars yeah right here I will again copy and paste it's exactly the same thing as we did here and this helpful section inside this item after this user and star okay as always align item Center and gap between and I'm gonna say which will be 10 pixels whoops too small Maybe 14. okay much better and for this HR tag height zero and Border will be 0.5 pixels solid and light gray margin will be 50 pixels and zero pixel okay it looks pretty nice finally we can create our box here let's open up our right side actually I can close here for now let's see what we are gonna have the first section second third and fifth so I'm gonna create a D4 here D4 here and for here let's do that I'm gonna say price section after that A P tag let's say detail section and finally a button okay inside this price section we are going to have this title and this price so let's say H3 and let's say 59.99 and let's say it's H2 it will be bigger and this p-tech let's copy and paste this details section two items with this icon and span icon span clock.png and expand here actually I'm gonna wrap this with a different div here first item and it's gonna be two days Delaware and one more item and it's gonna be recycled and three revision now finally this button not before I forgot here after this details let's say features it's going to be green check and S Pen let's copy here like that and three more items and after that finally I can say continue let's see okay let's open up our style file I'm gonna take this here and I'm going to open the right side firstly I'm gonna give a border it's going to be light gray let's give some padding insights and board the radius I'm going to say display Flex Flex Direction column for each item to any pixel space and as I said it's going to be position sticky remember how we are doing this if you are using sticky positioning you have to write here any position and it's going to be 150 pixels like that but if I scroll as you can see it's not sticky that because its height is a hundred percent here to prevent this I'll say maximum height and it's going to be 500 pixels and right now as you can see it's sticky after those images it's gonna look better that's a price section item Center just file content space between and remember we have H2 and H3 tags from 3300 front page 500. and after this price section we have a P tag I'm going to say color will be Gray and let's give some margin between top and bottom and what else we have what was the name of this section details I think price okay details as always item Center justify content space between and I'm gonna decrease this font size and for each item remember it includes one image and one span again display Flags align item Center sum Gap and the image will be 10 pixels right now it's going to look better as you can see and there is a problem here even if our content is smaller than 500 its height is still 500 to prevent this I'm gonna give here height maximum content in this case if it's smaller than 500 it's going to contain all our contact if it's bigger it's gonna stay there it's not going to be bigger than 500. okay after these details I will say features for each item I'm going to say display Flex cap and font weight will be 300 color will be Gray as you can see it's horizontal to prevent this I'm gonna say fly extraction column here and let's give cap okay perfect I'm gonna decrease this input size inside item 14 pixels by the way those images are too small let's make this 20. okay and finally this button after features I'm gonna say button background color this green color I'm gonna give padding hex color will be white I'm going to delete border ticker font weights font size will be a little bit bigger and finally cursor pointer and awesome by the way there is a line here but I forgot adding this here let's open up number okay we have a HR here but I didn't add here okay so we have created our single page also right now we can create our Geeks page so I'm gonna close my tabs here and let's open up my Geeks I'm gonna create here a container and firstly I will create this H1 tag and right after that you'll need a table here by the way I forgot this button so I'm gonna create a div here which includes this title and button and after this table so let's say title H1 is going to be kicks and a button by the way it's going to be a link and add new gig after this title I can create my table and my titles will be image title price orders and action maybe I can say sales because it's going to be a number and after that let's create our first items first one will be our geek image so I'm gonna copy and paste my image and second one is going to be title let's say geek one is gonna be price any number sales number and one more TD and it's gonna be a button activate.png let's give a start my kicks display Flags content Center and I'm gonna say my container it will be 1400s I'm gonna give a painting 50 and 0 pixels I will say display Flex remember it's ideal and just by content will be spacebiki so I'm going to separate this title and this button I can say align item Center to Center them and I will say button I'm going to give my green background color text color will be white fontade I'm going to delete this border let's give some padding and finally cursor pointer oops didn't apply because I didn't say button here okay perfect I'm gonna give a read for this table after this title I'm gonna say table and its fifth will be a hundred percent and for each TR I'm gonna give height it's going to be bigger of course we cannot see right now because of this image but you are going to understand better right now I will say TD and image inside 25 object with color this is our product in which and for this delete in which I can give different class name let's say late and for this one let's see image for this icon it's going to be smaller cursor pointer so if I add more item here let's copy this if I don't give this height let me explain as you can see it looks a little bit weird this is why I'm giving height here by the way I can align those items those titles so I will say th and text align will be left okay perfect in our example as you can see we have a different color for even items so I'm gonna come here for each TR and I will say as child and for even Childs I'm gonna give different background color and it's going to be discourse like that so let's do the same thing for orders I'm just going to change those icons so I'm going to open my menu and actually I can copy here and paste four orders and here and paste for these orders page of course I should change my names is going to be orders and here foreign okay I'm gonna change this title orders we are not gonna need this button here and I'm going to change my table we have image title price but I'm Gonna Change here if we are the seller it's going to be buyer if we are the buyer here is going to be seller to do that I'm gonna write here a logic that's a const current user remember what we have done in the number component are created here a current user we can use it so it's going to be title price buyer and contact title price I'm gonna write here a condition and here is going to be contact so I'm gonna say if current user is seller right here buyer if it's not right here seller like that as you can see it's by right now that because we are a seller and I'm gonna change those icons and it's gonna be message okay perfect actually those icons are better than this one I think smaller is better and not us we have messages again I can copy and paste messages and the CSS file like that let's check okay let's see what we Are Gonna Change we are going to have buyer last message date and action let's update them we don't need image it's going to be by your name let's say John Doe last message I'm gonna write here any random message actually I can create here a message post message and it's going to be this random message I can use it there date let's say one day ago and action will be a button Mark as Brett we don't need this button okay so I can copy this row and I can delete others and I can duplicate like that as you can see in our example we are not showing the alt text here we should just cut this message let's do that I'm going to choose my messages and I will take its substring zero to a hundred if it's more than a hundred it's not gonna show and also I can add here like that three dots perfect let's make some changes here firstly as you can see first two items are green that's because we haven't read them yet as you can see we can click here or when we click we can open up the message section but those three messages are different that's because they are old messages let's do that for these two messages I'm going to say class name and active like that I'm going to open here we don't need this button actually I'm gonna use it for this button so I will copy we don't have any image I'm gonna say padding 10 and this height will be a hundred it's going to be bigger like that and I'm gonna delete here actually I'm going to change and it's going to be our active class if it's active it's going to be green like that let's change colors this one will be black this and this one will be gray and finally we can give style for this button so I'm gonna choose my first child and I will say font weight 500 and for a second for third child color will be Gray like that okay and for this button I will come here as a button and paste my style here like that by the way for those items we don't need any button let's delete them first one second one and I'm gonna delete here okay perfect and I should add a link here so I'm going to choose my messages like that and we are going to open the single message of course class name don't forget it's going to be link um okay I will click and we are here let's see I will click and as you can see we have this chat section I will close here and open up my message inside let's create container I will create span bread crumbs let's copy this and I'm going to add here a link like that two messages we are gonna turn back okay and after that I can create this message section and right section in this section we are going to have an input and a button let's say text area is going to be a big text area not input so let's say placeholder write a message and I'll say button sent like that for this area I'm gonna need this message item which includes a user image and its message so let's say item in which I will paste here my image and a P tag and inside let's copy and paste this message okay let's give some Style that'll say message inside container bread crumbs messages and write let's give this big flags justify content Center I'm gonna give beat it's going to be a little bit smaller and I will say margin front feet will be 300 full size 13 pixels and color will be 555. like that and I can give a margin here actually for these messages I can give 30 and 0 pixels like that for messages I can give some padding inside display flags flags Direction column and gap between each message and the important thing is it's going to be 500 and overflow will be scroll it means if it's bigger than 500 like here we will be able to scroll for each item it's going to be display Flex gap between the user image and the message and I'm gonna give here maximum width it's going to be 600. so if our message is too long it's not going to be bigger than 600. font size will be let's say 18. and for the P tag inside I'm gonna give padding background color light gray maybe softer we will see and I'm gonna give border radius is going to be 0 pixel at the beginning let me explain as you can see this H is 0 pixel and other edges are 20 pixels like that let's take care of this image so we can see better 40 right 40. for the radius and object fits okay let's make this softer it's too dark something like that okay maybe this text let's give font page maybe let's try I don't know which one is better but I think 300 is better and for the second item as you can see this is our message so its background color will be different and our image will be in this site so I'm going to create one more item here and I will add one more class name it's going to be owner let's come back inside this item I'll say if it's owner Flex direction will be row reverse in this case our image is here and I'm gonna change this Edge let's say p for the radius 20 0 20 20. and also background color will be royal blue and the font color is going to be white but I want to move this item here at the end of the container to do that I will come here and say align self and right now it's in the end of the flex box awesome let's create some more items as you can see perfect what about this section it's going to be display Flex align item Center and justify content space between so we can separate them like that and this text area eight percent height 100 pixels adding 10 pixels and I'm gonna give some border and light gray and finally for the radius 10 pixels okay awesome by the way I can add here an HR tag let's do that before this right section I'm going to say HR that will be zero border will be 0.5 pixels solid and light gray of course I can give some margin here magic bottom and maybe a little bit softer okay and finally this button we have created this button it's really easy just padding some background color will be white I'm going to change font weight it's going to be thicker I'm gonna delete border border radius uh cursor pointer like that maybe I can increase this width maybe 100 pixels okay actually this version is cleaner than this one this phone fade is too much and this color is too dark and there is no space here perfect and what else we have we have here add new geek page let's check okay as you can see we will have two sections left and right and we are going to have some inputs file inputs text inputs and this select method and finally a button let's do that I'm gonna close them and open up my add page let's add quickly our container I will have an H1 tag and it's going to be add new gig and I'm going to create one more do and it's going to be our sections left and right and inside this left side we are going to have some inputs let's see as you can see text input and select here let's create them first firstly I will say label it's going to be title and inputs here and I will say placeholder I'm going to write here my example we cannot do a single code because of this one it should be double and one more label here is going to be category and we are going to have a select here let's give a name and ID it's going to be categories and our first option let's say design and others web development animation they are not important because we are going to be changing in the next tutorial but for now they can stay and what else we have file inputs and after we have this text area and finally a button let's create another label here I will say color image let's create others actually upload images and description let's create inputs and it's going to be a file input and one more but this time it's going to be multiple we will be able to upload multiple images and finally text area maybe I can increase here and let's give placeholder like that and a button I will say create okay what about here input text area number input number input let's create them first by the way as you can see we can give minus we should give some rules for those numbers I will say label service title short description Gallery time revision number add features what else price okay it's going to be an input it's going to be a placeholder short description is going to be a text area I'm gonna paste my placeholder like that deliver time will be input but this time type will be number and it's going to be minimum zero sorry but it shouldn't be under one and one more thing one more number add features is going to be some inputs let's give our placeholders and one more number here let's see okay so we are ready to give our style right now I'm gonna open my CSS file that'll say add main container and our container due I'll say display Flags justify content Center I'm gonna give my feed and cutting as you always do and firstly H1 Tech I will say color gray on feet 300 like this I can give a margin here 30 pixels and my sections remember it includes left and right side so I will say justify content space between and I'm gonna give a huge gap here a hundred I'll say left and right actually I can write them together that because there are some common styles like display Flex Flex Direction column gap between each item 10 pixels plus five content space between like that so let's change those labels I'll say label color will be Gray font size will be 18. oops like that okay let's check perfect and for inputs text inputs text areas and for this select button I want to give some padding after this label I'll say for input for select for text area padding will be 20 pixels like that by the way I can give Flex for each item for this left and right sides so I can increase their sizes let's say Flex one as you can see right now they are bigger let's check and finally for this button or the known padding to any background color text color I'm gonna increase font weight font size and cursor pointer like that and that's all I think let's check we can add here new items maybe I can change those colors they are too dark but anyway they can stay if I make any changes you can find this in the GitHub repository we have orders messages single message home page category page and a single gig here okay I haven't added any payment page for now because I don't know which technology I'm gonna use maybe we can use a stripe page or maybe we can create our own page just let me know in the comments what kind of payment you want to see for this project and that's all guys I hope you liked it if you learned something new today please like the video you can support normative by using the link in the description below or by joining to channel don't forget to follow lamadev's social media accounts I will try to share daily development tips design examples and some other coding related stuff I highly recommend you to follow them and that's all I hope I will see you in the next tutorial goodbye

Channel: Lama Dev

Views: 112,860

Keywords: react, react design, react ui, react fiverr clone, html css, react course, react tutorial, fiverr clone, react with hooks, web design, react application, react router dom, lama dev, react.js, sass, react website

Id: KI5CnJ9u5ok

Length: 177min 41sec (10661 seconds)

Published: Sun Feb 12 2023