Learn CSS3 Flexbox & Grid System Layouts and create Responsive Websites | Norbert Menyhart | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Learn CSS3 Flexbox & Grid System Layouts and create Responsive Websites

teacher avatar Norbert Menyhart

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

47 Lessons (4h 15m)
    • 1. 01 FlexBox Intro

      1:00
    • 2. 02 FlexBox What is Flexbox

      1:42
    • 3. 03 FlexBox Starter Files and Basic settup

      13:29
    • 4. 04 FlexBox Display Flex and Flex direction

      3:00
    • 5. 05 FlexBox Flex Wrap

      1:43
    • 6. 06 FlexBox Justify Content

      5:27
    • 7. 07 FlexBox Align Items

      1:56
    • 8. 08 FlexBox Align Content

      3:26
    • 9. 09 FlexBox Flex Order

      2:26
    • 10. 10 FlexBox Flex Grow & Flex Shrink

      3:43
    • 11. 11 FlexBox Align self

      1:09
    • 12. 12 Flexbox Website Intro

      2:57
    • 13. 13 Flexbox Website Basic Setup and Starter files

      6:27
    • 14. 14 Flexbox Website Navigation and Header Section

      23:35
    • 15. 15 Flexbox Website About Section

      11:44
    • 16. 16 Flexbox Website Service Section

      13:01
    • 17. 17 Flexbox Website Contact Section

      8:28
    • 18. 18 Flexbox Website Footer

      3:05
    • 19. 19 Flexbox Website Tablet and Mobile Responsiveness

      7:16
    • 20. Grid 01 Intro

      1:19
    • 21. Grid 03 CSS Grid VS CSS Flexbox

      1:33
    • 22. Grid 04 Use case of CSS Grid Layout

      1:38
    • 23. Grid 04 Use case of CSS Grid Layout true

      6:06
    • 24. Grid 05 FireFox Vs Google Chrome

      4:04
    • 25. Grid 06 Display Grid Grid Template Column & Row

      18:36
    • 26. Grid 07 Grid Template Area

      6:21
    • 27. Grid 08 Grid Template

      3:41
    • 28. Grid 09 Grid Gap

      2:58
    • 29. Grid 10 Justify Items

      3:21
    • 30. Grid 11 Aling Items

      2:31
    • 31. Grid 12 Justify Content

      3:57
    • 32. Grid 13 Aling Content

      3:55
    • 33. Grid 14 Grid Auto Columns & Rows

      4:46
    • 34. Grid 15 Grid Auto Flow

      4:23
    • 35. Grid 16 Grid Column & Grid Row Start & End

      3:34
    • 36. Grid 17 ShortHand Grid Column & Grid Row

      2:07
    • 37. Grid 18 Justify Self

      2:38
    • 38. Grid 19 Aling Self

      2:27
    • 39. Grid 20 Place Self

      3:04
    • 40. Grid Website Intro 01

      2:13
    • 41. Grid Website Basic Setup and Starter files

      4:06
    • 42. Grid Website Header Logo and Navigation

      9:27
    • 43. Grid Website Main Section

      21:26
    • 44. Grid Website Footer

      10:34
    • 45. Grid Website Responsive

      4:36
    • 46. 20 Conclusion When NOT to use Flexbox

      1:57
    • 47. 21 Conclusion When to use Flexbox

      2:36
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

65

Students

--

Projects

About This Class

After this course, you'll be able to use Flexbox & Grid to...

  • Create responsive design
  • vertically align any element

  • create modern designs

  • take up remaining space

  • add spacing between elements

  • implement complete site layouts

  • and much more!

 you'll also learn to use each and every Flexbox property:

Styling flex containers:

  1. flex-direction

  2. justify-content

  3. align-items

  4. flex-wrap

  5. align-content

Then individual flex items:

  1. order

  2. align-self

  3. flex-grow

  4. flex-shrink

  5. flex-basis

  6. flex

Have fun and stay cool!

Meet Your Teacher

Hello, I'm Norbert.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. 01 FlexBox Intro: Welcome to flexbox, or also known as the flexible model. In the next couple of minutes, you will learn everything that you need to know about the flexbox technology. The main reason to learn flexbox is that it has become a must-have skill in web development and design in the last couple of years, together with CSS grid, the makeup for some of the most powerful features of modern web design and web development. And of course there also the foundations of Mobile First design. After finishing this course, you will have mastered all of the properties of the parent container and its children. The properties of the parent container all s Following. Display, flex, flex direction, flex rep, justify content, the line items and align content. And then those of the children are flex folder, flex grow, and flex shrink. And of course align itself. Ok, so let's get into it. 2. 02 FlexBox What is Flexbox: Okay, yeah, so what is flexbox? And first of all, it is a CSS free layout mode. Before flexbox layout modes, there were four other layouts that we would use. The block layout for sections and webpages, then in-line for text. Then table for, well, two-dimensional table data. Don't use tables anymore. We will rather use a grid system for this. And of course, positioning for explicit positioning of elements. The flexible box layout module makes it easy to design flexible responsive layout structures without using float or positioning. The flexors properties are supported in all modern web browsers like Firefox, Edge, Safari, Oprah, and of course, the most popular Google Chrome. Therefore, flexbox is currently a well established technology. Now flexbox is based on something called the box model. In our case, flexbox has two components. The main component of the flexbox layout are one, the container itself, and then the items within the container, which can be one or well, you wouldn't apply to one. But from one to infinite. The items are aligned along something called the main axis and the cross axis, for example. So if you're coming from something else, you could call the y and x axis. But here they are called main and cross accessible each time you will hear me reference mean and cross axis. Just know this our domain and a cross axis. Ok, so that's enough for the slides. Let's get into flexbox. 3. 03 FlexBox Starter Files and Basic settup: Before we get started with flexbox, let's do just a bit of basic maintainance. First of all, I created a folder on my desktop called flexbox. And this is where everything will happen. I will create two files. One will be a index.html and a style.css. Now for the text editor, I'm using Visual Studio Code. Obviously you can use whatever code editor or text editor you wish. For example, brackets or atom or whatever you wish. It does not matter for this course. But I will use Visual Studio Code, or also known as ds code because for me is the best text editor slash code editor out there. Also, I have a separate complete course on visual silicone. So if you want to get into it, try it out. Ok, so let's get into our HTML. And a star with Ebola prayed I am going to use Emmett here. And then we're going to call this for the title flexbox. Now down here, we're also going to use Emmet. I'm going to create a one which will have a title of flexbox. And then after this, we're going to create a section tag with an ID of ID. And we'll replace that later on because it will have two of this. And this will include Then h2, which will have a text within it of properties of the plant and actually properties of the dot, dot, dot because I'm going to replace this flex container. And after this H2, I'm going to have a div. So just a general div, but this will have a class of flexbox container. Okay? And this main container will contain our items. So let's say that this will contain a, another class of flex box on this core item. And I need this six times. So I'm going to do a pope, a open parenthesis here and actually close. And here I'm going to open our parenthesis angling to multiply this times six degrees C. What will result from this? I'm going to do this later on, and I think that's basically it. So let me multiply after ethanol age to know including the sections. So here needed open parenthesis and close parenthesis and Enter multiply this as two. So let's hit Enter and voila, there's our entire container. Now as I said, I'm going to press this ID. The first song with parent. And the second one will be children. Okay, and right here in the H2S for the titles, I am going to have parents actually. For this to be a parent. And this will be children know, Quebec. And back again, Control Z and control C, control V. There we go. Now right in here, you want to create I term, term. And I'm going to go pull down and go ones here, here, here, here, here, here, here, here, here, here, and here. Let's type in term and dash. And now we're going to type in 123456, of course. And here is the same. So 12345656, then it MS. Clicked, Kayla's hit save. And up here, we also need to include all styles. So before I'll title, we're going to create a link tag. And within here we're going to include our styles.css keys F is linked up. Now next up, up, up, up, up, up. Let me do a bit of general styling. So first of all, I'm going to do a star. So this is a basically a general reset. And when to reset all my margins to 0, actually need to open this up. So you can also see what has happened is so let's open this up utilized server. And that's just an extension of Visual Studio code. So we're going to have it here. Now I'm just going to drop it on the right side of Visual Studio code. So make you for soil smaller. I'm going to drag you here k. So let's resize you. And let me also resize you. Oh, let me make this large. Yes. So I can document here. All right. And I think that we need to zoom this in a bit. Well, let me first of all finish up the styling. So margin 0, what will this do? If I hit save? This, reset all my margins to 0 and also need padding 0. So we won't have any unnecessary padding. Ok, so this is saved and saved up. Now next thing, I'm going to use a box-sizing border-box. And also for any type of list-style, you're going to choose none. And also list and also takes declaration and those who choose none. So don't want anytime the creation and the list styles. Now for the body tag, study the body tag, and let's do a font family of Lucian, sans serif. See things set up here. Let's do just a quick check of background color. Red. So if this is working. Okay, so something is not working here. There's my mistake. Key. Yep. Let's go back. Next up, I'm going to change the font size to 16 pixels. And the max width of my page should be 950 pixels. So I want this to have only 950 pixels. And also I'm going to choose the margins to be auto. And this will push my content while in the center of the page case. So we could zoom this in a bit. So let me zoom this in. So we're going to hit Control and plus a few times 150. Now within my body I'm going to select my H1. And I'm just gonna tell you right from the start URL and going to be really specific form where, what is or even if I will select a class that is specifically only one time in the entire page, I am still going to specify that hey, that the class is actually within AID tag or somewhere else. Okay, I want to be really specific for, for each, for everyone to have a perfect understanding of what I'm doing. Ok, so let's do here. It takes a line to the centers, less pushed texts. The one in the center of the page. Okay, we have that one done. Let's change the font size to 80 pixels. The font-weight, bolder. And I'm going to give this a bit of a margin. So from the top and bottom to ram and from the left and right 0. So if you only specifying two values, the first two will be top and bottom and a second, uh, so the first value will be four, top and bottom, and the second will be for left and right. If I would do for values, that will be top, left, top, right, and bottom. Exactly like a clock. Okay, next up, I'm going to give it a background color. So let's say b, c, And go back on color. And I'm going to go with a hexadecimal number hash free, free, free. Okay? Unless we're going to change the color of the text to orange. Now within our body, I'm going to select all of my h twos. But, and I'm going to change the margins to one RAM. So you've done a bit of a margin, top, bottom, top, bottom, left and right, the one RAM. And also I'm going to align the text. So put attacks to the center of the page. Ok, so because these are also titles, now couple of things I wanted to do for our parent parent. So this one and ID of children. So first of all, start with the parent and we need the hash for the ID selector. And now within the, within the idea of parent, I'm going to select a Flex Box container. And also the flux and from this the Flex Box item, get us hit save and actually let me check if this is correct. So flexbox, I.. yep. There we go. So what do I want to do with this? I want to increase the font size to 24 pixels. You have to give them more Jan, one RAM. Let me close this one up here. So font-size for two pixels and margin. One ran all of them all around. Also padding one RAM all around. And of course, let's change the background color. So I have a bit of a difference here to background color, to orange. Okay, let's also give them a tech shadow of one pixel, one pixel, and a hexadecimal number of free hash, free, free, free. And there we go. So we have this one done and this one done. Okay, now next up I'm going to also style all contain itself a bit. So let's copy this parent id m flexbox container. And within here, I'm going to give the background color of hexadecimal free, free, free. Bach shadow of 0 pixel 0 piece of ten pixels, two pixels for the spread as it save. And actually drag this over to the left a bit here. So there is a container. And also we have this bach shadow around it. Okay, so the last thing I'm going to do is give it a height of 300 pixels for the container itself. Unless it's safe. So it is limited enough to fill up pixels. Within here. I'm going to then techno common display it, change the display. And I also want to style or other container down here. So I'm going to copy apparent. Change the ID to children. And let's hit Save. And also copy the items within the parent element. I'm going to do the same thing for older children. This was copy the ID and replace it in here. And this looks awful, but don't worry, as soon as we're going to go into our next video, we'll change everything. So let me just copy this comment of this plane, basically in here. And there we go. That's it. Okay, so that's it for our basic styling. And yet seen that X1. 4. 04 FlexBox Display Flex and Flex direction: Okay, so let's learn about how to display flex and the flux direction. Now displaying something S flex defines the flex container inline or block depending on the given value. It enables flex contexts for its direct children. So let's try this out. Now we left off with our basic styling here and also typed in here comment of displaying. So let's type in display flex for both the children container and also the parent container. Let's hit save. And a couple of things. You notice that the items just changed its size and also their direction. Before we had this done, let me also comment out the display flex, the parent level. Does it save it? You'll see this items are in a column. But as I soon as displayed them as flex or display, so the container as flux, now the items are aligned in a row, sorry, 123456. So what I want to say here is that actually, and I am going to remain with in our pen container. And here we're just going to type in a comment of flex direction. And now we're going to start with the properties of the parent and the first part, but the ground will be the direction of the flux. Now by default, flex direction is in a row. So if I would type in flex direction and choose rho, nothing will change because they're set by default flex plexus in a roll direction, but being flexed in a row, we have a second we have a second command for flex direction called row reverse. And this is just reverse the direction of the flux. So this can see items are now from six to one. But it actually didn't change the items placement only the direction in which the items are flexing. Ok, so make this a bit smaller, just smaller. Now, opposite row items can also flex in the direction of a column. And if I had saved, you can see all the items on our flexing in a calm direction. And the same thing goes for column reverse. We just changed the direction of the flux. Okay, so that's pretty much it for flex direction. 5. 05 FlexBox Flex Wrap: And when we say flex rep, by default, flex items will all try to fit into one line. You can change that and allow the items to rap as needed with this property. So let me show you how this works. Let us go back to flexing everything in a row. So let me comment. This out. Hit Save and now everything Texas in a row. And if I would make this smaller or compress our container, you see the items are disappearing so they're not rapping. So let's talk in here, comment flex wrap. This basically just means that the flex rep property is no rep to hit save, nothing happens. But if I do, Flex, rep and I choose rep than items will wrap onto multiple lines from the top to the bottom. So let's hit Enter and now save. This can see items are now wrapping from top to the bottom. And if I make this larger or shrink it together, you can see the, I guess the items are now taking up the rest of the free space. Now for flex rep. We could also do Flex rep and choose rep reverse. And with this property, items will flex onto multiple ions from the bottom to the top. Here this is just exactly the same thing, but in the reverse direction. Okay, so that's pretty much it for flex rep. 6. 06 FlexBox Justify Content: You can next property is justify content. And basically what this means is, as you know, we have our container and within our contain wherever items and within the items we have our two axes of main and across access. And justified Condon defines the alignment along the main axis. It helps distribute extra free space leftover when either all of the items on a line or inflexible or there are flexible but have reached their maximum size. It also exert some control over the alignment of the items when they overflow their line. So let's take a look at how this works. And we're going to go back into our code. And let's type in here comment of justify content. But before we get into justify content, let's first increase the size of our container to a height of, let's say, 350 pixels. And I also want to have just a few 150 pixels without typing in height. So 350 pixels. And also flex. I'm going to set the flex rap to rep. Okay. So by default justify content is at flex starts. So if I type now unjustified content and the first property is Flex start, and this is the default behavior of justify content. Now we can also type in star to So just to heart. And this will have exactly the same effects as she let me live. Flux taught in carpet and have it. So, so you have both of the properties opposite to this will be flex end. And with this, items are packed towards the end of a flux directions. So if I would do justify content and flex and a hit save, and you can see they are now to the end of the flex. Now the same thing goes for this with just typing in. And oh, there should they took it out. Add actually does better because it was extremely confusing. So give me Mind Flex NDA because they took out just end. They got a bit more specific this time. Now we also have justified content left and right. And with this, items are packed towards the left edge or the right edge of the container. Unless that doesn't make any sense with flex direction, then it behaves like start. So you could do justify content and left. And the same thing with right. But as I said, they're not that often use. Now, what is used is justify content to the center. As it says, Items are centered along the line. But let me just yep. You can see how this is working. So not a flex actually in the middle. Everything is pushed in the center of the container. But more often are properties like center based between n space around and space evenly use. So let's take a look at versus space between where items are evenly distributed in the line. The first item is on the start line, and the last time term is on the last slide. So let's do justify content. And there's space between. Let's hit Save. As you can see, we have now space between them. Okay, let's shrink them a bit together unless push them apart. Now next up would be space around. And with this, items are evenly distributed in the line with equal space around them. Note that visually the spaces aren't equal since all of the items have equal spaces on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item, because that next item has its own spacing that applies. So let's do justify content. And there's use space around. And let's shrink it now a bit together. And that's also our site. So you can see on the edges, space isn't the same as between them. And the last property would be spaced, evenly. Spaced evenly items are distributed so that the space between any two items is equal and also the space to the edges. So let us do justify content and space evenly. And let's see what happens. Now is hit save and it will shrink this together. You'll see will have the same space all over the edges and between the items. Okay, so that's basically it for justify content. 7. 07 FlexBox Align Items: Now the next property is align items. Align items defined the default behavior for how flex items are laid out along there cross axis and the current line. Think of this as justifying content version for cross axis but performed on the main axis. Ok, so let's jump into it and let's see how this looks. So let's dive in here another comment of a line, items. And that items also has a default behavior. And the default behavior of a line items is actually stretched. So if I will type in a line items and select stretch, then nothing will happen. But the next property is Flex, start or start or self-starter. And with this, items are placed at the start of the cross axis. So let me do a line items and let's go with flex, start. Now you can see the dimension of the item just changed because remember we're Maine and across accesses. The difference between this is substitute n is about respecting the flex direction rules or the writing mode rules. Not opposite, opposite to this is align items to flex end, where items are placed at the end of the cross axis. And then we have a line items center, where items are now centered in the cross axis. And the last property of this is aligned items to the baseline. And with this items are aligned such as their baseline alignment. Okay, so that's it for a line items. 8. 08 FlexBox Align Content: Now next step we have aligned content. Online content aligns a flex containers line within when there is extra space in the cross axis. So similar to justify content aligns individual items within the main axis. But please note that this property only takes effect on multiple flexible containers, where flex flow is set to either wrap or wrap reverse a single line flexible container will not reflect the align content. I guess let's try this out. And again, I'm going to type in a comment of aligned content. Blank on this default behavior is normal. And alone when there is no, there is behavior is normal. But if it align, the content on first property will be normal. Now the next property is Fleck. Start as we had for the line items. So aligning content and flex. Start. With flex Todd items are packed. The start of the container. Then more supported. Click Start, honors the flex direction while start honors the written more direction. Not opposite to this, is of course, align content to flex and which items are packed to the end of their container. For center, align, content to the center. Items will be centered in the container. And then with space between the space between items will be evenly distributed. The first line is at the start of the container, while the less one is at the end of the containers. As you can see, the first one is up here and the second one is up, is down there. And if I push them together, you'll see that drop in the rapping. To the bottom of the container. Non-expert. We're going to do a space around. So line content with space around, which as its name says, items will evenly distributed with equal space around each one of them. And of course, we also have aligned content with space evenly, where items are evenly distributed with equal space around them. And the last property is align content. Stretched. Now with the stretch property, lines stretch to take up the remaining space. So when I hit save, we can see the items stretch now upwards. Okay, so that is it for aligning content and also for the properties of the parent. 9. 09 FlexBox Flex Order: Next time we're going to learn about the properties of the children. And the first one will be flex order. Now within Flex ordered by default, flex items are aligned out of their source order. However, the older property controls the order in which the pill in the flex container. So normally I would have here 123456. Well now the order is specified as I wish. So let's jump into it. And I say how we can achieve this. Now this time we're going to go down to the flex container, but flexbox items, because we need to target now the items themselves. Now I'm going to copy this. So the children ID the flexbox container and the flexbox item. And now again to select and target the first child item. So let's see first child. And for our first child, we are going to say order. And let's see number two. And let me actually slash this back a bit and then hit save. So let's hit save and see what happens. Now, this too was changed up. Okay, I'm going to copy this again to target each element itself. So let's make five more copies of 1234 moon missing one copy. Okay, we going to multi-select. So I'm going to hold on command. And then D, D, D, and D again. And I'm going to type it here. And this just means I'm going to select the nth child and after two here, a Alt and click after the d.school. And it's open and close parenthesis is going here that typing a number two and then replaces. So this would be number three, number four, number five, and number six. And this means actually damn, selecting here in 1-2-3, 4-5-6, the sixth child. Now for the six Chandler's do a one or the one for the left child is the order for you to see how the jumping around. Now let's do for you a number free. And you can play around with this as you wish. 10. 10 FlexBox Flex Grow & Flex Shrink: Next up we're going to learn about flex grow and flex shrink. So within our container, this defines the ability for flex items to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of a available space inside the flex container the item should take up. On the other hand, flex shrink will define the ability for flex items to shrink if necessary. Okay, so let's try this out. So let's call F dot order. But we still need to. Actually, I'm just going to take this crop. It shouldn't do it from here. Yeah, let's take this last ordinance copy. So let's copy this. And I'm going to select the first child. And I'm going to actually comment out the entire thing that we did here with order. So let's reset our order two as it was, and we still have this one in it. So let's delete the order. And there we go. We have our items. Not a default value of flex grow is 0, so flux, grow and 0 is the default value. Now let me also give them a flex wrap of REP. Actually I should do this through containers, so we don't need to do this here, but we need to go up to the children. Children may container where we display it as flux unless style them as Rep. Okay, now let's go back here and we selected the first child. Okay, so within the ID of children, a class of flex container and I was certain the class flex item and recycling the first jostle This one right here. Now let's go with a value of two. As you can see now it's increasing its space. And let's do a value of four. And actually I need to push it eventually here. So when they're free items available, you can see it's shrinking down. Okay, if there are only two items available, it will still remain with that for so if I decrease this to, to see if a is not taking effect because it's only fractionally taking up two times its maximum space. And now I'm going to take this, copy it again. I'm going to select the last child which is number six and less due for this. So we could also do a flex grow, okay, this taking up that's placed, but let's do a flex shrink. And now let's just type in one. This is its default value. But if I would type in now free and let me push this together a bit. But actually I need to increase now the maximum width of the elements. So let me copy this one. Because the items themselves, they are without value until now, so they don't have a maximum value or minimum value. But we could do, oops. We could do something like width. And we can assign them a width of 150 pixels. Okay? Now, if I want to shrink this town or Statton intended to do a bigger value, let's see, 300. If we come in this on back end and this one completely out. Okay, so that's basically it for flex, grow and shrink. 11. 11 FlexBox Align self: Now let's property is aligned self. And this allows the default alignment or the space specified by airline items to be overridden for individual flex items. So let me take this one again. Carpets or first-child, comment this out. And actually also I'm going to comment out the width. So let's do a line self. And this has values form flex, start to flex. And also that metres. So this again and also baseline center. First go at baseline than Center. And yeah, there we go. Okay. So this is pretty much it for flexible. Hoped you enjoyed it and I really hope this helped you with flexbox. Then he saner X1, Buh-bye. 12. 12 Flexbox Website Intro: Okay, so next up, it's a project. We're just going to create a simple website using flexbox. Now, the main focus of this project is to concentrate on using different matters from flexbox, different properties of flexbox. Not to create the best site in the world, but just to get used to using flexbox. Okay, so let me show you first of all how the site will look. I said, basic website. We'll have up here a small logo we created ourselves. Right here, will have a navigation. This entire section would be actually the navigation. And here will be the header where we'll have a title, a subtitle, a contact us button. Now this two will be in a main section. And of course, when we click on Contact Us, for example, this will send us down to the compact section of the page when we will hover over the buttons and then each of them will do something. And down here we will have a footer. And after that, let me go up here. Will also have a About section or just have an image, then a subtitle sort of titled About Us. A image on the left side, some kind of texts that are more despotic wouldn't do anything. And then we will have a service section on the service section will also have just a bit of an animation for the boxes here. And yeah, I think this is a pretty cool project for you to get used to flexbox. So oh yeah. And actually this would also be responsive. So if I would change, let's go to Inspect, right-click inspect, and change this V. Let's zoom in here a bit. On 175%. Yeah, this okay, so this would be in an iPad format. As you can see, everything is response actually let me go to responsive as much better. And I think the need to zoom out because I already have it here somehow zoomed in. And then some then yeah, I will just show it to you using our basic method. Let's go to an iPhone format. And yeah, that's much better. So without having this selection on, this would be now in a 11009 is 1900 something with the doesnt matter. But as soon as I go down to 900, received texts changing, sizes, changing, and I can go down as far as a phone format and actually let me do is set all my zooms. This is awful. Okay, there we go. So there's our on the 400 format. Again, reset my resume. So CFI will align in a column or a row depending on the width of the page. Ok, so OP, excited for his project and let's get started. So see in the next video, bye-bye. 13. 13 Flexbox Website Basic Setup and Starter files: Okay, so first we need to do a few basic set-ups. This just means we're going to implement, so it could create a index HTML. We're going to create a style CSS file. We also going to implement Font Awesome, which we'll use for icons. And we will also use bit of bootstrap, actually only for the bottom. And then I want the style the buttons. There, just two buttons, but I'm too lazy to style them. As I said, we will only concentrate on music. Flexbox is the main focus of this project. Ok, so let's get into our setup. So I just created a folder on my desktop called the flexbox website. And within he'll excrete OK, index, dot HTML and CSS file. Okay, even associate says I'm going to do our general reset margin. 0 padding 0, box-sizing, border-box. And take out the list styles, list-style, none, and also text-decoration. None though have any underlines. Another thing I want to do is to set the scroll behavior to smooth. Now what this will do is when we click on this again. So for example, I want to go to the About page and click on about Dennis was scroll smoothly down to my about sexually forgot to contact, which is the last section. To scroll through everything and go down to a context section. So this is just a neat trick and is actually implemented in CSS without using JavaScript. But this will, this will get extremely lying when we are constantly saving and editing CSS, I'm going to comment it out and you can convert it back in when you're finished with the project. Now, back into our HTML. Let's start off shift exclamation mark boilerplate. And let me, first of all here link up our style CSS. And then above our style CSS may actually go back here. If you don't have an account, you can create one or you can use the CDN, just searching Google for font-awesome CDN. I have one. I have an account, I just have a free account. You can use a free kit and you need to link it up in order to, to get your Font Awesome styles. Now for this, you just need to go to your account. Click on your kids, and get your kit. And there we go, copy kit as go back to our HTML and paste it in here. Another thing we need to link up and, and actually, let me try this out. So let's very quickly search for icon. Let's say Facebook likes me actually show an icon that will also use envelope. Okay, there's our envelope and actually use this multi bulk. Ok. Click on it and this will open up the envelope. This will open up that link juice need to competence. You can see copy HTML, click on it, and it's sloppy. Copy to Clipboard. And now we'll paste it in here. Hit save, open up our project using light server. And I'm trying to do they will. And there it is, up there. Don't worry, going to fix that. We will also use a direct dimension. So we could style them using CSS by going to use the direct dimension styling from here, typing in F three x. And this will just give me the icon free times its size. There's an icon right here. And I think I'm also going to zoom in to 150% and leave it as this. Okay, next up, we have our Font Awesome linked up. As you can see, this is working. If this is not working for you, then IDEO kit is wrong or something else went wrong, but you just need to grab your kid, put it in here and try it out with an icon. Okay, next up we need new symbol. I am just going to show you this symbol right here. If you go to refreeze schools, you will find all the HTML symbols. And I am going to use for copyright this ad copy being our footer. Just for you to know, this is where I'm going to know how to use these symbols and what they mean. You, you see here the lot of symbols. A, another thing that we will use is bootstraps. So let's go to, this is actually our project. Let's open up a file, another tab. And let's go to bootstrap. Now, if you never use Bootstrap, normally you would use Bootstrap if you're a JavaScript developer to just throw out equip webpage. But booster webpages are extremely easy to recognize because they all look the same. For this one. I'm not using Bootstrap hours trying to style mile homepages. Okay? So I just copied from getting started the CSS JavaScript that if you wish. And well, we're not going to use this on the one to over complicate things and just copy this link and paste it into my HTML up here. Now, everything will be loaded up in this SQL bootstrap, font-awesome, and then my style sheet. And now I can name our website with flexible flexbox web page or website. Right. Now, this is taken care of. Let's see, what else do we need? What are slow need? I think we have everything that we need. Right until now. Yes. So just taking care of. See you in the next one, debye. 14. 14 Flexbox Website Navigation and Header Section: Next up we're going to style our navigation and our header section, and both of them will be in a so-called main section. Now I'm going to type in here comment, actually free comments. First will be that I need my main section. In my main section, I will have this. This is the end of the main section. And within here we're going to have our navigation. Drop it. And this will also end somewhere. And F that will have a header section. And just the header. You don't need to type you sections, not entire section and the end of the header. Now I always like to comment all things as best as I can. Because for example, I'm going to take this. Now, angle back to my HTML into my CSS and paste it in. And of course the comments are not as they should be because these are CSS comma. So let me select one of them. So highlight all thens and bom, bom, bom, bom, bom. And delete them. Now select the next one, Control D, and delete them. Ok, and now I can comment them out. And the header, header main sections of main section. So I also want to be able to know exactly where I am in my HTML and CSS. And comments really help you out. I definitely encouraged to use comments as much as you can't always to explain to yourself and to other coders when they look at your code or when a designer looks at what you've done, a, okay, there's, there is damping and it starts there and ends there. And this is what he thought when he was doing that. So let's get started with our main section. Let us say within here we will have a tag of main, and this will have a ID of main. I love to give IDs. So we can already take this entire thing and paste it in here, all our comments. And now we're going to go into our navigation and create a nav tag. And this will have an id of nap. Better nafta. We're going to have a anchor tag, which will have a ID of nav logo, nafta ash logo. All logo will live and a chef to just refresh the page and go into tapping here m, m, four main heart media. Now f our anchor tag, I'm going to create all of the anchor tag. I'm going to create an unordered list tag where our navigation items will live. So within here I'm going to create a high. Then this will contain an anchor tag. And this anchor tag would then have a text off about OK. And now I'm going to multiply all of this. So I'll close this one up here. So let's multiply this with three times. And you can always say o less than what I want to open and close parenthesis. So close it up here and open it up at the beginning. And now he three again, I got three anchor tags. What the hell is API? We don't need this, does much better. Now, don't need to get to go into my anchor tag and create an, a chef's. So let us select all of the Ankit, or at least the sought, the opening anchor tags to control D or Command D on the Mac. And we go in here and create the HRF. And for the HRF, you're going to basically create exactly what is in here. So if it's a about them, it's going to call, give it a direction for about the next. The next one will be a direction for services. And the less home will be for contact. Solar select both of them and contact. Now, if you didn't know this, if you create an anchor tag with this, a chef, this just means that with a hash and rename. When I give something this ID, Zach ID, and I click on the anchor tag, this will bring me to this ID. So that's how I managed to show in our example. In our example here is the finish webpage. If I click on services, it's will bring me to services. And this just basically a tag with an id of services, but I will show you this later on. Okay, so we have our navigation done. Hey, let's actually check it out. How does this look? We have a website opened here and hey, there we go. So let's go down here FOR navigation now we need to create our header. For a head. I'm going to use a header tag. And it's just misspelled header. So let's create a header tag. And I'm going to also create, give it an ID of header. Within our header, I'm going to create a H1. And within here we're going to give it the name of flex box upside. One way to create an h3 element now, tapping here responsive web design. And after each free, we're going to create now a button tag. And this is where r, and this is where our Bootstrap classes come in. So I'm going to create a BTN class. So dot btn and dot again btn success. And then dot PTEN for the size LG. I want to have a large button, and within it I want to contain a anchor tag again. And this should have the HFE of contact. As you saw in our example, when I pressed up here on Contact us, this brought me down to the contact park of the, of the webpage. And within our anchor tags we're going to type in Contact plus k. So let's hit Save NSC if we managed to create this W. So yeah, let's now Style or Heather and our navigation. So let's go back into our CSS. Now let's do some general styling for our main section. Going to target the idea of mean. And I'm going to give it a height of 100 viewport height. And this just means it's going to take up the entire height of the viewport. Now we need a background image. And for this, we're going to first of all, typing background image Nanga to select a URL. And this is where our next technology on, next ignored, but a website comes into play. And this website is source on Splash.com. So source dot on Splash.com. And you can see it right here. Now form social slash.com. We have this specific photo. And for here I'm going to copy our URL form right here. And I'm going to explain this very quickly. So if I would copy this URL in, hit Save, and let's go to our website, which is here. And you can see anything because I didn't sighs, It's so first of all, it needs a background. Size and we're going to give it a size of cover image. Then it's going to want to position the image so background position. And we're going to choose center, so it be totally in the center. And we don't want our image to repeat. So background. Repeat. With no repeat. This free already. This week. These three options already give us our image. But I don't want this image. I want a specific image. So the way I did it is that, I mean you go to on Splash.com and you suffer image. For example, I used to do image. So let's start from the top again. Now there you go. So click on this image and you will see up here in your URL, this is the image ID. Okay, you just need to copy this ID and copy it. Go back to my code editor and paste that in here. So it's between the.com and the width and height of the image. So if I paste it in here and it save, let's go back here. Let's go back to our website to image loading. Now though there's an image. Okay, so as simple as that, you just copied ID and paste it in here. Now, two things here are the width and the height you could obviously changed on, but I would recommend to live them as as they are. We can next, I want to give this a the entire main section right here. If you, if you saw this in our main section here, everything has a bit of a tech shadow. So I'm going to give the entire main section it tech shadow of one pixel, one pixel, one pixel, and the color of hexadecimal or 350, so a bit of a darker color. Now, if we go back to our webpage, actually this one because we already have a bit of attack shadow. Okay, then I certainly didn't want to do is to change the entire colors of our main to a light color. So fff, this would give us this white color. Okay, next up is the navigation. And that's going to navigation. And first I'm going to split everything up. So we have this 100% height for our mean and our main contains our navigation and our header. Now for the navigation, so let's choose for store the ID of nav. We're going to give it a height of ten, viewport height. So it's going to take up, it's like taking up 10% from the entire viewport. Now also going to increase the font size to two RAM for navigation only. And now I'm going to display it as flux from this play and flex. And as we learned, flex. Flex all automatically flexes into a row. So it flexes my M and M here, my logo and my UL men are on that list. Now let us give this also a bit of a padding of one RAM. And then we're going to give it a background color of 0. Rgba tend to also have a bit of a penalty of 0, tab, tab, tab 0.1. And what this will do is give me a dark but with an opacity of 01 color. So it will be a bit of, a bit transparent. Ok, let's continue on. Now we are going to target the logo. So hash ID of nav, logo. Now I'm going to give it, first of all, I need to size it. So let's give it a height of 60 pixels and a width of 60 pixels. We are going to be given the square size. Now can give it also because it now has a size. I can give it a background color. And because it's a square, I can now rounded up by typing in border-radius and 50%. So let's see what we just did. And within there anything or is that to do? Nab, jesus? There will there is our round circle. Square circles. No, we don't have around circles. Okay, next I want to display it as flex direction. And I'm going to align it. So align itself to the center. And now everything is aligned in the center right here. Now let's take care of our UL. So first of all, we're going to target on navigation idea again. So nav. And within this, the unordered list, we're going to give it a width and the window width, 100% of its container. And you will see this is now going to take up this entire container. With that, we're going to display this flex. And as soon as we display it as facts, we awesome to push. This should already be displayed in a row because they're hit save. But we want to have this. In our, on our eyesight. So what do we need to do? We need to justify the content to the Flex end as soon as we do this and also hit save. Now, this is pushed to the right side. Okay, simple as that. Now let's target our allies, our navigation items. On list items. I'm going to do again ID nav within the unordered lists and within it, all of the allies. And what I'm going to do it just give them a bit of a padding to the left side of one Ram. Now as soon as I do this, now we have to each of the left sides, a padding of one ran because obviously more, but I'm going to leave it as, as one gram. Okay, next up we're going to style our anchor tags. Sown is going here. Let's target are actually I could just copy this and written Hugin style tags. And I'm going to change their color to ten. It should be FFF. I'm going to increase the font size down, going to increase the font weight to Boulder. Let me leave it at bold. Bold enough. And I'm also going to increase the letter spacing to one pixel. So let's see how they look. Perfect. There we go. Now let's say I want to start is the header, so this part right here. So let's go back into our code. There's the end of a navigation. Now we're going to go in here and see how perfectly commented out this noise. There's no way we could get lost now in our styling. Okay, for our header, you enter first of all, target the header ID. Then we're going to give it the rest of the view port, which is 90, viewport height from 100, we're going to display it as flex. Flex. You're going to choose the flex direction now. Let us take look at first of all, now I want to have them in a column. Within a row or column because normally there was Flexner or not, this will happen word, no problem. We're going to take care of this. Now. We can justify the content to the center. So as we do this I've used are pushed down here to the center. And to have it in the center of the entire page, need to align the items also to the center. And as soon as we do this, we have now in the center of the page. Okay, now let's take care of our H1 sourness target, our header ID again, and retain this h one. And this increase is font-size to ten RAM. And this really depends on the resolution you have. So maybe ten RAM is sufficient to much or Too little. Just play around with it. And you will see the right one. Now for text-align goingto go with Center. And we're also going to give it a margin for the bottom. And what this will do, so just hit save and I want to push this a bit further down. So I'm going to give the H1 and Martin from the bottom to the bottom of four RAM and it can see and hit save. Yep, this is a bit pushed down now. Okay. The last couple of things we need to take care of is the button and the h3. So let's first of all take our header ID. And within this, we want to target the H3. And I'm just going to give this a color of a RGB of a complete dark colors, so 0.700. Let's see how this looks. It's ok. Now let's say I want this style is our button. So within our idea of header, we have a class of btn success. And I'm going to give it a margin from the top of two RAM. And this should push our buttons down a bit further form here. Kay? And then I say I want to do with this button is blue and underlined and like this. So let us go within our button, we had an anchor tag. So I'm just going to compensate this. Base it down here again. And within our button success, we're going to target our anchor tag. Going to change the color of the text to white. So hash FFF. I'm going to text transform. And I'm going to transform the texts. So text transform to uppercase declaration text transform uppercase K. So we have only capital letters. There we go. Okay, so that's pretty much it for this one. See you in the next one. 15. 15 Flexbox Website About Section: Now assigned to style all about section. So let's get into our code. And by the way, if this happens to Don't worry, it just means that we lost connection to an splashed and the image will appear then later on. But don't worry, the image is still there. It didn't disappear. So where do we live? There? We need to go to our HTML. Now create our next section, which was the About section. So right after or main section ends and then type in another comment about the copied pasted in and about. And we could also tapping here section. So let's take this to copy them into our CSS. Also. Take our beginning and ending tags to meet them and comment this out. Okay, now let's go back into our HTML because we now need to create this, this section. So we're going to create a section tag, which I'm going to give the ID of about. Within here we're going to create an H2 push to just have the title of about us. Then after H2 will have a generic container which could contain two things. So let's create a container About dash container. And there shouldn't be a class. Okay, so within this we are going to create a, to contain two things. First of all, a another class of an algebraic generic container of about the image. And after this container will have a none, the one with the class of about description. And this is where the entire discussion for about section will live about description. Okay, within all about description, we will have a H three, which will have now also, I give it a class and then it'll give it a class. We will take here, type in here about company. Just like giving ideas because I use a lot of JavaScript and you need ID's. And if we're going to create a paragraph tag and we'll create here just epsilon. And leave it open with dot-dot-dot three dots. After our paragraph tag. Blessing we need is a button. So again, we're going to create a button tag. And this will also have the classes of btn, then dot btn, danger, danger. And within here we're going to create a text of Learn More. Okay, and that's actually it for a bow section HTML. So let's get into styling this section. I'm going to style our boss section, right about the, about section comment. I'm going to create general styling for all my sections. So everything that we will have a section tag, we'll have a height of 100, viewport height and a width of 100% of its container. And also give it a margin of auto. And this just means that my content will be then place automatically in the center of the page. If I don't do this, each section that I create, I need to type this in, and I do not like to type in unnecessary code. So this just means I already applied the section. I already applied all sections that I'm going to start from now on a height, a width, and a margin auto. Another thing. I know I have three sections upcoming. The first section, background, I want to be white. But the second one. So nth-child. And there are another way of using our children, which are odd and even. And I can now target the odd ones and tell them, hey, when there's a odd one, than it should have, the background colors are actually all auto answer will have a dark background color. Okay? And here also general settings for our h twos. They should have a font size of six RAM. Okay, so with this being done is actually take a look in our webpage. And there we go. So this section already has a height of 100%. The next one, and when we're going to create the next section, will automatically have a height of 100%, but the background color will be taught. And for the color of the text book, we will take care of that. Okay, so let's get back into our code. And Ash, I don't like how this is arranged, so you should be here. Now let's get back into our code and starts telling all about section. So first we need to grab on to the idea of about. You're going to display it as Flex. And as we, as we do this, we will see that it doesn't look that good. So let's go back in here. And flex, it changed the flex direction in the column and it says we do this. This is much better. Now, we need to justify the content to the center again. And we need to align items also decenter. So notice we have our section here and also on navigation should already work. So if I click on about, then this will send me down here. As I said, if you go out to a style and common back in scrolls, scroll behavior, smooth. Go back up here, click on about and Whew, this will have a smooth scroll behavior, but this will get in rings. So let me comment this out again. Now let's go back to our Abbas section. So down here. Next up we're going to style all about container. So I'm going to target the About section again. And within this class of about container. Now again, I want to have a image later on in this. So first of all, I'm going to limit the width of this container to 11200 pixels. And go to display this flux because we have two things within here. There are container we have. Let me go into our HTML. We have this div of image. And then we have this div of about description and ASU we displayed as flexed and it will flex this to items on this one and this one into specific direction. So let's go to our CSS again. And let me also give it a bit of a margin from the top. See how this looks. Okay, so the container is now limited to one hundred, two hundred pixels or image or introduce our image. Again. The idea of about and now target the class of about image. I'm going to create now a image which will have a min-width of 550 pixels. Now Whatever happens this image with should not go on the leaf of five hundred, five hundred and fifty pixels. Now for the image itself, we are going to go again with a background image. And we'll select the URL and just go up here, actually going to copy everything that I did here. So I'm going to paste this in. But for the ID, we're going to use a, another ID which you can, actually, you can go, go ahead and choose whatever image you want. So you could go and splash. And let's say you want to, do, you want this image or you want it? We are all nuts image. And it will just one image and copy this ID because right now we have this one. If I will choose. This other ideas, I've been just competencies into our code. Replace this here, save it, and actually go to my website. Hit refresh again. I don't know why they constantly does this where we keep losing our connection. Okay, so this will load and believe me, it will have the not image in it. So let's get back to our styling. The last thing we need to do in our boss section is target about idea again. And within this about description. And what I want to do here is give it a padding to the left of two Ram. Now before I hit save that, we show what is me, hey, there's their own nuts. Now want to have it padding here to the left size. So I go back here and hit save and see now I have to ram of padding right here. Okay, so this basically for our boss sections. So seeing the next one, debye. 16. 16 Flexbox Website Service Section: Okay, next up we're going to start our service section. First, we need to create our HTML for our service section. So let's go back and talk index.html file. And let's create another comment. Service section. Let's copy it, grew underneath it, paste it in and off service section. And as all this, let's also copy it into our CSS file. Let's create a section tag again, and let's give it the id of services. Here. Again, we are going to give it a title. So H2 services. H2. Again, I'm going to create a general container we should create free, which will contain, Again, I'm going to create a general container which will contain our services. So service container. Ok, within here we will have free services, but each one of them, I'm going to name service. So let me create a class of services or service. And I'm going to multiply it by three, and this would create a fee containers. Now let's go in the first of them. Actually going to do it anyway. So within here I'm going to hold down now Option on the Mac or on a PC. Create an h3 tag. After h3 tag, I'm going to create a icon tag. And after the icon tag, I'm going to create a paragraph tag with a lauren Tam, I believe ten. Okay. Now if you know h3 tags, first one will be web design. The second one, web development. And the first service will be web hosting. Now for the anchor tags, we need Font Awesome. So let's go to the Font Awesome. And actually one of them we already have, because let me show you its services. Didn't use that k. So I need this one, this one, and this one. I already know them. And I already know what kind of classes I need to use. So. Within our anchor tag, I will now type in a class of FA S, then f a dash pen, nib, and also f a dash 3x. And that's it. Save. And let's see what happened. Actually, I need to go here and go dot or supersession. Hey, there we go. First of all, the server section is Doc. Why is that? Because it's the second section and it's a odd sections. So now let's go in here into a styling. And the first thing I need to do is to change the color of the text because we can see, you can see anything. So within our service section, going to target the idea of services. And within this, I'm going to target our H2 and change the color to hash fff. Also, we had to go into our service and our class of services. If it was just service. So sir, this and also here I'm going to give this a color of FFF. And this should fix our problem. Did I hit save for services? Services that we go? Now we're not finished with our, with our HTML. We still need we have this one. I'm just going to copy this class. Going toward next icon down here. Paste it in. Well, what just happened? Stress. So in class, I can tag, it. Can happen. It is copying the class. Right-click, copy, right-click, paste. That's much better. And I'm just going to change the class. And instead of pen or a pencil. Okay, let's hit save and let's see what we get. We got up Ezra and rule over the case. So the last thing was the database so that we paste in here again the clip, the class. And let's change this one to database. And I say Save. And there we go. We have our server sections in our HTML. Okay, so now let's get into styling. First. The service section. Sexually services. Services are displayed as flex. We're going to change the flex direction column again. You have to justify the content center and ally items through center. And also want to give this a bit of a margin from the top, not the bottom, the top off to ramp. So let's see what we just did. There we go. There's our server section. Now let's take care of our services. So first of all, the service Container Services. And within this, the class of service container, dash container. And we also need to display this as flux. And then we're going to use the flex rep property because we want when we shrink everything to the getter, the flex items to wrap. So let's use flux, grep. And I'm going to also give it a margin top of 4M. Now let's see how they look and say, okay, now I also want to give them a bit of space around them. So let's go back in here. And I'll say space. Justify content with space around. Okay? And there we go. Each and every service. So first of all, I want to change the background color to white. Okay, that's much better. Knowledge. Keep them all, say eight, max width of 300 pixels. Kay, so each and every service will have only 300 pixels for the width. And let's give them all a bach shadow, 0015 pixels spread and five pixel. Okay, there we have our box shadow now. Now let's give them a margin all around margin of one RAM and also a padding of two Ram. Now go into display them as flex again. So within the, within a service we have three items and now we can display each and every one of them as Flex. And let's change the flux direction to a column. Okay, so there we go. Now because we display them as facts, we can now play around with them by aligning the items to the center. And also let's do a text-align center. Okay, so let's take a look. And excellent. Safe. Because I want later on to have a hover effects or actually let me do this right now. So I need or services competencies, cola here. When I hover over them. So as to a hover effect to change my cursor to pointer. So in order to indicate that on diam over a service done, let's do a transform of scale of this increased. And so 1.01. This just means I'm going to increase them with 10%. And then we're going to do a transition of 0.5 seconds and ease. And I'm also going to copy this transition up here. So not only what I'm hollering input also as I'm hauling out the change also the background color to hash five, 55, and the color of the text itself to hash fff. Okay, so let's see how this looks. Missing an actor, when we hover over them, call it background color change and also the color of the text that we have, the nice box shadow key. So I think basically that's it for service section. So see in the next one. 17. 17 Flexbox Website Contact Section: Next up we're going to take care of a contact section. So first, as always, let's start with our HTML and let's go into our HTML comments of convex section. And the next section. Let's copy both of them. Go into a CSS, based them in, and comment them out. Okay, let's go back to our HTML and start creating our context section. Again, we're going to use a section tag. I'm going to give it a ID of contact. Within here. We're going to create a title with an H2 contact us. Lets us just us not going to have a generic container which will contain our entire contacts. So contact container. And within our contact container, I'm going to have actually free contact like continuous. So let's to contact a class of contact, multiply it with free, right to have free classes. But I also going to go in here and add another class. And the need to add other neat class with what I do need to add is in each one of them a anchor tag plus h3 tag. And then plus two paragraph tags, so times two and go. Ok. Now for eye contacts, we're going to start off with the FACS. Actually need to do a class. So Class of FeS, then f, a dash Street View. So three dash view. This will be the first one and multiply it times three. Okay, that's hit escape. And now let's change them. The first one we're going to leave it as it is. But the second one will be a phone, and the third one will be a mail bulk. Mail bulk was missing. You the assert you are needed. Control x and let me paste it in here. Okay, now for the titles, so h freeze. We have the first title to visit us. And after that we have two paragraphs tag and this would be just a, some sort of a postal code. Then the city. And after that, some street and some number. Okay, then we have our last type, second type of call us some fantasy number. Something, something just going to be some kind of number. And then a mobile number plus again somebody, something, something. Now let's title of write-offs and just type in imagining email info at some mail.com. And then last, I'm gonna website www, some site.com. Okay, so that's basically it that's hit Save. Let's see what we got to go down here. And let me actually check navigation bar if it's working. Okay, so let's start styling our contacts section. Let's go in here. Context section. Let me go a bit up. Now let's start with the idea of contact. Ok, let's display it as flex. Let's change the flex direction column and justify the content to the center. Aligned the items to the center. And now we should have everything in the center of the page. Let's go down to contact. Yep. Everything's in the center of the page. Ok. Next hop. Target again, the contact ID and within this contact container, okay, again, we're going to display this flex. I'm going to use flax rap again. And we're going to give it a margin from the top of four RAM. For the, for content, we can now justify it with space between Actually it's your space evenly and aligned items to the center. Okay, so let's check this out. There we go. There are items not as Give them a bit of sizing. Go down here. Let's start with d of contact again. And the class now of contact. So each and every contact class within it. We're going to use Emacs pit again of 300 pixels and a padding all around padding of two RAM. We want to display them as Flex and the flex direction column. Okay? And now we just need to align the items to the center and change the background color. 28, white-collar. Okay, so let's check this out. There we go. Now lesson I want to do is take the icons. Bid a little bit of space between the icons and the title right there. So let's to contact ID and the icon tags. Actually that's the I stands for italic text, but nobody uses italic text no more. So that's why I'm calling them I contexts. And I'm going to give them a margin bottom of on-ramp. And the last thing I want to do is when I hover over them, most change colors. So in a hover state, let's give them a color of blue. Okay, so let's see what we just did. The perfect guy. So that's basically it for the contact section. So see you next time. Bye bye. 18. 18 Flexbox Website Footer: All right, we arrived at our first section. So let's take care of it. This is actually a very short window. First, let's create our footer section and discrete common here. Footer, copy it down here and the footer. And so also the comments here. So this is a really simple one. We're just going to create a, a footer tag. You can give it the idea of photo. Huish, I, I'm just used to giving anything IDs and going to create a paragraph tag. I've been here all rights reserved and a span tag. And in here I'm going to use my I'm going to use my enzyme. And then copy. And this will give me the copyright side. Okay? After the span tag, I'm going to create a bold tag. I'm going to type in here m and n and hot, just my name. Then another bold tag, another m. And outside of it, media. And then to tunnel zoomed 80. It's actually a principal AT principal. Okay, so let's see what we just did. There we go. Now to style this, and then we're finished with the footer. Okay, so let's target our footer tag. Michelle Footer ID. And let's give it a height of 80 pixels. Well, should I give it 100? And this just depends. If you give it 8300, whatever we wish. We had to change the background color of this to a dark color, the text color to white color. So fff, you're going to display everything as flex again. If I can type flex, what is wrong with me? Justify the content to the center and align the items to recenter. Okay, so let's see what we just did. A there's a photo and that's it for this video. So see you in the next one. 19. 19 Flexbox Website Tablet and Mobile Responsiveness: We arrived at our responsive side. We arrived at our responsive part of the website. So we're going to use a few media queries. And then the site should be responsive in multiple instances, for example, tablet or phone. So let's get started. Now we don't need to write anymore more HTML. But what we do need to do is create media queries. So I'm going to create two. So at Media. And the first one is going to be when the max width is smaller than 900 pixels, then something should happen. And in other one, when the max width, I'm just going to copy this. It's smaller than 400 alone when I'm when I'm saying something and typing something totally different. So I just said four hundred and five hundred exits. So let's go into the 900. And now more I'm going to do, I'm going to take my site and pop it up here in the right side. So let's take our webpage and put it in here. And let's make it smaller. Okay, so I think we are under 900 now. This is already taking effect. This is perfect. And now we need to do a couple of things. For example, in our header, mistake the header ID. You want to take the H1 and decrease its font size. So instead of having that huge font size, we're going to go with six RAM. Again, this is, this depends on your prefaces. Okay, so these are remains were on the 900 and already this shrinks down. Now I'm going to also take all of the H 2s and change the font size to Forum. So this means all of our titles right here. Now for the navigation, let's go up here again. So I also want to change this font size. Somewhere. We are on the 900 pixels. So that means that we are in a tablet format. This change will the handler just through the font-size 1.5 gram. We kill us, hit Save, and there we go. Once I am just writing down a bit. Now, the only thing I want to change in this specific instant is the About section wants to change the spot right there. So let's target are about ID. And let's do a flex direction column that's hit Save. And this didn't take effect because now we are ready to throw the container. Oh, so it's actually in the about container. And there we go. Now I image disappeared, but we're going to take care of this. We just need to target our image again. So about and within this about image. And I'm going to change its mean height to 550 pixels. Okay? And so as we do this, that we all now let us, we need to do is style this and this are about description. So it has two about idea again, within this about description. Unless the margin from the top to two RAM, there's displayed as Flex. And let's change the flux direction to a column now. And also align everything into the center of the page. Hit Save, and there we go. Now, this is it for a desk, for a tablet mode. So let's see how our looking now. There's pretty good actually. Now let's go for a phone mode. And there's actually not much to it. I'm just going to decrease. Actually, I'm going to shrink this down. First of all, this would be kind of a full mode. So let's do a couple of things. For instance, we're going to take the h twos and shrink than delta 2.5. ram type of font size. But I doing 2.5. RAM to make them large. Note 2.5 here. Okay, that's good. Most change on navigation also, because this is way too large up here. So hash nav and as give it first to a height of 15 viewport height. Okay. Now I'm going to change the flex direction into column. Okay, and now let's do our hash nav UL. So on ordered lists were actually I'll never items live to justify the content with space between. Align the items recenter. Okay, let's hit Save. And aren't we on the 400? Although now we're under 400 and also want to change our H1 there. So let's take this bit in here and change it to foreign. That's much better. And the very last thing that we need to do is go to About section and changed about image to have a min-width of 350 pixels. Okay, let's hit Save. And now we can never get a bit flow page. And hey, there we go. There's your responsive page right there. Okay. So hoped you enjoyed this project. I know I did. And yes. See you in the next one or C In the future, Debye, Take care. 20. Grid 01 Intro: Welcome to CSS grid, the most powerful layout system available in CSS three. And the next couple of minutes, you'll learn everything that you need to know about CSS3 grid technology. The main reason to learn grid layout is that just like CSS flexbox, the grid layout has also become a must-have skill for web developers and designers in the last couple of years. Together with CSS flexbox, they make up for some of the most powerful features of modern responsive web development and design. And of course, there are also the foundations of mobile first design. After finishing this video, you'll have mastered the properties of the parent container, which are display grid with good template column and row grid, template area grid, template grid gap line items, justify items just by content aligned content. And those of the children, which are great, Kang start grid column and grid column, row, start grid row and grid column. Grid row, width, area. Justify itself, aligned self and place self. So let's get into it. 21. Grid 03 CSS Grid VS CSS Flexbox: Flex versus grid, which one is the best? Actually, it's a question of which should you use? And when flexbox and grid are two CSS layout modules that have become a mainstream in recent years. Both allow us to create complex layouts that were previously only possible by applying CSS hacks and all JavaScript. Css, flexbox and CSS grid share multiple similarities and many layouts can be solved with both when to use, which is another question, however, and in my personal opinion, it is strongly dependent on the situation. But first, let's see what is the difference between flexbox angry. First of all, one versus two-dimensional. The most important thing to know is that flexbox is one-dimensional, while CSS grid is two-dimensional. Flexbox lays out items along their horizontal or vertical axis. So you have to decide whether you want to, have to decide whether you want to have a role-based or a column-based layout. A flexbox can also wrap into multiple rows or columns. And flexbox treats each row or column as a separate entity based on its content and the available space. On the other hand, CSS grid lets you work along two axis, horizontal and vertical. The grid system allows you to create two-dimensional layouts where you can precisely place grid items into cells defined by rows and columns. 22. Grid 04 Use case of CSS Grid Layout: Now let's take a look at some use cases of grid layouts where flexbox is extremely useful. We components like navigation and calls. The most common misconception about the two layouts modules is that grid is a full-page layout and flex loss is for small components. This is not the case at all. You need to assess each layout individually on case-by-case basis in order to pick the better option. Since his good focuses on a precise content placement. Each item in a grid cell line up along both horizontal and vertical axis. If you want a accurate control. If you want to accurately control the position of items with a layout CSS grid is a way to go. In real-life cases with flexbox, It is hard to predict behavior as certain ports. And you can get surprising results. Of course, you can set the width and height of flexbox items or make use of the cock function. But you can lose flexbox mains appeal flexibility. This is not the case with CSS grid. It has properties such as grid, template, column, and multiple role and utilities like the fraction unit that lets you precisely calculate everything. Hence, grid systems are especially suitable for creating unusual layouts like broken, asymmetric or overlapping layout. Css grid also makes it possible to create responsive layouts without using media queries. Okay, so that's it for the slides. Let's get into the properties. 23. Grid 04 Use case of CSS Grid Layout true: All right, boys, singles. So before we get started, let's just do a basic setup. A c, just a setup for our environments. I already created a empty folder. It can emit whatever we wanted to just name this CSS grid non-linearity index.html file within it and a style.css. Okay, and this is where we're going to type out all of our properties for bands and the children. So let's go back into our HTML. Let's start with a boilerplate. So I just hit shift exclamation mark. This would give me a basic HTML5 boilerplate from Emmet guy to give this a title of CSS grid. And we're going to also link up our style.css. So link and style.css. Alright, so now we can get started with our body thing here. H one name is CSS grid. Underneath it, we're going to create a section which will have a AID. And within it we're going to create a H2 with properties of the plant. And also within parenthesis, great container underneath our H2, H3. And just say display grid. Now underneath our display grid H3, I'm going to create a grid containers. So generic div with the class of grid dash container. And this will contain, and let's just say six grid elements. So I could use div with the class of grid on the score item, which will have then a grid item within it. And I'm going to multiply it this way. It's six, okay? And this will give me six elements. I'm going to replace each one of these two. Holy moly and they wanted to free 456. Okay. Now for our CSS, just going to be a basic styling. So we have everything set up. We could already open this up and we'll put this up using live server. And I'm also going to drag it. Just say here, right there. Okay, nice. I also get to zoom this in a bit on our list we actually started first of all. So let's go into CSS. And within here we're going to do a few basic styles. And then we're done with this video. So I'll select the general reset, that's the star. Does we set the margins to 0? Then I'll paddings to 0. So you have no margin snow paddings, border-box, box-sizing, border-box. Less than none. Though. I'm going to use lists. Lists within this tutorial, but who knows, who knows, and text decoration also, Nano. It's kind of a habit for me to do this basic style. Now k Now let's take her body tag. And within our body tag, we're going to set it generic font-family up Sensor. And I'm going to also set the max width of our body. So there's no sort of body would be not, would not have a width. Larger, Dan 700 pixels. And I'm also going to give it a margin of top and bottom 0 and left and right. And in order to place this in the center of the page, right now illness take our H1 and let's align the text to the center. Mass also give it the bold font, weight, weight, bolder, and marching. Let's push it a bit down so as to ram top and bottom and 0 laughter, my couple of more things. I want to set its background color to hash. Which acuity dark colors. Let's check this out. Okay, and now we need to change the color of the text itself to colonnettes, Just go with orange. And also going to give it the padding on to end. Let's change this margin to padding. Alright, that's much better. Now the last thing I just want to style each 2N, then we're done with this. So H2, an escape this in margin or our marginal one RAM and it text-align center. All right, there we go. That's perfect. Need to be the zoom in, zoom out, zoom in, so you guys and girls can see what we're actually doing here. Yep. So that's it for this video. Seemed the next one, debye. 24. Grid 05 FireFox Vs Google Chrome: Now before we get into any kind of styling and it kind of CSS grid, I want to point out something really important. Although I could make this entire course on Google Chrome as a web browser. In this particular case, I would suggest that we use Firefox. And the reason for this is that Firefox has a really nifty tool for showing us grid elements and actually the Grid container and the grid items. So I would suggest that you go to Firefox, download it, and install it already did that. Pretty simple. Search for mozilla dot mozilla.org and download and install Firefox. None of you have done that. You will go back to the browser. So take a couple of seconds to read competent of video. And if you'd done down, let's go to settings down the left corner. Knowledge search for default browser. Now underneath a live server settings, I have Chrome as a default browser and only have it in private mode. Now, instead of Chrome, I'm going to choose Firefox in private mode. Save this, and close it up. And I'm going to open up Server, our HTML again. So let's take a look at this and put it here. Now we have Firefox opened, did actually open up our website. So let's try this again. Go away. I need you to zoom in again. And let's open up inspected tools here, inspect element, so we can't see it. But in the next video, I'm going to show you something. After we will display this as Grid option will appear here on the right side, which does not exist. Still have it open. And I still have, I still have my project open in, also in Google Chrome. And I will compare this two. Okay, so let me also go into inspect mode. Just remain responsive. Dani, my devices for now. Okay, so let me actually go back to Visual Studio Code and let's take our container. So it had inner HTML this day with the Grid container. And let's display this grid. So I'm going to copy this, going to our CSS and just quickly going to show you this. So paste this in and display grid. Okay, let's hit save. Now is go to Google Chrome. If we go on or container on the style in the right corner, notion, zoom in here also. So we have Grid container selected, and as soon as we did it, do this, we will see from style.css comes this display script. Now we don't have any other options here. And you can see, but if you go to Firefox and let me zoom this 1N. Oop, there we go. And over here on the layouts, we have this div dot Grid container. And if we click on this, there we go. Now we have our grid system. Now we don't have any rows and columns. This is a subject for the next video. But if you have this clicked and also click on display line number, which we will see this in the next video. What do we have one and minus one? And also extremity extend line infinitely. Yeah, we'll see our grid system. Okay, so see you in the next one. Debye. 25. Grid 06 Display Grid Grid Template Column & Row: So what does it mean to display something as grid? After we assign an element, the display grid property, it will define the element as equate container and establish a new grid formatting contexts for its content. But just by displaying it as crit is not enough, we also need to specify the grid template columns and the grid template rules. They will define the columns and rows of the grid with a space separated list of values. These values represent the track size and the space between the represent the grid line. Also, please note that when you leave empty space between trek values, the grid lines are automatically assigned positive and negative numbers. Okay, so lets start displaying something is great. So let's go back into our CSS and we have up here are container and I still want to do some styling to our container. So let's go down here and set the color to hash fff. Give me a white color. And it was good to give it a border radius of ten pixels. A text align to the centre. Some font size. Also going to increase the font size to let's say, 1 free RAM. And also to have a border of one pixel solid. And if I don't type in any color, than the border will be specified color. So let's take a look at our text is gone because this is only hear more about it. We are going to electoral Grid container. Actually this should be the grid items. Terrorists are about this item. So grid on the score TMZ Ten. This respect all of the items. I want to have for our items, a special selector which is the nth child. And with this I'm going to select, and the child will select all of the odds. And by having all of the odd selected to change the background color. Two, orange. Please. Let's take a look. There we go. And the evens. So I'm just going to copy this and paste it in underneath it. And let's change this odd to even. This is select all of the even elements and achieved a color to red. Okay, so we have this. Now, I just want to have this in order for you to see the differences between the items. Okay, now let's select the Grid container, which is actually class. So let's go in here. Great dash container. Okay, number selecting this container which will contain items. So let's go back into CSS Grid container and let's do a bit of a basic stylings to change the background color, to hash free, free, free, to set the color within it, the white color to the hash fff. And I'm going to set the box shadow. The zeros you ten pixels, two pixels. Okay? And let's also limit the height of the container to 300 pixels. For now, at least k. Let's take a look. There's our container. So let me, I hope you can all see this that actually zoom in to want to have this a 200% and also bit soon. Okay, now we need to do is display this as grid. So let's go back into our CSS and typing display. Grit. As soon as we do this, our items are displayed as good. But as I said, and let also activate all Ollie grid in Firefox. And hey, there we go. There's our grid system. You'll also have a graphic representation of the grid right here. And if you go through this, you will hover over each and every element of the grid systems where each of the children. Let's go back into CSS. And now let's start displaying as crit. Now let's start learning about grid template, row and column k. This we're just going to type it grid, dash, template and column. Now the multiple ways of defining the columns with we just need to type in here numbers because topped off with pixels. And I am going to start off with pixels and we're going to go into other units. Now let's say we want to have to grid columns. And as long as we are in grid template column, this means that we have one row and we'll define the number of columns for each value that we type in here. Eight column with will be defined. So if I type in here, only 80 pixels, save. Now let's see what happened. We have one column, one row, and one column of a width of 80 pixels. Okay? You can also see the draft representation right here. Now if you go back in here and on the grid template columns, we type in a next below 150, let's say pixels, and go in here. Now we have two columns. One column is 80 pixels wide, and the next one is 150 pixels wide. Not wide width. It has a width of 80 pixels and a width of 150 pixels. Okay? Continue on with this. Let's say we want a 250 pixel column to the third column. And we go, and let's say we want a last column of 60 pixels. And there we go. We have our last column. Now what would happen if I want to have to equal with columns? So on the left side and on the rough side, right side. And let's just say we're limited. We ought to have two columns of one hundred and one hundred pixels. And on the right side we want to have, so this 200 pixels down. Let me think about it. We have several 100 pixels. So 100 here, 100 and here there's 200. If I do 150 here, and 150 here, this 300. So we're left with 200 pixels. The sum of this is five hundred and seven hundred minutes. 500 minus 500 is 200. So how can we achieve that? Within the middle, it should be exactly the rest of the width. We could do something like, let's change the first month 100, then the second one to 100. Okay, this would be 150 and this will be also 150. Let's see what happened when we got our two columns. But in the middle, I still want to have, so I want to be on the left side and distill to be under eyesight. Now, we could do something like in the middle of them. We'll type in here at all. And what and what this will do is we'll take up the rest of the space and divide it up into the rest of the amount. So let's see, if we go over here. You can see all over our columns. If I hover over the columns, on the left side, over our columns, there will be a width displayed. So it has a two hundred and three hundred because we zoomed in to a 100% nationally to zoom out. So there we go. I don't think you can say this. So the reason that is displaying the double amount is because I am zoomed in double the size. So let me go in here and let me zoom in again to 200. There's actually multiplying, so it's actually 150 height, but it's two hundred and three hundred display. So we know that the first store 100 and in our case 200. And the rest within it is, well, the rest it just remains because the next two are 150, or multiply it by 2. Three hundred, three hundred white. Okay, let's go back in here in our container and now let's start displaying the grid template grows. So does the grid template and rho. And what this will do is we'll specify the height of the rows. And as soon as we type in more than one value, for example, I want the world to be only 25 pixels. And I'm going to use pixels right now. But after this, we are going to change our unit values. So 25 pixels. Let's take a look. First row is 25 pixel, height, has a height of five pixels. So let's go down here. Let's create a second row. Of 150 pixels. Okay, there's a second row, is 200, but we know it's actually 100 pixels. And let's say that the rest, we want to leave it as auto. Alright? So let me just change this to 254th value. And this is almost all about grid, a bit larger. And now let's see, I want to have instead of the pixels in percentage. So if I change this to 25 to 35 pixel to 25%, and let's see what happens. This just took up 25% of our remaining height. We have here, auto, It will take off 25% of 300 pixels. We knew, we know that our container, I have a container here, has a height of 300. We took up 100 pixels, we took a 25%, and we left the rest with auto. Now let me change this value right here, two column. So instead of grid template rules, we'd now have columns. We have no twenty-five percent on the left side. Then for the first column, then 100 pixels For our second column, and the rest is autos. Let's see how this looks. So 25% for our first one. Then we have 100 pixel column. So two times zoom is 200 and the rest is automatically, the rest of the width is then automatically assigned. On the leaf of this, we're going to use a grid template row again. And let's do 300 pixels and rest auto. Let's see what happens. This would take up the entire width. And if you can see this and take out the numbers, actually are, elements are now pushed outside of the container. Because without first row, with the GF 300 pixels, as you can see down here, this corner there. That is why my items as rounded border, we actually pushed out the fourth, the fifth, and the sixth item outside of our container. To get, you need to be extremely careful when you are assigning space to remain within your column. Okay, so let me take this out. Let's say 200. And there we go. Now we have 200 for our first column, first row, and 102nd row because that's the remaining height. Okay? Now let's say we want to have something like grid template column. And want to have to for massive free columns of 175 pixels. So we will do 175 pixels, 175 pixels, 175 pixels. K. Now we could do something else. Instead of defining 175, we could do grid template column. And then we'll type in repeat. And within the repeat value, we need two values. We need, first of all, the amount that we want to repeat with. So let's say free then comma, and the amount that should be repeated. So in this case 175 pixels. And let's hit Save. And we have the exactly the same result. If I would change this to, let's say, 200100 pixels, hit Save. And now we have 200 pixels. Let us just verify this. Four hundred and two hundred multiplied by two. We could also do this with percentages. So let me copy this. And instead of the 200 pixels that will do 30 out of 30% pixels percent save. And there we go. We could go so 45, but this should push out. Yep, it just pushed out our elements outside our column. Cannot see the rest, the edge of our container. And we could also do, let's see, four times five r m or for example, e m. Now, instead of this, instead of using pixels, percentages ran an EM. We could do something else, use fractions. You saw that in order to, to have the exact with, for example, with percentages, I would need to do some black free, forty-five point. Forty-five, free, free, free, something like that. And let me comment out this one. So this will take, is not exactly. So a specific element divided into three equal parts is 33.350 P450 to almost infinite. But we could do something else. Now grid, let us, let us, let this big grid, let us use something called fraction. Now what this does, let's say repeat and repeat three times 1 fraction of FAR, and that's it. Save. And let's see what happens. It's exactly the same thing. What this does is divides our maximum width of the container, it exactly free fractions. So if I would do here for fractions, then we would have four columns for equal columns must specify. Now we can also do grid template column one FR. And this will create only one fraction. We could do to FOR that. Wonderful, wonderful, this would create two. But if I would change this through, the first column is one fraction and the second one is two fractions. Then we would have something like this here. So this would be actually four, roughly 4.33%. And the next one would be 66.6666%. And we can now play around with this. We could also use Grid template column. And let's say we have here in the middle 20% and then one fraction. So this would look like this. And we could also use as up here, are FR in a say port times N2 percent. Let's see what this does. Ok. Now that's pretty much it for displaying grit template Royal with db.json. Of course you could do the same thing for grid template roles. So let me just tapping here grid template, row and repeat three times. One FR. And there we have our three rows. Okay, yeah, so that's pretty much it for grid template rule and column. And seeing the next one. 26. Grid 07 Grid Template Area: Next up we'll learn about grid template area. By defining something as grid template area, we are referencing the names of the grid areas which are specified with a great era of property. Repeating the name of the grid area causes the content to span those cells. A period signifies a empty cell. The syntax itself provides a visualization of the structure of the grid. So let's try this out. Let's send me a comment grid template area. Now, first of all, I'm going to show you how the syntax looks. So actually going to do this in another comment, grid template area. And this will contain the grid area name. Then this would be a end of a column. And they will, for example, with a period, a empty cell and another cell. For example, none. And then we'll come in other cell. Now the first thing that we need to do is to define the items of the Grid container as what they will be. Or in other words, we need to give them a name. So for example, let's see. We're going to take the class of grit contact grid item. Now we're going to select the nth child and just go with the first child. And for this first child, we'll give it a grid area name of NAV. Okay? Now we can repeat the same thing for all six areas. So let's go and copy the sigma five more times 12345. And let's go through them. So this would be number two. And I say this will be the header. Then we will have a main, then a section than let's say we have an aside. And last but not least, a footer. And we're just secondly to change this to this to four. This will be the fifth child and the sick child. So basically what we're doing, we're selecting this items. Let me open this up once more. And then let's open up our Inspector again. Okay, so now we can take our Grid container. Unless first of all displayed as grid. Although we haven't displayed up here somewhere is great. But I want to have this, I want you to have this entire code in one specific area. Now will say grid template columns. It should have four columns, so repeat four times, one far, far down for the rows, we will set them automatically. So set auto. And now we can draw out our grid template area. So it's typing grid template and area. And I'm going to go down here. And we think quotations, first of all, the, the upper side right here, wants to have a navigation. Okay, so I'm going to type in four times NADH and with spaces between them. And this just means that the first item and occupy the upper space within navigation, because it is already happening here. So first item will be basically occupying the entire space as a nav bar. Then on the second row. So let's go down here. Once again between quotations. Who said, we will say that it should have a side. Then it should call me header. And the header will span out there. And I'm going to spend the header on free columns 123. Now after this, I want the aside to spend down two more columns. So I'm going to copy this. I'm actually not going to copy this. So don't get confused. So underneath this I'm going to have an aside again. Then the main section, we just pan out over two columns and then a empty cell. Okay? After this we're going to have a, another row with the first column being a side, then a section, then a section again, and then a empty cell. Certainly for so save this and let's see how it looks. Okay, so you already see exactly like we typed it out. We have up here in navigation, which is the item number one. Then down here on the next row we have an a side and free columns of header K. So aside one to free the second item with header. And you can remember the silos, the fifth item that we have assigned and main, main two columns and then a empty cells. So header aside, mane, mane and an empty cell. And then we have a science section section. And the last thing we want to do to spit out the entire bottom column with a footer. Footer and copied four times, three times what we will have it four times then in our bottom column. Bottom row. So there we go. This is how we can use template area. 27. Grid 08 Grid Template : Okay, so next up we have grid template. And this actually just a shorthand for setting grid template grows angry template columns and grid template areas in single declaration. So let's take a look at how this looks. So happy handler comment with grid template. Okay, again, I'm going to take all contain our grid template container, a great container, just, I'm going to display it as grid. And after this, we don't need this columns and row. So I'm going to also comment out the above section. So we don't have any computer k and r items are squished together. Their display this as grid. And we just get into typing grid template. Now, this works exactly like we did up here. So I'm going to copy this and paste it down here. Don't eat this. And now we take a look, well, it's still working. Because somewhere up here we have defined some repetition. So for example, here we have repeat and so on, so on. So I'm going to comment all of them out. And we also need to know that that's enough. But you still need to have the area's defined for each item needs to have a name. Now, I could do something like go here and say that this particular column or row should have 80 pixels. You actually need to be outside of quotations, so 80 pixels. Okay, so let's take a look. Then I'm going to set our second row to the next one also to autosome, just going to copy this. This one also to auto and photon going to set the 30 pixels. And this are actually the heights of rows. Okay, so let's hit Save and down here and we need it back, a forward slash. And then we're going to set auto 50 pixels. And auto again. This should be like this. Okay, so let's take a look now. Now, what did we achieve here? We achieved basically the same thing that we had up here. But we now define a specific role to have a height. For example, the navigation will have a height of 80 pixels. In here we have only 80 pixels. And if we change this to, let's say 200 pixels. And let's take a look. Everything else will be squished together because we have the next three rows as auto. So there's changes back to 80 pixels, will not 800. Okay? And we can also change, for example, this one to 100 pixels and it would be fixed. And so far, so on. Okay, so that's pretty much it about the shorthand grid template. 28. Grid 09 Grid Gap : Now in this video we're going to learn about grid gap. The gap specifies the size of the grid line. You can think of it like setting the width of the gutters between columns and rows. And please note that the gutters only created between the columns and rows, not out the edges of the grid case. Let's take a look at how this looks. Okay, so let's start with the comment of grid gap. Now, first of all, where is this gap is actually between these lines? You can't see anything right now because we don't have any gap. But let's insert some sort of gap. So again, to select our container, container, because the gap between the columns and the rows, sum, sum pred syntaxes were grid column gap. As you can see, it is already out of use, so this property is obsolete, but it's still going, but I'm still going to show you how it works. So great column and gap. Now for example, contained in here ten pixels. And if you go here, you can see that between our columns, we have now ten pixels out gap. Okay? Now let's do the same thing for the rows. I'm just going to copy this. And instead of column, I'm going to replace it with row. And let's increase this X-ray to 20 pixels. Now we have a gap between our roles of 20 pixels. Okay? But this, as I said, the syntax is, are no longer used, were going to comment this out. And instead of grid column gap and grid row gap, there is just gap and the gap lose sight then like disk, so just typing cap. And normally you would have now row, the first syntax and the second column. So second value. So let's try this out. Let's see gap. And let's say we had up there ten pixels. Now let's change it. Let's say 20 pixels. And pixels. I sure did. Same thing, should have had ten pixels. And pixels are going to chain our row and columns. I'm going to comment this one out. So let's take a look. Okay, so now we changed between that we have ten pixels between rows and 20 pixels between the columns. Now, if you want to have only one value between rows and columns, they could just typing gap and victim pixels for example. And if you take a look, we have now flipped him pixels between rows and columns. Okay, so that's pretty much it for the gap. Seeing the next one. 29. Grid 10 Justify Items: Okay, so next up we have justified items. And this one line Greed items along the inline row axes as opposite to align items which aligns along the block column xs. This applies to all grid items inside the container. So let's take a look at how this works. So let's type in universal way comment, justify items. Okay, so let's take our container. And I'm going to actually comment out everything that we have up here. So this gap, and to see this anymore, and also our Grid container right here. Okay? So as again, going to display this grid, just typed in outside. So this play as grid. They're going to set the grid template columns to a repeat of two times one FR. So we have two fractions. Kate, we owe on, we'll have one here and one here. And I'll, Dems are now nested On the right side. We will fix this. So what are the values of the properties? First of all, we'll start off with justify items, and we'll start up to the start. And this will align the items to be flush width to the edge of the cell. So let's try and justify items. And let's go with start. Okay, let's take a look at this. Oh, and also please comment out the names. We don't need them right now. From up here to down here. That's come into Mt. Okay? Now it's working. Now next stop, let's justify the items to the end. To justify items. And we'll just fell into end, which will align the items to flush with end edge of the cell. So let's take a look. Okay, now there on the right side, then we'll have center. So justify items and center, which align the items to the center of the cell, obviously to the, now in the center of the cell. And last but not least, we will have justified items and stretch, which will fill the whole width of the cell. And it's actually the default value. So you know, if you, if I won't have anything to comment this one out, is basically the same because it is a default value in typing. Display grid, grid template column two times one and splice it into exactly two columns. And yeah, this is the default value of justified items. Okay, so that's it for Justify items. 30. Grid 11 Aling Items: Okay, so next up we have a line item. Now what this does is aligns grid items along the block column axis as opposite to justify items which aligns the items along the inline row axis. So this fellows up. And of course the value is applied to all of the grid items. So let's take a look at this. I'm gonna step in here comment line items. Like hey, we're going to take our Grid container again and you could just copy this actually. And a you shouldn't be here. Let me just comment this out and commented back in again. So copied, pasted down here. Take out the comment. And let's get started with it. So you should be actually up here. Okay, so let's start with a line items. Now for a line items we have exactly flag. For just about items. We have start and end, Center and stretch. So let's see what each of them and then we're going to move on. So let's go, let's go starting with start line items. At the start. That's flexor, Just thought. And it's an aligned the items to the flesh and the top edge of the cell. So let's take a look. As I said, this aligns the items to the flesh with the edge of the cell. Ok, so next up we're going to take a look at and say Save. As you can see this alliance, the items, the flush with the edge of the cell. Then we have center align items and center, which will align or items in the center of the cell. And last but not least, we have a line, items stretched, stretch, which is actually the default value. And as you can see, everything stays the same. Okay, so that's basically it for a line. Items. 31. Grid 12 Justify Content: Next up, let's learn about justify content. So sometimes the total size of your grid might be less than the size of the grid container. This could happen if all of your grid items are size with non-flexible units like pixels for example. In this case. In this case, you can set the alignment of the grid within the grid container. And this property will align the grid along the inline row axes as opposed to align content, which aligns the grid along the block column axis. So let's take a look at this number. So let's type in a comment of justify content. And let's get started by, let's take our container. Guess I'm Grid container. I'm going to comment this out. Now. First we will display it as grid. And now we'll type in Britain be Column repeat. And as I said, we need to have non-flexible units. So instead of typing in 1A far or percentages, we will have 150 pixels. Okay, so let's take a look. We have here our entire container, so the black background. And we also have our items and you can see they're not stretching to the edge of the container because each of them has only 150 pixels. Now let's justify the content with start, which will align the grid to the flush with the stock edge of the container. And then I hit save it. Okay, now let's try end. Let me scroll down a bit. Justify content end. And this will push ID to the edge of the grid container. Okay, next up we will have center, justify content and center. And then we're going to use now in the center of the container. And of course stretch, stretch, stretch our items up. Next we have a few things, see until now, and that will be space around space between space evenly. So let us first of all justify the content with space around. Now. This will place an even amount of space between each grid item with the half size space on the far ends. So let's see how this looks and puts, say click Save. Yeah, there it is. So this puts a space around the elements, evenly between the elements and evenly to the edges. Next up we have space between which replace even amount of space between each item with no space at the far ends of the containers. Let's hit Save. And you can see we have no space at the far edges, but only equal spaces between the items. And last but not least, we have just fake content with space evenly. Now this one will place an even amount of space between each grid item, including the far ends of the container. You can see the space is not only between the items, but also between the edges are equal. Okay, so that's basically it for justify content. 32. Grid 13 Aling Content: Next up, align content. Sometimes the total size of your grid might be less than the side of the container. This could happen if all of your grid items are size with non-flexible units like pixels. In this case, you can set the alignment of the grid within the grid container. This property and I disagreed along the block column axis as opposite to justify content rich aligned the grid along the inline roll axis. So let's take a look at it. Okay, so let's grab onto our container again. Class of container, Grid. Container does display it as grid. And let me also comment out. Could comment out everything here. And remain. Yeah, remind me the grid template column of free. So repeat three times and when to use pixels again, okay, so 100 into 175 pixels. And click refresh here. Yep, there we go. Okay, so let's start with aligning the content to restart. So line items, content to the start. And this will align the credit to the flush with the start edge of the grid containers. So because the, all of the items are up here at the start. Now let's go with end line, items. And items. It's content to the end, which will align the items, the flush width, end edge of the grid container. And there are hit save. Second. So now they're down here. Then we have center align content to the center, which of course would align the grid in the center of the grid container. Then we have stretch content and stretch property. And this will just size the grid items to allow the grid to fill the full height of the Grid container. And keep forgetting to hit save and then go. And exactly as we had in justify content, we also have a line content space between. Actually start with space around. We should place an even amount of space between each item, help Sai space on the far ends of the container. So let's take a look. As can see between the items, there's equal space and within the edges, there's halt the space. Next up we have space between align content with space between which places an even amount of space between each grid item with no space to the four ends. I keep forgetting to hit Save. There we go. And we have space evenly, which you place an even amount of space between each grid item, including the four ends. Okay, so that's basically it for align content. 33. Grid 14 Grid Auto Columns & Rows: Now let's take a look at grid, outer column and rows. And this is specifies the size of any auto-generate the grid track AK, implicit grip tracks. Implicit good tracks get created when they are more aggregate items then cells in the grid, or when a grid item is placed outside, offer explicit grids. So let's take a look at how this actually looks. Now let's type in a comment here with grid, auto columns and grade all rows. Okay, now let's take a container again. Grid container, this plate, this grid. I'm going to comment out again. This part is, let's save and let's take a look at our grid, k. And now let's change the grid auto columns to say 100 pixels. And for grid all rows, we're going to use 80 pixels. Now again, we need to take each item separately. So let's take the grid item and we're going to select the children. So first one, open this and actually going to copy this a few times. So one bomb bone for 56 and also less change them so that you will be the second child, the third child, fourth, 1, fifth 1, and the sixth one. Imagine having six children. Just imagine a bit. Okay, now let's take the first child and let's say grid column. Put this grid column from one to two. What this does, and it actually finished this and the grid row 123. And let's take a look what this does. You see we have this. This is why I am using Firefox for this specific example for explaining grit, because Firefox has this column numeric station. So the first column ends from the line one to line two, and the first row should end from one to two. But now with spending it to free. So I'm just giving an example. If I would spend this down to five, I sort of free, I could tap in here five. And this will push the item down to the fifth. Also then creating a sixth one down here, not a sixth item, but you can see it pushes outside our Grid container that we change this to free back again. And let's start playing around with our items. So the second child we could say grid column and we'll go places form one slash free. And grid row. Could now go to from two to three. So let's see what happened. Here. We see the second item is not spinning at its overlapping or first one, but spending form 123. And from two to three. Exactly as we specified it here. And now let's take offered item. Let's say credit column 123 and row. Let's go with two tools for okay, and I was spending from here to down here. Let's take a fourth one. Let's give another example, grid column. And we're going to spend this from four to five. On the columns and on the grid rows. We can spend it, it's something like four to five again, 0.5 slash five. Okay? And there we go. The less two of them are going to leave it up to you. Suspend them as you wish. Okay, so that's basically it for auto columns and rows. 34. Grid 15 Grid Auto Flow: And the last property of our panned quit container is quit flow. If your grid items that you don't explicitly placed on the grid, the outplacement algorithm kicks in, it automatically placing those items. This property controls how the auto placement algorithm works. So let's take a look at it. Plus lattes to go down here and type in a comment. So greyed out of flow with low like inelastic or pan container again, on the items, but the container grid. There we go. Let's display this grid. And it's also scroll down a bit. Now, let's set our grid template columns to repeat and repeat six times 100 pixels. And we'll also use a grid template row, because I want to have only 100 pixel height rows. So let's also try to do this a bit later on. So let's take a look at our grid and we have six columns now, this perfect and 100 pixel height. Now they're still influenced by our children, which we did in our last video. But I'm going to Drew I still need a few of those. So let's first of all set our grid, our o flow. And first we're going to take a look at grid out of flow in a row direction. And what this does is it tells the outer place on algorithm to fill in each row in turn, adding new rows as necessary. So this is actually the default value. Now, I need to comment out to go up, up, up, up, and to comment out all of the items. And I'm also going to come and dot-dot container right here. So we don't have an interference. Ok, so this is the basic default value. Now let me take the first two Chew right here. Code down, based it in. So the first one, we're going to set it, we don't need this, this two. So grid column one and row, we live it at three. And down here, the second item, unless it at three. And the second one, we're going to go form for, let's say from one to four. That's it, save stake. Look what happened. So our first item flows from one to three and our second item two to four. So from one to four exactly as we specified. But also on the grid column, I placed it in the third position. So that's why I seeing the second item, not here, but in the third position, in the third column. So once again, with grid flow, without a flow and grid column, we're specifying the exact position where the item should go and which grid row. Here we're specifying its flow from one to four, okay, so it's going from one to the fourth line is simplistic. Look at crit column. So I'm going to take this out of flowing that to specify a column direction. Now, you see how the change is already happening and the lesson, we're going to take a look at the dense case. I'm just going to copy this again and paste it down here and say dense. I miss click. So dense. And this tells the grid all the placement algorithm to attend, to fill in holes earlier in the grid if small items can come up later. Okay. So that's basically it for grit out of flow. 35. Grid 16 Grid Column & Grid Row Start & End: Okay. So let's stop playing around with the properties of the children. And the first one will be quit com Start and grid column. And so I'm going to leave the grid contained as it is. Going to comment out this line accepting that I'm going to leave everything as it is. Now let's take let's take our children. So crit column grid item selecting the first child or nth-child number one. And I could actually change its color, background color. Let's go with red. Okay, let's hit Save elastic element to read what I have done has go with blue. Blue. Okay, there's our first child. Now let's go with grid column. And now we're going to tell it from where it stops. So let's say it's going to start at two, then grid, column and end. And it's going to end. And that's a number five. Hit save. And let's take a look at what just happened. So starting at two and its ending at five. Grid row on the rho direction for grid row start. It should start at, let's see, free and grid row end. And it should end at, let's say four. Let's see what happened. So we started at that free ended at four. And on the road. And on a column direction we started at two and edit at five. And let's take another one. Let's take the second child and shout. Okay, and this child going to select the second one and scroll down a bit. And let's change this to say green color, the background color. And now let's start positioning it again. So we're going to go for soil grid column, start at four, let's say, and grid column. And we're going to end it at six. Save. And let's take a look. So starting at the column, at the line of the column four and its ending at the sixth column. And the same thing we could do for a role. So grid rule start at two and also going to end it at two. So grid, grid, row end. Okay, let's hit Save. So I think you've got the idea with columns starting grid column. 36. Grid 17 ShortHand Grid Column & Grid Row: Now this is just a short complimentary video to our previous video. We also have grid column and grid row, which are shorthands for good template. For grid columns start and end with rural stopped. And we also have create column and grid row with only one specification. So let's take a look at how this looks. So instead of having up here, we already did it in previous videos. We've specified a sticker, write them here, and a c. This will be the third item. And it'll commented out now. So offered item, let's take a look at it. It's value here. Okay? So when we're specifying, for example, and changes color, changes color to purple, background color. And let's choose purple. Okay, there's now, if I do hear a slash to this just means that I am specifying the start and the end. Okay, so look exactly like it looks right here because we have 1122. But if I was span it to free, so we should end a tree that is panned to the third column. Actually referred to the start of the foot collins referred line. So if I live it only with 11 value, then I could tell it, hey, this is at column two. So you can see this is moving to column two. And the sank, the exact same thing for the row. If I specified it, Odysseus spend from anyone from two to three, then it starting at two and spanning two, the third line in the columns. And if I would now just tell it, hey, stairs free, they would go down to the third row. Okay. And yeah, that's basically it for the shorthand. 37. Grid 18 Justify Self: So the next property we're going to learn about is for the items is justified self, which aligns a grid item inside of a cell along the line row axis, as opposed to align itself, which will align along the block column axis. Now this applies to the grid item inside the cell. So let's take a look at this. And right here I'm going to type in another comment justify itself. So let's go down here and let me just see, I'm figuring going to leave the grid containers. It is with six cells and row height of one pixels. And now let me take, for example, the second child right here. Now let's comment out all of these positions. So the grid, column grid start and Soufan Swan. And now let's justify itself. First of all, we're going to start with a start and a vector. And what this will do is aligns the grid item to be flushed with the start edge of the cell. So if I go in here and hit Refresh, so we justified the second child. K's can see writing here within a cell. It's aligned to the flush with start of itself. So let's try now. And which will align the width item to look flush with end edge of the cell. So if I'm going to change and I'm just going to copy this x-ray that b here and hit enter, hit save. And you can see the second item is now pushed to the right side. Next up is centered. So justify myself and center, which align the grid item to the center of the cell. And don't forget, we are spanning this form for two to here. So the last thing is stretch, which is the default value. So let us see justify self and then stretch. Stretch. And now the item is stretched to out itself. Okay, so that's it for justifies itself. 38. Grid 19 Aling Self: Okay, so the next child property is aligned self. And this will align a grid item inside a cell along the block column axis as opposite to what we just justify cell which will align along the axis. This value also applies to the content inside a single grid item. So let's take a look at it. Do I have them change? You should be here. Right? So not a comment down here. Justify self aligned, self, Sorry. Okay, now let's grab on to this free. For the third item, we have it set as purple. Let me change a couple of things. So I want to have it with a columns start at, let's say six and went to copy this column end at seven. Pushed out actually holder container. Okay. Now let's have a row start at three and a row end at four. Okay, so let's take a look at exactly there. Now let's go over the values of a line itself. So we have align self to the Start, which align items through a flush with start edge of the cell. So let's itself. Okay, so it's up here. Then we have end. Zach, luck, start this. We'll align it to the end of the cell. Then we have Y one. We have centered, which will push it in the center of the cell. And then we have stretch, which is the default value. And we'll stretch it out. Okay? So that's basically it for aligned self. 39. Grid 20 Place Self: And the last property of the children is placed self. No place else sets both align self and justify self properties as a single declaration. So let's take a look at how this looks. So we'll select let's take another let's remain with this first child. I'm going to copy it and they hear a comment of place, self care, I could leave it right here it is. So as far as positioning. And now we'll type in place self. And if we type in auto, this will be the default value. So go, Yeah. Why are changed the places again, usually be on the right side, is a place health. It's autumn. And now we could do something like play self. And let's say we want it to be. So the first value will be aligned itself and the second one will be justify myself. Especially typing here comment with the first value of place of where you type in. And you're using a remainder, place the self. The first value will be justify myself. And then the second value with a slash, forward slash. Actually the first one is aligns up. So let me copy this. Keep messing this up. It's aligned self and then justify self. Ok, so if I type in here, let's say I wanted to say end and center. Okay, let's see what happens. So we're looking at the third items is down to the end, but in the center. Okay. Could change this now to the top. So start. And as 2D start, okay? And they should be up here and photography here both Center. Hit Save, then it's dead in the center of the cell. So if I leave only one value, then the second one is omitted and stays in the center. If I type in here, start, hit Enter, it's going to be start up here and sort the left. Now, I could push it to the right or to the center. Let's push it here down to the center. And this means I should do here center and start. Let me hit Save. Ok. So I hope you get it is, it's pretty simple actually. And also did it for our grid. So let's get started with a project. 40. Grid Website Intro 01: Hey, what's going on, guys? So in the next video, we're going to put our knowledge to the test. And we're going to create a simple Bert, perfect project for a CSS grid layout. Now this project that I said will not contain any magic effects, any out of the ordinary, just a grid layout. And we'll also compare really precise where to use Grid would use a grid layout and reduce the flexbox layout. Because in some instances, it's good to use flexbox and in some senses is better idea to use Grid. So let's go a bit. Fruit aside. It's either said, it's pretty simple. We'll have a logo up here. Then we have a small navigational up here with a few hopper effects. This will not do anything specifically because this is not the idea. We just want to, to exercise our grid. We just want to exercise our grid knowledge and also apply it. Also here we have a few titles than here we will have if your subtitles. And then we'll have images. And when we hover over the images, this we will have a blur effect and is read more will appear. Ok, so we will use pseudo-selectors like before and after. And at the end, we'll have here a bit of a context or follow social networks, contact address, street, phone and website, and then a footer. And down here will also CSS grid and also let me show you this in the inspector. So if we click on section four, you will see on the secondary side we also have here a free column grid system in our main section. And you can see that some items are spanning over to columns. And also down here we also have a span of two columns. This everything in one column. And down here will have a null span for the footer over two columns and then a separation for the social media following and the address itself. So the, I think this is a perfect project for exercising cred and for you then to do your own project after this. So let's get into the project. 41. Grid Website Basic Setup and Starter files: Okay, so as always, we'll get started with a basic setup. So for, so all files would be an index.html and a style.css. Hey, I just typed this wrong. Yep, a comma. Instead of a dot. There we go. And a style.css. So let's get started with HTML. We're going to use Emmett, so shift one. And let's give this a name first of all, upside. And up here we're going to link up our style.css. So link here style.css, okay. Now I am going to use to external technologies, one being Google fonts. And for the icons we going to use Font Awesome. So you don't have a Font Awesome account. You can go ahead and create it all. Just go to Google and typing CDN. You can get your font. Awesome kid. It is a free kit and we'll have all the basic Font, Awesome icons. So I'm going to just copy my kid within here, which you will see is just the link. So I'm going to copy it above my CSS file. And down in the body and will not dereference. Go down here. Now, down in the body, I'm just going to type in a few notations. So if you comments for our header, this is just a section that we're going to create, a header, then a main. And at the end we'll have a footer. Okay, so that's basically it for this website. Now let's quickly as also open it up. Open it with live server. Okay, there we have a blank page. And now let's also go into our CSS and for a general research, so star, and let's reset our margins. 0, padding 0 and box-sizing border-box. Now another thing that I am going to do within our style is include our font or Google fonts. So let's go to Google Fonts. Who just type into Google, Google fonts and think, I'm going to actually used PT sense. Now, narrow this one right here. So just click on it. And I used this 400 regular style. So gone, select style, gone import, then going to copy this at import. So just copy it. Go back into our code editor. And now let's target are actually we need to import the so called imported right here, paste it in, and then we're going to target our body. And I'm going to set the body first of all to a max width of 900 pixels. Now, depending on your screen with how are you going to say max-width to. You can also go with 700 and the margins auto. Okay, and this was center, are, we can say it right now because we don't have an HTML, but this center, everything into the center of the page and will also will have left and right if we can also check it out. So let's open up our inspect two also need to have this opened. And if I go on the body yep, you can always see it. It's in the center and it has 900 pixels there. So that's pretty much it for our basic setup. Let's check out again our HTML. We have our styling top, we have our font-awesome linked up. And yeah, we can get started so soon that X1. 42. Grid Website Header Logo and Navigation: I guess let's start styling our header, where we actually also will have our logo and our navigation. So let me get started with a header tag, this type in header. And within our header tag on first. And we're going to create a class, a non-class, but a div with an ID of logo kit within my logo div, I will have an anchor tag with an app that will go basically nowhere. So just hash and then I will have an H1 with the span tag within it. And within a span thing, I'm going to type in the initials and thought and you can type whatever you want obviously. Okay, so we have this setup. That's it for our logo, Muhammad Ali for logo, going to create a nav tag now is just a generic tag for the navigation. Within our nav tag. I'm going to create the UL in unordered list with an ID of nabs or hash nav UL hash nap. This will give me a URL with an eye nav. And within here we're going to create a lie. And after that, by using the plus sign, going to include the plus sign, but the greater then when we include the anchor tag. And I'm going to multiply this by four. So let's see what we get. Now I'm going to multiply everything, so we need to have it in parenthesis by four. So four, and we had to get for allies with integrated anchor text. Now, the first one, actually, all of them will go nowhere. So just hash. But the first anchor tag, you should, the first LI tag Did I just jumped on my CSS. The first LI tag will also have a class, so let's give it a class of selected or select. And our thin here with no anchor tags, I'm going to type in his news than artists, let's say. Then production. And the last one will be information. Okay, so that's basically it for the HTML. So for the mockup now is go into our style.css. And, but first of all, let's take a look at what we just created it. There we go. So we have our logo up here and we have our navigation down here. Now, another thing that I want to do is take out in the general settings. So in the star up here, we're going to take out all of the texts, decorations, and all the list styling. So decoration went to set it to None. And also list time. I forgot to close it up. List-style. You're also going to set it to None. And before I hit Save, Let me show you something. So you see this on the lines and the dots. There is why we are going to take out. So after we hit save, you see the normal underlines and normal dots. Okay, first words first. This is a perfect example where Flex differs from grid. I would never use a grid system on a navigation. Basically because sending it as flux is much easier than set it as grid. You base. Double my workflow, triple the amount of work I have to do on a grid navigation or grid-based layout navigation than on a flex based navigation. So let me show you how simple it is. We're going to grab onto the header. I'm going to display it first of all as flux. Then I'm going to justify the content Center and align all the items to the center. And as soon as I do this, let's see what we have here. A nicely laid off flexible, the two items are flexing in a row because flex flexing the row automatically. And then we have everything centered. Now we're not done yet. So let's go back and also need a bit of additional styling. So let's give it a padding of top and bottom one gram and left and right 0. And also a border to the bottom of one pixel, solid and a hash of 1.1.1, say dark color. Okay, we have this saved and there we go. There's our border bottom. Now a stake on nav, on f tag. Let's say nav. And we're going to give this a width of 100% of this will just take up 100% of the container it is contained in. The nav was actually contained. You go back to our HTML in our header tag. Okay, so now it's going to take up the entire width, but they still have this logo in thin here. So let's go back to our CSS. And let's start, actually wanted to go back to the SSS. Okay? And let's start targeting our nav ID, nav list on the idea of navigate. You're going to display this also as Flex and will justify the content to the Flex. And, and what this will do is this is going to push our nav to the end of the flex. Okay? Now another thing that I want to do is take my h one. And this is just basic styling. And give it a tech shadow of one pixel, one pixel, one pixel, and hash free, free, free. Kayla's hit Save. And now we have a bit of a tech shadow to the, to our logo right here. Next up, let's take, let's take within our nav ID or items or allies. So nav LI. And now we're going to position them relative to add margin to the left of one RAM. And what this will do is we'll add to the left of each LI, one RAM margin. So they will be pushed further to the left. Okay, now let's go back in here. And this also give it a padding to the bottom of 0.3 RAM. And then let's change the color to the hash 777. This is just a great color. Ok? So we have this one done. Actually they call it won't take effect because what we need to do is I'm going to copy this. We need to give the anchor tags, the color pop up of one of this gray color so I can actually delete it from here. And let's also give them a letter spacing of one pixel. So I'm going to increase the lattice spacing within our navigation items right here. Nonetheless, we all want to do is when I hover over an item to have a bit of change in the color. So let's go back to our styling and let's select this again. And I'm going to say that when I'm hovering over an anchor tag, and then to change the color to hash 1.1.1. And I can just delete this letter spacing. So let's try this out. When we hover over items, see the colors changing. Ok, that's basically it for this part. Now, the last thing I want to do is we had that select class. And what that did is created a on the line before on the NIF are first all selected items, so less data select class. So select. And let's type in before. Now as content, we're going to leave it open, is normally accepts a string within it. We could type in something in here, but we're not going to do this. We're going to, first of all give it a background color of a 777. That's enough, just a grey color. Then going to give it a width of 100% of its container. So it's going to take up the entire width of the element that is before a height of two pixels. Thinker could oversee it. And we can say just now, because we still need to position it. So position it because we have the derivatives. We had our allies positioned relative. Now we can position this absolute and we're going to position it absolute to the bottom of the element 0. Okay, so soon that hit save. We'll see we have this nice on the line here as if this would be the page that is selected. Okay, so that's pretty much it for Nevin. 43. Grid Website Main Section: Next up we're going to take on our main section. So let's go in here and let's start creating. Well, we will have a main section. And then within this, I'm going to create another section tag. Then this section tag, we'll have an id of news. And busy. Why I'm doing this is you could go right here and type in news. And you few would have multiple pages, article plugins so far and so on. You, and you will click on this news. It'll send you to this, to this part of the page. So our navigation is now linked up to this news section. Now within this section we're going to create a few containers. So let's start off with a class dot card and container. After caught container, you'll have an h3 with a class of card title. Title within it, are going to create a few and just hit safest along and space the bit down. Yet to create a strong tag and type in my name, Norbert mind, heart. And this will be the same. The creator of this news. And then a Laura, I think they used Lauren ten. Yep, that's it. Now we are going to go outside the h3. So this would be particularly the title. And if you're wondering where everything is still bold, it will take care of this with CSS later on, but still wanted to have the name as in the editor or the one that posted this, this news article, to have it with bold. Because let's go back and talk card and I'm going to create an H5. And this will have a class of card subtitle. With our course subtitle is where we're going to nest this free view work View Profile, postdate. Here's this actually disposed state could be a date, but I'm just going to type in post dates. So this three will be actually between anchor text. So we'll create one uncut tab which will go nowhere. And I'm going to, I could just copy this 123. And the first one will be view work. Then the second one, view profile. And the last one. Post date. Now after our cars subtitles will come the post itself. So actually just an image. So let's go down here and I skated image tag. Now the image tag, which will essentially also have a class for nothing for so gravity class, class of card image, ING, alternate text card image. And for the source. Now, now for the source, we need to go to a website. This website is on splashed. Actually source dot on splash. And from here we're going to grab on, this is just some basic API. I'm going to grab on tape collection. So which one did I use to draw user was up here because I needed the entire collection. Collection. Collection. Yeah, I could just take this and then replace it basically with an ID. So you would take this HTTP. Okay, let's copy it as go into our image source. Paste it in. And basically what we're going to do is replace that. First of all, I'm going to change the direction so I don't want and not all of them. A couple of them are going to change the direction later on. But after user went to typing collection, and at the collection, I'm going to have another slash and going to type in some numbers. So let's say 6770801, okay. Now as soon as I hit save and go back actually to a website, hey, there's our first image. Now, let's copy this container. So if you go here to the left, you can close up with the tag. The opening tag opens and the closing tag closes. So copy this one time. So we need to copy it forward as 1234. And we should have now five chords yet to have a 5x times. Now we do need to change a couple of them. So what I'm going to do is again to go back up here, open it up. And the first one, I'm going to push it horizontally. And this just means I'm going to change, here is the width and height of the image. So I'm going to change them into change this to 900 and this to one hundred ten hundred, six hundred is lessons that hit save. And I was still loading. And also these images will constantly reload. They are actually random images or key. Let's go down to the next one. We're going to change this one to 8880271. And I'm going to leave it as it is 1600 to 900. Dan does go down to the first image. And this will have a code of one to five. Then 8072. And the direction will be the same as go down to the next one. So this will be the fourth one. This will have a code of 1371375619. And I'm going to change the direction of this 1901,600. And I think that's basically it. So let me just check it out. The first diminish second image. Now before it get confused, let us actually styled as images. So let's go into our styling. Css file is typing here main comment. Then down here are going to target the class of card container. And we're going to give this a min-width of 300 pixels. And basically what this means is, no matter what happens, it will not be smaller than 300 pixels. Knowledge change the height to 100%. And let's display it as flex. And the reason I'm going to do this is you will shortly see I'm going to be basically having Moscow back into HTML. We are having this take this container. This container has 123 items. So if I want this free items to be one underneath each other, I could use Grid. And then column. I'm basically going to use only one column then. So let's see what the difference would be. So instead of displaying it as flux, which will result. And I don't need you anymore. We could actually close this one and this flexes in a road. But I'm going to use now for example, grid and grid template column of one FIR, only one fraction. Okay, so this will actually put everything into one column. And I also need to use position relative because I want to have that value. So we had this when I'm hovering and I'm actually hovering over a tile container than this Read More appears in only when I'm hovering over the Read More, the blur effect disappears. Ok, so let us go back to our CSS. And let's continue on by targeting or card container. Now, I want, when I hover over it to creative to use pseudo selector before. And as I said, we'll have the cursor effect will position it. Position a position at absolute. The funder content. This time, as I said, we can also type in here, or this awaits a string. We will type in here, read more dot-dot-dot. Then going to align this text to the centre. So text-align center. So we are aligning this read mortar centeredness. This, nope, not here. Now we can see this because this is extremely large. So before I'm going to do this, let me actually resize the image. And let me also finished dialing in to push this down. Then you styling our card itself. And I'm actually going to go up here. So car title is the first thing I want to start, card dash title. And we inserted here font family. Okay, now let's actually use it. So I'm going to go back. Font us into Google fonts. And from here I'm going to select the font-family. So the cod title will have the font family of pity sans serif. And I'll go back to our page, can see the car title changing hay and we hover over it. So there's our read more right here. That's not where we want to position it, but we're going to take care of this very shortly. So let's start let's finish our car title. And as I said, the rest of it. So I sent him the mean, the rest of it should have a different font weights. So let's type in font weight of 100. And as soon as we do this, you'll see the rest. And actually only this one shape. For now everything will have the 100 font weight. And now we can go back in here and give it a bit of a padding. Two top and bottom, 0.4. RAM and left and right 0. Okay, next time we're going to take our current title. And the strong tag within it, and we're going to change his palm back. So font weight to 600, let's say. And we're also going to increase the font size to 1.7 rem from its initial size. So let's hit Save. And let's go back in here and you can see our name now has a stronger font size is also larger than the rest of the text. Nonetheless, thing I want to do the title actually two things is first of all, I'm going to take this strong. So this one again. And I want to have a text decoration effect when I hover over it. So let's see, let's say harbor. When we hover or strong element, the cursor should be pointer and the text decoration should be on the line. Okay, so soon as we do this, when we hover titles or editor right here, see the name has now a tax declaration of underlined. Okay, now let's take care of our subtitles. So card, class of card. The subtitles. Now within here we're going to give it a padding of point free RAM, top and bottom and 0 left and right. And we'll also going to change now the, the text or texts transform to uppercase. And as soon as we do this, we'll say down here the subtitles, all of this will have now a uppercase. But I think I forgot something, I forgot those backslashes, so no problem with the fixed this literature. What is the simplest way to fix this? I could just go one after another and do this, but I don't want to do that. So there's a Go up here where we have our very, very first card. Going to select this ending tag down, going to hold down control or on the Mac command, and then press D and then press it through the, the, the going to jump down to the next one. Here we have 12 selected. We still need this tool. So the D, and I'm going to press one times, right? Then put in my backslash. Okay, so as soon as I do this, we'll have this backslashes at the end of our posts. At the end of our subtype goes. This is taking care of knowledge. Go back to our subtitles in our CSS. And let's say let me copy this again. One to take care of my anchor tags. Within here the anchor tags do delete. This will have a color of hash 777, a font-weight, or 400. So we're going to increase the font width and the letter spacing of one pixel. Ok, as soon as we save this, say, font-weight increased, the also the the letter spacing increased and our color is now grey. Now one also when we hover over them to have the same effect that we have up here for navigation. So let's just go and take this anchor tag again. So card subtitles and anchor tag. Let's type in here. Hover. Well, there, at the end of the hank anchor tag hover, hover over it. We want to change a color to a dark color. Okay, and is also taking effect. Now let's take care of the card image. So down here, the NIF or caught subtitles, we're going to say card and Daesh image. And we're going to give it a width of 100% of its container and then position it absolute. And that's, I think basically it for card image, cars, cars, card. Wondering why it doesn't didn't take effect. And we still have some missing Jason home. We can go back to our main caught container. And I'm going to leave this in our display grid, but commented out. Now, let's display it as flex. Again to justify the content to the center. And also align the items to the center. And the flex direction should be in a column direction because flex, flex is automatically in a row. And as soon as we do this, this now that we took care of our images, we can take care of a section. So the last thing I need to do after we take our section is complete this one. But I'm still need to display images correctly. So as you can see, these cards are not one. One on the top of the chart. And this is where we're going to take our section and start styling it as a great section. So let's take the section tag and let's first of all displayed as grid. Now we're going to 2s or grid template column as repeat, and I'm going to repeat three times 1 f bar. And basically what this means, we're going to create three columns like as you can already see, that the images are starting to take shape. Now in order to have a bit of a separation, going to also give them a gap. So for the rows and columns of 1 free RAM, and as I do, this will have a separations between the, between the columns and between the rows. We will have it a bit later on. You will see why. Now let's start taking us sections children, so section and select our children. Some nth-child meant to select the hay and Child and the first one. And we're going to place the first one, we grid column form 123, and then grid row from one to two. And I'm going to align a set aligned cell to stretch. Ok. As soon as we do this, we'll see our first item is aligned correctly. So we need to do now is repeat this for each and every child. So we have five children. Let's take the second 1 second child for child, fourth child. And I actually don't need the fifth child. So the second one we're going to stretch it with the first one ended. So home the third column referred search and is going to spend in the rows from the first to the third. Okay? Now the third one, parental leave it at column 123. But we're going to change the rules to N2. And the fourth one will be also form 123. But it's going to span from the rules. Free, two, free. Okay, let's hit save and let's see what happened. So after this, our images should be well aligned correctly. Now the last thing I want to do is have our, this actually heavy, heavy effect OK, on our current image. And what I'm going to do here is have to copy the card image itself. So the class and then have a hover effect of it. So we hover over it. I want it to have a crucial pointer just to beat the n, o k. So when I hover it, I wanted to have a cursor pointer. And then a filter on the hill, hill TR of blur, blur. And we're going to suggest the two pixel blur. So let's check the Sudbury hallway image. Cities to pixel blur. Kn. Now the last thing I want to do is actually to paste this in. Okay, so that's basically it for our section. Now, the last thing we need to do is tell our footer and then we're done. Also make it responsive. But deaths will, that will be a single video. So that's it for this one. 44. Grid Website Footer: Okay, so let's take care of our Footer section. I'm going to go downhill on top comment of Footer. And within here we're going to create first a div with an ID, so not the dot, but has social container. Within here I'm going to have a paragraph tag and just the simple follow us. Methyl paragraph tag. Good creep for eye contact. Now this icon tags were actually the italic tags, but we're going to use Font Awesome form, noun. So we need a class of FAB. And then f, a dash. First one will be Facebook. I forgot them. Oh, here. Okay, so let's save it and see if it took effect already. There we go. There's our Facebook. And I'm going to copy this three more times. And I'm going to place our FIFA, the person with Instagram than the second one made Twitter. And the last one with LinkedIn. Let's hit save. And I save this thick effect. Yep, there we go. There's our four, there are four eye contacts for social media. Now we're going to get another dip, send it underneath this tip. And this will have a idea of contact container. We can going to replace the. Now within here I'm going to create a UL. And for eyes. So times four. And in the first one we're going to type in city, then some kind of postcode. And the city. The next one will be our street, SO Street and then some street. A number at the end. Then a phone number. So phone I'm going to go with something he should. And down here, a website, so www dot the Web.com. Okay, let's hit Save. Don't meet you there. And the last thing I need here is another div with a class or a AID score with the class of copy. Okay, within a class, within this div, I'm going to create now a Just going to type in poleward by N and the copyright sign. So and copy. And the anchor tag, which will go nowhere. And this will have a target of _blank media and 2080. If you don't know, this is the 2080 principal. Okay. So this basically is for mock-up for footer and I should actually, hey, I forgot to put this into a footer tag. So put the tag and I'm going to take everything from here to here, cut it out, and put it in our footer tag. Well right now we can go to our CSS. So let's jump out to our CSS as typing here, comment footer, so we know what we're styling palm down here. Now let's take off footer tag. And let's give it a height of ten, viewport height. So don't want this to have a bigger hide the TAM view port height. Now for the width, we're going to go with 100% against and got to take up 100% of its container. And now again, and now we're going to display it not inline, but let's grid. And for the grid template column, we're going to use two times, one at farce 1F1 file. You can type in repeat one at far, repeat two times1 FR. And this already should, should, should, should create container with two grids. So let's open this up here and let's take a look yet, but we have to columns. Now let's go back into our container, into our CSS. And less. Now justify and justify cell center. And let's give this a Martin from the top of a ramp. And this will just basically pushed down our Fuhrer to RAM from the top. Now also wanted to give it a border to the top. So we have a bit of a separation of one pixel solid and a hash of free Fifi, exactly as we did we with our navigation. And now let's also give it a padding from the top. Padding top of to ram. Okay, so they should specify, so this is the line and this is the pairing between the line and the content. Nanga did select the footers children again, so footer. And this should be actually done here. Because we have within our footer, we go we have anyone footer one to read this. So actually, it has three children. Oh, free items. So let's go footer, nth-child. And I could select number free or do something like last child, but I am going to remain with number three. Select last shot. Let's do last-child. Last child. And we don't need number of freedom. And let's tell it the B and a grid template column, grid column, who want to slash free. And on the grid row home to 22. What this will do unless justified the content, just myself. Item self. Just told yourself. Justify self to the center. Okay, and what this will do is spurred our copyright here above the two columns and place it in the center. Now, a couple of things I wanted to grab onto all of the icon tags. As you can remember, all the icon tanks had a class of FAB. Target them and change their color. To hash free, free, free. 777 prefix-free, then increase their font size, font size to 1.3. Ran. Endless also give them a padding to the right of 0.5 gram, which will then give them a bit of a space to the right side. Either it will push the next item but further to the right. And of course, a hallway eye contact. I wanted to have to have a cursor pointer. Nonetheless thing we're going to take our footer and the class of copy that we created. And we're going to give this a width of 100% of its container. Then we're going to change the background color to hash prefix free. Rent to change the color itself of the texts to hash FFS, white-collar, and to give it a padding for top and bottom of 0.5 gram and left and right 0. And of course text-align center. We have additional text. It will always remain in the center. Okay, so after this, it should look something like this. So the last thing I want to do is change this, that we are copied anchor tags, Footer, dot copy, and have an anchor tag within there. Just take a look in our HTML. Ok, so this was 2008. We're going to change this by targeting the anchor tag with it and just the target, the color to a hash. And let's go with 99. And there's too much nine. Okay, so there we go. And if I will deselect null our grid system, there's our footer. So hey, this is basically pretty awesome. Simple page. We have our effects right here. And down here are several social media and also for the deck. So the last thing we need to do is to make this responsive. So take care of this in the next video. So see you in the next one. 45. Grid Website Responsive: Okay, so the last thing we want to do to our pages, make it responsive. And for this, we're going to activate up here in the right corner, our tag right here for, for devices. And we'll just change it down to the sea iPad, iPhone, iPad that we go to. This will have a max width of 768. Now, when our website reaches to actually make it smaller than something smaller. So if this is 300, and I can remain here. So as soon as we are on the, let's say 600 pixels, this is most phones, really small tags and CR Bell, our website just goes out of the stratosphere. Okay, in order to fix this, we are going to create now a media query. So we're going to go down here type like comment of responsive. And we're going to now type in admin and went to target when the screen is, has a max width of max width of 600 pixels. So when it's under this next bit, the header will be displayed as grid. And you can already see I'm changing now from flexor grid and then Tuesday grid template column of repeat two times one FR. And we're going to justify the items now, the Center. So let's see what this does. So we're up here. And why isn't this taking effect? And not hit save? Strange? Let's take a look in our finished project. Did I miss something? This should actually look like this. So what am I missing here? Media max width 600 pixels. Have the display grid. Pretend oh, not column, row. Okay, I messed up. So Finish project and R1. Here we go, here. So we're changing it to have two rows or actually yet to rows. With each having its size still remains, but now it's on two roles. Okay, so it's having the same functionality. Now let's take care of our main section and then we're done. And for this we just came to see us go down here, so section, so section and we're going to display it as Flex. And instead of grid, and we're going to change the flex direction column. And this actually all we need to do and they'll go, oh, website is now perfect. Okay, so hope you enjoyed this little project. As you can see, there are differences when to use flags, when to use Grid. In my humble opinion, it really depends on the situation, but mostly for, for navigation, I would always use flags for sections or larger sections were images I included. And so far so alpha cards, overdubs also flex or in some instances grid. And then for displaying well main parts of the page, I would use Grid for footer footer sections. It depends on how large they are. If we have only two items that I would use, maybe Flex, but if I had more than two items are would use Grid. So more than two bundles, let's just say. Ok, So that's pretty much it for this project. Hoped you enjoyed it and see you next time. 46. 20 Conclusion When NOT to use Flexbox: This lets draw the line on flexbox and come to a conclusion. But before I talk about how useful flexbox is, I want to touch on when flexbox over-complicate things. And I will definitely not recommend using flexbox. First, don't use flexbox for page layout. A basic grid system using percentages, max-width, and media queries is a much safer approach. Creating responsive page layout optimally, you'd use a grid system in conjunction with flexbox to achieve a most responsive website. Furthermore, because the flexbox layout is dependent upon content, issues can arise as the page loads. Next, don't use display facts for everything. Ask yourself if flex really solves a alignment, a scale, or ordinary issues that can be solved in a simple way with basic CSS, sometimes free containers just look better in a line. So I will suggest scaling them using media queries in different formats, like tablets or phones. And last but not least, do not use flexbox with Internet Explorer. I don't care if they now named it edge or wherever they would name it in the future, as long as it does not work, please do not use flexors with it. First of all, first of all, make sure that if the website you are working on will have a lot of traffic of indent on Internet Explorer. The experience just won't look the same as on Google Chrome or Mozilla Firefox. I myself had some terrible experiences with 84 versions of it and at the worst time possible. So please check and double-check this before starting to work on your project. 47. 21 Conclusion When to use Flexbox: Now when should you use flexbox? Personally, I like to use flexbox For a few main things. For example, Scaling, vertical and horizontal, alignment and reordering elements within a container. These are best used on page components within a parent element. There are plenty of other uses for flexbox, like changing the direction of a column or row. But honestly, I prefer to use media queries and percentage base widths for creating columns and rows. Some best practices for using flexbox are as following four navigations. A common pattern for navigation is to have, a common pattern for navigations is to have a list of items displayed as horizontal bars. This pattern, as basic as it seems, was difficult to achieve before flexbox. It forms the most simple of flexbox examples and could be considered the ideal flexbox use case. You also have split navigations. Another way to align items on the main axis is to use auto margin. This enables this design pattern of navigation bar where one group of items are aligned to the left and the other group is aligned to the right side, centering an item. Now believe it or not. But before flexbox, developers would joke that the hardest problem in web design was vertical centering. This has now been made straightforward using the alignment properties in flexbox as you would now just displayed as flux, then align items through center and then justify content recenter. Also some best-case uses are for card layouts and media objects. And last but not least, form controls were flexors is particularly useful when it comes to styling form controls. Forms have a lot of markup and a lot of small elements that we typically want to align with each other. A common pattern is to have a input element pair with a button, perhaps for a search form, or whether you simply want your visitor to enter an email address. So in conclusion, whether you choose to use flexbox or not in your designs, always think about the best way to present the content that you have and then see how flexbox or other layout methods can help you achieve it. Okay, so thank you very much.