Create a Restaurant Menu with HTML & CSS Grid + Flexbox

hey guys how you going my name is dom and today we're going to be learning how to use html and css to create a restaurant menu okay so first off i just want to say sorry if this video makes you hungry because there's going to be a lot of delicious italian food here which i would definitely like to smash if i was at a restaurant right now but anyway the key concepts being covered in today's video is going to be css grid and flexbox and how you can use those two together to create something like this as well as a responsive first design where we're going to be firstly building this with a single column layout for mobile devices before adding css to support larger displays in this dual column layer later on okay so as we can see if i resize down we get this this single column layout for mobile devices and of course it works and looks quite nice there so let's go inside this tab right here and begin from scratch to of course create what we just saw okay so the html for that page looks like this currently it is of course empty okay so we're going to begin on the html before moving on to the css okay so when it comes to the html the first step is going to be to create a main container for the entire web page itself if you've already got a main page container you can reuse your one but if you don't have one you can create one just like this a div with a class of container so now we're gonna have a second container and this one is going to be a div once again with a class of menu this time and this one is going to be the main container for the menu itself okay so when it comes to the menu it's going to have basically two core child elements the first one is going to be the headings for each one of your different menu groups for example entree main dessert things like that so we can make a new h2 here with a class of menu dash group dash heading so here you know you can put inside here like i mentioned you can say for example entree with the nice e i'll just copy and paste this one so for example entree and of course the rest of them following this so now with this menu group heading the next one is going to be your your actual menu group so this menu group is going to contain each item under the entree so now we can say div with a class of menu dash group just like this and like i mentioned inside here now we're going to have each one of our different items so we can see here to cover essentially the entree section of our menu it's going to take these two child elements if we want for example to include the main menu items we'd make a second you know copy of this this time changing this to be mains and of course now you've got your two categories right there so let's just focus on the entree for now and we can just copy and paste the rest of them later on so for the entree inside our menu group now we can actually specify each one of our items but i just want to pause here and move on to the css just to make some progress on that side so i'm going to save this right here go back inside the browser and we have something like this okay so nothing too special obviously so far but let's go inside now the css and add some styles to make it look a bit better and of course get you know get some things working so in the css we're going to firstly target the main container class like i mentioned earlier if you already have a main container for your web page this step can be skipped but in my case here i'm going to set a maximum width of px for my entire page we're also going to say a margin of zero and auto this will ensure that it gets centered okay so horizontally centered and some padding of 1.5 em just to create some space along the edges of my page so saving this we get something like this in the browser obviously we get that space that padding and of course it is also centered as we can see right there okay cool so moving on let's target now the actual main menu class so for the menu class we're going to set a font family we're going to say sans serif of course you can include whatever font you like here we're also going to set a base font size of 14 px so the reason for this 14 px instead of something like 16 px is because like i mentioned earlier we're going to be doing this mobile first so to have the image and the text side by side on mobile it can get a little bit you know tight on space so having this slightly smaller font size is going to help that for our desktop devices later on we're going to increase this font size to be 16px but basically you know having this base font size here means that a few of our properties later on you know in the actual menu are going to be based on this font size and it's all going to scale nicely so just use a base font size right there now for the for the actual menu group heading this one here we can target the class of menu dash group dash heading okay and for this one if i can spell correctly here we go so for the menu group heading we're going to set a margin of 0 just because we're going to be using padding instead to create some space so we're going to say here padding dash bottom and set this to be 1 em okay alongside a border bottom of 2px solid and then triple c for a light grey so now saving this right here gives us something like this in the browser as we can see we've got this space here between of course the menu heading and the border on the bottom now keep in mind that with the usage of the em unit right here this just means one times the current font size the current font size is fourteen so basically one em means one times fourteen of course giving us 14. now when we move on to desktop later on on the desktop version it's going to have 16px as the base font size so the margin here sorry the actual padding here is going to be increased alongside the font size of the desktop version but anyway let's move on now to targeting the actual menu group and this is where css grid is going to come into play okay so just just as an example right now i'm going to create a couple of you know sample items so i'm going to say here div just like this and say 1 and we can say 2 and we can say 3 just as an example ok of course saving this in the browser gives us something like this currently so of course each item on their own line so we want you know for desktop devices we want it to be a two column layout so because we're going to be developing this mobile first we're going to begin with a single column layout and then of course move on to dual column for our desktop version so let's go back inside here we're going to be targeting the main container the menu group container okay so we're going to say menu dash group so for this one here we're going to be displaying this as a grid just like this now for the grid template columns property this allows you to specify what your columns are going to look like and how they're going to be sized so in our case right here we want to have a single column layout which means we can just say one fr right inside here this means basically each item in our menu group so each div right here each div is going to take up one of the total free remaining space so basically each grid item or each each column is going to take up the full width of our menu group giving us a single column layout we're going to be changing this right now very shortly to a dual column layout using media crew so let's uh let's just finish this off first so we're going to say gap year of 1.5 am so a gap of 1.5 am is going to add of course some space 14 times 1.5 once again the base font size so 14 times 1.5 of space between our menu items each item okay also some padding we're going to say padding 1.5 em top and bottom and then zero left and right we're going to see how this works right now but i'll just save this go back in the browser as we can see we have we have of course if i inspect the menu group we've got the grid working right there we get each one of our individual you know cells right there and you know those two center purple diagonal lined sections is our grid gap okay and of course we have our actual padding on the top and bottom there for the menu group okay so that's fine let's have a look now at the the actual dual column layer so for the two column layout let's go back inside here we're going to target okay we're going to say i'm going to say at media screen and then min with going to be something like 992px okay so basically if the screen is more than 992px in size then we're going to apply the desktop styles so we're going to firstly target the menu and we're going to set the font size here to be 16px once again just setting that base font size to be larger on the larger displays as well as of course the menu group class and of course giving us that grid template columns now you know changing it from the one fr to be this time instead repeats we're going to say 2 then 1 fr this now means this repeats of you know 2 1 fr just means this right here 1fr space 1fr okay so what this means is basically we want two columns taking up the total space they can evenly so basically two evenly sized columns if i save this right here go back in the browser we can see we get the same thing but if i zoom out to basically replicate a large display on this large display we get our two columns right there and the grid has transformed of course into that two column layout but of course it is responsive on mobile giving us that single column layout when it's required so there we go that is basically the main grid part done now of course you know we we could have used flexbox for this um you know but having having grid is going to allow us to not only extend on this later on and create more complex layouts but also it allows us to take advantage of the gap property so this gap property would take a lot more work to get working on a you know on a multi-dimensional sort of layout with flexbox you need to use margins and possibly even you know things like saying only apply margins on the last child or every every second chart things like that so having this gap property and using grid makes it super easy to create larger layouts on the on the web whereas flexbox we're going to see very shortly is better suited to smaller sort of minute you know layout items so let's move on now to the actual menu items so let's go back in the index.html and we're going to be replacing all of these divs here with an actual menu item so this looks like this we're going to say a new div with a class of menu dash items so of course this represents a singular item on the menu so for this one we're going to be having an basically an image portion and a text portion so we can make a new image tag right here with a class of menu dash item dash image inside here we can just say for example going to images forward slash let's do let's do bruschetta as our first image or menu item give this uh just a bit of alt text we can say bush getter inside there okay cool so we have this right here now of course saving this we can see the image goes to its maximum size and this needs to be fixed obviously even though of course the food looks fantastic at this size we can of course fix that but anyway let's go back inside here and finish off the html so the remaining of the html for this for this menu item is going to look something like this so i'm going to have this separate section now for the right side this will be the menu text or menu item text so div with a class of menu dash item dash text so for this one here we're going to be having uh basically just the the main heading as well as the description so we can say right inside here h3 with a class of menu dash item dash heading inside here though okay so inside this menu item heading we need both the actual name of the dish or the item then of course the actual you know price of that item on the right side so for this we can make two spans one span being a menu dash item dash name inside here we can just say for example bruschetta okay then a second span this one here is going to just say price it'll be for example something like 12.90 so i might just stop here okay i'm going to save this go back in the browser we can see we get you know something like this where we have the menu item heading on the bottom here so let's fix all this up so when it comes to when it comes to the menu items okay we're going to be using flexbox so we want as we saw in the actual example we want the images to be on the left side and the text to be on the right side so basically we have the images here text here so that is perfect for flexbox it's very easy to do so back inside here let's target the menu item container okay so menu dash item so for the menu item okay we're going to be saying display and make this flex and that is basically it so now by doing so if i save this we get this right here where the text is now on the right side so it is now positioned with two columns basically so the main part is going to be now to style up the the actual image so let's target the image here we're going to say menu item dash image so for the menu item image we're going to be giving this a width of 80px for the um yes so 80 on the height and then also uh well 80 by 80 is what i'm trying to say there we go so 80 by 80 this will also be larger on desktop devices so let's just copy this rule here or this rule set and paste it down here and make it so they actually become 125px on the larger devices okay so that's fine let's save this let's also give this a flex shrink we're going to see why right now back inside here as we can see we have of course the actual image and we have of course it's set to be you know 80 by 80. now the problem is if i add some text inside this this you know this section here for example add some dummy text save this back in the browser we can see the actual image gets you know squished by the text so to prevent this from happening we need to go back inside here we need to say flex shrink and set this to be 0. save this now we can see the image goes back to the 80 by 80 you know width and height which we set it to also the image has been you know squashed down and skewed so we're going to be setting an object fit on this image here we're going to say object fit here okay make this cover so now we can see you know look at the bread here the bread's gonna change so if i save this go back in the browser the bread has now you know returned to its original aspect ratio and it looks nice okay we're going to also add some margin here to create some space between the text and the image so back inside here let's just say margin dash right make this 1.5 am let's save this back in the browser and we get this space added right there quite straightforward let's just zoom out right now and we have something like this so let's now target the actual text so when it comes to the actual text if i remove some if i remove some text here just to demonstrate something for you guys i'll save this this menu item this this paragraph tag this this this whole text you know item right here it doesn't span to the right side okay so to fix that to make everything you know look you know neat we need to expand this text to take up the entire remaining space so let's go back inside here let's target the menu dash item text class we're going to say flex grow and set this to be one let's save this back in the browser now we can see we have the whole width you know remaining space taken up by the text which is good so let's move on now to styling up the actual heading so for this we're going to be targeting of course the menu dash item dash heading class here and we're going to say a display of flex we want the actual item name to be on the left side and the item price to be on the right side so we're going to say display flex right here followed by a justified content of space between so saving this here we can see by using flex on the actual container right up here so on that main menu item heading container we've got these two child spans so by setting the flex on the main container then space between as justify content we're adding space between our two spans left side for the text right side for the image sorry for the uh for the price that's perfectly fine and obviously looks nice so let's now remove some margin here to make the the heading be in line with this top of the image so back inside here we're going to set a margin of 0 on the heading save this back inside here refresh and it looks perfectly fine so we're almost done guys i just need to finish up a few more things on the name and the description so here's the problem if i resize this the price is right up against the name right there okay so if i make this name a lot larger let's let's make this uh bruschetta with a space and copy it a few times just like this so we can see obviously on larger on larger you know in larger cases it doesn't look too nice of course that space isn't there so to fix that it's quite straightforward obviously uh just got to add some margin so let's go inside here let's target the menu dash item dash name class of course the name refers to the container for the span here or just the span of the container so for this one we can just say margin margin dash right as 1.5 em now we can see here i'm also using 1.5 for the padding the gap the margin right here the margin right down here so i'm trying to keep it consistent so try and use the same values for your padding and of course if you can use em that way it's relative to your font size so on larger devices as the font size increases so will the padding between your items and it all looks nice and uniform so anyway let's just save this right here you go back in the browser and we can see that problem goes away and of course now we have that we have that gap between our text right there and of course the price so that's good so the very last css rule set to cover is going to be for the actual text down here itself so i'm just going to go back in the index html we have this paragraph tag as a child of the text container so for this one let's give this a class of menu dash item dash description okay so you can make as many of these paragraph tags as you like it's up to you but of course in this case right here i'm going to copy and paste my description of dummy text from my and paste it right there let's go back in the browser and we get this so of course it looks not bad but the problem is right um the line height isn't isn't isn't too isn't too high okay so i want to be able to increase the line height to age in legibility make it look nicer and read a bit easier so back inside here let's target the class of menu item description just like this right up here there we go and at a line height of one point let's do 1.6 okay save this back in the browser and we have of course a lot more space between each line here and it makes it look a bit nicer now let's remove the actual you know duplicate text i don't know why that's still there back inside here remove our multiple bruschettas and i'm going to show you guys real quick for those of you who don't know i'm going to show you how to include a custom font for your web pages or whatever you're doing so if you head to fonts.google.com okay it's a popular free website for getting you know free fonts and things like that you can choose your font from this page so in my case right here i use the intel font but i just want to show you real quick real quick if you choose the category of you know sans serif you're going to get the sensor fonts and you can of course also specify a number of styles if you want bold italic normal light etc increase your style account if not whatever you want to do guys but i just choose your font in my case i used enter this font right here as my example wherever it is there we go so just choose your font just like this then to include it you just want to basically pick which sizes you want so in this case right here we're using bold for the headings and also normal font weight for the actual text so we need bold 700 and normal 400 okay so back inside here we're going to target or going to select the bold 700 and also the regular 400 select both those styles right up here then to use them just copy and paste this link code right down here into the head of your html so right up here include those just like that then in your actual you know css file well actually in the web page it gives you examples of how to actually use it so of course just copy and paste this font family code right here and we can just paste it inside our main menu class right here save this go back in the browser and we are done we've got our custom font included right there not much difference from ariel of course but there we go and that's all so i'll be leaving the code to this in the description below if you want to download it and if it wasn't obvious enough guys you know if you want to have multiple items you just need to copy and paste your html so let's just quickly demonstrate before i go so i'll just uh i'll just copy our menu item right here make it happen twice save this back in the browser on larger displays it becomes two and of course if you want your multiple different menu groups your entree and your main dessert whatever it is just copy and paste your menu group heading and your menu group this one's saying let's just do dessert let's just let's go straight to dessert okay save this back inside here now of course we have the dessert section right there so that is how to create a menu using html and css i'll leave the code for this in the description below if you want to download it and check it out thanks for watching guys and i'll see you in the next video

Channel: dcode

Views: 10,422

Keywords: html tutorial, css tutorial, html5 tutorial, css3 tutorial, css grid tutorial, css flex tutorial, css flexbox tutorial, css flexbox, css grid, css3 grid, css grid columns, css grid layout, build layout with css grid, build 2d layout with css grid, build website with css grid flexbox, css flexbox layout tutorial, build restaurant website, beginner css tutorial, beginner webpage tutorial, beginner website tutorial, beginner html css tutorial, beginner css project

Id: cJjej5udWVE

Length: 26min 6sec (1566 seconds)

Published: Mon Apr 19 2021