Building the Overall Layout

Jonas Schmedtmann
A free video tutorial from Jonas Schmedtmann
Web Developer, Designer, and Teacher
4.6 instructor rating • 5 courses • 805,227 students

Learn more from the full course

Advanced CSS and Sass: Flexbox, Grid, Animations and More!

The most advanced and modern CSS course on the internet: master flexbox, CSS Grid, responsive design, and so much more.

28:04:40 of on-demand video • Updated December 2019

  • Tons of modern CSS techniques to create stunning designs and effects
  • Advanced CSS animations with @keyframes, animation and transition
  • How CSS works behind the scenes: the cascade, specificity, inheritance, etc.
  • CSS architecture: component-based design, BEM, writing reusable code, etc.
  • Flexbox layouts: build a huge real-world project with flexbox
  • CSS Grid layouts: build a huge real-world project with CSS Grid
  • Using Sass in real-world projects: global variables, architecting CSS, managing media queries, etc.
  • Advanced responsive design: media queries, mobile-first vs desktop-first, em vs rem units, etc.
  • Responsive images in HTML and CSS for faster pageloads
  • SVG images and videos in HTML and CSS: build a background video effect
  • The NPM ecosystem: development workflows and building processes
  • Get friendly and fast support in the course Q&A
  • Downloadable lectures, code and design assets for all projects
English Narrator: In this lecture, we will build the overall layout of our app. And so, first discuss how to do that and then use flexbox for the first time, in real life to create a part of that layout. So looking at the final design of our app, what can we say about the overall layout of this interface? Well first of all, there is this huge container here. So all of this, which actually holds the entire app. Okay. And that container is also nicely centered here in the view port. So that's the first element of the layout. Then in this container, we first have this header part here, let's say, where we have the logo, the search bar and these user navigation items. Okay. So this here is the header. And then below that we basically have two big parts. The first one I call the sidebar, which is this one here. It has the navigation and it has this small legal text here. Okay. And then on the right side, we have this hotel overview which is what I like to call this, so a huge block, which then contain all of this information about this hotel that we are currently watching. So these are the three big parts inside of the container first the header here on top, then on the left side the sidebar and then here on the right side the hotel view. Okay. So let's mark that up in html before we start writing CSS for it. So let's start with the overall container, I'm using a div element for that. And once again using element here, so container. So that's our container where the rest all of the content will be. Then in there we have, as I mentioned the header. And for that one we are going to use the header element in HTML5. So header, with the class of header. So that's the top part that's actually right in here. So the header part and then remember that we have the sidebar and the hotel view. Now in order to position these two elements we actually need a container for them. Okay. And I am going to call that one, content. So I'm using a div again and then content. So basically content is like the entire part which is below the header. So it's the sidebar, for which I am using the nav HTML5 element because it mainly holds a navigation. Okay, so I think Nav is the best element to show that to convey that meaning to the element. Okay. So nav and then sidebar. I'm writing navigation here just so we know what box is what and then we have the hotel view. And this time I'm using the Main HTML5 element because I think it's the perfect element because as the name says, the main element is where the main part of the website or web app goes. And in this case, that's clearly this hotel view. Okay and so main is perfect here. So hotel view. And that is actually already our overall layout. Okay, so that's exactly what we have here. Header and then the content, which is all of this together and then on the left side the navigation or the sidebar, actually how I called it and then here on the right side the hotel view. So now let's move over to our layout file here and start writing our code. So we have our container, we have our header, the content, sidebar and finally hotel-view. And let's start with our container. So the first thing I want to define is the width of this container. And then once again I'm going to use max width here. So that the container can decrease if there is not enough space to display our 120rem which is the width we want for this container, okay? Aright, so 1,200 pixels basically, if we have enough space, but if it's not enough space, so if the view port is less that 1,200 pixels, then we simply occupy 100% of the available view port width. Okay and that's what max width does. Alright, then I also want to center it in the view port. I'm using an old trick here with margin. Okay, so top and bottom let's actually put 8rem here, so 80 pixels and then the left and right side set to auto as we did in the previous project as well. Okay and so that centers the container inside of its parent element which is the body in this case. Now we also a background color in this container and the one I am going to use is --color-grey-light-2. Okay, so this one. Let me show it to you. So base. I'm actually going to leave it open here. So, this is the gray color that I defined for the background. And then we also want a nice box shadow, and a really dark one actually, so zero in the X direction, of course and 2rem and now 6rem so really a huge blur here and then 8.3 opacity. Okay. So let's actually take a look at that. Well actually before, we should maybe define a height here as well. So a max, or actually a min height. Okay and so this is for testing purposes once again. Okay and so now we can take a look at the result and here we go. Okay, let's close this one here. And so that looks pretty good already. So we have our nice shadow here and we can see our three layout elements here as well so header, navigation and hotel-view. So let's go back and actually we can reuse this shadow maybe in the future and so I want to show you that we can not only use colors, we can use other stuff as well as variables, okay. So let's add a new one here simply called shadow-dark and then we can do it like this. So variables of course not only work for colors here we can store other things in there as well. So let me now just copy this and in here I can simply say var again and then the name of the variable. So, let's check that out and you see it still works the same, okay. So now if we need it, we can reuse it later in the project. Okay, so now it's time for the header. And here once again I am going to define the height and this one will be 7rem, so 70 pixels in height. I want it to have a background color, a white one. And this time I am simply just going to write out FFF because I know that that means white. And then is should also have border bottom. Okay, next to the color that I want here is light gray and the one that I want here is gray number one. So there are just subtle variations of the same light gray. So let me show that to you. Okay and so here you see it, so next up let's think about the navigation and the hotel view. So for the sidebar we want a background color of this dark gray here. So the darkest color of all. So var and grey-dark-1 and then on the hotel view, we simply want a white background. So let's grab this one as well. And now lets take a look again. And alright, now of course you want these two to be side by side, right? So the navigation on the left side and the hotel view on the right side and what is the perfect tool for doing that? And I'm sure you guessed it, we're going to use flexbox now. So, in order to start flexbox, all we need to do is to set the display property of the flex container to flex. Alright? So, this way flex. And that's it. So this one here of course will be our flex container. Because it's the one that holds the two elements we want side by side. So content will be our flex container and sidebar and hotel view will be our two flex items. Okay. So just to see if this actually worked, let's take a look and yeah. So actually they are side by side now, not occupying a lot of space of course but they are already side by side and so that's a good starting point. Now let's put some properties on the individual items in order to make them look more like this here. Okay. So the navigation should have a width and I'm sure that you know how to do that, right? So the property that we use to flexbox to define width is the flex phases property, now we should always use it in the shortened flex property, okay. So that's what we are going to do now. So, flex and the first one is flex grow. And we don't want the elements to grow besides the width that we are going to define. We also do not want it to shrink, okay because remember that the second value here stands for flex shrink. So it's zero as well and then we flex bases with is 18%. And that's it. So 18% is the number that I can up with which is the perfect width for this sidebar. But you can experiment here with other numbers until it fits the perfect width for you. And so that's it. So once again with flex, we set and that don't want the element to grow if there's some space we also don't want it to shirk if there's not enough space but we always want to keep at 18%. And since it's a percent value it's actually okay to say that we don't want it to shrink because it will automatically shrink because it's a percentage, right? So its not like pixel value. In that case it would be better to allow it to shrink, but right now its good like this, okay? So let's check it out. And alright, you see here that it has now this 18% and the hotel view, well it's still just very small. Let's actually give it a background color as well a different one, to see it a bit better So I'm sure you guessed it, it's orange red again. So you see that this element is still very small which of course we don't want. We want it to occupy the entire remaining space, right? So usually flexbox terms we want it to grow as much as it can and what it means in code is to simply say flex one. Okay and that's it. So again by using flex one what we say is that the element should grow as much as it can. So over all the available space that it has and that's what happened here so now it grew all the way until the right side and it's occupying the remaining 82%, right? So, 100 minus 18 is 82. And so that is the power of flexbox there's no floats, there's no clear fixes there's no weird hacks like all that, just very simple, just three lines of code. We just wrote this flex here, flex here and the display to flex. So that was all we needed to create the small layout. Okay, and that's actually all I had to show you in this lecture. So the overall layout is now coded up and we're ready to start building here the header So that's what we're going to do, right in the next lecture.