React Website Tutorial - Build and Deploy - Responsive React JS Website From Scratch

hello engineers and welcome to my channel i am yash and in this video i will show you how to build this amazing website using react and tailwind css so let me walk you through the build today what will be building today right on the left side we have the desktop version of the website and on the right side we have mobile version of the website and as you can see on top we have a responsive nav bar as i hover over this we have this subtle hover hover effect and for buttons as well we can see and for mobile you can click on the hamburger hamburger menu and we have this amazing sliding animation for our menu bar and we can select and just go there let's select services and bam guys we will be using smooth scroll for both desktop and mobile version of the menu so let's try to smooth scroll on desktop version and look at that and guys i am loving this color scheme it's it's just beautiful really really beautiful guys uh let's go to about section this is my favorite part of this website guys look at the colors look at the shadow and when i hover over it we have a subtle hover animation i'll show you how to do this in intel in css guys this project is completely built using react and deal with css guys nothing else and i'll i'll walk you through the whole build like literally from npx create react app so we will be doing everything from scratch and guys once we are done building the project i will also show you how to upload your website on the server using netlify so we will eventually deploy this project we can go to about section on mobile version as well and guys look at it just just amazing really really amazing and we have the support cards and with this button and at the very bottom we have this pricing section same thing with buttons and at the very end we have a footer and we can do the same thing for guys look at this the spacing and everything just just beautiful guys super beautiful done only using react and tailwind guys we have this pricing section as well and text is amazingly centered and looks just great guys and we have this footer on mobile version as well and guys let me tell you this text field is completely operational i'll show you so whenever a user visits visits your website and they'll leave an email you will be able to grab it and maybe send them emails and promotions and all that good stuff guys and you hover here and there's a subtle animation right there so guys we will be doing everything literally from scratch using react and tailwind css so you know let's get started right i'll open up my terminal right here and i'm inside a folder what i'll do is i'll do npx create react app and i want to name this folder cloud web services and uh you can you can name it whatever you like and i'll also say uh cloud web services website and just hit enter and guys we will also deploy this project once we are done building it on netlify guys it's super easy to deploy on netlify you will be really amazed if you have never used netlify great stuff guys netlify just amazing guys it's happy hacking so what i'll do is i'll just cd into the folder cloud web services website and let's just clear this up ls and let's just do code period so that it opens up our vs code and it just opened up let's start by cleaning some stuff so we don't need these three files delete we don't need app.css we don't need app.test.js so remove them and inside app.css we don't need all this stuff so remove it you know what let's we also don't need this remove this don't need this remove this and save and inside app.js we don't need all this stuff and we also don't need this so instead of this what i'll do is i'll just do diff and inside there i'll just say h1 and let's just say hello and save it and let's start by installing tailwind okay so i'll just put this here and bring my safari right here and i have tailwind opened up right here so i'll just say get started and here we will say framework guides and create react app so we already did this part uh this part so let's start with step number two i'll just copy this go back to my terminal and clear this up and paste it and it should just take a few seconds until then i'll copy this guy and let's wait for it to finish and paste this and this should be done okay now inside your project folder you will see this tailwind.config file so that means tailwind is ready to go but we still need to do some uh a few stuff so i'll just copy this and go to that file tailwind.config.js and paste it right here and paste save it and scroll down and this is our last step so i'll just copy all these three three guys and go to your index.css and paste it right here and i'll just save it so what we can do is we can run our server and see whether it works or not so inside my terminal what i'll do is and you know what before we run our server let's also install react icons so what i'll do is npm i react icons and hit enter and we should be just fine so should take couple of seconds and we are good to go we can just double check and react icons is right here so let's start our server uh so i'll just do npm start and it should open up in my safari hopefully in safari this is asking me to open a different port because i have my previous project running because we can just refer whenever we need to so i'll just hit yes but for you guys it should be up and running already so i'll just bring it in the first one and okay our server is running we can see hello and let's go back to our uh our project folder and inside our app.js we can test our tailwind so what i'll do is inside h1 let's do class name and let's do text for excel so guys tailwind is a utility they they provide utility classes for css so it's like a css framework and when i hit save we can see our hello just bummed up so our tailwind is working just fine and we can also test our phones so for fonts we can do import and let's do imp react icons and fa uh it's actually working fine otherwise it will and let's just do fa add and below f1 we can just do f add and uh close the close the tag and we can see add icon right here so it's our icons are working fine as well so next what we can do is let's get our custom phones guys we will be using custom fonts in this project that is super amazing i have google phones opened up right here so what i'll do is we are going to use pop-ins so it should be on your like home page right here so just click on pop-ins and what you want to do is start selecting all these uh fonts so they're like different styles right extra like 200 bold and all that stuff so it should take like a couple of seconds and if you guys don't want to do it do this you can just go to my github and copy this thing which i will copy right now i'll show you where we will paste it so let me just quickly select all this uh fonts amazing fonts and make sure so i'll just put it right here so that my picture will be in the right corner what you want to do is copy this and go to your project folder and inside index.css on the first line and just paste it right here and what you need to do next it's this we are inside our index.css guys so we'll say at layer base and we'll do html and here what you want to paste is go back to google phones and i'll just copy this and go back to my project folder and paste it right here now guys i have not yet saved my file so what i'll do is i'll put this side by side so that we can we can see the difference right so now if i save it we can see hello just changed a little bit right so that's our pop-ins uh font guys super amazing fonts are real fun to use and next thing i'll create a sets folder inside my source so assets oh this is a file so i'll just say new folder assets hit enter create another folder this is going to be component components and hit enter and inside assets folder i'll just drag and drop one image guys you can get this image from my project folder on github so feel uh feel free to go there and just get this image or you can use your own image and a link will be in the description below guys so i'll just close this so i think we are all set so what we can do is uh let's start we also need to do one more thing uh we need uh colors right i'll be using my own colors so inside inside your tailwind.config.js inside this extend what you want is colors and this is going to be bracket and this is going to be light color uh you can name it whatever you like for right now i'll just use right light color and i'll just say 0 4 d f b e and it should be like a light green color it's d f b e just making sure and i'll do dark color right here and this is going to be hash 2 d 4 7 4 e and it should be like a little darker green or something right and now when i say it the way to test this is go back to your app.js and i'll just say let's just do text light color and it guys this just auto completed for a super powerful guys it's tailwind and uh it just reflected right here the way you uh you can get this autocomplete is using tailwind intellisense just go to your extensions and what you want is still wind i'll just bump this up uh and the first one which is tailwind css intellisense by tailwind labs get this you also want es7 snippets so i'll show you where they are used later on but get this snippets as well okay that should be fine so let's start coding right i'll remove all this from app.js we don't need that anymore we don't need the import as well it was just for testing purposes guys and i'll also close this file we don't need index.js and we are done with index.css as well so i'll just close this inside app.js just save it and close this okay let's start by creating navbar navbar dot jsx file and guys this is inside components folder and here we will do rafce yeah you will get this autocomplete using that extension i talked about so just save it go back to app.js and inside our div what i'll do is i'll just say navbar and click this one and it should auto import for you and when you save it let's just put them side by side and uh let me bring up my safari and we can see never right here so it's working fine we need to create one more component this is going to be for our button so what else uh let's call this green button btn.jsx once again and r a f c e once again i'll just hide that and the shortcut is command b guys command b b for ball and save it and what you want to do inside green btn is remove this we don't need that and we also don't need this div instead we will call button and inside this button you will have some stuff so this is going to be our custom component i'll explain once we use it okay so what i'll do is inside this we will use t structuring and we will be passing title and we will also have on click so that we can do do stuff based on our requirements and this is going to be class name uh that's because we can we can pass in our custom classes okay if we want to so uh you know what i can show you so this is title uh on click and class name right so inside our app.js what we can do is let's uh let's save this first go back to app.js and here we can get our green button and save it and let's start by passing in title so title and let's just say here uh hello and save it and inside green button so inside this button what you want inside both the text what we want is title and when you save it we see this hello right but the thing is we still need to style this button so let's start by adding styles and i'll bump up my fonts probably so that you guys can see so we have button right here and we will start by adding some classes right there and let's start by saying border and bg a light color and text will be dark color and border light color and on hover we want background to become transparent and on hover we also want text color to be light color okay and rounded md so rounded md it will give like rounded corners to it you know what we can save it and we can see uh as you can see they are rounded corners if i remove this uh we don't get rounded corners so we do want route rounded corners so i'll just round it md save it and we also want duration of 300 and ease out and save it again so now when you hover you get this amazing animation for hover and that's it guys so we also need to do put all this inside this brackets and we will say plus add some space and plus class name so if we wish to add some more classes we can pass it uh using props and they will be applied right here right are super amazing guys super amazing right and uh i saved it and i can show you on click as well so for on click what we can do is we can pop alert right and i can show you also how to add more classes you know let's start by adding classes and what i'll do here is let's say we can say px of 6 and py of 3 and when you save we we see the button just updated right so awesome stuff guys actually it's supposed to be reversed so px3 and py of 6 and now if you save it oh looks more terrible but anyways that's that but nothing happens if you click it right so how you can make it do something so what i'll do is on click so this is going to be on click and here what we want to do is we will pass in a function and this function is okay i think i messed up something and this function will just do alert and let's just say hello something's wrong right here uh okay why do we have this right here okay just remove all this and now when i save it and now if i click the button we do not get the dialog box so it's on click we forgot to assign on click here so go back to your green button and after a class name we will say on click and on click is going to be on click and just save it now this on click ok that's wrong so on click and save it so we are passing it as prop now i just saved it and now when i click it we get this alert box right so that's how we are going to use this custom component guys you can this you can use this button wherever you want now and you don't need to write all this again and again and again right that's the power of react guys super amazing guys super amazing okay so we don't need this button of course so i'll just remove this and uh let's start by working on our navbar right so i'll just save this file and the button just disappeared and inside navbar let's start by importing some of the icons so we will be importing everything from fa fa is font awesome guys so fa bars this is going to be for our mobile menu and f8 times and enter and fa facebook of fa facebook enter fa twitch enter fl linkedin and guys this are for our social icons fa linkedin and just save and we also need our button so i'll just do import and dot slash green button and this we will call it green btn that's it and now when i save it we can use this green button inside our navbar whenever we want to right okay let's start off by adding some styles to this div so we will have a div and this div will have class name of this will be width of screen height of 20 and z index of 20 because we want this to be on top and we will also fix it so that whenever you scroll we don't want our navigation bar to scroll so we will say fixed and we will give it a background of gray and this is going to be 900 and text is going to be white and save it and guys look at that we have our navigation bar right here awesome stuff guys awesome stuff uh next we need another div right inside and this will have class name of px3 enter flex items center justify between guys do you see the autocomplete you get this autocomplete using that amazing plugin i told you about which is tailwind intellisense if you did not install it go ahead and do that right now it will just speed up your development process and i'll do w full so that's with full and height of full as well so guys if you get confused what is this what you can do is just hover over it and it will tell you what cs is what css classes uh what css is applied right so for this flex you can see that it says display flex uh for example for text white it will say color white right for with full w full is with hundred percent right this this name just makes sense and guys once you start using tailwind and once you remember all these classes it's super easy to build uh like a prototype and scale up you know super fun stuff guys tailwind just amazing guys smash that like button for tailwind guys and our custom component for a green button guys so smash that like button let's do div and for this one what we want to do is class of flex items center and inside this div we will have our uh our logo right and for logo i'll just say on like it's it's just a random name guys and for class name what i'll do is text for excel and font will be bold that's it guys text for excel it will just bump up the size of our text to 36 pixels and it will also add line height of 50 40 pixels guys and now when i save it look at that looks amazing guys and it was so easy to do right super easy stuff guys and uh we are done so the only thing we need to do is add our links right there right so after this div right here we will i'll create a unordered list and this will have some classes as well this will have hidden uh so this will be and guys uh tailwind is mobile first so whatever you type in here it first applies to mobile and then we can use media queries to break uh stuff right so in this case we we don't want to we don't want to see this our desktop menu in mobile versions right so by default it's going to be hidden but for now we can uh you know i'll show you how it works so let's remove hidden right here and what i'll do is let's make it mdflex and save it and inside this ul we can have a bunch of li so let's just say home and copy this this will be about and now when i save it we see this right here right but uh you will still see it even if i make it small right i mean this is mobile version and we don't want to see this so what we will do is we will just say hidden and uh we actually should have just kept flakes i mean it's going to be still same behavior right now let's just do hidden and flex will be md so after medium so let me show you medium is minimum width of 768 pixels so if your device is smaller than 768 pixels it uh it won't use this so right basically it will so by default it's going to be hidden and it will use flex for all the devices above 768 pixels right super simple guys that's it super easy and now when i save the file you see that we don't see it but now if i increase the window size and we we see it right here awesome stuff guys it's tailwind so md is basically a media query guys so super amazing stuff guys and li will have bunch of uh classes as well so i'll just add class name right here and let's just say capitalize this is going to have padding of 4 cursor pointer so that when you hover over the links you see that hand icon and on hover we want text to be light color and we also want duration of 200 so that we have like a subtle animation and now when i save it we see right here and we also see the hover effect guys look at that super beautiful super super beautiful and i'll just uh duplicate this and put it right here and guys look at that amazing now instead of duplicating this like a million times right like this is really terrible guys so what's the problem here let's say in future you come back here and you want to change from light color to dark color now you have to go there click i mean we do have multi-cursor editing but it's still more work right so what we will do is guys this is amazing trick okay what we will do is let's say links and this is going to be an array and we'll just say id of one and link is going to be home and after that we will have another one id of two and link is going to be we can come back to our old app and refer so this is going to be services and guys don't bother capitalizing it will automatically capitalize okay so don't worry about capitalizing and here we will just say id of three and link is going to be about and after this we will have id of four and this guy over here is going to be support and after that this is going to be id of 5 and link this is going to be pricing and save it okay that's it just hide it we don't need to see it so what i'll do is instead of duplicating this stuff and let's see our output so i'll remove all this uh and just save it now so we only have one home and as soon as you create the ul tag here we will loop over our array so what we want to do is links dot map so links dot map and this will be a single link and here we will return a jsx and that jsx is this like uh li li tag right link tag link element uh okay guys a lot of things going on in my head right now so uh but now when you save it you see home four times but the reason it's uh five times it's because we have five elements right the loop is working but we still need to make it custom so instead of home what you want is link dot link now guys now when you do it of course we see this but this is ugly right what we can do is we can use destructuring and here we will just say id and link and instead of doing link dot a link period we will just say link and guys we will use id right here so if you know react we need to provide key whenever you are looping over an array and returning a jsx right so this is how react knows which exact element to update right like in case of hover you don't want all the uh all the links to be re-rendered uh react knows that we are hovering over this particular link and it will brighten it up guys super powerful stuff this is an optimizing optimization technique from react's end right so i'll just save it and guys look at that we created a menu in like what this is so small right guys this is really powerful stuff i always like to do this okay so amazing stuff guys uh okay what we need to do is next we need to work on our burger icon and mobile menu right so uh let's do we also need our sign in button so i guess we missed it so we need this sign in button right so sign in button goes after ul tag of course and here we will create a div div and div will have class of hidden uh because we don't want it to show on uh mobile right that's why it's hidden by default and md of flex and we will have margin right of four and inside this div what i want to do is i'll just say green button guys this is our green button guys uh okay look at that we see a dot right there but as soon as i give title excuse me and what i'll just say and title is i think it's sign in and save it and look at that bam guys awesome stuff awesome and we just need to add some classes so so this will add classes on top of the previous classes so the only thing we need is px of 9 and py of 3 and we are done look at that guys super amazing and horror effect work as well and guys we can use this as many times as we want right if i just duplicate it we have two buttons super fun stuff guys super fun stuff okay now let's work on our burger icon right so after this div i'll just say burger icon and just comment it out so that we have we can keep track of it and here we'll just say div and class name and this is going to be so for uh sizes or medium we want it to be hidden right so when i uh so for now let's keep it uh we can come back and add it later so that we can see what's happening and this is going to be a div and this div will have class of uh md hidden as well uh we actually don't need it so i'll just say cursor pointer that's it uh for now and here inside this there we will have fa bars and size is going to be 30 and close it after that and save it and guys look at that we have our icon but this is the desktop website and we don't want to see that burger icon right so how how we can do that just pass in the css and md hidden right like we don't want to see it any uh on desktop version so i'll just save it and you can see the icon just disappeared okay so so when will you see it you will see it when the size is smaller right so when you open up this website on mobile you will see the icon look at that our desktop menu disappears and we see this burger icon right cool stuff guys cool stuff so let's just keep it small so that we can work with it and uh okay we have this so um okay that's fine uh next let's work on our navigation so our our site so next we will work on the site menu so after our mobile menu after our burger icon we need mobile menu mobile menu and let's just comment it out and after below mobile menu we want to create a div and this they will have class name of of course for we just want to see it for sizes smaller than desktop so we just want to see it for mobile devices so it's going to be hidden guys i know this media queries are like difficult to grasp i know the reason is you are developing uh this website on on a computer and testing on a computer and it's it's really in the tailwind css is mobile first but once you get hold of it like it just becomes like muscle memory right so don't worry about that like okay so this is going to be fixed as well uh left is going to be zero top is going to be zero and we will have width of full height of full and let's have bg gray of 700 right there guys uh oh my bad it's going to be 900 and divide by 70. now this divided by 70 uh it's it's like adding opacity right so it's and we will have backdrop and so let's just save it right now and we don't see anything because oh right there okay we just saw it it just took a while to load it to load right so that's fine and we will also have backdrop backdrop blur so it will just blur things out look at that super amazing stuff guys super amazing right look at that and guys we will uh have a state right like uh you see this backdrop blur whenever you click on the icon right uh we uh we will add the state like after we create this menu right okay so next we will have another div inside this div and this they will have class okay this div does not really have a clash so it will have another div inside and this div here has class of flex with a full and items center and we will have justify between justify between and save it and guys we forgot to add background color right here so let's add background color of gray 900 and now when you save it we should see the background color only if it loads and probably it loaded let's refresh okay i think we need to put some stuff right here so if i put some text right here do we get the background color uh not yet okay that's because it's it's not supposed to go here we actually need to create another so let's remove all this stuff so uh background color is going to be applied inside another div so this will have the background blur so let's let's add the classes so of course it's going to be fixed again and left of zero top of zero as well and width of four by five so guys with four by five is what eighty percent okay and we will have height of four and bg grey uh this is where we add the color and it's going to be bg gray of 900 and text of white hey look at that we see the menu right here awesome and p10 and next is going to be ease in and duration of 500 you know what let's just make it a little smaller because i think 500 is just too much but you can play around with it okay play around with it and do whatever you uh like okay and inside this div we will have another this they will have no classes and inside that div we will have another div and this div will have class of flex uh with a full and items center and justify between so right now we are working on the the brand name and the cross icon okay so right here so if i open this up we are working on this on and this cross icon so let's just do right uh let's just create a h2 tag and let's just add one right there and we can see one right there right so we the only thing we need to do is just add some styles right so this will have style of let's do text 3xl and font bold and we want it to capitalize and cursor pointer and that's it so cursor pointer because we will be so if you click on this it will take you to the uh home page right and it will close the side menu so when i save it of course this bumped up we have cursor pointer as well but nothing works so let's go ahead and add the state right now you know i think it's a no not really we still need the icon so let's quickly add the icon and we can come back here so after this div we want another div so after h2 what you want is another div and this div will have class of padding of three and cursor pointer so this is basically the icon and this is going to be fa times and size will be 30 again uh and just save it and we see this beautiful icon guys super amazing okay now we can work on the state okay so let's go ahead and create a u-state hook and we will be using used hook guys and this is going to be navigation and set navigation and this is going to be you state and by default it's going to be false let's make sure uh it for me it just auto imported but you should have this in your imports okay and let's scroll down okay so here uh just after mobile menu what what you want to do is select all these classes and put it inside curly braces and we will use ternary operator and i'll just say navigation question mark so if navigation is true we want all these classes but if it's false we just want like empty okay so nothing happens and you can see that the backdrop just disappeared next we will do the same thing for the inner div so this div is inside this one so the they've after the first div let's select all of this put it inside curly braces and i'll just say navigation question mark and if that's false i can bump this up and i'll just say this is going to be fixed uh something's wrong and it's because we want this here and this is going to be fixed top of zero left is going to be minus 100 percent and we will also have padding of 10 and this due duration 300 and eason and now when i put it here and save it you we can see that it disappeared and we also need height of full so after lift i'll just edge full and save it now what we can do is we can turn it on we can flip navigation when we press this and another problem is this is supposed to be right aligned but it's in center so i think the problem here is our burger icon is right here burger icon is supposed to be inside this div so what we can do is let's add another there are closing there and if i click here okay perfect this is fine and what you want to do is remove one extra view from the bottom and now when we save it okay it looks great now let's fix this uh when you when we click we want sidebar to open up so i'll just scroll up go here and inside the view i'll just say on click and this is going to be a function and we will just set navigation to true and guys this is the div for fa bars okay and now when i save it and click on this look at that our uh side menu animates uh outside from the left uh from the left edge right and let's just increase the duration to find it i think it was pretty good and now when i say uh save it but the problem is if i click this still doesn't close right so we will flip the thing and when we on click right here what you want to do is just close it so set navigation and this is going to be false and now when i click here look at that guys our animation completely works and it looks just great right opens up and closes and we can do the same thing right here opens up and closes right super cool guys super cool okay so next we should work on uh you know what if we click on this okay it does close uh what happened oh this is my previous app but if we click on this h2 it doesn't work right so what we can do is inside of our h2 we will do the same thing on click so on click and this is going to be set set navigation and this is going to be false okay duration 500 and now if i open this up and click on this bam guys bam our side menu just closes and looking great guys looking great okay so uh next we can work on the links okay let's just keep this open opened up and what we'll do is after fa times and after three divs okay one two three and here we will create another div and this will have class of margin top of 24 and flex flex column and height of fit and gap of 12 so inside this we will have our green button so green button and close it and now if i press we see a line but we still need to add some classes so this class okay let's just add px of 9 uh my bad and it's going to be px of 9 and py of 3 and let's add title title will be sign up sign in so sign in and now when i save it we see sign in we can also add another class which is capitalize and save it and we see it just capitalized and we got the hover effect guys this green button is just amazing right it's so seem uh so simple to use right we don't need to type all those classes again and again right super simple to use guys after that button we will have a unordered list so right here we will have an unordered list and our unordered list will have class of capitalize capitalized just at and inside this unordered list what we want to do is loop over our links array so links.map and this guy we can just directly destructure so ide link and let's just do this and return a jsx and this is going to be li li tag so li and li will have key of course key of id and we will have some classes right here and classes are going to be py uh you know what we can just add the title so that we can see stuff so inside this li tag i'll just say link and save it we see all these links right so we need to give classes to this so first uh class name here is going to be pyo4 a text to excel and tracking wider and cursor pointer and now when i save it look at that guys we see it and uh okay but the the gap looks a little bit off so we do have gap here why doesn't gap work so let's go back and try to fix that uh you see that we have some gap here but we don't see the gap right here so i think flex column edge fit so gap can be let's just do eight does it work okay our gap is not working somehow okay this ul tag is supposed to be inside our div so i'll put it right here and now we see the gap and gap let's bump it up to 12 right so this 12 and now we see more gap right awesome guys so we have our links the only thing the last thing we need to add is all the social icons right so we will add those social icons right after our ul tag and right after our ul tag i'll add another div so i'll just say div and this div will have class of grid and grid calls 2 and mx auto and width 4 5 4 cross 5 4 by 5 in gap of 10 and hit save and inside this let's bring back our our original project and inside this div we will have another div and this div will have a lot of classes inside this there we will have our icon so let's add facebook first so ff facebook and close it and we see little icon right here but we still need to add the classes so this is going to be flex items center a justify center rounded md rounded md so that we have rounded corners and now if i save it the thing is we should give some color so we are not going to give it color but we will add some shadow so that we can see stuff and shadow md there is shadow but we need color so shadow is going to be light color and now when i save it we see a little shadow but we need some padding and all that stuff right so padding will be three and cursor pointer right and look at that guys okay the reason the icon is pretty small so what we can do is just add size tag here and make it 25 and save it amazing guys look at that the shadow looks just beautiful right so uh what i'll do is i'll just copy this and two three four and let's just change this guy here to f8 twitter oh f8 twitter right here and this is going to be fa linkedin save it and we see three of them okay last one is facebook and we need to make it to twitch now when i save it bam guys look at that we have completed our mobile menu so when i click this our menu closes and when i click here it opens up it slides it slides out right look at that guys amazing great animation guys okay so the only thing we need to do here is we will come back later and add uh our react scroll to this okay so we are done with navbar guys awesome next we will work on the hero part so this part right here which looks great right and if we put it to mobile size looks just amazing okay now we can work on desktop version and guys look at the menu bar we have menu bar on our desktop version as well when you uh make the size smaller we have mobile version of our menu which looks just great guys so next let's start by creating a new file and this is going to be hero so let's just call it hero dot jsx and we will do ra fce save it close that and go to uh app.js and here after navbar we will add our hero and just save it we don't see the text because it's hidden behind the network uh i can prove it to you so if i comment this out we see hero written right there okay so that's just fine uh okay let's go let's close all this let's go to our hero.jsx and remove this and let's start guys this uh hero part is going to be super straightforward okay and this will have name attribute with uh just call it home uh guys this name attribute is used by react scroll to scroll to that particular section so please don't forget to add this part and class will be flex flex call so flex call is flex column justify center and we will also have so justify between and with a full height of screen and background gray 900 and we will do text white and text center and also have for medium it's going to be text left right and inside this div we will have another div and inside this div there is going to be another div and that div will have a p tag which is going to say cheapest cheapest hosting on planet earth okay uh we will see stuff once we add uh classes to this divs right so let's start by this dave okay we see the background color looking great guys and now let's add classes to this div and this is going to be grid uh and for sizes greater than medium so that was minimum width of 768 pixels guys grid uh calls two so we will have two columns for bigger screens basically and max with screen of excel so right here this max width is going to be 1280 pixels guys okay so m auto and we will have px of 3 so that's basically padding and now we see it right here guys look at that we see our text right here and this div will have another classes this is going to be flex flex call which is flex column justify center and for bigger screens it's going to be items start and we will have width of full and px of 2 and py of 8 and now when i save it we see it move a little and this p tag will have some classes as well so class of text 2 xl and text gray of 500 and one more zero and look at that guys it just bummed up and we see it right here and after this p tag we will have h1 and h1 will have some classes as well and inside this h1 we will have a span span will be on like one more n because it's 3n and it's going to be web services that's it and let's add some classes to our own first this is straightforward guys text is going to be light color when you save it we see the text color so let's add some classes to our h1 so padding top of one padding bottom of 6 and text of 5 xl let's save it and it just bumps up and for sizes greater than medium once again 768 pixels and desktop is a bigger screen so we will have text 7xl and font of bold and when i save it we see this bold phone bold amazing phones guys so this is a bigger screen so text is 7xl but look at this if we make it smaller it becomes f uh phi excel guys this is text phi xl and we also uh did you notice it just centered itself this happens right here uh here so by default for for mobile sizes text is center and for sizes greater right like for desktop it's text left right if we remove this uh you know what yep uh if we make this left we will see it on left side on even on mobile devices but we don't want that so we want it to be centered okay we are done with h1 after h1 there is going to be another p tag and for p tag we will generate some text uh i'll do generate dummy text of 20 and this is going to be the raven and save it because this is another plugin just go to extensions and say dummy text and probably the first one uh this one guys you want this one get this and you will be able to generate text and the way you pull up this menu is command shift p you will get this and you can just say generate and hit enter and add number of words you want and hit enter and choose whichever language or random string you want okay i i prefer english so it's right here and now if i put this back here so we already have the string save it so just add some classes to this and this is going to be text of face font light and we will have text gray 500 and now when i save it we see the difference look at that guys amazing looks great right okay next we will add our green button so this is going to be green button okay what's wrong so green okay it okay it's not auto completing so what we can do is just go here and we'll just say imp and green button this is going to be green ptn save it and now we can use it so green btn slash and we see a line so title title is going to be sign up sign up and save it we see it right there let's add some classes and this is going to be capitalize capitalize okay are we it's supposed to be a string so close it capitalize and p y of 3 px of 6 and for this is going to be width of 8 by 12 8 12 and hit enter margin y of 8 and save it and we see it right here guys look at that let's just bump the screen up and we see we see everything right here okay so guys the only thing we need to add now is our image right and we will do that after this div tag we will have another div tag and this will have our image and source is going to be hero so let's just add hero right here and we will import it and we will import it from let's do period period assets and this is going to be hero.jpg and just call it hero and now when i save it i see the picture right here so let's add some classes here and i'll just say hero and this will have class of width 3 4 3 by 4 and rounded full and save it we see it become round and let's add classes to the div this is going to be flex items center justify center and now when i save it it centers itself on for on full screen you see it like this looks like we messed up somewhere so the problem is let's put it back here and if i bump it up this one is this this one is this okay i think it's the problem of max width so we can go here max with screen excel okay it says m auto but maybe it's it's supposed to be mx auto so i'll just do mx auto and now if i bump it up okay we see it right here let's go back and remove this mx auto uh just make it m auto and uh probably let's just try to refresh the page okay well yeah that's how it's supposed to look pretty good right okay perfect it does work and when we make it smaller this is mobile version and it looks great as well right the only the difference is because of uh in my previous tester project i just had one n but we added one more n right okay let's just put it back right here and so we are done with the hero part and our hover works okay so next we will work on the service part so if i go to my tester project and here you can see we have to work on these cards okay so uh let's keep this right here and go back here and i'll close this i'll create a new file uh inside components say new file and this is going to be sir visas dot jsx jsx and save it rafc e save it go to app.js and below hero we will just say services and click this save it and probably okay right there we see services at the bottom okay so i'll close the sidebar i'll go to services.jsx and let's start by adding classes to our first div so first they will have uh and guys we also need one icon here and the icon is so i'll just say imp this is going to be react icons and from fa we want fa chevron chevron circle right and save it and let's start by adding the classes right so this class is going to be with a full height of fit and for sizes for bigger sizes it's going to be height of screen and bg slate 300 okay bg bg slate is a color guys and let's also name this so name is going to be services and save it and now if i scroll down we see this amazing slate color right inside this div we will have another div and inside that there we will have h2 tag h2 tag will say services and save it nvc services right here let's style this element div so this is going to be flex flex column items center justify center and max with screen excel and height of full and px of 3 and py of 12. and now when i save it okay it put it places itself in the center uh let's go ahead and style our h2 tag and this will have classes of text phi xl and font bold and we will also have text center and save it okay looks great and after our h2 tag we will have a p tag and of course we will generate some random text and 20 raven and save it okay we have some random text and uh okay that's fine let's start by adding some classes here and this will have text of excel padding y of 8 and we will have text gray 600 and we will say text center and now when i save it ok looks great right and does it look great on smaller screens okay looks perfect okay so let's move along and after this p tag we will have another div tag okay right here this div will have another div and that they will have another div and this they will have our chevron icon so fa chevron circle right size of r20 and let's just close this guy and save it we should see one icon right there right and after that there like so after this div let's add another div and this they will have our h3 h3 will be let's just say uh hosting save it vc hosting right there and it will also have a p tag and let's just generate something random and i'll just do 10 then should we find raven and save it and we see this random text right but we still need to style it right it should look something like this you know what let's copy this text so that we are a little consistent and just save it we go back here okay that's right here so let's start by styling our div right here on the top so this will have class name of grid uh small uh for bigger screens it's going to be grid calls too and for larger screens it's going to be okay it's uh same thing it's calls to so let's just leave it as it is gap is going to be 4 and padding top of 4 as well and when i save it okay so it's basically waiting for another div and this div will have class of flex items center items start and padding of 4 and we will have background gray of 900 and when i save it we see the background text will be white and rounded md rounded md and save it we see the rounded corners but it still doesn't look great because we still need to style some other stuff so first of all let's style our icon so this will have class of a margin top of three okay margin drop of three right there margin right of four and text light color and now when i save it okay our icon looks great but we still need to style our h3 and uh p tag okay so uh h3 is going to be font bold text large text light color so light color and we will have padding top of two and padding bottom of four and now if i save it okay looks great i hope this is the expected behavior right there and let's style our p tag a little bit and this is just going to be text large now when i save it okay looks great right on bigger screens looks much better just need to refresh the page now when you scroll okay it's right there okay probably we are missing something let's go to uh our code here we have max screen large excel okay we don't have mx auto and now if i add it and save it okay it's in the center right looking great guys uh yeah the problem was when the width became minimum it still looked great but when you increase the size it was not like constrained to max width right but now it looks fine so uh we are actually done with the css the problem is we need four of these so what you can generally do is just copy this and paste it couple of times but we don't do that so we will do this similar to links right we will create an array and loop over it so i'll just say const and services this is going to be an array of id1 this will have title of one and let's have subtitle and subtitle will be in backticks and let's just copy this so that like we don't need to generate it again just paste it right here and proc if okay oh that's great and i'll just copy this 2 3 4 and change this to 2 2 3 and this one is going to be four and now let's just loop over it so we will loop over it inside this grid uh inside this grid tag so let's create let's create some spaces and this is going to be services dot map and let's just destructure it so id title subtitle and we will return a jsx and for jsx we will return this whole thing okay so i'll just find out the ending tag uh take this cut it and paste it right here and save it so that it just styles itself and when i click here we have four of these but we still need to add the key key and all the variables right so key is going to be id of course that's fine we don't see anything and this is going to be title so now when you save it you see one two three four right amazing stuff and we can probably capitalize this so capitalize and space and this is going to be our subtitle guys so and now when you save it i mean subtitles it's it's just similar but uh it's just right here right like if you are working on some real project you should do something like this okay the reason we do this is if we copied this like four times in future you come back and you want to change some css right like you want to change this to dark color you have to go back and change for each and every uh element right so you don't want to do that so that's why we did this and look at that looks great guys now when we refresh it's still in the center and looks great okay awesome stuff guys awesome stuff next we will i mean this is my demo project and i probably did not test it so just anyways next we will working on this we will be working on this super exciting part guys i really like this animation i hope you guys like it too so let's go back and put it on the side and that guy over there is going to be our about section so [Music] uh and jsx and guys all this naming right like services and about it's pretty random so like you you want to suit it to your own needs right so if you're building for uh like hosting uh you want like real services and all that stuff uh you understand what i mean right so rfce save it and go to app.js and after services we will have about and close it and save it and we see about in the bottom right there okay so go back and we don't need this about right there instead what we want here is another div tag right as usual and this div and of course did we name services right here name services go back to about okay uh let's just fix this and it's the stack needs to be a string right here and looks good right now okay let's add the classes right here so first is going to be with a full height of fit and for uh bigger screens it's going to be edge screen and background gray 900 and we will have text of white and save it and inside this div tag and we should also give it a name for our smooth scroll and this is going to be about section and inside this we will have another div and this div will have class classes of flex flex column item center uh justify center as well max with screen excel and mx auto and now save it and we will have height of full px padding on x axis of 3 and padding y of 12 and ok that's good and inside this div we will have another div this is going to be straightforward this is just going to be text center and after that what we want is an h2 tag and let's just come back here this is our project so h2 is going to be this one okay so let's just say h2 has by uh span and span is going to be developers and after span we will have four do this after that we will have another span this is going to be developers as well and now if i save it and go back here we see something like this right but we still need to style this so h2 will have uh text phi xl and font bold and our span will uh so let's just select uh okay i'm trying to select both the spans so what i want to do is select the whole span command d so it will select both the starting spans class name and this is going to be text light color and now if i save it we get developers is green right awesome that's what we want and after our h2 we will have an uh p tag and let's generate some dummy data let's make it 35 this time and raven and now if you save it you see it right here let's style our p tag this is going to be text excel font light and text gray 500 and we will also have padding y of 8 and now if you save it okay we get this amazing font with gray color right and after that so we will work on this part right the best part of the project guys awesome if you like this hover effect smash the like button guys it's super amazing right uh let's go ahead and build that i'll open up our project so this one and we don't have that yet so after our p tag and after this div so after this div we will have another div and this div is going to be grid md grid calls to and guys when we do grid it assumes that uh it by default it becomes grid column one okay so you don't need to like express uh explicitly specify grid calls 1 right but for larger screens we will have grid columns of true as you can see we are using media query right there this is going to be gap of 10 and let's do px of 2 and width of and now if i save it okay that's good uh we still need to add data right here so inside this we will have another do and inside that there we will have another there and inside that they will have a p tag and another p tag and this p tag let's just call it 99.99 and this is going to be uptime uptime and if you save it we see it right here right so but we still need to style it right that's the problem and here class is going to be flex items center justify center and uh okay let's work on the hover part later because that's the fun part so this is going to be flex flex call items center and justify center as well width of 64 height of 64 as well and padding y of 8 and we will have rounded full and shadow large and shadow will be light color now when you save it you see it right here look at that guys amazing so for p tag we will have another classes and this is going to be text 5 xl font bold and text light color and now if you save it okay this looks great and this is the only one right here which needs some styling so excuse me so it's going to be text gray of 400 and margin top of two and now when you save it okay looks great and we should also let's just capitalize it right uh and save it okay looks great but we still don't have the hover effect right so before we do that let's uh add four uh three more right because we have four here so uh once again we will use loop here okay so what we want here is let's just say const details you can name it whatever you like it's a variable so id of one title and title is going to be 99.99 percent uh and after that we will have subtitle and subtitle is going to be uptime just copy this and 2 3 4 and here this is going to be 2 24 by 7 and this is going to be customer service 3 this is going to be 10 gb and free storage guys you can have it uh you can have whatever you like here okay so because it's just string uh feel free to add whatever you like so domain and let's just capitalize this and this is going to be free with sign up okay so as you guessed we will loop over this so after our grid after this div right the one with grid we will loop over it so i'll just say details dot map and let's destructure it so it's going to be id title subtitle and return a jsx and inside this you want to return this whole thing and cut it paste it and first they will have key and this will be id right there and let's just change this guy over here to title and this uptime uh is going to be subtitle okay now when you save it look at that guys we have four more circles looking great but we still don't have that hover effect right so let's work on them so the trick here is if you notice one thing they all this let me refresh okay so uh this is still loading okay right now okay that's good so if you see here if you notice one thing they are like uh facing each other right how how would you do that right like think about it so so let's try to make them face in one direction right so inside this classes you want to add skew uh let's do x skew x 12 when you do this they all face in one direction right now so the thing is this one so like array numbering is 0 right so 0 1 0 1 2 3 right so we will target odd and even using sudo classes guys that's super powerful so by default uh let's do odd is going to be skew x12 now when you save it look at that guys this one and this one because they are even right zero oh damn okay odd sq x 12 so zero one isn't this supposed to be even odd okay zero one okay anyways doesn't matter now when you do even this will be skew minus so we will do minus minus skew x12 and now when you save it look at that guys they are facing each other and now when you hover we want to skew them to zero and we will have duration of 300 and look and now we have the hover effect guys look at that amazing hover effect super cool guys right and in this section i think support is going on top anyways uh we will fix it in our project so don't don't worry about that okay so guys we are done with the about part next we will work on support part okay this guy over right this one so they will have this amazing cards right and after that we will work on the pricing section okay so let's start by working on support okay uh i'll create a new file in components this is going to be support.jsx and our afce hit enter go to app.js and after about you want it to be support and now save it go back to our project and okay we need to close this and we see support in the bottom right uh go to our support file and let's start by importing some icons right here so i'll just do imp and this is going to be react icons and we will import from md i guess md is material design so first one is md md outline computer so computer next one is md outline support agent and another one is md person okay we need three icons guys and uh next we will add a name tag to our div for our smooth scroll so support support and it will have some classes this will be width of full height of fit and for a medium devices it's going to be height of let's just say i think this one is edge fit for all of them because it doesn't really fit everything inside one screen so let's just keep edge fit for everything and bg slate 300 and save it and we see the color right there okay remove this support and we will have another div this will have class of flex flex column and items center justify center as well max with screen excel and we will have mx auto height of 4 px of 3 and y of 12 okay and inside this div we will have another div and this div will have class of px4 py of 12 and inside this div let's have a h2 tag and h2 will just say support okay and now when you save it okay it's right there and let's add styling to our h2 tag this is going to be text 5 xl font bold and text center and when you save it okay we see support font bold and after that we will have a p tag so guys we are trying to build this right here so this will have all the cards and stuff so pretty good stuff right and we will have a button right here so right now we are working on this part okay and let's quickly copy this text for our p tag and just paste it right here and go back and let's add styling for p tag so p tag is going to be text excel padding y of eight and font bold uh my bad i think uh no it's p by 8 at text gray 600 okay guys we are almost there let's bring back the energy uh we will be done soon okay text center okay looking great after our p tag and after this div add some spaces and we will just say support cards and just comment it out and this will be a div and this div will have class of grid and for larger it's going to be grid calls three and re uh gap of x and this is going to be eight and just a second okay so uh gap x8 gap y 16 uh gap y 16 so gap of y on x axis will be 16 save it and padding xo4 padding top of 12 and for smaller devices padding top will be 20 and text will be black save it and inside this div once again we will loop over it but let's just create a basic layout right so this they will have some classes inside this they we will have another div which will have another div and okay that's fine and after this there we will have h3 tag which will just say uh let's just say sales right here for now and another p tag and p tag will be this and for now let's just copy this paste it right here and save it and we see this okay it doesn't look great because it needs some styling and this they will have our icon so let's just do md outline computer for now and we see the icon right here and i can will have size of uh let's do size of 25 probably so 25 should look great okay now let's go ahead and add the styles okay so this div here is going to have class of background gray of 900 and text white round rounded excel and shadow of 2xl and save it okay looks great do we why don't we see the shadow probably we don't need it let's let's just skip shadow maybe maybe we can add the color uh if you guys want let's just do shadow light color and it does have some color to it and instead of 2 xl let's just make a large looks great right okay no problem let's just keep it and after this dave we will have class of padding of eight save it and okay it's coming great and inside uh this div will have class of flex items center justify center and width of 16 not 1 by 6 it's going to be 16 height of 16 as well and padding of 4 bg light color and text will be dark color rounded full rounded full margin top and this is going to be -4 m probably you know i don't want four ram let's do minus two rim uh not that great uh let's do six ram i think i won six that's too much let's do five um let's do four four looks great okay yeah let's just keep four uh four m okay and inside uh that we will have icon and if we see here okay h3 is going to have the padding which we want so let's add the class right here this is going to be font bold text to excel and padding margin y of 6 and now when we save it looks great and this p tag will have text gray 300 text page and padding bottom of 12 save it look at that guys looks amazing right once again instead of copying and pasting like all these cards what we will do is create an array and loop over it right so before we loop over this why don't we create the button right it's pretty straightforward so let's just add the button right here so it it's going to be a div green btn close it our title is going to be contact us so contact us and class name is going to be capitalize sorry a py of three padding six of six uh padding on x-axis of six and width of one by two and margin y of eight and save it and we should see the green button right here but we still need some classes for this div right here this is going to be flex with a full uh items center and justify center as well and now when you save it it just pops in the center right so uh now we need to loop over an array and create remaining two cards okay uh it should be fairly simple so i mean you can also create different components for this uh that will be good but uh if you still want to keep like similar data in in just one file this is a good way so i'll just do support links in array and this will be id of one let's do title title is going to be technical and subtitle is going to be just copy this uh copy this guy that's going to be our subtitle so subtitle and guys let me show you a cool trick so instead of this we will have backticks so that it just works and just put it right here uh and we will also have icon guys so what you can do is you can have jsx here okay so what we will do is md outline computer so outline computer size of uh 25 and just close this guys this is completely valid okay super amazing right and let's just copy this two more times one two and you can have as many as you like so i'll just stick with two second is going to be sales and this is going to be md person uh my bad it's going to be outline support support agent and this guy over here is three and just just say general general and this is going to be md person and now when you save it you don't see anything first of all let's fix this uh my bad right here md person okay remove this uh it doesn't work it's supposed to be m supposed to be capital and p is supposed to be capital as well okay now let's loop over this so inside this grid what we will do is loop over our what did we name it okay support links so support links i'll just have some water so support links dot map and we will destructure id title subtitle do we have subtitle yes we do and we will also have icon right there and we will return some jsx okay so inside this jsx what you want to do is copy this whole thing uh really [Music] yes you want to so what about this div this is inside this grid so actually this button is supposed to be outside the grid so what i'll do is i'll copy this div just copy one of the divs and go on top above this green button and paste it right here and now when you save it okay everything is still similar okay it's still it's yelling because we need to pass in some jsx okay so what we'll do is we will copy this whole thing and paste it right here and just save it you should see three more similar kind of this and let's add some more padding to margin to our contact us so what i'll do is it says margin y of 8 let's make it well and okay looks pretty good okay uh next thing we need to do is uh let's just substitute all these variables right so for div we will have key key will have id and here instead of having the jsx we will have this and we will just say i can and now if you save look at that guys i can just update it super cool right and this is going to be title and this one is just going to be our subtitle okay so and we are done with our support part guys okay subtitle so if you go and just let's try to make some changes to our second one so just add some blah blah stuff and when you save it blah look at that it's it's right here okay so this is a great way of like organizing your code and as i said earlier like when you loop over stuff it's really easy to change the design right like uh for example let's just fix this first so i'll remove all this uh yeah unnecessary stuff and let's say you want to change icon color to something else right right now it's green and look at this so we have three different uh elements right and you want to change color right now with this implementation you just need to change it once and it will change it for everything right so let's just make this uh gray let's make it line lime 400 and bam look at that right that's how easy it is so i'll just go back to my i think it was light color okay save it and bam okay it's right there and the shadow looks good too so that's how you implement support guys looks great look at that look at the progress we made already and everything looks great on mobile as well like as you can see we have our hero you scroll down we have services scroll down we have this we have about section probably whatever uh and look at the animation guys particularly on mobile devices it looks more great right because it's like in single column uh it looks greater and we have this card cards for our support okay so next we are almost done guys we only need to work so two things uh one is pricing pricing cards and another one is our footer right how about we start with the pricing right let's just go top down so let's go back and i'll just make it half screen and go back create a new file this is going to be pricing so pricing.jsx rafc e save go to app.js and after support we will have pricing so pricing right there and save it now if we go back to our app and we see pricing at the bottom okay let's go to pricing and remove this we don't need that okay i'll close the side menu and let's uh we need to import one icon so let's just do that first so react icons and it's going to be from font awesome and this is going to be fa plus circle and just keep it right there and first div will have some classes i'll just have some water okay let's have name first so name is going to be pricing and classes so let's start with with a full height fit edge fit and text white right there and bg gray of 900 and save it and if you scroll down we don't see anything because we don't have anything inside our div right so inside this div we will have another div and inside that div we will have another new and h2 tag so h2 will be pricing so let's just add that so that we can see stuff okay it's right there uh at the bottom so this div will have class of flex flex column items center items center justify center and max with screen excel and height of full and you know what we also need mx auto so i'll just do mx auto and height of full and px of 3 and py of 12 right there and save it and okay it's perfectly in center and if we bump it up it still looks good next we will add some classes to this guy over here and this is just going to be px04 and py of 12 right there and save it okay h2 will have class of text phi excel font bold and text center and save it it's right there okay looking great and after this h2 we will have a p tag and p tag will have let's just copy it from our tester project i'll just copy this and paste it right here and if we go back we see it but we need some styles right there so text excel p by of 8 and text gray 500 one more zero right there and take center and save it okay looks great now instead of okay instead of having this both text center what we can do is at text center uh on the div okay perfect same effect so we are good and after this p tag and after this div tag this is where we will have our pricing card right so i'll just say div and guys eventually we will create a separate component for this whole card because it's already a lot of stuff so we will have a separate component called pricing card and we will just import it in this component okay but for now let's just work on this one so class grid and with medium it's going to be grid calls to grid calls to and inside this div we will have another there so guys this we are we have started working on pricing card so this is our pricing card and let's just say pricing card end so that we just have track of stuff so just end enter here and enter here okay let's do this and save and go here inside this div let's start by adding the classes so first div is going to have class of bg white and text slate of 900 and margin of four rounded excel and overflow is hidden and shadow to excel and save it okay we don't see anything because we still need to add some data right there and there is going to be a div right there and inside this div we will have a p tag and p tag will just say hobby and save it okay we see it now and after this div we will have another div and inside this div we will have a p tag and p tag is just going to say the price right so let's do 55 okay 55 and save it and we see the price and after that we will have a span and span will have per month and save it we can see it right there so let's style all this stuff so first div is going to be class it's going to be text center bg dark color text white and padding y of four and uppercase and save it okay we see hobby right there uh let's style our p tag and actually there is no styling for this guy uh so let's style this div and this is going to have padding of 4 save it and we see it right there and of course let's add some style to this text 6 excel font bold and we will have flex and save it okay looks great right it just bumped up and for this pan we will have class of text excel text dark color and flex flex call and justify end and save it and we see it right here looks great already so after the span after this p tag and after this div we will have another p tag with some random stuff so we can get it from here just copy this and paste it here go back and we will be able to see it or not here i'll just save here and we see all this text right here okay so inside this p tag we will have class of text 2xl pxo4 py of 8 and text slate 500 and save it okay looks great and after this p tag we will work on the features part so this will have class name text 2 xl px of 4 py of 8 and text slate 500 and save it okay and inside this div let's add another div and this will have class of px of 4 and inside this div we will have a p tag and p tag will have our icon and let's just close it and we see the icon right there and we will just say feature one and just save it okay so let's style our p tag so px4 and ptag will have flex item center and do we need justify no we don't need justify it's going to be py of 3 and text large excuse me ok they are already in line but we should add some padding and we have to change the color of the icon this is going to be class and width of 5. and save it and margin right of three text light color and awesome guys look at that so now what we need to do is just copy this p tag multiple times right i mean uh of course i don't recommend doing this but for now i'll just copy it uh when you are building the project what i want you to do is create an array and loop over it right so you don't it's easier for you to change design later on so instead of doing this i'll just copy this guy two three four and five and save and we have five right here okay so we are good and after this div we will have our button uh so if you see here we have a button right get started so let's add that button after this div so after one p tag there and we will have a button here and this is just going to be green button guys this green button component is super useful right uh it's it's great stuff guys so title is going to be gets started and class is definitely going to be capitalized and width of full uh padding y of 4 margin top of 14 and we will have rounded none and also we will have on hover so the problem here is uh let's let me save it and show it to you guys uh when you hover over here we don't want this okay we are missing out on some stuff right here so but for now let's just do round and none and we will on hover we want border none and hit enter okay on however we don't see the border but it is not wrapping here so the problem is what div is this first of all it's so uh that div is supposed to have okay we just uh so here's the problem we had same classes for this one but it's supposed to be different okay so here the text the class is going to be text to excel and now when you save it guys right there you see it uh okay perfect so our our pricing card is ready here the so what we want to do is here let's copy this whole thing the this whole div right this whole div so from here from pricing card start to pricing card in cut it create a new file inside component folder we will say price let's say price card dot jsx and rafce and remove this whole div and paste it right here and save it let me just collapse that okay so for me it everything was just auto imported guys but if you don't see your imports just make sure you copy it from here okay and we just saved it what we want to do is come back here and we will just say pricing card whoa what happened okay pricing card uh oh price card price card right here and save it and we see it right here and now if i duplicate we have two of those right but what we want is we want to change this title and the dollar amount right guys uh when you are doing it what you want to do is you want to change that you want to pass this text and all the features as prop for features what you want to do is pass in an array and you will loop over the array inside the price card okay but for now i'll do this title and the dollar amount so here what we want is uh let's say price category maybe and let's just say dollar okay and instead of this we will have uh price category and here so what you want to do is let's just copy this remove this put this and let's add some extra space and this is going to be dollar and inside this we will have dollar amount and save it okay we don't have anything right now because we need to pass the props okay so let's just copy this so that we know how to spell it okay so price category is going to be hobby and when you save it you see hobby right there and let's just say for this guy or we can say growth save it and dollar amount right here it's going to be 55 and now we see it and once again for this guy it's going to be let's make it 69. uh okay this is weird pricing but okay so once again as i told you for this you want to pass in like similar it's it's going to be a string but for this it's going to be an array right uh do you guys want to do it let's just do it okay uh let's just say features features and this is going to be an array an array of objects okay and uh let's okay like this and this is going to be an array of objects so id is 1 and title is going to be feature one let's just copy this three more times two three and right here this is going to be feature my bad this is supposed to be two two make this three three right there and what you want to do is copy this whole thing copy it and paste it right here okay it's just going to be different like you know what just to uh add some stuff let's add star to one of these and add uh let's have a plus sign okay so we can differentiate okay and instead of feature what we want to call it is features right because it's an array so features and once again features now let's go to our price card and here we will get our features so features and uh right here uh instead of having this p tag okay let's just do this features dot map and this is going to be id and what did we call it so it's going to be title so title and let's just do this oops my bet we are going to return a jsx and just copy this cut this paste it right here and here let's just say key is going to be id and feature is going to be let's just say title and now when you save it it should have worked okay it's right there let's just remove all this unnecessary stuff okay awesome look at that guys these features are different from this features the only just amazing uh as looks as we wanted right and we also created a pricing card component now what we need to do is we need to do four things we need to work on footer we need to hook up this email to getform.io third we want to implement smooth scroll and fourth push it to netlify right okay let's just do that let's start with fooder so here i'll create a new file which is going to be footer.jsx e save it and let's go to app.js on my bad so okay app.js and after pricing we will have our footer and save it if we go back and see we see footer right there okay okay i'll close this uh close app.js and we don't want pricing as well let's close everything and i'll just do command p and footer and save okay right here and remove this let's start off by importing icons so we need icons for our social icons right here so it's going to be react icons from fa and what we need is fa facebook fa linkedin uh f a twitch and we also want twitter okay uh that's it uh four imports and first div we don't need name for this so we just want classes so class name is going to be width of 4 bg grade 900 and text gray 400 we will have py of 8 px of 2 and border t of 2 as well and save it and we see the border right there awesome inside this there we will have another div guys this is the last section let's bring back the energy right we are almost there and look at the website looks great on uh bigger screens looks great on larger screens like desktop and if we make it smaller uh for mobile devices it looks amazing as well guys look at that we built this stuff right super proud of it okay let's quickly finish our footer right and this will have flex flex column and items center and justify center as well max with screen excel height of full px of 3 py of 12 and save it and we need mx auto uh let's see does this work okay we do need mx auto because this is acting funny so let's uh guys this is my demo project so don't worry about that this is what we created so let's add mx auto because otherwise it won't work so mx auto right there and at the bottom and inside this div we want another div and this div is going to have class of flex flex call and gap of 8 md flex row items center justify center with a full and inside this div uh so this uh there will be two parts right so left side is going to be for social icons and right side is going to be for the newsletter right the the input field so let's just say social icons right there so social icons and this will be div and let's also have a news letter and this will also have it there they are going to be similar actually so width of 3 4 and for medium it's going to be with off one by two right with one by two and this is going to be similar right here so i'll just paste it okay and inside this div let's just add space uh go back here and inside the inside this view what we want is another div and this they will have another there and this they will have the icon so f facebook let's just close it we see the icon right there so let's just bump it up to 25 and we see it and let's add the stylings so this will have style of grid grid calls 2 and mx auto width of 4x5 and we will have gap of 10 and save it and this they will have class of flex items center justify center rounded md shadow md and shadow light color and padding of three save it and we see it cursor will be pointer and on hover we want it to scale 105 so now if you hover over it we have this amazing effect but it it looks choppy right so in order to fix that what you add is duration of 200 and now when you hover it looks like animation right uh great great stuff guys great stuff almost done almost done and we will ease in on the animation and now if i hover looks pretty good right pretty good okay now what you want to do is copy this whole thing and copy it four times three more times so two three four and this let's make it fa linkedin link in save it and we see the linkedin icon this is going to be twitch save it now let's make it twitter save it and this is going to be twitch so twitch and save it okay look at that guys looks amazing right so we are almost done guys so the only thing is this newsletter and we are done so this one will have class with a full uh padding top of eight and for medium padding top of two so for sizes greater than medium it's going to be padding top of two right and this will have a p tag which will say subscribe to our news letter and let's just style this so font bold and uppercase mb8 so margin bottom of 8 text like color and we will have text large and text center and for md text will be left okay and save it and we see it right here awesome stuff guys awesome we are almost done and let's keep the action for now we will be using it for our getform.io right but we do need some classes so what i'll do is so class flex flex call and let's say small it's going to be flex row and inside this form what we want is a button right this one we won't be able to use our green button because we need to pass in our type prop you know what let's try to do that let's try to use it so we'll say green button what's wrong so green right here green button and close it and we see the small dot so let's just add title uh my bad so title is going to be uh submit you know uh let's just say subscribe right subscribe and class name are going to be padding of two and margin bottom of four and we are good guys look at that looks amazing right uh we actually forgot the input field uh so let's just do input type of text and let's also name so that's how getform.io knows right what's the so getform.io is like key value pair stuff okay uh if you want to learn more feel free to watch my other react tailwind videos uh i i go in depth with like bigger forms right for now this one it it's just going to have email so class name is going to be with a full uh padding of two margin right of four and rounded md and margin bottom of four as well save it and we will also have placeholder so uh let's just say daily news letter dot okay looks great right and we are able to type as well awesome so we are done with the project guys if we bump it up looks great uh if we do this it works like look at that guys so two more things we need to implement the form and we also need to implement a smooth scroll right you know what uh let's go ahead and implement our smooth scroll right so for smooth scroll we want to install a library called react scroll so i'll just ls and make sure we are in proper directory and i'll just say npm i react scroll and just save it hit enter and it should do its magic okay uh pretty slow okay good we have smooth scroll installed the only thing we should do is configure it so we will just say let's go to our navbar here and scroll on top and here what we want to do is import so i'll just do imp react scroll and this is going to be link okay and how we are going to use this link is scroll down here inside this li tag go here and just do link and close it oops my bad and this will be linked and enter and move this inside the link right and this link will have some stuff so 2 will have link so this knows which section to scroll to right and we will have smooth and duration is going to be 500 i guys you can play around with this duration but i'll stick with 500. now if i say guys look at that how simple it was to implement this link the reason is because we have this array right if you had multiple links you would have to do this thing like four more times right but now when i save it and if i click on service hopefully it works look at that guys boom smash that like button for this right super simple guys okay pricing works service oops services okay services works homeworks and okay we don't have it on this but it's pretty simple to implement you guys can do it if you want and look at that guys but the thing is if we decrease the screen size right here and just refresh and now if i click here it still doesn't work because of course we have different menu right so we will do the same thing you know what we want to do is probably just copy this and right here inside this new menu just paste it and it should work just fine refresh click here let's go to about and okay it works but the only problem is it does not close this uh this scroll right this thing the reason is what we can do is so on our here what we want to do is let's just do one click and we will use our sat nav u state hook right so here we will set navigation so inside that we will just say false right uh i think yep that's how it's done so i'll just do set navigation and change it to false refresh open this uh click on about and boom guys look at that now uh if you if you notice like it it's not perfect right so what we can add is let's try to add some offset and let's just do 300 i don't know how big is 300 but if we try again so this was about section and let's click here about oh it's too much it scroll down so what you want to do is add negative sign and now if we do home and do about again okay it's way top so let's make it minus 100 and just scroll down and let's try again about and we are almost there guys so let's make it 75 i think 75 should do the trick and i'll do about and okay boom guys look at that it it worked fine and what if we do support support works fine and what if we do okay support is right there and pricing boom guys look at that we are done with smooth scroll so let's hook up our getform.io right what i'll do is getform.io just go to this website and hopefully i am able to log in okay perfect i am already logged in and you will see something like this if you don't have account just sign up you know what to do right i'll just hit create and form endpoint let's just say react website and for my time zone it's going to be indian standard time and hit create and we are good to go guys so just copy this and if you want you can read this as i said we need to pass in the name attribute and method is going to be post we will do this as well so let's go back to our form it's going to be fooder go to our form and paste the link inside the action so i can bump this up so it's easier to see and method is going to be post so p o s t and so this green button needs to have type of submit let's try to see whether it works or not so let's go back to our app uh refresh hopefully it works you know otherwise we need to set our green button to submit so let's just say blah let's just say foo at gmail you know what let's uh add uh let's make this text gray 900 so that we can see the text okay a food or gmail.com and now if i hit subscribe okay i think it worked guys okay look at that now if you go back to your getform.io look at that we have this a new subscriber right uh let's do one more so we can do bar so let's just refresh the page scroll down and let's just do bar at gmail.com and now when you subscribe it takes you to this page oh okay guys uh this is i think it's probably because of uh free plan right if okay but but if you think about it it's pretty good like nobody can spam right a single person cannot spam your uh your website so pretty pretty good stuff guys awesome so we are done with the website we are done with boot scroll we are done with the form the final thing we need to do is deploy this website to our netlify right so what we will do is let's go to netlify.com and then oh first we need to go to github so i'll go to github and this is going to be the yash patel that's my profile guys so i'll just click here and okay this is my getup profile i'll create new repository and what should we call it so our project name is cloud let's just copy this and go back here let's just say yt and do this okay awesome of course it's available and we will just create repository let's bring it side by side and this is our terminal so uh what you want to do is first uh git status right and guys by default uh react will create a git for you so you will definitely have it you don't need to do get in it uh but for you maybe you have a lot of stuff uh during this video i was committing for for a while so i just have this stuff but it's okay to have more stuff okay so let's start by doing git add uh space so get status next is going to be git comment uh and we will say project done and let's just apply as well and hit enter get status again and we are good guys right once again git status next just copy all this three here and paste it and hit enter and in couple of seconds our repository is pushed to github guys this step is important for netlify to work and but the best part is this is going to be continuous deployment so whenever you push the code it will automatically update your website right that's super amazing okay now if i refresh this uh page we have my github right okay next we will go to netlyfi.org and one more thing guys we need to confirm this so this is my server running you don't want warnings right if you want to deploy to netlify please make sure you don't have any warnings so let's start fixing them inside my vs code so app.js so let's start by doing app.js and what it's yelling 38 oh we don't need this remove that i'll go to pricing so pricing on the top we don't need this two stuff remove that okay we are golden what you want to see is all green okay make sure it's all green otherwise it won't work go back to netlify where is netlify okay i think i don't have nutlify i can create a new tab with netlify so netlify.com hopefully i can log in email okay i'll just do this and log in okay awesome right here right and what i'll do is here i'll just say add new site and import an existing project and i'll click github and this is the screen i get and i think okay it automatically did its thing but if you're using netlife for the first time just go through the flow it will ask you to like do give permission and whatnot okay and when the part comes uh of selecting project or all projects uh if you are fine just hit all repositories right so that you can see everything now let's search for cloud maybe i think okay it's right here and i'll click on this and this should be completely fine and i'll just hit deploy side this should take like about 15-20 seconds and we will i'll just wait as well so no no editing and it's starting up i'll just refresh and guys after this is done you know what we can do is oh this is going to fail guys because the thing is we made the changes but we did not commit them so let's just see it fail okay so it's definitely going to fail guys i know for sure so uh let's just see it fail you know what we can do is until then let's just have a type race okay what okay let's just do this uh i'll tell you a secret something they don't teach you in your temple the gods envious they envy us because you will never be lovelier than you are now we will never be here again okay anyways i hope this failed already okay it's still building probably it's it's about to fail i don't know maybe it's because uh i oh right here guys it failed okay so what we need to do is look at this it's amazing guys so what i'll do is i'll uh go back to neglify and just hit back and what we want to do is just to we don't need unless get status get add period gets status now done and gets status again and get push as soon as i get push of course my uh repository is updated in github but look at this our netlify also picked up the push and it automatically started building it right super cool so whenever you fix problems and just push it your website will be updated like automatically like in like in in a minute or two right let's keep refreshing and did you notice if something fails the build fails so your previous previous version is still live okay so don't need to worry about that so let's wait for a couple of seconds and until this happens uh if you guys have any questions feel free to post them in the comment section below and if you want me to build something uh you can do the same thing post it in the comment section below and do smash that like button guys and subscribe for more content like this right and let's just wait for a couple of seconds should be fine so ah okay still building okay let me know in the comment section below what do you think about tailwind i personally love tailwind if you open my channel page you will see that like i have a lot of tailwind projects because i love tailwind tailwind is like okay guys here is the link if i click on it our website is deployed guys look at that we have our image we have our sign up button however it works let's make it uh let me bring it here so that you guys can see and if we make it small uh small guys don't worry about all this like there are no phones with this resolution so don't bother and click here and we have our mobile menu you scroll down everything looks amazing our our smooth scroll is working fine and if we bump it up it does work you know what what we can test is let's test our get phone dot io right get phone dot io and guys make sure this website is live right now okay we are going to test it on our live website so uh here we are and keep your form connected react website and this was our previous test so i think this is going to be gmail.com guys once again this is a live website okay and now i'm going to hit subscribe and boom look at that guys we have our new subscriber we have two subscribers right now okay so that's it uh let me know what do you think about this project and feel free to use it however you like it and if you clone it and build something do email me right i would love to see what you build using this and that's it i'll see you guys next time

Channel: Yash Patel

Views: 2,941

Keywords: programming with yash, react website project, react website for begginers, react website responsive tutorial, react website using tailwind, react website with tailwind, react js website project, react js website development, react js website tutorial, react js beginner website, beautiful react js website, website react js, website react tutorial, react website tailwind, tailwind react project, tailwind react website

Id: MewBu3icZi8

Length: 135min 4sec (8104 seconds)

Published: Mon Jun 20 2022