Build and Deploy a Fully Responsive Restaurant Website with Modern UI and UX in ReactJS

hi there and welcome to a brand new project video where you'll build and deploy a fully responsive website with modern ui and ux in react.js this restaurant landing page tutorial is the best modern ui ux tutorial that you can currently find on youtube there are many tutorials out there teaching you how to build a website a website consisted of a navigation bar a few divs and a footer boring right today you'll learn how to take a figma design and turn it into a beautiful website all the way from design over development to deployment 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 don't worry this course is completely beginner friendly we're going to start easy and then move to more complex topics every step of the way will be explained alongside building the website 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 bem 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 extremely fast servers and give them a custom domain name the only thing i'm asking in return for this great tutorial project is for you to support this video by leaving a like commenting and subscribing you don't have to do it right now feel free to watch the video through and see how you like it if this video reaches 15 000 likes i'm recording a third video in the build modern ui ux websites with react.js series also make sure to stick to the end of the video where i'll challenge you to add your own code this project to make it even better before we dive into the project i have an important announcement for you for quite some time now i have been working on something big i'm creating a custom platform where you'll be able to learn by creating even better and more professional projects it'll take a long time to turn this into a reality but i want you to make the most important decisions during the process so click the mailing list link down in the description so that you can stay up to date and choose which projects to build first big news coming soon 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 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 the find us 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 did 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 i hope that this project showcase got you fired up and ready to start building this project with that said let's dive straight into the video [Music] before we start building out our project let's first get the hosting and the domain name for our new site your portfolio or any site you'll create in the future hostinger is my personal recommendation and right now they're offering crazy deals so i simply needed to show this to you if we scroll down a bit you'll notice that there are three plans they offer great price to quality ratio high speed servers and most importantly 24 7 chat support let's see what's offered with some of the most popular hosting plans and let's grab those deals hostingers plans are incredibly cheap i mean one dollar a month for hosting for one website and you also get a free ssl certificate that means that you'll have https security in this case we're going to go with the premium shared hosting because it offers a few great things you need when building out websites such as portfolios blogs websites for clients for restaurants coffee shops or anything like that this hosting plan is going to give you up to 100 domain based email addresses you're also going to get a free ssl certificate but most importantly you're going to get a free domain name as i've mentioned initially we need our restaurant landing page to be fast and reliable for that reason having a custom domain name custom email address ssl certificate and fast website load times will make your page stand out from the crowd since i've partnered with hostinger they decided to give you guys an even bigger discount you can find the link and the discount code in the description enjoy i'm sure you're gonna find it useful once you've clicked the link in the description let's go ahead and choose a plan as i've said for many reasons i'm going to choose premium shared hosting once you've selected your plan in 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 create your account and select your payment method the javascript mastery coupon code should already be applied if you click the link but if it hasn't been applied simply type javascript mastery all uppercased that's going to give you an even bigger discount on your hosting package after you're done with the purchase you'll be redirected to 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 now have this claim domain button right here on the other hand if you got a single shared hosting you can go to domains and then find the domain right here in my case i'll click the claim domain button right here our demos restaurant's name is garricht and it's highly possible i'm mispronouncing that since it's a german word but we'll just keep calling it garrett from now on so let's try something like gareth restaurant there we go check availability and garrick-restaurant.com is completely available let's go ahead and claim this domain of course if you still haven't purchased the domain or if you're not sure what to call your site you can simply save the domain for later or you can do this setup at the end of the video where we're going to actually deploy the site so it's not crucial that you haven't chosen your domain just yet and in a few seconds our domain name has been registered now we can go to home and right here you'll notice that we are yet to set up our premium shared hosting so let's click this setup button right here this is going to be a guided setup so let's click start now with hostinger you can instantly build wordpress or woocommerce websites but in this case we're going to press skip i'll start from scratch in here you can choose a domain name so let's go ahead and choose the one we just purchased of course you can do this at the end of the video if you prefer to so let's click select and that's it we've just finished our setup while our hosting is being set up i just wanted to quickly let you know that there's a github repository containing the entire code for this project so if you ever get stuck just make sure to visit this github page the link is going to be down in the description and compare your code with the code that's on here while they're here i'd also appreciate it if you gave this repository a star and that's it our site has been set up let's go to the control panel by clicking the manage site button as i've already mentioned at the end of this video we're going to simply deploy our website 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 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 something like garrett 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 in 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 react 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 application to this div and this is where all of our react code is going to go right here inside of this div with an id of root while we're here we can also change the name of our site so in this case that's going to be garrett 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 package.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 mainly 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 garrett 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 gonna use for our project then we're gonna 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 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 with 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 sigma 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 sigma 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 and our browser side by side with the editor so that we can see live what we're coding there we go i've put my code editor on the left side and the live site on the right side in here i've also included the finished garage 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 navbar 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 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 going to 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 bem 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 bem stands for block element modifier and when we write css we're going to write like this block element and then modifier if you want to read more about the 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 navbar let's give this snap bar a width of 100 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 this navbar 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 garreth 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 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 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 sense 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 color 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 and two ram 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 navbar 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 navbar 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 navbar dash links we can set the flex to be equal to 1 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 0 but on left and right set it to 1 ram 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 colon 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 gonna 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 sense 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 0 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 saved it 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 nav bar dash login and then div we're going to give that div a width which is going to be of 1 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 navbar 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 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 gonna 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 navbar 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 that'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 gonna 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 nav small screen underscore overlay and also before we start writing code let me show you what am i referring to if you go to the finished site by the way you can visit it by going to garrett.versel.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 gonna set the position to be equal to fixed we want it to appear on the entire screen so we're gonna 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 ease 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 five 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 navbar 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 the display to be equal to none so we're going to hide our main navigation bar but the app underscore underscore navbar 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 navbar dash small screen underscore links and we can set the list style to be equal to none that here should have removed 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 colon 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 2000 pixels so let's copy this add media and screen and that's going to be 2000 pixels again you can play with these sizes but there are some most commonly used sizes like 2000 1150 650 pixels for mobile devices these are the screen sizes we're going to 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 width 650 and that's going to be at the end we're going to start from the widest to the least wide of them all which is a mobile device so on big devices we can say dot app underscore underscore navbar dash logo and then image is going to be width 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 gonna 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 with 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 garrick 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.cell.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 side 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 that 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 gonna 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 control 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 gonna 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 b underscore underscore hormone 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 alt 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 header 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 header.css the first thing we can of course do is set the app.header 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 this 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 upper case 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 to 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 in 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 gonna 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 gonna 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 going to 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 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 sense 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 this no 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 we 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 as well as the z index is set to two 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 one 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 align dash items flex dash end 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 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 dot app underscore underscore about us dash content underscore knife and there let's do margin two ram on top and bottom and four ram 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 1 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 ram 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 for ram on top and bottom and zero ram 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 going to also change the margins between the paragraphs so we can paste this right here indent it and make it for ram and zero 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 site 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 appropriately 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 directionalist 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 we 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 inspect tools and let's expand the site to its full 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 dot 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 that div is going to have a class name equal to app underscore underscore special menu dash menu now inside of there we're going to have a few divs the first one for the left side wine and beer then we're going to have the div that contains this image and finally we're going to 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 data.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 that 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 gonna 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 dot app underscore underscore special menu dash title we can put the margin dash bottom to to rem like this and we can also say text 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 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 to rem 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 dot title not price here for the price we're gonna use cocktail dot price and finally for tags we're gonna use cocktail dot 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 tags and based on that we can create a div with a class name app underscore underscore menu item like so and you'll see me sometimes use camelcase or sometimes all lowercase use whatever you prefer but make sure that you stay consistent with it so inside of that div we're gonna 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 gonna 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 dcca 87 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've only rendered 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 wine 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 button 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 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 percent 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 ninety percent 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 f a f a 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 ram 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 dot app underscore underscore menu item dash price and right here we can set the display to be equal to flex justify dash content to flex dash end 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 bash 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 don'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 font 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 dash 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 the 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 1 width to be equal to 100 percent and most importantly flex dash direction to be equal to column there we go wine and beer appearing on 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 into 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 in these lists one below another we have to go into our 1000 and 150 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 what 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 100 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 align dash items is equal to center and also width to be equal to 100 percent there we go let's see this side on 1600 as well this is the finished site so let's do 1600 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 expand it 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 dot dot slash dot slash 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 dot dot 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 div for the content so right here we can say class name is equal to app underscore underscore wrapper underscore info then we're gonna 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 headed 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 in there we can render an image an img tag that's going to be a source src images dot quote and alt tag 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 sense 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 sense 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 sine 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 do 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 percent 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 position this correctly right now and then align dash items is going to be flex dash 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 zero 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 chef dash sign width is going to be 100 and margin dash top is going to be 3 rem there we go now let's style this chef and founder sign so right here we can say dot app underscore underscore chef sign p and then 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-transform to capitalize i see that our chef and founder is not changing so let me see and this is going to be app underscore underscore chef dash sign 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 3 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 width 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 of that specific screen so now if we 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 fill 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 dot slash dot slash constants there we go if you control click into constants you'll see that we have a meal assets meal.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 div and the class name is going to be app underscore underscore video and right inside of there we're going to 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 with 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 see 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 going to 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 the circle at the center now alongside this class name let's first put this into multiple rows or lines we're going to 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 dot current dot play and i just noticed that i called it the video ref but rather it should be vidref 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 and right here because we're going to set the color of boat 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.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 covered 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 0 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 border is going to be 1 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 altogether 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 our 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 gonna 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 the 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 our 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 data.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 further more 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 going to 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 gonna have two different paragraphs the first b tag is going to have a class name equal to p underscore underscore cormorant 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 caller and instead of the title we're gonna 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 laurels 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 garrett 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 laurels.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 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 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 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 ram 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 min dash width is 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 ram as soon as we save that you're going to 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 going to copy this paste it and now let's do max with and that's going to be 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 ram on top and bottom and 0 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 going to 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 2 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 we 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 coding 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 going to 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 gonna 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 gonna 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 gonna 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 4 ram on top 0 on right 4 ram and bottom and 6 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 p 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 gonna 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 rev 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 gonna 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 we'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.gallery01 then images.gallery02 images.gallery03 and the last image is going to be images.gallery04 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 one 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 gonna provide a class name which is gonna 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 1 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 align dash items of flex-start and finally flex dash direction is going to be column let's apply a min dash width of 500 pixels and also padding dash right off to rem okay this is already looking so much better now let's apply some margin to our button by doing dot 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 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 going to 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 with 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 column colon 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 copy 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 dash size to be equal to 2 rem opacity to be equal to 0 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 one hundred percent also the height to be one hundred percent 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 1. 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 align 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 caller 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 set 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 width 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 rem 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 off 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 there we go and we can also set the margin to be five 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 be 4 ram on top 0 4 ram on bottom and then 4 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 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 there we go now it's not going outside and we can actually nicely scroll with your 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 us 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 bg 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 gonna 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 gonna have the div containing our image so we can say div and we're gonna 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 subheading 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 former end and it's going to have an inline style equal to margin bottom is equal to three 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 is going to be p underscore underscore cormorant and inside of there we're gonna have some styles so let's do style where we're going to have a caller is equal to hash dcca 87 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 or lay and then the second one is going to be news letter and that is coming from dot 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 fi 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 going to have two empty divs so let's create a self-closing div 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 width is going to be 100 the height is also going to be one hundred 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 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 percent 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 yet implemented the styles for the footer so let's go to our footer.jsx more specifically let's go to footer.css inside of here we have to do dot app underscore underscore footer let's simply deal with is going to be 100 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 control 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 cormorant 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 cormorant there we go so now we can see our grade 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 going to 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 dot css and we can implement the styles let's do dot app underscore underscore newsletter let's do padding is 2 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 slight 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 dot 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 3 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 one pixel solid var dash dash color dash golden border dash radius is going to be 5 pixels font dash size is going to be one rem font 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 to rem and then the most important thing is going to be the padding 0.75 ram on top and bottom and one ram 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 2000 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 for 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 dot app underscore underscore newsletter dash heading h1 font dash 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 dot app underscore underscore newsletter padding is 2 ram 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 one hundred percent okay and this is it this width 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 dash size to 2 ram just to make it a bit bigger on extra large devices so now if you 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 coded 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 gonna have our social media icons and the last div in 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 going to 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.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 gonna 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 not the 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 b 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 00 am to 12 am right here and then 7 am to 11 pm 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 going to do 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 100 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 2 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 divide them a bit and text align is going to be center there we go now we're going to play with the logo a bit so we can do dot 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 our 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 width 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 dot app underscore underscore footer dash links underscore work we can target the paragraph and we want to target the nth child so nth dash child and then 2n plus 1. 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 dot 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 that we can see them dot app underscore underscore footer dash links underscore icons svg let's do the color var color white like this and here they are let's give each one of them a margin of 0.5 rem so we space them out there we go let's set the font dash 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 colon hover and we can change the color to be var 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 and working hours so let's style them dot app underscore underscore footer dash head text font 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.0 em let's capitalize it so let's do text dash transform capitalize let's also set the font dash 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 ram 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 3 rem 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 going to 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 for small mobile devices let's start from mobile further so i'm going to 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 garrett 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 ram 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 dot 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 two ram on top and bottom zero on left and right to space it up a bit and we're gonna add a width of 100 percent and finally for extra large devices let's do dot app underscore underscore footer dash head text where we're going to 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 our chef kevin then we're gonna have the prices of wine beer and cocktails this great knife about us 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 deploy 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 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 garrettrestaurant.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 garrett restaurant 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 age panel 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 mpm 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 our age 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 file is 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 and with that we've come to the end of the page and with the end of the page comes the end of the video so thank you so much for watching this video it means a lot to me and hopefully you've learned a lot along the way you'll now be able to build this project showcase it on your portfolio do similar projects for your company friends or clients and i hope this is going to pay off for you with that said if you haven't already definitely make sure to smash that like button comment and subscribe that's going to be it for this video and i'll see you in the next one have a wonderful day [Music] you

Channel: JavaScript Mastery

Views: 585,101

Keywords: javascript, javascript mastery, js mastery, master javascript, react website, react website example, restaurant website, react website tutorial, react website portfolio, react project, react js, react website design, reactjs tutorial for beginners, react js project, react website from scratch, react website development, react js full course in tamil, portfolio website design react, react portfolio website from scratch, react tutorial for beginners, react website project

Id: 4oV65GVVits

Length: 204min 9sec (12249 seconds)

Published: Fri Jan 28 2022