Master CSS Grid + CSS Layout | Andrei Neagoie | Skillshare
Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (1h 11m)
    • 1. Course Introduction

      1:50
    • 2. CSS Grid vs Flexbox vs Bootstrap4

      4:40
    • 3. CSS Grid 1

      7:55
    • 4. CSS Grid 2

      4:14
    • 5. CSS Grid 3

      6:25
    • 6. CSS Grid 4

      7:07
    • 7. CSS Grid 5

      1:56
    • 8. Exercise CSS Layout

      3:37
    • 9. Solution 1

      8:37
    • 10. Solution 2

      4:22
    • 11. Solution 3 Cover

      4:41
    • 12. Solution 4 Project Grid

      8:54
    • 13. Solution 5

      6:59
    • 14. Where to go from here?

      0:11

About This Class

Learn to create beautiful website layouts using CSS Grid! Using just HTML and CSS we will learn how to use modern practices to create websites and web applications. 

Transcripts

1. Course Introduction: welcome back in this section. I want to tackle the problem that we have, especially when we're starting out. That is, how do I create a layout off a website? And it's probably the hardest thing to learn when you're starting off. How do you create something? Let's say like this that is responsive, that we see all across the Web and navigation bar, a header, some grids, a footer down here. And how do we really make it responsive? In this section, we're gonna build an ideal webpage layout so that moving forward, you have the baseline and foundation to go off and customize and build whatever sites you want that are responsive without spending a lot of time trial and error trying different things, with CSS hoping that it works. So I'm going to show you my recommended way of laying out webpages that is responsive and have that template available to you moving forward. We're also going to learn about a new feature in CSS called CSS Grid, which is really, really powerful and, as you'll learn, allows us to use this CSS grade combined with flex box to honestly know, even need things like Bootstrap four or other libraries that allow you to do grits back into the day. It was really, really hard to do layout in CSS. But with tools like CSS Grid and Flex Box, you now have the abilities to really build beautiful, responsive layouts really, really fast. So let's get started. I'll see you in the next video. 2. CSS Grid vs Flexbox vs Bootstrap4: welcome back. When it comes to layout using CSS a very important skill of a developer. They're probably three really good ways to do it this year. One is something that we've discussed and that is flex box. And now the one was Boots Shop for, and we're gonna learn about a new way of doing it, which is called CSS Grit. And if you go for a Google image search and type in something like CSS Flex box vs Grid, you're gonna get a lot of images explaining what the differences are, why you would use one over the other. But I want to just pre face the next couple videos and let you know that there's no one versus the other one that wins out over the other. There's always a trade off, and the best way to think about these stools is as complimentary tools. That is the both work really, really well together. You don't on Lee have to use just flex box or just CSS crit, ideally used them both together, and I'll show you later on how we can use both flex box and CSS cred to pretty much do anything we want when it comes to lay out, but just to start us off. A good way to think about Flex box vs CSS grid is that flex box is really good to use. If you just have one dimensional, maybe you're only thinking about columns and how to do layout based on columns. CSS grids are really, really powerful, especially when it comes to two dimensional layouts that is both columns and rows. So it's really, really good at, Let's say, image galleries or listing out your portfolio projects on your own personal webpage, and we'll get into that. But now you might be asking yourself, Okay, isn't this what Bootstrap allows us to do? And you'd be right. Bootstrap came at a time when we didn't have flex box and CSS crit. It came at a time when we just had display and floats and positioning CSS properties that, as we saw, are really, really difficult to use when it comes to layouts and bootstraps sold that problem. It gave us this grit system that we can use within bootstrap to make really beautiful layouts, so that was really, really useful. But on your resume, if you say that you know booth shot for Yeah, that's good. But it won't be that impressive to employers anymore, especially if you're going for a real developer job. Which is why I haven't focused too much on Bootstrap for because I argue that everything that you can do in bootstrap for, although sometimes it's easy because it comes with their own pre built components. You can do now using Flex box and CSS script and because being a good developer means not just learning. One library that always changes always evolves. It's learning the fundamentals. It's more important for us to learn Flex box and CSS Grid because now, if we know these two, we can create any sort of layouts. We want one last thing. When it comes to CSS Grid, it's a new feature. Most Web browsers half support for it, but we do see a few reds and older versions of browsers that do not support CSS grit. When we look at flex box, it's a little bit better because it's older than CSS crit, and we've learned all about this before, right. Each browser has their own implementation, and any new feature has to be implemented individually. So although CSS grid has become pretty standard across the Web. If you're trying to support older browsers or something like opera mini, then you might want to consider using floats to do lay up. Although to be honest, most of the Web is moving towards CSS Great and flex box. So I just recommend starting to use this right away because eventually this will have really, really good support. But enough talk. I think it's time for us to learn CSS grids, to see what all the hype is about and start working on a fun little project I'll see in the next one. But by 3. CSS Grid 1: Welcome back. I've given you some starter files, so I recommend watching these videos as he code along as well on your computer. We have a few animal cards here that are extremely cute, obviously, right now, if we look at what we have, we have an HTML page with just simple dibs that contained these little emojis of animals. And if we go to the style tab, I've pre filled a few things for you Just so things look good, but all we're really doing here is we have a few colors and we've added Grady INTs here. Just so it looks a little bit nicer. And we have the zones, which are these individual cards with some pre defined CSS properties that we've already seen and put in the previous videos. Just with this base CSS that we have, we see that we have some really nice looking carts, and right now we're using display in line block. If I change this to display block and I saved this, let's refresh. We see that we now have blocks. That's great, but we want a little bit more control and perhaps make this grid a little bit more responsive. maybe look a little bit different and just overall cleaner. And when it comes to grids, CSS great is a way to go. So how do we use it? Well, the first thing we need to do is to have a container around these items. So I'm just going to create a new death and give it a class of container. We can name it whatever we want, but containers a nice descriptive class name, and we wrap all the items in this container. Now, the way CSS grid works is very similar to flex box. That is, we give it the property of display grid, and all the Children will now be able to be part off this grid system. So let's see what that looks like. I'm going. Teoh have the container class, and this container class will have display of grid. So remember, with flux box weaken Do flex its similar to that we do display grid and we no longer want to use the display block of the zones because we're gonna have a grid system. So I'm just going to comment this out for now. We've just declared this as a grid system, but we actually need to tell you what to do now. And the most important part of CSS grid is this property grid template columns. And most likely you're gonna be using this in all your CSS grid implementation and what we can use thes grid template columns is to tell our page how Maney columns we want to use in here. If I say something like 300 pixels and 300 pixels, I save and refresh your look at that. I have 300 pixels and then 300 pixels and automatically it because I've declared it this way with two definitions or two values. It assumes that we have to grits to grids off 300 pixels and 300 pixels. So if I make this larger or smaller, it's always going to have 300 pixels. Two columns, if I add Let's say a now. There are 300 pixels here and safe refresh. Look at that. We now have three columns. Very, very nice. Another one that you'll see a lot off is the grid gap. And as you might guess from the name, it tells us how much gap we want between the grids. So if I do 20 pixels here and I refresh. I see that we get 20 pixels of gap now. This looks really good right now, but if I change things around, this isn't really responsive because each column is 300 pixels wide. And as we know, users have different display sizes. So you get these ugly grid's where you have a white space over here. How will we go about solving this? And you might be thinking, What if we just do percentages here? What if we had four columns and we say 25% 25% 25% 25% If I refresh this look at that. I have four columns, but there's still some scrolling involved, although we see that things are a little bit more responsive now. No, you can totally do percentages with great template columns, and it's definitely a lot better than using something like pixels. But you now have to start calculating the fact that you also have a grid gap of 20 picks, souls and, well, CSS great actually gives us a really, really good tool that I recommend you use 100% of the time instead of percentages or pixels or yams or rum's, and that is called a far or a fraction. Now what does the fr syntax me if I do one fr here and I save unless refresh Alright, I get one item fr means we have one fraction in this column, so just fill it all up. If I do one fr again and I refresh, I get two columns. But look at this as I expand and make it smaller. It automatically resize, is because I'm saying I want two columns that are one. If our wanted far now, a better way to explain what this fr value means is if I do something like too far here, what do you think will happen if I save and refresh? This should give you a better idea. All we're saying is, we want three columns and in terms off the proportion or the sizes. I want the 1st 2 columns to be half the size off the third column because in terms of fractions, this is twice as big as the other ones. As I make this larger and larger, it's always going to say and keep those proportions. This is going to be twice as large as the other ones. So when you using CSS grid, this is the best way for you to maintain this grid system and make sure that it's responsive. How cool is that? Just by writing three properties, saying that we want to use the grid system, adding maybe a grid gap and grid template columns with these fr values. We've made a grid system that is quite responsive, but there are a few more properties that we can use in CSS cred, so let's check them out in the next video. 4. CSS Grid 2: Welcome back. Now that we've gotten used to the CSS grid system, let's introduce a few more properties now. Another thing we can do with CSS. Great, because remember, I said it was two dimensional. That is, we can control the rose as well. So far, this is something that Flex box can do as well. We can do something like grid template Rose now and actually define the way they're Rose shall look as well. So let's say I want to do one so far too far. What do you think will happen? Let's see. Going to save and refresh and look at that. The first row has boys one fr. But the second row is twice as big as the 1st 1 as we can see here and because of the way CSS Grid works in the third row because we haven't really added 1/3 column automatically. If there's more items, it's going to just start repeating. So the next row, which is the third row, we'll have one fr so I can define different things here. I can say three year far for the third row and let's say five fr for the last rope. If I refresh and safe here groups. If I save and refresh year, we see that we have our new columns or rose, but that looks ugly. So let's just keep it at one fr, which is the default now. Another thing that we can do and that you'll see a lot off is the repeat function that we can add to something like grid template columns. So instead of doing this over here, I can say repeat brackets. And now I say how many times I want to repeat something. So the first number is how many times? So let's say three times. Repeat one f r. So that's like saying one fr one if are wanted for three times. If I save this and refresh, I get 123 If I do four here and I refresh my guest four. And you can imagine what happens if we do six. We just keep repeating things. Another thing that weaken Dio is the auto property and the auto property just simply means fill in whatever available space we have. So if I do something like Auto one, if r two f r and I refresh your, you'll notice that the first column doesn't really have any spaces outside of the emoji, and auto can also be thought of us the max size of the content. If I make this fox what, they have a content off, too, and I refresh, you'll see that the auto property automatically re sizes to fit the content. And because this entire layout is on a grid system, we'll make sure that the ones below it will have the same size. If I do one fr here and I refresh, you'll see the difference of what we're talking. But it's not automatically scaling this first grid. Instead, it's going to keep the proportions that we have and extend anything below it that doesn't fit. So auto is another really, really good feature to use. But let's fix that. All right, let's tackle a few more properties in the next video 5. CSS Grid 3: another property that is very important when it comes to CSS grid is justify items and justify items. And the default is right now stretch so that if I refresh this, nothing's going to change. But if I do start and refresh it aligns the contents in a grid item along what we call the row access. So the row access is each rope. If I do end and I refresh, we see that they're now towards the end. But a better way to visualize this is to actually use our developer tools. So if I go to view developer developer tools and we select our grid, you see that by clicking on this pointing icon and hovering over it in Google Chrome, we actually see our grid system and if I scroll, you see that it actually stays in place. But you see that we now have our items at the end of our grid system. Our last item, which is to fr right over here, is justified to the end or second column is justified to the end. And we see a bit of a gap here, and that is because remember, we have one f r and then the first item because it's auto and the sizes according to its content doesn't really move. Whether we have and or start here, it's already within the maxed space off the grid system. And just like we have the access around the row, if I change this to ah line items and I save and refresh, this one's hard to see. So let's just do five or 300 pixels and refresh you. We see that a line items is the exact opposite where it's around, a column access and we can use start. And here, too, move those great boxes around. But most of the time we want this filled and we don't want to move items around. So I don't really like using those two properties. So let's fix that 21 fire if I refresh. All right, we have thinks back to normal, going to close this now. The last thing I want to show you inside of this container is my preferred method off actually creating a grid layout in any website that I built and what I usually like to do is something new that we haven't seen before. I usually do repeat and define here how many rows I want. Let's say I want three at one fr, so I want everything to have the same size. But there's a problem here, right? Because right now this is stretching. But as soon as we make it too small or too big, it's just it's not extremely responsive or is not 100% responsive. So instead, I like using Auto Phil and an auto fill just to show you what it does. If I do something like 300 pixels and I refresh and now I change the sizing, you'll see that our grid system or the column system adjusts. Auto fills according to the size of our view port, which is really, really nice. But right now he's just said 300 pixels. So again, it's not super super responsive. So instead, we can use something else called the Men Max and I know the skin look confusing, but if you remember this pattern, this is the most common pattern I would say to use when it comes to CSS script. So once you get used to this, you can just copy and paste it and use it everywhere and here. What we want to do is say well, the minimum that we want the size of our columns to be, Let's say I want the minimum to be 200 pixels. So that's the smallest that's going to get the max, though. How big do we want these to get? And this is a common thing. What do we want as the biggest will just want f R. Because, as real see by doing this will automatically adjust to the size of the view board. Let me just save and show you what I mean by refresh. Here I see 1/2 3 year auto adjusts auto adjusts based on our size. But you also see that the container itself is also adjusting in size so that if I go smaller and smaller and smaller, look at that. As soon as we hit the 200 pixel minimum, it adjusts. And because we said one f r as the max as soon as the View port is really, really small and goes below 200 pixels, it's going to just take up one fraction, and in our case it will be the entire screen. So, using this syntax of repeat auto fill min Max, giving it a minimum were able to make this completely responsive. And, as you can see here, it's pretty powerful, right? In just a few lines of code, we've made this grid system that is completely responsive. All right, up to this point, we've just focused on the container. But what about the individual items? What if we want something that's maybe bigger than the other item and we don't want them all symmetrical like this? What would we do? Let's find out in the next video. 6. CSS Grid 4: Welcome back. Let's talk about individual items now when it comes to CSS crit, because up until now we've just used this container and performed operations or changed views to all the items. But what if we wanted a bit of a funky grid system that has different sizes? In that case, we can just select individual items within this container. If we go back to our HTML page, we see that we have these zones, but each zone has different color. So let's use one of these colors, for example, green, which we have to off to have some special CSS great properties. So let's have a green class, and I'm just going to do it up here instead of the bottom just too, so we can keep all the CSS great things at the top. Now for individual items, I can say something like Grid column and say what we wanted to do in terms of the column grid system, and the way this works is we can give it where it's just start and where it should end. What does that mean? Well, if I do grid column start and I say one and then have grid call him and and I give it to and I refresh the page. Nothing changes. What if I dio grid column three and I refresh? Whoa. We're just happened here. In order for us to understand what these numbers mean, let's open up the developer tools. Once again, I'm going to select the items. And as we'll see over here, we see that we have a grid zone and this Fox is now taking up to grid spaces and the way CSS grid works, it has a numbering system where the first line over here is one. The second line over here is to, and then this is three. Let's just make this a little bit bigger to show you that's better. We now have three grid systems or three grid items. We have one here when the 1st 1 begins to where the 2nd 1 begins, and then three where the 3rd 1 begins. So what we're saying here is that when it comes to columns started one which is right over here and then end at three so that if I do four here and I refresh, you see that it now covers the entire length. But as soon as we make it a little bit bigger. Well, it only is going to cover the 123 up to four. And if we make it a little bit smaller, you see that because we said 1 to 4, it doesn't actually make it as responsibility was before. And it actually extends to make sure that it feels in 1 to 4. And there's a shorthand way of doing this instead of saying Grid column start in Great column and we can just say Great column and then give it the start number and then slash the end number so that if I refresh you see that it's the same thing. Let's make this a little bit bigger and let's just do three here just to keep it small, all right? I'm gonna close this and we see that our grid items now have Well, this looks pretty good. Actually, we have the green classes that span over more grids. Now, a trick here is that sometimes we just simply don't know what the user is going to see. And we might want this to spend the entire length without having, you know, the rabbit come in and then the frog and the line coming and we can actually do at the end here something like minus one, which means all the way till the end. If I refresh here, there you go and make this larger and smaller. We see that we're saying started one and then keep going all the way until the end in CSS grid minus one signifies the end off the view port. So that now we see that we have a nice, responsive grid again that just adjusts according to our view port. Very, very cool. Now, sometimes we don't really know how many grids we're gonna have on our page. And we also might not necessarily wanted to span it all across from beginning to end. So useful syntax here is to do something like span to which says span across two grids. If I refresh here, you see that green is spanning across two grids. If I do three, it's going to span across three grids. And as you can imagine, the default is span one spanning across one. But the interesting thing about this is, if I do, let's say span to, and I refresh as this gets smaller you see that it's always going to span across to make sure that it covers whatever the two grids are, which is once again very useful. Finally, we can also do the same thing with Gross. If we do grid Paros for grid row, I can say, Well, we wanted to span to start at, Let's say one and and at three by refresh year. Look at that. Whoa, What just happened here? Well, let's take a look. We started one and ended three. And because green is also this unicorn over here, it automatically moved it all the way up because we wanted to start at one as well. And remember, our grid system now is Roe. And if I open the developer tools and select the grid one starts here, then too, then three right here where it ends. So you have to be careful with the positioning here that this is going to move whatever it needs to all the way up to one. But we're able to move things around and adjust the Rosa's well, very, very cool. Our grid system is starting to look really, really nice. Let's do have been more in the next video 7. CSS Grid 5: Now, the thing I want to show you with the individual item in a grid is that we can do something like justify itself. Remember up here we did justify items and a line items. But when it comes to individual items, we have to use self. And as you can imagine, if I do self start and I refresh here we go to the start of the column. If I do the line, it's going to go to the start off the rope. If we do end and refresh again, we see that the same thing is happening. I'm going to leave this file for you as well, so you can play around with it. I encourage you to try to create different types of grids and looks that you want. As you can see, it's pretty powerful but also very, very simple and allows us to create responsive grid systems very, very easily. Now there's actually a Cici that you can use to summarize everything that I've taught you up until now that I'll link to in this video. It's called the well the grid Cici, and it shows exactly why you need to do for the container we've learned about grid gap grid templates, a line items and also what to do with the Children, such as Grid Column, justify self a line self and has all these little snippets that you can just click on and copy. So I recommend you play around with some of these properties on your own, because in the next part we're gonna use CSS grid to build a complete website layout. I'll see on that one, but I 8. Exercise CSS Layout: Welcome back. Now, up to this point, we learned about HTML CSS templates and learned how to do layout with things like Flex Box and CSS crit. And probably the most important thing that you need to know from these sections is how to create a website, right? How to lay out a website, but also not spend a lot of time on simple tasks. Because when we get to the JavaScript section, which is the Morrell exciting actual logic programming part of the course, that's when you truly become a developer. Up until now, with what we've learned is the foundation that that allows us to build Web apps and applications. But you're never going to actually get interviewed about the specific topics. I mean, yes, in small cases you might be. If you're a designer, you might get asked questions about CSS and HTML. But most of the time, the questions you'll be asked is on things like JavaScript, logic and more complex topics that we're gonna cover later on in the course. But the one thing that I really want to take away from this section is being able to build websites fast or a least. Get to the part where you need to start writing JavaScript because that's where your real job begins. So I have a task for you using all the skills that you've learned up until now. I want you to create a layout of a website, something that you're going to do over and over throughout your career. And I've created a small starter file here where we have these little button like containers or dips. But as the name suggests, I want you to align these in a responsive way to something that looks like this. I know it's not the prettiest thing right now to look at, and we're only focusing on layout. But what I want you to do is to make the header green button over here be an actual header . We want the cover to be, well, the actual cover of R F site and then maybe have a project grid where we list all of our projects like we have over here and then obviously a footer of the bottom. And I've selected this layout because it's a very common pattern that you'll see in a lot of websites. So you're gonna be doing this a lot. So let's figure out the best way to go about doing this, so that when I make this smaller, it's all responsive. So your task is to use whatever you've learned up until now to create this using the starter files. And don't worry, I'll have a solution video for you after this. And we're also going to how easy it is once you have a layout, which is the recommended way to build a website, starting with the layout first and then once you have the layout fixed. Converting this into something usable like this because styling becomes really, really easy once you have the layout in place. Now, the one hint that I want to give here is to use both flex box and CSS grid to accomplish your goal. Although anything you can do in flex box, you can do with grid and vice versa. Or at least most things using the tools and combination Flex box and CSKA screwed together is really, really powerful to allow you to build a layout like this. So good luck. I know it's going to be tough, but I'll see you in the solution video. But by 9. Solution 1: welcome back. How was the exercise? Hopefully wasn't too difficult. But if it was and you weren't able to finish it, don't worry. We're gonna go over this steps. And luckily for you, once we do this, you'll have a template that you can use for all your websites. Because what will build will be something responsive that you can customize to your own liking. But Ulisse know the best practices after this video off how to do these common patterns that we see in a lot of websites. So let's get started. The first thing I want to do to convert this page is, well, a few things. Let's go to the HTML page first and let's start off with the navigation. That is the header over here. A lot of websites have some sort of a header of the top. The first thing I want to do is to actually use semantic html and be more descriptive in what we're doing. So in our case, instead of def, I'm going to use the knave html element and there's something that we've already talked about. And instead of just having header here, I'm going to have a UL class or you l element that will have a class name off main now and in here we can just have ally elements that will have an anchor tag, and because we don't really have, we won't have any links for this example. We can obviously do whatever new html page that we want a reference. But for now, we can just leave it blank. So the 1st 1 will let just say be about and we can copy and paste this for the other items as well. We'll have. Let's just say products we'll say our team and then finally we'll have contacts. If I save this and refresh, there's our navigation doesn't look very good, does it? In real life. Most of the time we see the navigation at the top, and sometimes we also see that there's navigation links at the top and one all the way to the right. That's pushed to the right edge, such as contacts. So let's try and do that where we have about products and our team of the top over here and then contacts all the way to the right at the very edge. So for that we can create a new class at the very last item that we want toe. Let's say push and we'll add the CSS classes now if I go to our let's say this first. If I go to style CSS, we can create our navigation here. Now we have the main naff class which we've created, and in here we wanna use flex box. So I'm going to say display flex to activate flex box. Sounds cool when I say activate flux box. I want to make sure I remove these little dots in front of the names so I can just say list style none, which will remove these little pointers. And let's say that we want the font sighs to be, Let's say, 0.7 p. M. If I save and refresh here. All right, things are a little bit better, but still not perfect. One is we want to remove any margins. So I'm going to say margin zero If I refresh All right, we've removed some margins, but still not pretty. We want toe, perhaps at some spaces. In between these things, I'm going Teoh just have the l I class, which is our navigation items, and I'll just say that we want the padding to be 20 pixels. I refresh. That's a lot better. Okay? And just to clean things up, let's say that our anchor tax we also want them to be well to have a collar off. Let's just use 55 F six. If I refresh, it's nice and white ish. That looks good and we don't want those underlines. So I'm going to say text decoration, not refresh all good now, because I want to start structuring this as an actual Web page. I'm going to go to our zone class and just remove our padding and margin because we don't really need it. Refresh. Here. Things there started going to start looking ugly. But at least we've moved all this white space and then finally, our display we're no longer going to use in line block. We want to start using our flex box or CSS grid. In our case, our main knave is going to have flex display so we don't need are in line block anymore, going to save and refresh. And that's a lot better because dibs are automatically blocked, are displaced for these bottom ones are now going to just be blocks, but our top one are naff. Bar has flex now, which is great, but you'll notice. Here we have a bit of a white gap, and this is very common when you're working with CSS. Sometimes browsers by default have some sort of CSS attached to them. In this case, in Google, chrome are body. Element 40 has some pre defined CSS classes that are pre built by crew, so we can actually remove those and make sure that our margins are zero by saying Margin auto zero. And this is something I will make sure I spell that right. This is something that you'll see a lot of, and you'll do a lot of when he comes to just making sure that the styles or it's at least the margins are correct when you start off. So if I refresh year, look that margins are on and everything is filled on the page, which is great. The last thing I want to do is to move contacts all the way up to the right and remember the push class that we added. Well, that's going to be super easy to do. All we need to do is to add a push CSS class that says Margin left to be auto. And with this auto, if I refresh contacts, goes all the way to the right. If I inspect this element, so I just right click and click on Inspect and let's make this a little bit bigger so we can see if I hover over Ally Push here we see that each ally element has its own box. But because we did margin left auto our ally element, it's going to get automatically push because it has this automatic margin that it creates to the variant. If I did margin right, for example, and I refresh here, our margin would now actually be all the way to the right to fill up the entire with off the View port. But let's go back to left. Oops, let's go back to left safe and refresh here. The need part about this is that with this margin left auto, I can now resize our page and you'll see that contact is always going to be to our right. This is something that you'll see in a lot of websites, and we did that fairly fast. Not too bad really. The last thing that I wanna fix year is as well notice as we get closer and closer. It kind of overlaps our team. And well, now we have this weird little contacts that overflows. How can we fix this? Let's tackle that in the next video. 10. Solution 2: Welcome back in the last video, we had this problem of the view getting a little bit ugly with our navigation as we became smaller and smaller with our view port. How can we fix this? And here I'm gonna show you a topic that actually cover in my next course. But just because it might be useful for this case, I'm going to introduce you to something called media queries and media queries. Allow us to create responsive websites and tell our webpages what to do when the size of our screen gets small or big and a link to this website over here. But essentially what it allows us to do with media queries. We can have devices, tablets, laptops, wearables that have different screen sizes and tell it how to display our webpage based on those sizes. For example, here it shows us what our view ports will be for iPhone four and iPhone for us. And using this syntax off at media Onley screen and giving it some minimum device with and max device with weaken, tell it how to display our page or have CSS properties specific to just this view size that is minimum view. Size is going to be 320 pixel and Max is 480 pixels. And as you can imagine, there's a lot of these based on different devices and view ports. Now things like CSS Grid and Flex Box actually resolve a lot of this. But I want to demonstrate just one use case with our little example that is this contacts getting smushed. So let's create our own media query for our navigation. In order to do that, all we need to do is say at media we say Onley screen. And this is saying, What do we want our media query for? And you can do things like print here, for example, when you're printing something, but 99% of the time, you're just going to have screen. And here we're going to say, and I will say that Max with is going to be 600 pixels. That is, use this CSS properties that were about to define right here on Lee when Max, with its 600 pixel, that is ah, soon as this is less than 600 pixel in width. Apply these properties here so I'll say main naff we'll have a font size. We can do different things here, but let's just say a smaller font size and maybe we'll do padding on zero just so they're closer together. Fight, save this and refresh. Look at that. Everything fits in because our font sizes smaller and we've removed any extra padding that we may have. But notice here as I make things bigger, you see that as soon as I pass 600 pixels, we restore our defaults with larger font size. Look at that. So, using media queries, we just made our knave bar more responsive, nice and easy. And this is a common pattern that I recommend it with your navigation that is having our knave element with a Nhan order list and an ally list arm a knave, which will be a flex box. And we'll have a push class that uses this margin left auto to push whatever we want to are now to the right side, usually something like contacts or log in to have it all the way to the right. So hopefully this wasn't too bad. Like I said, you don't need to memorize this. You can even copy the code that I'll leave for you at the end of these videos. Once you get used to this in tax, you now have a solid foundation to build a navigation. But we have three more things to go, so let's get to that in the next video. 11. Solution 3 Cover: Welcome back. Now that we have our navigation, let's focus on our cover. If we go back to our HTML page, we have our cover live here, and we can just keep the diff here as it is, because we won't really know what the cover will be just yet. But I want to add a new CSS class called Container here, and this container is going to define some properties for us that will make this truly a cover image, just like we have in our solution webpage over here. And let's add those exclamation marks because we're excited or not for contacts for the cover, Let's add the exclamation marks over here Nice. All right, we'll go to our style dot CSS, and we'll add on our cover style. Now this is actually going to be fairly easy. We wanna have, let's say, display of flex. Or first of all, let's make sure that we have the container class and we'll have a display off flex. And I'm not using great here because, well, we're not gonna have any grid items. We won't have that many items in a cover. It's usually a button or a background image or some text and display. Flex just makes things nice and simple. And usually we want things in the cover to be centered. That is, we want this cover to be right in the center, and as we make things smaller, it's always going to be in the center. That's something that we see Ah, lot off in a lot of websites. And to do that, especially with flex boxes really easy. All we need to say is to align items center and to justify content center just like that, if I safe here and refresh, all right, this is centered. And as I move things perfect, everything is absolutely center. But obviously cover image should be a little bit larger rate. What do we do here? And I want to introduce to you something that you haven't seen before. But don't get scared. It's not that hard. I'm going to have a height, and just to start us off, I'm gonna show you. Usually you might do something like 500 pixels, and if I refresh awesome, I have a nice little height. But there's a problem here rate because I'm saying 500 pixel here. If the view port. If I move things around, if I lift things up, you'll see that, all right. The view is not responsive when I go up, because it's always find found your pixels, and this might not be the worst idea ever. Maybe you want your website to be like that, But if you do want this to be responsive in terms of going up and down as well, what we can do is use something called the H. That is the view port height. And I like using Vieux Port Height, a new unit that we haven't seen before for making things responsive. When it comes to height and what this states, it's going to look at the view port that is the view off the webpage and make sure that there's always a percentage of that view port dedicated to this container. So if I do 50 VH and if I refresh here, you'll see that my cover will be 50% off our view port. If I do Ah 100 and I refresh you see that the cover fills up the entire Vieux port. The cool part is, if I go up and down, this adjusts exactly according to the view port height that is the window of the browser. Very cool, right, and everything is still centered. So I like using the VH for something like a container. So let's keep it at 50. And if I refresh, look at that nice and responsive. How cool is that? And that's it for the cover. Not that hard, Right? Let's move on to the project grid in the next video, but by 12. Solution 4 Project Grid: Welcome back. Let's move on to the project grid. Something that we see a lot of websites, Whether it's an image gallery or a list of your portfolio projects, grid systems are very important and very common. And as we know, we learned the perfect way to create a grid CSS grid. Right. So let's see how this would look like and my ideal implementation. First, I want to go to the HTML page, and now let's make this a little bit bigger in our project grid. Def. I know I wanna use CSS grid, so I'm gonna create a wrapper around this project grid. So I'm going to have a diff and this did will have a class of some properties that will add CSS to and just to keep things blew the way they are. I'm going to give it that zone blue class that we have below, but we're gonna make it a CSS grid. So I'm going to just say grid rapper and we can just remove the project grid and in here add a couple of sample little projects. If you remember in our solution file, I left for you a couple of images that you can just add like this so that we have some sort of a project grid. I'm not gonna bore you with me typing all that out because that's something that we've done before. Just gonna copy and paste a diff year with box zone boxes, a class that we haven't added yet. But we're going to create these air going to be the grid items we have zone which again? Something that we've already defined before And our images, That's it. So if I save this and refresh, let's refresh again. All right? This is absolutely hideous. Does not look pretty at all, But at least we have the images provided, but no employer is gonna be impressed if they see this, right? So let's actually make this into a grid system. If we go back to the style tab, let's add our grid here. And obviously, as the name suggests, when it comes to grids, CSS grids is the way to go. And there's many ways that we can lay things out, and it's something that we already talked about in our CSS great videos. So we're gonna keep things simple. First is we want to actually say Hey, we're gonna use CSS crit. So we're gonna use the grid rapper class that we created, which was this DIV that wraps all our projects and we'll say, display grid. I will say that we want the grid gap to be 20 pixels and then finally, the our favorite property that is grid template columns. And so everything is responsive will say repeat Auto Phil and will say that the men Max will be, let's say, 350 pixels. So that is the minimum and the maximum will be one f r. So that it fills the entire page when it's really, really small, so that if I save this and refresh all right, that still looks pretty hideous, doesn't it? And that's because our images are well, they're pretty massive, and you see that they're also not all the same size or they have different patty. So the way to just fix that quickly and something that you'll see a lot with images is to give them a with of 100% in our case that we can just say box because remember, each diff has a box class that we haven't really said anything about and then an image. So using our CSS select your knowledge. I could just say all Children of box that our images I want the with to be 100% by saving refresh. Right, that's perfect. Now you see that each image has, ah 100%. With that is it fills in the entire piece of the car. And if I make this bigger and smaller, you see that it adjust Very, very cool, but still pretty ugly. But we have the CSS great working. As you can see, as soon as it's less than 350 pixels, it changes the grid system. Right? So next we wanna work on the individual cards, that is, we wanna have our box. And here we don't really need to add any extra grid properties. I mean, we could if we want, but I like the way things look. I like everything being symmetrical. I want to all the items in the grid to be the same. So in here we can just add are simple CSS properties like let's a background color and we'll just give it in a color of, let's say, 444 so that we have this dark color, and we definitely don't want these images to be this big. So we'll give it a padding off 130 pixels and maybe some margin as well of 20 pixels. By save and refresh, that's a lot better. And remember, because we said that the width of the image is 100%. It's going to try and fill the entire box. But because the box now has padding of 1 30 both of the top, the bottom and to the left and rate the with is now just this part. So that looks a lot better. And if we look over here, we now have a completely responsive grid system. How cool is that? And how simple was that using CSS crit? Luckily for us, the last thing we need to do is this footer. And because the footer is at the very bottom, it just going to stay at the very bottom. The only thing that we might want to do is to make sure that the text is centered. So in our case, we can just say footer And as you guessed, yes, it's text align our best friend center. If I refresh. Oh, and make sure that I spelled properly. If I save and refresh well, that's not going to work because we should change our footer, which is deaf to more of a semantic HTML tack off foot. Now, if I save and refresh, this is in the center, it looks great. Let's say zero to mastery because our layout is looking really nice. And there you have it that wasn't that bad, was it? I mean, sure, the first time around. That's kind of difficult, but the principles that I've showed you here can be transferred to Ah, lot of websites. I mean, this looks pretty ugly. You're not gonna want to visit a website that looks like this, but when it comes to lay out, everything is responsive and nice rate, and you can imagine yourself expanding on this and building a beautiful website. I wanted to show you this layout system because this is what I would use If I was building a website. I would start off with the HTML and create the layup that is responsive because after this , all I really need to do is add taxed images and colors, maybe some CSS styles to make it pretty so that you can turn something like this. That doesn't look good. But has the layout implemented into something like this, which, I mean doesn't look that great yet. But in the next video, I want to show you how, because we have the layout set up, we can convert our base layout project and do something like this in less than five minutes . So let's do that in the next video. 13. Solution 5: Welcome back. Let's take just five minutes to quickly make this website a little bit prettier just to show you how easy it is to customize a website. Once you have the layout done, a recommend a step that I've mentioned multiple times. When you build a website, figure out your layout, make it responsive, and once that's done, the rest is kind of fun. You just had a nice CSS property, some images to just prettify it. So in our case, I want to show you a website called Well, no shed dot x y Z, and it's going to really help you out because, well, it gives you free design. Resource is to use, and they have fonts, illustrations, mock ups, you y kits, everything for free that you can use on your website. In our case, we can use something like on draw over here that gives us a ton of M I T. Illustrated or licensed illustrations. So if I go to browse now, we see that we have a ton of images that we can use. So in my case, I've downloaded one of these images and we're gonna use it as our cover photo So let's go back to our project and in my cover photo over here, instead of just having cover with exclamation marks, I'll just have an image tag that will have a class of cover, a CSS property that we're gonna or CSS class that will use. And it's going to link to the image that I just downloaded in my images folder again. This you already be in your starter falls that I gave to you. So if you look in that folder, you'll see that we have on Image Folder, and from there we're gonna grab the on draw dot Jay Peak. If I save this and refresh but would make sure I finish that huff with an ending bracket and I refresh, Oh, man, this is a PNG. Let's refresh. That's a lot better, but ho boy, that's a big image. We can easily fix this by going to our style, going to our cover and using the cover class that we've added to the image to just say that we want the with to be what we can say 100% that. But that might be too big. I don't like it that big. Let's do 30 p m. If I refresh or are you am. If I refresh, that's better. But we want to get rid of this red background. Now. Let's have everything in white just going to go up to our zone, and we can just actually remove the red from here. If I refresh much better, that looks a lot better. All right. So as we see the image sizes and growing, which is good, but it looks nice and pretty as the cover photo. Another thing that I noticed is that when I scroll down, I want the header tab to be sticky. That is, to scroll with me, and that's another common pattern that we'll see. That's fairly easy to do. We can just give the now element a sticky class, and this sticky class can say that they'll have position of fixed and a top off zero that is started top. And if I refresh this, it will actually, because of the position fixed. Although it works now, it messed up our with, so we want to make sure that the with is always 100%. So you would do is at the end, say with 100%. Again, these three properties together is a common pattern that you'll see to make to make navigation sticky so that now when I scroll down look of that our navigation is nice and sticky. Let's make the green navigation bar blue. It's all turned this into blue. All right, that looks a lot better. What else? We can change our font. Let's say to something prettier Font family. Let's just say Ariel, if I refresh all right, that looks a little bit cleaner. What else can we do here? Well, just to finish it off, maybe we want to do something different when we hover over the zone. Let's say that with the boxes when we hover over them, I could just copy and paste this. Let's make them tilt a little bit. So I'll say box. And is that of Shadow Orbach. Shadow will say transform, and we'll just say that we want our rotate say negative seven degrees by save and refresh. Look at that. We have some grid systems that when we hover over them, they rotate seven degrees. I mean, I wanted to demonstrate to you how fast we can convert a website to start looking good. By no means is this perfect. But by just changing a few properties. We've now gone from this to our final view and you can imagine how, within a day off, improving this website, making this a little bit prettier. Maybe you really like this Websites cards that they have here. So you can just inspect the element and perhaps just copy there CSS styles. But there's a lot of flexibility here. The important point, though, is the fact that you start with your layout using flex box and CSS grid. And then it's really up to you and your creativity to design beautiful websites. I hope that was fun. I definitely had a lot of fun playing with CSS great and Flex box, and I'll see you in the next video. But by 14. Where to go from here?: