All language subtitles for [English-Spanish] Build and Deploy a Fully Responsive Website with Modern UI_UX in React JS with Tailwind [DownSub.com]

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
hola y bienvenido a un video de proyecto

en el que creará e implementará un

sitio web totalmente receptivo con ux e ui modernos

en react.js y viento de cola

con una impresionante sección de apertura

imágenes y gradientes de alta calidad

estadísticas comerciales secciones de funciones reutilizables

con botones de llamada a la acción testimonios

y mucho más

who bank es la mejor

página de destino empresarial moderna que puede encontrar actualmente

en youtube al crear esta única

aplicación web conmigo obtendrá el

conocimiento necesario para crear cualquier sitio web

que pueda imaginar hay

muchos tutoriales que

le enseñan cómo crear un sitio web que

consta de una barra de navegación algunos

divs y un pie de página aburrido

hoy mismo aprenderá cómo desarrollar un sitio

web profesional utilizando las

tecnologías más demandadas hoy en día react.js y

viento de cola sin dependencias adicionales

construirá todo desde rasque e implemente

en Internet para que pueda compartirlo

con sus amigos y clientes potenciales

y ponerlo en su cartera. Este video

es perfecto para usted si desea aprender

cómo transformar un diseño de figma en un

sitio web completamente funcional si lo desea.

mejore sus habilidades de css y si desea

aprender a crear

sitios web modernos y receptivos,

es posible que se pregunte cuáles son los

requisitos previos para crear un

sitio web tan increíble.

temas a medida que

avanzamos, explicaré cada paso del camino

junto con la creación de esta aplicación,

también aprenderá los componentes funcionales de reacción

y su reutilización, la

estructura de archivos y carpetas de reacción,

logrará el dominio usando las

propiedades fundamentales de css de tailwind css para dominar la

flexión

de suave y animaciones agradables a

gradientes complejos

consultas de medios perfectamente ubicadas para una

capacidad de respuesta satisfactoria en todos los

dispositivos

y al final aprenderá cómo

implementar sus sitios web en servidores increíblemente rápidos

y darles un nombre de dominio personalizado

usando hostinger si este video

alcanza los 20 000 me gusta i' Estoy grabando un

segundo video moderno de ui y ux antes de

sumergirnos en el proyecto. Tengo un

anuncio increíblemente importante para

ti.

Recientemente agregamos la sección de recursos gratuitos

al sitio web js mastery.pro.

El enlace está en la descripción,

así que de ahora en adelante. los

cursos profesionales basados en proyectos,

como fimpire y nfd market, puede

obtener guías y libros electrónicos completamente gratuitos

sobre react web3 y frontend backend

y desarrollo de pila completa si decide

obtener los cursos utilizando el enlace en

la descripción, un código de descuento especial

aparecerá automáticamente se aplicará para usted

durante el pago

dicho esto, profundicemos en el

video de hoy

[Música]

antes de comenzar a construir nuestro sitio web,

primero obtengamos el alojamiento y el

nombre de dominio para nuestro nuevo proyecto, su

cartera o cualquier sitio que creará en

el futuro

puede hacer clic en el enlace en la

descripción para desplazarse por el

sitio web conmigo

hostinger es mi recomendación personal

y en este momento están ofreciendo

ofertas locas, así que simplemente necesitaba mostrarle esto,

ofrecen una excelente relación precio-calidad

servidores de alta velocidad y Lo más

importante es soporte de chat las 24 horas, los 7 días de la semana, veamos

qué se ofrece con algunos de los

planes de hospedaje más populares.

en este caso, vamos a optar

por el alojamiento compartido premium porque

también ofrece algunas cosas excelentes que

necesita al crear cualquier sitio web, le

brinda una cuenta de correo electrónico gratuita,

ssl gratuito, pero lo más importante, le brinda

un nombre de dominio gratuito que

necesitamos. nuestro sitio web moderno y profesional

para que sea rápido, confiable y creíble,

por esa razón, tener un nombre de dominio personalizado, un

nombre de correo electrónico personalizado y tiempos de carga rápidos del sitio web lo

harán destacar entre

la multitud,

ya que me asocié con hostinger,

decidieron darle una aún más grande

descuento puede encontrar el enlace y el

código de descuento en la descripción disfrute

una vez que seleccione el plan aquí tenemos que

elegir el período de nuestro alojamiento con un

descuento loco en este momento

definitivamente elegiré 48 meses para ahorrar la

mayor cantidad de dinero

y a continuación, puede elegir su

método de pago y luego puede ingresar

su código de cupón, como puede ver, el

dominio de javascript ya está ingresado

aquí para mí, pero si no lo ha sido para

usted, simplemente escriba el dominio de javascript que

le dará un descuento aún mayor

en su paquete de alojamiento después de

realizar una compra, será redirigido

al panel de control de los alojamientos, lo veré

allí y estamos de vuelta dentro del

panel de control de los alojamientos; en este caso,

abrió una guía automática para el

alojamiento que acabamos de comprar, así que

avancemos y hagamos clic en comenzar ahora nos

pregunta si queremos

migrar un sitio web o construir un sitio web en

este caso lo estamos construyendo por supuesto

ahora nos pregunta si queremos

codificar en wordpress o en algún otro cms

en este caso usted puede hacer clic en omitir,

comenzaré desde cero

y, finalmente, aquí puede reclamar

su dominio gratuito, así que sigamos y haga

clic en seleccionar

y aquí puede elegir un nombre para

su nuevo sitio web,

no tiene que hacer este paso ahora

si aún no está seguro del

nombre de dominio que desea elegir, no tiene que

ser para este video, puede ser para su

propia cartera o para sus futuros clientes,

en este caso voy a cambiar a com

e ir a por algo así como el

sitio web moderno de dash business dash nuevamente, solo necesitamos

algo simple en este caso y puedo hacer clic en

buscar, este dominio está disponible

y podemos hacer clic en continuar

con eso, dicho que hemos terminado con nuestra

configuración, podemos hacer clic en finalizar y estamos

listos para comenzar a construir nuestra

aplicación

y ahí vamos nuestra configuración se está

inicializando mientras hablamos ahora

podremos sumergirnos directamente en el

desarrollo y luego al final de este

video vamos a volver aquí

y luego vamos para implementar nuestro

sitio web en los servidores rápidos de hostinger,

excelente para que podamos hacer clic en administrar el sitio

y luego, al final,

volveremos aquí y finalizaremos la

implementación

con eso dicho, profundicemos directamente en

el código si ha estado observando el

dominio de javascript desde hace algún tiempo,

entonces sabe que siempre comenzamos desde

cero y le enseño cada paso

del camino,

por lo que comenzamos creando una

carpeta vacía en nuestro escritorio,

llamémosla aplicación de subrayado de banco subrayado moderno

y luego podemos arrastrar y soltar esa

carpeta en una ventana de código de Visual Studio vacía,

puede expandir esa ventana y estamos

listos para comenzar a codificar nuestra excelente

aplicación,

vayamos a la vista

y luego a la terminal,

y estamos listos para inicializar nuestra aplicación de reacción,

crear la aplicación de reacción ha estado liderando la

industria en inicializando

aplicaciones de reacción desde hace años, pero veed es una

nueva herramienta que apareció recientemente y es

mucho más rápido crear una

aplicación de reacción usando veet, así que vayamos a

vtjs.dev para

comenzar

y lo único que debemos hacer para

inicializar nuestra aplicación de reacción se ejecuta

npm create vit a más tardar

dentro de nuestro código de Visual Studio,

podemos ejecutar ese comando y hacer clic en Intro,

por supuesto, asegúrese de haber

descargado e instalado node.js si

aún no lo ha hecho, simplemente

descárguelo e instálelo en Google Node.js y luego vuelva a ejecutar

este comando, el nombre de nuestro proyecto

será el subrayado del banco, la aplicación moderna de subrayado,

por supuesto, puede llamarlo como

quiera y, en este caso, voy a

elegir reaccionar,

también podemos elegir simplemente reaccionar

sin texto mecanografiado esta vez y eso es todo,

podemos hacer un cd en la aplicación de subrayado moderno de guión bajo del banco

y podemos ejecutar npm

install para instalar todas las

dependencias necesarias, como puede ver, esto fue

mucho más rápido que usar la aplicación crear reacción

en mi máquina, tomó solo 8 segundos ahora

intentemos ejecutar al ejecutar npm run

dev

en solo un segundo, obtenemos nuestra url hold

ctrl y luego hacemos clic en este enlace aquí mismo

y así nuestro iniciador está listo,

pero aún más importante si

lo revisa un poco, notará que

tiene una configuración mucho más mínima que

nuestra aplicación habitual de creación de reacciones, solo tenemos la

aplicación principal, algunos activos de estilos y eso es todo,

ahora que la aplicación está inicializada,

podemos comenzar instalando todas las

dependencias necesarias que

usaremos a lo largo de este video creo sea

o no, no vamos a abarrotar nuestro

paquete.

eso nos ayudará a diseñar

nuestra aplicación yendo rápidamente a la

documentación de tailwind podemos ver que

solo necesitamos ejecutar un par de comandos

para instalar y configurar tailwind

vamos a tomar nuestro primer comando desde

aquí podemos ir a ver y luego terminal

y luego podemos evitar que se ejecute

presionando control c y luego y

ahora puede escribir npm install dash

capital d tailwind css post css y auto

prefixer y presione enter después de eso,

también tendremos que copiar el siguiente

comando y eso es va a ser mpx

tailwind css init dash b

y presione enter allí vamos que creó

nuestros archivos de configuración,

así que vamos a configurarlos, primero vayamos a

veet.config.js, como puede ver, este archivo

solo especifica que estamos usando reaccionar

ahora cuando se trata de tailwind.config.cjs,

actualmente está bastante vacío, por lo que a

continuación, en la descripción, encontrará un

enlace a una esencia de github que

contendrá el tailwind.config.cjs5 actualizado

y simplemente puede copiarlo y pegarlo

correctamente. Aquí ya creé para ti

algunos estilos predefinidos y estos son

increíblemente simples. Acabamos de agregar algunos

colores para que podamos hacer referencia a ellos fácilmente.

Algunas familias de fuentes y algunos tamaños de pantalla. dicho esto,

créalo o no,

tenemos todas las dependencias que

necesitamos, así que configuremos nuestros archivos y activos principales

si vamos a main.jsx dentro de aquí

estamos importando react react dom y también

aplicación desde aplicación estamos también importando el

índice css y simplemente renderizando la aplicación,

esto es bueno

ahora cuando se trata de index.css,

aquí es donde queremos hacer uso de

tailwind, así que nuevamente junto a

tailwind.config.cjs

podrás Encuentre otro archivo

que será

index.css

en este archivo. Preparé para nosotros algunos

gradientes, como puede ver aquí, algunos

estilos básicos y fotogramas clave, pero más,

solo importamos el viento de cola aquí y

también importamos algunas fuentes,

todo lo demás es solo configurar algunos. los

gradientes de texto son

excelentes, así que ahora también tenemos la configuración de viento de cola

y tenemos algunos estilos básicos que

podemos usar

ahora podemos centrarnos en app.jsx

podemos eliminar por completo todo lo

que está aquí

y podemos ejecutar rafce

que generará automáticamente una

función de flecha de reacción para nosotros,

si esto no funcionó para usted, puede ir

a extensiones y luego escribir es7 más

reaccionar redux reaccionar fragmentos nativos

puede instalar eso y luego puede ejecutar

rafce y debería funcionar

ahora tenemos un archivo plano y como puede

ver ya no estamos importando app.css, así que

podemos eliminar eso

y también podemos eliminar la carpeta de activos,

la razón por la que estamos eliminando la

carpeta de activos es porque vamos a tener la

nuestra propia, así que en la descripción que vas

para encontrar un enlace a una carpeta de activos comprimidos,

simplemente puede descomprimirlo y luego

pegarlo aquí mismo dentro de la carpeta de origen,

como puede ver, estos son principalmente algunos

íconos de logotipos y activos que vamos a

usar en nuestra aplicación de grado.

tomar mucho tiempo para encontrarlos

y podremos hacer referencia a ellos desde

nuestra aplicación de reacción.

Dicho esto, podemos continuar

configurando nuestra estructura básica de archivos y carpetas

junto a index.css principal y app.jsx.

también tendrá dos carpetas diferentes,

la primera se llamará

constantes

y luego dentro de esa carpeta de constantes

también tendremos un nuevo archivo index dot

js dentro de ese archivo, queremos

poner todo el texto estático que es se

mostrará en el sitio web y cuando

digo texto estático simplemente me refiero a cosas

como estas, los títulos, las descripciones, la

cantidad de usuarios activos, así como algunas

listas como esta o tal vez incluso en el

pie de página, queremos tener listas de

enlaces prefabricadas. para que podamos simplemente mapearlos

y no perder tiempo escribiendo cada uno

a mano, esto nos ayudará a

desarrollar nuestra aplicación más rápidamente y

también garantizará que si le da

este sitio web a un usuario no técnico,

simplemente puede ingrese a ese

archivo de constantes y cambie las cosas si lo

desean para que pueda encontrar este

archivo de constantes index.js en ese github

gist a continuación y puede pegarlo,

creo que puede ver lo que le estaba diciendo

aquí, solo tenemos algunos matrices con

listas de logotipos de ID o incluso algunos

íconos de redes sociales y listas de enlaces que

queremos incluir en el pie de página, son solo

datos básicos, pero ahora un usuario puede acceder

a este archivo y puede cambiar las cosas

como quiera. No tienen que

saber codificar, simplemente necesitan

venir aquí y cambiar algo, por supuesto,

esto también es útil si desea

transferir esta aplicación para usar un CMS

más adelante.

El diseño que usaremos hoy es solo

uno de innumerables diseños fenomenales

creados por one week wonders

me dieron permiso para usar este

diseño para enseñarle cómo desarrollar un

sitio web basado en ese diseño

one week wonders ofrece muchos

diseños impresionantes, así que definitivamente visite su

sitio y las páginas de dribble en las que estará el enlace

la descripción,

pero dicho esto, tenemos todo lo que

necesitamos y estamos listos para comenzar a codificar

nuestra excelente aplicación.

Primero, comenzaremos creando

la estructura y el diseño dentro de

esta aplicación. Importaremos todos

los demás. componentes y luego

podremos implementarlos uno por uno, así que

comencemos a crear nuestro

diseño, podemos comenzar creando un div

que envolverá toda nuestra

aplicación,

ese div tendrá un nombre de clase

igual a bg- primario

w guión lleno

y desbordamiento guión oculto

por supuesto necesitamos tener algo

dentro de ese div para poder verlo

así que por ahora simplemente creemos un h1

y digamos hola mundo

genial

ahora si su componente funcional de reacción

simplemente devuelve jsx entonces usted puede

eliminar por completo esa declaración de devolución

eliminar las llaves y solo tener

los paréntesis aquí

y luego puede hacerlo así y

deshacerse de un nivel más de sangría

esto simplemente se ve más limpio, así que ahora

ejecutemos nuestra aplicación y veamos si

podemos mira el hola mundo en el navegador

podemos abrir nuestra terminal y podemos

ejecutar npm run dev

controlemos haga clic en el enlace y haga clic en

navegar y ahí vamos podemos ver solo

este rectángulo negro pero si pasamos el mouse

sobre él puede ver hola mundo lo que

significa que todo funciona

correctamente, solo tenemos que agregar más

elementos a este diseño,

así que continuemos

ahora dentro de este div, podemos eliminar el

h1 y voy a crear un div más,

este div envolverá nuestra barra de navegación

y va a tener algunos

estilos especiales Creé un archivo que tiene muchos

estilos que usaremos a lo largo de

toda nuestra aplicación y confía en mí cuando

te digo que este es el último archivo al que

te daré acceso a

todo. De lo contrario, de ahora en adelante,

codificarás por tu cuenta. Solo quiero

proporcionarte algunos archivos para que podamos

comenzar a trabajar, de modo que puedas aprender tanto como sea

posible en el menor tiempo posible. podrá

encontrar un archivo de estilo style.js

que irá directamente dentro de nuestra

fuente, puede copiarlo desde allí y

pegarlo aquí,

como puede ver, tenemos algunos estilos que

ayudarán con el diseño

y algunos encabezados básicos, párrafos,

centros flexibles, comienzos flexibles, etc., estos son

solo colecciones de un par de

nombres de clases diferentes que están vinculados a una sola

cadena, por lo que es mucho más fácil usarlos, así que

ahora regresemos a nuestra aplicación y

aquí vamos a importarlos estilos para que

podamos decir importar estilos

de estilos de barra de puntos

y ahora dentro de este div podemos decir que el

nombre de la clase es igual a

eso será una marca de retroceso

y luego un signo de dólar y llaves

estilos relleno de puntos x

y ahora si te estás preguntando lo que esto

hace

es que primero tiene que corregir este error que

cometí y eso solo

vendrá del estilo aquí

ahora, puede controlar, hacer clic en él y puede

ver el relleno x

esencialmente va a decir relleno x

es 6 es va a darle algo de relleno

y en dispositivos más pequeños le va a

dar algo más de relleno, eso es

esencialmente

ahora podemos agregar un nombre de clase adicional

como

styles.flex center

dentro de allí queremos tener un div más

y este div va para tener un nombre de clase

y, de nuevo, será un

signo de dólar de comilla invertida, llaves y luego estilos de

ancho de cuadro de puntos nuevamente si está interesado

en lo que hace esta clase, simplemente haga clic en él

y puede ver que le da un ancho completo

ahora adentro de allí, queremos representar una

barra de navegación

más adelante, este será un componente de la barra de navegación,

pero por ahora podemos dejarlo como

un texto básico,

por lo que esta parte aquí forma nuestra barra de navegación,

agreguemos una línea vacía aquí y

continuemos con el siguiente paso que va

a ser nuestra sección principal la

parte principal de nuestra aplicación

queremos tener un div

y queremos darle un nombre de clase

que volverá a ser

dinámico

primero queremos decir bg-primary para el

color de fondo

y luego quiero decir que los estilos dot flex

comienzan

una vez más, vamos a tener un

div interno

y este div tendrá un nombre de clase

igual a un ancho de cuadro de puntos de estilos dinámicos

y dentro de allí queremos representar

nuestro futuro componente héroe y un héroe es

solo la estrella principal del programa en nuestra

aplicación un héroe es esta parte que

puede ver aquí mismo todo lo que es

visible tan pronto como carga la página

con eso dicho podemos movernos a todo lo

que está debajo del héroe y solo para

simplificar el proceso, podemos duplicar

lo que tenemos aquí, por lo que será

casi lo mismo que será bg

primario

estilos flex start y solo nos falta

uno que será

estilos

dot

padding x

ahí vamos

y ahora en ahí tenemos un cuadro con pero

esta vez en lugar de héroe queremos

representar todos nuestros diferentes componentes,

por lo que serán

estadísticas como en las estadísticas de nuestro banco

queremos tener la sección de negocios

queremos tener la sección de facturación también

necesitamos tener una sección de ofertas de tarjetas,

una sección de testimonios, una sección de

clientes,

hacer clic en la sección de acción y, finalmente, una

sección de pie de página, todos estos elementos

que ahora son elementos de texto básicos que vamos a

transformar en

componentes reales para que podamos sumergirnos en ellos y

realmente podamos codifíquelos, así que hagamos eso,

podemos hacer clic con el botón derecho dentro

de nuestra carpeta de origen

y crear una nueva carpeta llamada

components

react se trata de que los componentes los reutilicen

y se aseguren de que todo sea lo más

legible posible, cada componente

debe hacer lo suyo,

así que vamos a crear la estructura básica para

todos los componentes que vamos a

usar a lo largo de toda esta

aplicación que va a llevar algo de

tiempo por adelantado, pero créanme,

nos ahorrará mucho tiempo en el futuro, así que

vamos a crear nuestra primera componente que se

llamará billing

dot jsx tan pronto como se abra, podemos ejecutar

rafce allí para crear una estructura básica

y podemos pasar a nuestro próximo componente

que será

business.jsx

nuevamente rafce

y pasar a nuestro próximo componente que

tenemos un componente de botón

dot jsx

rafc e

y sigue adelante entiendes que voy

a seguir haciendo eso y seguiré repitiendo

eso para todos los componentes que

vamos a usar el siguiente componente

en nuestra lista es el componente card deal dot jsx

y nuevamente puede ejecutar rafce,

el siguiente en nuestra lista será

la sección del cliente

jsx, puede ejecutar rafce,

el siguiente en nuestra lista será

un cta.jsx

y puede ejecutar rafce nuevamente,

el siguiente en nuestra lista va a ser

la

tarjeta de comentarios dot jsx y nuevamente podemos ejecutar rafce,

luego tenemos el pie de página para poder ejecutar

footer.jsx y luego ejecutar

rafce,

luego tenemos la sección de inicio para que

podamos decir

comenzar.jsx y ejecutar rafce

después que tenemos nuestra sección de héroe, nuestra

sección principal

jsx y podemos ejecutar rafce nuevamente,

luego vamos a tener nuestra barra de navegación, un

componente realmente importante, por supuesto, y

podemos ejecutar rafce,

finalmente tenemos nuestro

punto de estadísticas jsx para ver qué ha hecho nuestro banco

durante el último período y finalmente

tenemos los testimonios

dot jsx nuevamente ejecuta rafce

great, así que ahora, si volvemos a nuestra aplicación,

podemos importar todos estos componentes,

por ejemplo, podemos decir import navbar

from that's will be dot slash components and

navbar

como este

y ahora también podemos repetir esto para la

sección de héroe, así que podemos decir importar

héroe de héroe,

pero como puede notar aquí, tenemos

bastantes componentes, por lo que nuestras importaciones

tomarían más líneas que el

código real en sí y eso es no es algo que

quieras hacer, se vería algo como

esto

que no es bueno, así que hay un pequeño

truco que quiero mostrarte

si creas un nuevo

archivo index.js dentro de los componentes,

ese archivo exportará todos los

componentes en una línea pero, por supuesto, para

poder exportarlos, primero tenemos que

importarlos aquí mismo para que podamos decir

importar la barra de navegación desde la barra de navegación y solo para

acelerar este proceso, le

proporcionaré este archivo index.js en

ese github justo debajo para que simplemente pueda

copiarlo y pegarlo aquí,

como puede ver, estamos importando todos

estos componentes y luego

los estamos exportando desde el archivo de índice. Ahora,

lo que esto nos permitirá hacer es

regresar

y en su lugar de importar cada

componente individual en su propia línea, ahora podemos decir

importar barra de navegación pero dentro de las llaves

y eso provendrá de

componentes

solo componentes

y ahora puede agregar a esta línea cualquier

otra importación de componente también, así que en nuestro

caso eso es Voy a ser el héroe de la barra de navegación

y voy a copiar todo esto

y pegarlo aquí porque

también queremos importarlo todo,

pero lo pondré en una línea para que

sea más fácil de leer.

puedo ver que tengo el

ajuste de línea activado en mi configuración, así que ahora se

mostrará muy bien aquí

y este es un pequeño truco que

puede usar para hacer que el código de sus

aplicaciones react y nexjs sea más legible

si esto es algo que usted me pareció

interesante,

sugeriría consultar el

curso de filmpark en la plataforma js mastery pro,

le enseña cómo codificar usando

reaccionar desde un nivel principiante hasta un

nivel profesional,

así que simplemente haga clic en el enlace en la

descripción y se le aplicará automáticamente un descuento especial de youtube Espero

verlo

en el curso,

pero dicho esto, procedamos con

el desarrollo

ahora que tenemos todos estos componentes

importados, transformemos estos

elementos de texto en componentes reales,

hagamos doble clic en la primera palabra y

luego mantengamos presionada la tecla Alt y luego siga haciendo

doble clic en cada palabra nueva para

seleccionarla

ahora vamos a hacer un poco de

magia de atajo de código de estudio visual está bien, tiene

todo seleccionado ahora presione la

tecla ctrl y la flecha hacia la izquierda para moverse al

lado izquierdo de la palabra y

luego abra la apertura mantenga presionada la etiqueta

ctrl y luego presione la flecha hacia la derecha

y ahora cierre la etiqueta

con este simple truco, instantáneamente

convertimos todos estos elementos de texto en

componentes

si por alguna razón esto no funcionó

para usted, simplemente agregue manualmente las

etiquetas de apertura y cierre a cada uno de

estos componentes esto también es algo

que enseñamos en el curso del parque de películas,

pero dicho esto, ahora tenemos la

estructura básica y veamos nuestra aplicación en

el navegador, como puede ver aquí,

es solo una pantalla negra vacía, pero si

seleccionamos Puede ver que tenemos nuestros

componentes aquí

ahora, creamos toda la estructura.

Sé que tomó algo de tiempo, pero ahora estamos

listos para comenzar a desarrollar esta hermosa y

moderna aplicación bancaria, así que regresemos

al código y comencemos haciendo

clic en el control. para movernos a nuestro componente de la barra de navegación, la

barra de navegación es la primera en la lista,

ahora que finalmente comenzamos a codificar,

podemos cerrar todos nuestros archivos manteniendo presionada la tecla

ctrl y luego presionando w un par de

veces

y volvamos a nuestra barra de navegación,

allí vamos, así que ahora podemos abrir nuestro

navegador junto con nuestro editor para

que podamos ver los cambios que hacemos en

vivo

y allí vamos en el lado derecho de nuestra

pantalla tenemos nuestro navegador y luego en

el lado izquierdo tenemos nuestro estudio visual

código ahora, por supuesto, antes de comenzar a

crear nuestra barra de navegación aquí, podemos

compararla con la aplicación finalizada que tengo

abierta,

pero podría ser aún mejor comenzar a

compararla con nuestro diseño porque

eso es lo principal que estamos aprendiendo

aquí cómo transformar un diseño en su

aplicación de reacción ahí vamos

Abrí el diseño en mi navegador y

también voy a compartir el enlace con usted para

que lo tenga abierto también mientras

desarrollamos esta aplicación

juntos para que podamos hacer zoom primero en la

barra de navegación podemos ver la foto aquí

y luego en el lado izquierdo podemos ver

algunos enlaces, así que avancemos y

codifiquemos la barra de navegación primero, lo que también podemos

notar es que hay muchos

activos diferentes, así que si hacemos clic

aquí podemos seleccionar que puede ver que

es la mano del robot. También tenemos este

activo aquí que es una pequeña tarjeta

y todas estas imágenes aquí

si está trabajando para algunas empresas

que tienen más dinero o mejores clientes.

voy a colaborar con algunos

grandes diseñadores y, si tiene suerte,

le proporcionarán este diseño y luego podrá

concentrarse solo en la codificación, pero en algunos casos,

desafortunadamente, tendrá que ser el

diseñador y el codificador también, pero

afortunadamente, en este caso, hemos preparado

para usted un diseño fenomenal para que pueda

usarlo y pueda codificar tal como

somos, como sabe, ya

le he dado

acceso a todos los activos, así que cuando

llegue para el diseño, solo haremos

referencia a los estilos y la

apariencia general del sitio web, así que ahora

regresemos a nuestro sitio y

comencemos con la barra de navegación.

Primero podemos importar el gancho de estado de uso

de reaccionar

y también podemos importar un par de los

activos que van a estar cerca del logotipo y el

menú provenientes de los

activos de barra diagonal junto con los activos,

también vamos a importar enlaces de navegación que

provienen de las

constantes de barra diagonal ahora si desea ver cuáles

son, simplemente presione ctrl y haga clic en ellos y

podrá ver que es una matriz que contiene una

lista de objetos que tienen la identificación y el

título, estos son nuestros enlaces de navegación, así que

comencemos a codificarlo,

primero vamos a tener la

etiqueta de navegación semántica html5, también le daremos algunos

nombres de clase

como w dash full

flex

padding y dash 6

justifica el guión entre el

centro de elementos y un estilo de barra de navegación especial

ahora volvamos a nuestro sitio web y

guardémoslo ahora, como puede ver,

inmediatamente obtuvimos mucha más altura en nuestra

barra de navegación

y si se pregunta qué esos

estilos hacen como w dash full flex py6

justifican entre y así sucesivamente estas son todas las

clases de utilidad de viento de cola y el viento de cola se

usa para crear elementos como esta

tarjeta aquí muy rápido simplemente

agregando esos nombres de clase ese es el

punto y por eso lo estamos usando

si está interesado en lo que

hace una clase específica,

vaya a Tailwind,

haga clic en documentos

y luego simplemente use esta búsqueda en la parte

superior derecha, podemos buscar w-full y

podemos ver que establece el ancho completo,

eso es todo. realmente simple, no

compliques demasiado las cosas diciendo oh, ¿qué es este

ancho completo? ¿Qué es este py6?

Simplemente ve a Tailwind docs y búscalo. Eso es

todo lo que tienes que hacer

y eso es lo que siempre enseño en mis

cursos js mastery.pro que

necesitas. ser capaz de leer documentos por su

cuenta es la única forma de

convertirse en un desarrollador competente e

independiente, solo puedo enseñarle

tanto que puedo mostrarle cómo crear

hermosos sitios web como estos, pero al

final de el día que necesite poder

leer los documentos por su cuenta y poder

pensar en algo nuevo

con lo dicho, continuemos ahora dentro

de esta navegación, queremos convertir una imagen en una

etiqueta img de cierre automático que va a

tenga una fuente igual a logo y aquí

vamos quién banco

también démosle una etiqueta alt igual a

quién banco y démosle un nombre de clase

igual a

eso será w guión

entre corchetes 124 píxeles como este

y también podemos dar es una altura, por lo

que será un guión h

y luego dentro de los corchetes 32

píxeles, ahí vamos, ahora tenemos un

tamaño más pequeño específico que el logotipo del banco ahora

queremos tener una

lista desordenada de ul y que ul

tendrá un nombre de clase igual a list dash

none en dispositivos pequeños

vamos a hacer que se flexione, por lo general se

ocultará porque esta es solo

nuestra barra de mapa móvil a continuación más adelante

vamos a crear nuestra barra de navegación de escritorio ahora

agreguemos también el justifique el

centro de almacenamiento del elemento final del tablero y flex-1

dentro de allí queremos mapear sobre nuestros

enlaces de navegación para que podamos abrir un bloque dinámico

de código usando las llaves y

luego decir navlinks.map

vamos a obtener un enlace de navegación y un

índice

y queremos devolver

algo instantáneamente recuerda que cuando

regresas instantáneamente quieres tener solo un

paréntesis aquí y no una llave

queremos devolver un elemento de la lista y cada

elemento de la lista debe tener una clave porque

estamos dentro de un mapa, así que configuremos la clave

para que sea igual a la identificación del punto de navegación,

también le daremos un nombre de clase

y ese nombre de clase será

dinámico, así que podemos hacerlo así

y decir font

dash poppins

y antes de agregar cualquier clase nueva nombres,

simplemente representemos lo que debería estar

allí y eso será una etiqueta

que tendrá una ahref igual a la

cadena dinámica desactivada que será

hash o pound

nav dot id,

así que queremos ir a ese punto específico

cuando haga clic en ese enlace,

queremos cerrarlo y allí queremos

representar el punto de navegación y ese

será el título del punto de navegación ahora, si guardamos esto, no

podemos ver nada

porque el texto en este momento está

oscuro, tenemos que aclararlo así que

agreguemos un par de nombres de clase más

agreguemos un guión de fuente normal

agreguemos un puntero de guión de cursor ahora

podríamos verlos allí vamos

puedes ver que el cursor se convierte en un

puntero démosle un guión de texto y

luego dentro de corchetes 16 píxeles

y ahora vamos a hacer algo

diferente, necesitamos saber qué

etiqueta está actualmente activa y ahora podemos

simplemente darle un guión de texto de color blanco,

ahí vamos, esto funciona perfectamente, por

supuesto, tendremos que darle algo de margen,

digamos que el margen derecho será

10,

ahí vamos, pero ahora el cliente

también tendrá el margen derecho y

no queremos tener el margen en el

último elemento para que podamos abrir un nuevo

bloque dinámico. y digamos que si el índice es igual

a

navlinks.length

menos 1, esto significa que es el último

elemento,

entonces queremos darle un margen derecho

de 0. De lo contrario, queremos darle un margen derecho de 10 como lo hemos hecho antes

y ahora. podemos cerrar esto correctamente

si uso el signo correcto allí,

vamos y podemos eliminar el margen

derecho desde allí

perfecto, así que ahora lo perdimos por un

segundo, veamos el margen derecho 10

y tenemos que agregar un espacio derecho aquí para

separarlo del texto 16 píxeles y

ahí vamos esto ahora se ve como una

barra de navegación moderna esto es genial

ahora qué sucede si vamos a una

vista móvil por supuesto estamos haciendo que nuestras

aplicaciones sean compatibles con dispositivos móviles puedes ver

que es desaparece por completo,

así que ahora vamos a crear una nueva lista

de elementos solo para dispositivos móviles debajo de

nuestra ul, así que aquí queremos crear un

nuevo elemento div,

este div tendrá un nombre de clase

oculto en dispositivos pequeños, generalmente flex

flex dash uno

justifica el final del guión y los elementos del centro del guión

ahora dentro de allí queremos representar una

imagen,

esta imagen será una imagen de menú

donde podemos hacer clic para expandir el menú,

por lo que será una

etiqueta de imagen de cierre automático con una fuente igual a

ahora va a depender si queremos

abrir o cerrar el menú y para eso

podemos crear un nuevo estado de uso,

así que aquí en la parte superior podemos comenzar a

escribir estado de uso

y luego usar la flecha hacia abajo para seleccionar

el fragmento de estado de uso

podemos comenzar a escribir de inmediato y lo

llamaremos alternar

establecer alternar mover usando la tecla de tabulación y

luego al principio se establecerá

en falso, por lo que el inicio se alternará a

falso

ahora si la alternancia está activada,

entonces nosotros queremos mostrar un ícono de cierre;

de lo contrario, queremos mostrar un ícono de menú,

guardémoslo y ahí vamos, podemos ver

un hermoso ícono de menú aquí

ahora, apliquemos un par de otras

propiedades a nuestra etiqueta de imagen,

por ejemplo, agreguemos una etiqueta alt igual

al menú,

démosle un nombre de clase

igual a w guión

y luego 28 píxeles, por lo que la

altura también será de 28 píxeles y

luego el

objeto

contiene guión

si guardamos esto, ahí vamos, se

verá mejor y esto solo establece el

objeto apto para contener allí vamos esto

se ve bien ahora una vez que hacemos clic en que

queremos cambiar la alternancia para que podamos

decir al hacer clic

queremos tener una función de devolución de llamada y

queremos configurar la alternancia para que sea igual a

ahora esto no es la forma correcta de hacerlo

en reaccionar nunca debe actualizar el

estado usando la versión anterior de ese

mismo estado anterior

si desea cambiar el estado usando

la versión anterior de ese mismo estado,

entonces necesita crear una función de devolución de llamada

que se ve así así que configura

alternar

y luego lo llamas anterior y luego

dices no preparar de

esta manera reaccionar asegura que mantiene

el estado actualizado y ahora si haces

clic aquí puedes ver que en

realidad cambia lo único que tenemos

que hacer bien ahora en realidad está abierto el

menú móvil,

por lo que

aún está dentro de este div, pero debajo de esta

imagen, creemos un div que

servirá como nuestro menú,

este div tendrá un nombre de clase,

será dinámico, por lo que queremos

verificar

aquí si alternar está activado

si lo está,

entonces será un contenedor flexible

si no está activado, entonces se

ocultará allí vamos

ahora podemos agregar un par de clases más, por lo que

tendremos un relleno de 6 bg

posición de degradado de guión negro guión

superior absoluto 20 derecha

0

margen x 4 margen y

2 el ancho mínimo del guión será de 140

píxeles

asegúrese de hacerlo así min

guión w guión

y luego 140

guión redondeado xl y luego barra lateral ahora si

guardamos esto y si haces clic en este

ícono aquí puedes ver un menú

bien animado allí vamos, por supuesto, ahora

queremos crear una nueva UL dentro de

eso

y esa UL será bastante similar

a esta UL aquí, así que simplemente podemos

copiar este ul completo

y pegarlo debajo de ahí

vamos y podemos sangrarlo

ahí vamos

expandamos esto un poco y ahora

veamos qué tenemos que cambiar

esta vez va a ser list dash

none

pero va a ser flexible por lo general y

no tenemos que decir en dispositivos pequeños sin

flexibilidad u ocultos o algo así

y luego todo lo demás permanecerá casi

igual, puede ver que ahora tenemos

nuestra lista, pero parece que está en el

escritorio que queremos haz que se muestre en una

columna para que podamos decir flex dash call

y ahí vamos,

casi llegamos, recuerda que estábamos

jugando con los márgenes antes, así que

bajemos al li, nos quedaremos

con la fuente pop-ins font normal cursor

puntero texto 16

pero ahora en lugar de margen derecho vamos a

hacer margen inferior así que hagamos mb

guión

cuatro

y guardemos eso y

ahí vamos tenemos un hermoso menú

que aparece y tenemos todos los

enlaces aquí mismo

que es genial y ahora, si cerramos esto,

tenemos un hermoso menú de escritorio, tableta

y computadora portátil, así

como también siempre nos esforzamos por crear sitios web

que respondan en todos los dispositivos, eso es lo que es la

web hoy en día, la mayoría de las personas

hoy en día visitan todos los sitios web a través de

dispositivos móviles, así que queremos para asegurarme de que

respondan lo más posible

nuevamente, solo tendré que mencionar la

aplicación de poder de la película del curso del parque de películas

allí, nos esforzamos mucho para que

responda lo más posible en muchos

dispositivos diferentes y realmente me refiero a un

como puede ver en dispositivos móviles, se siente

como una aplicación móvil nativa, pero ahora, a medida que

la expande a algo así como una

tableta, tenemos dos películas por fila ahora, si

la expande aún más a una computadora portátil,

serán tres y cuanto más grande

vaya Cuantas más películas pueda ver y

responda en todos los dispositivos, es solo

algo que quería mostrarle nuevamente.

Al ver este video, obtiene un

descuento especial al hacer clic en el enlace a continuación.

Dicho esto, ahora podemos volver a

desarrollar nuestra aplicación.

la barra de navegación ahora está completamente lista, podemos

cerrar ese archivo, volver a nuestra aplicación

y estamos llegando a la estrella principal

del programa que está desarrollando la

sección de héroe, así que controlemos, haga clic en él y

estamos listos para comenzar a codificar para comenzar a

codificar nuestra sección de héroe primero podemos

colapsar nuestro navegador en el lado derecho

de la ventana

y allí vamos, ahora podemos ver lo que

estamos haciendo aquí dentro,

ni siquiera necesitamos una declaración de devolución

porque vamos a devolver nuestro jsx

al instante, así que simplemente use paréntesis

dentro de las llaves aquí mismo en la

línea tres ahora en lugar de representar un

div, vamos a representar un elemento de sección

dentro de esa sección,

le daremos una identificación igual a la de inicio para que podamos

desplazarnos hasta él. también puede darle un

nombre de clase igual a y ahora este

será un nombre de clase dinámico, por lo que se

verá así

primero, importemos algunos estilos, podemos

decir importar estilos

de estilos de barra de puntos,

también podemos importar el descuento

así como el robot y estos

provienen de activos de barra diagonal en lugar de

estilos, parece que se supone que es

estilo, ahí vamos, así que eso será

todo lo que necesitamos por ahora, ahora hagamos de

esta sección un contenedor flexible

en dispositivos medianos, será

fila de guión flexible y, por lo general, será una

columna de guión flexible,

también le daremos un relleno de puntos de estilo

y

eso agregará instantáneamente un poco más de

espacio

ahora dentro de allí, queremos tener un

div y solo para mostrarle lo que estamos

creando va a ser esta sección

justo aquí en el lado izquierdo vamos a

tener algo de texto y en el lado derecho

vamos a tener esta imagen justo

aquí así que comencemos

este div va a tener un nombre de clase

igual a su va a ser un

nombre de clase dinámico de estilos flex-1 dot flex

start

flex dash call

en dispositivos extra grandes padding x 0 en

dispositivos pequeños padding x 16 y generalmente

padding x x6 esto es para asegurarse de que

se vea bien en todos los dispositivos

ahora dentro de allí vamos a tener

solo un div más y este div

tendrá un nombre de clase igual a flex

flex dash row

items dash center

padding y entonces p y y luego eso

estará dentro de corchetes 6 pixels

padding x 4

b g

gradiente de guión de descuento

y guión redondeado que será de 10

píxeles y finalmente mb-2 para el margen

inferior ahora dentro de allí vamos

a representar este componente aquí mismo 20 de

descuento para una cuenta de un mes, así que

comencemos con eso inmediatamente, lo primero que

necesitamos este pequeño ícono aquí,

así que hagamos eso, representemos una

etiqueta img y esa será la fuente es

igual a descuento,

también podemos darle una etiqueta alt igual a

descuento

y démosle un nombre de clase igual a

ahora podemos abrirlo arriba aquí

e inspecciónelo, puede ver que tiene 32

píxeles de ancho y 32 píxeles de alto, así que

hagamos eso,

podemos decir

w dash

32 píxeles y h dash

32 píxeles también

ahora si guardamos esto allí vamos,

debería poder mira, está bastante oscuro

pero ahora está allí,

agreguemos dos tramos diferentes, el

tramo aquí y ese tramo

tendrá un nombre de clase igual al texto blanco

dentro de allí, podemos decir veinte por

ciento

como está

en este diseño aquí mismo veinte por ciento

luego tenemos el

descuento cuatro, así que después del lapso,

hagámoslo aquí mismo, el

descuento

cuatro,

luego podemos agregar un espacio vacío como

este,

luego debajo de ese mes también

estará en un lapso, así que podemos duplicarlo

y decir un

mes

y luego uno más tiempo fuera del

lapso que

queremos decir cuenta,

ahí vamos, así que ahora, si guardamos esto,

apenas podemos ver el texto en el medio,

pero eso se debe a que todos estos panes y

elementos de texto deberían haber estado en un

párrafo, así que creemos una etiqueta p

y ahora arrastremos y sueltemos todos estos

elementos dentro de esa etiqueta p,

por supuesto, debemos darle algunos

nombres de clase, como el nombre de la clase es igual a

eso, será un párrafo de punto de estilo de nombre de clase dinámico

y también

ml-2 para el margen izquierdo y ahí vamos,

esto ya se ve un poco

mejor,

pero parece que no hay espacios

aquí después de 20,

así que si ponemos este descuento 4 en la misma

línea, entonces se aplicará el

mismo espacio para la cuenta, ahí vamos.

así que ahora se ve muy bien, estamos

comenzando a crear nuestro gran diseño

ahora, después de eso, ahora estamos llegando a la

parte principal, que es el

método de pago de próxima generación, así que salgamos de

este div justo allí

y justo debajo de

él, queremos para crear un nuevo div

y este div va a tener un

nombre de clase igual a flex

flex dash fila

justifica el guión entre los

elementos del centro y w guión completo

ahora dentro de allí queremos representar

ese gran h1 el

encabezado ese título va a decir exactamente como

dice aquí, podemos incluso copiar

eso

y pegarlo allí en

el siguiente método de pago

y también necesitamos obtener esa generación

que está en un elemento de intervalo diferente, así que

vamos a hacer paso a paso

primero el siguiente y

luego queremos agregar un romper la etiqueta porque

queremos mostrar algo en una nueva línea,

vamos a romper la etiqueta

y podemos darle a esa etiqueta de ruptura un nombre de clase que

podemos decir que solo se muestra en dispositivos pequeños, por lo que

en los dispositivos pequeños existen y luego, por lo general,

se ocultará

ahora después que queremos agregar un espacio como lo

hicimos antes

y allí queremos tener un lapso para

representar esa generación

en ese lapso, podemos dar un nombre

de clase de gradiente de guión de texto

y digamos generación,

también necesitamos proporcionar un espacio después de

eso ahí vamos, así que ahora, si retrocedemos,

puede ver la generación, pero en

realidad no podemos ver nada más,

vamos a sangrar esto correctamente

y, como puede ver, en realidad no agregamos

ningún estilo a nuestro h1, así que hagámoslo

de inmediato.

digamos que el nombre de la clase

es igual a flex dash one

font dash pop-ins

font-semi-bold ss eso va a ser para

trazo y allí podemos decir text dash

y podemos hacer

text dash de 72 píxeles y luego serán 52

píxeles

eso es lo haremos realmente grande

y luego podemos darle un guión de texto

blanco

ahí vamos el método de pago de próxima generación

esto se ve hermoso

tengo que decir que recientemente he estado usando fuentes

poppins y es genial

y podemos también dale el guión principal ss

colon

y luego podemos hacer algo así como

100 píxeles como este,

ahí vamos, así que esto solo

cambiará la altura entre las palabras

y también podemos hacer el guión principal y luego serán

75 píxeles

ahora a continuación, vamos a necesitar el

componente de inicio que se inicia es

esencialmente este botón aquí y

ese botón se puede crear como un

componente separado, ya que tiene bastantes

estilos para crear este bonito círculo con

el ícono y el texto

a continuación este h1 podemos crear un div y

ese div tendrá un nombre de clase

igual a ss y luego flex

se ocultará

y en dispositivos medianos el margen escribirá 4 y

generalmente el margen escribirá 0.

ahora dentro de allí podemos representar eso

obtener

componente iniciado como una etiqueta de cierre automático

y ahora podemos importarlo para importar

eso empezar podemos decir importar

empezar

desde punto barra

empezar y ahora si volvemos

deberíamos poder allí vamos está aquí

está escondido por supuesto, tenemos que

implementar estos estilos para eso,

así que hagámoslo correctamente,

controlemos, haga clic en el inicio

y comencemos a implementar ese

componente de botón circular genial

para comenzar, por supuesto, podemos

importar estos estilos

desde el estilo punto barra

como este

y nosotros También podemos importar la flecha hacia arriba

proveniente de los

activos de barra inclinada

ahora dentro de allí podemos

devolver algo instantáneamente,

por lo que se verá así

y ese algo será solo un

div,

pero ahora ese div tendrá un

nombre de clase igual. a y podemos volver

para ver lo que estamos haciendo ahora mismo, el

nombre de la clase oculta será un

nombre de clase dinámico,

por lo que será un centro de puntos flexibles de estilos

y luego también

le daremos un ancho de 140 píxeles

y también una altura de 140 píxeles

ahora, después de eso, podemos hacer que sea un

guión redondeado completo y darle un degradado de guión azul bg

ahora, si guardamos eso, vamos a tener

un hermoso

círculo de degradado

ahora lo que podemos hacer es también dale un

guión de relleno y luego hagamos algo

como 2 píxeles que simplemente agregarán

algo de espacio dentro de ese círculo para el

texto

y también hagámoslo un puntero de guión de cursor

para que ahora parezca que se puede hacer clic

ahora dentro de allí vamos a tenga

un par de divs más, el primer div interno

también tendrá algunos nombres de clase,

como

estilos dinámicos dot flex center

flex dash call bg dash primario

w dash y luego será 100

y también h dash 100

también podemos hacer redondeó el guión completo

ahora si guardamos que puede notar que

todo desaparece pero solo tenemos

este relleno que dejamos antes que

es de 2 píxeles y que sirve como nuestro

borde

ahora dentro de este div vamos a

tener un div más

y ese div tendrá un

nombre de clase igual a nuevamente, será

dinámico, por lo que los estilos comienzan con puntos flexibles

y también con la fila de guiones flexibles

finalmente dentro de ese div vamos a

tener una etiqueta p

y esa etiqueta p tendrá un lapso

etiqueta dentro de ella y dentro de esa

etiqueta de intervalo podemos decir obtener,

por lo que estamos tratando de lograr esto,

comencemos, así que primero tenemos el intervalo,

diseñémoslo un poco, podemos darle a esta p

un nombre de clase igual a

font dash poppins

font dash medium

text guión de 18 píxeles

guión inicial de 23 píxeles

todavía estará oculto

porque tenemos que darle al lapso un

nombre de clase de gradiente de guión de texto

ahí vamos, así que ahora podemos ver llegar

allí,

pero no vamos a detenernos allí debajo de

este lapso elemento podemos representar una

etiqueta de imagen de cierre automático con una fuente

igual a la flecha hacia arriba

allí vamos, también podemos darle un

nombre de clase igual a w guión 23 píxeles

y también h guión que serán los

mismos 23 píxeles

también podemos darle it object

contiene allí vamos,

así que

ahora también queremos darle una etiqueta alt

de algo como flecha

y nos falta

esta última palabra inicial, así que agreguemos eso

justo debajo, podemos copiar toda esta etiqueta p

y simplemente pegarla debajo de este div

aquí mismo, por lo que va a estar aquí,

no necesitaremos la imagen, así que podemos

eliminar la imagen

y ahora podemos decir que comience allí

ahora, es posible que pueda notar que nuestra

flecha no va en el lado derecho de

la obtener como debería ser, así que vamos a

comprobarlo, tenemos este div justo allí que

dice que los estilos comienzan con puntos flexibles y luego

estamos agregando la fila flexible allí

ahora dentro de esta etiqueta p tenemos un lapso

pero la imagen debe salir de eso

etiqueta p para que en realidad aparezca bien

en una fila y ahí vamos esto ya se

ve mucho mejor en realidad se

ve exactamente como se ve en el diseño tal vez

podamos darle a esta b solo un poco de

margen correcto algo así como 2 y ahí

estamos vaya, creo que logramos el diseño

perfectamente, así que ahora tenemos este

comienzo también, podemos cerrar el

componente de inicio y podemos volver a

nuestro héroe porque aún no hemos terminado con

la sección de héroe ahora tenemos que hacer esto envíe un

mensaje de texto allí, luego tenemos que hacer todos

estos números allí y luego,

finalmente, el brazo robótico de la escuela con los

pagos con tarjeta, así que hagámoslo de

inmediato, vamos a bajar dos divisiones, así que

este es uno dos a continuación para comenzar y

allí podemos crear otro h1,

este h1 será bastante similar

al primero, así que copiemos todos los

nombres de clase del primero

y dámoslos a este h1,

ahora no necesitaremos los

poppets de fuentes flexibles. se mantendrá la fuente

semi-negrita se mantendrá

el texto será un poco más pequeño,

algo así como 68 aquí y luego 52 allí,

tendrá el ancho del texto y luego el

encabezado será el mismo, solo

queremos agregar la w guión completo porque

necesitamos que esto tenga el ancho completo ahora dentro de

allí podemos decir el método de pago

ahí vamos y eso aparece

aquí y parece que no

necesitaba este método de pago aquí

porque lo hicimos debajo del comienzo

sí, eso es mi culpa, así que si tuviéramos que hacer

este pago allí mismo,

no podríamos colocar el botón de inicio en

el medio, así que lo que tenemos que hacer es

eliminar

este pago justo aquí arriba del

inicio, así que hagámoslo ahora mismo.

vamos, así que ahora tenemos muy bien el

método de pago de próxima generación exactamente

como está en el diseño, genial,

ahora debajo de este h1 queremos tener una etiqueta p,

así que creemos una etiqueta p,

esa etiqueta p va a copiar el texto

que tenemos en el diseño para que pueda hacer

doble clic en él

y pegarlo,

está bien,

y finalmente démosle algunos

nombres de clase para que sea realmente visible, nuestro

nombre de clase será estilos dinámicos,

ese párrafo,

por supuesto, tenemos que ponerlo dentro

del signo de dólar y llaves y

luego max dash

w

dash y luego 470 píxeles y también margin

top

dash cinco

ahí vamos así que ahora nos estamos acercando mucho

ahora hagamos el lado derecho que será

este brazo robótico pero también tenemos que

implementar estos gradientes, espero que puedan

ver esos círculos justo allí y las

salpicaduras de luz que vienen detrás de

la imagen, así que hagámoslos primero

ahora tenemos este h1 y tenemos esta

etiqueta p y todos ellos deberían estar en este

div justo ahí ahora nosotros puede ir un div

a continuación y crear un nuevo div

que será el div para el

lado derecho de nuestra pantalla

ahora dentro de allí vamos a

renderizar nuestra imagen para que inmediatamente podamos

renderizar una etiqueta de imagen de cierre automático que

va a tener la fuente es igual a robot,

guardémosla, aparece automáticamente

allí mismo,

démosle una etiqueta alt igual a

facturación

y agreguemos un nombre de clase

igual a w guión 100 por ciento

y también h guión 100 por ciento dentro de

corchetes

también démosle un relativo

y el índice z

de 5 para que aparezca sobre nuestros

gradientes una vez que los agreguemos

allí, nos vemos bien,

pero pueden ver que nos falta

algo, si expandimos esta ventana

aquí,

se mostrará en el lado derecho,

pero aún así faltan esos gradientes

que realmente lo hacen resaltar, así que hagamos eso,

agreguemos los gradientes,

podemos hacerlo agregando una serie de

divisiones de cierre automático,

cada una de esas divisiones tendrá

un nombre de clase

y se ubicará

absolutamente,

podemos establecer el índice z del primero

en cero y podemos darle un ancho del 40

por ciento,

también podemos darle una altura del 35 por

ciento

y luego podemos decir cero superior, por lo que

aparecerá desde el comienzo de la

página

y finalmente podemos darle una clase

de degradado de subrayado de subrayado rosa

ahora, si guardamos esto, puede ver este

degradado rosado genial que viene desde la parte superior

y si vamos a nuestro diseño,

esencialmente puede seleccionar este degradado

y puede copiar su estilos que se

enumeran allí mismo, en este caso

ya se los proporcioné en los

estilos, por lo que si buscamos el gradiente de ping

allí vamos, puede verlo dentro del

index.css,

es un gradiente lineal que simplemente se

copia desde aquí

genial, ahora agreguemos otros degradados

también para llenar esta imagen, podemos

regresar y podemos copiar esto dos veces

ahora, para el segundo, vamos a

establecer el índice z en uno, le

daremos un ochenta por ciento

del ancho

y también vamos a darle un

ochenta por ciento de la altura, hagámoslo

redondeado porque esto va a ser

circular, así que redondee el guión completo

y luego no necesitaremos el cero superior

sino el inferior

va a ser 40

y luego, finalmente, en lugar de un

gradiente de ping, será un

guión bajo blanco gradiente de guión bajo

ahí vamos, así que este es realmente fuerte

y finalmente podemos completarlo

con el último gradiente que

tendrá un índice z de cero

w guión 50

h -50

y luego guión derecho 20

para colocarlo también guión inferior 20 y

luego guión bajo azul guión bajo degradado

no necesitamos el rosa allí mismo

vamos a combinar un par de

degradados diferentes y antes de expandirlo

para verlo completamente solo hagamos una

cosa que marcará la diferencia

en los dispositivos móviles en este momento, puede

notar que el inicio viene en

el lado derecho aquí, pero si

lo cambiamos a iPhone 12, el inicio

desaparece porque queremos mostrarlo

a continuación eso tiene más sentido desde el

punto de vista del diseño, así que agreguemos el último

div y estará debajo de estos

div con degradados,

por lo que queremos crear un nuevo div,

ese div tendrá un nombre de clase,

será dinámico de ss oculto,

así que por lo general, lo queremos oculto, pero luego

será visible en los

dispositivos móviles, así que flexione el centro y allí queremos

renderizar el mismo componente que creamos

antes, ese es el componente de inicio

ahora en los dispositivos móviles tenemos este

hermoso botón de inicio debajo del

robot brazo y luego, si cambiamos al

escritorio,

ampliémoslo para verlo en todo su

esplendor

y ahí vamos ahora parece que

definitivamente estropeamos algo con los

degradados, son demasiado poderosos

mirando el diseño, deberían ser

más sutiles como este y en nuestro

lado terminado, puede ver que son

mucho más sutiles, por lo que lo que podemos hacer es

observar los cambios y asegurarnos de que

nuestros gradientes sean como deberían ser para que

podamos desplazarnos hacia arriba. Tenemos este div justo

allí y parece para mí, simplemente nos perdimos

agregar los estilos a este div, así que

agreguemos un nombre de clase,

hagámoslo dinámico y digamos

flex-1,

agreguemos un flex para que aparezcan en una fila,

agreguemos el centro de estilos dot flex

y también podemos darle en

dispositivos medianos margen y 0

generalmente margen y 10 y va a

tener una posición relativa

ahora estos gradientes van a aparecer

solo detrás del brazo robótico y esto se

ve mucho mejor

genial esta sección de héroe parece que

pertenece a un realmente moderno y una

aplicación web limpia, tenemos este bonito

botón de inicio y, si desea un

desafío adicional, puede animar este

botón un poco y hacer algo una vez que el

usuario pase el mouse sobre él, pero incluso sin

eso, esta es una hermosa sección de héroe,

la siguiente sección en nuestra lista será

esta línea aquí donde tenemos

diferentes aspectos de nuestro sitio web o

deberían decir nuestra empresa tenemos 3

800 usuarios activos 2300 más de confianza por parte de la

empresa y 230 millones en transacciones

hagamos eso primero y luego nos

mudaremos a este tipo de

secciones repetitivas en las que les mostraré cómo

hacer increíblemente reutilizable genial, así que

pasemos a esta línea primero,

podemos hacer eso colapsando nuestro navegador,

podemos cerrar nuestro héroe y volver a la

aplicación

y luego solo

con Siguiendo la estructura, nos

movemos a las estadísticas. Las estadísticas son esa

línea que cubre todas las estadísticas importantes.

Para comenzar a crear nuestras estadísticas, primero podemos

importar la matriz de estadísticas que proviene de las constantes de barra de puntos

y también podemos importar estos estilos que

provienen del

estilo de barra de puntos. ahora, si se pregunta

cuáles son las estadísticas, simplemente podemos controlar, haga

clic en ellas y podrá ver

que es una matriz con tres

objetos diferentes y cada objeto tiene un título y

un valor si lo comparamos con un diseño que

usted Puedo ver que cada objeto representa

una clave y un par de valores, el número

junto con una descripción que explica qué

hace ese número,

así que simplemente tomé esos valores y las

explicaciones, los puse dentro de una matriz

y ahora vamos a mapearlos

para poder eliminarlos primero. esta

declaración de devolución, ya que devolveremos nuestro jsx

de inmediato, por lo que

nos brindará una apariencia más limpia y ahora, dentro de

las estadísticas, convertiremos este div

en una sección

y le daremos una clase. nombre

que el nombre de la clase va a ser dinámico,

por lo que los estilos se doblan en el centro,

también podemos darle una fila de guiones flexibles,

envoltura de guiones flexibles

en dispositivos pequeños, margen inferior 20,

generalmente margen inferior seis, ahí vamos, así que

ahora no verá ningún cambio.

por el momento, pero ahora mapeemos

esas estadísticas para que sean

stats.map

obtenemos cada estadística individual

y luego queremos devolver instantáneamente

algo para cada estadística

que algo va a ser un div

y ese div va a tener un key

igual a stat dot id

y tendrá un nombre de clase, el

nombre de clase que podemos hacer más tarde porque

lo más importante es que podemos

ver los datos,

así que primero vamos a tener un

elemento h4 allí

y ese h4 va a representar el

valor del punto de estadística

que será el número

aquí y luego, por supuesto, también necesitamos la estadística de

ese título, por lo que

debajo de h4 podemos representar la etiqueta p

que representará el título del punto de estadística

y nuevamente estos solo provienen

de esta matriz de estadísticas

ahora que tenemos esos que de hecho están

aquí, pero realmente no podemos verlos, así que

apliquemos algunos estilos,

la mayoría de los estilos serán bastante

similares, pero serán diferentes en

tamaños

primero podemos agregar el estilos para el h4,

así que digamos que el nombre de la clase es igual a

font-poppins

font-semi-negrita en dispositivos extra pequeños

guión de texto 40 píxeles

generalmente texto

30 píxeles

en extra pequeño podemos configurar el encabezado para que

sea 53 píxeles

como este y luego generalmente el El encabezado se

puede configurar en algo así como 43 píxeles

y el texto en blanco, por lo que ahora puede ver

estos números allí mismo, pero, por supuesto, también

tenemos que diseñar las etiquetas p, así que

copiemos todos los nombres de clase

del h4

y agréguelos a la etiqueta p, pero vamos

a modificar solo un par de

cosas

en lugar de la fuente semi-negrita, será una

fuente normal

en lugar de 40 píxeles, será 20

para el texto extra pequeño, por lo

general será 15. cuando

En lo que respecta al encabezado,

será 26 aquí para el extra pequeño y, por

lo general, será 21

y, en lugar de texto en blanco,

diremos degradado de guión de texto,

estará en mayúsculas y

tendrá un margen izquierdo de 3.

Ahora, si guardamos eso, puede ver que esto

ya se ve mucho mejor

casi como lo hace en el diseño, pero, por

supuesto, tenemos que diseñar el div para que

podamos volver a nuestro div y ahora que

podemos ver nuestros elementos. puede

darle un nombre de clase

que será dinámico,

hagamos un

guión flexible

que los muestre inmediatamente

uno por uno,

también podemos darle una propiedad flexible,

justificar los elementos de inicio del guión, el

centro del guión, la

fila del guión flexible

y luego el guión de margen 3 o m. -3 y como

puede ver, esto realmente hizo que nuestra página de inicio se

destacara ahora que tenemos la primera vista completa una

vez que el usuario ingresa a la pantalla,

puede ver esta hermosa imagen junto

al botón de comenzar y puede ver

todas las estadísticas inmediatamente arriba del pliegue

una vez primero se unen, así que esto se ve

genial

y lo creas o no, hemos

terminado por completo con nuestras estadísticas, podemos

volver a la aplicación y centrarnos en la

parte comercial a continuación si miras el

diseño que será la parte comercial.

esta subsección aquí va a

tener algo de texto en el lado izquierdo y luego va a

tener algunas tarjetas en el

lado derecho, así que concentrémonos en desarrollar

eso de inmediato para comenzar a codificar nuestra

sección de negocios, vamos a importar

un par de cosas así que comencemos

importando las características que

provienen de constantes de barra de punto,

también podemos importar estos estilos pero también el

diseño de coma y eso vendrá

del estilo de barra de punto

y también podemos importar el

componente de botón que viene de eso va

para ser simplemente un botón de barra oblicua

ahora, exploremos lo que estamos importando

aquí, podemos controlar, haga clic en las funciones

y puede ver que las funciones son similares

a nuestras estadísticas, habrá una variedad

de tarjetas diferentes, por lo que tenemos la función 1

que va a ser recompensas y

allí tenemos un ícono tenemos un título

y contenido

siempre necesita visualizar cómo

se verá algo en la pantalla

qué propiedades tendrá

podemos ver claramente que aquí tenemos

un título que tenemos contenido y tenemos un

ícono y luego todo lo demás es igual

en reaccionar, debe pensar en términos de

reutilización, cómo puede reutilizar

componentes específicos ahora

control, haga

clic en el diseño, puede ver que el diseño

simplemente contiene algunos otros estilos

para la información de la sección inversa de la sección,

etc., y si miramos el

diseño aquí, puede notar que son

simplemente algunos nombres de clase adicionales

en lugar de escribir flex md flex

estilo de columna flexible de fila y simplemente podemos

decir sección y ahorrarnos mucho tiempo,

así que regresemos y comencemos a

implementar nuestro negocio

primero, podemos convertir esto en una sección

y le daremos una identificación a esa

sección que va para que sean características,

también le daremos un nombre de clase igual a la

sección de puntos de diseño,

ahí vamos ahora dentro de esa sección, vamos

a tener un div

y ese div tendrá un

nombre de clase igual a la

información de la sección de puntos de diseño que puede ver. cuánto más

simple es esto, no tenemos que escribir

muchas clases ya que preparamos todos los

nombres de nuestras clases aquí y luego

también podemos hacer un h2,

tenga en cuenta que ahora estamos creando

esta parte aquí

y que h2 va a decir

exactamente como lo hace aquí, así que podemos

copiar todo el texto

y podemos agregar una etiqueta de interrupción antes de la rueda,

como puede ver aquí, así que digamos

etiqueta de interrupción

y a esa etiqueta de interrupción podemos aplicar un

nombre de clase

igual a en el bloque de dispositivos pequeños, lo que

significa que mostrarlo generalmente lo

oculta porque solo queremos hacer esto

en dispositivos más pequeños

ahora lo que podemos hacer es guardar esto y

regresar y puede notar que no podemos

ver nada porque no hemos

proporcionado el h2 clases así que aquí

digamos que el nombre de la clase es igual a

estilos.título2

y allí vamos, proporcionamos

esos estilos de inmediato, ahora hagamos la etiqueta p

también, así que justo debajo podemos tener una etiqueta p

y desde el diseño podemos copiar lo que

este texto aquí dice que

parece que está escrito en una

fuente diferente que no tengo

aquí, así que no me permite copiar, así que

simplemente voy a cambiarlo por uno

que potencialmente todos tenemos, así que si lo

reemplazo aquí esto debería ser

bueno y ahora podemos copiarlo

ahí vamos

y podemos cambiar el nombre de la clase a

classname es igual a va a ser

estilos dinámicos. un

poco aquí, por lo general,

para que algo sea legible, debe

mostrarse en bloques como estos, el texto

no debe tener mucho ancho, por lo que lo que podemos

hacer es aplicar un nuevo nombre de clase

max dash w dash

470 píxeles

si guardamos esto esto va a ser mucho

más legible ahora y también vamos a

dividirlo del texto dándole un margen

superior de 5. Ahí vamos,

tú haces el negocio, nosotros manejaremos el

dinero, ya que dicen que

sí, este sitio web está muy bien hecho.

algunos elementos de texto agradables algunas

estadísticas agradables imágenes agradables así es como debe

crear sus sitios web para los clientes

y mientras estamos en el tema de prestar

clientes y oportunidades de trabajo,

nuestra próxima cohorte de la experiencia de la clase magistral de jsm

comenzará muy pronto, así que si

vas a js mastery that pro, haz clic en

la experiencia de la clase magistral, puedes leer

más al respecto, pero esencialmente

te ayudaremos a conseguir tu próximo trabajo

dentro de tres a seis meses, así que si eso es

algo que te interesa,

definitivamente verifica sáquelo, pero

dicho esto, volvamos a esta hermosa

aplicación bancaria, ahora tenemos que agregar un

botón aquí y luego, después del

botón, mostraremos estas tarjetas

en el lado derecho y

le mostraré cómo hacerlos completamente reutilizables,

pero vamos paso a paso debajo de la

etiqueta sp, podemos representar una

etiqueta de botón de cierre automático, ese botón por ahora

será solo un componente de botón vacío,

proporcionemos un accesorio llamado estilos

y démosle un estilo de

mt 10 margin top 10 porque queremos

dividirlo un poco de este elemento

ahora podemos controlar hacer clic en él

y podemos crear un nuevo componente de botón genérico,

así que nuevamente estamos haciendo que esto sea lo más

reutilizable posible para este botón

hemos pasado un accesorio llamado estilos para que

podamos obtener eso de inmediato y

aquí mismo podemos simplemente representar un componente de botón,

ese botón tendrá un tipo

igual al botón como lo hacen los botones generalmente,

podemos darle un nombre de clase que es va

a ser un relleno dinámico y4 relleno x6

y también podemos darle inmediatamente un

degradado de tablero azul de tablero bg

ahora si guardamos esto ahí vamos tenemos

un botón vacío podemos agregar un texto en el

medio empezar

ahí vamos ya luciendo más como un

botón

vamos a darle también un guión de fuente bobbins

vamos a darle un guión de fuente medio

también vamos a darle un texto de

18 píxeles para que realmente se destaque

vamos a darle un guión de texto

contorno principal guión ninguno

y también podemos representar todos los estilos que

provienen de nuestros accesorios

allí vamos, así que ahora tenemos nuestro botón

hecho también, volvamos al trabajo

y podemos crear la siguiente parte de nuestra

sección comercial, que serán

las tarjetas de características,

así que primero que nada, creemos un nuevo div

y ese div va a tener un

nombre de clase igual a

eso va a ser una cadena dinámica de la

sección de puntos de diseño img y también una

columna de guión flexible porque queremos

mostrarlos en una columna dentro de aquí podemos

mapear a través de nuestras características para que podamos decir

características

punto map obtenemos una característica individual

y también podemos obtener el índice de cada

tarjeta allí vamos, así que ahora, ¿qué queremos

representar para cada tarjeta? Bueno,

hagamos nuestra vida más fácil y

creemos un componente de tarjeta de características reutilizable,

ya que esta tarjeta de características solo se

usará dentro de este archivo, simplemente

creémoslo arriba aquí arriba de nuestro

componente comercial

para que podamos decir que la tarjeta de función constante es

igual a un componente de función de flecha regular

con un retorno instantáneo

dentro de allí podemos representar un div

y por ahora simplemente intentemos para pasar todos

los accesorios, de modo que los accesorios que necesitaremos,

simplemente proporcionemos una clave en primer

lugar, ya que estamos mapeando sobre ella, que

será igual a feature.id

y luego distribuyamos todas las propiedades de las funciones de

esta manera. va a contener todas las

funciones que están dentro de nuestro objeto de función

y también podemos darle un índice que es

igual a índice

excelente

ahora, si observamos nuestra función,

podemos saber que tenemos un contenido de título de icono

y la identificación,

así que vamos a desestructurar aquellos de accesorios

que serán el

contenido del título del ícono y el índice allí vamos,

intentemos mostrar el ícono de inmediato

para que sepamos que algo funciona, así que

vamos a tener un div dentro de este

div

y allí podemos renderizar un auto- la

etiqueta de imagen de cierre que tendrá la

fuente igual al ícono

alt también puede decir algo como ícono

y si guardamos esto, puede ver tres

íconos diferentes, lo que significa que

creamos un componente reutilizable que

ahora estamos mapeando y por ahora es

mostrando solo íconos diferentes, pero muy pronto vamos

a agregar un texto también,

démosle un nombre de clase a estos

íconos, de modo que será w dash,

hagamos 50 por ciento h dash también cincuenta por

ciento

y también démosle object dash contains

ahí vamos,

vamos a diseñar todo lo demás también, en

primer lugar, tenemos que agregar nombres de clase

a nuestro div de tarjeta, recuerde que estamos creando

esta parte

ahora mismo, lo que podemos hacer es darle un

nombre de clase,

será dinámico. Entonces, como este

flex flex dash row padding dash 6

rounded dash 20 pixels, puede ver que está

un poco redondeado en las esquinas,

ahora también queremos darle un margen

inferior para dividir esta tarjeta de esta

y esta de esta pero si es

la última tarjeta, entonces no queremos

proporcionarle un margen inferior,

así que lo que podemos hacer es decir que el índice no es

igual a la

longitud del punto de características -1, por lo que si no es la última,

déle un margen inferior de seis

generalmente le dan un margen inferior

que va a ser

cero margen inferior cero

ahí vamos

y, por supuesto, tenemos que cerrarlo allí mismo,

veamos, sí, debería haberlo cerrado allí,

debería haberlo cerrado aquí,

allí vamos. Cierra

esto correctamente y deberíamos estar listos para continuar, eso está

bien y proporcionemos un último

nombre de clase que será una

tarjeta de presentación ahora, si regresa, puede ver que

si pasamos el mouse sobre ella, parece una tarjeta,

es como un cuadro que tiene un ícono

allí, pero vamos a darle un estilo un poco más,

este div que contiene el ícono

tendrá el mismo nombre de clase

y hagámoslo dinámico,

tendrá

w-64

píxeles

como este,

también tendrá un h guión 64

píxeles

si guardamos esto bien ahora podemos ver

esos íconos

también redondeados guión lleno

también vamos a darle un estilo no centro flexible

y bg guión tenue

azul

ahí vamos así que ahora

tenemos un círculo alrededor del ícono y

tenemos algo que se ve más como

tarjetas diferentes pero, por supuesto, una vez que

agreguemos un título en el texto, se

verá más así, así que agreguemos eso

inmediatamente

debajo de este div que contiene la imagen,

vamos a crear otro div,

este div tendrá un nombre de clase

igual a flex-1

flex

flex dash call y margin left 3.

dentro de allí queremos renderizar un h4

y dentro de allí queremos renderizar

el título

queremos repetir este proceso para la

etiqueta p también

y allí queremos representar el contenido

y, como siempre, no será

visible de inmediato, pero si nos desplazamos

podemos ver que hay algo allí, así que

apliquemos nombres de clase a rh4 que

será font dash poppins

font

dash semi-negrita

text dash white text dash

Guión inicial de 18 píxeles 23

y déjame guardarlo antes de agregar el guión inicial

para que puedas ver lo que hace

allí, así que ahora hagamos el guión inicial de

23 píxeles,

solo agrega un poco más de espacio

y finalmente el margen inferior uno

allí vamos

y ahora vamos a copiar eso mismo nombre de clase,

agréguemoslo a nuestra etiqueta b y

cambiemos solo algunas cosas

que cambiarán la fuente

de semi-negrita a normal, también podemos

cambiar el color del texto a blanco tenue como

este

y cambiar el tamaño del texto a 16 píxeles

el líder puede ser algo así como 24 y

ahí vamos, ahora tenemos estas tarjetas que

se ven exactamente como lo hacen en el diseño

y créanlo o no, hemos

terminado con la sección comercial, así que ahora, si

ampliamos esto,

eche un vistazo a

esto. tenemos una hermosa sección de héroes y

luego tenemos una sección de características fenomenal,

por lo que tenemos una lista de características

y beneficios que esta plataforma brinda,

cada sitio web debería tener este

gran y otro llamado a la acción allí mismo,

la siguiente sección de nuestra lista será

este, que es bastante similar, tenemos

el texto y luego el texto debajo de dos

botones diferentes y luego las imágenes

esta vez están en el lado izquierdo en lugar

de tener las tarjetas en el lado derecho

solo para romper esa misma estructura,

pueden ver que nos queda derecha derecha izquierda

y luego izquierda derecha una vez más,

perfecto, así que profundicemos en nuestra siguiente

sección, volvamos aquí,

expanda nuestro código de Visual Studio

y, si volvemos a nuestra aplicación, puede ver

que la facturación será la siguiente

sección y esa es exactamente esta parte

aquí,

facturación, ahí vamos, así que implementemos

la facturación a continuación, por supuesto, vamos

a comenzar con las imágenes, ya que están

en el lado izquierdo, para comenzar con la

facturación, por supuesto, vamos a importar

un par. de activos y esos

serán apple

bill

y google y estos provienen de los

activos de barra de puntos

también vamos a obtener nuestros estilos,

así como el diseño que proviene del estilo de barra de puntos

ahora inmediatamente allí podemos

devolver instantáneamente nuestro jsx así que simplemente

estructuremos esto correctamente

y ahora podemos convertir este div en una

sección.

Esta sección tendrá una identificación

porque podemos desplazarnos hasta ella y

llamémosla producto

y démosle un nombre de clase

que sea igual a ese será el

punto de diseño. sección inversa, así que esta es la parte en la

que les dije que estamos haciendo algo

dinámico, tenemos una sección inversa, si la

miramos, es lo mismo, pero

invertimos la columna, lo que significa que

estamos mostrando las cosas de izquierda a derecha

o en dispositivos móviles, eso significa que estamos

mostrando el texto primero, que es la

parte clave allí mismo. Les mostraré

lo que quiero decir muy rápidamente una vez que

desarrollemos esta sección

y regresemos ahora y agreguemos

algo dentro de esa sección

que es va a ser un div

y ese div va a tener un

nombre de clase igual al reverso de la imagen de la sección de puntos del diseño

dentro de allí queremos representar nuestra

imagen,

por lo que esta imagen será una

etiqueta de imagen de cierre automático con una fuente de

factura

alt se va a facturar

y podemos darle un nombre de clase igual a vamos a

hacer algo como w guión 100

h guión que va a ser 100

y vamos a hacer relativo así como un

índice z de 5.

ahora si cerramos esto y lo guardamos

si nos desplazamos hacia abajo, puede ver que tenemos

nuestra hermosa imagen aquí,

pero hay algo que quizás

no haya notado si miramos el diseño

nuevamente,

hay un pequeño

degradado grisáceo justo aquí, así que

agreguemos ese degradado también que realmente

hace la imagen aparece y hace que

parezca que estos elementos 3D

fluyen en la parte superior de la pantalla en este momento,

es solo una imagen en el

fondo negro, por lo que para agregar esos degradados

podemos agregar dos cierres automáticos, así

vamos a dar el primero un nombre de clase

igual a absoluto

z guión tres

menos izquierda y luego

guión

medio como este

también cero superior para que aparezca en la parte superior w

guión cincuenta por ciento

h guión cincuenta por ciento así

y luego guión redondeado completo y también guión

bajo blanco guión bajo gradiente

ahora si guarde esto, ya podemos verlo

aparecer solo un poco, pero está allí

ahora, podemos copiar todo este div, pegarlo

debajo y cambiar solo un par de cosas,

podemos agregar un índice z de cero aquí,

podemos mantener esto a la izquierda

en lugar de arriba, agreguemos una parte inferior de

cero

w y la altura pueden permanecer

redondeadas, pero en lugar de un

degradado blanco, será un degradado rosa,

así que cambiemos este blanco a

rosa,

ahí vamos,

así que ahora se muestran muy bien

juntos y esto se ve genial ahora

vamos expanda para echar un vistazo

y, por supuesto, la imagen es demasiado grande,

por lo que vamos a resolver esto muy pronto,

colapsemos y agreguemos nuestro

texto real que aparecerá en el

lado derecho, será bastante fácil.

encabezados ya creados como

estos y elementos de contenido como este,

así que vamos a crear un nuevo div debajo de este,

ese div tendrá un nombre de clase

igual a la información de la sección de puntos de diseño

y vamos a tener un h2

que dirá h2 esto

controla fácilmente su facturación, puede copiarlo

y, por supuesto, tenemos que agregar esa

etiqueta de interrupción antes de facturar, así que digamos que el

nombre de la clase br es igual a

en un bloque pequeño que generalmente está oculto de esta manera

y, por supuesto, tenemos que darle un

nombre de clase para que sea capaz de verlo así que digamos que

classname

es igual a

styles.heading2

y ahí vamos aquí está

y debajo de eso podemos agregar una etiqueta p

que la etiqueta b va a mostrar este texto

allí mismo

y lo que podemos hacer

es regresar

podemos también asigne un nombre de clase para

que sea un nombre de clase fuera de los

estilos de cadena de plantilla que el párrafo

también tiene un guión máximo con un guión de

470 píxeles

y también el margen de los cinco primeros

y ahí vamos

ahora cuando use estos diseños como

mencioné antes en la estructura de la columna

cuando estamos en tabletas o dispositivos móviles,

como puede ver, el texto aún se muestra

en la parte superior de esta imagen exactamente como

queríamos y eso se debe a que usamos

la sección

inversa,

si entramos y la revisamos,

puede ver que tenemos esto flexionar la columna

inversa, por lo que lo que hace es

tenerla en una fila como esta mostrar esto en

el lado izquierdo mostrar esto en el

lado derecho pero en los dispositivos móviles cuando entramos

en una columna, puede ver aquí el

texto que se muestra en la parte superior y luego la imagen

que lo explica así es exactamente como

debería ser

genial,

así que ese es solo otro pequeño consejo sobre los

dispositivos móviles, a menudo

te encontrarás usando una columna invertida

genial

con eso dicho, solo nos faltan esos

dos botones, así que agreguémoslos de inmediato

Volviendo a nuestra facturación, podemos ir por

debajo de esta etiqueta b, pero aún dentro de

este div

podemos crear otro

div que va a tener un nombre de clase

igual a flex

flex dash row

flex dash wrap en dispositivos pequeños margin

top 10 generalmente margin top 6

y allí podemos renderizar una imagen por ahora,

por supuesto, puede hacer que se

pueda hacer clic en esa imagen, démosle una fuente igual

a apple

alt va a ser google underscore

play

y un nombre de clase puede ser algo así como w

dash 128

píxeles

y nuevamente esto es simplemente se está copiando

desde aquí si hace clic en inspeccionar,

debería poder ver el

ancho y la altura exactos,

ahora volviendo atrás, también podemos darle una

altura de 42 píxeles,

ahí vamos y también podemos darle un

guión de objeto que contenga el

margen derecho 5 y luego el puntero del cursor,

si guardamos esto,

puede ver nuestro botón aquí, este

es el botón de Apple, así que en lugar de Google

Play, digamos que

Apple Store es

genial y ahora podemos duplicar esta

imagen,

cambie esto a Google,

elimine este margen porque esto es

el segundo elemento y podemos mostrar el

google y con eso, créalo o no,

creamos nuestra sección de facturación y se

ve muy bien ahora, en realidad

parece un sitio web real, así que podemos

desplazarnos, tenemos la

sección de características y tenemos la facturación

Esta sección también es esencialmente una

sección de llamado a la acción donde las personas pueden

descargar su aplicación en Google Play o en la tienda de aplicaciones.

Esto se ve genial. La siguiente

sección en nuestra lista será

esta, que nuevamente, como puede ver, es

bastante similar a en el primero, tenemos

un texto a la izquierda, tenemos un botón

y tenemos estas tarjetas aquí, así que

comencemos con eso de inmediato

colapsando la vista de nuestro navegador

y luego volviendo a la aplicación y entrando

en el trato de la tarjeta para comenzar a codificar nuestra

sección de ofertas de tarjetas, que es esta de

aquí, podemos importar de nuevo algunas

cosas, podemos importar la tarjeta que proviene

de los activos de barra de puntos,

también podemos importar estos estilos

que serán una importación predeterminada,

así como el diseño que proviene del

estilo de barra de puntos y podemos importar el

componente de botón que proviene del botón de barra de punto

ahora que tenemos todo lo que necesitamos,

convirtamos esto en una declaración de retorno inmediata

y convirtamos este div en una sección

ahora esta sección tendrá un

nombre de clase igual a diseño. sección

es también tendrá un div que

tendrá un nombre de clase igual a la

información de la sección de puntos de diseño

y también tendrá un h2 allí

que h2 va a representar este fragmento de

texto que podemos copiar,

no olvide que tenemos que agregar esa

etiqueta de interrupción, por lo que será posterior al trato,

agreguemos una etiqueta de interrupción,

tendrá un nombre de clase igual al

del bloque de dispositivos pequeños

y, por lo general, se ocultará

así.

Ahora, lo que podemos hacer es representar la

etiqueta p debajo de

esa etiqueta p. va a representar este texto

y podemos darle algunos estilos al h2

que va a ser el nombre de la clase es igual

a los

estilos punto encabezado 2.

Si retrocedemos

ya podemos verlo y también podemos

darle algunos nombres de clase a nuestra etiqueta p

por lo que va a ser igual a una

cadena de plantilla dinámica de estilos de párrafo de puntos,

también podemos darle un guión máximo con un guión de

480 píxeles como lo hemos hecho hasta ahora

y también podemos darle un margen de los cinco primeros

ahí vamos

y ahora ya tenemos un

componente de botón creado, recuerde desde antes,

así que simplemente podemos llamarlo y proporcionar un

estilo que sea igual al margen superior 10.

pero en este caso parece enorme y

eso se debe a que debería haber estado justo

debajo de la etiqueta p todavía dentro de este div

ahora, si guardamos esto, se

ve mejor

ahora, me parece que este botón

aquí tiene solo un radio de borde leve

que simplemente podemos verificar

mirando la pestaña de inspección aquí

y tiene un radio de borde de 10

píxeles, por lo que si vamos a este botón,

podemos verificar si tenemos ese

radio de borde allí mismo, no, no está allí,

así que hagamos, puede hacer un

radio de borde o el viento de cola tiene una

propiedad redondeada incorporada, por lo que podemos decir

guión redondeado 10 píxeles

si ahora regresa y guárdalo ahí

vamos esto es más

perfecto y ahora tenemos que agregar esa

imagen en el lado derecho que

será para la tarjeta lo

que podemos hacer es volver a la oferta de la tarjeta

y podemos crear un nuevo div justo debajo de

este,

este div tendrá un nombre de clase que

es igual a la

sección de puntos de diseño img,

allí podemos representar una etiqueta img con una

fuente que es igual a card

y alt será algo así como

card

y el nombre de clase es va a ser algo

así como w dash 100

por ciento,

así como h dash 100.

Creo que ahora puedes comenzar a notar el

patrón. Si regresamos, tenemos nuestra

hermosa imagen allí y si

queremos ver esto en todo su esplendor,

ampliémoslo.

es un sitio web hermoso, en este caso

no necesitamos tener un degradado porque

tenemos esta imagen circular detrás de nuestros

elementos, lo que los hace resaltar solo para

brindar algo de diversidad,

pero se ve fenomenal, si puedo

decirlo yo mismo,

ahora estamos vamos a pasar a la siguiente

sección que va a ser un poco

diferente,

va a ser una sección de testimonios,

así que en este caso vamos a tener un

encabezado aquí elemento de contenido aquí y

luego algunas tarjetas como pueden ver vamos

para reutilizar algunas cosas similares a las que

tenemos con estas tarjetas allí mismo, así que en

reaccionar siempre intente reutilizar diferentes

elementos

y observe que no hay muchos

colores, fuentes y

tamaños de texto diferentes, siempre son los mismos encabezados, los

mismos elementos de contenido y luego

colores similares para los botones y otros acentos,

siempre debe ser coherente con

su diseño, así que dicho esto, regresemos,

cerremos nuestro trato de tarjetas y abramos

nuestra sección de testimonios porque ese

será nuestro próximo trabajo para comenzar a

implementar los testimonios que Por

supuesto, podemos comenzar con algunas importaciones. Podemos

importar los comentarios que provienen de las

constantes de barra oblicua.

También podemos importar los estilos que provienen

de los estilos de barra y punto.

También podemos importar un

componente de tarjeta de comentarios que proviene de

esa tarjeta de comentarios. un

componente que aún tenemos que crear

y nuevamente escribí mal los estilos que

provendrán del estilo punto barra

aquí

ahora antes de comenzar a crear el diseño,

veamos cuál es esta retroalimentación

nuevamente, es una matriz simple con un par

de objetos en este caso solo tres que

tienen título de nombre y luego la imagen que

es, así que usémoslo aquí mismo en nuestro

jsx

podemos convertir esto en un retorno instantáneo

de esa manera tenemos un nivel menos de

sangría para que sea más fácil mirarlo

y nosotros podemos convertir esto en una sección,

podemos darle a esa sección una identificación igual a

clientes

y podemos darle un nombre de clase igual a

estilos. relleno

y estilos dot flex center

flex dash call y relativo

ahora dentro de allí queremos tener un

div que va a ser un degradado,

pero por ahora podemos dejarlo vacío, ya que

podremos agregar ese degradado más adelante,

ahora, yendo más allá,

podemos agregar un comentario y decir

hacer por esto aquí

debajo de este div que es un degradado, podemos

representar otro div,

este div se usará para contener

este título en este contexto aquí mismo,

así que lo que podemos hacer es darle un

nombre de clase

igual a

w dash full

flex

justify between

items dash center

on medium dispositivos fila de guiones flexibles

generalmente columna de guiones flexibles

en dispositivos pequeños margen inferior 16

generalmente margen inferior seis relativo

e índice z de uno de esa manera va sobre

el gradiente ahora agreguemos algo

allí tendremos que tomar este título así que

agreguemos un h1 podemos pegar el texto,

podemos agregar una etiqueta de interrupción nuevamente

después de la palabra r para que podamos

agregar aquí una etiqueta de interrupción con un nombre de clase igual

a

en dispositivos pequeños que se bloquearán, por

lo general, se ocultarán y

también podemos aplicar un nombre de clase para este h1

que será el nombre de la clase es igual

a los estilos punto

encabezado 2.

perfecto ahora si volvemos ya podemos

ver eso

y debajo de ese h1 podemos crear un

div que div tendrá un

nombre de clase igual a w dash full en

dispositivos medianos margen superior 0 y generalmente margen

superior 6.

dentro de allí podemos representar nuestra etiqueta p

esa etiqueta p dirá este texto

aquí mismo que podemos copiar

y pegar

y ahora podemos darle algo de clase nombres por

lo que el nombre de la clase

es igual a

eso va a ser una cadena dinámica de

estilos punto párrafo

texto guión izquierdo

máximo guión w guión

450 píxeles

y ahí vamos, podemos verlo aquí

ahora, por supuesto, a continuación que queremos

mapear sobre todos nuestros tarjetas de comentarios, así que

vamos a crear esta tarjeta a continuación, podemos hacer

eso debajo de este div y también debajo de este

div,

así que vamos a crear un div que va a

contener todas las tarjetas, va a tener

un nombre de clase igual al

que va a ser flex flex dash wrap

on los dispositivos pequeños justifican el inicio del tablero,

por lo general, justifican el centro del tablero, el

tablero contiene

comentarios completos, el contenedor del tablero es

relativo

y también el índice z de uno

allí vamos

ahora dentro de allí, podemos

mapear nuestras tarjetas para que podamos decir

feedback.map

obtenemos cada elemento de retroalimentación individual o

en este caso, podemos llamarlo una tarjeta

ahora queremos devolver

algo instantáneamente y vamos a devolver ese

componente de la tarjeta de comentarios, es un

componente de cierre automático que

tendrá una clave igual a card.id

y allí podemos difundir las propiedades

de una tarjeta

y ya sabemos cuáles son, así que si

revisamos los comentarios que serán el

título del nombre del contenido y luego la imagen,

ahora podemos controlar el clic para ingresar a

esa tarjeta

y podemos aceptar inmediatamente esos

accesorios aquí mismo podemos obtener el

contenido,

el nombre, el

título y la imagen,

podemos devolver instantáneamente algo

allí vamos

y ahora vamos a crear la apariencia

de esa tarjeta

que será un div que

tendrá un nombre de clase

igual a Flex

Justify guión entre el

relleno de la columna del guión flexible x es 10 el relleno y es 12

guión redondeado 20 píxeles ancho máximo del guión de 370

píxeles

en dispositivos medianos escritura de margen 10 en

dispositivos pequeños escritura de margen 5

generalmente escritura de margen 0

margen y

5

y luego tarjeta de comentarios

y sé que hay mucho de estilos, pero

si va al diseño y hace clic en

esta tarjeta, puede ver que vamos a

obtener la mayoría de esas propiedades

aquí, como los colores del radio del borde, etc.

Primero que

todo, debemos agregar la imagen,

esa imagen tendrá una fuente y

tenemos que importar esa fuente para que podamos

decir importar

comillas

de los

activos de barra de puntos

y ahora podemos representar la imagen de comillas,

ahí vamos, tenemos tres comillas.

también podemos darle una etiqueta alt igual a

comillas dobles de subrayado

y podemos darle un nombre de clase

igual a w guión 42 píxeles

h guión que será algo así como

27 píxeles

y objeto

guión contiene de nuevo todo eso viene

de figma

ahora debajo de eso, queremos representar una etiqueta p

que representará el contenido que

estamos pasando a través de accesorios

en este momento, es difícil verlo, así que

agreguemos un nombre de clase

igual a font-poppins,

guión de fuente,

guión de texto normal, 18 píxeles,

guión inicial de 32 píxeles.

guión de texto blanco

y margen y de 10

y ahí vamos, tenemos esas tres

hermosas tarjetas allí mismo,

ahora también tenemos que agregar algo más

y esa será esta imagen,

así como el nombre y el título de esa

persona debajo de nuestro p podemos agregar un

div

para ese contenedor,

ese div tendrá un nombre de clase

igual a flex y flex dash row porque

la imagen y el texto

aparecerán en una fila,

primero queremos representar la imagen para poder

decir img

fuente

img proveniente de accesorios

alt será el nombre de esa

persona y luego el nombre de la clase

puede ser

w-48 píxeles

h guión 48 píxeles

y guión redondeado completo para convertirlo en un

círculo ahora, si volvemos, tenemos esos

hermosos imágenes allí

ahora, vamos a crear un div para contener el

nombre y el título

justo debajo de la imagen, ese div

tendrá un nombre de clase

igual a

flex

flex dash column

y margin left 4. la columna es para que

estos elementos de texto aparezcan uno debajo

otro y el margen izquierdo es para dividirlo

de esta imagen

ahora podemos tener un h4 allí

y h4 va a mostrar el nombre

y justo debajo podemos mostrar el título

pero esto estará en una etiqueta p

cuando se trata de la clase nombres, podemos

copiar los nombres de las clases de la etiqueta p inicial,

pegarlos en el h4

y será una fuente poppins,

será semi-negrita esta vez, el

texto será de 20 píxeles de

ancho, será de 32 guiones de

texto blancos y no necesitamos el

margen y,

si volvemos atrás, puede ver que se

ve bien ahora, solo tenemos que copiar

los mismos nombres de clase en la etiqueta p,

será fuente poppins, fuente, el texto normal

será 16 aunque el encabezado va

para ser 24, el

texto será blanco tenue y eso

será todo, no necesitamos el

margen

y ahí vamos

ahora, si regresamos de la tarjeta de comentarios, lo

estamos mapeando correctamente

y finalmente solo estamos falta este

gradiente dentro de nuestros testimonios, así que

antes de que lo veamos en todo su esplendor,

implementemos ese gradiente que

será el nombre de la clase igual a

absoluto para que podamos colocarlo correctamente

índice z de cero para que aparezca detrás del

contenido w guión sesenta por ciento para el ancho

h guión sesenta por ciento para la altura

menos el guión derecho cincuenta por ciento

y luego el guión redondeado completo para convertirlo en un

círculo y luego un guión bajo azul guión

bajo

degradado

y ahí vamos puedes ver ese círculo

aquí mismo en el lado derecho ahora si

expandimos esto

puede ver cómo se envuelve, así que ahora podemos

ver dos aquí y luego uno allá

y

podemos expandirlo

y tenemos exactamente lo que queríamos

lograr, mire esto,

compárelo con esto y podemos

pasar el mouse

para resaltar uno de los testimonios

este se ve muy bien, también observe cómo

estos gradientes transicionan muy bien desde

la parte superior,

luego se mueven aquí, puede verlos

en el lado izquierdo y siguen

moviéndose ahora hacia el lado derecho,

todo se ve perfecto,

ahora la siguiente sección de nuestra lista va

a sean estas empresas aquí mismo

airbnb binance coinbase y dropbox

estas son las empresas

con las que ha trabajado esta empresa,

así que colapsemos esto, desplacémonos hacia abajo y

cerremos nuestros testimonios y

pasemos a nuestros clientes,

estos clientes serán increíblemente

simples, simplemente tenemos que mapa sobre las

imágenes, así que hagámoslo de inmediato,

podemos importar

los clientes que

provienen de las constantes de barra de puntos

y también podemos importar estos estilos que

provienen del estilo de barra de puntos, esta

será una sección propia

y también podemos devolverla instantáneamente.

aquí

ahora

esta sección va a tener un nombre de clase,

va a ser dinámico de estilos dot

flex

center y también margin y 4 para dividirlo

de la parte superior y la parte inferior también,

entonces queremos tener un div este div va

a tener un nombre de clase igual a

eso va a ser estilos

dot flex center también

y flex dash wrap y w-4

dentro de allí queremos mapear sobre nuestros

clientes

y solo para mostrarle qué clientes son

solo será una lista de cuatro

logotipos diferentes para que podamos decir

clients.map,

obtenemos un cliente individual

e instantáneamente queremos devolver un div

que div tendrá una clave igual a

client.id,

arreglemos eso

y dentro de allí queremos renderizar una

imagen

así una imagen tendrá una fuente

igual a client.logo,

tendrá una etiqueta alt igual a

client

y tendrá un nombre de clase

igual a

en dispositivos pequeños,

el ancho es de 192 píxeles, por lo general, el ancho es de

100 píxeles

y va a ser objeto contiene

ahora si guardamos esto y nos desplazamos hacia abajo,

puede ver todas las imágenes aquí,

pero están una encima de la otra,

así que agreguemos algunos nombres de clase a este

div también,

ese será el nombre de clase

dinámico de flex-1, ahí vamos,

también podemos darle un centro de estilos dot flex,

démoslo en dispositivos pequeños, min dash

w dash

192 píxeles

y, por lo general, min dash w dash

120 píxeles,

ahí vamos, así que ahora muestran muy bien que se

envuelven y si los expandimos esto se

ve hermoso

nuevamente, una tarea adicional para ti si quieres

jugar un poco con él,

haz que el color del logotipo

brille o se vuelva blanco puro

una vez que pases el mouse sobre él, sería una

pequeña tarea para usted jugará con él,

así que ahora hemos terminado con la

sección de clientes y estamos listos para pasar a las

etapas finales de nuestro sitio web. Tenemos un

último llamado a la acción si las personas no han

hecho clic en comenzar ahora un par de

veces. una vez que hayamos

terminado con la página, implementemos

esta parte y luego nos moveremos

al pie de página para hacer eso, podemos

colapsar este navegador aquí y

podemos cerrar nuestros clientes y abrir nuestro

cta,

comencemos con nuestro sección de llamada a la acción

importando primero los estilos que

provienen del

estilo de barra diagonal

y también podemos importar el botón que

proviene de ese será el

botón de barra diagonal que es el mismo botón que hemos

creado antes

ahora, convirtamos esto en un retorno inmediato

como este

allí vamos y podemos convertir este div

en una sección

ahora dentro de esa sección vamos

a tener un div más

y luego dentro de ese div vamos

a tener un h2

que h2 va a decir probemos nuestro

servicio ahora

y luego debajo de ese h2 vamos a

tener una etiqueta p y esa etiqueta p va a

decir lo que sea que diga aquí mismo en el

diseño,

copiémoslo también y finalmente

debajo del div que contiene el h2 y la

etiqueta p podemos tener uno más div

y luego ese div va a contener

el componente del botón de cierre automático,

así que ahora, si volvemos,

podrías pensar que vamos a tener

algo

y solo tenemos el botón,

por lo que aún no podemos ver los elementos de texto

y eso es porque no hemos proporcionado

los nombres de las clases,

así que agreguemos un nombre de clase a nuestra sección

que será igual a

una cadena de plantillas dinámicas de estilos dot

flex

center

otra de estilos dot

margin y

y otra que será

estilos dot padding

me sentí como dj khaled al decir

otra, así que vayamos más lejos, tenemos tres de

estas clases y ahora podemos continuar

con dispositivos pequeños, la fila flexible, por

lo general, la columna flexible

b g guión negro guión degradado 2

y luego guión redondeado 20 píxeles

y finalmente sombra de cuadro así que ahora, si guardamos

esto, obtendremos este hermoso

rectángulo

que tiene este bonito color grisáceo con

el botón y el texto, pero ahora

apliquemos un poco de estilo a este div dentro de

él,

podemos darle un nombre de clase igual a

flex- 1

también flex y flex dash hole

ahora podemos diseñar este h2 dándole un

nombre de clase igual a estilos punto encabezado 2

ahí vamos eso es mucho mejor y

podemos diseñar la etiqueta p dándole un

nombre de clase igual a

estilos punto párrafo

y también max dash w dash 470 píxeles y

margin top 5

ahí vamos, también podemos diseñar el botón

un poco, así que vamos a darle un nombre de clase

igual a

styles.flex center

en dispositivos pequeños, el margen izquierdo

será 10, por

lo general, el margen izquierdo es será cero

en dispositivos pequeños, el margen superior

será cero y, por lo general, el margen superior

será 10. Ahora, si guardamos esto, puede

ver que nos queda algo de margen allí

y, si lo expandimos,

puede notar que se escala muy bien.

y llegamos a nuestra vista de escritorio completa,

probemos nuestro servicio ahora, así que se

ve genial, lo último en nuestra lista

es implementar este

pie de página de gran apariencia para comenzar, podemos

contraer esto,

podemos volver a nuestra aplicación, saltar a nuestro

pie de página y profundicemos en el tema,

comencemos importando los estilos que

provienen del estilo de barra de puntos,

importemos el logotipo que proviene de los activos de barras de puntos

e importemos los enlaces de pie de página,

así como las redes sociales que

provienen de las

constantes de barras de puntos, permítanme mostrarles rápidamente cuál es

el Los enlaces de pie de página se ven así, si vamos

aquí, puede notar que en realidad es

una matriz que tiene este gran objeto que

tiene los enlaces útiles y luego los

enlaces útiles contienen múltiples enlaces, como

contenido, cómo funciona, crear, etc.

y luego también tenemos los

enlaces de la comunidad, así que si observamos el diseño,

verá que en realidad tenemos una

serie de un par de enlaces diferentes

enlaces útiles socio de la comunidad y

eso será todo, así que en base a eso

creamos esta estructura agradable donde

tenemos el título y luego, la matriz real

de enlaces,

así que dicho esto, podemos regresar y ahora

podemos comenzar a crear ese pie de página,

convirtamos esto en una

función de flecha de retorno inmediata, ahí vamos

y ahora convirtamos esto en una sección

dentro de este pie de página que vamos para

tener un div,

pero antes de agregar algo a ese div,

formemos los estilos de nuestra sección,

así que regresemos aquí

y démosle un nombre de clase

igual a

eso, será Styles dot flex

center

y styles dot padding y también podemos

dar es una llamada flex dash,

este div también va a tener un nombre de clase

igual al

que va a ser estilos dot flex start

en dispositivos medianos flex dash fila

generalmente flex dash dos puntos margen

inferior ocho por lo que

será mb8 y luego w dash full

great con eso, ahora vamos a comprobarlo,

solo podemos ver un espacio oscuro allí,

pero ahora vamos a agregar un div interno que

contendrá nuestra imagen,

así que vamos a crear un

div que va a tener la imagen

dentro de él, así que vamos a crear un

yo -la etiqueta de imagen de cierre

tendrá una fuente igual al

logotipo

si guardamos esto, podemos ver un logotipo enorme

aquí mismo,

agreguemos una etiqueta alt igual a la del banco

y agreguemos un nombre de clase igual a w

guión

266 píxeles

y h guión eso es van a ser 72 píxeles,

agreguemos también el objeto que contiene

allí, así que esto ya se ve

mucho mejor,

pero, por supuesto, también debemos agregar los

nombres de clase a este div, así que digamos que el

nombre de clase es igual a flex dash one

flex

flex dash columna

justificar el inicio del guión y el margen derecho 10.

ahí vamos y ahora debajo de esta imagen

podemos agregar una etiqueta p

que la etiqueta p dirá algo

así como una nueva forma de hacer que los pagos sean fáciles,

confiables

y seguros,

podemos darle a esa etiqueta p nuestro habitual

nombre de clase que será igual a

estilos. párrafo

y margen superior 4

y también hagamos max dash w dash

310

píxeles

ahí vamos, así que esto ya se ve

mucho mejor

ahora debajo de este div para que podamos salir de este

div allí mismo podemos crear un nuevo div

para los enlaces,

así que vamos a darle un nombre de clase

que será un nombre de clase igual a

flex dash

1.5 w dash full

flex flex dash fila justificar entre

flex dash wrap en dispositivos medianos margin

top 0 y luego generalmente margin top 10.

ahora, por supuesto, tenemos que mapear sobre esos

enlaces de pie de página, así que digamos enlaces de pie de página mapa de puntos,

obtenemos un enlace de pie de página individual,

así que digamos enlace de pie de página

y queremos devolver

algo instantáneamente y ese algo va a

ser otro div que div tiene que tiene

una clave porque estamos mapeando sobre ella, por lo que

serán enlaces de pie de página o, más bien,

clave de punto de enlace de pie de página,

tendrá un nombre de clase igual a

flex flex dash call

ss

my

0

generalmente mi 4

ancho mínimo de guión guión 150 píxeles

así

ahora todavía no podemos ver nada, pero ahora

finalmente vamos a mapear sobre los elementos de nuestra lista,

así que primero vamos a tener un h4

y este h4 va a representar el

título del punto del enlace del pie de página, recuerde que

cada serie de enlaces tendrá

su propio título, así que comencemos con el

primero

y luego, mientras hacemos eso, podemos

convertir inmediatamente la ul en una

lista desordenada dentro de esa lista desordenada, vamos a

recorrer una vez más el

enlace de pie de página, los enlaces de puntos, el

mapa de puntos y vamos a obtener

ese enlace individual,

también podemos extraer el índice desde aquí

ahora para cada enlace que queremos representar una

etiqueta li

que va a tener una clave igual

al nombre del punto del enlace y también podemos darle

un nombre de clase

aquí mismo,

vamos a

hacer font dash poppins

font dash normal

text dash 16 pixels también agreguemos un

encabezado de 24 pixels text dash dim white

y al pasar el mouse

queremos darle un text dash secundario

finalmente cursor dash pointer

ahora si guardamos esto

no podemos ver nada todavía porque

no estamos representando ningún texto, pero ahora, si agregamos

un nombre de punto de enlace aquí, puede ver todos los

enlaces,

agreguemos también un nombre de clase para el h4

para que podamos ver los títulos también,

así que eso es todo. para ser el nombre de la clase es

igual a

font dash poppins font dash medium

text dash 18 píxeles de avance se

establecerá en 27 píxeles

y texto en blanco

y ahí vamos,

esto se ve hermoso, puede ver

que nuestro color secundario usa los

colores del logotipo, por lo que también coincide

y actualmente el logotipo parece un poco

demasiado grande, pero parece que es así

en el diseño que veremos más adelante

una vez que lo expandamos y también tenemos que

agregar un margen entre los enlaces Entonces,

lo que tenemos que hacer es solo

agregar el margen en todos los enlaces que

no son los últimos en la columna. Entonces, lo que

podemos hacer es decir

si el índice no es igual a

footer.links

menos uno, eso nos dará el

último, por lo que si no es el último,

en ese caso queremos representar el

margen inferior de cuatro y, por lo general,

podemos representar el margen inferior de cero

porque no queremos agregar un margen

inferior al último enlace y parece que

escribí mal algo, esto aquí

se suponía que era un enlace de punto de enlace de pie de página,

así que ahora, si nos desplazamos hacia abajo, pueden ver

que ahora tienen algo de margen y me

parece que también nos falta algo de

margen en este h4 en lugar de en el ul así que vamos a

darle a esto un nombre de clase

igual a list dash none

así como margin top of 4 para dividirlo

un poco ahora el espaciado se siente natural

y esto se ve mucho mejor

la última parte de nuestro pie de página es la

parte inferior tenemos esto línea aquí

tenemos los derechos de autor y luego tenemos

los íconos de las redes sociales, así que

implementemos esa parte para eso, tendremos que

salir de un div y luego del segundo div

también y luego tendremos que crear

un div final este div va a

tener una etiqueta p dentro de allí, así que

primero agreguemos esa etiqueta p que será

este texto de derechos de autor que podemos ver

allí para que podamos copiar desde el

diseño

y mientras estamos aquí también podemos copiar

los nombres de clase para que podemos copiarlos

del h4 porque son más o

menos iguales,

así que copiemos esto y luego lo peguemos

aquí

ahora, si retrocedemos, podemos ver que todos los

derechos están reservados,

pero será un poco

diferente, así que tenemos font poppins font

se establecerá en normal aquí y

queremos agregar el centro del tablero de texto,

todo lo demás será igual,

finalmente, podemos agregar un div debajo de la etiqueta p

que servirá como contenedor para los

íconos de redes sociales, así que podemos darle un

nombre de clase igual a flex

flex dash row

en dispositivos medianos margin top 0 y luego

generalmente

margin top 6.

dentro de allí podemos mapear sobre nuestros

íconos de redes sociales diciendo

socialmedia.map

vamos a obtener uno social y luego

vamos a obtener el índice también

ahora queremos cerrar esto correctamente

y luego para cada red social que queremos

devolver una imagen

podemos dar una clave para cada una de estas

imágenes que será social.id

queremos darle una fuente que

será social.icon

también podemos darle una etiqueta alt que también será

social

dot id

y finalmente vamos a darle un nombre de clase,

pero antes de hacerlo, guardémoslo como

esto

para verlos allí, vamos y ahora podemos

diseñarlos, así que agreguemos una cadena dinámica,

tendrán una w de 21 píxeles,

ese es el ancho,

la altura también se establecerá en 21

píxeles como este

objeto será configurado para contener

en lugar de que el objeto contenga el

cursor se configurará como puntero

y luego lo mismo que hemos hecho

con los márgenes antes de querer verificar si

el índice no es igual a la

longitud del punto de las redes sociales -1

si no es así entonces nosotros queremos aplicar un

margen a la derecha de 6 y luego, por lo general,

queremos aplicar

un margen a la derecha de 0. Entonces,

agréguelo allí,

vamos, lo único que queda por hacer es

poner estos en una fila, el texto

aquí y los íconos. Así que hagámoslo

diseñando este div externo allí mismo.

Podemos darle un nombre de clase igual a w

guión completo.

También podemos darle un guión de justificación flexible

entre los

elementos. Centro de guión

en dispositivos medianos.

Fila de guión flexible. se establecerá en 6.

border dash t para la parte superior

será de 1 píxel

border dash t

dash y luego queremos aplicar un color,

así que hagamos algo como 3 f 3 e

5

nuevamente, esto se puede copiar del diseño

que es eso color grisáceo justo ahí

y ahora tenemos nuestro pie de página, ampliémoslo

para verlo en todo su esplendor, ahí

vamos,

pie de página del banco aquí, si

lo comparamos con el sitio terminado y nos desplazamos

hacia abajo, pueden ver que es

exactamente igual,

pero esto el color aquí parece ser

un poco diferente, así que veamos si el

color se aplicó de la manera correcta,

colapsemos esto un poco

para que sea un guión de borde d y

luego un guión,

verifiquemos correctamente 3f3e45

eso debería estar allí vamos así que ahora

es un poco más sutil

y dicho esto podemos cerrar el

pie de página lo creas o no hemos llegado

al final del proceso de construcción de esta

aplicación fenomenal juntos

colapsémosla y veamos en toda su

gloria

ahí estamos

ve, vamos a desplazarnos rápidamente

imagina que estás creando esta empresa para

un cliente es un cliente bancario gran

corporación que realiza operaciones bancarias el método de pago de próxima generación

3 800 usuarios activos muchas

empresas confiables tienen recompensas están

asegurados tienen transferencia de saldo ellos

tenemos algún tipo de facturación

podemos ver las descripciones allí mismo

podemos descargarlo en la tienda de aplicaciones y

google play

podemos comenzar usando sus

métodos inmediatamente tienen algunos

testimonios geniales aquí por herman steve

y ken han sido utilizados por compañías

como airbnb y binance e

inmediatamente podemos probar su negocio

o verificar más información usando este

pie de página aquí mismo,

todo se ve muy bien y, por

supuesto, lo realmente importante para mencionar

es que la versión móvil también se ve

muy bien si nos desplazamos rápidamente

a través de ella. puede notar que

todo responde completamente a dispositivos móviles, por lo que, a medida que

sigo desplazándome, se siente tan

natural y genial

con ese trabajo increíble al crear

esta aplicación. Ahora le enseñaré

cómo implementarlo

para implementar nuestro sitio web.

cree una compilación de producción optimizada, así que

cerremos todos nuestros archivos, colapse

todas nuestras carpetas y vayamos a ver y

luego a la terminal, podemos

borrarlo y luego puede ingresar a la aplicación moderna del banco

o como llame a su carpeta

y puede ejecutar mpm ejecute build

esto va a crear una

compilación de producción optimizada

y en solo un par de segundos puede

ver que todos nuestros activos están

aquí junto con

index.html y todos esos archivos se

han colocado dentro de una carpeta dist,

así que vamos a la derecha -haga clic aquí y luego haga clic en

revelar en el explorador de archivos o abrir en el

buscador si está en Mac

una vez que lo haga, podrá ver

todos sus archivos allí mismo, pero por

supuesto ahora tenemos que implementarlos

con eso tenga en cuenta que estamos de vuelta en

nuestro tablero de hosting

ahora aquí podrá encontrar su

alojamiento compartido premium y también

encontrará un botón para configurar un dominio si aún

no lo ha hecho, así que sigamos adelante y haga

clic en administrar eso es Vamos a abrir nuestra

cuenta de alojamiento y luego puede buscar

archivos.

Podemos hacer clic en el administrador de archivos.

Si ahora vamos a la

carpeta html de subrayado público, verá que

solo hay un archivo predeterminado.php que

podemos eliminar. simplemente presionemos el

botón Eliminar y elimínelo.

Aquí es donde irá nuestra carpeta dist

para que podamos recuperar nuestra aplicación moderna del banco

e ir dentro de esta carpeta.

Lo único que tiene que hacer es seleccionar

todos los archivos y luego arrastrar y soltar.

ellos aquí mismo

esto va a cargar todos los archivos

y van a estar en funcionamiento

en un segundo y eso es todo ahora

podemos volver a nuestro panel de alojamiento

y podemos hacer clic en nuestro dominio principal

y en sólo un par de segundos, nuestro

sitio web ahora está disponible en el nombre de dominio que

elegimos y no estoy seguro de si lo

notó, pero se cargó increíblemente rápido

ahora podemos admirarlo en todo su esplendor

y puede compartirlo con todos los demás,

puede ponerlo su cartera, muéstrela

a sus amigos o envíela a sus

clientes potenciales

y, como puede ver en este candado, el

certificado SSL se ha

incluido automáticamente, por lo que ni siquiera

tuvimos que hacer nada allí

nuevamente, el proceso es increíblemente simple

y lo haría. recomiendo alojarla a

todos para el sitio web de su cartera para

los sitios web de sus clientes o solo para

los proyectos con los que está jugando, ya que acaba de

ver que el proceso de implementación de su

sitio web con hostinger es perfecto, por lo que se

lo recomendaría no solo para

sitios web como estos para sus

clientes potenciales, pero también para el

sitio web de su cartera, dicho esto,

será un trabajo fenomenal para este video al

llegar tan lejos y construir esta gran

aplicación una vez más si queremos

verificar otro sitio web que está en alojamiento

o servidores eso es va a ser js

mastery.pro

este es otro hermoso sitio web que he

creado, pero nuevamente ese no es el

punto principal, el punto principal son estos

cursos basados en proyectos que puede usar

para mejorar sus habilidades de desarrollo

de inmediato, puede seguir adelante y elegir

la película parte 1 si desea pulir

sus habilidades de reacción y luego si desea

sumergirse en el territorio nuevo e inexplorado

de la web 3, el proyecto de mercado nft

es para usted y si no

lo vio al principio también está el

sección de guías gratuitas para que pueda obtener

muchas guías gratuitas completamente gratis, puede

usar esto como libros de referencia, libros electrónicos o

hojas de ruta completas

con ese increíble trabajo al llegar

al final de este video, muchas gracias

por mirar y ya veré usted en el

próximo que tenga un maravilloso día

[Música]

usted