Build and Deploy a Fully Responsive Website with Modern UI/UX in React JS with Tailwind

hi there and welcome to a project video where you'll build and deploy a fully responsive website with modern ux and ui in react.js and tailwind with a stunning opening section high quality images and gradients business stats reusable feature sections with call to action buttons testimonials and much more who bank is the best modern business landing page that you can currently find on youtube by building this single web application with me you'll get the knowledge needed to build any website you can imagine there are many tutorials out there teaching you how to create a website consisting of a navigation bar a few divs and a footer boring right today you'll learn how to develop a professional website using the most in demand technologies today react.js and tailwind no extra dependencies you'll build everything from scratch and deploy to the internet so that you can share it with your friends and potential clients and put it on your portfolio this video is perfect for you if you want to learn how to transform a figma design into a fully functioning website if you want to improve your css skills and if you want to learn how to create modern and responsive websites you might be wondering what are the prerequisites for building such an amazing website this course is entirely beginner friendly we're going to start simple and then move to more complex topics as we go i'll explain every step of the way alongside building this application you'll also learn react functional components and their reusability react file and folder structure you'll achieve mastery using tailwind css fundamental css properties to master flex from soft and pleasant animations to complex gradients perfectly placed media queries for satisfactory responsiveness on all devices and at the end you'll learn how to deploy your websites to incredibly fast servers and give them a custom domain name using hostinger if this video reaches 20 000 likes i'm recording a second modern ui and ux video before we dive into the project i have an incredibly important announcement for you we've recently added the free resources section to the js mastery.pro website the link is in the description so from now on alongside the professional project-based courses such as fimpire and nfd marketplace you can get entirely free guides and ebooks about react web3 and frontend backend and full stack development if you decide to get the courses by using the link in the description a special discount code will automatically be applied for you during checkout with that said let's dive right into today's video [Music] before we start building out our website let's first get the hosting and the domain name for our new project your portfolio or any site you'll create in the future you can click the link in the description to scroll through the website with me hostinger is my personal recommendation and right now they're offering crazy deals so i simply needed to show this to you they offer a grace price to quality ratio high speed servers and most importantly 24 7 chat support let's see what's offered with some of the most popular hosting plans hostingers plans are incredibly cheap i mean 2.99 a month for hosting for 100 websites and you also get a free ssl certificate that means that you'll have https security in this case we're going to go with the premium shared hosting because it also offers a few great things that you need when building any website it gives you a free email account free ssl but most importantly it gives you a free domain name we need our modern and professional website to be fast reliable and credible for that reason having a custom domain name custom email name and fast website load times will make you stand out from the crowd since i've partnered with hostinger they decided to give you an even bigger discount you can find the link and the discount code in the description enjoy once you select the plan here we have to choose the period of our hosting with a crazy discount going on right now i'll definitely choose 48 months to save the most money and down below you can choose your payment method and then you can enter your coupon code as you can see javascript mastery is already entered here for me but if it hasn't been for you just type javascript mastery that's going to give you an even bigger discount on your hosting package after you make a purchase you'll be redirected to the hostingers dashboard i'll see you there and we're back inside of the hostingers dashboard in this case it opened up automatic guidance for the hosting we have just purchased so let's go ahead and click start now it's asking us whether we want to migrate a website or build a website in this case we are building it of course now it's asking us whether we want to code on wordpress or on some other cms in this case you can click skip i'll start from scratch and finally right here you can claim your free domain so let's go ahead and click select and in here you can choose a name for your new website you don't have to do this step right now if you're not yet certain on what domain name you want to choose it doesn't have to be for this video it can be for your own portfolio or for your future clients in this case i'm going to switch to com and go for something like modern dash business dash website again we just need something simple in this case and i can click search this domain is available and we can click continue with that said we are done with our setup we can click finish and we are ready to start building out our application and there we go our setup is being initialized as we speak now we'll be able to dive straight into the development and then at the end of this video we're going to come back in here and then we're going to deploy our website to hostinger's fast servers great so we can click manage site and then at the end we're going to come straight back here and finalize the deployment with that said let's dive straight into the code if you've been watching javascript mastery for some time now then you know that we always start from scratch and i teach you every step of the way so we're starting by creating an empty folder on our desktop let's name it bank underscore modern underscore app and then we can drag and drop that folder into an empty visual studio code window you can expand that window and we are ready to start coding out our great application let's go under view and then terminal and we are ready to initialize our react application create react app has been leading the industry in initializing react applications for years now but veed is a new tool that recently came in and it is much faster to create a react application using veet so let's head to vtjs.dev get started and the only thing we need to do to initialize our react application is run npm create vit at latest right inside of our visual studio code we can run that command and click enter of course make sure that you have node.js downloaded and installed if you don't already just google node.js download and install it and then rerun this command our project name is going to be bank underscore modern underscore app you can of course call it however you want to and in this case i'm going to choose react we can also choose just plain react without typescript this time and that's it we can cd into bank underscore modern underscore app and we can run npm install to install all of the needed dependencies as you can see this was much quicker than using create react app on my machine it took only 8 seconds now let's try to run it by running npm run dev in just one second we get our url hold ctrl and then click this link right here and just like that our starter is ready but even more importantly if you check it out a bit you're going to notice that it has a much more minimal config than our usual create react app we only have main app some styles assets and that's about it now that the app is initialized we can start by installing all of the necessary dependencies that we'll be using throughout this video believe it or not we're not going to clutter our package.json a lot there is going to be only one single dependency to build our entire modern bank application and it's not even going to go right here under dependencies it's going to be a dev dependency that's going to help us style our application by quickly going to tailwind documentation we can see that we only need to run a couple of commands to install and set up tailwind we're going to take our first command from here we can go to view and then terminal and then we can stop it from running by pressing control c and then y now you can type npm install dash capital d tailwind css post css and auto prefixer and press enter after that we'll also have to copy the following command and that's going to be mpx tailwind css init dash b and press enter there we go that created our config files so let's set them up let's first go to veet.config.js as you can see this file only specifies that we're using react now when it comes to tailwind.config.cjs it is currently quite empty so down below in the description you'll find a link to a github gist that's going to contain the updated tailwind.config.cjs5 and you can simply copy it and paste it right here i already created for you some predefined styles and these are incredibly simple we just added some colors so we can easily reference them some font families and some screen sizes that's it no logic is happening here you're gonna do everything else on your own and with that said believe it or not we have all of the dependencies that we need so let's set up our main files and assets if we go to main.jsx inside of here we're importing react react dom and also app from app we're also importing the index css and just rendering the app this is good to go now when it comes to the index.css this is where we want to make use of tailwind so again next to that tailwind.config.cjs you'll be able to find another file that's going to be index.css in this file i prepared for us some gradients as you can see right here some basic styles and keyframes but more so we only imported tailwind right here and also imported some fonts everything else is just setting some text gradients great so now we have tailwind setup as well and we have some basic styles we can use now we can focus on app.jsx we can completely delete everything that's in here and we can run rafce that's going to automatically generate a react arrow function for us if this didn't work for you you can go to extensions and then type es7 plus react redux react native snippets you can install that and then you can run rafce and it should work now we have a plane file and as you can see we're no longer importing app.css so we can delete that and we can also delete the assets folder the reason why we're deleting the assets folder is because we're going to have our own so in the description you're going to find a link to a zipped assets folder you can simply unzip it and then paste it right here inside of the source folder as you can see these are mainly some logos icons and assets that we're going to use throughout our grade application it would take a lot of time to find them and we'll be able to reference them from our react application great with that said we can continue by setting up our basic file and folder structure next to main index.css and app.jsx we're going to also have two different folders the first one is going to be called constants and then inside of that constants folder we're also going to have a new index dot js file inside of that file we want to put all of the static text that's going to be shown on the website and when i say static text i simply mean things like these the titles descriptions number of active users as well as some lists like this one or maybe even in the footer we want to have pre-done lists of links so we can simply map through them and not spend time by writing each one by hand this is going to help us to develop our app more quickly and it's also going to ensure that if you give this website to a non-technical user they can simply go into that constants file and change things themselves if they want to so you can find this constants index.js file in that github gist down below and you can paste it i think you can see what i was telling you in here we just have some arrays with lists of ids logos or even some social media icons and lists of links that we want to include in the footer it's just basic plain data but now a user can come to this file and they can change things however they want to they don't have to know how to code they simply need to come here and change something of course this is also useful if you want to transfer this application to use a cms later down the road the design we'll be using today is just one out of countless phenomenal designs created by one week wonders they gave me permission to use this design to teach you how to develop a website based off of that design one week wonders offers many impressive designs so definitely check out their site and dribble pages the link will be in the description but with that said we have everything we need and we are ready to start coding out our great application first we're going to start by creating the structure and the layout inside of this app we're going to import all of the other components and then we'll be able to implement them one by one so let's get started to start creating our layout we can start by creating a div that's going to wrap our entire application that div is going to have a class name equal to bg-primary w dash full and overflow dash hidden of course we need to have something inside of that div to be able to see it so for now let's simply create an h1 and let's say hello world great now if your react functional component simply returns jsx then you can completely remove that return statement remove the curly braces and just have the parentheses right here and then you can do it like this and get rid of one more level of indentation this just looks cleaner great so now let's run our application and see if we can see the hello world in the browser we can open up our terminal and we can run npm run dev let's control click the link and click navigate and there we go we can see just this black rectangle but if we hover over it you can see hello world which means that everything is working properly we just have to add more elements to this layout so let's continue now inside of this div we can remove the h1 and i'm going to create one more div this div is going to wrap our nav bar and it's going to have some special styles i created a file that has a lot of styles that we'll be using throughout our entire application and trust me when i tell you this is the last file that i'm going to give you access to everything else from now on you're going to code on your own i just want to provide you with a few files to get us up and running so you can learn as much as possible in as little time as possible so in that same github gist you'll be able to find a style style.js file which is going to go right inside of our source you can copy it from there and paste it right here as you can see we have some styles which are going to help with the layout and some basic headings paragraphs flex centers flex starts and so on these are just collections of couple of different class names that are tied to one single string so it's a lot easier to use them so now let's go back into our app and right here let's import those styles so we can say import styles from dot slash styles and now inside of this div we can say class name is equal to that's going to be a back tick and then dollar sign and curly braces styles dot padding x and now if you're wondering what this does is you first have to fix this mistake i've done and that is going to be just coming from style right here now you can control click it and you can see the padding x essentially it's going to say padding x is 6 it's going to give it some padding and on smaller devices it's going to give it some more padding that's essentially it now we can add an additional class name such as styles.flex center inside of there we want to have one more div and this div is going to have a class name and then again it's going to be backtick dollar sign curly braces and then styles dot box width again if you're interested in what this class does simply click it and you can see that it gives it a full width now inside of there we want to render a navbar later on this is going to be a navbar component but for now we can leave it as a basic text so this part right here forms our navbar let's add an empty line right here and let's continue with our next step which is going to be our hero section the main part of our application we want to have a div and we want to give it a class name that's going to be again dynamic first we want to say bg-primary for background color and then we want to say styles dot flex start one more time we're going to have an inner div and this div is going to have a class name equal to again a dynamic styles dot box width and inside of there we want to render our future hero component and a hero is just the main star of the show in our application a hero is this part that you can see right here everything that is visible as soon as you load the page with that said we can move to everything that is below the hero and just to simplify the process we can duplicate what we have here so that's going to be almost the same that's going to be bg primary styles flex start and we're just missing one that's going to be styles dot padding x there we go and now in there we have box with but this time instead of hero we want to render all of our different components so that's going to be stats as in statistics for our bank we want to have the business section we want to have the billing section as well we need to have a card deal section a testimonials section clients section click to action section and finally a footer section all of these elements which are right now basic text elements we're going to transform into real components so we can dive into them and we can actually code them out so let's do just that we can right click inside of our source folder and create a new folder called components react is all about components reusing them and making sure that everything is as readable as possible every component needs to do its own thing so let's create the basic structure for all of the components that we're going to use throughout this entire application that is going to take some time up front but trust me it's going to save us a lot of time in the future so let's create our first component which is going to be called billing dot jsx as soon as it opens we can run rafce there to create a basic structure and we can move to our next component that's going to be business.jsx again rafce and move to our next component we have a button component dot jsx rafc e and move forward you get the point i'm gonna keep doing that and keep repeating that for all of the components that we're gonna be using the next component on our list is the card deal dot jsx component and again you can run rafce the next one on our list is going to be the client section jsx you can run rafce the next one on our list is going to be a cta.jsx and you can run rafce again the next one on our list is going to be the feedback card dot jsx and again we can run rafce then we have the footer so we can run footer.jsx and then run rafce next we have the get started section so we can say get started.jsx and run rafce after that we have our hero section our main section jsx and we can again run rafce then we're going to have our navbar a really important component of course and we can run rafce we finally have our stats dot jsx to see what our bank has done throughout the last period and finally we have the testimonials dot jsx again run rafce great so now if we go back into our app we can import all of these components for example we can say import navbar from that's going to be dot slash components and then navbar like this and now we can repeat this for the hero section as well so we can say import hero from hero but as you can notice right here we have quite a lot of components so our imports would take more lines than the actual code itself and that's not something you want to do it would look something like this that's not good so there's a little trick that i want to show you if you create a new index.js file inside of the components that file is going to export all of the components in one line but of course to be able to export them we first have to import them right here so we can say import navbar from navbar and just to speed this process up i'm going to provide this index.js file to you in that github just below so you can simply copy it and paste it right here as you can see we are importing all these components and then we are then exporting them from the index file now what this is going to allow us to do is to go back and instead of importing every single component in its own line we can now say import navbar but inside of the curly braces and that's going to be coming from components only components and now you can add to this line every other component import as well so in our case that's going to be navbar hero and i'm going to copy all of these and paste them here because we want to import all of those as well but i'm going to put them in one line so it's easier to read there we go as you can see i have line wrapping turned on in my settings so now it's going to show up nicely right here and this is a neat little trick that you can use to make the code of your react and nexjs applications more readable if this is something that you found interesting i would suggest checking out the filmpark course on the js mastery pro platform it teaches you how to code using react from a beginner to a professional level so just click the link in the description and a special youtube discount will be automatically applied to you i'm looking forward to seeing you in the course but with that said let's proceed with the development now that we have all these components imported let's transform these text elements into actual components let's double click the first word and then let's hold the alt key and then keep double clicking on each new word to select it now we're gonna do some visual studio code shortcut magic okay you have everything selected now press your ctrl key and arrow left to move to the left side of the word then open up the opening tag hold ctrl and then press arrow right and now close the tag with this simple trick we instantly turned all these text elements into components if for whatever reason this didn't work for you just manually add the opening and closing tags to every single one of these components this is also something that we teach in the film park course but with that said we now have the basic structure and let's check out our app in the browser as you can see right here it is just an empty black screen but if we select it you can see that we have our components right here now we created the entire structure i know it took some time but now we are ready to start developing this beautiful modern bank application so let's go back into the code and let's get started by control clicking to move into our navbar component navbar is the first on the list now that we're finally starting to code we can close all of our files by holding ctrl and then pressing w a couple of times and let's go back to our navbar there we go so now we can open up our browser side by side with our editor so that we can see the changes that we make live and there we go on the right side of our display we have our browser and then on the left side we have our visual studio code now of course before we start creating our nav bar right here we can compare it with the finalized app i have open but it might be even better to start comparing it to our design because that's the primary thing we're learning here how to transform a design into your react application there we go i've opened the design in my browser and i'm gonna also share the link with you so that you have it open as well while we're developing this application together so we can first zoom in on the nav bar we can see the photo right here and then on the left side we can see some links so let's go ahead and code out the navbar first what we can also notice is there's quite a lot of different assets so if we click right here we can select that you can see that is the robot hand we also have this asset right here which is a little card and all of these images right here if you're working for some companies that have more money or better clients you're going to collaborate with some great designers and if you're lucky they're going to provide this design with you and then you'll be able to just focus on coding but in some cases unfortunately you'll have to be both the designer and the coder as well but thankfully in this case we have prepared for you a phenomenal design so you can use it and you can code along just as we are as you know i've already given you access to all the assets so when it comes to design we'll be just referencing the styles and the overall look and feel of the website so now let's go back to our site and let's start with the navbar we can first import the use state hook from react and we can also import a couple of assets that's going to be close logo and menu coming from dot slash assets alongside the assets we're going to also import nav links coming from dot slash constants now if you want to see what these are simply ctrl-click them and you can see that it is an array containing a list of objects that have the id and the title these are our nav links great so let's start coding it out we first are going to have the html5 semantic nav tag let's also give it some class names such as w dash full flex padding y dash 6 justify dash between items center and a special navbar style now let's go back to our website and let's save it now as you can see we immediately got a lot more height to our navbar and if you're wondering what do those styles do such as w dash full flex py6 justify between and so on these are all tailwind utility classes and tailwind is used to create elements such as this card right here really quickly just by adding those class names that's the whole point and that's why we're using it if you're interested in what a specific class does go to tailwind click docs and then simply use this search at the top right we can search for w-full and we can see that it sets the full width that's it really simple don't over complicate things saying oh what is this full width what is this py6 simply go to tailwind docs and search for it that's all that you have to do and that's what i always teach on my js mastery.pro courses you need to be able to read docs on your own that is the only way on how you're going to become a proficient and independent developer i can only teach you so much i can show you how to build beautiful websites like these but at the end of the day you need to be able to read through the docs on your own and to be able to come up with something new with that said let's continue now inside of this nav we want to render an image a self-closing img tag that's going to have a source equal to logo and here we go who bank let's also give it an alt tag equal to who bank and let's give it a class name equal to that's going to be w dash in square brackets 124 pixels like this and we can also give it a height so that's going to be h dash and then inside of square brackets 32 pixels there we go so now we have a specific smaller size who bank logo now we want to have a ul an unordered list and that ul is going to have a class name equal to list dash none on small devices we're going to make it flex usually it's going to be hidden because this is only our mobile map bar below later on we're going to create our desktop nav bar now let's also add the justify dash end item stash center and flex-1 inside of there we want to map over our nav links so we can open a dynamic block of code by using the curly braces and then say navlinks.map we're going to get one nav link and an index and we want to instantly return something remember when you're instantly returning you want to have just a parenthesis here and not a curly brace we want to return a list item and every list item has to have a key because we are inside of a map so let's set the key to be equal to nav dot id let's also give it a class name and that class name is going to be dynamic so we can do it like this and say font dash poppins and before we add any new class names let's simply render what should be in there and that is going to be an a tag that's going to have an ahref equal to dynamic string off that's going to be hash or pound nav dot id so we want to go to that specific point when we click on that link we want to close it and in there we want to render the nav dot and that's going to be nav dot title now if we save this we cannot see anything because the text right now is dark we have to make it light so let's add a couple more class names let's add a font dash normal let's add a cursor dash pointer now we might be able to see them there we go you can see that the cursor turns to a pointer let's give it a text dash and then inside of square brackets 16 pixels and now we're going to do something different we need to know which tag is currently active and now we can simply give it a text dash white color there we go this works perfectly of course we'll have to give it some margin so let's say margin right is going to be 10 there we go but now the client is going to have the margin right as well and we don't want to have the margin on the last element so we can open a new dynamic block and say if index is equal to navlinks.length minus 1 this means that it is the last element then we want to give it a margin right 0. otherwise we want to give it a margin right of 10 as we've done before and now we can properly close this if i use the right sign right there there we go and we can remove the margin right from there perfect so now we kind of lost it for a second there let's see margin right 10 and we have to add a space right here to separate it from the text 16 pixel and there we go this is now looking like a modern nav bar this is great now what happens if we go to a mobile view of course we're making our applications mobile friendly you can see that it completely disappears so now we're going to create a new list of items only for mobile devices below our ul so right here we want to create a new div element this div is going to have a class name on small devices hidden usually flex flex dash one justify dash end and items dash center now inside of there we want to render an image this image is going to be a menu image where we can click it to expand the menu so that's going to be a self-closing image tag with a source equal to now it's going to depend do we want to open or close the menu and for that we can create a new use state so right here at the top we can start typing use state and then use the arrow down to select the use state snippet we can start typing immediately and we're going to call it toggle set toggle move by using the tab key and then at the start that's going to be set to false so the start it's toggled to false now if the toggle is turned on then we want to show a close icon otherwise we want to show a menu icon let's save it and there we go we can see a beautiful menu icon right here now let's also apply a couple of other properties to our image tag for example let's add an alt tag equal to menu let's give it a class name equal to w dash and then 28 pixels like so height is going to be 28 pixels as well and then object dash contain if we save this there we go that's going to look better and this just sets the object fit to contain there we go this is looking good now once we click that we want to change the toggle so we can say on click we want to have a callback function and we want to set the toggle to be equal to now this is not the right way to do it in react you should never update the state using the previous version of that same old state if you want to change the state using the previous version of that same state then you need to create a callback function that looks like this so set toggle and then you call it prev and then you say not prep this way react makes sure that it keeps the state up to date and now if you click right here you can see that it actually changes the only thing we have to do right now is actually open the mobile menu so still inside of this div but below this image let's create a div that's going to serve as our menu this div is going to have a class name it's going to be dynamic so we want to check right here if toggle is turned on if it is then it's going to be a flex container if it is not turned on then it is going to be hidden there we go now we can add a couple more classes so we're going to have a padding of 6. bg black dash gradient position absolute top dash 20 right 0 margin x 4 margin y 2 minimum dash width is going to be 140 pixels make sure to just do it like this min dash w dash and then 140 rounded dash xl and then sidebar now if we save this and if you click on this icon right here you can see a menu nicely animate there we go of course now we want to create a new ul inside of that and that ul is going to be quite similar to this ul right here so we can simply copy this entire ul and paste it below there we go and we can indent it there we go let's expand this a bit and now let's see what do we have to change this time it's going to be list dash none but it's going to be flex usually and we don't have to say on small devices no flex or hidden or something like that and then everything else will almost remain the same you can see now we have our list but it looks like it is on desktop we want to make it show in a column so we can say flex dash call and there we go we are almost there remember we were messing with the margins before so let's go down to the li we're going to stick with the font pop-ins font normal cursor pointer text 16 but now instead of margin right we're gonna do margin bottom so let's do mb dash four and let's save that and there we go we have a beautiful menu that pops up and we have all of the links right here that is great and now if we close this we have a beautiful desktop and tablet and laptop menu as well as always we strive to create websites that are responsive on all devices that is what web nowadays is most people nowadays visit all the websites through mobile so we want to make sure that they are as responsive as possible again i'll just have to mention the film power application from the film park course there we tried really hard to make it as responsive as possible on a lot of different devices and i really mean a lot as you can see on mobile it feels like a native mobile application but now as you expand it to something like a tablet we have two movies per row now if you expand it even more to a laptop that's gonna be three and as larger you go the more movies you can see and it is responsive on all devices it's just something i wanted to show to you again by watching this video you get a special discount by clicking the link below with that said we can now get back to developing our application the navbar is now completely done we can close that file go back to our app and we are coming to the main star of the show that is developing the hero section so let's control click it and we are ready to start coding to start coding our hero section we can first collapse our browser to the right side of the window and there we go now we can see what we're doing right inside of here we don't even need a return statement because we're going to return our jsx instantly so simply use parentheses inside of curly braces right here on line three now instead of rendering a div we're going to render a section element inside of that section we're going to give it an id equal to home so we can scroll to it we can also give it a class name equal to and now this is going to be a dynamic class name so it's going to look like this first let's import some styles we can say import styles from dot slash styles we can also import the discount as well as the robot and these are coming from dot slash assets instead of styles it looks like it's supposed to be style there we go so that's going to be all that we need for now now let's make this section a flex container on medium devices it's going to be flex dash row and usually it's going to be flex dash column let's also give it a styles dot padding y that's going to instantly add a bit more space now inside of there we want to have a div and just to show you what we're creating it's going to be this section right here on the left side we're going to have some text and on the right side we're going to have this image right here so let's start this div is going to have a class name equal to it's going to be a dynamic class name of flex-1 styles dot flex start flex dash call on extra large devices padding x 0 on small devices padding x 16 and usually padding x x6 this is to make sure that it looks good on all devices now inside of there we're going to have just one more div and this div is going to have a class name equal to flex flex dash row items dash center padding y so p y and then that's going to be inside of square brackets 6 pixels padding x 4 b g discount dash gradient and rounded dash that's going to be 10 pixels and finally mb-2 for margin bottom now inside of there we're going to render this component right here 20 discount for one month account so let's start with that immediately we first need this little icon right here so let's do just that let's render an img tag and that's going to be source is equal to discount we can also give it an alt tag equal to discount and let's give it a class name equal to now we can open it up right here and inspect it you can see it is 32 pixels wide and 32 pixels high so let's do just that we can say w dash 32 pixels and h dash 32 pixels as well now if we save this there we go you should be able to see it it's quite dark but it is there now let's add two different spans span right here and that span is going to have a class name equal to text white inside of there we can say twenty percent as it is on this design right here twenty percent then we have discount four so after the span let's do it right here discount four we can then add one empty space like this then below that one month is also going to be in a span so we can duplicate that and say one month and then one more time outside of the span we want to say account there we go so now if we save this we can barely see the text in between but that's because all of these pans and text elements should have been in a paragraph so let's create a p tag and now let's drag and drop all of these elements inside of that p tag of course we need to give it some class names such as class name is equal to that's going to be a dynamic class name styles dot paragraph and also ml-2 for margin left and there we go this is already looking just a bit better but it seems that there are no spaces right here after 20 so if we put this discount 4 on the same line then it's going to apply the space same thing for the account there we go so this is now looking great we're starting to create our great design now after that now we're coming to the main part which is the next generation payment method so let's go outside of this div right there and just below it there we want to create a new div and this div is going to have a class name equal to flex flex dash row justify dash between items center and w dash full now inside of there we want to render that big h1 the heading that heading is going to say exactly as it says right here so we can even copy that and paste it in there the next payment method and we also need to get that generation which is in a different span element so let's do step by step first the next then we want to add a break tag because we want to show something on a new line there we go break tag and we can give that break tag a class name we can say only show on small devices so on small devices exist and then usually it's going to be hidden now after that we want to add a space as we did before and in there we want to have a span to render that generation into that span we can give a class name of text dash gradient and let's say generation we also need to provide a space after that there we go so now if we go back you can see generation but we can't really see anything else let's indent this properly and as you can see we didn't really add any styles to our h1 so let's do that right away we can say class name is equal to flex dash one font dash pop-ins font-semi-bold ss that's going to be for stroke and there we can say text dash and we can do 72 pixels text dash and then that's going to be 52 pixels that's going to make it really big and then we can give it a text dash white there we go the next generation payment method this is looking beautiful i've got to say recently i've been using font poppins and it is just great and we can also give it the ss colon leading dash and then we can do something like 100 pixels like this there we go so this is just going to change the height between the words and we can also do leading dash and then that's going to be 75 pixels now below that we are gonna need the get started component that gets started is essentially this button right here and that button can be created as a separate component as it does have quite a few styles to create this nice circle with the icon and the text so below this h1 we can create a div and that div is going to have a class name equal to ss and then flex it's going to be hidden and on medium devices margin write 4 and usually margin write 0. now inside of there we can render that get started component as a self-closing tag and now we can import it so to import that get started we can say import get started from dot slash get started and now if we go back we should be able to there we go it is here it's hiding we of course have to implement these styles for that so let's do it properly let's control click into the get started and let's start implementing that cool circular button component so to get started we can of course import these styles from dot slash style like this and we can also import the arrow up coming from dot slash assets now inside of there we can again instantly return something so it's going to look like this and that something is just going to be a div but now that div is going to have a class name equal to and we can go back to see what we're doing so right now it is hidden class name is going to be a dynamic class name so it's going to be styles dot flex center and then we're going to also give it a width of 140 pixels and also a height of 140 pixels now after that we can make it rounded dash full and give it a bg blue dash gradient now if we save that we're going to have a beautiful gradient circle now what we can do is also give it a padding dash and then let's do something like 2 pixels that's going to just add some space inside of that circle for the text and let's also make it a cursor dash pointer so now it seems clickable now inside of there we're going to have a couple more divs the first inner div is going to also have a few class names such as also dynamic styles dot flex center flex dash call bg dash primary w dash and then that's going to be 100 and also h dash 100 we can also make it rounded dash full now if we save that you can notice that everything disappears but we just have this padding that we left before which is 2 pixels and that serves as our border now inside of this div we're going to have one more div and that div is going to have a class name equal to again it's going to be dynamic so styles dot flex start and also flex dash row finally inside of that div we're going to have a p tag and that p tag is going to have a span tag inside of it and inside of that span tag we can say get so we are trying to achieve this get started so we first have the span let's style it a bit we can give this p a class name equal to font dash poppins font dash medium text dash 18 pixels leading dash 23 pixels it's still going to be hidden because we have to give the span a class name of text dash gradient there we go so now we can see get right there but we're not going to stop there below this span element we can render a self-closing image tag with a source equal to arrow up there we go we can also give it a class name equal to w dash 23 pixels and also h dash that's going to be the same 23 pixels we can also give it object contain there we go so now we also want to give it an alt tag of something like arrow and we're missing this last started word so let's add that right below we can copy this entire p tag and just paste it below this div right here so that's going to be here we won't need the image though so we can remove the image and now we can say start it right there now you might be able to notice that our arrow is not going in the right side of the get as it should be so let's check it out we have this div right there that says styles dot flex start and then we are adding the flex row in there now inside of this p tag we have a span but the image should go outside of that p tag so that it actually appears nicely in a row and there we go this is already looking so much better it's actually looking exactly as it does on the design we can maybe give this b just a bit of margin right something like 2 and there we go i think we hit the design perfectly great so now we have this get started as well we can close the get started component and we can go back to our hero because we're not yet done with the hero section now we have to do this text right there then we have to do all of these numbers right there and then finally the school robotic arm with the card payments so let's do that right away we're going to go down two divs so this is one two below to get started and there we can create another h1 this h1 is going to be quite similar to the first one so let's copy all of the class names from the first one and let's give them to this h1 now we won't be needing the flex one font poppets is going to stay font semi-bold is going to stay the text is going to be a bit smaller something like 68 here and then 52 there it's going to be text wide and then leading is going to be the same we just want to add the w dash full because we need this to go full width now inside of there we can say payment method there we go and that is appearing right here and it seems that i didn't need this payment method right here because we did it below the get started yep that's my bad so if we were to do this payment right there then we couldn't fit the get started button in the middle so what we have to do is remove this payment right here above the get started so let's do that right now there we go so now we have nicely the next generation payment method exactly as it is on the design great so now below this h1 we want to have a p tag so let's create a p tag that p tag is going to copy the text that we have on the design so you can double click it and paste it okay that's good and finally let's give it some class names to actually make it visible our class name is going to be dynamic styles that paragraph of course we have to put it inside of the dollar sign and curly braces and then max dash w dash and then 470 pixels and also margin top dash five there we go so now we're getting a lot closer now let's do the right side which is going to be this robotic arm but we also have to implement these gradients i hope you can see those circles right there and splashes of light that are coming behind the image so let's do them first now we have this h1 and we have this p tag and all of them should be in this div right there now we can go one div below and create a new div that's going to be the div for the right side of our screen now inside of there we're going to render our image so immediately we can render a self-closing image tag that's going to have the source equal to robot let's save it it automatically appears right there let's give it an alt tag equal to billing and let's add a class name equal to w dash 100 percent and also h dash 100 percent inside of square brackets let's also give it a relative position and z index of 5 to make it appear above our gradients once we add them there we go looking good but you can see that we are missing something it's if we expand this window right here it's going to show on the right side but still we're missing those gradients which really make it pop so let's do just that let's add the gradients we can do that by adding a series of self-closing divs every one of those divs is going to have a class name and it's going to be positioned absolutely we can set the z index of the first one to zero and we can give it a width of 40 percent we can also give it a height of 35 percent and then we can say top zero so this is going to appear from the start of the page and then finally we can give it a class of pink underscore underscore gradient now if we save this you can see this cool pink gradient coming from the top and if we go to our design you can essentially select this gradient and you can copy its styles which are listed right there in this case i already provided them for you in the styles so if we search for the ping gradient there we go you can see it inside of the index.css it is a linear gradient that is simply copied from here great so now let's add other gradients as well to fill this image up we can go back and we can copy this two times now for the second one we're going to set the z index to one we're going to give it an eighty percent of width and we're going to also give it an eighty percent of height let's make it rounded because this is going to be circular so round the dash full and then we won't be needing top zero but rather bottom is going to be 40 and then finally instead of ping gradient it's going to be white underscore underscore gradient there we go so this is a really strong one and then finally we can complete it with the last gradient which is going to have a z index of zero w dash 50 h-50 and then right dash 20 to position it also bottom dash 20 and then blue underscore underscore gradient we don't need the pink right there there we go we're combining a couple of different gradients and before we expand it to fully see it let's just do one thing that's going to make a difference on mobile devices right now you can notice that the get started is coming on the right side right here but if we switch it to iphone 12 the get started disappears because we want to show it below that makes more sense from a design standpoint so let's add that last div and that's going to be below these divs with gradients so we want to create a new div that div is going to have a class name it's going to be dynamic of ss hidden so usually we want it hidden but then it's going to be visible on mobile devices so flex center and there we want to render the same component we created before that is the get started component now on mobile devices we have this beautiful get started button below the robot arm and then if we switch to desktop let's expand it to see it in its full glory and there we go now it looks like we definitely messed something up with the gradients they are way too powerful looking at the design they should be more subtle like this and on our finished side you can see that they're much more subtle so what we can do is look into the changes and make sure that our gradients are as they should be so we can scroll up we have this div right there and it seems to me we just missed adding the styles to this div so let's add a class name let's make it dynamic and let's say flex-1 let's add a flex so they appear in a row let's add the styles dot flex center and also we can give it on medium devices margin y 0 usually margin y 10 and it's going to have a position of relative now these gradients are going to appear only behind the robot arm and this is looking much better great this hero section is looking like it belongs to a really modern and clean web application we have this nice get started button and if you want an extra challenge you can kind of animate this button a bit and do something once the user hovers over it but even without that this is a beautiful hero section the next section on our list is going to be this line right here where we have different aspects of our website or should they say our company we have 3 800 active users 2300 plus trusted by company and 230 million in transactions let's do that first and then we're moving to these kind of repetitive sections that i'm going to show you how to make incredibly reusable great so let's move to this line first we can do that by collapsing our browser we can close our hero and go back to the app and then just by following the structure we're moving to the stats the stats are that line that covers all the important stats to start creating our stats we can first import the stats array coming from dot slash constants and we can also import these styles coming from dot slash style now if you're wondering what the stats are we can simply control click them and you'll be able to see that it is an array with three different objects and each object has a title and a value if we compare this with a design you can see that every object represents one key and value pair the number alongside a description explaining what that number does so i simply took those values and explanations put them inside of an array and now we're going to map through them so we can first remove this return statement as we'll be returning our jsx immediately so this is going to provide us with a cleaner look and now inside of the stats we're going to turn this div into a section and we're going to give it a class name that class name is going to be dynamic so styles dot flex center we can also give it a flex dash row flex dash wrap on small devices margin bottom 20 usually margin bottom six there we go so now you're not going to see any change just yet but now let's actually map over those stats so that's going to be stats.map we get each individual stat and then we want to instantly return something for each stat that something is going to be a div and that div is going to have a key equal to stat dot id and it's going to have a class name the class name we can do later because the most important thing is that we can actually see the data so first we're going to have an h4 element right there and that h4 is going to render the stat dot value that is going to be the number right here and then we of course need the stat that title as well so below the h4 we can render the p tag that's going to render the stat dot title and again these are just coming from this stats array now that we have those they are indeed here but we cannot really see them so let's apply some styles most of the styles are going to be quite similar but they'll be different in sizes first we can add the styles for the h4 so let's say class name is equal to font-poppins font-semi-bold on extra small devices text dash 40 pixels usually text 30 pixels on extra small we can set the leading to be 53 pixels like this and then usually the leading can be set to something like 43 pixels and text dash white so now you can see these numbers right there but of course we have to style the p tags as well so let's copy all of the class names from the h4 and let's add them to the p tag but we're going to modify just a couple of things instead of font semi-bold it's going to be font normal instead of 40 pixels it's going to be 20 for the extra small text usually it's going to be 15. when it comes to leading it's going to be 26 right here for the extra small and then usually it's going to be 21 and instead of text white we're going to say text dash gradient it's going to be uppercase and it's going to have a margin left of 3. now if we save that you can see this is already looking much better almost as it does on the design but of course we have to style the div so we can go back to our div and now that we can actually see our elements we can give it a class name off that's going to be dynamic let's do flex dash one that's immediately going to show them one by one we can also give it a flex property justify dash start items dash center flex dash row and then margin dash 3 or m-3 and as you can see this really made our homepage pop now we have the entire first view once the user comes on the screen they can see this beautiful image alongside the get started button and they can see all the stats immediately above the fold once they first join so this is looking great and believe it or not with that we're completely done with our stats we can go back to the app and focus on the business part next if you look at the design the business part is going to be this subsection right here it's going to have some text on the left side and then it's going to have some cards on the right side so let's focus on developing that right away to start coding out our business section we are going to import a couple of things so let's start by importing the features coming from that's going to be dot slash constants we can also import these styles but also comma layout and that's going to be coming from dot slash style and we can also import the button component which is coming from that's going to be simply dot slash button now let's explore what we're importing here we can control click into features and you can see the features are similar to our stats it's going to be an array of different cards so we have feature 1 which is going to be rewards and in there we have an icon we have a title and content you always need to visualize how something on the screen is going to look like what properties is it going to have we can clearly see that in here we have a title we have content and we have an icon and then everything else is the same in react you have to think in terms of reusability how you can reuse specific components now let's go back to business no pun intended there and we can explore what this layout is so if we control click the layout you can see the layout is simply containing some other styles for the section section reverse section info and so on and if we look at the layout right here you can notice that it's simply some additional class names instead of writing flex md flex row flex column style spatting y we can simply say section and save us a lot of time so let's go back and let's start implementing our business first we can turn this into a section and we're going to give an id to that section that's going to be features let's also give it a class name equal to layout dot section there we go now inside of that section we're going to have a div and that div is going to have a class name equal to layout dot section info you can see how much simpler this is we don't have to write a lot of class since we prepared all of our class names right here and then we can also do an h2 keep in mind right now we're creating this part right here and that h2 is going to say exactly as it does right here so we can copy the entire text and we can add a break tag before wheel as you can see right here so let's say break tag and to that break tag we can apply a class name equal to on small devices block which means show it usually hide it because we only want to do this on smaller devices now what we can do is save this and go back and you can notice that we cannot see anything that's because we haven't provided the h2 classes so right here let's say classname is equal to styles.heading2 and there we go we immediately provide those styles now let's do the p tag as well so just below we can have a p tag and from the design we can copy what this text right here says it looks like it is written in a different font which i don't have right here so it's not allowing me to copy so i'm simply going to change it to some that potentially all of us have so if i replace it right here this should be good and now we can copy it there we go and we can change the class name to classname is equal to it's going to be dynamic styles.paragraph and let's save that if we go back you can notice that this text expands quite a bit right here usually for something to be readable it needs to show in blocks like these the text must not have a lot of width so what we can do is we can apply a new class name max dash w dash 470 pixels if we save this this is going to be much more readable now and let's also divide it from the text by giving it a margin top of 5. there we go you do the business we'll handle the money as they say yes this website is really nicely done it has some nice text elements some nice stats nice images this is how you should be creating your websites for clients and while we're on the topic of lending clients and lending job opportunities our next cohort of the jsm master class experience is starting really soon so if you go to js mastery that pro click on the master class experience you can read more about it but essentially we're going to help you to land your next job in three to six months time so if that's something you're interested in definitely check it out but with that said let's go back to this beautiful bank application now we have to add a button right here and then after the button we're going to show these cards on the right side and i'm going to show you how to make them completely reusable but let's take it step by step below the sp tag we can render a self-closing button tag that button for now is going to be just an empty button component let's provide a prop to it called styles and let's give it a style of mt 10 margin top 10 because we want to divide it a bit from this element right there now we can control click into it and we can create a new generic button component so again we're making this as reusable as possible to this button we've passed a prop called styles so we can get that immediately and the right here we can simply render a button component that button is going to have a type is equal to button as buttons usually do we can give it a class name which is going to be dynamic padding y4 padding x6 and we can also immediately give it a bg dash blue dash gradient now if we save this there we go we have an empty button we can add a text in between get started there we go already looking more like a button let's also give it a font dash bobbins let's give it a font dash medium let's also give it a text 18 pixels to really make it pop let's give it a text dash primary outline dash none and we can also render all the styles coming from our props there we go so now we have our button done as well let's get back to business and we can create the next part of our business section which is going to be the feature cards so first of all let's create a new div and that div is going to have a class name equal to that's going to be a dynamic string of layout dot section img and also flex dash column because we want to show these in a column inside of here we can map through our features so we can say features dot map we get one individual feature and we can also get the index of each card there we go so now what do we want to render for each card well let's make our life easier and let's create a reusable feature card component since this feature card will only be used inside of this file let's simply create it above right here above our business component so we can say const feature card is equal to a regular arrow function component with an instant return inside of there we can render a div and for now let's simply try to pass all the props so which props will we need well let's simply provide a key first of all since we're mapping over it which is going to be equal to feature.id and then let's spread all of the feature properties like this that way it's going to contain all the features that are inside of our feature object and we can also give it an index is equal to index great now if we look into our feature we can know that we have an icon title content and the id so let's destructure those from props that's going to be icon title content and the index there we go let's immediately try showing the icon just so we know that something works so we're going to have a div inside of this div and there we can render a self-closing image tag that's going to have the source equal to icon alt can say something like icon as well and if we save this you can see three different icons which means that we created a reusable component that we're now mapping over and for now it's showing just different icons but soon enough we're going to add a text as well let's also give a class name to these icons so that's going to be w dash let's do 50 percent h dash also fifty percent and let's also give it object dash contain there we go now let's style everything else as well first of all we have to add class names to our card div remember we're creating this part right there now what we can do is we can give it a class name it's going to be dynamic so like this flex flex dash row padding dash 6 rounded dash 20 pixels you can see it is just a bit rounded around the corners now we also want to give it some margin bottom to divide this card from this one and this one from this one but if it is the last card then we don't want to provide it a margin bottom so what we can do is say index is not equal to features dot length -1 so if it is not the last one then give it a margin bottom of six usually give it a margin bottom off that's going to be zero margin bottom zero there we go and we of course have to close it right there let's see yep i should have closed it there i should have closed it right here there we go let's just properly close this and we should be good to go that's good and let's provided one last class name which is going to be feature dash card now if you go back you can see that if we hover over it it seems like a card it is like a box that has an icon in there but let's style it just a bit more this div containing the icon is going to have the class name equal to and let's make it dynamic that's going to be w-64 pixels like this it's also going to have an h dash 64 pixels if we save this okay now we can see those icons also rounded dash full let's also give it a styles not flex center and bg dash dim blue there we go so now we have a circle around the icon and we have something that looks more like different cards but of course once we add a title on the text it's going to look more like this so let's add that immediately below this div that contains the image we're going to create another div this div is going to have a class name equal to flex-1 flex flex dash call and margin left 3. inside of there we want to render an h4 and inside of there we want to render the title we want to repeat this process for the p tag as well and there we want to render the content and as always it's not going to be visible immediately but if we hover we can see that something is there so let's apply class names to rh4 that's going to be font dash poppins font dash semi-bold text dash white text dash 18 pixels leading dash 23 and let me save it before adding leading so you can see what that does there so now leading dash let's do 23 pixels it just adds a bit more space and then finally margin bottom one there we go and now let's copy that same class name let's add it to our b tag and let's change just a few things that's going to be changing the font from semi-bold to normal we can also change the text color to dim white like this and change the text size to 16 pixels leading can be something like 24 and there we go now we have these cards looking exactly as they do on the design and believe it or not with that we're done with the business section so now if we expand this take a look at this we have a beautiful hero section and then we have a phenomenal feature section so we have a list of features and benefits that this platform provides every single website should have this great and another call to action right there the next section on our list is going to be this one which is quite similar we have the text and then the text below two different buttons and then the images this time are on the left side opposed to having the cards on the right side just to break that same structure you can see we have left right right left and then left right one more time perfect so let's dive into our next section let's go back right here expand our visual studio code and if we go back to our app you can see that the billing is going to be the next section and that is exactly this part right here billing there we go so let's implement the billing next of course we're going to start with the images since they are on the left side to start with the billing we're of course going to import a couple of assets and those are going to be apple bill and google and these are coming from dot slash assets we're also going to get our styles as well as the layout coming from dot slash style now immediately in there we can instantly return our jsx so let's simply structure this properly and now we can turn this div into a section this section is going to have an id because we can scroll to it and let's call it product and let's give it a class name is equal to that's going to be layout dot section reverse so this is the part where i told you we're making something dynamic we have a section reverse if we look into it it's the same thing but we reverse the column so that means that we're showing things from left to right or on mobile that means that we're showing the text first that is the key part right there i'm going to show you what i mean really quickly once we develop this section and let's go back now and let's add something inside of that section that's going to be a div and that div is going to have a class name of equal to layout dot section image reverse inside of there we want to render our image so this image is going to be a self-closing image tag with a source of bill alt is going to be billing and we can give it a class name equal to let's do something like w dash 100 h dash that's going to be 100 and let's do relative as well as a z index of 5. now if we close this and save it if we scroll down you can see we have our beautiful image right here but there is something you might have not noticed if we look at the design again there is this slight little grayish gradient happening right here so let's add that gradient as well it really makes the image pop and it makes it appear like these 3d elements are flowing on top of the screen right now it is just an image on the black background so to add those gradients we can add two self closing this just like this let's give the first one a class name equal to absolute z dash three minus left and then dash one half like this also top zero to appear on the top w dash fifty percent h dash fifty percent like this and then rounded dash full and also white underscore underscore gradient now if we save this we already can see it appear just slightly but it is there now we can copy this entire div paste it below and change just a couple of things we can add a z index of zero right here we can keep this left instead of top let's add a bottom of zero w and height can remain the same rounded full but instead of white gradient it's going to be pink gradient so let's change this white into pink there we go so now they really nicely kind of show together and this is looking great now let's expand it to take a look and of course the image is way too big so we're going to solve this really soon let's collapse it and let's add our actual text which would appear on the right side it's going to be fairly easy we've already created headings like these and content elements like this one so let's create a new div below this one that div is going to have a class name equal to layout dot section info and we're going to have an h2 that h2 is going to say this easily control your billing you can copy that and we of course have to add that break tag before billing so let's say br class name is equal to on small block usually hidden like this and of course we have to give it a class name to be able to see it so let's say classname is equal to styles.heading2 and there we go here it is and below that we can add a p tag that b tag is going to render this text right there and what we can do is go back we can also give it a class name so that's going to be a class name off template string styles that paragraph also max dash w dash 470 pixels and also margin top five and there we go now when using these layouts as i mentioned before on the column structure when we are on tablet or mobile devices as you can see the text is still showing on top of this image exactly as we wanted that and that's because we use the section reverse if we go into it and check it out you can see that we have this flex column reverse so what that does is usually have it in a row like this show this on the left side show this on the right side but on mobile devices when we go into a column you can see right here the text shows on top and then the image that explains it that's exactly how it should be great so that's just another small tip on mobile devices you're gonna often find yourself using a column reverse great with that said we're just missing those two buttons so let's add them right away going back to our billing we can go below this b tag but still inside of this div we can create another div that div is going to have a class name equal to flex flex dash row flex dash wrap on small devices margin top 10 usually margin top 6 and there we can render a image for now of course you can make that image clickable let's give it a source equal to apple alt is going to be google underscore play and a class name can be something like w dash 128 pixels and again this is simply being copied from right here if you click inspect you should be able to see the exact width and height perfect now going back we can also give it a height of 42 pixels there we go and we can also give it an object dash contain margin right 5 and then cursor dash pointer if we save this you can see our button right here this is the apple button so instead of google play let's say apple store great and now we can duplicate this image change this to google remove this margin right because this is the second element and we can show the google and with that believe it or not we created our billing section and it is looking great now this actually seems like a real website so we can scroll through it we have the features section and we have the billing section as well essentially this is a call to action section where people can download their app on google play or app store perfect this is looking great the next section on our list is going to be this one which again is as you can see quite similar to the first one we have some text on the left we have a button and we have these cards right here so let's get started with that right away by collapsing our browser view and then going back to the app and going into the card deal to start coding our card deal section which is this one right here we can again import a few things we can import the card coming from dot slash assets we can also import these styles that's going to be a default import as well as the layout coming from dot slash style and we can import the button component coming from dot slash button now we have everything we need let's turn this into an immediate return statement and let's turn this div into a section now this section is going to have a class name equal to layout.section it's also going to have a div that's going to have a class name equal to layout dot section info and it's also going to have an h2 there that h2 is going to render this piece of text which we can copy don't forget we have to add that break tag so that's going to be after deal let's add a break tag it's going to have a class name equal to on small devices block and then usually hidden like this now what we can do is also render the p tag below it that p tag is going to render this text and we can give some styles to the h2 that's going to be class name is equal to styles dot heading 2. if we go back we can already see it and we can also give some class names to our p tag so that's going to be equal to a dynamic template string of styles dot paragraph we can also give it a max dash w dash 480 pixels as we have done already so far and we can give it also a margin top five there we go and now we already have a button component created remember from before so we can simply call it and provide a styles is equal to margin top 10. but in this case it seems huge and that's because it should have been just below the p tag still inside of this div element so now if we save this it's looking better now it seems to me that this button right here has just a slight border radius which we can simply check by looking at the inspect tab right here and it does have a border radius of 10 pixels so if we go to this button we can check do we have that border radius right there nope it's not there so let's do you can either do a border radius or tailwind has a built-in rounded property so we can say rounded dash 10 pixels if we now go back and save it there we go this is more like it perfect and now we have to add that image on the right side which is going to be for the card what we can do is go back to the card deal and we can create a new div just below this one this div is going to have a class name is equal to layout dot section img there we can render an img tag with a source is equal to card and alt is going to be something like card and class name is going to be something like w dash 100 percent as well as h dash 100 i think you can start noticing the pattern now if we go back we have our beautiful image right there and if we wanna look at this in its full glory let's expand it this is a beautiful website in this case we don't need to have a gradient because we have this circular image behind our elements so that makes them pop just to provide some diversity but this is looking phenomenal if i may say so myself now we're going to move to the next section which is going to be a bit different it's going to be a testimonial section so in this case we're going to have a heading here content element here and then some cards as you can see we're going to reuse some similar things as we have with these cards right there so in react always try to reuse different elements and notice that there aren't a lot of different colors and fonts and text sizes it's always the same same headings same content elements and then similar colors for the buttons and other accents you always have to stay consistent with your design so with that said let's go back let's close our card deal and let's open our testimonial section because that is going to be our next job to start implementing the testimonials we can of course start with a few imports we can import the feedback coming from dot slash constants we can also import the styles coming from dot dot slash styles and we can also import a feedback card component coming from that slash feedback card this is going to be a component that we are yet to create and again i misspelled the styles it's going to be coming from dot slash style right here now before we start creating the layout let's look what this feedback is again it is a simple array with a couple of objects in this case just three that have name title and then the image that is it so let's use it right here in our jsx we can turn this into an instant return that way we have one less level of indentation so it's easier to look at it and we can turn this into a section we can give that section an id equal to clients and we can give it a class name equal to styles.padding y styles dot flex center flex dash call and relative now inside of there we want to have one div which is going to be a gradient but for now we can leave that empty as we'll be able to add that gradient later on now going further we can kind of add a comment and say to do for for this thing right here below this div that is a gradient we can render another div this div is going to be used to contain this title in this context right here so what we can do is we can give it a class name equal to w dash full flex justify between items dash center on medium devices flex dash row usually flex dash column on small devices margin bottom 16 usually margin bottom six relative and z index of one that way it goes over the gradient now let's add something in there we'll have to take this title so let's add an h1 we can paste the text we can add a break tag again after the r word so we can right here add a break tag with a class name equal to on small devices that's going to be block usually it's going to be hidden and we can also apply a class name to this h1 that's going to be class name is equal to styles dot heading 2. perfect now if we go back we can already see that and below that h1 we can create a div that div is going to have a class name equal to w dash full on medium devices margin top 0 and usually margin top 6. inside of there we can render our p tag that p tag is going to say this text right here which we can copy and paste and now we can give it some class names so class name is equal to that's going to be a dynamic string of styles dot paragraph text dash left max dash w dash 450 pixels and there we go we can see it right here now of course below that we want to map over all of our feedback cards so let's create this card next we can do that below this div and also below this div so let's create one div that's going to contain all the cards it's going to have a class name equal to that's going to be flex flex dash wrap on small devices justify dash start usually justify dash center w dash full feedback dash container relative and also z index of one there we go now inside of there we can actually map over our cards so we can say feedback.map we get each individual feedback item or in this case we can call it a card now we want to instantly return something and we're going to return that feedback card component it is a self-closing component that's going to have a key equal to card.id and there we can spread the properties of a card and we already know what those are so if we check the feedback that's going to be content name title and then the image so now we can control click to go into that card and we can immediately accept those props so right here we can get the content the name the title and the image we can instantly return something there we go and now let's create the look and feel of that card that's going to be a div that's going to have a class name equal to flex justify dash between flex dash column padding x is 10 padding y is 12 rounded dash 20 pixels max dash width of 370 pixels on medium devices margin write 10 on small devices margin write 5 usually margin write 0 margin y 5 and then feedback card and i know there's a lot of styles but if you go to the design and click on this card you can see that we're going to get most of those properties right here such as the border radius colors and so on great so now going back let's add the content inside of there first of all we need to add the image that image is going to have a source and we have to import that source so we can say import quotes from dot slash assets and now we can render the quotes image there we go we have three quotes we can also give it an alt tag equal to double underscore quotes and we can give it a class name equal to w dash 42 pixels h dash that's going to be something like 27 pixels and object dash contain again all of that is coming from figma now below that we want to render a p tag that's going to render the content that we're passing through props right now it's hard to see it so let's add a class name equal to font-poppins font dash normal text dash 18 pixels leading dash 32 pixels text dash white and margin y of 10 and there we go we have those three beautiful cards right there now we also have to add something else and that is going to be this image as well as the name and the title of that person so below our p tag we can add a div for that container that div is going to have a class name equal to flex and flex dash row because the image and the text is going to appear in a row we first want to render the image so we can say img source img coming from props alt is going to be the name of that person and then the class name can be w-48 pixels h dash 48 pixels and rounded dash full to make it into a circle now if we go back we have those beautiful images right there now let's create a div to contain the name and the title right below the image that div is going to have a class name equal to flex flex dash column and margin left 4. the column is for these text elements to appear one below another and margin left is to divide it from this image now we can have an h4 in there and h4 is going to render the name and right below we can render the title but this is going to be in a p tag when it comes to the class names we can copy the class names from the initial p tag paste them onto the h4 and it's going to be font poppins it's going to be semi-bold this time text is going to be 20 pixels leading is going to be 32 text dash white and we don't need the margin y so if we go back you can see that's looking good now we just have to copy the same class names to the p tag it will be font poppins font normal text is going to be 16 though leading is going to be 24 text is going to be dim white and that is going to be it we don't need the margin and there we go now if we go back from the feedback card we're properly mapping over it and finally we're just missing this gradient inside of our testimonials so before we check it out in its full glory let's implement that gradient that's going to be class name is equal to absolute so we can position it properly z index of zero so it appears behind the content w dash sixty percent for width h dash sixty percent for height minus right dash fifty percent and then rounded dash full to make it a circle and then blue underscore underscore gradient and there we go you can see that circle right here on the right side now if we expand this you can see how it wraps so now we can see two here and then one there and we can expand it and we have exactly what we wanted to achieve look at this compare with this and we can kind of hover to highlight one of the testimonials this is looking great also notice how these gradients nicely transition from the top then they move right here you can see them on the left side and they keep moving now to the right side there everything is looking perfect now the next section on our list are going to be these companies right here airbnb binance coinbase and dropbox these are the companies that this company has worked with so let's collapse this let's scroll down and let's close our testimonials and let's move to our clients these clients are going to be incredibly simple we simply have to map over the images so let's do it right away we can import the clients coming from dot slash constants and we can also import these styles coming from dot slash style this is going to be a section of its own and we also can instantly return this right here now this section is going to have a class name it's going to be dynamic of styles dot flex center and also margin y 4 to divide it from the top part and bottom part as well then we want to have a div this div is going to have a class name equal to that's going to be styles dot flex center as well and flex dash wrap and w-4 inside of there we want to map over our clients and just to show you what clients are it's going to be just a list of four different logos so we can say clients.map we get one individual client and we instantly want to return a div that div is going to have a key equal to client.id let's fix that and inside of there we want to render an image so an image is going to have a source equal to client.logo it's going to have an alt tag equal to client and it's going to have a class name equal to on small devices width is 192 pixels usually the width is 100 pixels and it's going to be object contain now if we save this and scroll down you can see all of the images right here but they're kind of on top of each other so let's add some class names to this div as well that's going to be class name dynamic of flex-1 there we go we can also give it a styles dot flex center let's give it on small devices min dash w dash 192 pixels and usually min dash w dash 120 pixels there we go so now they nicely show they wrap and if we expand this this is looking beautiful again an extra task for you if you want to play with it a bit make it so that the color of the logo kind of glows up or goes to pure white once you hover over it that would be a little task for you to play with great so now we are done with the client section and we are ready to move to final stages of our website we have a final call to action if people haven't clicked on get started now a couple of times now maybe they will once we are done with the page so let's implement this part and then we're going to move to the footer so to do that we can collapse this browser right here and we can close our clients and open up our cta let's start with our call to action section by first importing the styles coming from dot slash style and we can also import the button coming from that's going to be dot slash button that is the same button we have created before now let's turn this into an immediate return like this there we go and we can turn this div into a section now inside of that section we're going to have one more div and then inside of that div we're going to have an h2 that h2 is going to say let's try our service now and then below that h2 we're going to have a p tag and that p tag is going to say whatever it says right here on the design let's copy that as well and finally below the div containing the h2 and the p tag we can have one more div and then that div is going to contain the self-closing button component so now if we go back you might think that we're going to have something and we just have the button so we cannot see the text elements yet and that is because we haven't provided the class names so let's add a class name to our section that's going to be equal to a dynamic template string of styles dot flex center another one of styles dot margin y and another one that's going to be styles dot padding i felt like dj khaled by saying another one so let's go further we have three of these classes and now we can proceed with on small devices flex row usually flex column b g dash black dash gradient dash 2 and then rounded dash 20 pixels and finally box shadow so now if we save this we're going to get this beautiful rectangle which has this nice grayish color with the button and the text but now let's apply some styling to this div inside of it we can give it a class name equal to flex-1 also flex and flex dash hole now we can style this h2 by giving it a class name equal to styles dot heading 2 there we go that's much better and we can style the p tag by giving it a class name equal to styles dot paragraph and also max dash w dash 470 pixels and margin top 5 there we go we can also style the button just a bit so let's give it a class name equal to styles.flex center on small devices margin left is going to be 10 usually margin left is going to be zero on small devices margin top is going to be zero and usually margin top is going to be 10. now if we save this you can see that we have some margin left there and if we expand this you can notice it nicely scales and we get to our full desktop view let's try our service now so this is looking great the last thing on our list is to implement this great looking footer so to start with that we can collapse this we can go back to our app jump into our footer and let's dive right in let's start by importing the styles coming from dot slash style let's import the logo coming from dot slash assets and let's import the footer links as well as the social media coming from dot slash constants let me quickly show you what the footer links look like so if we go here you can notice that it is actually an array that has this big object that has the useful links and then useful links contain multiple links such as content how it works create and so on and then we also have the community links so if we look into the design you'll see that we actually have a series of couple of different links useful links community partner and that's going to be it so based on that we created this nice structure where we have the title and then the actual array of links so with that said we can go back and now we can start creating that footer let's turn this into an immediate return arrow function there we go and now let's turn this into a section inside of this footer we're going to have a div but before we add anything to that div let's form the styles of our section so let's go back here and let's give it a class name equal to that's going to be styles dot flex center and styles dot padding y we can also give it a flex dash call this div is also going to have a class name equal to that's going to be styles dot flex start on medium devices flex dash row usually flex dash colon margin bottom eight so that's going to be mb8 and then w dash full great with that now let's check it out we can only see some dark space there but now let's add an inner div that is going to contain our image so let's create a div that div is going to have the image inside of it so let's create a self-closing image tag it's going to have a source equal to logo if we save this we can see a huge logo right here let's add an alt tag equal to who bank and let's add a class name equal to w dash 266 pixels and h dash that's going to be 72 pixels let's also add the object contain there we go so this is already looking much better but of course we have to add the class names to this div as well so let's say class name is equal to flex dash one flex flex dash column justify dash start and margin right 10. there we go and now below this image we can add a p tag that p tag is going to say something like a new way to make the payments easy reliable and secure we can give that p tag our usual class name that's going to be equal to styles.paragraph and margin top 4 and let's also do max dash w dash 310 pixels there we go so this is already looking much better now below this div so we can exit this div right there we can create a new div for the links so let's give it a class name that's going to be a class name equal to flex dash 1.5 w dash full flex flex dash row justify between flex dash wrap on medium devices margin top 0 and then usually margin top 10. now of course we have to map over those footer links so let's say footer links dot map we get one individual footer link so let's say footer link and we want to instantly return something and that something is going to be yet another div that div has to have a key because we're mapping over it so it's going to be footer links or rather footer link dot key it's going to have a class name equal to flex flex dash call ss my 0 usually my 4 minimum dash width dash 150 pixels like so now we still cannot see anything but now we're going to finally map over our list items so first we're going to have an h4 and this h4 is going to render the footer link dot title remember each series of links is going to have its own title so let's start with the first one and then while we're doing that we can immediately render the ul an unordered list inside of that unordered list we're going to loop over once again footer link dot links dot map and there we're going to get that individual link we can also pull the index from here now for each link we want to render an li tag that li is going to have a key is equal to link dot name and we can also give it a class name right here that's going to be let's do font dash poppins font dash normal text dash 16 pixels let's also add a leading of 24 pixels text dash dim white and on hover we want to give it a text dash secondary finally cursor dash pointer now if we save this we cannot see anything yet because we're not rendering any text but now if we add a link dot name here you can see all the links let's also add a class name for the h4 so we can see the titles as well so that's going to be class name is equal to font dash poppins font dash medium text dash 18 pixels leading is going to be set to 27 pixels and text white and there we go this is looking beautiful you can see for our secondary color we use the colors from the logo so that is matching as well and currently the logo seems just a bit too big but it seems that it is that way on the design we're gonna see later on once we expand it and we also have to add some margin between the links so what we have to do is we only want to add the margin on all the links that are not the last in the column so what we can do is say if index is not equal to footer.links minus one so that's going to give us the last one so if they're not the last one in that case we want to render the margin bottom of four and then usually we can render the margin bottom of zero because we don't want to add a margin bottom to the last link and it looks like i misspelled something this here was supposed to be footer link dot links so now if we scroll down you can see that now they have some margin and it seems to me we're also missing some margin on this h4 rather on the ul so let's give this a class name equal to list dash none as well as margin top of 4 to divide it just a bit now the spacing feels natural and this is looking much better the last part of our footer is the bottom part we have this line right here we have the copyright and then we have the social media icons so let's implement that part for that we'll have to exit one div and then the second div as well and then we'll have to create one final div this div is going to have a p tag inside of there so let's first add that p tag that's going to be this copyright text that we can see right there so we can copy from the design and while we're here we can also copy the class names for that we can copy them from the h4 because they're more or less the same so let's copy this and then paste it here now if we go back we can see that all rights reserved but it's going to be just a bit different so we have font poppins font is going to be set to normal here and we want to add the text dash center everything else is going to be the same finally we can add a div below the p tag that's going to serve as a container for social media icons so we can give it a class name equal to flex flex dash row on medium devices margin top 0 and then usually margin top 6. inside of there we can map over our social media icons by saying socialmedia.map we're going to get one social and then we're going to get the index as well now we want to close this properly and then for each social media we want to return an image we can give a key to each one of these images which is going to be social.id we want to give it a source which is going to be social.icon we can also give it an alt tag which is going to be social dot id as well and finally let's give it a class name but before we do that let's save it like this to see them there we go and now we can style them so let's add a dynamic string they're going to have a w of 21 pixels that's the width the height is also going to be set to 21 pixels like this object is going to be set to contain rather object contain cursor is going to be set to pointer and then the same thing that we've done with margins before we want to check if the index is not equal to social media dot length -1 if it is not then we want to apply a margin right of 6 and then usually we want to apply a margin right of 0. so let's add it right there there we go the only thing left to do is to put these in a row the text right here and the icons so let's do that by styling this outer div right there we can give it a class name equal to w dash full we can also give it a flex justify dash between items dash center on medium devices flex dash row usually flex dash call padding top is going to be set to 6. border dash t for top is going to be 1 pixel border dash t dash and then we want to apply a color so let's do something like 3 f 3 e 5 again this can be copied from the design that is that grayish color right there and now we have our footer let's expand it to see it in its full glory there we go who bank footer right here if we compare it with the finished site and scroll down you can see that it is exactly the same but this color right here seems to be just a bit different so let's see if the color has been applied in the right way let's collapse this just a bit so that's going to be border dash d and then dash let's check it properly 3f3e45 that should be it there we go so now it's a bit more subtle and with that said we can close the footer believe it or not we have come to the end of the process of building this phenomenal application together let's collapse it and let's see it in its full glory there we go let's scroll through it quickly imagine you're building this company for a client it's a banking client big corporation who bank the next generation payment method 3 800 active users a lot of trusted companies they have rewards they're secured they have balance transfer they have some kind of billing and invoicing we can see the descriptions right there we can download it on app store and google play we can get started by using their methods immediately they have some great testimonials right here by herman steve and ken they have been used by companies like airbnb and binance and we immediately can try their business out or check more information using this footer right here everything is looking great and of course really important thing to mention is that the mobile version is looking great as well if we quickly scroll through it you can notice that everything is fully mobile responsive so as i keep scrolling it just feels so natural great with that said amazing job when building this application now i'm going to teach you how to deploy it to deploy our website we'll have to create an optimized production build so let's close all of our files collapse all of our folders and let's go to view and then terminal we can clear it and then you can cd into the bank modern app or however you called your folder and you can run mpm run build this is going to create an optimized production build and in just a couple of seconds you can see that all of our assets are right here alongside the index.html and all of those files have been put inside of a dist folder so let's right-click this and then click reveal in file explorer or open in finder if you're on mac once you do that you'll be able to see all of your files right there but of course now we have to actually deploy them so with that in mind we are back on our hostingers dashboard now in here you'll be able to find your premium shared hosting and you'll also find a button to set up a domain if you haven't already so let's go ahead and click manage that's going to open up our hosting account and then you can search for files we can click on the file manager if we now go into the public underscore html folder you'll see that there is just one default.php file there which we can delete so let's just press the remove button and remove it this is where our dist folder will go so we can bring back our bank modern app and go inside of the this folder the only thing you have to do is select all the files and then drag and drop them right here this is going to upload all the files and they're going to be up and running in a second and that's about it now we can go back to our hosting panel and we can click our main domain and in just a couple of seconds our website is now live on the domain name we chose and i'm not sure if you've noticed but it loaded incredibly quick now we can admire it in its full glory and you can share it with everybody else you can put it in your portfolio show it to your friends or send it to your potential clients and as you can see by this lock right there ssl certificate has been automatically included so we didn't even have to do anything there again the process is incredibly simple and i would recommend hosting her to everybody for your portfolio website for the websites for your clients or just the projects you're playing with as you just saw the process of deploying your website with hostinger is seamless so i would recommend it to you not only for websites like these for your potential clients but also for your portfolio website with that said that's going to be it for this video phenomenal job on coming this far and building this great application out once again if we want to check another website that is in hosting or servers that's going to be js mastery.pro this is another beautiful website i've created but again that's not the main point the main point are these project-based courses that you can use to level up your development skills right away you can go ahead and choose the film part 1 if you want to polish your react skills and then if you want to dive into the new and uncharted territory of web 3 the nft marketplace project is for you and if you didn't see it at the beginning there is also the free guides section so you can get a lot of free guides entirely for free you can use this as reference books ebooks or entire roadmaps with that said amazing job on coming to the end of this video thank you so much for watching and i'll see you in the next one have a wonderful day [Music] you

Channel: JavaScript Mastery

Views: 983,007

Keywords: javascript, javascript mastery, js mastery, master javascript, modern ui ux, build and deploy a modern website, react modern website, react js, react js responsive website, build and deploy a react website, tailwind, tailwind css, react tailwind, react tailwind css, build a website using react and tailwind, how to use tailwind with react, how to build a react js website, beautiful website using react js, landing page react, business website react

Id: _oO4Qi5aVZs

Length: 137min 36sec (8256 seconds)

Published: Fri Aug 12 2022