Build and Deploy 4 Modern React Apps and Get Hired as a Frontend Developer | Full 10-Hour Course

hi there and welcome to the ultimate course where you'll build and deploy not one not two not three but four modern UI ux applications and get hired as a front-end developer I'm talking modern responsive beautifully designed industry ready applications in this course you'll learn how to take figma designs and turn them into a full-fledged website all the way from design over development to deployment on your own hosting and domain name using hostinger I'll even teach you how to create the ultimate developer portfolio so you can share it with your potential employers this course will single-handedly allow you to make your breakthrough in the industry and get a high paying and a well-appreciated web development job here are the projects you'll build the first application on our list is a fully responsive modern UI ux web website and reaction yes this tutorial will teach you how to take a figma design and turn it into a beautiful website the second app you'll build is a modern restaurant web application this project is perfect for you if you want to improve your CSS skills and create modern react.js websites after that fantastic application you'll build another one you'll build a modern website in react but this time with Tailwind it has a stunning hero section high quality assets and gradients business stats reusable feature sections with call to action buttons testimonials and more and finally you'll build a perfect development portfolio from scratch so you can showcase all the excellent web applications you've built in this course and make your first impression with employers count presenting a well-designed and developed flexible portfolio will make you stand out from the crowd before we dive into the project I have an incredibly important announcement for you we've recently added the free resources section to the jsmaster3.pro website the link is in the description so from now on alongside the professional project-based courses such as filmfire and nfdmark Marketplace you can get entirely free guides and eBooks about react web 3 and front-end back-end 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 so far we've mentioned what you'll build in this video but I haven't told you what you'll learn and that's what matters in this compilation of videos you'll learn react functional components and their reusability react file and folder structure fundamental CSS properties to Master Flex and grid fundamentals of the CSS bam model from soft and pleasant animations to complex gradients perfectly placed media queries for satisfactory responsiveness covering almost all devices and at the end you'll learn how to deploy your websites to incredibly fast servers and give them a custom main name with that said let's dive straight into the first project [Music] before we start building out our project let's first get the hosting and the domain name for a new site your portfolio or any website you'll create in the future hostinger is my personal recommendation and right now they're offering crazy Black Friday deals so I simply needed to show this to you the link with an extra discount is in the description let's click the claim deal button and as you can see right now hostinger offers an 80 discount for a four year subscription to the premium shared web hosting plan for about two bucks a month you can host 100 websites and you'll even receive a free domain this deal is of course valid only for a limited amount of time hostinger offers an excellent price to Quality ratio high speed servers and most importantly 24 7 chat support this Black Friday deal is an absolute steal I mean two dollars a month for hosting 100 websites and you also get a free SSL certificate which means you'll have https security you also get a free email and most importantly a free domain name we need our four industry standard applications you'll build in this video to be fast reliable and trustworthy all of the features you'll get with this hosting plan will make all the difference since I've partnered with hostinger they decided to give you an even bigger discount you can find the link and a unique discount code in the description enjoy once you visit the link in the description click claim deal and then add to cart here we have to choose the period of our hosting with the 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 but even more importantly you can enter a custom coupon code I prepared for you so just click right here and type JavaScript Mastery all caps no spaces and click apply there we go the coupon has been applied and you can safely make a purchase after you complete the checkout you'll be redirected to the hostinger's dashboard I'll see you there as you can see I'm personally using hostinger for my brand for all of my websites if you purchase the premium shared hosting you should see this claim domain button right here let's try with gpt3-jsm and as you can see it was 14 bucks before and now we get it completely for free so let's go ahead and click claim domain our domain is being registered right now and this is our domain overview what we can do right now is go back to home and we can set up our premium shared hosting so let's go to setup we can click Start now and as you can see hostinger offers immediate hosting with WordPress and woocommerce but in this case we're going to click this button at the bottom skip I will start from scratch we can choose a domain right here and finish setup the setup is right now being initialized and after that is done we'll be able to start coding out our project and then at the end of the video we're gonna deploy our website while our hosting is setting up I just wanted to quickly let you know that there is the GitHub repository containing the entire code for this project so if you ever get stuck just make sure to visit this GitHub and compare your code with the code that's on here that should help you solve all of your issues for you while you're here I would also appreciate it if you gave this repository a star there we go our website is ready let's go to a control panel and here we are at the end of the video as I've mentioned we're simply going to deploy our code right here using the file manager with that said let's dive straight into the code as we always do on JavaScript Mastery we're going to start from the complete Beginning by creating a new empty folder we can name it something like gpt3 underscore and you can put your name here in this case I'm going to say JSM once you have your folder you can then open up an empty Visual Studio code window and simply drag and drop it there once you do that you can go to view and then terminal this is going to open up the integrated Visual Studio code terminal that's going to allow us to initialize our react application and let me show you how you can do that we can start by running MPX create Dash react Dash app and then simply type dot slash this is going to initialize a new react application straight inside of the newly created folder of course to run this command you have to have node installed so if you don't already have node simply Google node and download it that way you'll be able to run this command if you came across any issues this process is going to take about a minute so I'm going to pause this video and I'll be right back and our app finished initializing you should be able to see a few files and folders pop up so let's go ahead and see what that is about in my case first thing I have is the get folder for some of you this might be hidden but completely ignore that because it's not going to be important for the rest of this video then we have our node modules which is going to contain all of the dependencies we're going to install this is our public folder where we have the index.html we're going to hook our entire react application to and finally the most important folder is the source folder this is where we're going to create our react components as you can see right now there is a lot of files and folders that we might not need so what I usually like to do is completely delete the source folder and then create a new one from scratch that way I'll show you how everything is done completely from scratch and we won't have any unused files our folder was deleted and we can create a new one by simply typing Source or SRC then we can create the most important react file which is the index.js inside of there we can say import that's going to be react from react and only in this file we also need to import react Dom from react Dash Dom this is going to allow us to hook our react application to our index.html let me show you how you can say react Dom dot render and we want to render the application so we can type app like this as a component and we want to render it by saying document dot get element by ID and that's going to be root now as you can see this is red right now because our app hasn't been defined so for now let's simply say import app from dot slash app right now this file doesn't exist yet but we're going to create it really soon and let me also explain the second part what is this div with an idea of root well if we go into the public folder index.html you'll be able to notice that we have a big file here but if we space this out correctly remove some of the comments here some of the comments there also remove this comment in this no script here you'll be able to notice that this is nothing more than a most basic HTML file that has just one div with an idea of root inside of here our entire application will go so that's exactly what we're doing here we're saying this app component is going to be rendered inside of the div with an ID of root so now let's create that app inside of the source we can create a new file called app.js inside of there we can run a command called rafce This is a react functional component if what I've just done seems like magic to you you might not have the right extension so just go ahead and search for es7 Snippets and then download and install es7 react Redux graphql react native Snippets once you do that and reload your Visual Studio code you should be able to run this command and immediately get a functional component like this one this is going to simplify and speed up your workflow inside of here for now we can just create an H1 tag and simply say gpt3 inside of there now before we go ahead and run our application we can go to view and terminal and just install the dependencies that we're going to use this is a special project video because we're going to use just one single dependency so you can type npm install and that's going to be react Dash icons and why is that so special because everything you're going to see in this video is going to be done from scratch without using extra dependencies we're going to turn that figma design into a compelling website without using any dependencies just by using your react skills we're going to give this dependency a moment to install and we'll be right back there we go our dependency installed and we can simply type npm start to start our application on localhost 3000 and if we've done everything correctly we should be able to see just one single heading saying gpt3 doesn't look like something right now just a basic white page with nothing on it but soon enough this is going to be filled with code assets colors backgrounds everything and it's going to look and feel amazing so to start off let's create the basic folder and file structure for our entire project this might seem like a boring process to start with but this is going to save us so much time later on so the first thing we can do is create a new folder inside of the source folder called components inside of our components we're going to have just a few components and these are going to be article then also inside the components folder we're going to have the brand component we are also going to have a call to action or a CTA component we're going to have a feature component and finally we're going to have our navigation bar so we can call it navbar now each one of these components is going to have two different files the first one is going to be the corresponding component so inside of the article that's going to be article.jsx that article is going to be a functional component so we can again type rafce for now you can simply render out the article inside of each component folder we're going to have one more file and it's going to be called the same as the folder in this case article but it's going to be a CSS file so these are going to be the styles for this specific component and we can simply import them by saying import dot slash article dot CSS great now what we can do is we can repeat the process for all of the other components so I'm going to copy this entire thing and simply do the same thing for the brand right here we can create a new file called brand.jsx and I'm simply going to paste it here now we just have to change a few things we can do that by holding the ALT key and then double clicking wherever we mention the Articles now I'm going to rename that to brand and I'm going to rename the CSS to Brand as well finally we have to create a new file called brand.css now again we can repeat this process for our CTA so let's create a new component called cta.jsx paste everything again we're going to rename it to CTA and it's going to be cta.css inside of there we can also create that cta.css file we can again repeat the same thing for the feature by creating a new feature.jsx component and right here you can simply paste what we have rename it to feature and also feature dot CSS as I've already mentioned this process might be a bit boring to start with but it's going to make her life so much simpler later on let's also create one new file it's going to be called feature dot CSS and the last component on our list is going to be the navigation bar so let's create a navbar.jsx again we're going to paste it rename this to navbar and change this to navbar dot CSS and finally we're going to add the navbar.css file right here great now we have the files and folders for all of our components I'm going to close all of our open files by pressing Ctrl and then w a few times just so we have a clean working environment and now we can also export all of these components from a single file usually we would have to do something like this import article from dot slash components slash article and then one more time article to get to the exact component and now if we wanted to use all of these components in this file we'd have to repeat this line for every single component the second one would be brand third one would be CTA and so on I think you can see the point this is getting quite repetitive and there is a simple fix to that we can simply go to the components folder and create one new file called index.js inside of this file we can say export in curly braces default as and we can give the name of our component like article from that's going to be dot slash article forward slash article so basically what we're doing is we're exporting the article from this index file and from this index file we can also export all of the other components so this one is going to be brand from Rand then we can repeat the process that's going to be CTA from CTA we're also going to have a feature component like this from the featured folder and finally we need our navigation bar so that's going to be navbar from navbar forward slash navbar now with this approach inside of our app we can import all of these components in one line believe it or not the only thing we have to do is say Import in curly braces article brand CTA and any other component you want from dot slash components and they're going to be imported automatically that's great that's a phenomenal trick that you can from now on use in all of your react applications but in this case we won't be importing our components straight inside of our app the components will be imported inside of our containers and that's another great tip I can give you we're going to structure our react application in a few files and folders we're going to have the components folder for smaller components and then we're going to create a new folder called containers this is going to be for our bigger components containing multiple of the components at the same time you can think about a container like a bigger section of the page so let's go ahead and repeat the process for our containers we're going to have quite a few one is going to be called blog then the second one is going to be called features multiple then we're going to have a footer we're also going to have a header we're going to have a possibility section like this and we're going to have a what gbt 3. there we go so now for all of these containers we can again create a similar structure where we're going to create a new file called blog.jsx and we're also going to have the blog.css there we go again we can simply keep copying and pasting an empty component for now so let's go ahead to our blog rename this to blog and this is going to be blog.css and I'm going to say it one more time I know this is getting repetitive but later on we'll be able to just switch between the components and start implementing real logic and real design to each one of them just bear with me for a few more minutes and we're going to go through it really soon the second container on our list is going to be the features container so let's create a features.jsx component paste it here and simply change this to features the CSS file is going to be features dot CSS so we can create it right here then we're going to have our footer so we can create a footer.jsx again paste it and simply change everything to footer and footer.css we can again go ahead and add the footer.css file we can again repeat the same thing for the header so create a new header.jsx file and heather.css paste our component into the header.jsx and simply rename everything to header and header two more files remaining we're going to repeat the same thing for possibility Dot jsx paste it here change everything and also change the CSS file and add that same CSS file right here and the last container on our list is what gpt3.jsx we can simply paste everything say what gpt3 and in here that's going to be what gpt3. CSS so let's go ahead and add it What gpt3 DOT CSS and with that we are quite done with all of our files and folders the only thing we have to do is add this index.js file to export all of the containers as well so that we can use it straight inside of our react application let's go ahead and create a new index.js file inside of the containers right here and now we can do the same thing export default as that's going to be blog from dot slash blog forward slash blog now we can duplicate this a few more times the second thing on our list is going to be features from the features folder the third thing is going to be the footer from the footer folder then we're going to have the header from the header folder and we're going to have the possibility possibility from the possibility folder and the last thing is going to be what GPT 3 section and that's going to be it now we can close all of our files and folders like this there we go collapse everything and just go back inside of our app.js inside of here we can use that trick that I showed you earlier we can Import in curly braces footer blog we're gonna also import possibility then we're going to import features what gpt3 and finally the header all of this is coming from dot slash and that is containers finally we're going to need a few components so we're going to import CTA brand and also the nav bar these are coming from dot slash components using the tricks I showed you earlier you can see how clean our code looks like this here would be more than 10 lines but now we have it in just two and it's easily noticeable where we're importing certain things from finally to complete our long setup we're simply going to make use of all of these components right here we're going to remove this H1 we're going to have a div that's going to have a class name it's right here we can add a class name equal to app then we're going to have one more div inside of it and this div is going to have a class name equal to gradient underscore underscore BG inside of here we're going to have our navigation bar so we can say navbar as a self closing tab and we're also going to have our header below this div we're going to have our brand to say what our brand is about then we're also going to have what gpt3 we're also going to have the features tab after that then we're going to have the possibility tab or section rather then we're going to have the click to action and finally a Blog section and the last thing of course is going to be the footer I think that now you should be able to understand what have we been doing so far we've been setting up the file and folder structure and now used all of these containers and components inside of our app so now if we go back to the browser you can notice that everything is structured right here and separated into components that's all that react is about have one single website be it a single page or a multi-page but don't have tens of thousands or thousands of line as you would in a single index HTML file with react you can separate everything into smaller components as we've done right now and now we can code them out separately to keep our code base readable of course this doesn't look that good for now but as I've told you this is going to save us so much time in the future because our entire folder and file structure is now done with that said let's go ahead and start implementing the General application Styles and then we're going to go to the first component on our list which is the navigation bar to create our main application Styles we can create a new file inside of our source called app.css and then we can simply import it right here inside of the app.js by saying import dot slash app dot CSS in here we're going to implement some of the general Styles we can start with a star or an asterisk for all the elements we want to set the Box sizing to be equal to border Dash box then we're going to set the padding for all elements to be 0 and margin to be zero as well we also want to add the scroll Behavior to be smooth for our scrolling later on and then we're going to add our body tag and we're going to set our background to be VAR dash dash Color dash BG this is a CSS variable for our background color we won't be typing the variable names every time we're simply going to use the variables themselves so we can create one more CSS file called index.css inside of there you can simply copy and paste my code because this is going to be just the setup in here I'm going to give you access to some kind of gradients color backgrounds colors for the footer background blog text and so on and in here we're also importing the font So Below this video there's going to be a GitHub gist where you'll be able to find the index.css file and simply copy and paste it here once you have that inside of our index.js you can simply import that slash index.css that file is now going to allow us to use these variables everywhere else in our code we can now save this file and see if we have our background and there we go you cannot see the text anymore because it's black but our background is now dark as well now let's add some basic styling as well for our anchor tags we're going to set the color to be set to Onset and we're going to remove that text decoration To None usually it's set to underline now let's focus on the important part and that is adding the gradient let me show you what I mean in here I have our figma design file and as you can see there is some kind of gradient right here on the top left it is kind of bluish and then it transitions to this darker color so let's go ahead and add that gradient to create the gradient we're going to use this angrytools.com forward slash gradient this is a great tool that's going to help us with creating our CSS gradients the link is going to be of course down in the description under resources I zoomed everything in so that you can see it a bit better and now let's start by adding our first color we can click on this yellow color right here go to hex and the first color on our list is going to be zero zero two eight five three this is going to be the dark blue color you can click on the middle one and click delete and now on the right side we're going to exchange this pink color with a hexadecimal color of 0 4 0 c 1 8 this is going to be the dark color finally we're going to switch this to radial and we're going to say three percent on the x-axis and 25 percent on the y-axis you can see our circle is now on the top left and that is exactly where we want to have our gradient as you can see our background has been created and we even have some web kits for this to work on all of the different browsers let's go ahead and copy this we can go back to the code and let's call this class gradient underscore underscore BG and in here we can simply paste everything great this is a phenomenal tool to create your backgrounds now let's see if this is actually working if we go back to our website and reload you can see that there's this gradient right here right now it doesn't look like something but once we add all of the illustrations and all the text for our header it's going to look so much better now let's also add a class for our gradient text so we can say gradient and then underscore underscore text in here I'm going to add a background which is going to be VAR and that's going to be dash dash gradient Dash text then we're going to add the background Dash clip to be equal to text and we can add webkits as well for this to work on all browsers Dash webkit Dash background Dash clip that's going to be text and finally dash webkit dash text Dash fill and then Dash color that's going to be set to transparent great have we used the gradient text somewhere I don't think we have yet but we're going to use it soon enough now we also want to implement some styles for the sections because we're going to have many sections later on so it's better to implement the Styles right away so I'm going to say dot section underscore underscore padding and we're going to give it padding of four RAM on top and bottom and six RAM on left and right now we can copy this and paste it below but of course we don't have a column right here and we're simply going to rename this to section margin and then change the margin in the same way with it here great finally we also want to add some custom CSS animations and we don't need to code them from scratch let me show you a great tool that you can use the tool is called animista.net and I'm going to put this link below as well basically in here you can find a lot of different animations that you can play with and use in your code in this case we're going to use the basic scale up animation it opens up from the middle and you can get the code right here on the right side there we go so we can simply copy this class based it in our code right here and then one more time copy the keyframes there we go in this case we can remove this text right here so now we have the keyframes and we also have the scale up Center animation again this is something that we're not using right now but we're going to use it for every single section later on and the last thing we have to do for our app.css is to add some media queries so we could say add media screen and this is going to be Max Dash width set to 700 BX so this is going to be 4r let's say middle size devices like tablets or bigger phones in here we simply want to say section underscore underscore padding is going to be set to padding for Ram and we're going to do the same thing with the margin so I'm simply going to duplicate this below and rename this to margin but it's always going to be for REM it's not going to be 4 6 as before it's going to be just set to 4. that way it looks better with devices with Max width of 700. now we can copy this entire thing paste below one more time and this is going to be for mobile devices so max width 550 pixels in this case we're simply going to set this to 4 RAM and then 2 RAM on the horizontal axis and that's going to be it for app.css I know we haven't seen a lot of these changes we've created but again these are the styles that we're going to use throughout our entire application but with that said now we are ready to start creating our navigation bar we have our gradient we have everything we need let's go ahead and start with our navigation bar we are inside of the app.js and now we can simply use the control click to quickly move to the navigation bar component and we can start implementing it right here before we start implementing the code we can import a few icons so we can say import RI menu 3 line as well as the ri react icons close line and this is coming from react Dash icons forward slash RI now inside of here we can have a div and this div is going to have a class name that class name is going to be equal to gpt3 underscore underscore navbar inside of that div we're going to have one more div and this div is going to have a class name equal to gpt3 underscore underscore navbar Dash links and you can notice that there is something specific with how we name our class names we're using a specific CSS naming convention called bem let me type that right here that is bem and it stands for Block element modifier so if you want to read more about them and use it yourself on the future projects it's going to be linked below but again it's not crucial for you to fully understand them to keep watching this video so let's keep it going and soon enough I'm going to put the browser and the editor side by side so that we can see the changes in real time but let's quickly finish up this part of the navigation bar inside of this div we're going to have one final div and this div is going to have a class name equal to GPT 3 underscore underscore navbar Dash links underscore logo inside of there going to have an image like this a self-closing tag and that image is going to have a source set to logo we can also add the alternative tag which is going to say logo now as you can notice we don't have access to our logo image so now this might be the best time to import all of our assets we can do that in a few ways for example by manually selecting each specific image and then going to export right here on figma as you can see right here if you click export you're gonna get that one specific image so if you're creating future sites for yourself following your figma design then this is the best way to do it the second way is to click right here and then click export and get all of the specific illustrations but in this case since you're following this video to make things simpler for you down below you can simply find a link to download all of the assets we'll be using in this project then once you download those assets you'll be able to create a new folder in the source folder called assets and then there you'll be able to Simply drag and drop all of the assets that we're going to use we're going to use a few images for our blogs also the links to specific companies the AI image but in this case we need our logo so just download all of the files below and you'll be able to continue following along with the video with that said now we can import that logo by saying import logo from dot slash dot slash assets and then logo dot SVG great let's go ahead and see how does this look like in our browser and there we go you can see that we have our logo right here on the top left but of course we still haven't added all of the classes for our navigation bar and that's going to be our next step so now we can put side by side the browser and the editor so that we can see in real time what changes are we making there we go I've put the editor and the browser side by side you can do the same thing on your device and then we can go ahead and start implementing those class names to make our navigation bar and header looked great we've written three of these classes so we can go ahead and go to the navbar.css and Implement them let's start with DOT gpt3 underscore underscore navbar our navigation bar is going to be of a display is set to flex it's also going to have the justify content space between and align items Center finally let's give it some padding padding to REM on top and bottom and six RAM on the left and right if we save it this immediately made it look so much better now let's style the links we can say dot gpt3 underscore underscore navbar Dash links in here we're going to give it a flex one we're also going to say display Flex justify Dash content is going to be set to flex start and finally the Align items is going to be set to Center we cannot see any changes yet because we haven't added the links but we can do something for the logo dot gpt3 underscore underscore navbar Dash links underscore logo and right here we can give it a margin right of 2 RAM we can also modify the image width and height by saying dot gpt3 we can basically copy what we have but we're going to Target the image inside of this specific div and we can give it a width off let's do 62 pixels as well as the height equal to 16 pixels that made it a lot smaller and you might be wondering where did I get those values from so let's just compare the design with what we have right now there we go if you click on it you'll be able to inspect it and right here you can see if we want to be precise this is going to be 60 to 56 and it's going to be 1602. so you really want to be precise with those values because we're going to be getting them from the figma file itself great with that said we can continue adding the navigation links to our navigation bar so let's go back to the nav bar and now below this image we want to add a div this div is going to have a class name equal to gpt3 underscore underscore navbar Dash links underscore container inside of there we're going to have a paragraph and inside of that paragraph we're going to have an anchor tag an anchor tag the first one at least is going to point to Hash or pound uh home and it's simply going to say home now we can duplicate this four more times and the second one is going to say what is gpt3 then the third one is going to say open AI and again I'm simply looking at what we have on the design right here there we go what is gpt3 open AI case studies and Library so let's add case studies and the last thing is going to be the library now we can modify the links so the second one is going to point to what or wgbt3 the open AI can simply point to possibility then we're going to have our features and the last one is going to be block grade let's save it and inside of our react app as soon as you reload you should be able to see the links right here but they're not that visible because they are written in black with small letters here so let's go ahead and add the classes that are going to fix that let's start by going to not bar CSS and right here after we modify the image we can say dot gpt3 underscore underscore navbar Dash links underscore container and we're simply going to give it a display is equal to flex as well as the flex direction is set to row it's at row by default but it's just good to know that we're doing that here as well then we can do one more class dot gpt3 underscore underscore navbar Dash sign this is going to be for our sign in button so in here we can say display is set to flex justify content is set to flex and and finally align items is set to Center below that we're going to say dot gpt3 underscore underscore navbar Dash links underscore container I have a typo here and then we want to Target every P tag inside of that container but we're going to add a comma and say dot gpt3 underscore underscore navbar Dash sign also Target a p inside of there and the final thing is dot gpt3 underscore underscore navbar Dash menu underscore container p and for all of these we're going to change the color to Hash FFF this is the basic white color as you can see we can now see our links just a bit better but let's change the font family to be equal to VAR Dash Dash font Dash family there we go this is immediately looking so much better we're using a variable for our foreign family that we created inside of our index CSS there we go man rope so let's go further we want to set the font weight to be equal to 500 that made it just a bit Bolder and font size to be equal to 18 pixels that made it a bit bigger we can give it a line height to be set to 25 pixels and we can say text Dash transform to capitalize finally we're going to give them a margin 0 on top and bottom and one REM on left and right and cursor set to pointer now if we save that you can see they got some margin and we can actually hover over them and this is already starting to look so much better but now you might be wondering where am I getting these properties from well let me show you if we go back to the design and if I double click a specific property go to inspect and there we go we have the widths the heights left and top but in here they're positioned absolute the only things we want to get are these there we go this might not be that big to see but I'm going to copy and paste it here and you're going to notice that this is basically the same as what we have font family font style font weight font size and line height and also the color so you can technically go and copy most of the styles for every single property that's the best thing about creating a website from an already done design and usually we're gonna do that in the future we're gonna notice some specific element go to inspect and then simply copy and paste some of the Styles but with that said let's go back and let's see what else do we have to add in here I think we've covered everything we have so far now we have to add a few more things to the jsx below our div right here we want to add another div and this div is going to have a class name gpt3 underscore underscore navbar Dash sign inside of there we can have a P tag that's going to say sign in and below that we can have a button and that button is going to be of course of a type is equal to button and it's simply going to say sign up if we save that you can now see this sign in and sign up button now if we compare that with the design we can go ahead and move a bit more to the right you can see there's the sign in button and the sign up button so this button of course has to be styled so let's do that right away we can go to our navbar CSS and right here we can add the dot gpt3 underscore underscore navbar Dash sign button and also later on we're going to have the dot gpt3 underscore underscore navbar Dash menu underscore container and then the button inside of there as well so how are we gonna know the classes well double click the specific property and there we go you can see that we have our border radius background and also some width and height properties so let's try simply copying that and see if we're going to get any good results I'll paste it here and simply save this code and let's see inside of our application this doesn't look that bad but it's not perfect so sometimes you'll have to take the original design and then modify it to fit your needs in this case we don't want to have the set in stone within height rather we can handle that with padding so we can say padding 0.5 REM and then one ram on the left and right if we save that we're going to notice it looks just a bit different we're also going to add the color set to FFF to be white there we go we already have the background right here we also want to change the font family and we already know how to do that we can simply use this VAR right here great it's already getting its shape then we can set the font Dash weight to be equal to 500. there we go but I'm wondering are these Styles actually right here but we missed them and they are you can see you can get these styles for the button itself but then you can go inside and get the styles for this specific property so you can basically copy this and I'm going to paste that right here you can notice we already set the font family so we can delete that font weight we've set font style normal is done by default then we're gonna have the font size and the line height we don't need the left and top in this case the color is already set and the Border radius is right here let's go ahead and check it out our button is already looking much better let's go ahead and also set the border to be set to none because you can notice we have this little border here and also the outline to be set to none let's see if this fixes it it does it's already looking so much better we're going to also set the cursor to pointer like this and that's going to be it it doesn't look exactly the same as it does here but if you want it to look the same we can simply modify this padding right here let's make that one and let's make this two there we go but you can see that messes up with our design so we can decide to add some personal touch to this design and make it look like this so so far what you could have learned is that implementing something from the design is copying most of the properties and then modifying it to make it more responsive and to fit your specific needs great what else do we have to do with our navigation bar well of course we have to implement the mobile version unfortunately for the design we only have the web version but don't worry about that we can implement the mobile responsiveness ourselves to add a mobile menu we can go just below this div for the sign in and the sign up and we're going to create one more div with a class name equal to gpt3 underscore underscore navbar Dash menu inside of there we want to use some Dynamic state so let's import use state use State that's going to be from react right here we can use that use State Hook by saying const right here we can say const toggle menu and set toggle menu so the first thing is the variable that's going to let us know are we currently showing the menu the mobile menu or not and with the second one it's a function that is going to allow us to change that variable that is going to be equal to the use State and at the start it's going to be set to false so now right here we can say if toggle menu like this toggle menu in that case we can show a specific icon the icon to close the menu right if it's currently open so we can say RI close line is equal to a self-closing tag and there we can give it a color equal to FFF which is white we can set the size to be equal to 27 and then we want to do something on click more specifically on click we have a callback function and the only thing we want to do is set the toggle menu to be equal to in this case false and then we want to have an else so what do we do if it is not currently open then we can duplicate this line we're just going to have a colon the icon is not going to be closed line rather it's going to be the r i menu three line and we're going to set it to true now if we save that we should be able to see that if we go to inspect and then mobile there we go right now we cannot seem to see it here and that's most likely because we haven't added the navbar menu class but before we do that let's just finish up adding our mobile menu so below that we want to say if the menu is toggled so if toggle menu and end that means only if this variable is true only then render what is coming and what's coming is going to be a div we also need to close that div and that div is going to have a class name equal to gpt3 underscore underscore navbar Dash menu underscore container and it's going to have one more class called scale up and then Dash Center so scale up Center that's the class we've created before which is going to give it just a bit of animation now inside of there we want to have one more div this div is going to have a class name set to gpt3 underscore underscore navbar Dash menu underscore container Dash links and inside of there we want to have the same links we've had above so I'm simply going to copy them right here or in react fashion we can create a new variable that we can then reuse so just above the nav bar we can create a new functional component called menu and that's going to be an arrow function that's going to instantly return this specific menu but of course we have to wrap it with a react fragment so right here that looks like this there we go and now we can reuse this menu two times that's what's good about using react you don't have to write this code multiple times in this case you can simply call this component right inside of here copy it and then we can use it inside of here as well let's see if our desktop still looks good there we go this looks fine to me of course if you increase it a bit that's good and now on mobile devices let's check that out let's go for iPhone x right now it doesn't look that good but of course we still have to provide the mobile responsive classes and below this menu we're going to have one more thing and that's going to be similar to the sign in and the sign up so we can just paste it right here but we're going to change some class names right here this is not going to be navbar sign in this case we can do something like gpt3 underscore underscore navbar Dash menu underscore container Dash links Dash sign great so now let's save this and let's implement the classes for everything we've just done of course we have to start with the menu by saying gpt3 underscore underscore navbar Dash menu it's going to have a margin Dash left set to one REM and it's going to have a display set to none and position set to relative again now you cannot see it but we're going to make it seen soon enough then we can say dot gpt3 underscore underscore navbar Dash menu SVG there we want to give a cursor set to pointer and now we come to the main part right here dot gpt3 underscore underscore navbar Dash menu underscore container it's going to have a display set to flex it's also going to have a justify Dash content set to flex Dash end then align items also set to flex Dash end and finally Flex direction is going to be set to column we cannot yet see those changes because we're still looking at the same desktop navigation bar but we'll be able to see them soon enough let's also add the text Dash align to be equal to end let's also add a background so let's say background is going to be equal to VAR and that's going to be dash dash polar Dash footer of course we still cannot see anything then we're going to give it a padding of two REM let's give it a position of absolute also top of 40 pixels and write equal to zero so it's going to appear on the right side then we're going to give it a margin Dash top to one REM also the Min Dash width of 210 pixels border Dash radius of 5 pixels in here I misspelled that so let's fix this and finally we're going to give it a box Dash Shadow to 0 0 5 rgba 0 0 0 and then 0.2 to make it just a bit darker and this is going to be it for our navbar menu container now we have to actually show it using media queries before we do that let me just quickly add fixes for the paragraphs inside of that menu that's going to be dot gpt3 underscore underscore navbar Dash menu underscore container and then the P tag we simply want to give it a margin one REM on top and bottom and zero on left and right and finally for the sign in button.gpt3 underscore underscore navbar Dash menu underscore container Dash links and then Dash sign in here we simply want to say a display is equal to none great now we can jump to our media queries to stop showing the desktop menu and start showing the mobile one we just created so let's start with the larger devices first because this is going to be responsive on desktop and tablet and mobile devices let's start with our tablet add media screen and Max Dash width is set to 1050 pixels in here we can say dot gpt3 underscore underscore now bar Dash links underscore container and we simply want to hide it by saying display is equal to none there we go now you can see we immediately lost that menu then we also want to say dot gpt3 underscore underscore navbar Dash menu and in here we want to set a display to flex that's actually going to show it there we go you can see our menu button right here and if we click it it actually opens it up with that nice scale up animation great now this is it for the tablet devices let's say but now we can Implement everything for the max width of 700 pixels so I'm going to copy this media query change this to 700 right here and the only thing we want to do here is change the nav bar so we can say dot gpt3 underscore underscore navbar we're going to give it a padding of two RAM on top and bottom and 4 RAM on the left and right there we go that basically pushed it up a bit and it's looking more centered and now finally on the smallest of devices on mobile devices that's going to be up to 550 pixels we want to set the nav bar to be simply padding to REM there we go we also want to remove these buttons because there isn't enough space for them here the sign in the side up so we can say dot gpt3 underscore underscore navbar Dash sign and that's going to be display is set to none this is looking so much better now we have a clean navigation bar then we're going to also say dot gpt3 underscore underscore navbar Dash menu underscore container and we're going to say top is 20 pixels there we go now if we click here you'll notice that it appears correctly as it should and then finally the last thing is going to be dot gpt3 underscore underscore navbar Dash menu underscore container Dash links Dash sign is going to be display Dash block this is going to make the sign in and the sign up buttons appear right here because they are no longer on the main navigation bar now if we extend this to something like a tablet or let's try a larger mobile device okay let's try to go to surface Duo this is still in a mobile size let's do iPad there we go on iPad there is enough space to show the sign in and the sign up and the menu on the right side but if we go to something like a laptop there we go even on smaller laptops there isn't enough space to show everything but if we go on a larger laptop you can see now this looks great we have the navigation bar on the left side sign in and the sign up on the right side but as soon as we go to the mobile size we have this nice menu that pops up with the animation and with that said our navigation bar is done this is the first component on our list now if you go to the desktop version you'll notice that we have to implement the header and that's going to be our next task let's do that right away so let's focus on our header to do that we can close the navigation bar and then we can control click the header component we already have it created and we also have the CSS now is the time that we code out the jsx and the CSS for the header component and to know exactly what that header component is going to be let's open up our figma design our header is going to be this entire main part let's build something amazing with gpt3 openai this image right here description and the email login also the icons from all the people that are using this platform so let's create this entire part starting with of course the div that covers everything and then with this H1 so let's go back to our react application and let's start implementing our div our div is going to have a class name equal to gpt3 underscore underscore header and then space section underscore underscore padding because we want to add some padding under that section and we're also going to give it an ID equal to home so that we can scroll to that part using our navigation bar now inside of there we're going to create one more div this Dev is going to have a class name equal to gpt3 underscore underscore header Dash content inside of this div we're going to create our H1 our H1 is going to have a class name equal to gradient underscore underscore text and inside of there we can copy this text right here so let's try right clicking and then clicking copy if we go back here we can now simply paste it right here and remove some spaces there we go so let's save it and see how that is going to look like there we go this is already looking good now before we go ahead and implement the class names let's implement the description this email right here and the image then we can go ahead and add the classes or styles for everything So Below this H1 we're going to have a div this div is going to have a class name equal to gpt3 underscore underscore header Dash content underscore underscore input now inside of there we're going to have our input this input is going to be self-cology component of type equal to email it's also going to have a placeholder that's going to say your email address finally below that input we can also add a button and that button is going to be equal to a type button and it's simply going to say get started let's save that you can see this looks awful right now but it's going to look so much better soon enough looks like we forgot to add this P tag above the input so let's do that right away just below this H1 I'm going to add a P tag let's close it as well and we won't need any class name here we can simply copy the text from here by right-clicking it and then clicking copy and we can paste it right here if we save that you should be able to see right now it's black but it definitely is there the last thing we have to add is going to be this div where we say how many people are using our platform and then the image itself so just below this div we can create one more div this div is going to have a class name equal to gpt3 underscore underscore header Dash content underscore underscore people inside of there we can put our image tag which is going to be a self-closing tag like this and we're going to add a source equal to people of course this is the image that we have to import so let's go ahead and do that right away from assets you can notice that in here we should be able to have a people Icon there we go people.png so the only thing we have to do is simply say import and that's going to be people from dot slash dot slash assets people dot BNG I'm also going to duplicate this image because we're going to need one more and that is going to be import AI from and then in this case that's going to be AI dot PNG I've also noticed in here this is going to be people.png there we go now we have the images we need you can see our first one is right here and let's add the alt tag that's going to say people and below that image we have to add one more paragraph so let's say p and let's copy this text right here 1 600 people requested access so let's go ahead and paste that right here save it and as you can see our paragraph appeared right here the last thing we have to add is going to be this big image on the top right side so just below this div we can create one final div and this div is going to have a class name equal to gpt3 underscore underscore header Dash image right here we can call that self-closing image tag say that the source is equal to Ai and let's say alt tag is also going to be equal to AI if we save that our huge image is going to appear right here of course using Styles we're going to make it a lot smaller and we're going to position it to the top right of the screen so now is the time that we implement the styles of course to implement the Styles we can go to our header.css and let's take a look let's start by adding the styles for our gpt3 underscore underscore header and we're simply going to make it a display is equal to flex and by default it's going to have a flex direction of row so there we go everything is going to appear in one row now let's dot gpt3 underscore underscore header Dash content just to remind you the header content is going to be the div that's going to contain everything inside of it so right here we can give it a flex is equal to one also a display equal to flex to make it its own Flex container justify content is going to be set to Center to Center everything as you can see like that and then we're going to give it a line Dash items is equal to flex Dash start and finally we're going to set the flex direction to be equal to column there we go now every div is coming below one another and finally we're going to give it a margin right equal to 5 REM now let's style this H1 we can do that by saying gpt3 underscore underscore header Dash content H1 let's give it a font family equal to VAR dash dash font Dash family just like that we can immediately switch the font then we're going to give it a font weight equal to 800. like this to make it just a bit Bolder but remember we don't have to write all of this by hand we can go to figma click right here go to inspect and then all of our Styles should be right here of course don't take these Styles this is just used to position it on this design but we need the font specific styling so I'm going to paste everything right here font family we're already using from our own variable and font style is by default font weight is 800 and we can keep this great so now if we save this and go back that made it a lot bigger and that's exactly how it should be now let's keep it going for the paragraph below we can copy this entire thing and it's just going to be P instead of H1 let's see what styles do we need for our paragraph we can just go in here copy everything and simply paste it in here and then we can see if we need to modify anything in this case we can use the font family from a variable although it's the same we can leave this font style normal font weight is also going to be normal of course font size is 20 pixels line height 27 pixels and the color is the color right here but we also have this color saved in our variables so we can say bar dash dash Color dash text and finally we can add margin Dash top is going to be equal to 1.5 Ram now if we go to react app save it you can notice this is already looking so much better now that we've styled the header and the paragraph let's style this ugly input and the button so just below here we can say dot gpt3 underscore underscore header Dash content underscore underscore input let's give it a width of 100 percent Also let's set the margin to be equal to 2 RAM on top and bottom Also let's set the margin to be equal to 2 REM 0 and then one REM if we save that you can notice that's going to set up the margin and then finally let's also set a display is equal to flex and by default Flex direction is going to be set to row now we can style the input itself so let's say dot gpt3 underscore underscore header Dash content underscore underscore input and then we want to style the input inside of it let's go to the design and click this input right here you can notice that we get the background and the Border radius so let's go ahead and take those and then if we click on this inner text we also get the font family style and everything else so we're also going to take these now let's indent everything properly and let's see if we have to modify something right now it's already looking just a bit better but let's go ahead and add some of our own custom styles let's give it a flex is equal to two this is going to give it more width then we're going to set the width to be equal to 100 let's also give it a Min height equal to 50 pixels that's going to just extend it a bit font family is going to be man rope so we can leave that here but we're going to change it to use our own variable like this the font style and font weight can be set to normal but I don't think we even have to have that there because it's normal by default you can notice there isn't any change the font size can be 20 pixels line height can be 27 pixels the background is going to be our own color so we can say VAR and then dash dash Color dash footer of course we need a semicolon at the end and we're also going to give it a border border is going to be 2 pixels solid VAR dash dash Color dash footer there we go this added that border and we're going to give it a padding padding is going to be set to 0 and then one REM there we go and finally we're going to give it outline equal to none and we're going to set the color to be equal to FFF which is going to be white now if we save that and reload the page you can notice that this is looking so much better great now it's time that we also style this input right here because as you can see this is now extending way too long we have to have it just like this as it is on the design so the next step we can do is style the button I'm going to copy this paste it here and instead of the input now we're going to style the button for the button we can again copy most of the Styles let's first copy the outer styles for the button itself right here and then we can copy the inner styles for the text inside of it just like this and now we'll be able to notice if we have to change anything or we can leave it as it is as soon as we go back and save the page you're gonna notice that this is still extending way too much so let's see what changes do we have to make first I'm going to separate it from our own Styles and we're going to add Flex 0.6 this is going to make the button take more space as you can see then we're going to give it a width of 100 as well this and I'm going to also set a Min Dash height to be equal to 50 pixels of course we still cannot see what's happening so let's see why is our button still on the wrong side and why is the text the other way around it is highly likely that our image is to blame because right now it is just so wide so it takes a lot of space for now let's simply go back to our jsx and comment out the div containing our image there we go this already makes it look so much better now let's see what styles do we have to add to our header the font family is going to be the same but let's use our variable once again for good practices like here the font style as we discussed is set to normal by default we can make it bold like this then the font size can be set to 20 pixels like it is here and the line height can be 27 pixels the background color is fine the Border radius is also fine we don't need this transform Matrix and the color can stay FFF we're also going to say cursor is going to be set to pointer and also outline is going to be set to none to remove that ugly outline let's also give it some padding padding is going to be zero on top and bottom and one REM on left and right if we save that this is already looking so much better there still seems to be some kind of a border outside so let's go ahead and inspect it and right here if I hover over it let's see do we have some kind of a border around this button border collar border Style let's simply try setting the border to be equal to none and that gets rid of it great as you can see this button is looking great but it seems like the borders are cut off as you can see this is how it should look like and this is how it looks like right here so let's fix that right away we need to fix this border radius on this input and on the button as well so on the input we're going to do something like this border Dash top Dash right dash radius is going to be equal to 5 pixels we're going to duplicate this and let's say border Dash bottom Dash right dash radius is going to be 5 pixels as well now this is not all that noticeable but now we can copy this remove the Border radius from the button and paste it right here and now in here we can just paste this and save it there we go now the edges on top right and bottom right are rounded I zoomed it out and as you can see this is looking so much better we have our input we have our get started and it's looking the same as it is on the design but of course one of the most important things about this header is going to be this large image so let's implement this div with people at the bottom and then we're going to focus on the image itself our people Dev is already looking fine we just have to add some small Flex modifications so let's say dot gpt3 underscore underscore header Dash content underscore underscore people we can set the width to be equal to 100 percent then we can set the display to be equal to flex and this is immediately going to make the text appear alongside the images then we can say justify content is going to be set to flex Dash start and then finally we can align the items to the center this is going to make the images have normal height finally let's set the margin Dash top to be equal to 2 RAM there we go now let's style the images and the text separately I'm going to copy this paste it below and we're going to add the styles for gpt3 header content underscore underscore people but now let's edit the image itself the only thing we want to do about the image is change the width and the height so let's go here let's target this div where all these images are that's going to be this group of the elements right here and we can basically copy the width and the height let's paste that here save it and there we go the images are now of a proper height now let's change the paragraph so we can basically copy this thing one more time but this time we're simply going to say p right here again for this we can mostly copy the styles by clicking on the text and then copying all of these values I'm going to paste them here and now let's see what do we have to modify first of all we're going to add margin left right here margin Dash left is going to be one REM that's going to push the text a bit above then the font family is going to be the one we already have man rope but again we're going to use good practices so we're going to use the VAR to get the font from there the font style is normal font weight can be 500 font size 12 line height 38 color is going to be white and then the only thing we need is text Dash align is going to be set to Center as you can see everything seems great but our text is just a bit below our images so let's inspect that and if we disable the mobile mode we should be able to notice if we inspect this paragraph that it has some margins so let's set all of these margins to zero besides the left one that's going to be zero zero zero for top right bottom and then the left one is going to be one ram so we can simply say margin right here if we save that this now centered everything and this is looking great finally now is the time that we bring back our image so let's go to heather.jsx Let's uncomment this of course it's going to look bad at the moment but let's add the styles we can do so by saying Dot gpt3 underscore underscore header Dash image let's say Flex is going to be set to 1. if we save that nothing's going to happen yet but then we're going to make this a display Flex of its own and we're going to say justify Dash content is going to be set to Center and also align Dash items is going to be set to Center by itself right now this is not making any changes but now let's change the size of this image by copying this and then editing the styles for the image itself the width is going to be set to 100 and also the height is going to be set to 100 percent if we save this you can see the image is now looking just a bit better if we reset the zoom on our side this is looking good and if we expand this to a normal full HD window the image should be on the right side but it is still not so there's something that we have to do about that but first let's add the media queries so that this works on all kinds of devices first let's create the at media screen and Max Dash width is set to 1050 pixels in here we can modify the header.gpt3 underscore underscore header and we're going to set the flex direction to be equal to column now let's open up our inspect tools and let's see let's go over to the 1050 pixels this seems about it so now we're working on this specific screen size we're also going to say dot gpt3 underscore underscore header Dash content and we're going to modify the margin to be 0 0 and then three Ram of course we don't need the column here there we go now this is looking fine on our devices up to 1050 pixels let's see what we can do for the devices up to 650 pixels so these are going to be let's say larger phones or tablets I can copy this entire thing paste it below change the max width to 650 pixels and in this case we're going to modify not the header but the H1 inside of the header we can give it a font Dash size to be equal to 48 pixels there we go and then we're going to give it a line Dash height equal to 60 pixels I don't see the changes yet so let's see if we need to maybe move it like this there we go I can see the changes now the header is actually smaller now we're going to modify the P tag inside of the header as well so I'm going to Simply paste this here that gpt3 header and then P tag inside of it we're going to set the font size to be equal to 16 pixels to make it a bit smaller and also change the line height to be equal to 24 pixels there we go everything fits better on the screen right now we're also going to change the gpt3 underscore underscore header Dash content underscore underscore people we can simply set that to be Flex Direction is equal to column now this is going to appear below the images of course we can copy this paste it below and we can change the P tag inside of that div we can simply say something like margin is going to be set to zero there we go now it is centered and finally we want to change the input and the button so we can say dot gpt3 underscore underscore header Dash content underscore underscore input and then the input we're going to add a comma duplicate this line and then change the button as well the only thing we're going to do here is change the font size to be equal to 16 pixels and then the line height to be equal to 24 pixels if we save that this is now going to appear so much more normal and not too large there we go and finally let's make this work with smallest of devices which are going to be mobile phones like this I can even open the normal iPhone x right here so let's see what do we have to change I'm going to copy this at media paste it below and this is going to be for devices up to 490 pixels inside of here we're again going to modify the header and the P tag so let's copy this paste it below and we're going to make this just a bit smaller 36 pixels for the font size and 48 pixels for the line height there we go and then change the P tag 14 pixels for the font size and we can leave it at 24 pixels for the line height finally you can also modify the input and the button right here this is going to be 12 pixels for the font size and let's say 16 pixels for the line height there we go now everything seems much more streamlined and better usually everything is too large on desktop devices but now it's looking good for mobile devices as well now the last thing we have to do is see what's up with our image I think it is still showing below the content where it should show on the right side of the content on desktop devices so let's go ahead and put this right here and see if it messed up some of our styling this is going to be the main div right here the main div is going to be Flex it's going to be Center Flex start and column it's going to have some margin right this seems all right to me and it looks like that our issue is not actually in the Styles it's inside of the header.jsx this Heather content should cover only the content Parts meaning H1 P then the input and the button and finally the 1600 people but this Biv should be below that content div right here so let's indent that properly and put it just below this div now if we save that you're gonna notice that the image appears on the right side if we now expand this like this and reset the size you can notice that this is looking great let's test it on mobile devices as well so we can go to inspect on mobile it's looking great we have this let's build something amazing with gpt3 open AI let's see how does it look like on tablets looking great as well what about laptops looking great and then finally on 4K devices it's a bit stretched but it's still looking good of course what we're wondering is going to be mainly the mobile then the tablet something like iPad Pro or iPad and then finally the normal 1920 by 1080 device great it's looking perfect as you can see our header is now done and this is already looking so much better creating this header wasn't as hard as creating the navigation bar and the entire project structure but now you can believe me now that we have the project structure done creating all of the other sections is going to be so much simpler we have the navigation bar done fully responsive also the header part is now done fully responsive as well and now we are ready to create all of the remaining sections let's go ahead and do that right now the next section on our list are going to be the brands it's going to be a really simple component as you can see right here so let's go back to react application and let's expand our code the next component is going to be implemented just below our header so let's close this file and this file and let's go into the brand component in this file we're going to import a few images so to simplify the process let's create a new file called Imports dot JS this is going to be a helper file to import all of the images into here and then we'll be able to import them in one line in our brand component so we're gonna need import Google from dot slash dot slash assets forward slash google.png now I'm going to duplicate this four more times the second one on our list is going to be Slack then we're going to have the atlation then we're going to have the Dropbox right here and finally the last one on our list is going to be Shopify the only thing we have to do now is say export and now we can export all of them at once by pasting them here and then adding commas at the end of each one there we go the only thing this did is now it can go into the brand.jsx and we can import all of them like this Import in curly braces that's going to be Google Slack atlasion Dropbox and Shopify all of these are coming from that slash Imports great we can put that here and we are ready to use all of these images first let's give a class name to our div right here that's going to be gpt3 underscore underscore brand and then section underscore underscore padding make sure to have a space in between of those two classes now let's create a new div for each one of our images it's going to look like this that's going to be a div and inside of there it's going to have the image tag that image is going to have the source equal to Google and it's going to have the alt tag equal to Google again the only thing we have to do right now is duplicate this four more times two three four and finally we need to change this so it's gonna say slack here slack this is going to be atlasian or however you pronounce that and then we're gonna have Dropbox right here and finally that's going to be Shopify now if we save that it's not gonna look the best because we are not yet styling them so let's open up our brand.css and let's style our only div that we have in this file that's going to be dot gpt3 underscore underscore brand set the display to be equal to flex to make them all appear in the row we're going to have the flex wrap equal to wrap and then justify content equal to Center and finally align Dash items equal to center now let's style each specific div we can say dot gpt3 underscore underscore brand then div let's give it a flex is equal to one like this what we can also do is set the max Dash width to be equal to 150 pixels Min Dash width is going to be set to 120 pixels like this and let's give it a margin equal to one REM this is already looking so much better let's just give it a display is equal to flex and then justify content is equal to Center and finally align Dash items is equal to Center as well now this is going to look great of course if we now expand this a bit you'll notice that they all fit in the same row and with that we're finished with our brand component great this was much simpler than you might have anticipated so let's now expand this properly so we can see our code and let's see what is going to be the next component on our list as you can see it's great that we already have the entire project structure because now we're just entering each and every component and then coding them out the next part is going to be this div that you can see right here and as you can see it looks extremely custom meaning that they're going to be a lot of styles to make this possible so what is gpt3 let's go ahead and code that out we can start by entering this specific component and inside of there let's start by editing our first div our div is going to have a class name equal to gpt3 underscore underscore what gpt3 and then space section underscore underscore margin we're also going to give it an ID equal to wgpt3 that is going to allow us to scroll to that once we click here and then what is gpt3 now inside of that div we're going to have one more div and this div is going to have a class name equal to gpt3 underscore underscore what gpt3 and then Dash feature inside of there we want to render the feature component and that feature is going to be basically this what is gpt3 as you can notice it has a heading and it has this little thing on the top the reason why we're making this into a separate component is because as you can see it's used here here as well and then it's used in a few other places as well so in this case we're going to call the feature component that we've created before one trick to immediately import this component is to type it out and press Ctrl space it's going to immediately Auto Import from components great now if you go back to our react application and reload this is not going to look like something we can just see the feature here but everything is black and we need some styles but before we do that let's just add one more div inside of here this div is going to have a class name equal to gpt3 underscore underscore what gpt3 and then Dash heading inside of there we can have an H1 and this H1 is going to have a class name equal to gradient Dash text inside of there we can simply copy what we have in here that's going to be the possibilities are beyond your imagination let's paste it here and we also need a paragraph which is going to be here explore the library so just below this H1 we're simply going to have a P tag and simply say explore the library again this is still going to look like nothing because it's black on black so we cannot see it the last thing we have to do is a div that's going to contain all of these three features chat Bots knowledge and education so let's create one final div here that's going to be a class name equal to gpt3 underscore underscore what gpt3 Dash container inside of there we can call our feature component like this but of course we need to pass different things into that component we haven't yet created it so we don't know what to pass so let's simply leave it like this for now now we're going to add these tiles and then later on we're going to focus on implementing our feature component so let's open up the whatgpt3.css and let's go ahead and implement the styles inside of here we're again going to use a gradient similar to the one we've used before and that gradient has also been generated automatically by the tool we used before in this case just to simplify the process so we don't have to create a gradient one more time I'm simply going to paste it here again this is not something new this is just what we immediately get from that platform that's going to give us all the gradients the link to this what gpt3.css is going to be down in the description so you can just go ahead and copy this first class as soon as you save that you'll notice that this already seems just a bit more similar to what we should have at the end so now let's add our second class which is going to be the gpt3 underscore underscore what gpt3 Dash feature inside of here we're simply going to make this a display is equal to flex now remember that we said that we're going to use the feature component but you can notice that this feature at the top is going to be just a bit different from the features below this one is going to have a text on the right side and this one is going to have text on the bottom so let's Implement different styles for each one of these components we can do that by saying dot gpt3 underscore underscore what gpt3 Dash feature and then also dot gpt3 underscore underscore features Dash container underscore underscore feature inside of here we're simply going to set the margin to be equal to zero now we can copy this entire line and paste it below instead of here we're going to modify the same thing at the start but then we are going to go into the feature and that's going to be Dash text because this one is going to have the text so let's add the max Dash width to be equal to 700 pixels again no changes yet but as soon as we implement the feature component this is going to be visible now let's change this heading right here by saying gpt3 underscore underscore what gpt3 Dash heading let's give it a display is equal to flex we could also do Flex direction is equal to row let's also do justify Dash content is equal to space Dash between like this and then finally let's say a line Dash items is equal to Center finally we're going to give it margin is equal to 4 REM 0 and then two Ram there we go now we can see that the Explorer the library came to the right side and we have our text right here now for the text itself we can copy this heading paste it below and we just want to go inside of the H1 tag as it usually is with the headings we can go back to our design simply click right here and then copy these Styles once I've copied them I'm simply going to paste them right here let's see what do we have font size is going to be equal to 34 pixels line height is going to be 45 then we can set the font way to 800 and let's also add the max Dash width equal to 510 pixels font family is going to be man rope but we can use that variable that we have font family and that's going to be it we don't need the font style as soon as we change that the text is now looking a lot more like this one but we're missing the gradient where is it let's go to our what gpt3 jsx and let's see gradient Dash text right here on the H1 this here is my bad this was supposed to be gradient underscore underscore text because text is the element under the gradient as soon as you save that you can see that now we have this nice gradient on this text this was the class name we implemented in the app.css so right here we should be able to see it there we go gradient text so now let's go back to action by going to what gpt3.css let's continue by changing this paragraph right here we can do that by basically copying this title pasting it below and now we want to modify the P tag inside of the heading again we can go here click explore the library and copy most of the styles we can simply paste them here this is immediately looking a lot better but let's see if we have to make some modifications the font family is again going to be the same one but from a variable we don't need the font style font weight 500 font size 16 line height 30 and then the color is going to be set to our own variable which is going to be VAR and that's going to be dash dash Color dash subtext and finally we're going to make that cursor is equal to pointer to make it appear like a clickable thing there we go this is already looking a lot more similar to what the design says finally let's modify the container for our features doji pt3 underscore underscore what gpt3 Dash container instead of here we can set the display to be equal to flex Flex wrap is going to be set to wrap and then finally Flex Dash direction is going to be set to row let's also give it a margin Dash top is equal to 2 RAM there we go now features are coming one by one now we're going to add some more styling for the feature component but this CSS is nothing special is nothing we haven't seen before but it is taking a lot of time to write it down so as I've done with this gradient right here I'm going to give you access to this few lines of CSS as well you can simply copy and paste them right here into what gpt3.css that's going to allow us to more quickly start working on the feature component itself so one more time the entire whatgpt3.css is going to be down in the description in a GitHub gist so just go ahead and copy and paste it right here and now we are ready to start working on the feature component right now it's an empty component that simply says feature and that's it it's not accepting any props it's not doing any logic and it's not showing any jsx besides the div with a feature inside of it so let's go ahead and fix that let's add some class names the first one is going to be class name is equal to gpt3 underscore underscore features Dash container underscore underscore feature inside of there gonna have one more div this div is going to have a class name equal to gpt3 underscore underscore features Dash container underscore underscore feature Dash now right here we're gonna have one empty div before the title to give it some space and then we're going to have an H1 that simply says title below this div we're gonna have one more div and this div is going to have a class name equal to gpt3 underscore underscore features Dash container underscore feature sure Dash text right here we can simply render out the text as you can notice the title and the text are undefined they don't exist so we're simply going to read three of them through prompts right here we can say that our feature component accepts title and text as prompts and now we can go ahead and pass them right inside of here so let's see what text do we have to pass the title for the first one is going to be what is gpt3 so we can say title is equal to what is gpt3 then we can copy the text right here we can say text is equal to and then simply paste it right here as well and then we can repeat the process for all of the following features in here that's going to be title is equal to chat Bots we can copy the text right here so we can say text is equal to and then paste it right here we're going to repeat the process for the knowledge so title is equal to a rather knowledge base and then we're going to copy the text as well right here text is going to be equal to this and finally the last thing we have to do is add the title equal to education and then this here is going to be the text there we go now if we save that and go back to our application this is already looking so much better you can see what is gpd3 that is similar to this thing right here but of course we don't have any styles for those components yet so let's go into our feature and let's see what styles do we have to add to our feature that CSS to make this look as it does on the design first things first let's say dot gpt3 underscore underscore features Dash container underscore underscore feature itself this is going to have a width of 100 it's going to have a display is equal to flex justify content is equal to space Dash between and then align Dash items is equal to flex Dash start and finally Flex Dash direction is equal to row we can also give it margin right here to one REM there we go right now it's not looking that good but at least it's getting into shape of how it needs to look like now let's change the title we can do that by copying this entire thing and saying dot gpt3 feature container feature and then Dash title in here we can give it a flex is equal to one then we can give it a Max Dash width is equal to 180 pixels and finally margin Dash right is going to be set to 2 RAM let me spell this correctly and if we save that this is already looking just a bit better I'm going to copy this line one more time paste it below and now we want to modify the H1 itself so right here we're going to say H1 and you know the drill with H1s you can simply come here and copy all of the styles so let's copy them paste them here and let's see what do we have to change this is going to be VAR dash dash font Dash family then font style we don't need font weight is 800 font size can be set to 24 but I found it to work better with 18 pixels and line height is going to be 24 pixels great what are spacing we can leave and color is going to be white so now let's paste this out and save it as you can see our titles are now looking just a bit better now we can modify this div inside of the feature this div is actually going to be this line that you can see right here so how can we do that let's go here let's copy this entire thing again now it's not going to be H1 it's going to be a div inside of that container so we can say width is 38 pixels or you know what let's go to the design let's click it and let's try to Simply copy what we have right here in this case let's copy everything as we said we don't need to worry about position the width and the height are fine the top and the left we don't need and we can keep the background right here but we already have the background under our variables so we can say VAR dash dash gradient Dash bar we're gonna also add some box Shadow to be equal to zero four pixels 4 pixels rgba 0 0 0 0.25 and finally let's give it a margin Dash bottom equal to 0.25 Ram if we save this you can see right here this is looking so much better already now let's modify the text so I'm gonna say dot gpt3 underscore underscore features Dash container underscore feature Dash text we're gonna set that to flex is equal to two to give it some more space as you can see now this is taking twice as much space as this title is because it is set to Flex 2 and the title is flex one so right here let's say Max Dash width is equal to 390 pixels like this and finally let's say display is equal to flex now we can copy this paste it below and we want to modify the P tag inside of that again as we usually do with texts we can go ahead and copy this and paste it right here the font family is again going to be coming from VAR from our CSS variables font Styles we don't need font weight is 500 font size I found 14 to work better and line height 24. and the color we already have under variables VAR dash dash Color dash text now let's paste this out correctly save it and see it in the action great this is already looking so much better but the only thing I can notice is that the text still seems a bit black it doesn't seem like it is on this image right here so let's see if we have our variable written correctly that's going to be VAR the hash Dash caller Dash text let's see it in our index.css styles color text appears to be right this is that light bluish color so let's go back to our feature and let's try bringing it back to what they had here this color without using a variable if we save it and reload the page it's still black so it seems like something else is overwriting it let's leave it like this for now to finish up the entire CSS for our feature component and then we're going to figure out how to fix it so the only thing left to do is to add some media queries so add media screen and Max Dash width is equal to 550 pixels inside of here we can say dot gpt3 underscore underscore features Dash container underscore underscore feature Dash title we simply want to change the H1 inside of that div to be equal to font size is equal to 14 pixels and line Dash height is equal to 22 pixels this is going to make the title a bit smaller on mobile devices we want to copy this same thing paste it here and change the paragraph instead of H1 as well font size for the paragraph is going to be 12 pixels line height is going to be 20. and then the last thing we want to change is the gpt3 underscore underscore features Dash container underscore underscore feature and then in here margin one REM on top and bottom and zero on left and right now let's see how does this look on mobile and it's looking great the last thing we have to do is of course change the color of this text so let me see if I have some typos right here for the paragraph that's going to be inside of our feature component gpt3 features Dash container and then underscore feature Dash text that part seems all right to me this here is gpt3 features container underscore underscore feature that's also fine and this one seems fine as well so everything seems fine let's try to inspect this specific div in here we can see that this div is this feature text meaning this one and I can immediately notice it I forgot to put this text inside of a P tag so right here if I just enter the B and close it right here this should make all the difference there we go how much of a difference can one styled paragraph tag make apparently a lot so now let's expand this to full HD to see our website in its full Glory we have our navigation bar then we have our great looking header and then we have our Brands and now our brand new section with the what is gpt3 we have our text here the possibilities are beyond your imagination and then we have all of these features here which are basically just one single component that we're then reusing and passing the props to Great the next section on our list is going to be the future is now so in here you can see the full powers of react because we'll be reusing the component we created in the previous section right here in the next one as well great so let's go ahead and start working on that right away you already know the drill to start implementing our next section we can go to our react application open up the code and then go back to our app.js instead of here we can notice that the name of the next component or section is called features so to start implementing the features let's give a class name to our first div right here and the class name is going to be gpt3 underscore underscore features space section underscore core underscore padding and we're going to give it an ID equal to Features so we can scroll to it from our navigation bar inside of that div we're going to have one more div and this div is going to have a class name equal to gpt3 underscore underscore features Dash heading inside of there we can have an H1 this H1 is going to have a class name equal to gradient underscore underscore text there we go and let's go to our design and let's simply copy this text and paste it right here great now if you go back you should immediately notice that we have our text right here then we can also add the P tag for our paragraph and then copy what they say right here request Early Access so if we go back there we go you can see it it's black but it is just below our heading now finally we need to Loop over four of our new features with a different text right here so what we can do is just below this div create a new div with a class name equal to gpt3 underscore underscore features Dash container now inside of there we want to render four different components but instead of Simply doing this calling the feature component and then calling it again and again and again I'm going to show you one cool trick that you can do in react and that is to create the features data array at the top so const features data is equal to an array now in here we can have a few different objects the first one is going to have a title and for that title we can simply go ahead and copy this title right here and paste it great now we're also going to have a text here so we can copy this text and paste it here now we can simply repeat the process for all of the three remaining features I'm simply going to add a comma here and then duplicate these lines three more times I'm going to leave the paragraphs as they are but I'm going to change the titles so right here I'm going to paste our second title copy and paste the third one and finally copy and paste the fourth one as well what we can do right now is map over the features data so in react you can do it like this open a dynamic block of code say features data.map in here we get one specific item and we get the index of that one item and now what do we want to render for each individual item well as discussed before we already have that feature component so simply type feature control space and then you should be able to Auto Import it there we go import feature from dot slash dot slash components of course if we save this right now you're gonna notice it's gonna be four empty features that's because we have to pass props into them so we can say title is equal to item dot title text is equal to item dot text and then finally key is equal to item dot title and we can also do plus index to make it really unique so they have different keys if we save this you can now notice that we have four of the different features and they are looking similar as they are right here this is the power of react you can reuse the components that you've previously created but of course this is looking close to what we have on the design but not perfect so the next part we have to do is to implement the features.css we can start with the gpt3 underscore underscore features let's give it a width of 100 percent like this there we go then we're going to give it a display is equal to flex as well as the justify Dash content is equal to space Dash between finally let's also set the flex direction to be equal to row great now we can go to our second thing and edit the heading just below this let's say dot gpt3 underscore underscore features Dash heading right here we can give this a flex of one also make this its own Flex container let's simply say justify Dash content is equal to flex Dash start then we can do a line Dash items also Flex Dash start and finally let's set the flex direction to be equal to column as you can see this is now looking a bit closer to what we need on the final design finally let's say text Dash align is equal to left and let's give it a margin Dash right is equal to 5 REM there we go now the title is on the left side and we are ready to implement our features looks like that we currently cannot see the titles of these features so let's go to features and right here I misspelled it so this here was supposed to be item dot title hopefully you noticed it and there we go that's instantly looking so much better because we have already implemented the classes for our feature component now let's go back to our features.css and inside of here let's continue with styling rh1 here you already know the drill we can go here click it right here and then copy most of the styles that's going to be the gpt3 underscore underscore features Dash heading and then H1 we can simply paste everything as we always do this is going to be VAR dash dash Fawn Dash family and everything else seems great to me so if we save it there we go this is already looking so much better now let's copy this line paste it here as well this is going to be the paragraph styling so we can go back and copy this paragraph Styles and simply paste them in here again for the font we're simply going to use the variable this is all right and the color seems great as well the only thing I'm going to add to this is going to be margin Dash top is equal to to ram now if we go back you can notice that this aligns great with this title right here and we have all of the features on the right side let's just add some slight modifications to The Container Itself by saying dot gpt3 underscore underscore features Dash container I'm going to scroll up Flex is going to be equal to 1.5 this is going to be its own Flex container like this we're going to have the justify Dash content is equal to flex Dash start and align Dash items is equal to Center finally Flex Dash direction is going to be set to column let's save it as you can see now our features are aligned nicely because they are happening in a column one below another great finally let's just add some media queries to make this look great on tablet and mobile devices we can say at media screen and Max Dash width is equal to 990 pixels there we can say the gpt3 underscore underscore features Flex Dash direction is equal to column so now if we open up the inspect element and go below 900 pixels like this you should be able to see that these are going to appear in a column I'm missing A3 right here so there we go that Small Change is Going to make all of these appear in a column so it's more readable on tablet devices let's also change the margin.gpt3 underscore underscore features Dash heading margin is going to be 0 0 2 REM 0. and this just added a bit of margin right here finally we can copy this entire media query based below change this to 550 pixels and in this case we're simply going to say dot gpt3 underscore underscore features Dash heading and then H1 in here we can change the font size to be equal to 28 pixels and line Dash height to be equal to 38 pixels there we go let's see how does it look like on mobile devices there we go much better fits nicely on this not so wide screen and title and everything else is completely readable great and believe it or not with that we are done with the features section we have this entire part implemented let's see it in its full glory on the full HD screen I'm just going to extend this a bit and there we go our features are right here I think that now you can definitely believe me when I said that creating the entire project structure at the start is going to simplify things so much more later on let's check if the scroll works as soon as you click here it's going to scroll to a specific section of the screen there we go it Scrolls to Features but it looks like our what is gpt3 is not working so let's fix that we can go to our what is gpt3 component that is right here and we can see that we specified the what gpt3 wh pt3 let's go to our navigation bar to see if we have the same thing here so right here that's going to be wgpt3 it's a bit different so I'm simply going to copy this go back to our what is gpt3 and I'm going to fix this typo right here this should have been G instead of an H so let's see wgpt3 reload the page and if we click it it Scrolls nicely to that portion of the page great the open AI part also doesn't seem to be scrolling so let's see what is up with that that goes to possibility so let's find the possibility section and that section hasn't yet been implemented so that part is completely fine but everything that we have so far works wonderfully the next section on our list is going to be this big image with a woman with a VR headset and again the possibilities are beyond our imagination so let's go ahead and start creating this section right away we can of course start from inside of our possibility component so let's add a class name to this Dev component that's going to be gpt3 underscore underscore possibility space section underscore underscore padding and we're also going to give it an ID of possibility that way we'll be able to scroll down to this section now inside of this div I think you can already guess it we're going to have one more div this div is going to have a class name equal to gpt3 underscore underscore possibility Dash image inside of there we're going to have an image tag that's going to have a source equal to possibility image and it's going to have an L tag that's going to say possibility now as you can see we don't have this image so let's simply import it at the top that's going to be import ability image and it's going to be coming from dot slash dot dot slash acids and then that's going to be possibility dot B and G great now we have everything we need let's save it and see how does it look like there we go there's this huge image right away of course we'll have to fix that with styling let's also add the content that we're gonna see on the right side of that image once we make it smaller that's going to be below this possibility image div right here our second div is going to have a class name equal to gpt3 underscore underscore possibility Dash content and inside of there we're going to have an H4 this H4 is simply going to say request Early Access to get started so we can go ahead and copy this then below that H4 we're going to have an H1 this H1 is going to have a class name equal to gradient Dash text and we're simply going to copy the possibilities are beyond our imagination now below that H1 we're also going to have a paragraph so we can simply type P tag and copy the text right here and finally we're going to have another H4 so let's type H4 here copy request for Early Access and paste that right here and with that we are done with our content and with the entire possibility component of course we are yet to add the styles so now let's go to the style CSS let's go to our code and see how does it look like right now as you can notice here's the huge image and then on the right side maybe we can spot our content but no unfortunately not because it's all dark so let's go ahead and make it lighter add the gradient and let's make it visible once we decrease the size of this image so first we're going to say dot gpt3 underscore underscore possibility and let's set the display to be equal to flex and we can also set the flex Dash direction is equal to row this is not going to make any changes right away but now we can decrease the size of the image by saying gbt3 underscore underscore possibility Dash image there we can set the flex to be equal to one like this and let's also set the display of that container to be Flex give it a justify Dash content equal to flex Dash start and also let's align the items to Center finally we're going to give it some margin right up to Ram of course we still can't see the changes but let's copy this and then in here let's start get our image now in here finally we're going to decrease the size of that image by setting the width to be equal to 100 and also the height to be equal to 100 percent as soon as we save that you should be able to see that the image disappeared for some reason but our text is right here the reason why we can't see the image right now is if we inspect and let's try to Target this image right here there we go you can notice that right now it doesn't have any height but if you remove this Flex property it appears right here so later on once we add all the flexes for the content as well the image is going to appear because it's going to know its own height currently it's a child in a larger Flex container so let's close this and let's continue with our content and then we're going to add the image later on so let's dot gpd3 underscore underscore possibility Dash content we're going to give it a flex equal to 1 and also display is going to be equal to flex but it's going to be a flex Direction equal to column because we want all of the content to appear in a column right here then we're going to say justify Dash content is equal to flex Dash end and also we're going to set the Align Dash items to be equal to flex Dash start okay now finally we can style each one of the headings paragraphs or titles first we can start with this H4 at the top so I can copy this gpt3 possibility content and we can simply Target the H4 then we can duplicate this one more time and then we can also specify H4 last Dash child because we have two different h4s remember this one right here request Early Access and the first one is request Early Access but if you look into the design they are just a bit different so we're going to have different styles for them then we have to Target our H1 so I'm going to again copy this line and I'm simply going to change this to H1 and finally we have to copy it one final time for our paragraph tag now we can go ahead and Implement all these styles so let's start with the H4 the first H4 we can go ahead into the design and simply copy all of the Styles right here there we go let's go over the styles to see if everything's good as you already know the drill we can exchange this for VAR font family the font weight is going to be 500 font size 16 line height 30 and we can leave this unique color if we save that and go back reload the page hopefully it's gonna work looks like it didn't so most likely we misspelled something let's check it out gpt3 underscore underscore possibility Dash content H4 let's go right here gpt3 and in here I misspelled possibility so as soon as we fixed that we can see the image and we can also see request Early Access that's good so another reason why this image wasn't showing wasn't only the flex it was also the misspelling right here great so now let's style the last H4 a bit differently the only thing we have to do is go right here and copy the color so right here I'm simply going to give it this specific color let's indent that properly save it go back and there we go now with the H1 you already know the drill I'm simply going to copy all of this paste it here for the font family it's going to be the same one as right here the font style we don't need font weight is going to be 834 45 is fine and we can save that and look at it right now it's still not visible so let's see where the issue is that's going to be this one H1 with the gradient Dash text class name I've made the same mistake again this here is supposed to be gradient underscore underscore text so as you can see bem methodology still sometimes gets me but all in all it's a great naming convention great the last thing we have to do is the last paragraph tag so let's go to the design copy the Styles right from inside of here and let's just paste them here the font family is going to be the same font style and font weight are normal font size is 16 and line height is 30. that's great the color we already have saved so we can simply say VAR and then that's going to be dash dash Color dash text we can indent this properly and I'm also going to give it a margin Dash bottom is equal to to Ram now if we add a semicolon here save it go back to our site and if you reload the page and there we go here is our paragraph now our possibilities section looks great let's try to compare it with the design there we go we have this image on the left side as we do here and then on the right side we have four different text elements it might be a good idea just to add a bit more space in between them so as you can see right now we don't have a lot of space in between here so for the H1 I'm simply going to add a margin to be equal to something like one REM and then zero there we go and that's going to be all that we need finally we have to handle the media queries so let's add our first at media screen and Max Dash width is going to be set to 950 pixels in here we can say dot gpt3 underscore underscore possibility it's going to have a flex stash direction is equal to column now we can decrease the width a bit so we can see what do we mean here and there we go this is going to be around 950 and as you can see the image goes above the content then we also want to give the image some margin so we can say dot gpt3 underscore underscore possibility Dash image and we can give it a margin equal to one REM and then 0. this is going to just space it out a bit and finally let's just add some more margin so right here let's dot gpt3 underscore underscore possibility Dash content we're simply going to say margin Dash top is going to be 2 RAM and there we go with this media query I think we should also be good for larger and smaller devices let's take a look this is going to be our full HD it looks great now let's open up inspect tools let's see what do we have so this is how it looks on mobile looks beautiful actually I like this view we have an image on the top and then we have our four different texts now if we extend it a bit let's go to tablet again the image is on the top if we go to a laptop there we go the image is on the left side a larger laptop the image is a bit bigger and this is exactly how it is on the design so with that said our possibility section is done and we can go to our next section as you can see from the design our next section is going to be this click to action div it's a really emphasized div that's going to have our button that we want people to click on so let's go to our CPA which means click to action and let's implement this div shouldn't be that hard once we figure out the gradient we just have to paste it and that's going to be about it so let's start with the class name in here we can add a class name is equal to gpd3 underscore underscore CTA then below that we're going to have one more div and this div is going to have a class name equal to gpt3 underscore underscore CTA underscore Dash content inside of there we can have our paragraph and a P tag is simply going to say request Early Access so we can simply copy and paste that and below that this is a bit bigger so we're going to make it an H3 in here we can copy this finally below this div we're going to have another div which is going to contain the button so right here we can give it a class name and that's going to be gpt3 underscore underscore CTA dash button and inside of there we're simply going to have a button with a type of button and it's going to say get started great with that said we can move to our styles or we can see how does it look like right now but it shouldn't look like something let's take a look yep it doesn't look that good because it's dark on dark so let's apply the styles first we can Target the entire div by saying gpt3 underscore underscore CTA let's give it a border immediately so that we can see what we're working with let's do border one pixel solid white there we go so this is our content and can we make everything inside of it with a color off-white let's see there we go now we can see the content as well so I'm going to add a display is equal to flex and let me just move this a bit to the right side so that we can see it better there we go then we're going to justify content that's going to be space between that's going to move the button on the right side as you can see we can align items and that's going to be Center because we want to vertically align them and then finally we can leave the flex direction as it is by default and that is a row let's also give it some padding which is going to be to ram on all sides and also some margin to divide it from the sides let's do four REM there we go our div is already starting to look like something let's also give it a border Dash radius of one REM and finally the most important thing is going to be our background and if you think about it or if you take a look inside of our index.css we already have that gradient bar there we go this is already done gradient that includes the colors again it was just automatically created using the software we used previously so in here we can simply say VAR dash dash gradient Dash bar as soon as we save that you can see this looks a lot better and now we can remove the border and the color because everything is visible there we go let's see what other changes do we have to make this here has to be dark that's fine so let's copy Style by style for each specific thing we can say dot gpt3 underscore underscore CTA Dash content and we can first edit the paragraph tag which is this one here you can go ahead and copy the styles there we go again our font family is going to be VAR font family font style is normal and we can keep everything else let's see okay there we go the font is applied and now we can repeat the process for this as well that's going to be gpt3 CTA content and then we used an H3 inside of there I'm going to paste it indented copy the font family font style we don't need and we can remove the comments and bring the caller up as soon as we save that you can notice this is looking a lot better and the last thing we have to style is going to be the button itself so let's first style the button container.gpt3 CTA Dash BTN inside of here let's give it a display is equal to flex justify Dash content is going to be set to Center to center it horizontally and finally align Dash items is also going to be set to Center to center it vertically let's also give it a margin Dash left off to Ram to move it to the side finally let's copy the styles for the button itself from our design let's click right here copy in this case let's just take these two and that's going to be dot gpt3 underscore underscore CTA dash button and then the button itself we can paste that and don't forget for complicated elements you also have to take the styles for the inner thing so let's go ahead and copy this as well great now if we indent that let's see if we have to fix something background is going to be fine we can bring the color to the top right here alongside the background border radius of 40 is fine for the font family we can copy it right here font style is okay font weight is bold font size 18 line height 30 that's great now let's save it and see how this is going to look like okay it doesn't look quite the same so what we can do is we can apply the padding of 0.5 RAM on top and bottom and one ram on left and right this is going to just make it a bit wider and higher and now we can also set the border to be equal to none also the outline to be equal to none and we can set the cursor to be equal to pointer and finally we can set the Min Dash width to be equal to 150 pixels there we go this is our button and you can see this click to action div or a section really complements the section we have above it just makes it pop a bit so this is great now as we always do let's make sure this looks great on mobile devices as well we can do that by adding the media tag screen and Max Dash with let's do 650 pixels first of all let's see what happens around 650 pixels there we go this is below 650 and it's looking okay but let's see if we can make just some small changes right here we can say dot gpt3 underscore underscore CTA and we're going to give it a flex Dash direction is equal to column as soon as we save that you can notice that the button appears below the text and that is completely fine because up to 640 it looks good but below it's already starting to get crowded so we need to have the button below then we can also say that gpt3 underscore underscore CTA dash button we can give it some margin 2 RAM 0 0. there we go this looks good now below 150 pixels something like this we also have to adjust the font sizes so let's add a new media I'm going to duplicate this one and simply say 550. what we can do here is for the gpt3 underscore underscore CTA we're simply going to give it a margin equal to 4 REM and two REM there we go let's spaced it out a bit and the gpt3 underscore underscore CTA Dash content H3 there we're going to set the font size to be equal to 18 pixels like this and we're going to set the line height to be equal to 32 pixels of course I misspelled gpt3 here so gpt3 there we go made it just a bit smaller and finally we can do the same thing for the button so I'm going to say dot gpt3 underscore underscore CTA dash button and then the button itself there we can copy this set the font size to be equal to 14 pixels and then the line height to 28. there we go this is looking just a bit more streamlined with the rest of the website on our mobile device now we can scroll up and see that we're kind of getting close to the end of this gray design it's looking great now if we look at the real design we can notice that the next section is going to be quite a big one and that is going to be a blogging section the newest article is going to be a big one and then the four other are going to be smaller ones so let's go ahead and code out the blogging section to start coding our blogging section easier we of course already have the file structure so right here our block is just below the CTA and as you can see we're closely getting to the end of this video because the last thing we have to do is the footer so let's go inside of the blog and let's implement it let's add a few class names to our first div that's going to be class name gpt3 underscore underscore blog space section underscore underscore padding then we're also going to give it an ID of blog so that we can scroll to it below that we're going to have one more div that's going to contain our header as you can see this is our title right here so let's give it a class name that's going to be gpt3 underscore underscore blog Dash heading inside of there we can just have an H1 that's going to have a class name equal to gradient underscore underscore text and there we can simply copy this and paste it inside of it great let me space this out properly and go back to our application to check it out there we go as you can see the text is here but the font is not all right we're going to fix that soon enough but now we have to start adding the structure for our articles so just below that we can have a div and this div is going to have a class name equal to gpt3 underscore underscore blog Dash container inside of there we can have one more div for our top article so right here we can say class name is equal to gpt3 underscore underscore blog Dash container underscore group a so this is going to be our group a right here and then on the right side we're going to have a group b so let's go ahead and copy this div and simply paste it below everything is going to be the same but here it's going to be Group B and now the question is how can we render out this article right here and how can we render out the four other articles on the right side now if we save that we're gonna notice well you're not gonna notice anything yet because everything is dark but if we tried hovering over it you can see that we have one article here and then four on the different side or just below it right now where I'm going with this is that these are going to be react components so you'll be able to reuse the logic and the code from one article to all the other ones so let's import our article component let's first see if we have created it before components article there we go so in this case we're simply going to import it by saying import article from dot slash dot slash components and then we can go inside of the article and then one more time inside of the article component but if you think about it you can see how long this import line is we created an easier way of importing by simply putting this in curly braces and then importing it straight from the components like this there we go and now we can call our article component in these four places so right now I'm holding the ALT key and then double clicking the words and now you can add the article in five spaces at the same time there we go we're just going to call it as a self-closing component now this is not going to make any difference because the article right now is just an empty div that says article but let's go ahead and implement it right away so right here we're going to give it a class name equal to gpt3 underscore underscore blog Dash container underscore article inside of there we're going to have a div this is going to be the div for the image so right here we can say class name is equal to gpt3 underscore underscore blog Dash container underscore article Dash image inside of there we can render our article image so right here the image is going to be a self-closing tag that's going to have the source equal to image URL and we can have the alt equal to blog image now you might be wondering where are we going to get this image URL from we can of course import it from our assets but how are we going to change that image for each and every article and the solution is to pass it through props so right here we can put curly braces to the structure from props and then the structure the image URL now how exactly does this image URL come from the blog all the way to the article well inside of our blog we're going to import all of our images so right here we can say import block zero one block zero two without spaces blog zero three blog zero four and finally blog zero five from dot slash import this Imports is something we've also created before I think it was under the features nope it was under the brand there we go in the brand we have these Imports so we can simply go ahead and copy this and create a new Imports file inside of this blog so it's just going to be imports.js we can paste it here and we don't want to get the brands this time we want to get the actual article images so we can do that by saying import that's going to be blog01 from assets blog01.png so you can go ahead and repeat the process for Block zero two block zero three also block zero four and finally block zero five and then we can export them right here log 0 1 let's also do block zero two block zero three vlog04 and finally blog zero five now we are exporting all of them from this file therefore in here we can import them in one line inside of the curly braces so what we have to do right now is simply pass a different prop to each one of these articles right now I'm holding alt and just clicking after the article so that I can say the image URL prop is equal to blog 0 1 and now I'm simply going to change the image for each of the next articles just like that and you'll be able to notice that right now we just have the images here they are really large but we have to style that of course each one of the articles is also going to have a date as you can see right here and a title these are going to be the things that also have to change in this case the article date is the same so let's simply copy it and let's pass it through props to all the Articles we can do that by simply saying date is equal to a string and I'm going to paste that everywhere and in this case the title seems to be the same for all of them so let's go ahead and pass the title as well title is equal to and we can paste it right here now alongside the image URL inside of the article component we're also getting the date and the title which you can make use of Let's see we have a warning here it's saying that in the alt tag we don't have to specify the word image because it already knows that that's great and just below this div I'm going to create one more div it's going to have a class name equal to gpt3 underscore underscore blog Dash container underscore article Dash content and inside of there we're gonna have an inner div with no class names but it's simply going to contain a paragraph that's going to render out to the date and then below that it's going to render out the title H3 and in there it's simply going to contain the title like this Let's see we are accepting the date and title props is that what we're passing right here yep we're passing the title great finally below this div I'm going to have another paragraph and this one is simply going to say read full article as you can see that is on the design right here so right now if we go back we cannot really see anything we can see the Articles we see the text and the date but it doesn't look good so let's go ahead and implement the styles for the article.css or should I say the article component let's start by the article container Itself by saying dot gpt3 underscore underscore blog Dash container underscore article let me just fix this typo right here that's going to be container I'm going to give it a width is equal to 100 and also the height is equal to 100 percent then I'm going to set display to be equal to flex and flex direction to be equal to column finally I'm going to set the background to be equal to VAR dash dash Color dash footer now if we save that you can see that now each one of the Articles has this background right here now we have to style the image so let's simply copy this entire thing and just say Dash image we're also going to give it a width and height of 100 and we're also going to give it this background so we can paste that as well finally we can copy this one more time but now we're going to Target the actual image or the IMG tag and we're also going to give it a width and height of 100 percent there we go now everything is going to look great of course we have to style the content as well to make it look better so we can say dot gpt3 underscore underscore blog Dash container underscore article Dash content let's make it a display is equal to flex the flex direction is going to be set to column to make the text appear below one another then we're going to have the justify Dash content is going to be space Dash between and finally let's give it some padding like one REM on top and bottom and 1.5 RAM on left and right that's already going to make it look a bit more like an article and let's give it a height of 100 finally we have to style the text elements inside of here so we can start by copying this we have to style the p like this so content and then the P tag then we also have to style we can duplicate this that's going to be an H3 and then one more time we can duplicate the P tag because there is one more P tag which is going to be a last Dash child great so we have to style all of these three we can start with a paragraph and of course as you know the drill for the text you can simply copy it our first paragraph is going to be a date so let's go ahead and copy the styles for the date right here we can paste them straight into here again this is going to be VAR dash dash font Dash family the font style is normal font weight is fine line height is fine and the color is white there we go that's looking a bit better now let's style this H3 by copying all of the Styles opening this class pasting it here we can duplicate the font family and everything else is going to be copied from the design there we go that's looking a bit better and finally for the read full article we can also copy that the only thing that's going to be different about this is that it's going to have a cursor equal to pointer because eventually we want to be able to click on read full article also for our title we want to give it a margin Dash bottom of 5 RAM and finally the cursor of pointer as well because we need to be able to read that article so now if we go back this is already looking just a bit better now our articles have taken their shape the only thing we have to do about them is just fix some mobile responsiveness things and we can do that by saying add media screen and Max Dash width is going to be 550 pixels in this case we want to say that gpt3 underscore underscore blog Dash container underscore article Dash content H3 we're going to set the font size to be equal to 18 pixels and the line height to be equal to 25 pixels just to make the text a bit smaller on mobile devices and with that we're done with the article itself but this is still not looking as it does on the design and the reason is we now style the article component but we are yet to style the containers that these articles are in so now we can go inside of the block CSS and apply the styles for the containers let's start by applying a display of flex to our gpt3 underscore underscore blog so we can see display flex and also Flex direction is going to be set to column this changed nothing yet but if we say dodgy pt3 underscore underscore blog Dash heading we can give it a width of a hundred percent remember the heading is this thing right here and we can also make the text align the left and finally we're going to give it a margin Dash bottom is equal to 5. ram there we go now we have this nice heading of course we are yet to style The Heading itself so we can copy this say the gpt3 block heading and then Target the H1 inside of it there we can copy the styles for this specific heading so let's take them right here we can paste them right here that's going to be VAR font family font style is normal font weight 800 font size 62 line height 75 and letter spacing is going to be like this this seems all right to me let's go ahead and check it out there we go a large title above our blog and now we can start styling the block containers themselves so let's say dot gpt3 underscore underscore blog Dash container it's going to be the same as the blog itself just the display Flex with the flex Direction but this time it's going to be row because we want them to appear in a row of course this is going to make it look bad at the moment but as soon as we Implement some changes it's going to look better then we want to style the block container but now a group a so we can say block container underscore group a remember that's only the first article so for that we can say the flex is going to be 0.75 let's save it okay now the other articles are taking more space let's also give it a margin Dash right is equal to 2 REM of course I have to spell this correctly there we go you can see that now we have this first article on the left side and now I'm going to copy this and just change the letter to B for our second section we want to have it a flex is equal to one and then we're going to use for the first time now the display is equal to grid if there's anything that you want to display in a grid that's going to be something that looks like this articles cards or anything like that now we can use the grid Dash template Dash columns and that's going to be set to repeat two one FR now if we save that we can notice that we have two per row great finally let's add a grid Dash Gap and that's going to be to RAM and there we go by styling this container this is already looking a lot better of course if we expand it to full HD it's going to look almost as it does on the design that's great there are still some small changes that we can make so let's go ahead and collapse this a bit and let's see what else can we do the rest of the changes is going to be focused on media queries so we can say add media screen and Max Dash width is going to be 990 pixels for those devices we want to say gpt3 underscore underscript blog Dash container is going to have a flex Dash Direction equal to column Dash reverse check this out now they're going to appear like this we could have also done just column that way the top article would appear at the start again it's your personal choice I'm going to leave it as column reverse to display the four articles first then we need to give it some margin so I'm going to say dot gpt3 underscore underscore blog Dash container underscore group a so we can see margin is equal to 2 RAM on top and bottom and zero on left and right that's just going to space it out properly finally we can fix the width a bit so we can say dot gpt3 underscore underscore blog Dash container underscore group a and then we want to go inside of it to dot gpt3 underscore underscore blog Dash container underscore article there we want to set the width to be equal to 48 percent there we go now it's going to appear in line with all the other articles and we can also change the height so let's go ahead and copy this entire thing paste it below but now we don't want to Target the article we want to Target the article Dash image and we simply want to set the height to be equal to 250 pixels there we go that made the image just noticeably smaller but on different screen sizes it's going to make more sense now we have streamlined articles great now we have to focus on even smaller devices so I'm going to copy this media and I'm going to say something like 700 pixels we can start testing different sizes right away so I'm going to open up the inspect and let's see how does it look like on about 700 pixels so let's open up the free tool responsive and let's extend this to something like 680. you can see the Articles look a bit small they're still okay but there's something that we can do about them to make it a bit better let's say dot gpt3 underscore underscore blog Dash container underscore Group B and inside of here I'm gonna say grid Dash template Dash columns is going to be set to repeat 1 1 fr if we save that now we can see one per row and in my opinion on this specific screen size this looks just a bit better of course we have to focus on the last article as well so let's simply copy this thing this line right here line 48 on my side that's going to be the gpt3 block container group a and then gbt block container article in here we simply want to say the width is going to be set to 100 of course this title in here is just a bit too big so let's modify it that gpt3 underscore underscore blog Dash heading H1 let's set the font size to be equal to 46 pixels and then we can also set the line Dash height to be equal to 52 pixels there we go this is looking just a bit better and finally we can decrease the size even more on the smallest of devices so let's add a new media query and this is going to be four devices below 550 pixels we can copy this last thing in the last media query and change it to 34 pixels and then 42 pixels for the line height there we go now this is making a bit more sense great with that our articles are now done they look phenomenal on mobile devices they all appear in one row we have the heading here let's take a look at the tablet size we have two per row on laptop we have this nice design and finally on larger laptops it looks great now let's check it out in its full glory on the full HD screen there we go this is looking perfect it's looking exactly as it does on the design right here so the next thing we have to do is going to be this footer right here this is not just the usual footer as you can see it also has this nice call to action with the button here and then the normal part of the footer just below to start creating this footer let's collapse this a bit there we go and let's go to our app.js so right inside of here you can see that our last section is going to be our footer let's scroll down to the bottom of the page and let's actually implement the jsx for the footer we can start by giving it a class name more specifically gpt3 underscore underscore footer and that's going to be space section underscore underscore padding then just inside of that we can have that big heading as we do on the design so I'm going to start by adding a div give it a class name of gpt3 underscore underscore footer Dash heading and inside of there we can have an H1 this that H1 is going to have a class name equal to gradient underscore underscore text and we can simply go ahead and copy exactly what it says right here there we go now if we save that we should already be able to see it right here then below that we have to have this request early access button so let's go ahead and create one new div below it that div is going to have a class name equal to gpt3 underscore underscore footer Dash BTN and inside of there we can simply have a P tag that's going to say request early access great let's see there we go our text is just below we're going to form that into a button with the Styles now of course we have to implement the content for the footer as you can see this left side and the links on the right side as well so let's go ahead and start with the left side or rather with the div containing everything so that's going to be a div and it's going to have a class name equal to gpt3 underscore underscore footer Dash links then inside of there we're going to have our div and this div is going to have a class name equal to gpt3 underscore underscore footer Dash links underscore logo and this is where our logo is going to be so we can just say image and we can immediately specify the source gpt3 logo and the alt is going to be logo of course we have to import this logo so we can say import gpt3 logo and that's going to be from dot slash dot slash assets and then logo is going to be a DOT SVG logo so we can save that let's see if the logo appears and there it is and just below that logo we also have to say this thing here I think that's supposed to be the address so let's copy it add a P tag below it and simply paste it right here of course it's not going to show yet because it's dark but we're going to have something below this div So Below the div containing the logo and the P tag and it's going to be another div this div is going to have a class name equal to gpt3 underscore underscore footer Dash links underscore div so this is going to be a div for one of our next sections this div right here and we're going to have a few of those divs so inside of that div we can first have an H4 that H4 is simply going to say links as you can see on the design then below that we're gonna have a few V tags so we can say B and then we can simply copy what it says right here we can duplicate it a few more times the second one is going to say social media and we just have to do contact and there we go of course this is not going to look good yet but we have to do two other divs so we can simply go ahead and copy this entire div paste below change the links to company and change all the links below that this one has Just Three Links so we'll be able to remove the other one and finally we have to do the get in touch so we can just one more time duplicate this links div say get in touch here copy everything else there we go phone number and with that we are done with our content the last thing we have to do is going to be this all rights reserved at the bottom so below this div and one more div so just close to the end we're going to have one final div that's going to have a class name equal to gpt3 underscore underscore footer Dash copyright and inside of that div we can simply create a paragraph and that P tag is simply going to say this there we go so now if we go back to react application you can see that there is some kind of content here but we have to style this properly so let's go to our footer.css to add the styles let's start with the footer itself that gpt3 underscore underscore footer it's going to be a display flex but let's do just one trick that we did before let's give it a border is equal to 1 pixel solid white and also let's do text is equal to white or rather just color is equal to White there we go now we can see everything and we'll be able to see what's happening and as you can see the border is right here on the outer line so this entire thing is the footer great so let's see what other classes do we have to add or should I say Styles let's make this a flex Direction is equal to column that way it's going to go one below another let's make it justify content is equal to Center and also align Dash items is equal to Center there we go and finally we have to give it a background by saying background is equal to VAR dash dash Color dash footer there we go now we don't even need this specific border this is going to be enough and we can go ahead and start with styling the container for our heading we can do that by saying gpt3 underscore underscore footer Dash heading and let's give it a width of 100 percent like this then we can give it a text align is equal to Center and also a margin Dash bottom is equal to three REM there we go now we can style that H1 itself so we can write here say H1 and we can copy the styles from here there we go I'm gonna paste them in here of course this is going to be VAR font family font style normal and everything else is as we are used to it as soon as we go back you'll be able to notice that this is already looking so much better now we have to style the button so let's simply say dot gpt3 underscore underscore footer Dash BTN and then immediately styled a p inside of that BTN and we should be able to copy most of the styles from here so I'll try to take this border right here there we go and then the text itself there we go so with buttons you usually have to copy the styles for the button itself and then for the text inside of that button let's see if we have to change something I'm going to save that go back and it's not looking perfect so let's see what do we have to do border is going to be fine font family let's use the same one we've been using so far so that's going to be VAR font family then we can add the word Dash spacing of something like two pixels to kind of space it out a bit and everything else seems fine to me but I'm going to copy this above it because we need to change this container itself not just the P tag inside of it so we can simply give it a display is equal to flex give it Justified content is Center and a line Dash items is equal to Center and the reason why we're doing this is because we're going to give it some padding of one ram right now there we go and also border of one pixel solid and that's going to be FFF so in this case we don't have to add the border right here rather we have to add it on the outer container like this I'm also going to make this text Dash align is equal to Center and finally give it a margin Dash bottom is equal to 10 Ram now we have spaced everything correctly and of course to make this a real button I'm going to add a cursor equal to pointer now if we hover over it this is looking great finally we have to style these Links at the bottom so we can say dot gpt3 underscore underscore footer Dash links display is going to be set to flex justify content is going to be set to space Dash between let's see the changes already there we go this is already starting to look much better let's align the items to flex Dash start like this if I properly type that there we go and finally I'm going to give it a flex Dash wrap equal to wrap so it wraps on smaller devices and also let's give it a flex Direction to row because later on we're going to set it to column on mobile devices finally I'm going to give it a width of 100 percent and text Dash align is equal to left there we go finally we have to style each div separately so I'm going to Simply copy this paste it below and say width is going to be 250 pixels for each div I have to fix this there we go and let's make the margin equal to one REM but of course this here is supposed to go to a div inside of the footer links not the further links themselves so with that said now this is spaced out better finally we can edit out the logo so we can say dot gpt3 underscore underscore footer Dash links and then that's going to be underscore logo let's make that display is equal to flex and flex direction is going to be set to column so we can see this one below another and we can again copy this to modify the image logo itself the only thing we have to do is add image IMG at the end and let's copy the size from here so I'm going to scroll here this logo has a width of 118 and a height of 30 pixels so I'm simply going to paste that here there we go and I'm going to give it a margin Dash bottom of one REM great this is looking a lot closer to the design right now but as you can see the logo and this address is the only thing on the left side everything else is appearing on the right side so to fix that let's edit the actual paragraph elements dot gpt3 underscore underscore footer Dash links underscore logo and then the P tag inside of there uh we can simply go ahead and copy it but it's going to be fairly simple it's going to be font family we can copy the one we've been using before so VAR font family right here the font size is going to be 12 line height 14 pixels and color FFF now if you go back and reload there we go we can now remove this white color from the top because we're going to implement it to other paragraphs as well you can see right now we've been editing only this paragraph So let's actually edit these divs we can do that by saying that gpt3 underscore underscore footer Dash links underscore div let's give it a display is equal to flex we can put the justify content is equal to flex Dash start and the most important thing Flex Dash direction is equal to column there we go everything remained the same but now we're going to edit the H once inside of there that's going to be the company the links and the get in touch so we can go ahead and copy one of them or at least the styles for one of them we can duplicate this and simply Target the H4 inside of there we can go ahead and paste those Styles the font family is going to be the same again font size 14 pixels line height 16 and the color is going to be set to White we can also give it a margin Dash bottom equal to one REM let's take a look there we go now we have these headings here and we just have to edit the paragraphs now so I'm going to duplicate this one more time I'm going to change that to a P tag and we can simply go ahead and copy how these should look so I can copy it right here paste it here the font family is going to be again variable font family 12 pixels for the font size 14 for the line height and the only thing we're going to do is we're going to add a margin 0.5 Ram top and bottom and 0 on left and right and also make it cursor is equal to pointer now if we take a look at this this is looking so much better the last thing we can do is going to be the copyright below so right here we can say dot gpt3 underscore underscore footer Dash copyright in there let's add a margin top is equal to 2 REM let's also add a text stash a line is equal to Center and finally a width is equal to 100 percent there we go and finally we have to edit the paragraph inside of there so we can Target the same thing but this time with a p at the end and we can go ahead and copy the styles so right here I'm gonna copy them it's going to be the same as these Styles here but that's fine we can use this VAR right there and everything else is going to be the same let's see if we need this font feature setting if we now save this let's take a look there we go this is looking good let's see if we need this nope that doesn't appear to make any change so we can remove that line and in my opinion this is already looking like a great footer you might wonder why do they have it in three rows or rather four including this and we have it in just two well if I start expanding this you're gonna notice that it's actually fully responsive of course we still have to add some media queries for tablet devices and mobile devices but already right out of the box it's looking great so let's go ahead and add some media queries that's going to be at media and screen Max Dash width is equal to 850 pixels dot gpt3 underscore underscore footer Dash heading H1 in here we simply want to decrease the font size to be equal to 44 pixels and also the line height to be equal to 50 pixels as we've done before we simply want to make the text a bit smaller on mobile devices so it looks like we have a typo here in this case that's going to be media screen and Max with 850. so this is going to be on devices lower than 850 pixels so let's go ahead and test that out right now we are in 600 so that should be good there we go looking fine now let's add one for devices below 550 pixels by copying this and changing this to 550. it's going to be 34 pixels font size and also 42 pixels for the line height now if we decrease this to below 550 you're going to notice the text just got a bit smaller and we just have to add some margin to each div so I'm going to say dot gpt3 underscore underscore footer Dash links div and let's set the margin to be equal to one REM on top and bottom and zero on left and right that pushed it a bit to the left and finally we can decrease the font size for the P tags as well so I'm going to copy this paste it here and that's going to be gpt3 footer Dash BTN and then the P tag right here in here we can set the font size to 14 pixels and line height to 20 pixels that was for this button right here it looks just a bit better on mobile devices right now and the last thing we can do is for Ultra small devices below 400 pixels of width like this let's go ahead and copy this paste it below we simply want to decrease the font size just a bit more to 27 pixels font size and also line height to something like 38. there we go so now this can fit on literally every single device let's go ahead and do some testing I'm going to pull this on a full desktop so we can see better there we go this is how it looks like on full HD Let's test with the mobile responsiveness for iPhone x if I scroll down this is a really good looking footer let's test the width tablets there we go in two rows laptops still in two but if we go on a larger laptop it's starting to Span in three different rows you can also go to a 4K screen and it's looking fine that's another question you might have like how would you style this on a 4K screen because sometimes there's just too much real estate that you have to work with so do just Center everything or do you split it apart across the entire screen I think everything should be in the center so that it's more clearly visible so it's just gonna have some margins on the left and the right but in this case I don't think we should worry about that the only thing we care about is that it looks good on most of the devices but I gotta be honest looking at this website in 4k right now it's not even looking bad it's looking great let's close this out and let's appreciate our newly built website in its full Glory we have this nice navigation bar with the sign in and the sign up buttons this fully custom header with this gradient in text image on the right side and the email address field right here right here we have the brands section and then this nice card with another gradient here that's going to emphasize the strong points of our brand then right here we have some more we call them features right here all of these are the same component but you can see how they're appearing in a different fashion some of them have the title on top and then the text at the bottom and some of them with just a small change have the title on the left side and the P tag on the right side then we have this great image right here with some more text this click to action div an entire blog section where we used the article component and then we have our glorious footer our gpt3 website is now fully built and it's looking amazing I hope you guys enjoyed this build and you learned a lot along the way now is the time that we actually deployed to the web that way you'll be able to share this project with everybody with your friends potential employers and you'll be able to put it on your portfolio so let's go ahead and do that right now finally to deploy our website on hostinger's Fast servers we can go ahead and close all the files and collapse all the folders then we can go to view and then terminal if your app is still running make sure to press Ctrl C and then stop it from running then you can run npm run build this is going to generate an optimized react production build and there we go in just a few seconds our build folder has been generated so let's go ahead and right click it and click reveal in file explorer once you know where your build folder is let's open up the hostinger's dashboard you can go to the link in the description of the video and then log in or go to hpanel.hostinger.com and then log in there you should be able to find the hosting for your domain name of course if you didn't purchase the domain name just yet because you have to figure out what is it going to be that's completely fine I'm just going to show you the process of how we can deploy it and then you'll know the process for every single website in the future for your portfolio for any deployed site for your blog and anything else so in this case I'm gonna click gpt3jsm.com and then we can scroll down and go to file manager right here on the left side you should be able to see public.html right here so double click it and it's going to open up the default.php you can go ahead and delete that file once that is done simply find your build folder open it up and then drag and drop all the files from your build folder straight into here there we go it's going to recognize them and then let's simply upload one by one every file is going to be deployed and then with them our entire website and there we go our files are now here before we go ahead and check our website let's set up the SSL certificate so you can search for SSL right here and simply click install SSL and there we go in just a few seconds our lifetime SSL has been installed so let's go to our dashboard and let's check out our main domain and there we go our website is deployed and it has an SSL certificate great there is one main problem all the images seem to be here besides the most important one the first image that we can see so let's go back to our hosting and let's go back to our file manager for just one second there we can click the public HTML and if we open up the static folder and media we can notice that all of our pngs and svgs are right here but our AI image which is this one right here is inside of our main folder so it's possible that something happened while the file was uploading so just click that file let's go ahead and click move and we need to change the destination of where we want to move it to we want to go into static and then media finally we want to select this and move this just moved our file and if we close this go back to our website in the reload we immediately see our glorious image right here that's phenomenal Sometimes some things with the file upload work like this but don't worry about that even if we weren't able to debug this on our own you could simply contact the hostinger support on the bottom right and they would be able to immediately solve your issue for you with that said let's take one final look at our finished site we have this nice gradient right here as well as this gradient text we can scroll down to see this great gradient card some of the features here an image a click to action div an entire blog right here and then a great looking footer of course we can check that this website is fully mobile responsive there we go this is how everything looks like on the phone beautiful right now you're watching this video so I'm sure you're excited to see what exactly are you going to build today you're going to build a fine dining a restaurant landing page right off the bat we have this great starting section with the navigation bar that collapses on mobile devices as we scroll down you'll notice that the background changes and we have this completely custom About Us section with a G or the first letter of the restaurant right in the middle behind the knife as we scroll even more down you'll notice that today's special the menu for wine and beer as well as the cocktails right below that we have the chef's word a special section to see what the primary chef says right below that we have a really special section which is a full screen video where you can instantly see how does the restaurant or food look like keep in mind this website doesn't have to be just about cooking you can convert it into any other high-end business let's scroll a bit more down where we have the awards that the restaurant received alongside with this great image with another letter G if we go even more down you'll see this great photo gallery where we have images from the restaurant's Instagram page and you can hover over the images click them and see them right on this business's social media platforms we are closely getting to the end as you can see we have quite a lot of sections the next one is the one that every business has to have and that is defined as section finally as we scroll down you'll see a custom footer where we have the subscribe to our newsletter section as well as the contact us the logo one more time the quote and the working hours this is looking great and as I've mentioned they are quite a lot of sections you're going to build all of this today in this one video also that they forgot to mention it is completely mobile responsive it's gonna work for tablet devices as well as the mobile devices and it's going to look great on all of them it almost has that native mobile feel as we always do on JavaScript Mastery we're going to start from bare Beginnings so that everybody can 100 follow along we can start off by creating a new empty folder on our desktop let's name it it's something like Garrick and then restaurant once you have your empty folder you can open up an empty Visual Studio code window feel free to use any code editor of choice so in this case I'm going to Simply drag and drop the empty folder into Visual Studio code and there we are we can start by going to view and then terminal we can clear the terminal and now we need to initialize a new react application we can do that by typing MPX create Dash react Dash app and then dot slash since we're already in the directory we want to initialize our react application and of course to be able to run this command you have to download and install node if you haven't done that already simply Google node download and install it and if we are ready you can simply press enter if you haven't used create react tab before you can simply press y to proceed our react application is being initialized as we speak this process usually takes about a minute so I'm gonna pause this video right now and I'll see you right away if you can see all of these files and folders right here that means that your react app has been successfully initialized the most important folder in our application is the source folder this is where all of our files are right now there's a lot of files that we might not need like app.test.js logos web vitals and so on so what I usually like to do is to Simply right click source and delete it entirely and then we can create a new version where we only have the files we actually need so once you recreate the source you can right click it and click new file to create the most important part in every react application and that is index.js this is the file where we connect our react application to the Dom so we need to import react from react as well as import react Dom from react Dash Dom we can also import the component we haven't yet created and that's going to be import app from dot slash app once that is done we can call for Yak Dom dot render we can pass in the application and finally we can say render it under document dot get element by ID and the ID is going to be root the reason why I'm going through this so quickly is because this is something you're going to write every time you create a react application but let me go a bit deeper and explain what does this document get element by ID root actually mean so if we go to public and then index.html you can notice that this is an HTML page of sorts let's collapse all of these lines into one line let's remove some of these comments just to make it a bit easier to read like this there are some more comments some no script tags but if you remove all of that you can notice that this is the simplest possible HTML document that simply has the head and the body that only has one div we have to connect our react applications to this div and this is where all of our react code is going to go right here inside of this Dev with an IB off root while we're here we can also change the name of our site so in this case that's going to be direct and that's going to be restaurant so now we can go back to index.js and we can create that app.js file inside of our source folder app.js throughout this video you'll see me use rafce quite a lot that is a shortcut to create a react Arrow function component if you haven't used this before it is incredibly useful the only thing you have to do to be able to do that is go to extensions and then search for es7 react Redux graphql react native Snippets then you have to install it potentially reload your Visual Studio code and then you'll be able to start typing rafce to create a react functional component if for whatever reason that doesn't work for you you can simply type this out by hand right now I'm gonna simply create an H1 here that's going to say hello world there we go now before we run our application we're going to first install all of the necessary dependencies if we go to packet Json you'll notice that we have our main react dependencies but we can go to view and then terminal to install just a few more or to be more exact we can install more dependencies by running npm install and the only dependency we're going to install are going to be react icons that means that everything else that you saw in the introduction of this video is going to be coded by us we won't use any extra external packages you're going to learn how to do everything by yourself so let's simply install react icons the only dependency we're gonna need and then we can start working on our project that install incredibly quickly and we can try running our application by running mpm start and in just a few seconds you should be able to see a heading that says hello world on localhost 3000 great now to save you some time for creating all of the files and folders for our components I'm going to give you access to the starter code of this project but don't worry that starter code is going to contain absolutely no programming logic it's main going to be just files and folders I'm going to explain everything step by step I've included the starter Source folder in the project modern UI ux restaurant GitHub repository and I even made it easier for you to download it all that you need to do is go to this link the link is going to be down in the description down get and as soon as you come here the download is going to immediately start it's going to take a few seconds and then you should see your folder right here you can click it and then you can extract it to our Garrick restaurant project and just press ok there we go that has been finished and now if we go back here you should be able to see a starter Source folder what you can do right now is delete the original Source folder and just rename the starter source to Simply Source or SRC that process is going to take some time we can go to view terminal stop it from running by pressing Ctrl C and then Y and then npm start one more time this is going to restart our react application and as soon as you do that you should be able to see an empty home page where you have all of these components as you can see we're going to have a navbar component or let's call them sections navbar section header about us menu chef and so much more and as you can see I didn't lie to you we didn't Implement any of the logic we just sorted out all of our sections in one easy to read list and if we go back to code you can notice that now we have assets these are mainly just all of the images and videos that we're going to use for our project then we're going to have some constants inside of here we're going to have some demo data for our menu again no coding logic whatsoever here then in here we're importing all of our images and exporting them so that we can more easily use them later on and from here we're exporting both the meals the data and the images so we've covered the assets and constants then we have the components and as you can see the structure we're going to be working in is the folder components inside of there we have a new folder for each one of these components like a menu item and then inside of that folder we have the component of the same name menu item which is right now completely empty so it's just a basic functional component that's going to have the menu item inside of it and it also has an import to the CSS file which is also going to be completely empty and that's the situation for every single component and container in our list you can see the situation with containers is the same you might be wondering what is a container and you can think of a container just like a section so about us is a specific section of the page same thing about Chef find us footer and so on now that we have those demo components we can go into app.js and you can see in here we're simply importing all of the components and containers and we're simply listing them one below another that means that we can now easily from top to bottom start implementing the nav bar then when we're done we can go to header and keep it going for all of the other components finally the only bit of CSS that is here is going to be the index CSS and this is going to be only the CSS setup inside of this file we're just gonna set up the Google fonts some of the most commonly used colors we're gonna reset the padding and margin for all elements to be zero and in here we just have some slight animations and that's nothing that's going to be a breaking change in our application just some quality of life changes alongside the index CSS there's also the app.css Styles where we have just some general section Styles so these are the styles that are going to be used across all sections like section padding the class to centrally position an element backgrounds and so on so make sure that you also have the styles for this file and with that said we can go into our app.js let's get started with the navigation bar but how is it going to look like well we're going to code this entire website including navigation bar by following this specific Design This is a phenomenal free design that I found on ui8.net the link is going to be be down in the description you can click download here and then create an account to fully download it but to make this process even easier for you I've created and shared an entire figma design that includes only the page that we'll be building today if you want to download the entire site including many more sections then you'll have to download it through UI 8 but if you just want to follow along for the video and create the sections that you saw in the intro which are these sections right here then you can just click the link down in the description and just get to this figma file that I've shared that's going to be more than enough to create this phenomenal site okay with that said you should have access to this figment design and you are most likely looking at this page right now and here is our navigation bar so let's try and put this design in our browser side by side with the editor so that they can see live what they're coding there we go I've put my code editor on the left side and the live side on the right side in here I've also included the finished Gary's project so you can see how it looks like in here you can see that we have this great navigation bar that on smaller devices turns into a hamburger menu that pops up nicely like this but on a bit bigger devices like this you can see it is a full navigation bar so this is the section of the page that we're going to implement right now and as you can see the situation is the same on figma so let's go to our live site and let's implement the first component on our list and that is the nav bar to start implementing the nav bar we can first import a few icons the first one on our list is going to be GI hamburger menu and that's going to be coming from react Dash icons forward slash GI the second icon on our list is going to be import MD outline restaurant menu and that's coming from react Dash icons forward slash MD with those icons we're gonna also import images so we can say import images from dot slash dot slash constants and then images and just below that we already have the import for the navbar.css now we are ready to start creating the jsx part for our navigation bar we're gonna use the nav HTML semantic tag and right there we can give it a class name equal to app underscore underscore navbar throughout this entire video you'll see me use the CSS Ben model quite a lot and that is a CSS methodology that's going to make it easier to read and write CSS as you can see bam stands for Block element modifier and when we write CSS we're going to write it like this block element and then modifier if you want to read more about the mem model I'm going to put some educational links down below so feel free to check them out with that said we can continue coding out our navbar so now that we have the nav we can actually implement this CSS class so let's open up the navbar.css file let's create a new class called app underscore underscore and navbar let's give this snapbar a width of 100 percent let's also give it a display equal to flex and let's also give it a border equal to 2px solid black just so we can see what we're working with there we go now we can first add some more elements into that navigation bar and then we can continue with the Styles implementation that way we'll see what the styles that we write actually change in the code so let's create a div inside of the snap bar and this div is going to have a class name equal to app underscore underscore navbar Dash logo inside of this div we're going to have an image and that image is going to be a self-closing tag that's going to have the source equal to images dot Gary and let's also give this image an ALT tag which means alternative text if the image is not recognizable by the browser and let's simply say app logo if we save it you you won't see anything right now because the logo is white as you can see if I drag it right here so we'll have to make this dark for now we can go below this div and create a UL stands for an unordered list and inside of that UL we can have a lot of different allies which are list items this UL is going to have a class name equal to app underscore underscore navbar Dash links and each one of our links is going to have a class name equal to P underscore underscore open Sans this is simply going to be a paragraph that's going to be of this specific font this here is a class name that we've defined in the app.css each one of our list items is going to be an anchor tag a and that a is going to have an href equal to Hash or pound and then specific URL in this case the first link is going to be to home now we can duplicate this link a few more times I just press on this line right here and then holding alt and shift and arrow down you can duplicate the line the second link is going to be about and right here we can say about then the third one is going to be menu so let's do menu and then menu with a capital M then we're going to have Awards and the awards right here and finally contact and contact right here now if we save that we can go back and the text is right here but as you can see it is wide so we cannot really see it we are yet to change the color of the navigation bar so that we can see the logo and the menu items so now that we have these items let's go to the navbar CSS and let's continue implementing the styles we won't need the Border anymore but we will need justify content and that's going to be set to space between then we're going to have the Align items right here that's going to be set to Center we're going to have the background set to VAR VAR means that we're using a CSS variable and that's going to be caller Dash black and as soon as you save that you can notice everything we've done so far finally let's add just a bit of padding one REM on top and bottom into REM on left and right there we go this is already looking so much better so now let me explain a few things right here we're using display Flex I love display Flex it makes it so easy for you to position the elements however you want inside of a div in this case we've used justify content space between and along the x-axis that align the logo on the left side and menu items on the right side that happened because inside of our nav bar we have only two elements the first one is going to be the logo and then the second one is going to be the manual list using a line item Center we align them vertically as you can see they are in the center right here vertically and then we added some padding and we used a CSS variable color black and if you remember correctly that's coming from index CSS at the top we defined some of the most commonly used colors for this project one of these is color black great so now we can continue implementing our navigation bar let's add the styles for the navbar logo so just below app nav bar we can say dot app underscore underscore navbar Dash logo let's give it a display is equal to flex we're gonna make it justify Dash content is going to be equal to flex Dash start this is going to make it appear on the start and then finally align Dash items is going to be Center there we go now it's centered now we can also change the width of that logo so we can say dot app underscore underscore navbar Dash logo and then the image inside of that logo we can set the width to be something like 150 pixels there we go this is already looking so much better now we can style the links so we can say dot app underscore underscore now bar Dash links we can set the flex to be equal to one that way the menu is going to take most of the space of the screen then we can set the display to be equal to flex again justify Dash content is going to be set to Center and then align Dash items is going to be set to Center as well there we go and finally we have to remove these bullet points so we can say list Dash style is none there we go now we have our menu but we have to change each list item inside of the menu so we can say dot app underscore underscore navbar Dash links and then Li in here we can simply set the margin on top and bottom to be zero but on left and right set it to 1 REM and let's also give it a cursor pointer when we hover over it we'll know that it's clickable there we go this is looking like a great navigation bar already finally we can copy this paste it below and we can say Colin hover so what's going to happen once we hover over it we can change the color to be equal to VAR and then dash dash Color dash gray there we go as you can see now we get real-time feedback that we are actually hovering over something and that we can click it now let's go back to our jsx file and below the UL we're going to have one more div this div is going to have a class name app underscore underscore navbar Dash login and inside of there we're gonna have two more anchor tags the first anchor tag is going to have an href that's going to be hash login and it's going to have a class name equal to P underscore underscore open Sans and it's simply going to say log in or register like that let's save it there we go let's create one empty div right here to create some space and let's create one final anchor tag right here that anchor tag is going to Simply point to slash which is home and it's also going to have a class name equal to P underscore underscore open sense and it can say book a table or Book Table there we go so now we can style those we can start by styling the dot app underscore underscore navbar Dash login and again we're going to use display Flex we're going to use the justify content of flex end right now and align Dash items set to Center we can now copy this paste it below but this time interact with the anchor tag inside of this div and we can simply set the margin to be equal to zero on top and bottom and one ram on left and right we can also set the text decoration to be equal to none and in here we can provide the transition to be equal to 0.5 seconds and ease like this so now if we save that you can see those two extra items I'm gonna reset the screen zoom there we go so this is looking even better and now let's copy this one more time and let's change the hover right here on Hover we can give it a border Dash bottom one pixel solid VAR color golden so golden is going to be quite of a theme for this specific project and there we go there is even some slight animation right here you can barely see it great so finally we can also change the div inside of the navbar login by saying dot app underscore underscore navbar Dash login and then div we're gonna give that div a width which is going to be of one pixel we can give it a height of 30 pixels and we can set the background or background color to be VAR color and then gray that's going to create a vertical line between the last two items on our list giving it that nice touch now we have the logo on the left side we have menu items on the center and we have login and book a table on the right side as more prominent navbar features great we can go back to navbar and now below this div we can create one final div this div is going to have a class name equal to app underscore underscore now VAR Dash small screen this is going to be the navigation bar for smaller devices inside of here we can render that hamburger menu by saying GI hamburger menu as a self-closing tag it's going to have a color equal to Hash FFF and it's going to have a font size equal to 27 pixels and it's going to have an on click property which is right now going to be empty it might give us an error if we leave it empty so let's create an empty callback function instead let's save it there we go you can see the hamburger menu on the right side and below that hamburger menu we can essentially just copy the list we already have so right here I'm going to copy this UL paste it right here with all of our list items but we're gonna change some things inside of here this is not going to be app nav bar links it's going to be app underscore underscore navbar Dash small screen Dash links and then all of that is going to be in one more div so right here we can create a div it's going to have a class name equal to app underscore underscore now bar Dash small screen underscore overlay and we're going to have Flex underscore underscore Center and slide Dash Bottom now inside of that div we're going to have an icon which is going to be MD outline restaurant menu with a font size of 27 it's going to have a class name equal to Overlay underscore underscore close and it's also going to have an on click which is going to be set to Simply an empty callback function at least for now and let's make sure to close it right here so now we can pull this menu inside of that div so that we have the icon and the menu right here one next to another let's save this and there we go you can see that now our mobile menu is visible here as well and that's because we haven't yet implemented the classes for our small screen links so we can do that right now let's for now say dot app underscore underscore navbar Dash small screen it's going to have a display set To None that's going to be on bigger devices but later on once we Implement media queries we're going to bring that back into play for now let's create that overlay as well so that's going to be dot app underscore underscore navbar Dash small screen underscore overlay and also before we start writing code let me show you what am I referring to if we go to the finished site by the way you can visit it by going to direct.versell.app and if you just scale this up a bit to go to the hamburger menu and click it we're now building this nice overlay that's going to show on tablet devices and mobile devices and you can see this restaurant icon at the top right we can use that to close it so this is great right now we're building this black overlay with these items so for the overlay we're going to set the position to be equal to fixed we want it to appear on the entire screen so we're going to say top is zero and left is zero and width is going to be one percent as well as the height is going to be set to 100 VH which means the entire height of the screen then we can set the background to be equal to VAR color black like this and transition is going to be 0.5 seconds is finally Flex direction is going to be column because as you can see these items are not coming up in a row they're coming up in a column and also the Z index is going to be set to 5. that means that the overlay is going to appear over the actual page so now we can go back to our own website and let's style that close icon that's going to be dot app underscore underscore now bar Dash small screen underscore overlay and then space dot overlay underscore underscore close we can set the font Dash size to be equal to 27 pixels we can set the color to be equal to VAR color golden we can also set the cursor to be set to pointer position is going to be set to Absolute and it's going to be positioned on the top 20 pixels and also on the right side 20 pixels there we go again we cannot yet see anything because right now the overlay is hidden and also the mobile menu is hidden but we might be able to see our mobile menu if we Implement a media query right here media screen and Max Dash width is 1150 pixels in here we can say dot app dash links and we want to set display to be equal to none so we're going to hide our main navigation bar but the app underscore underscore nav bar Dash small screen right here we want to set the display to be equal to flex to make it visible there we go so now we can implement the logic for what happens once we click on this hamburger icon to do that we can transform this from a function with an instant return into a normal function that has curly brace and then a return statement right here of course we need to indent this this as well and then add a curly brace at the end that's going to allow us to now add a react state right here const toggle menu and set toggle menu is equal to react dot use state and at the start it's going to be toggled to false of course you can either use react dot to get to the use state or you can simply import it right here by writing comma use State use state in react allow us to make some Dynamic changes when you click something or depending on some kind of parameters so in this case the only thing we have to do if we click the hamburger menu we want to set toggle menu to be set to true and if we click right here to close it we want to set toggle menu to be set to false we can save that and now we only want to show this div if the toggle menu is set to true so what we can do let's first divide it from the rest of the content like this and we can say new Dynamic code block jsx is special because it allows us to have some logic right here so we can say if true then render something out in this case if the toggle menu is set to true in that case we can show this block of code so we can end it right here and there we go now we're showing this div only if the toggle menu is set to true I reloaded the page and you can see it's hidden and if I click it it shows up but right now we don't have that restaurant icon to close it because we don't yet have the overlay so to show the overlay looks like I have a small typo right here I'm missing another E right here so if I do that we can now see that great overlay and we can close it open it close it and there we go let's implement the actual list items inside of that overlay we can do that above our media queries below the overlay close first we can say dot app underscore underscore now bar Dash small screen underscore links and we can set the list style to be equal to none that here should remove these bullet points but that didn't happen so let's see what's happening app navbar dash small screen underscore links and we're gonna go here and try to see where do we have those links and it looks like I also missed an e here and this here should have been an underscore so if you fix that you can notice that the bullet points are gone now we can copy this just below and let's give them some margin like two REM both on top and bottom and left and right but we want to Target each individual Li there we go the margin has been applied let's also make them a cursor pointer then we can change the color to be equal to VAR color golden let's also increase the font size to be equal to 2 REM let's use the text align to Center them and finally let's use the font family to be equal to VAR and that's going to be font base like this there we go this is again another CSS variable we've created at the start and this is already looking so much better let's now copy this and just below we want to implement the hover as well so we can say column hover and then color is going to be VAR color white from Golden to White this is already looking so much better and now we are technically done with our navigation bar but we want to make sure that it looks good on all screen sizes so the first screen size we can work on is going to be 2 000 pixels so let's copy this add media and screen and that's going to be 2 000 pixels again you can play with these sizes but they are some most commonly used sizes like 2 000 1150 650 pixels for mobile devices these are the screen sizes we're gonna use so we can copy this as well and the last one we're going to use is going to be for mobile devices Max with 650 and that's going to be at the end we're going to start from the widest to the least Y of them all which is a mobile device so on big devices we can say dot app underscore underscore now bar Dash logo and then image is going to be with 210 pixels let's check it out this is going to make the logo just a bit bigger on larger devices and finally on mobile devices we have to change the nav bar bit so we're going to do dot app underscore underscore now bar but first let's check it out how does it actually look like on mobile devices to see how does a website look on mobile device you can go to inspect and then click this icon right here toggle device toolbar usually I go here and check for let's say iPhone 12 Pro there we go this right now is not looking the best we have horizontal scroll which is something you never want to have on a mobile device so something is going outside of the borders let's try and fix that we're gonna set the padding to be equal to one REM right here there we go that's going to provide us with some more space and then the app underscore underscore navbar Dash login in this case we're going to set the display to be equal to none because we don't have enough space to show everything on that mobile navigation bar so now if you click here you can see it just fine and finally let's change the logo width so I'm going to copy what we have right here paste it down here and the width is going to be 110 pixels so now we have direct on the left side and we have a hamburger menu on the right side which when we click it we can see the entire menu but if we go to our finished site garrick.forsil.app go to inspect and toggle on the mobile toolbar you can notice that in here we don't have any horizontal scroll everything fits on one screen and we can click it this is looking so much better so back on our own site we have to find a way to eliminate this scroll and this is happening because the width of the navigation bar is wider than the actual viewport so let's go ahead and fix that together just to make the life easier for us to debug we can for now comment out all of the other sections by going into app selecting them and pressing Ctrl forward slash to Simply comment them out and then we'll be able to comment each one back in one by one I've paused the video for a few minutes trying to find the mistake I've made while recording but hey guys I just reloaded the actual server by stopping it from running and then running npm start again and would you look at that the layout actually fixed itself so sometimes you won't be the one creating the box maybe sometimes you just have to reload your react application and the issue is going to get fixed and I always like to include these bugs in the video because you can see the not everything is perfect and not everything is going to work on the first try but as soon as we reloaded the app we can actually see that this is working perfectly as it does right here with that said we're completely done with our navigation bar both on our mobile view and on our desktop view if we extend it even further you can see the entire navigation bar is here so we can go back into the app.js we can uncomment everything and then let's leave everything here but let's move into the header part implementing the header is going to be our next goal to start creating the header we can first Import in curly braces images from dot slash dot slash constants now our first div is going to have a class name equal to app underscore underscore header space app underscore underscore wrapper and section underscore underscore padding it's also going to have an ID equal to home that way we can scroll to it now inside of this div we're going to have one more div and this div is going to have a class name equal to app underscore underscore wrapper underscore info and just below that div we're gonna have one more div we can space it out so that div is going to have a class name equal to app underscore underscore wrapper underscore IMG so the second div is going to contain the image and the first one is going to contain the info let me show you what I mean if we go to our design you can notice that this here is going to be our header on the left side we're going to have some text right here with the title and on the right side we're gonna have a big juicy image inside of our wrapper underscore info we're gonna have a new component that we're going to create right away and that component is called subheading subheading with a capital H is a component that we already have the file for it's in the components and then subheading right here so the only thing we have to do is import it one cool trick you can do is double click subheading and press Ctrl space immediately you'll be able to import it just like that if this trick for whatever reason didn't work for you you can just write Import in curly braces subheading from dot slash data slash components now if we go back to our site you can see subheading right here the reason why we have a specific component for the subheading is because we're going to reuse that across multiple sections whenever in react you want to reuse something across many sections in many different places create a new component out of it that way you won't have to write all the code every time you'll just be able to import that component so let's control click to go into the subheading and we can implement it right away inside of this component we're gonna also import images from dot slash dot slash constants make sure the images is in curly braces our subheading component is going to have a div that's going to have an inline style we can create inline Styles like this style is equal to and then curly braces and then an object inside of it we can say margin bottom is equal to one REM and again you could have used a class here but I just wanted to show you that you can do inline Styles as well inside of this div we can create a paragraph with a class name equal to P underscore underscore core morand in this Cormorant right here is just the name of the font if we go to index CSS you can notice that we're going to have if we scroll up there we go font base Cormorant font and the second font is the open sense so in this case we just want to use this font now inside of there we can render something like a title this title will have to be dynamic right now we cannot pass Dynamic values but I'm going to show you how you can do that really soon just below we can render a self-closing image tag that's going to have a source equal to images dot spoon and then we can say all tag is going to Simply Be spoon and the class name is going to be spoon underscore underscore image or IMG there we go so now if we save that you'll be able to see just a little spoon right here and that's going to serve as our heading so now we can go back to our header and just below our subheading we can Implement an H1 this H1 is going to have a class name equal to app underscore underscore Heather Dash H1 and in here we can say the key to fine dining there we go if we save that you can see it right here but now let's also pass a dynamic title to our heading so right here we can create a new so-called prop if you used react before then you'll know that using the props like this when you create a new component you can pass specific properties into it and then you can pass some values in this case we can pass a string called chase the new flavor and this value is now going to be dynamically passed into our subheading inside of the props object we can immediately destructure the title from there and then using Dynamic rendering inside of the jsx we can simply show the title right here we haven't yet implemented the styles for our header so let's go ahead and do that right now we can open up our files and go to heather.css the first thing we can of course do is set the app.heather and set the background color to be equal to VAR dash dash Color dash black as soon as we do that you can now see the subheading right here now let's style the H1 by saying app underscore underscore header Dash H1 and I'm going to pull this just a bit to the side so that we can see it right now it is dark so we cannot see it but if we change the font family to VAR and then that's going to be dash dash font Dash base and if we give it color equal to VAR dash dash Color dash golden we should be able to see it right here let's check it out it still seems to be dark so this is app underscore underscore header Dash H1 and right here app underscore underscore header Dash H1 this seems good the only mistake here is that I had a typo let's also try to divide the letters a bit by using letter spacing 0.04 em if we save that you can notice now it seems more spread out and we can also use the text transform uppercase that's going to make the text uppercase then we can set the line Dash height to something like 117 pixels I found that value to work the best to give it some space here and we can also set the font size to be something like 90 pixels the key to fine dining there we go and while we're here let's also provide the classes for the image dot app underscore underscore header Dash image IMG width is going to be set to 80 percent now if we go to our header just below this H1 we can add a paragraph that's going to have a class name equal to P underscore underscore open sense and we can give it an inline style that's going to be margin two REM on top and bottom and zero on left and right inside of here we can use some generic text so if we go to our design we can zoom into here and you can double click the text right here and copy it let's just go back and paste it straight in now if we go back you can see the text right here finally if we go to the button right here the type is going to be equal to button and the class name is going to be custom underscore underscore button and the button can say explore menu custom underscore underscore button here I'm not really good with typing today but there we go that got fixed and finally for the image we just need to put the image tag right here as a self-closing tag Source or SRC is going to be images dot welcome and the alt is going to be header IMG if we save that we can see that great image right here and with that our header is already looking so much better if we didn't scroll down to see all of the other not yet finished sections you will think that this is a perfectly created site and it is it's designed perfectly but we are yet to implement all of the other sections of the page the next section on our list is going to be about us where we're going to have this great knife in the middle about us on the left side and the history on the right side and in here you can see what did I mean when I told you that you can reuse react components see this little spoon here and the golden text well that is oddly familiar to this about us and then a spoon and that is similar to our history and a spoon so all of this can be created and reused later on great so with that said let's go to our app.js right here and you can control click to go into the About Us section to start implementing the about us page we can again import images which are coming from dot slash dot slash constants we're always going to use some images so that's good then let's give a class name to the first div right here and that's going to be class name equal to app underscore underscore about us space app underscore underscore BG space flex underscore underscore Center and space section underscore underscore padding we also want to give it an ID equal to about so that we can scroll down to the about section great now inside of that div we're going to have a few more divs as we usually do that's how you create a layout the div inside of the main div is going to have a class name equal to app underscore underscore about us Dash overlay and then space flex underscore underscore Center inside of that div we're gonna have just one image with a source equal to images dot g so this is going to be that big G letter that you can see in the background then let's also give it an ALT tag which is simply going to be G letter and we can close that now if we save that and go back we can see that big letter G right here so to continue we're going to create one more div just below this one and this div is going to have a class name equal to app underscore underscore about us Dash content Flex underscore underscore Center inside of here we're going to have all the content for the about us meaning the left side right here so let's slowly start creating that left side let's create one more div and this div is going to have a class name equal to app underscore underscore about us Dash content underscore about inside of here we're gonna have an H1 and that H1 is going to have a class name equal to head text underscore underscore Cormorant and it's simply going to say about us then we also want to render an image so right here let's render the image tag that's going to be this little spoon image so we can say image source images dot spoon and the alt tag is going to be about underscore so spoon and we can also give it a class name equal to spoon underscore underscore image or rather just IMG finally we can just create one more paragraph just below that image and that paragraph is going to have a class name equal to P underscore underscore open Sans and we can simply copy this lorem ipsum inside of it so let's copy it paste it straight here and the last thing we need is going to be the snow more button so right here let's create a button and that button is going to have a type equal to button class name is equal to custom underscore underscore button and it's going to say no more we can now save this and see how does it look like okay already not that bad but of course we have to write all of these classes to fix the layout a bit and to fix the Styles before we do that we can also add that knife in the middle and we can also add the second part as it is incredibly similar to the About Us section so let's simply add one more div just below this inner div right here we can add a div and that div is going to have a class name equal to app underscore underscore about us Dash content underscore knife and flex underscore underscore Center so inside of there the only thing we need of course is going to be an image that's going to have a source equal to images dot knife we can also set the alt tag to be about underscore knife now if we save that and go back you can see that big knife in the middle that's looking great and it's looking harder to make than it actually is now what we have to do is copy this entire inner div which is the About Us section and paste it below because as we said these sections are similar the only change we'll have to make is this here is not going to be about us content underscore about it's going to be underscore history it's going to say our history the text here can remain the same the spoon is going to remain the same and the button is going to remain the same so now we can save this go back and this is already looking so much better but of course now is the time that to fix the layout and positioning we can do that of course using our about us CSS file let's start by relatively positioning the entire div we can do that by saying dot app underscore underscore about us and then that's going to be position is relative that is going to allow us to move the overlay around so we can say dot app underscore underscore about us Dash overlay and then that's going to be position is set to Absolute and in set is going to be set to zero inset is a property that is not that often used it is used when we have absolute position and it allows us to more easily correspond the top and bottom or left and right values so as soon as we do that you can see that right now our G is coming on top of the actual content and the content is behind so what we can do is do the dot app underscore underscore about us Dash overlay and then image in here we can set the width and the height I found 391 pixels to be fine for the width and then we can set the height to be equal to 415 pixels finally we can set the Z index to be equal to zero that way the G is actually going to go behind the content once we leave the content up and for the width and the height the easiest way to see is to Simply click the G icon right here or any icon for that matter and simply read the Styles so if we go to inspect you can see the width and the height right here so now we can move to the content and that is dot app underscore underscore about us Dash content and then width is set to 100 percent as well as the Z index is set to 2. that's going to push the content above the G and that's going to create this nice look finally we can play with the positioning of this entire div containing the content and we can do that by saying dot app underscore underscore about us Dash content underscore about right here we can set the flex to be equal to 1 that's going to push everything to the left side then we can set the display to be equal to flex justify Dash content to be equal to flex Dash end now everything is going to the end of the screen but we have to do a line Dash items Flex Dash and as well and finally and most importantly Flex Dash Direction has to be column there we go and finally let's also do the text Dash align to be equal to right doesn't look so good so far but as soon as we add some margins it's going to look a lot better so let's do that app underscore underscore about us Dash content underscore knife and there let's do margin two REM on top and bottom and four REM on left and right there we go now let's change the height of the actual knife by saying dot app underscore underscore about us Dash content underscore knife image or IMG height is going to be set to 910 pixels there we go this is already looking more like it now we have to do everything we've done with the about us to our history so let's copy this entire part paste it below change this to underscore history instead of about Flex is going to remain One display is going to remain flex but it's not going to be Flex end it's going to be Flex start right here as well as Flex start right here and the text align is going to be set to left there we go this is already looking more like it finally let's add some margins inside of each one of these divs we can do that by copying this right here and then targeting the P element of that specific div we can duplicate that Target the P element of the about section as well and now we can simply say margin is 2 REM on top and bottom and zero on left and right there we go we push the content a bit up and down and let's change the color to be VAR dash dash Color dash gray now we're coming closer to the finished design let's see how our design looks like on mobile and tablet devices so as soon as I open up the mobile toolbar by right clicking and then clicking inspect and then toggling the device toolbar right here we're currently on iPhone 12 Pro and you can notice that this is not looking great again it's coming outside of the actual mobile viewport and it's not fitting on the screen so let's start changing the view for mobile devices we can start by adding add media screen and Min Dash width is 2000 pixels that's for wider devices then we can copy that two more times for tablet devices we're going to use 900 here and then finally we're going to use 650 pixels for mobile devices as we're testing on mobile first let's change that so we can do dot app underscore underscore about us Dash overlay image and let's simply set the width of the image to be 80 and we can also modify the height to be equal to 320 pixels right now we cannot see any changes but now let's implement the tablet version because that's potentially going to change the mobile version as well let's implement the tablet version we can do that by saying dot app underscore underscore about us Dash content and we can set the flex Dash direction to be equal to column we can also change the knife by saying dot app underscore underscore about us Dash content underscore knife and right here we're going to change the margin to be 4 REM on top and bottom and zero REM on left and right and the last change we can make for our media queries is going to be changing the knife image so let's simply copy this we can change the knife image height to be 1110 pixels like this and we're gonna also change the margins between the paragraphs so we can paste this right here indented and make it for Ram and 0. so now let's reload this page and let's see what's happening with our design it seems to be breaking let's try testing it on for example Galaxy fold everything is breaking here as well let's try iPad Mini it's looking better here but that g letter is being skewed let's try iPhone XR not looking good as well here let's see how it should look like on the finished side so if I open up the inspect element and mobile toolbar you can see that this part here should be appearing above the knife in the mobile version so we most likely have a typo somewhere let's go into about us right here look at that in our div it's the about us Dash content and right here in the CSS we're properly calling it about us Dash content and here is our issue instead of Min width we should have used Max width for all of these cases whenever you're doing mobile responsiveness for mobile devices and tablets Max width is going to be the thing you're looking for this was a big typo on my end and this definitely shouldn't have happened the reason why it has to be Max width because we want to see devices from the width from 0 to 650 so max is 650 apply these Styles so right now we're applying the Styles Flex direction is column for mobile devices and larger mobile devices like tablets up to 900 pixels and now this is looking glorious we have this big knife here we have the history and if we scroll up we can see that nice header section right here if you click we're gonna get that nice navigation bar as well so everything is looking great if we scroll down we'll be able to see the next section on our list and that is going to be the special menu but before we start doing our special menu let's close our effect tools and let's expand this site to its fourth Glory there we go this is a really nice about us and history page where we can click it and potentially go to a full about us page this paired with a great header is already a phenomenal start to a great fine dining restaurant as we've mentioned the next section is special menu so let's go ahead and do that right away of course as we always do we can go to our app and then control click special menu and we are right here we have the website on the right side we have the code on the left and we are ready to start creating the jsx to create the special menu we're again going to import something this time it's going to be images as well as the fake demo data from dot slash data slash constants and we're gonna also need two different components the first component is the one we've already created the subheading and the second one is going to be a new one on our list which is called a menu item these components are of course coming from dot slash dot slash components now that we have all the Imports ready we are ready to start creating the jsx part and we can start by giving this div a class name equal to app underscore underscore special menu with a capital m Flex underscore underscore Center section underscore underscore padding and the ID is going to be equal to menu just so we can scroll to that part of the page now inside of there we're going to have a div and that div is going to have a class name equal to app underscore underscore special menu Dash title inside of there we can render the subheading component as a self-closing tag and provide a title equal to let's check the design that's going to be menu that fits your palette so let's copy it and paste it right here now if we go back we won't be able to see it yet because it's white on white but as soon as we add a dark background it's going to make more sense now let's add this heading below so we can say H1 right here and that's going to be class name is equal to head text underscore underscore Cormorant and we can simply say today's special there we go now this is going to be our title and subtitle below that we can have the actual menu so let's create a div is going to have a class name equal to app underscore underscore special menu Dash menu now inside of there we're gonna have a few divs the first one for the left side wine and beer then we're gonna have the div that contains this image and finally we're gonna have our cocktails so let's start by creating the first one which is this left side right here wine and beer that's going to be div that's going to have a class name equal to app underscore underscore special menu Dash menu underscore wine and then it's going to be Flex underscore underscore Center inside of there we can provide a paragraph tag that's going to say wine and beer and just below that we can have a div that div is going to have a class name equal to app underscore underscore special menu underscore menu underscore items and this paragraph above is also going to have a class name equal to AB underscore underscore special menu underscore menu underscore heading there we go and finally inside of this div we can map or data dot wines dot map where we get a wine or a beer and we also get an index of that wine or beer and we can just use parentheses to instantly return something in this case let's return for now just a simple paragraph that's going to render the name of that specific wine in this case that's going to be Wine Dot title let's go back to our website and there we go we have names of different wines but of course this is looking so bad because we didn't yet implement the Styles we're going to implement them straight away but first let's just add two more divs the first div is going to be just below this div right here and it's going to be the div for our image the image I'm talking about is this Central image right here so that div is going to have a class name equal to app underscore underscore special menu Dash menu underscore IMG and right here we can render IMG with a source images dot menu and ALT tag is going to be menu IMG if we save that there we go we have this huge image right here and the last thing we have to do is copy the div before containing our menu and paste it below there are just a few things we have to change now it's not going to be menu underscore wine it's going to be menu underscore cocktails and right here below this is going to be data dot cocktails where we're going to get each individual cocktail and then we can render cocktail.title there we go so now in here we have different cocktails and in here we have different wines the last thing we're missing is going to be this view more button so let's just code that out and then we'll be able to add the Styles So Below not only this div but this div as well let's create a div is going to have a style equal to margin top is equal to 15 pixels like this we could have used a class as well but this only has one specific property so I just used a style and there we're gonna have a button that is going to be type is equal to button and it's going to have a class name equal to custom underscore underscore button finally we can say View more and our button is right here right now it's really hard to see what's happening here so let's go ahead and implement the layout and the background in the special menu dot CSS inside of here the first thing we're going to do is do the dot app underscore underscore special menu and we can set the flex Dash direction to be equal to column and more importantly background is going to be set to VAR Color dash black there we go this is already looking so much better then below that we can say that app underscore underscore special menu Dash title we can put the margin Dash bottom to two REM like this and we can also say text Dash align is equal to Center there we go now let's actually style the menu we can do that by saying dot app underscore underscore special menu Dash menu width is going to be set to 100 percent now if we save that we cannot yet see that menu because the text is dark but if we tried hovering over it there we go we can see that the menu is here let's also add a bit of margin margin two RAM on top and bottom and zero on left and right let's also make it a display is equal to flex justify Dash content is Center align Dash items is flex Dash start and finally Flex Dash direction is row you might be wondering why am i setting this to row well by default it is set to roll that's true but later on on mobile devices we might change this back to column so it's important that we set it up right here and now if we select this right here you can see that we have our menu and on the right side we have our other menu now considering we cannot see these values right here they're just paragraphs without any Styles it might be a good idea to go back into the special menu and right here instead of paragraphs let's render a special component more specifically let's render a menu item menu item is going to have a key equal to Wine Dot title plus index to make sure that the key is unique it's also going to have a title equal to Wine Dot price and finally it's going to have tax which is equal to Wine Dot tax now we can copy this line and paste it below for the cocktails of course we'll have to change this to cocktail.title then for the title we're going to use cocktail.title not price here for the price we're gonna use cocktail dot price and finally for tags we're going to use cocktail.tax but it looks like I missed the price on our wines so right here let's add the price as well equal to Wine Dot price there we go now we can control click into our menu item component inside of here we already know what we're getting we're getting a title a price and tax and based on that we can create a Dev with a class name app underscore underscore menu item like so and you'll see me sometimes use camel case or sometimes all lowercase use whatever you prefer but make sure that you stay consistent with it so inside of that div we're going to have one more div and this div is going to have a class name equal to AB underscore underscore menu item Dash head inside of that div we're going to have one more div and this div is going to have a class name equal to app underscore underscore menu item Dash name inside of that div we can render a paragraph tag this paragraph is going to have a class name equal to P underscore underscore Cormorant and then let's also give it a style an inline style equal to color is going to be equal to a string of hash DCC a87 I found this color to work the best and inside of there we can dynamically render a title there we go now we can see the prices and titles right here wait but that's definitely not okay if we can see the prices on the left side but titles on the right side and we'll only render the title something must be off so let's go to special menu and right here for wine title we need to pass Wine Dot title as well there we go so now we can see the Y names and cocktail names going back to menu item now that we have this menu name we of course need the price so let's simply copy this div put a space in between in here we're gonna say price and of course we can render the price right here but in this case we won't need the style of color so let's simply remove that there we go so now we have the price below the name as well the only thing we need if we look at the design is going to be this Dash between them so how are we going to create that Dash well let's create just one div that's going to be a self-closing tag and it's going to have a class name equal to app underscore underscore menu item dash dash there we go that's it and then finally we need some tags like Au bottle AR bottle and so on so not below this div but below this div we're going to create one final div and that div is going to have a class name equal to app underscore underscore menu item Dash sub and there we're going to render a paragraph it's going to have a class name equal to P underscore underscore open sense and it's going to have a style equal to a color of hash AAA there we can render the tags now if we save that and go back we should be able to see the tags and here they are a gives us that nice grayish or brownish color this is already looking so much better of course we have to decrease the width and the height of this image before we do that though let's first Implement all of these styles for the menu item let's go to our menu item dot app underscore underscore menu item the width is going to be set to 100 percent the margin is going to be set to one ram on top and bottom and zero on left and right let's also give it a display is equal to flex and flex Dash direction is set to column and in here I'm missing an m at the end that's going to apply the changes now let's do the dot app underscore underscore menu item Dash head let's set the display to be equal to flex let's use the justify Dash content of space Dash between and align Dash items to center now if we save that you can notice that now the head or the header where we have the title on the left side and we have the price on the right side the only thing we're missing is that Dash in between before we implement the dash let's also do the dot app underscore underscore menu item Dash sub let's give it a width of 100 and a margin Dash top of 0.2 Ram there we go that space this out from the title just a bit then for the dot app underscore underscore menu item Dash name we can give a flex is equal to one that's going to make it take just a bit more space if the title is long finally let's Implement that Dash by saying dot app underscore underscore menu item Dash Dash and let's go to our design and let's see if we click on this Dash can we get any meaningful styles from here inspect let's try to copy the Styles straight from here and paste it here let's see what styles will we need and which Styles we won't need in this case let's make the width equal to 90 to make it just a bit shorter the height can be one pixel we don't need the static positioning nor the left or top values the background is not going to be Fafa it can be our own color VAR dash dash Color dash golden we can remove all of this Auto layout and margin is going to be zero and then one REM on left and right there we go so now let's add semicolons save it go back if I zoom it out a bit like this it's looking so much better the last thing we have to change is going to be the price so that app underscore underscore menu item Dash price and right here you can set the display to be equal to flex justify Dash content to flex Dash and and finally align Dash items to flex Dash and as well there we go everything is looking so much better now that we're done styling each individual menu item we can go back to special menu.css and let's continue implementing The Heading we can do that by saying dot app underscore underscore special menu Dash menu and then underscore heading let's try to see what that heading is if we go back to our jsx and let's search for underscore heading there we go that's going to be wine and beer right now we didn't even know what it is because we cannot seem to see it it's dark and it's not on this page oh there we go it's right here hiding we are yet to style it properly let's go back to special menu dot CSS and let's see how should it look like there we go wine and beer so right here we can set the Fawn Dash family to be equal to VAR font and then Dash base then we can set the font weight to be equal to 600 we can set the font size to be equal to 45 pixels line Dash height can be 58.5 pixels and again if you're wondering where am I getting these values from you can find most of the CSS values straight from the design if we double click right here there we go you can see the width height font weight 600 font size 45 line height 130 percent we're gonna also use letter Dash spacing and that's going to be 0.04 em and finally we need the color which is going to be Color dash White now if we save this and go back reload the page we still cannot see the title it's still hidden right here so most likely I have a typo in the special menu.jsx so if we go here let's try to find that heading app underscore underscore special menu underscore menu this here was supposed to be Dash menu and right here below this here Dash menu as well but of course on the second one we should say cocktails there we go so now this is already looking much better right now we can at least see it here but it's not positioned correctly so let's see where is the problem with that let's go back to our special menu.css and we're going to change the dot app underscore underscore special menu Dash menu underscore wine and also let's add a comma and let's also change the Cocktails so right here we can say comma and then cocktails we want to change Flex to be equal to one with to be equal to one hundred percent and most importantly Flex Dash direction to be equal to column there we go wine and beer appearing at the top and Cocktails on the top as well and finally let's decrease the height and the width of this image by saying dot app underscore underscore special menu Dash menu underscore IMG let's set the width to be equal to 410 pixels and margin to be 0 on top and bottom and 2 REM on left and right now let's copy this as well paste it below and now we want to Target the actual image where we're going to set the width to be equal to 100 of that 410 pixel div and there we go finally let's set the height to be equal to auto the last thing we're going to do is set the dot app underscore underscore special menu underscore menu underscore items let's make that display is equal to flex we just broke everything but if we bring the flex direction to column everything is going to be fine again and now we can add the margin to REM and then zero there we go just to provide some spacing and finally width is going to be 100 so this is a great looking wine cocktail and beer list if you ask me now of course we have to ask ourselves is this looking good on mobile devices and the answer is most likely not right well let's check it out yep if you said no you would be right it's breaking so let's go ahead and quickly fix it as we've learned so far we can do add media screen and is it Max or Min ask yourself we made that mistake the last time it's going to be Max Dash width we can do 2000 pixels now let's duplicate this two times the second one is going to be 1150 pixels and then finally the last one is going to be 650 pixels let's start from the smallest to the largest in here we can say dot app underscore underscore special menu Dash menu underscore IMG width is going to be 100 I still cannot seem to see the image right here maybe it's hiding but let's go on the deployed side and see how this should look like if we scroll down we have the wine and beer list here we have the image and then finally we have the cocktails so to be able to see the image and these lists one below another we have to go into our 1150 pixels media query because we want the logic inside of the CSS block both for tablet devices but also for mobile devices if you think about it the styles that are in here are only going to be available for mobile devices but whatever you put right here let's say XX that's going to be available both here and also here but whatever you put here is going to be available here here and here that's because Max width is larger than these Max widths so you have to be careful where you put one because some of these Styles can be applied across multiple media queries in the middle media query let's put dot app underscore underscore special menu Dash menu Flex Dash direction is going to be column that's the most important change we have to make and now almost everything fits right away what we can do is also set the Align Dash items to be equal to Center and finally the width to be equal to one hundred percent just to make sure that everything fits nicely for mobile devices one more change that we can make is change the heading right here dot app underscore underscore special menu Dash menu underscore heading and we can set the font Dash size to be equal to 35 pixels just to make it a bit smaller because in smaller devices this here was seeming too big and let's also change the line Dash height to be equal to 48.5 pixels there we go also on tablets let's just change the margin a bit dot app underscore underscore special menu Dash menu underscore IMG and let's set the margin to be 3 RAM on top and bottom and 0 on left and right let's open up the tablet let's do iPad Air and there we go this is looking great on iPads as well but now what happens if we go to a bit larger devices like Max with 2000 there we can set the dot app underscore underscore special menu Dash menu we can do Flex Dash direction is going to be column let's try to go to around 2000 pixels that's going to be around let's do 1600 there we go now we're editing for this screen size and obviously we have a lot more space to work with here so let's do a line Dash items is equal to Center and also width to be equal to one hundred percent there we go let's see this side on 1600 as well this is the finished side so let's do one thousand six hundred and in here as you can see we definitely have more than enough space to fit everything in one screen so if we go back that's still not the case so what's happening let's also change the margins as we did right here so I can simply copy this and paste it straight here and something else is preventing us from showing this in one row so let's reload the page when that doesn't do it that means that something's wrong either in the CSS or jsx so let's try to find the issue for our 2000 pixels devices on the deployed side obviously everything can fit and right here not everything can fit in one line and it looks like I've made a tiny mistake we don't want to have this in a column we want to have it in a row as we do at the start right here so we won't need this at all and also we won't need this but what we will need is going to be setting up the width of the image we were already dealing with that here so let's copy it paste it here and set the width to a bit larger 650 pixels we can also copy that paste it below Target the image and set the height to be equal to 920 pixels there we go so now this fits nicely on one screen and it looks exactly as it does on the deployed side now let's close the inspect element and see how does it look like if we expanded a lot there we go you can see that everything looks great and if we bring it all the way to mobile size you can notice that it looks great on mobile size as well that's going to be it for the special menu section now we can go to the app.js and the next on our list is Chef so let's control click it and let's go on to the design and see how does that section look like there we go here is our Chef he has some salad and what we believe in okay this is a great next section to code out so let's do that right away as always to start off we can import our images primarily that's going to be this Chef image right here and that's coming from constants and we're going to also import the subheading that's a component that we've used a few times so far so import subheading from dot slash data slash components now for our div we can give it a class name equal to app underscore underscore BG app underscore underscore wrapper and section underscore underscore padding now let's save that and let's go back to our website there we go we see this black section right away but now let's add a div inside of this div and this first div is going to have a class name equal to app underscore underscore wrapper underscore IMG and also space app underscore underscore wrapper underscore IMG Dash reverse now inside of that div we're gonna have our IMG it's going to have SRC equal to images dot chef and also let's say alt is going to be chef there we go let's save that and there we go our Chef is right here below this div we can have one more div and that's going to be the dev for the content so right here we can say class name is equal to app underscore underscore wrapper underscore info then we're going to have our sub heading so let's say subheading and as you know we need to pass a title to it and in this title we're gonna pass let's see Chef's word so let's simply copy that and paste it into the title right here then below that we can create an H1 that's going to have a class name equal to head text underscore underscore Cormorant and inside of there we can say what we believe in again you can simply copy that from the design if we save that this is already looking great so now below this H1 but still inside of this wrapper info div we can create one more div this div is going to have a class name equal to app underscore underscore Chef Dash content and inside of there we can render a div that div is going to have a class name equal to app underscore underscore Chef Dash content underscore quote and there we can render an image an IMG tag that's going to be a source SRC images dot quote and altag can also be quote if we save that you can see these quotation marks and just below that we can create a paragraph that paragraph is going to have a class name equal to P underscore underscore open sense and inside of there we can simply copy our entire quote which is right now just lorem ipsum so let's go ahead and paste it right here there we go this is already looking better and then just below this inner div we're going to create one more paragraph and that paragraph is also going to have a class name equal to P underscore underscore open Sans and it's going to include the rest of the quotation so you can copy it from here let's paste it there we go this is already looking much better and now below this inner div we can create one final div that div is going to have a class name equal to app underscore underscore Chef Dash sign and inside of there we can simply put our chef's name let's see and let's find it here there we go Kevin and we're gonna also put one more P tag AP tag of class name is equal to P underscore underscore open Sans and there we can say chef and founder finally we need an image IMG with his signature so we can say source is equal to images DOT sign and ALT is going to be sign there we go let's save this go back and this is already looking as it should we just have to do some minor styling adjustments positioning and layout so to do that let's go to our chef.css and right here we can first focus on the content so let's dot app underscore underscore Chef Dash content the display is of course going to be Flex let's also give it Flex Dash direction is going to be column width is going to be set to 100 and margin Dash top is going to be 5 Ram there we go we just added some space in between now below that we can say dot app underscore underscore Chef Dash content underscore quote let's also make this a display is equal to flex and then justify Dash content is going to be Flex Dash start okay you can see we positioned this correctly right now and then align Dash items is going to be Flex stash and there we go so it's now sitting at the end of this specific div right here now let's copy this and let's position the image so let's say IMG and that's going to be width of 47 pixels height is going to be 40 pixels and margin is going to be 0 on top one REM on right one ram on bottom and zero on left there we go now let's fix the signature a bit dot app underscore underscore shaft sign width is going to be 100 and margin Dash top is going to be 3 RAM there we go now let's style this chef and founder sign so right here we can say dot app underscore underscore Chef Dash sign p in the first Dash child inside of there we can set the font family to VAR and then font base then let's also change the font weight to 400 let's also change the font size to 32 let's save that there we go let's also change the line Dash height to something like 41 pixels okay let's add a bit of letter spacing 0.04 em is the value we've used before and let's use text Dash transform to capitalize I see that our chef and founder is not changing so let me see and this is going to be AB underscore underscore Chef Dash sine and P so if we go under chef Chef sign oh we're actually modifying Kevin yeah but I cannot seem to see it right here there we go it's hidden we have to change the color so let's go back here and the last thing we can do is change the color to be equal to VAR and then dash dash Color dash golden and there we go now we can see it if I zoom this in scroll down there we go this is already looking so much better now finally let's decrease the width of this signature so we can say dot app underscore underscore Chef Dash sign IMG width is going to be 250 pixels there we go and let's add a margin Dash top of three REM there we go this is looking so much better the only thing we have to do to make this mobile responsive is add two simple media queries add media screen and Max with 2000 pixels on larger devices we can again change the image right here so I'm going to copy this and we're going to Simply set the width to be equal to 370 pixels there we go to make it just a bit larger I'm going to copy this entire thing paste it below and now for mobile devices like really small devices up to 450 pixels we can change the image to be 80 percent of that specific screen so now if you save this this is going to be it for our Chef section so let's test and see how does it look like on devices of different widths first we can check on an iPhone so let's do iPhone 12 Pro and let's Zoom this in a bit there we go this is actually looking great we have our cocktails and just below we have our Chef right here what we believe in and there we go signature from Kevin chef and founder now let's try with something a bit bigger like surface Duo this is looking great as well let's try with iPad Air looking great as well and let's try something like tablet and laptop there we go looking great on laptops as well what about something like 2000 pixels now everything fits in one specific row left side for the image and right side for the content and with that said we are done with the chef part of this website this section is definitely something that every fine dining restaurant has to have with that said let's continue to the next section of our page and that is intro if we go to our design and scroll just a bit down this is going to be an introductory video to our restaurant definitely an exciting section to code let's start right away by going to app and then right clicking into intro to start creating our video section we're going to import two different icons the first icon is BS fill play fill and the second one is BS pause and these icons are coming from react Dash icons forward slash BS we also have to import the video itself so we can do import meal in curly braces from da.constance there we go if you control click into constants you'll see that we have a meal acids meal dot mp4 file inside of our assets great so now we have everything we need to start creating the jsx first let's add a class name to our Dev and the class name is going to be app underscore underscore video and right inside of there we're gonna have our video a video is a self-closing HTML5 tag where we can have a source and the source is going to be equal to meal so if we go right here we can see this meal right here this is a huge video but right now it's not playing so what we can do is we can add a type video forward slash MP4 then we can say Loop we can also say controls is equal to false and finally we can say muted now when you work with videos in react it's also useful to give each video a ref in this case let's call it vid ref now we can transform this component into a component with a straight return to a component that's going to have curly braces and the return is going to be this jsx right here this just allowed us to put some logic right here at the top of our component more specifically we're going to say const vid ref is equal to react dot use ref so we just created a reference if you haven't used refs before you can hover over this and C use ref returns a mutable ref object whose dot current property is initialized to what you actually assign it to so rev.current is going to be this video object now that we have our video ref we're gonna also have the use state so right here we can say use state and then click this box here that's going to Auto populate it and now without clicking anywhere with your mouse start typing play video and also Tab and at the start that's going to be set to false of course for the hooks you can either say react dot use state or you can import it at the top great so now we have our video ref and we also have our state so just below this video we can create a new div that div is going to have a class name equal to app underscore underscore video Dash overlay Flex underscore underscore Center inside of there we can have one more div and that div is going to have a class name equal to app underscore underscore video Dash overlay underscore Circle and flex underscore underscore Center we can save that and if we go back to our Design This is what we're right now building the overlay around the video and then this circle at the center now alongside this class name let's first put this into multiple rows or lines we're gonna also have an on click property so right here we can say on click and we can call the handle video function so let's declare that function right here const handle video is equal to an arrow function and there we can simply say set play video and when you want to change the state using the previous state you need to pass a callback function right inside of here where we get the previous play video if you haven't used react a lot this might seem a bit weird but if you have then you know that if you simply want to set play video to true or false you can do that but if you're changing the state using the previous version of that state you have to create a callback function where you get that state and then we can say not previous play video that means if the play video is true we're going to toggle it off and if it's off we're going to toggle it on then we can say if play video is set to true in that case we can do video ref dot current dot pause and then in other case if the video isn't playing we can do the video ref erent dot play and I just noticed that I called it the video ref but rather it should be with ref there we go so now we have this on click as well the last thing we have to do is render out the button so inside of this div we can open a new Dynamic block and say if play video is true using a ternary operator then we can render a button more specifically we're going to render BS pause fill as a self-closing tag like this and then else if the play video is false we can render BS Fill Play fill as a self-closing tag I'm going to hold alt and click right here in the right here because we're going to set the color of both to be equal to Hash FFF and font size is going to be equal to 30 for both of them now we can indent this properly put this into the same line because it's just the one liner like this and there we go if the video is playing already we want to pause it if the video is paused we want to play it now let's save that go back to our code and right now that button is nowhere to be found and so is our overlay of course that is the case because we still haven't implemented the styles so let's go into the intro dot CSS first we can Target the video Itself by saying dot app underscore underscore video and let's give it a height of 100 VH then we're gonna also give it a position equal to relative now we can Target the dot app underscore underscore video and then the video itself this time not the div but the real video and we can set the width to be equal to 100 percent and we can set the height to be equal to 100 as well most importantly object fit has to be cover the video is now fitting nicely to the height and the width of the screen then we're gonna focus on the video overlay by saying dot app underscore underscore video Dash overlay we're going to position the overlay absolute so we can say position absolute inset is going to be 0 and background is going to be let's change it to rgba and then 0 comma 0 comma zero and then 0.65 this is going to change the opacity so now if we save this you won't be able to see it yet but you can see it on the left side here with this play icon let's style that icon button so that's going to be dot app underscore underscore video Dash overlay and then underscore Circle in here we can set the width to be equal to 100 pixels the height to be equal to 100 pixels as well border radius is going to be that's a question for you we have a circle so for the radius is going to be 50 percent border is going to be one pixel solid and then VAR dash dash Color dash golden and finally cursor is going to be pointer there we go let's save it there we go now just the overlay has to go over the entire video let's see what's up about that so if we go back to our intro let's see if we have a typo somewhere that's going to be app video overlay Flex Center that seems good we have this circle right here which also seems good so everything in here seems to be good but if we go to our CSS this inset right here got autofilled for me so I meant to put just a zero here there we go this property alone did it so now we have this nice overlay and if we click play the video actually starts playing one change that you could make of course is when the video is playing remove the overlay or remove the button and overlay all together if the mouse is not currently on the video but this is great as well I actually prefer it this way so let's keep it we can simply see the video it's not that dark and it's looking great of course you can change this to something like 30 to make it a lot lighter there we go that's also a great look so now let's go to the deployed side scroll down and see how does it look like this is how it should look like and on our own side it's looking great as well let's expand it to the entire window and we have a large video let's see how does it look like on mobile if we go to inspect iPhone make this just a bit bigger scroll down and there we go it's looking great right here as well let's collapse this just a bit and with that said our video section is done we can clear our development environment just a bit by clicking on Visual Studio code and then holding Ctrl and pressing w a few times that's going to close all of the currently open files so let's close all of them and the only one we need right now is going to be source app.js next section on our list is going to be laurels we can go to the design and just zoom out a bit and in here we can see The Laurels these are going to be some awards and recognition that the restaurant has made such as rising star Hospitality outstanding Chef oh you already should know who is the chef Let's test your memory try remembering what was the name of her Chef if we scroll a bit up the name is Kevin okay great so this portion of the page is going to be next we have this great logo on top left as well as this photo right here and this big letter G so let's create this portion of the page right away to start with our Awards we first have to have some imports and I think we already had similar Imports in let's see special menu yeah exactly so you can go to special menu and you can copy these two lines go back into Laurels and paste them straight here we're going to reuse our subheading component we won't need the menu item and we're going to use images and data so our div is going to have a class name equal to app underscore underscore BG app underscore underscore wrapper section underscore underscore padding and then if someone wants to scroll to this part of the page it's going to have an ID equal to Awards inside of that div we're going to have one more div and this div is going to have a class name equal to app underscore underscore wrapper underscore info that info is going to be the left side of our page the information and then just below that div we're going to have one more div and this side of the page is going to be class name app underscore underscore wrapper underscore IMG of course this is where the image is going to go so let's first deal with the content we can of course render our subheading here our subheading with a capital H is going to have a title and that title is going to be let's see Awards and recognition so we can simply copy it from here then we're going to have an H1 and that H1 is going to have a class name equal to head text underscore underscore Cormorant and inside of there we can say our Laurels let's save that go back and right here you can see Awards and recognition and are laurels just below this H1 we want to Loop over the data in this case we're going to go into constants and let's see what the data is data has wines cocktails and Awards in this case we're looking for our Awards awards simply contains a list or an array of objects where each specific object has the image the title and the subtitle so back in our Laurels we can create a div the class name of that div is going to be app underscore underscore laurels underscore Awards and then inside of there we can open a dynamic block of code where we do data dot awards.map where we get each individual award and then for each award we're going to render a new component called Award card that is going to be a self-closing component in which we're going to pass in the award equal to award and we're also going to pass the key equal to award dot title so as you can see this component hasn't yet been defined so just at the top above our current component we can create a new component called Award card and that is equal to a react functional component you might be wondering why are we not importing this component from all the other components and the reason is we won't be reusing it it's going to be used only in this file so right here we can return a div and a div that's going to have a class name equal to app underscore underscore laurels underscore Awards Dash card inside of there we're going to have an image which is going to have a source equal to and then from here we're getting the award from props because we're passing it right here and each award has the image URL so we can furthermore the structure one more time the image URL the title and the subtitle from our award so right here in the source we can use the IMG URL and the alt tag is going to be award let's save that and there we go we have four different images for our award then just below our image we're gonna have one more div that's going to have a class name equal to app underscore underscore Laurels underscore Awards Dash card underscore content inside of there we're going to have two different paragraphs the first B tag is going to have a class name equal to P underscore underscore Quorum rent and a style an inline style of color is equal to a string of hash dcca 87 and of course we're going to render out the title right inside of it so right here dynamically rendered title there we go now we can duplicate this line we can remove the style for the color and instead of the title we're going to render the subtitle and as soon as we save that you can see this is looking great that is going to be it for our small Award card so we can go back into our Laurels and the last thing we need is going to be the image right here so we can say IMG is equal to SRC images dot florals and ALT is going to be Laurels as well as soon as we save that and scroll down you should be able to see this great image with this letter G as in garrect the name of the restaurant so this is looking great of course this is just the layout with some minor stylings but now is the time that we actually style it completely so let's open l'oreals.css and let's first focus on Awards that's going to be dot app underscore underscore laurels underscore Awards and there we can set a display is equal to flex as soon as we save that you're gonna notice that all of them are going to go in a row that's the default behavior for Flex then we can set the justify Dash content to be equal to flex Dash start that's going to be useful on different screen sizes and then also align Dash items is going to be Center there we go finally let's do the margin Dash top is going to be 3 RAM there we go this is already looking so much better now let's style each individual card by doing Dot app underscore underscore Laurels underscore Awards Dash card in here we can do Flex one so each card is going to take one space and a card can also be of a display flex but the justify content is going to be Flex Dash start and also align Dash items is going to be Flex Dash start there we go finally Min Dash width is going to be 230 pixels and let's apply some margin margin one REM there we go now we have all of our Awards right here but as you can see this is not looking great even on the device we're currently on it's going outside of the entire viewport of the page and breaking it completely so to fix that we're going to apply some media queries let's add a add media screen and in this case we're going to use the men Dash width it's going to be set to 1900 pixels so we want to apply the Styles if we are above 1900 pixels and in that case we want to select this card right here and we're simply going to set the Min Dash width to be 390 pixels this is going to fix the view for larger devices okay so now let's collapse it one more time and let's continue coding the styles I've just noticed that these images of these awards are not the same so we have to set the height and the width of each one of these images so just above our media query we can set the dot app underscore underscore Laurels underscore Awards Dash card IMG the width is going to be 50 pixels and the height is going to be 50 pixels as well there we go and finally we have to edit the content of the cards by doing Dot app underscore underscore Laurels underscore Awards Dash card underscore content there we can set the display is equal to flex Flex Dash direction is set to column and margin Dash left is one REM as soon as we save that you're gonna notice that this is looking a bit more streamlined so they're all looking the same now let's apply a bit of media queries again so just below I'm gonna copy this paste it and now let's do Max width and that's going to be 450 pixels in this case we want to edit the awards card and we're going to set the Min width to be 100 and margin is going to be one REM on top and bottom and zero on left and right now let's open up our mobile view and let's see how does it look like on different screen sizes I'm gonna reload the page and right away it looks like all of the awards are coming off the screen which is definitely not good to fix this problem of horizontal scroll on mobile let's scroll up and let's see if we have some mistakes in the CSS right here we have display Flex Flex start align item Center but we're missing one crucial property and that is flex Dash wrap is set to wrap as soon as we apply this you're gonna notice that now each award wraps one beneath another and instantly fixes our issue we have four Awards right here and then we have this great looking image let's see if this is working well on let's say iPad Mini looks great in here the awards wrap in rows of two and let's try something like pixel 5 looking great as well and let's see for the laptop that is looking great as well let's close our inspect element and let's try extending this side to the full width and there we go our four Awards on the left side and this great image on the right side now of course you can play with the layout a bit more here you can do it like it is on the design two per row even on larger devices but in my opinion this is looking great as well with that said we're done with the awards part of this page and we only have three sections to go the next one on our list is the gallery so if you scroll down you're gonna notice this Unique Photo Gallery where we get photos from Instagram so that's going to be our next task we can go to our code let's put it right here let's close all the files besides the app and let's go to the gallery there we go we are ready to start calling it out to get started with our Gallery we can of course make some imports first we can go back into Laurels and right here copy these Imports just to make it a bit faster and paste them straight here into Gallery in here we're going to be using the subheading and images no need for data and we also have to import a few icons so let's say import BS Instagram also BS Arrow left short and also if you can guess it BS Arrow right short and that is coming from react Dash icons forward slash BS great so how is our Gallery going to look like well first of all of course we're gonna have to have some Logic for moving the images left and right so this here is not going to be just a parenthesis we're gonna open a new function block and close it right here at the end then we can indent this and simply return it later on right here at the top of our component we're gonna have some states but for now let's go to our site scroll down and let's add our first class name the first class name is going to be app underscore underscore gallery Flex underscore underscore Center inside of that div we're going to have two different divs you can guess this here containing the text is going to be the first one and then the gallery is going to be the second one so the first div is going to have a class name equal to app underscore underscore gallery and then Dash content in here we're going to have our sub heading and our subheading is going to have the title equal to Instagram we can save that go back and right away we see this spoon but we cannot yet see what's happening so to quickly see what's happening it might be a good idea to go into gallery.css and change the Styles the most important thing we have to make is dot app underscore underscore gallery there we're going to Simply make a display is equal to flex then we're gonna set the flex Dash direction to be equal to row and most importantly background is going to be VAR and then dash dash Color dash black there we go now we can see Instagram here and let's also add some padding for Ram on top 0 on right for Ram and bottom and six RAM on left there we go Instagram is in the middle so now we can go back to gallery jsx and we can continue implementing the code just below our subheading we're going to have an H1 and this H1 is going to have a class name equal to head text and then underscore underscore cormorant inside of there we can simply say photo gallery let's save it there we go this is looking great and then just below that we can Implement A P tag this B tag is going to have a class name equal to P underscore underscore open sense and it's going to have an inline style equal to color and that's going to be hash AAA let's also give it a margin top of to REM and then finally what is this paragraph going to say well it's going to be lorem ipsum text so we can just copy and paste it straight into here if we go back there we go now just below that we're gonna have our button so let's say button then we're going to have a type is equal to button we're going to also have a class name is equal to custom underscore underscore button and then finally the button is going to say view more there we go now we're going to close this div and just below that div we're going to create of course our image gallery so this div is going to have a class name equal to app underscore underscore gallery and then Dash images inside of here we're going to have two different divs the first div is going to be for the actual images so that's going to be class name is equal to app underscore underscore Gallery Dash images underscore container and it's also going to have a ref so let's also add a ref right away called scroll ref you already learned how you can create a ref we can do that right here by simply saying const scroll ref is going to be equal to react dot use ref and we can pass in null there we go so that is the first div containing the images and then the second one is going to contain the actual buttons to move left and right so let's say class name is equal to and we can do app underscore underscore Gallery Dash images underscore arrows we can already start adding those Arrows by saying BS Arrow left short class name is going to be equal to Gallery underscore underscore Arrow Dash icon and then it's going to have an on click where we can call a callback function called scroll which doesn't exist yet and we're going to pass in the parameter of left we can close this component right here like this and then let's duplicate it into the line below and the second icon is going to scroll to right and it's going to be BS Arrow right short there we go of course we have to implement this scroll function so just at the top we can say const scroll it's going to take in a string which is going to be a Direction then we want to get the current from our ref which is our Gallery so that's going to be current is equal to scroll ref in here we're just destructuring it and let's make sure to spell this correctly and then the only thing we have to do is say if direction is triple equal to left in that case we can current dot scroll left minus equal to 300 pixels and if we are on the else if you're scrolling to the right current dot scroll left plus equal to 300 pixels this is simply going to move the images around now of course we've quoted the buttons we cannot see them yet because they're dark but we are yet to code the actual images so let's Loop over the images from our gallery to do that we can open a new Dynamic code block create an array sign or even better let's do that at the top right here we can say something like const and then images is equal to an array where we're going to have the first image images Dot gallery01 then images.gallery02 images Dot gallery03 and the last image is going to be images dot Gallery zero four great so now we have this const images which is above our function and we can use it right in here images dot map and then for each image we're going to also get the index and what do we want to show for each image well we can show a div and that div is going to have a class name equal to app underscore underscore gallery Dash images underscore card and also Flex underscore underscore Center we also have to pass it a key because we're mapping over something so as a key let's do a template string equal to Gallery underscore image Dash and then in here we're going to dynamically provide index plus 1. that way we'll count through all the images looks like we have a typo at the top and that is that I call this images and we're already importing images so in this case let's call this Gallery images and then just below we can use Gallery images right here now inside of that div we of course want to show an image which is going to be Source image and also alt which is going to be gallery image or just Gallery when we save that you can see that we get four different images of some food and beverages but we also want that Instagram icon so let's simply say BS Instagram and we're going to provide a class name which is going to be equal to Gallery underscore underscore image Dash icon let's save it and right now it's not going to look that good we just have this text on the left side but the images are not styled at all and this doesn't look like a carousel where you can move left and right this is how it should actually look like there we go and let's check it out on the deployed side if we scroll down you can see that we have these nice arrows where we can move around the images great so how are we going to implement this well it's all going to come down to Styles rjsx is here now we can go into Gallery CSS and Implement all the styles to achieve this Gallery look is not going to be easy you can see that we have these icons and also this nice Instagram overlay once we scroll over it so let's start right here we're gonna add the dot app underscore underscore Gallery Dash content in here we want each one of our contents to have a flex one and also display Flex We want to center it by using justify content is equal to Center and let's save it go back to our own site and see how is it looking right now the content is not looking that good but let's also apply a line Dash items of flex stash start and finally Flex there's direction is going to be column let's apply a min Dash width of 500 pixels and also padding Dash right off to Ram okay this is already looking so much better now let's apply some margin to our button by doing that app underscore underscore Gallery Dash content button margin Dash top is one REM there we go that's already a lot better now let's start styling the images dot app underscore underscore Gallery Dash images let's do Flex is equal to one then we're gonna make this a display of flex and then we're gonna use flex Dash direction is going to be set to row and most importantly Max Dash width is going to be 50 percent and also position is going to be relative now we're going to make the most changes by applying the styles to the images container so let's do dot app underscore underscore Gallery Dash images underscore container let's make it a display is equal to flex and as soon as we do that you're gonna notice that the images start appearing in a row then let's do Flex Dash direction is going to be set to row it is row by default but we're going to change it later on for mobile devices so it's important to have it here then we're going to have width is going to be Max Dash content this property sets the width to the maximum of that specific content like the image then we're going to set the Overflow X to be equal to scroll this is going to allow us to scroll through the images but we're going to set the dash Ms Dash overflow Dash style to be equal to none so we do want to scroll but we don't want to see that scroll bar and we can do that by saying scroll bar Dash width is none of course this is supposed to be scroll bar one thing we can do to hide it is copy this right here and then say Colin Colin dash webkit dash scroll bar and then we can set the display to be equal to none we want to hide it because we're going to move with arrows left and right then let's style each individual card dot app underscore underscore Gallery Dash images underscore card here we're going to set the position to be equal to relative just so we can apply that overlay then the Min width is going to be 300 pixels okay you can see they start going above one another let's make it 301 because we have the scroll left to 300 there and then let's do the height of each image to be set to 447 pixels we just copied that from the design and margin Dash right is going to be to ram of course we have to spell this properly now let's style the Instagram icon that's going to be dot Gallery underscore underscore image Dash icon in here we can set the position to be equal to Absolute then we can set the color to be equal to Hash FFF there we go now you can see it right here then we're going to set the font size to be equal to 2 REM opacity to be equal to zero transition to be equal to 0.5 seconds ease and finally cursor Dash pointer so we only want to see this icon if we hover over it and finally we can style our image by doing Dot app underscore underscore Gallery Dash images underscore card IMG we can set the width of one image to 100 also the height to be 100 there we go this is already looking so much better object fit cover is important whenever you're working with images there we go let's do opacity is equal to one and then transition is going to be set to 0.5 seconds and then ease finally let's copy this paste it below and now we want to do the card but now card hover so when we hover over the card then we want to change the opacity to 0.35 like this there we go this is looking great we can copy this one more time paste it below and we can Target the dot gallery and then underscore underscore image Dash icon so now we're targeting this specific icon when we're hovering and then we can increase the opacity to one let's fix this and now if we hover over it you can see the Instagram logo is at one great now let's style the Arrows by doing Dot app underscore underscore Gallery Dash images underscore arrows and that's going to be width of 100 then we're going to set a display is equal to flex we still cannot see those arrows then let's do justify Dash content space between because we want them to show at the start right here and also at the end right there then let's do a line Dash items off center let's do padding is zero on top and bottom and one REM on left and right of course we have to close this here and then let's do position absolute and then finally bottom five percent let's save this and we still cannot see it but let's style those Arrow icons we can do that by saying dot Gallery underscore underscore Arrow Dash icon let's do color is VAR and then let's do color golden let's also increase the font size to 2 REM let's make a cursor to be pointer background can be VAR dash dash color but this time it's going to be black and finally border Dash radius is going to be set to 5 pixels and now you can see those arrows right here left and right finally on Hover we want to change the color of that icon so let's copy this paste it below and say hover then we want to Simply change the color to color white like this so now if you hover over it you can see it highlights white but something seems to be broken here the arrows are not showing on left and right so let's see what seems to be the issue if we go to our gallery and check out our icons we can see app underscore underscore Gallery Dash images underscore arrows I was missing an S here and if that is done you can see our arrows are appearing five percent from the bottom as we said it right here there we go so now we can scroll this is already looking great there are just a few things that we have to fix and that's mostly the responsiveness issues in this case we're going to have four different media queries so we can say add media screen and Min Dash with 2000 pixels so this is for extremely large devices now we can copy this three more times and in the second one we're gonna have the max width of 1150 pixels Max width of 850 pixels and finally for mobile devices that's going to be 650 pixels so for extremely large devices over 2000 pixels let's change the content a bit by saying dot app underscore underscore Gallery Dash content we can provide a Min Dash width of 1000 pixels so the content is going to take 1000 pixels on large devices also padding Dash right is going to be for Ram we can also increase the minimum width of the individual card so let's do dot app underscore underscore Gallery Dash images underscore card and right here we can set the Min Dash width to be equal to 400 pixels and also let's do the height of something like 550 pixels so now if we expand this there we go this is looking great now let's start working on smaller sizes something like this maybe 1150 pixels on this size we can already change the app gallery to be Flex Dash direction of column because the images no longer fit vertically and let's change the images to dot app underscore underscore Gallery Dash images we can set the max width this time to 100 percent there we go and we can also set the margin to be 5 RAM on top and bottom and zero on left and right there we go so now they're spanning in a new row on smaller devices we can just change the gallery again just a bit so what we can do right here is simply reset the paddings to before RAM on top 0 4 RAM on bottom and then four RAM on left as well and finally for our mobile devices we can again take this gallery change the paddings just a bit this time we can do two on the left side and again make sure that you have Max width for 850 pixels as well as Max width for 650 pixels there we go that is really important on mobile devices we can also change the content so that's going to be dot app underscore underscore Gallery Dash content and the thing we're going to change is min width is going to be 100 percent and finally we want to change the card we were changing that right here on 2000 pixels we can change the card to have a small minimum width of let's say only 240 pixels and height only 320 pixels because we're on mobile devices and with that we should be ready with our Gallery let's check the responsiveness if we go to our mobile view iPhone 12 Pro looks like that we are not quite there yet it looks fine but it's breaking just a bit so let's try to see where is the issue I think the content is going outside so we have to reset the width on mobile devices let's do dot app underscore underscore Gallery Dash content and right here we can set the Min width to be equal to 100 percent there we go now it's not going outside and we can actually nicely scroll with their finger through these different images so mobile view is looking great let's check the iPad mini there we go Gallery is looking sharp as well let's check the tablet looking great what about laptop that's great as well and what about a large device like 1600 in here we have everything in one row but that is the same situation as we would have if we expanded our browser there we go our Gallery in full action we have these arrows right here to move across the gallery great with that said we only have two more sections to go great job we have defined us right here which is a great site with this nice drink right here and then we have our subscribe to our newsletter and our footer it's looking great we're coming close to the end so stay focused and you're soon gonna build this amazing project and soon enough you'll be able to create similar projects for your clients or for the company you work for with that said let's collapse this one more time let's go to app.js and let's go to find us this is going to be the next section that we're going to implement to implement find us we can go back to app and then laurels inside of here we can copy these two import lines let's copy them go back to find us and paste them at the top right here we're gonna need the subheading as well as the images from constants in this case find dust is not even going to have a CSS file we're going to code everything in here so let's start this first div is going to have a class name is equal to app underscore underscore VG app underscore underscore wrapper and section underscore underscore padding we're also going to add an ID equal to contact so that people can scroll to this part of the page inside of that div we're going to have one more div and this is going to be the div for our left side of the page where we have all of our content that div is going to have a class name equal to app underscore underscore wrapper underscore info and then on the right side we're going to have the div containing our image so we can say div and we're going to have a class name equal to app underscore underscore wrapper underscore IMG inside of there we can immediately put a self-closing image tag that's going to have the SRC equal to images dot find us and ALT is going to be find us there we go if we save that we should be able to see that image on the bottom there we go so now let's implement the content for the left side of this specific image we're first going to have a sub heading so let's create a self-closing subheading component that's going to have a title equal to contact there we go contact is right here and as we always do just below our subheading we're going to have an H1 that's going to have a class name equal to head text underscore underscore Cormorant and it's going to have an inline style equal to margin bottom is equal to 3 REM in a string and we're simply going to say find us there we go this is looking better already now just below that H1 we're going to create one more div and this div is going to have a class name equal to app underscore underscore wrapper Dash content inside of there we're gonna have quite a few paragraphs so let's start with the first one let's see the design the first paragraph is going to be the actual address right here so let's add a class name which is equal to P underscore underscore open Sans and then we can double click right here and copy it and paste it straight here now we can duplicate this line three more times the second one is not going to be open Sans it's going to be P underscore underscore Quorum rent and inside of there we're going to have some Styles so let's do style where we're going to have a caller is equal to Hash DCC a87 and we're also going to have a margin equal to 2 REM on top and bottom and zero RAM on left and right and there we can simply say opening hours so we can delete this right here we can also delete it from here and here because that's going to be the text only for the first paragraph and in here we're saying opening hours let's see that there we go and now we just need Monday to Friday and Saturday to Sunday so right here we already have the class names let's copy the first line right here and then let's copy the last line right there if we save that there we go we have our hours below this div we're going to create a button tag that's going to have a class name equal to custom underscore underscore button style is equal to margin top is going to be to RAM and let's do visit us there we go now if we save that and go on our deployed site we can see that we have the visit us button right here and if you think about it that's going to be it for our find Us section if we expand it you can see that it's looking great on larger devices as well let's open up inspect element and let's see how does it look like on mobile devices let's go to iPhone 12 Pro and it's looking great there we go the last thing on our list is going to be the footer but it's not just a basic footer if you look at the design the footer is going to have a subscribe to our newsletter and also the real complex footer that's looking great and it's just giving you that nice Final Touch to the website so let's collapse this just a bit and let's go back to our app once we are in the app we can go back to footer inside of the footer we're gonna import two different components the first component is going to be footer overlay and then the second one is going to be news letter and that is coming from dot slash dot slash components we're gonna also need these three icons Facebook Twitter and Instagram so let's simply say Import in curly braces fi Facebook f i Twitter and finally fi Instagram and this is coming from react Dash icons forward slash fi there we go now to code out our footer let's first start with the main class name and that's going to be class name is equal to app underscore underscore footer space section underscore underscore padding now inside of there we're going to render our two components the first component is the footer overlay and just below that we're gonna have our news letter if we save that now and go back you can notice that now we have this section of the page which is white and we have these two components now is the time that we go into each one of these and Implement that layout so let's first control click to go into footer overlay and let's code it out our footer overlay is going to be fairly simple when it comes to jsx we're going to give it a class name equal to app underscore underscore footer overlay and then inside of there we're gonna have two empty divs so let's create a self-closing Dev that's going to have a class name equal to app underscore underscore footer overlay Dash black and then we can duplicate that this time it's going to be footer overlay Dash IMG and then app underscore underscore BG now we can save that go here and you can see that nothing changed yet but now we can go into footer overlay dot CSS to implement the styles for our DOT app underscore underscore footer overlay we're going to do with is going to be 100 the height is also going to be 100 percent let's save it go back okay nothing happened yet but let's increase the Z index or Z index to one and then just below we're going to make it a display is equal to flex we're also going to give it Flex Dash direction is going to be set to column and then finally we're going to make it a position is equal to Absolute all of this is going to make sense really soon now we have to do the dot app underscore underscore footer overlay and then Dash black right here we can set the height to be equal to 25 percent and let's change the color or background to be VAR dash dash Color dash black there we go you can see that now we have this portion of the page and then just below that we can say dot app underscore underscore footer overlay and then Dash IMG right here we can set the height to be equal to 75 there we go so now this is going to be our footer but it looks like we have some issues right now let's go back to the normal desktop view right now this doesn't look good because we haven't hit implemented the styles for the footer so let's go to our footer.jsx more specifically let's go to footer.css instead of here we have to do dot app underscore underscore footer let's simply do width is going to be 100 percent then the position is going to be relative there we go this is already looking just a bit better but still looking broken the Z index is going to be set to 1 then let's make it a display is equal to flex justify Dash content is going to be Flex Dash start align Dash items is going to be Center and flex Dash direction is going to be column finally we're going to set the background to be equal to VAR dash dash Color dash black and let's set the padding Dash top to be equal to zero now we have the entire portion of the screen black I'm not sure if you can see it through the recording but there is actually a gradient here so there is a black line right here but below that we have a gradient a gradient that is barely visible but it's there even on the design it's hard to say that we have a gradient but you can see some of the points here so it's not entirely dark you can see it here as well on the other hand right here where we have the newsletter it's entirely dark I hope this is going to make just a bit more sense as we keep coding our footer but now we have our footer overlay and we are ready to start coding out the newsletter so let's go to footer Ctrl click into newsletter and let's code it out inside of our newsletter we're gonna import subheading from dot slash subheading forward slash subheading inside of here we can simply create a div with a class name equal to app underscore underscore news letter inside of there gonna have one more div and that div is going to have a class name equal to app underscore underscore newsletter Dash heading inside of there we can render the subheading and that subheading is going to have a title that's going to say newsletter let's go back to check it out there we go again as we always do below the subheading we're going to have a heading that's going to have a class name equal to head text underscore underscore Quorum rent and right here we can copy what the design says that's going to be subscribe to our newsletter we can simply paste it here we also have one P tag never missed latest updates so just below this H1 let's create a P tag that's going to have a class name equal to P underscore underscore open Sans and let's paste it here there we go but we cannot seem to see rh1 head text and I have a typo core more rant there we go so now we can see our great heading below this div we can create one more div which is going to be the input tag so let's say class name is going to be equal to app underscore underscore newsletter Dash input and also space flex underscore underscore Center inside of there the only things we're going to have are going to be an input that's going to have a type is equal to email and a placeholder of enter your email address and just below that we're gonna have a button this button is going to have a class name equal to custom underscore underscore button and it's going to say subscribe this doesn't look that good but now we can go into newsletter.css and we can implement the styles let's do that app underscore underscore newsletter let's do padding is two RAM on top and bottom and 4 RAM on left and right that's going to space it out a bit let's give it a border 1px solid VAR dash dash Color dash golden there we go this really made it pop out and then finally let's give it a background that's going to be VAR dash dash Color dash black there we go so now you can see what I meant hopefully there is this slide background outside of this golden rectangle and then this here is entirely dark again it's hard to tell but is the subtle details that matter below that we can do that app underscore underscore newsletter Dash heading and we can do text Dash align is equal to Center then let's start styling our input dot app underscore underscore newsletter Dash input in here we can set the flex Dash direction to be set to row and we can also give it a margin Dash top of three Ram there we go finally we can copy this and simply Target the individual input in there so now we're not targeting the div that the input is inside of but the actual input our input is going to have a width of 620 pixels border is going to be 1 pixel solid VAR dash dash Color dash golden border Dash radius is going to be 5 pixels fan Dash size is going to be one REM fan Dash family is going to be VAR font Dash and then we're going to have base that changed the font color is going to be VAR dash dash Color dash and then white margin Dash right to divide it from the button is going to be 2 RAM and then the most important thing is going to be the padding 0.75 REM on top and bottom and one REM on left and right there we go and let's also change the background and our background is going to be VAR dash dash Color dash black there we go now this is looking great let's also change our button a bit looks like we're missing something here so let's go back to jsx this is going to be custom not bottom but this is going to be button there we go already looks so much better now let's target that button dot app underscore underscore newsletter Dash input button and then width is going to be set to Max Dash content that's going to make it appear a bit wider if there is space available finally let's deal with some media queries because this is not going to look great on all different screen sizes if we expand it it's going to appear too small in the middle and I'm sure it's going to break on mobile devices let's check it out yep it's definitely going outside so now let's fix the responsiveness I'm going to again collapse this and let's add a few media queries add media screen and Max Dash width is 2 000 pixels or in this case that's going to be Min Dash width so this is going to be for large devices now we can duplicate this the second one is going to be Max Dash width and that's going to be up to 990 pixels so that's four bigger tablets then we can duplicate this two more times the one with the max width not the Min width in here we're going to have 650 pixels and the last one is going to have 300 pixels so for extra extra small devices so for the smallest of devices we can just decrease the size of the heading so let's do that app underscore underscore newsletter Dash heading H1 size is 32 pixels if we go below 300 let's try doing that right here responsive let's do 290. yeah it's still going outside and the font size is definitely too big let's also decrease the line height to be 50 pixels there we go now when we implement this as well this is actually going to be fixed so let's start implementing this that app underscore underscore newsletter padding is 2 REM on top and bottom and zero on left and right and border is none let's save it there we go already just a bit better but still not good let's do this one up to 990 pixels next so that's going to be dot app underscore underscore newsletter Dash input Flex Dash direction is going to be column like this and also width is going to be 100 okay this still didn't make it better let's also do one more thing right here dot app underscore underscore newsletter Dash input and then we target the input itself we can say margin is zero on top zero on right two RAM on bottom and zero on left and also width is 100 okay and this is it this with property actually fixed the problem so now you might be wondering we were taking a look at the smallest size possible 290 pixels that's below 300 right so why wasn't the issue fixed when we Implement something here well if you think about it 290 is also smaller than 650 and also smaller than 990 and in here we have Max width so these Styles and these Styles as well as these styles are going to be applied on 290 pixels device that's why now we've made it work for all devices all the way from the smallest to something like an iPhone there we go and also tablets let's check that out let's do iPad Mini and if we collapse this a bit that's looking beautiful now let's just make a fix for the devices above 2000 pixels dot app underscore underscore newsletter Dash input and then we target the input and we're just going to set the font size to 2 REM just to make it a bit bigger on extra large devices so now if we expand this it's looking great the last thing we have to do is the part below our newsletter and that's going to be what usually we call an actual real footer and this is actually if I may say a really great looking footer it's going to be divided into a few parts this specific div that is the entire footer this smaller div with three different columns that contains the content and then the trademark at the bottom so let's code it out we can go back to our code by collapsing this not in the newsletter not in the footer overlay as well and we can also close all of the other files where we have to go is into app and then footer now we've quoted out these two components but now is the time that we code out the footer itself so as I've told you our footer is going to be a div more specifically a div that's going to have a class name equal to app underscore underscore footer Dash links and that is going to be divided into two different divs the first one that's going to have a class name equal to app underscore underscore footer Dash links underscore contact inside of the links we're going to also have a second column which is going to have a class name equal to that's going to be app underscore underscore footer Dash links underscore logo in here we're going to have our social media icons and the last div and here is going to be a div that's going to have a class name equal to app underscore underscore footer Dash links underscore work and in here we're going to have the working hours so that's gonna be these three columns right here that I've showed you at the start this one this one and this one and now we also have to do the trademark so that's going to be below all of these and we can call that a div that's going to have a class name equal to footer underscore underscore copyright and since this one is incredibly simple we can code it out right away it's going to have a P tag that's going to have a class name equal to P underscore underscore open sense and in there we can copy this text paste it here and check it out there we go now is the time that we Implement these three columns let's start from left to right so the first one is going to be the contact us so let's go here let's create an H1 right here that H1 is going to have a class name equal to app underscore underscore footer Dash head text and there we can say contact us if we save that and go back we cannot yet see it because it's dark right here but we're going to implement the Styles soon then below that H1 we're going to have a few paragraphs and each one of these paragraphs is going to have a class name P underscore underscore open Sans the first one is going to say this which is the address so let's copy it we can duplicate it two more times the second one is going to give out a first phone number and next one is going to give out the second phone number there we go so now if we save this you can see that we have our contact right here now let's go for the second div which is going to be this one right here this is looking great so first we're going to have an image and this image is going to have a source images dot Garrett and ALT is going to be footer underscore logo of course we have to import images so just at the top let's go ahead and above our import CSS let's do import images from dot slash dot slash constants and I'm missing an a here there we go so now if we save this and go back you can see this logo right here let's go back to the design below our image we're going to have a P tag that's going to have a class name equal to P underscore underscore open sense and there we can simply copy their quote the best way to find yourself is to lose yourself in the service of others okay and then we're going to have an image of this spoon right here so that's going to be IMG Source images dot spoon then let's do an ALT equal to spoon let's do a class name equal to spoon underscore underscore image or IMG and then let's do style margin top is 15 pixels you can just write it as a number 15. let's go to the design there we go and finally we have to have these three icons so let's create a div below our IMG this div is going to have a class name equal to app underscore underscore footer Dash links underscore icons in here let's do fi Facebook self-closing icon then the second one is going to be fi Twitter and then we're gonna have fi Instagram let's save that go back and the icons are now dark so we cannot see them but they are definitely here and before we implement the Styles let's also implement the third column which is the working hours for our working hours we can essentially copy this div right here or another div rather what's inside of the div that's going to be an H1 and a few paragraphs so let's copy it paste it inside of the work right here indent it properly contact us is not going to be contact us it's going to be working hours the first P tag is going to say Monday Dash Friday Colin we can duplicate that paste it below and then we're going to have Saturday to Sunday like this and then we can copy the working hours 8 AM to 12 a.m right here and then 7 AM to 11 p.m Saturday and Sunday now if we save this and go back you can notice that this is looking great as well but of course we don't see three different columns that's something that we're gonna deal with styles so let's go to our footer footer.css and let's implement the styles that are going to change the layout first we're going to modify the links dot app underscore underscore footer Dash links let's set the width to be equal to one hundred percent then display is going to be Flex as soon as we do that it's already going to take a form similar to the finished one let's do a justify Dash content and space between right now it's not spacing it out because we don't have enough space but if we expanded it you can notice that this one is going to the left side this one is going to the right side and this one is staying in the middle that is space between then let's also align Dash items Flex Dash start let's add a margin Dash top of 5 REM and let's do padding 0 and then two Ram there we go now let's target each one of the columns individually by saying dot app underscore underscore footer Dash links underscore contact comma we can duplicate this two times the second one is going to be logo and the third one is going to be work for each one of these or for all of them we want to set the flex to be equal to one that way each one of them is going to take equal amount of space margin one REM to the divide them a bit and text Dash align is going to be Center there we go now we're gonna play with logo a bit so we can do that app underscore underscore footer Dash links underscore logo we can Target the image and more specifically first Dash child in this case we're dealing with different logos we can see that if we go to a footer and find links logos there we go and this is going to be the real logo the Garrick logo the big one so that's what we're currently styling and we can say with is 210 pixels just to make it a bit smaller and let's give it a margin bottom 0.75 Ram there we go now let's apply some margin below this specific element so we want to divide these two working times we can do that by saying that app underscore underscore footer Dash links underscore work we can Target the paragraph and we want to Target the nth child so nth child and then 2N plus one this is going to make sure that however many working hours we add it's always going to add a space below the end of one specific working time so either below this or below this or below another working time that we add let's do margin Dash bottom is equal to one REM there we go let's add some margin top for our icons so that app underscore underscore footer Dash links underscore icons and then margin Dash top 0.5 Ram we still cannot see our icons but we are going to be able to see them soon so now let's change them so we can see them dot app underscore underscore footer Dash links underscore icons SVG let's do the color VAR Kohler white like this and here they are let's give each one of them a margin of 0.5 REM so we spaced them out there we go let's set the font size to 24 pixels there we go and let's make them a cursor is equal to pointer so they seem like real links looking great now let's add an on Hover so we can simply copy this paste it below and on SVG say Colin hover and we can change the color to bivar dash dash Color dash golden that's going to give it that hover effect great again it's the small details that matter now remember we're still missing these two headings contact us in working hours so let's style them dot app underscore underscore footer Dash head text fond Dash family is VAR and then dash dash font Dash base let's also change the color to VAR dash dash color and then Dash White now we can see them let's change the font Dash weight to 400 to make it a bit Bolder or lighter in this case let's do letter Dash spacing of 0.04 em let's capitalize it so let's do text Dash transform capitalize let's also set the font size to 32 pixels line Dash height to 41.6 pixels again that's just copied from the design and margin Dash bottom is going to be one REM there we go finally let's add some space between the copyright and the actual footer we can do that by saying dot footer underscore underscore copyright and then margin Dash top is three Ram there we go so now we have a great looking footer of course it's not yet going to be all that mobile responsive it does work well on extra large devices as well as tablets but as soon as we collapse it a bit you can see it's gonna start to break so let's expand this and let's code out the mobile responsiveness we're gonna have a few different media queries add media screen and Min Dash width is going to be 2000 pixels for large devices we're gonna duplicate this once change this to Max width and 1150 pixels and now we can duplicate this two more times where we're gonna have 650 pixels and also 350 pixels four small mobile devices let's start from mobile further so I'm gonna trigger the inspect element and set it to iPhone 12 Pro right now it's absolutely broken let's change the logo a bit dot app underscore underscore footer Dash links underscore logo IMG first Dash child this is going to trigger our big Garrick logo and let's make it take a width of 80 percent we cannot see the change yet but we'll be able to see it soon in here let's change the footer and let's change the padding to zero on top zero on bottom zero on right two REM on bottom and zero on left again we cannot see the changes just yet but we'll be able to see them right now as we change this specific media query we need to do that app underscore underscore footer Dash links align Dash items is Center Flex Dash direction is column this is the most important thing and whenever you're making something mobile responsive changing Flex direction from row to column is going to make all the difference there we go as you can notice now they're appearing one below another let's also change the padding to be zero and let's target all of our three sections by copying them first from here pasting them into 1150 pixels media query and what we're gonna do is simply set the margin to 2 REM on top and bottom zero on left and right to space it up a bit and we're gonna add a width of 100 and finally for extra large devices let's do that app underscore underscore footer Dash head text where we're gonna increase the font size to 51 pixels also we're going to increase the line Dash height to be equal to 61 pixels this is on extra large devices now let's check how responsive it is it's looking great on mobile let's try to go for tablet looking great on tablet as well let's try expanding it a bit more to laptops looking great what if we expand it right here and close the inspect element it's looking great on desktop as well that is great we are now fully done with our footer and not only with the footer with the entire website find Us section photo gallery Laurels Awards recognitions video section is here as well or Chef Kevin then we're gonna have the prices of wine beer and Cocktails this great knife about a section and finally the start of our website this is a phenomenal fine dining high-end restaurant website you can potentially sell to your new clients I hope you learned a lot along the way and that you'll make use of this website deployed to the internet and present it to your potential clients of course a JavaScript Mastery video project Is Never Done where we stop coding we are always going to deploy to the Internet so that you can share it with your friends and show it to your potential employers so that's going to be our next step deploying the great website you've just created on hostinger's high-end servers let's do that right away and we are back on our hostingers dashboard I already purchased the domain name right here garrickrestaurant.com if you purchased yours it's going to be right here as well if you haven't you can do that right away through hostinger the link is going to be down in the description also if you haven't yet connected the domain to the actual website you can do that right here by clicking setup on your specific plan either premium or single shared hosting but if you already connected it go to hosting and you'll see it under premium shared hosting Garrick restaurant front in here we can simply click manage now that we're here let's search for file manager there we go let's go ahead and click it that just led us to our hpanel you can go into public HTML and right now we just have a default PHP page which we can delete by clicking on it and then clicking this trash icon at the top right there we go now the folder is empty this is where our build folder will go so let's go back to our application right here let's close all of our files by holding Ctrl and then pressing W let's collapse our file tree and then open up our terminal by going to view and then terminal we can stop it from running by pressing Ctrl C and then y we can also clear it and the only thing you have to do is run npm run build this is going to create an optimized version of our application ready for production this process usually takes about a minute so let's leave it be and I'll be right back and there we go the app has been built we can collapse our terminal open up our file tree and you'll see a new build folder right click it and then click reveal in file explorer a new window is going to appear you can go into the build folder select all of the items there and then simply drag and drop only the contents of the build folder onto RH panel this process is going to take just a moment and your files are going to be right here right away and there we go the files loaded here is our index.html now let's go back to our Hosting account let's remove this search right here let's expand our window just a bit and right here you have your domain let's click it and you can watch it load instantly but there's one really important thing left to do and that is enabling SSL certificate because our site is currently not secure so let's immediately fix that by going back to our Hosting account and searching for SSL there we go let's click it and hostinger just makes it so easy the only thing you have to do is Click install SSL SSL is being installed as we speak and this process usually takes just about a minute I was wrong it actually just took a few seconds I reloaded the page and there it was status active so now if we go back to our deploy domain reload the page you'll notice this lock on the top left which means that the connection is secure having a custom domain name SSL certificate and fast load times definitely makes you stand out from the crowd that way your page is secure and reliable and in our case it's looking great as well you've already seen all of these sections but we can just watch them one more time as this website is scrolling just admire the work you've done as you can see everything is mobile responsive we have the video here we have our Awards and recognition and it's all looking like a complete fine dining restaurant site 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 deployed 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 filmpire and NFD Marketplace you can get entirely free guides and eBooks about react web 3 and front-end back-end 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 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 vid 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 veetjs.dev get started and the only thing we need to do to initialize our react application is run npm create Veet 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 bang 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 gonna 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 Ctrl 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 dot CJs file 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 instead 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.cgs 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 tail wind 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.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 just 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 Dev is going to have a class name equal to BG Dash 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 dot 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 backtick 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 we can control click it and you can see the padding X essentially it's going to say padding X is six 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 dot 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 curler braces and then Styles dot box width again if you're interested in what this Clause does simply click it and you can see that it gives it a full width now inside of there we want to render a nav bar 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 nav bar 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 Dash 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 width 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 refce 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 rafce 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 going to be using the next component on our list is the card deal.jsx component and again you can run rafce the next one on our list is going to be the clients 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.jsx and again we can run refce 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 Dot jsx and run refce after that we have our hero section our main section and we can again run rafce then we're going to have our nav bar 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 now bar from now bar 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 curler 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 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 film part 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 of 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 going to do some Visual Studio code shortcut magic okay you have everything selected now press your control 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 of these text elements into components if for whatever reason this then 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 part 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 are 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 nav bar there we go so now we can open up our browser side by side with our editor so that we can see the change 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 navbar 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 nav bar first what we can also notice is there's quite a lot of different assets so if you click right here we can select that you can see that is the robot hand we also have this asset right here 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 designer and decoder 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 the 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 an app bar we can first import the use State Hook from react and we can also import the 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 control 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-4 Flex padding y-6 justify Dash between items Dash 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 nav bar and if you're wondering what do those styles do such as W-4 Flex py6 justify between and so on these are all Tailwind utility classes and Tailwind is used to create elements such as this car 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-4 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 fool with 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 jsmastery.pro courses you need to be able to read docs on your own that is the only way on how you're gonna become a profession and independent developer I can only teach you so much I can show you how to build beautiful websites like these but at the 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 gonna make it Flex usually it's going to be hidden because this is only our mobile nav bar below later on we're going to create our desktop nav bar now let's also add the justify Dash and items Dash 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 nav links.map we're going to get one nav link and then 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.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 href equal to the dynamic string off that's going to be hash or pound nav.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 clients 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 navlinx dot length minus one this means that it is the last element then we want to give it a margin write zero 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 navbar 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 Dev is going to have a class name on small devices hidden usually Flex flex-1 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 prev 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 six BG Dash black Dash gradient position absolute top-20 right dash zero margin x-4 margin Y dash 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 animated 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 properly 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-4 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 filmpark 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 we've expanded even more to a laptop that's gonna be three and as larger 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 last 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 data 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 colon let's also give it a styles that 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 last name of flex-1 styles dot Flex start Flex Dash call on extra large devices padding x0 on small devices padding x 16 and usually padding 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 py and then that's going to be inside of square brackets 6 pixels batting X for BG Dash 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 this count we can also give it an ALT tag equal to this count 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 Dash white inside of there we can say 20 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 pants 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 Dash Center and W-4 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-1 font Dash Poppins font semi-bolt 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 gotta say recently I've been using font Poppins and it is just great and we can also give it the SS Colin 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 going to 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 right 4 and usually margin right zero now inside of there we can render dot 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 data 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 last 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 Dash 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 two 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 percent and also H dash 100 percent 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 two 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 Dash 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 started 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 two 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 this cool robot biotic arm with the card payments so let's do that right away we're going to go down to 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 Poppins 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 b 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.paragraph of course we have to put it inside of the dollar sign and curler braces and then Max Dash W Dash and then 470 pixels and also margin top Dash 5. 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-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 uh if we expand this window right here it's going to show on the right side but still we are 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 tiles which are listed right there in this case I already provided them for you in the Styles so if we search for the pin 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 1 we're going to give it an 80 percent of width and we're going to also give it an 80 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 0 but rather bottom is going to be 40 and then finally instead of pink 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 0 W Dash 50. h-50 and then write 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 dash one let's add it a flex so they appear in a row let's add the styles.flex center and also we can give it on medium devices margin y zero 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 I 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 these stats the stats are that line that covers all of the important stats to start creating our stats we can first import these stats array coming from dot slash constants and we can also import these styles coming from dot dot slash style now if you're wondering what these 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 the 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.flex Center we can also give it a flex Dash row Flex Dash wrap on small devices March and bottom 20 usually margin bottom six there we go so now you're not gonna 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.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 Dash Poppins font Dash semi-bold on extra small devices text Dash 40 pixels usually text dash 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 we 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 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 one 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 mdflex row Flex columns tile spotting 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 class name is equal to Styles dot heading two 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 sum 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 class name is equal to it's going to be dynamic Styles dot 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 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 five 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 Landing clients and Landing job opportunities our next cohort of the JSM masterclass experience is starting really soon so if you go to jsmastery.pro click on the masterclass 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 speed 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 mt10 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 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 fun Dash Poppins let's give it a font Dash medium let's also give it a text Dash 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 run the right 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 H dash also 50 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 six 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 martian bottom so what we can do is say index is not equal to Features dot length minus one so if it is not the last one then give it a margin bottom of 6. usually give it a margin bottom of 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 provide it one last class name which is going to be feature Dash card now if we 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 a dynamic that's going to be w-64 pixels like this it's also going to have an h-64 pixels if we save this okay now we can see those icons also rounded-4 let's also give it a Styles dot 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 and 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 coal 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 P 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 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 the 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-3 minus left and then dash one half like this also top zero to appear on the top W dash 50 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 0 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 should appear on the right side it's going to be fairly easy we've already created headings like these and content element 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 ass 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 class name is equal to Styles dot heading 2. 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 dot 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're 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 be 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 um that's going to be a default import as well as the layout coming from 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 dot 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 PTAC 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.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 car 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-100 percent as well as age 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 want to 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 these Styles coming from 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 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 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 that padding why 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 6 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.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 dot 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 right 10 on small devices margin right 5 usually margin right zero 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 gonna 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 s 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 Dash 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-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 Dev 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 0 so it appears behind the content W Dash 60 for width h-60 for height minus right dash 50 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 compared 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 constants and we can also import these Styles coming from 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.flex Center and also margin y four 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 Dash 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.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 BG Dash black Dash gradient-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 dash one also flex and flex Dash coal now we can style this H2 by giving it a class name equal to Styles dot heading to 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 dot 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.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 Dev 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-1 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 dot paragraph and margin top four 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 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 zero usually my4 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.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 Bim 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.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 Dash White and there we go this is looking beautiful you can see for our secondary cooler 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 dot length 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 4 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 four 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 social media dot map we're going to get one social and then we're gonna 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 dot 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 Dash 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 minus 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 zero 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 one pixel border Dash T Dash and then we want to apply a color so let's do something like 3 F 3 e45 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 Finish side 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 T and then Dash let's check it properly 3F 3e45 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 how we record your folder and you can run npm run build this is going to create an optimized production build and in just a couple of seconds you can see that all of her 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 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 website 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 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 hostinger servers that's going to be jsmastery.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 one 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 usually the process of creating a premium custom portfolio would take you weeks if not months to complete thankfully I'm going to teach you how you can do it in just one video let me show you the project that you'll build it is a premium beautiful designed extremely optimized portfolio that you can use to Showcase your projects and land that perfect developer job we're going to create a website from the ground up and on the way I'll also teach you how you can get your own domain and deploy to the internet this is a project for developers of all skill levels we're going to use react nextgs style components and I'll teach you all the best practices that come into play when building a premium website using the newest Technologies if you've never used nexjs don't worry the only prerequisite is the knowledge of JavaScript and a bit of react nowadays your portfolio is your resume people would rather see everything that you can do on this nicely display portfolio rather than read through a plain text in a resume it's also your business card you aren't going to print little papers and hand them out to people you'll just send them this link so why wouldn't this first impression be yours you can take it and present yourself the way you want to so with that out of the way let's get started if you ever gets stuck during the video make sure to check out the GitHub repository in the description in here you can find the finished code for the entire project while you're here make sure to leave a star not only that you can find the finished code here this repository will be our starting point as well I've created the starter files for our project so that we don't have to waste time on the setup and focus on things that matter you can download the starter code by switching the branch from Main to starter then click the code button and finally click download zip this is going to download the zipped project code I've put my zip folder right here on the desktop alongside my open Mt Visual Studio code window if you prefer another code editor that's completely fine but in this case we'll be using visual studio code to unzip this simply double-click it or extract it and then simply pull the extracted folder right next to our zipped one finally drag and drop the extracted folder into our Visual Studio code this is going to open our project and the only thing we have to do to get started is go to view terminal and then right inside of here run npm I this is going to install all the necessary dependencies there aren't many though if you visit the package.json you should see that the only dependencies that we have are style components so styled normalize and react icons it might be a bit weird but we are using style components I haven't done that in any of my other videos usually I style my react or nexjs applications a bit differently but in react there are so many ways to style your components and not a single one of those ways is the best that's why it's always good to know all the ways if you get a job you might need to know how to do style components for that specific project so that's why it's always good to be exposed to a lot of different ways of doing something with that said our dependencies are installed and we can simply run npm run Dev this is going to start our next JS application and we should be able to see the starter code on localhost 3000 if you did that you should be able to see a dark screen with all of the most important sections that our portfolio is going to have if you can see this that means that your starter is working and that we are ready to start creating the portfolio to Showcase all of your skills we can go back to the code close everything and get things going this project is using next.js but if you've never used nexjs before don't worry next is simply react and react is just JavaScript so the only knowledge you have to have is the basics of JavaScript and the basics of react everything else will be taught in this video and after all next.js is just a framework an addition to react so it's nothing more than simple and plain jsx code also as I've mentioned before we'll be using style components to keep things as brief and as informational as possible you won't be needing to write the Styles yourself I've created the starter code in the components and each component already has its own styles that way you'll be able to Simply write the jsx and the logic of our project and then if you want to change something make it custom make it your own then you can enter the Styles and change some of the things you'd like with that said let's close everything and let's start creating our project let's start from top to bottom the first component on our list is a header component as you can see we are already importing a few things in here first thing being the link coming from next link link is going to allow us to link to different pages or different sections in our own page then we have some icons coming from react icons package and finally we have some styled components so style components are simply components coming from our header Styles and you can see them right there for example the container is simply a div with these following Styles nothing more nothing less then we have for example the div one which is another grid area we also have a few more things for example navelink nav link is nothing more than an anchor tag with the following Styles these are the components we'll be using so if we go back we now know that we have some specific or the style components that we can simply use in our jsx let me show you what I mean instead of this div we detects Heather inside of there let's create a container component our container is going to have a div one inside of it and that div one is going to have a link component our link is going to have the href pointing to nowhere so just slash and then inside of this link we're going to put an anchor tag so let's create it it is going to have some inline Styles just to keep things easy and it's going to have a display equal to flex as well as the Align items equal to Center and it's also going to have a color equal to White great so these are some of the inline Styles we can write but as you can see it's just so much better to create a style component now you can see the difference finally we're gonna have one icon inside of this div and that is going to be Di and CSS deck and that is going to be a self-closing tag with the size property equal to 3 RAM finally next to our icon we're also going to have a span and that span is simply going to say portfolio let's save it and take a look in the browser as you can see we already have a nice icon and we have a portfolio text right there let's keep creating our navigation bar below the div one I'm going to create another style component which is going to be dev2 and then inside of there we're going to have the Li first li is going to have a link and that link is going to have the href equal to and we're going to go to Hash symbol and then project this is going to make it nicely scroll to the project section in our own page finally inside of there we're gonna have a nav link component and that nav link is simply going to say project great now we can replicate this Li two more times the second thing is going to go to Tech and then in there we can say Technologies and then the last thing is simply going to say about and we're going to point to the about section let's save it and see how it looks in the browser there we go we have our portfolio and we have three different nav links that already look good they are styled they appear nicely in row here with a specific font and when we add the sections they're going to immediately scroll to those sections see how easy it is creating something using style components of course if you want to play with the Styles change something change fonts you can do so really easily you can create new style components right here in this file or you can change the existing style components by changing the Styles you can also change some of the things that I've made to be modular inside of the themes default.js you can change all the fonts and colors this is dynamic so that whenever you change something in here of course if you include the link to the Google fonts it's going to be reflected across the entire site so they can make it completely modular continuing with our header we're going to have a third div below our div2 and that Dev is going to contain social icons so we can create social icons and that is going to be not a self-closing tag but it is going to have an ahref which is going to point to something like let's say GitHub so in here I'm going to say https colon forward slash forward slash github.com and then inside of there we're gonna put a GitHub icon so we can say AI fill GitHub this is going to be an icon and we can give it the size equal to 3 REM we're going to replicate this two more times the second link is going to point to something like length n so we can say length in.com and then in here we're going to have ai fill and we can say length in finally the third thing is going to point to our Instagram so I'm simply going to change this to instagram.com of course you can put your own links right there and the last thing here is to rename this to Instagram now let's save it and let's take a look at our header in the browser there we go it already looks so good we have this hover animation also the hover animation when you hover over the social icons this portfolio text seems a bit small how can we modify that this part is going to teach you how we can modify every single part in this application first we're gonna see where that is being mentioned and that is here we can see that our span is just that a span it doesn't have any specific styling so let's make this span into a style component I'm going to go to the header Styles and open it side by side right below our container here I'm going to create one more style component and we're going to follow the same structure that's going to be export const and let's name it something like span that is going to be equal to styled dot span and then you open a backtick go to the second row and close a back tick inside of here you can write all the styles for our Span in this case I simply want to do font size is equal to and of course you can use some of the already defined values but in this case let's simply use two Ram finally we have to import that component right in here that is going to be span and now we can use that style component right here with a capital S span instead of the lowercased s let's save it and take a look in the browser it already looks so much better but now I can see that our portfolio is not aligned with projects Technologies and about so let's just push this entire link about 20 pixels above we can do that by simply adding some Styles in here again to show you the difference how if you keep adding some Styles right there to inline Styles it's just going to get really messy margin bottom and that is going to be 20 pixels now that everything is properly aligned we can start with the hero section which is one of the best sections of this project because it has a nice header and an amazing SVG animation on the right side let's close our header and let's start with our hero section as you can see in the hero section we are already importing some of the style components from the global components we have a section section text and a section title and we also have some things from the again Global components and we have the left section coming from hero Styles component which is a style component so you might be wondering the only thing we have in here is the left section where the sections section text and section titles coming from well these are style components as well but these are not hero-specific style components these are some of the style components we want to use across our entire application we always need sections section texts section titles and buttons that's why we've created the specific Styles folder with global components inside of here we have all of the style components that we're often going to use across all the files with that said let's start creating the jsx of our hero section we can remove this div and let's create a section our section is going to accept two different props it's going to be row and also no padding then inside of there we're going to have a specific component called Left section inside of that left section we're going to have a section title that section title is going to have the props of Main and also Center finally we're gonna say welcome to then we can put a Break Tag right there and we can say my personal portfolio of course feel free to change this text to something like hello there I am or I'm doing development services or anything like that make this completely your own and make it stand out now below our section title we're also going to have the section text in our section text you can simply put some text about what you're doing in my case I'm simply going to say the purpose of JavaScript Mastery is to help aspiring and establish developers to take their development skills to the next level and build awesome apps that's the whole point in your case in here write your value proposition what would you be offering to your employers or what projects can you help them build finally below our section text let's create a button this is going to be call to action style component button and in there we can simply say learn more you could point this button to any specific section of this page or you can point it directly to your email in this case let's add an unclick listener and let's create a callback function and set the window dot location to be equal to well let's do https google.com doesn't really matter you can change this to anything you want we won't be needing these props so we can delete them now that our hero section is done let's check it out in the browser this looks extremely good already we have a nice section title section text and we have a learn more button when you click on it it's going to point to Google or your email or anything you like it's a call to action button if somebody wants to hire you or check out more of your work they can click this button now before heading to the project section the only thing you have to do is go to the pages and then index.js and then in here we need to uncomment this section Gray grid as well as the BG animation this is going to give us that nice SVG background animation with that said let's head to one of the most important parts of any portfolio and that is the project section let's open up our projects folder and go to projects.js this is the place where we're going to implement the jsx code for the entire project section as you can see we are importing some of the style components and these are coming from Project Styles so these are the specific projects style components and we also have some of the global style components section section divider and section title finally we have something known as constants being imported as projects in a minute before we start using this variable I'm going to teach you how you can start using constants as well and how that's going to separate the logic from the content that's going to make your applications so much more readable and it's going to decrease the number of lines that your react components have for the better with that said let's start creating the section this is going to be yet another section and it's going to have a prop of no padding it's also going to have an ID equal to projects just so that we can scroll to that point and inside of there we're going to have a section divider section divider is a self-closing tag below that we of course need a section title it is going to have a main property and it's going to Simply say projects below that we're going to have a grid container inside of our grid component we want to map over our project and this is really important you could do something like this create an array that has 0 1 2 and let's say that you want to map over those values you could do that right here we can say dot map and then map over each specific project and finally return something let's say that we want to return simply that text that's inside of there so let's return a div and then inside of that div we want to return the actual project let's save it and take a look in the browser there we go as you can see we have projects I'm going to make this a bit bigger and you can see that we have 0 1 2 in a nicely styled grid as we are using grid container and style components we already have a nice layout so I can even create a few more and they're going to be stacked nicely as you can see zero one two three four five looks good and feels good what I wanted to teach you here is let's say that you had projects with a bit more data so each one of these projects in an array is going to be an object and that object is going to have for example a title project one it also has to have a description description is going to be something long so we can say this is a really really long description about this project great so that is the data for just one specific project let's say that you want to have more you'd have to do it like this great so now we have project two project three and project four now if you wanted to go over this you would say project dot title and below that we can say project dot description we could have added a Break Tag in the middle just so it's easier to look at it and there we go project one this is a really really long description and we have a grid stacked with all of the projects but if I go here can you notice something that's not good about this code we are not separating the content from the logic everything is kinda in here in one place to make that just a bit better we can of course extract these projects and then we can put them right here at the top let's say something like const project demo and that's going to be equal to this array we just copied now we can simply say projectsdemo.map as you can see this gives us the same results and it looks just a bit cleaner but still we have all of these lines in our react component file so let's extract them somewhere else in this case I've created a special constant for projects so that's just a variable an array of projects appearing porting from the specific folder in our project let's find it it's under constants and constants right there there we have an exported array of all the project with everything the title descriptions images tags sources visit and ID that's what I meant when I said let's create constants and let's separate the logic from the content with that said what we can simply do is in here map over the project and then display all the important information that a project has for now let's simply start with project.title in this case I'm going to remove this and let's see if we can see the titles of all of our projects there we go we have learned memories e-commerce webrtc app and unichat by the way these are only some of the best projects that you can find on JavaScript Mastery channel on this YouTube channel we focus not on teaching through Theory but on teaching through building projects so if that's something that interests you definitely make sure to subscribe leave a like and a comment with that said let's continue let's create a real representation of what our project is going to look like instead of a div we're going to return a Blog cart that blog cart is going to have a key which is going to be equal to project.id then we're going to have an image an image is going to be self-closing tag that's going to have the SRC equal to project dot image below the image we're going to have a title content component and then inside of there we can have a header three that header 3 is going to have a prop of title and then in there we can simply say project dot title one more great tip is whenever you notice that you're repeating something really often like project.id project that image project that title and so on you can simply destructure everything coming from this project by putting it in curly braces so let's do that we want to destructure the ID the image the title and let's immediately destructure all of the other things we're going to use description tags source and visit description tags source and visit great now we have everything you need and we can remove this instance of a project because we immediately have all the variables ready for us to use below our header 3 we're going to have an HR component this is a capital HR it's a special style component and below our title content we're gonna have a card info this card info is going to Simply say description let's see how it looks like in the browser and would you look at that we have this nice projects heading and we have all of our images of our project including the title this nice HR and the description for each specific project of course these are not the projects you've made well they could be if you watch some of the videos but this is the place where you want to put your own projects titles and descriptions considering that we are using constants it's incredibly easy to do so just go into the concepts file change the title change the description change the image tags Source visit and everything else your changes are immediately going to be reflected in our code because we are simply mapping over those constants one more tip is where to put the images we're going to put images in the public folder so that's going to be slash images and then in here you can put the images to all of your projects just like so with that said now you know how you can change the content of your project so let's keep adding more things to it below are card info still in the blog card we're gonna have a div that div is going to have a title content and then inside of there we can simply say stack we're going to explain what stack was this project built with then we're going to have a tag list and then inside of that tag list we can map over the components that's going to be tags.map and then in here we get each specific tag we're gonna also take the index from our map and let's return something make sure that in here we have parentheses not curly braces same things goes for here because that's an instant return with that said let's map over our tags by simply specifying a tag and then in there we can render something like a tag of course each thing in a mapped array needs to have a key it's not usually the best practice but it's simple enough for this case we can simply use the index let's save it and take a look as you can see our main memories project was built with Express react and node eCommerce was built to react in JavaScript webrtc was built with react and webrtc unichat was built with react chat engine and Firebase all of these things are coming dynamically from our project you can see we're mentioning them right there and we're using the logic in our jsx to render them properly for each specific projects we map over of course the final thing just below this div is going to be a utility list inside of there we can render some of the external links so let's create it external link and that external link is going to say code and that external link is going to have the href equal to something like visit this is the link to visit the code for this specific project we can duplicate this line and change the code to say something like Source this is the link that's going to lead us to a live version of our website of course we can also change the ahref I see that I've made a small typo this here is not external link it's rather external links with an S at the end let's save it and if we scroll down each one of our projects now has two buttons one that leads us to the code and ones that leads us to a real source of the website great this is it for our project section the next section is going to be about the technologies that you can use as a developer you know the drill to start creating our technology section we can open up the Technologies folder and the Technologies file this is the place where we're going to use all of these imported components and icons to the create our technology section so let's get started as with everything our section is going to be just that a section it is going to have an ID equal to Tech just so we can scroll to it and we're going to have the section divider which is going to be a self-closing tag just like so then we're going to have a section title which is simply going to say Technologies then below the section title we can put our section text and then in here you can say something like I've worked with a range of Technologies in the web development World from backend to design of course you can modify this to suit your specific text stack let's save it and see how does it look like let's scroll a bit down and you can see we have this nice header that simply says Technologies I worked with a range of Technologies in the web development world now let's list those Technologies in a nicely designed way now that I think about it it would be great if we put our code editor on the side that way you can always look at the changes live I've put my Editor to the side but let me show you how responsive our website is it is fully responsive and it makes it so that everything looks good on all device sizes see how if I keep doing this it's going to turn into a mobile view just like that let's take a look there we go we have everything we need at the top and if we keep scrolling down everything is nicely stacked in one column now let's continue implementing our Technologies section but I'm going to split it half half so that you can see the code and that you can still see what we're building below our section text still inside of the section we're going to create a list component inside of our list we're going to have a list item and that list item is going to have an icon that's going to say di Firebase and that is going to be a self closing tag with a size equal to 3 REM grade as you can see we have this icon right there below that we're going to have a list container just like so that list container is going to contain the list title that's simply going to say something like front end and also just below the list title we're going to have a list paragraph So list paragraph and in there we can say something like experience width we can put a br tag and then we can say react.js as you can see if we save it that already looks really good we have the front end the experience with react.js now we can copy this a few times by this I mean the entire list item let's do it two more times and let's change the content the second thing here is going to be the back end and we can say experience with and let's change this react to node JS and databases if we save that you can see we have the back end let's just say node to keep it in one line and finally the third thing is going to be experience with in this case let's say our developer is also a UI and the ux designer and we can say experience with let's do something like tools like figma let's save it and take a look now we have this part the last thing we have to do is change the icons the first one can be di react then we can leave the Firebase as a database for the second one and the last one is going to be di Zend like zendesk like any other tool that you can put in here but if you want to put your custom icons definitely visit react icons and then in here you can find any icons you like with that said we have our icons and we have our Technologies section completely done let's expand it a bit and see how it looks like on desktop looks extremely clean we have our Technologies front-end backend and UI and ux that's great there we go I unzoomed a bit and our Technologies section is done we have a title we have some text and we are listing all of the technologies that we know how to use it looks like to me that we need to add a br tag below this section divider just to kind of separate it a bit that looks much better and let's try to see it in full screen yep starting from the top we have our personal portfolio we have our project and now we can also scroll to our technologies that show what we can do as Developers that means that our Technologies section is done and we can keep moving forwards now the next section is going to be the timeline to create a timeline let's collapse all of our files go to Source components and then timeline right in here our timeline is going to be just a bit different as you can see we are importing some things right here let me just make this a bit bigger and we also have some variables like total Carousel count but I have a lot of commented out code right there that's because we have some special logic when it comes to scrolling through the carousel checking the active item and then handling the click as well as the scroll and then we also have to handle the screen resize I'm gonna explain every single part of this code but before we begin with that let's of course create the actual timeline to do that we can create a section that section is going to have the ID equal to about and then in there we can of course have a section title that section title can say something like about me or we can change it to timeline whatever you'd like and in here we can have our section text below our section title we can have our section text and then in there you can put anything in this case I'm simply going to copy the JavaScript Mastery tagline which is the purpose of JavaScript Mastery but in your case you can put how did you start learning something what are some of your big milestones and Etc below our section text we're going to have our Carousel so let's create a carousel container and inside of there we're gonna Loop over the timeline data but before we do that we have to provide a ref element to this Carousel ref is going to be simply Carousel ref of course this Carousel ref we don't already have so let's scroll to the top and let's simply uncomment this that's going to give us access to the Carousel ref now let's keep moving forward inside of our Carousel container we want to create an empty react fragment like this and we want to Loop over the timeline data so I can do it like this time line data dot map in here we get each specific item and we also get the index now of course we want to instantly return this by putting parentheses and let's check what our timeline data is if you scroll to the top you can see that we are importing that from constants as well we already know what that is so let's click it and as you can see this constant is just below the projects we've already encountered but this is simply another array with a few objects and they have the year and the text of what happened that year for example 2017 started my journey 18 worked as a freelance developer 19 found a JavaScript Mastery share the project and started my own platform these are the goals or some of your timelines and Milestones now that we know what we're looping over let's actually show that data in here we're going to have a carousel mobile scroll node this is going to be a special Carousel item that's going to look really nice on mobile devices and on desktop devices in there we're gonna pass a key the key is going to be equal to the index and the final is going to be equal to index is equal to Total Carousel count minus one that means that we always want to have a final Carousel item and that is going to be equal to Total Carousel count minus one again that total Carousel count is just a variable that is right there it calculates all of our items and gives us the length that's it inside of there we want to have a carousel item that Carousel item is going to have a lot of props so I'm gonna put this component like this first it's going to have the index index is simply going to be equal to index it can also have an ID and that ID can be equal to a string of Carousel underscore underscore item Dash and then in here we're going to use the index we need to know on which Carousel item are we currently on it's also going to have an active property and that active is going to be equal to the state of active item again this is undefined so we have to scroll up and we have to uncomment our state at the start our active item is zero but we'll need to move forward and increase the active item number with that said let's scroll down do we need anything else well we're gonna need an on click property and on click we're going to have a callback function with the event and we want to call a handle click function handle click is going to accept the event and it's also going to pass the index of a specific Carousel item once again our handle click is not defined so let's find where it is right here and let's uncomment it as you can see our handle click accepts the event and the index first of all it prevents the default because we don't want to refresh the page once we click on something then it checks out if there is a carousel ref that means does it exist once we click it we simply want to scroll it to the left this here is just some value that I found works best for scrolling left depending on the specific width of that specific element with that said let's scroll down and if we save that we should maybe already see something well not yet because we haven't provided the content for the carousel each one of our Carousel items is going to have a carousel item title so right inside of here carousel item title great inside of there let's put a year that year is going to be equal to and that is in this case item dot year because you can see each one of our timeline data items is just an item that has the year that you can see right here so if you save that you should be able to see all the years we have listed right inside of here next thing that we have in our title is going to be an image that's rather going to be an SVG I of course it's almost impossible to write svgs by hand so I'm simply going to paste it here and you're going to get the code as well so just scroll down in the description where you can see all the files there you should also see the SVG for the timeline that SVG is simply a line that points from one year to another but later on it's going to look so much better just below the carousel container let's add some Carousel buttons so just below here I'm gonna say Carousel buttons and in there we're gonna Loop over all the buttons we can do that by again opening a dynamic block say timelinedata dot map we again want to Loop over the items and we need the index and then we want to display a button for each timeline data that is going to be a carousel button self-closing component and then in there we can pass some of the values first one is going to be the key which will be equal to index then the second value is going to be equal the index itself then we need to know which item is currently active by providing that active item after the active item we also want to have the on click and this on click is going to be the same as the on click we've had previously it has the event and we pass that event alongside the index finally the type is going to be equal to button now I've just noticed that this is not going to be a self-closing tag so you can open it and then inside of there we're going to have just one more component which is going to be Carousel button Dot and that will be a self-closing component that's going to have the active equal to active item we're almost done with this Carousel we've added all of these buttons but we cannot see them that's because you can only see some parts of it on mobile devices but before we check how responsive it is let's scroll a bit up let's find our Carousel item title and just below that we're going to have our Carousel item text inside of there we want to render what did we do that specific year and that's going to be equal to item dot text if you save it you're gonna see that this is starting to look so much better now we have 2017 started my journey 18 worked as a freelance developer and so on this already looks so much better but now let's check how responsive it is I'm going to open the developer tools go to the mobile view and now take a look at this the screen is not wide enough you can see only half of the number nine but if we keep scrolling you can see that now you can scroll nicely through all of these values and it seems incredibly natural for mobile devices we also have these dots which are not working currently because when you click on them they simply point you to the top of the page but let's implement the last two parts and that is the handle scroll and the use effect so one more thing we have to do is go to our Carousel container next to our ref and then in there we're going to have the on scroll property which is going to be equal to handle scroll of course we have to go above and we have to uncomment this handle scroll this is doing a similar thing to our on click it's simply getting the index based on the specific scroll and then it's setting the active item based on how far we've scrolled finally here is our use effect and we're going to use that to Simply snap back to the beginning of scroll when window is resized it's going to make us avoid a bug where content is covered up if coming from smaller screen now let's save it and check it out as you can see we can scroll and the dots actually move that's great and let's check it out in the full screen on desktop devices there is no scroll all the items are visible right away but if we try opening something like a laptop same thing everything is visible right away let's try to go for a tablet same thing everything is visible right away we don't even see the SVG because they're so close together but if we go to something like a large mobile device you can see now we can actually scroll and that's what this Carousel is about let's scroll again looks good on smaller devices and let's try with the smallest of devices to see if that's going to work only two specific timeline items visible but we can still scroll and it feels and looks great the last thing we have to do is add a section divider right here at the bottom below our Carousel buttons and more importantly we need to scroll up and we need to uncomment our scroll function our website is going to have issues on mobile devices if you don't uncomment this this timeline component was a bit tougher so I'm going to leave the entire timeline file for you in the description in case you've made a mistake somewhere or if you didn't copy everything properly that way you can simply fix it and be on your way to build the accomplishments section let's do that right away are accomplishments section is going to be much easier than our timeline you can head to components accomplishments and then in here you can see that we also have some of the Imports but we also have some constant data of course you can do what you learned in this video and that is to take this data and then move it to the constants I'm gonna leave that part to you but if you want you can keep it here as well because it's not that long it's only six lines with that said let's start creating our layout we're gonna have a section and that section is going to have a section title inside of the section title we can say something like personal achievements or accomplishments and then below that section title we're going to have boxes that is another style component it's going to be boxes not boxed and inside of there we want to map over this data so we can say data.map for each data item we're going to get a card and an index and we want to return a box so let's create that box the box is going to have a key which is going to be equal to index and inside of there we're going to have two different things first one is box num box number and in there we can simply specify a card number like this card DOT number and we can put a plus next to it and then below that we're also going to have a box text and in there we can simply showcase the card dot text let's save it and would you look at that personal accomplishments we have four different parts and all of the data is coming from here we have 20 plus open source projects 1900 GitHub followers and 5 000 GitHub stars of course you can change this data to suit your needs like how many projects have you built and so on with that said with the personal accomplishments section is done I I guess you now believe me when I said that the accomplishments section is so much easier to do than the actual timeline great with that said the only thing we have left is the footer so let's just close the accomplishments go to our footer component right here and let's implement it again we're importing some of the components and the footer is not going to be that hard it's actually going to be similar to our header because we need to have some links and we have to have some social icons so let's start creating it in here we're going to have a footer wrapper component then inside of there we're gonna have a link list this just reminded me of a linked list but don't worry it's not a data structure it's just a style component but if you'd like me to create some data structures and algorithms videos in JavaScript I'll definitely do that please let me know in the comments or on the other hand let me know in the comments whatever you'd like me to post next any kind of video title great with that said let's keep going link column is going to be inside of our linked list and we're going to have a link title in here we can simply say call and then below that we're gonna have a link item our link item is going to have the href and in there we can say tell is equal to let's do 111-111-1111 this is going to be your telephone number if you want to leave it there and again I'm going to copy it and paste it inside of the link item let's save it and you can see now people can call you we have a nice hover animation and if they click here they'll be able to make a call now we're going to copy this link column one more time and in the second time we're going to say email and in here we're going to have href is equal to not the number but rather male 2 colon and then you can enter your email great I entered my email and I'm going to put it here as well if you saved it you should be able to see that now we have the call and we also have the email final thing that we need to implement are going to be the social icons so just below the linked list we can have social icons right there more specifically social icons container that's going to contain the actual icons so first of all we can put a company container right there and then inside of that company container we can have our slogan our slogan can be something like innovating one project at a time but of course you can put anything you want in here great now let's go for those social media icons below the company container we're gonna have social icons remember when I told you that our social icons are going to be similar to the one in the header so let's go right there and let's just copy our social icons GitHub LinkedIn and Instagram simply paste them just below the company container right in here great let's save it and there we go our three icons are right here also don't forget to wrap our social icons with a social container like this and then put it at the end before the Instagram tag great and with that said our next JS portfolio is now fully done let's open it in desktop view and take a look at that we have this nice header at the top we have social icons welcome to my portfolio with the learn more button you can see that we have some projects right there with two buttons with code and the source below we also have some of the Technologies like some more General things like front-end back and then UI in the About Me section you can write something write your hobbies your name then in here we have our timeline we have our personal achievements and at the end we have the call and email buttons as well as the social media icons and that is our portfolio of course it is fully responsive so if I do this and open up my iPhone x view you can see it looks incredibly well on desktop devices as well of course this is currently visible only to you on your device if your terminal is running but let's deploy this with hostinger to your own personal domain so that you can share it with your friends and potential employers we are back inside of hostinger's dashboard we already have the domain now is the time to set up the hosting I'm gonna use my premium shared hosting click setup right there and it's going to say welcome follow the guided setup let's click Start now and now you can choose what are you deploying in this case we'll be deploying a portfolio website so I'm going to click here we're going to enter a domain in this case that's going to be jsmasterypro.com I'm going to click select and in this step we're simply going to click this link at the bottom which says skip I will start from scratch I'm here to guide you so let's do that and that's the finished setup we can click finish setup and that's going to redirect us to the dashboard the site is going to be up in just a minute and then we're going to upload our files there we go our website is ready let's go to the control panel once that is done you'll be redirected to here and you can click manage on your hosting once you're here you can scroll down and find the file manager let's click it this is going to open up the hosting panel you can go under domains there you'll see your domain name and you can enter into the public HTML in there you'll see just a default PHP file and you can delete that one now you can go back to your code and then in there you can stop your terminal from running by pressing Ctrl C after you do that you can run npm run build this is going to create an optimized production build and it's going to put all the files into an out folder it's right there let's open it up in our file explorer and finally the only thing you have to do is open up that out file and simply drag and drop all the files from there and to here it's going to check if all the right files are selected and simply click upload if you haven't already while this is uploading now is a good time for you to press that like button and leave a nice comment it really helps with the YouTube algorithm okay all of our files are here we can now close our hostinger file manager we are back in here and before we check out our website let's activate the SSL certificate you can scroll down and there you will see SSL click on that and the process of installing an SSL using hosting gear is incredibly easy just pick your domain and click install SSL if you have recently purchased the domain it might not already be fully activated then it might say failed but for me it worked immediately if you're having any issues with the deployment make sure to open this chat window on the bottom right and they'll be able to help you right away with that said let's go to our dashboard and on the left side you can see main domain jsmasterypro.com for you something different is going to be here let's click it and check it out and there we go your portfolio is now live and deployed on your own domain you're now ready to present yourself as a solid developer who has built a lot of project and who's built this great portfolio with that said thank you so much for watching and see you in the next video [Music]

Channel: JavaScript Mastery

Views: 1,831,388

Keywords: javascript, javascript mastery, js mastery, master javascript, react js project, react js, web development, nextjs, nextjs portfoli, web development tutorial, web development projects, react portfolio, react portfolio website, react portfolio website 2022, react portfolio website tutorial, build react app, build react website, figma to react, figma to website, figma for developers, modern website in react, tailwind css, tailwind css tutorial, tailwind css react

Id: F627pKNUCVQ

Length: 584min 47sec (35087 seconds)

Published: Fri Nov 11 2022