The Complete CSS Flexbox Guide With a Complete Project 2021 | Ahmed Sadek | Skillshare

Playback Speed


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

The Complete CSS Flexbox Guide With a Complete Project 2021

teacher avatar Ahmed Sadek, full stack web developer, freelancer & t

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

30 Lessons (2h 25m)
    • 1. 1 course introduction and what you're going to learn

      4:08
    • 2. 2 creating our first flexbox container

      3:08
    • 3. 3 understanding main and cross axes

      5:01
    • 4. 4 more about flex flow property

      2:24
    • 5. 5 learning the flex wrap property

      1:54
    • 6. 6 aligning elements with justify content property

      5:38
    • 7. 7 more about justify content

      2:13
    • 8. 8 aligning elements with align items property

      4:48
    • 9. 9 aligning a single element with align self property

      2:47
    • 10. 10 aligning multiple lines with align content property

      2:33
    • 11. 11 learning the order property

      2:48
    • 12. 12 flex grow

      6:31
    • 13. 13 flex shrink

      4:48
    • 14. 14 flexbasis

      4:21
    • 15. 15 section overview and starting files

      1:33
    • 16. 16 building a simple menu with flexbox

      9:00
    • 17. 17 building an advanced menu with flexbox

      7:28
    • 18. 18 overview of our final project

      4:09
    • 19. 19 building the holygrail layout

      5:32
    • 20. 20 building our header using flexbox

      6:36
    • 21. 21 building and styling our posts section

      7:05
    • 22. 22 adding flexbox to our posts

      3:51
    • 23. 23 building and styling the watch section

      4:42
    • 24. 24 adding flexbox to the watch section

      2:45
    • 25. 25 building and styling the download section

      7:20
    • 26. 26 adding flexbox to the download section

      7:53
    • 27. 27 building our gallery with the horizontal masonry layout using flexbox

      8:35
    • 28. 28 adding gallery lightbox plugin to our gallery

      3:54
    • 29. 29 building our sidebar using flexbox

      6:38
    • 30. 30 building our menu and our footer

      4:38
  • --
  • 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.

62

Students

--

Projects

About This Class

Are you tired of using floats then clearing these floats ?   

Are you tired of using positioning to achieve the layout you want and then finding out that the everything collapses when you view it on different screen sizes ?

do you want an efficient way to create complex layouts easily and quickly ?

do you want to create advanced responsive layouts using css only with just simple lines of code ?   

if so then this course is for you !

In this course you will learn everything you need to know to get started using flexbox in your future projects   

We will start by learning and understanding how flexbox works, because I think if you used flexbox before you might be overwhelmed by the number of new properties, we have about 11 or 12 new properties with an average of 4 potential values so it can be a little bit overwhelming to jump right in with everything,    

but in this course you will clearly understand how every property works and how a specific property can be used to control the layout in different ways    

I believe in learning by doing so after understanding and learning all the properties of flexbox we will get our hands dirty and we will start by building two menus, a simple single level menu and  an advanced one and in this section of the course you will see every thing you learned in action step by step   

One thing I put in my mind when I was building this course is that I wanted this course to stand out from other courses so I noticed that in all other flexbox courses you will just see some boxes on the screen all the time and the instructor is just moving them around using flexbox and at the end, the course will be finished and you become like "ok that was good i learned the basics of flexbox but now what? How can I use this knowledge in real world examples"   

 because after all the web pages are not some boxes moving around, right ? and that is exactly why I created the last section of the course.   

So in this last section we will build a complete project from scratch that I built for you , and my main focus while I was building this project is how to implement every property we will learn about flexbox in this project so you get a solid understanding of what we can do using these properties in real life!

So in this project you will learn how to create many advanced different layouts like

1 - the holygrail layout

2 - you will learn how to center elements vertically easily

3 - how to build posts articles with equal heights easily using flexbox

4 - very advanced cards layouts that is almost impossible to attain without flexbox

5 - the horizontal masonry layout which is very interesting

Meet Your Teacher

Teacher Profile Image

Ahmed Sadek

full stack web developer, freelancer & t

Teacher

Hi, it's Ahmed, glad you made it here!

i'm a senior web developer working as a freelancer for the last 7 years, i've developed hundreds of web projects and have tens of happy clients!

i've helped companies of all sizes to improve their business.

i can't wait to share all the web development knowledge i have with students here in skillshare so if you're interested in learning modern web development technologies we will see each other inside my courses!

 

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. 1 course introduction and what you're going to learn: Are you tired of using floats than having the clear those same floats? Are you tired of using positioning to achieve the layer you want? And then finding out that everything falls apart when you view it on different screen sizes. Do you want to create advanced responsive layouts and CSS using just simple lines of code. If so, then this course is for you. I'm an ADSR deck, a full-stack web developer and freelancer for more than seven years now. And I'll be your instructor throughout this course. In this series of lessons, you'll learn everything you need to know to get started using flexbox in your future projects. We'll start by learning and understanding how flexbox works. Because I think if you've ever tried using flexbox before, you might've been overwhelmed by the number of new properties. There are about 11 or 12 new properties with an average of four potential values. So it can be a little bit overwhelming to jump right in. But through this course, you'll get a clear understanding of how every property works and how each specific property can be used to control the layout in different ways. I believe in learning by doing so after understanding and learning all the properties of flexbox, we'll get our hands dirty and start by building two menus as simple, single level menu and an advanced one. And this part of the course, you'll see everything you learned in previous lessons in action step-by-step. One thing I kept in mind when I was building this course is that I wanted it to stand out from other courses. I noticed that in other flexbox courses, you just see some boxes on the screen and the instructors just moving them around using flexbox. And at the end of the course is suddenly finished and you're left thinking, okay, that was good. I learned the basics of flexbox. But now what, how can I use this knowledge in real-world examples? Because after all, webpages aren't just some boxes moving around, right? And that is exactly why I created the last section of this course. In that section, we'll build a complete project from scratch that I constructed for you. My main focus while I was coming up with this project is how to implement every property we learn about flexbox in the course. See you can get a solid understanding of what we can do using these properties. So in the project, you'll learn how to create many different events layouts. So you'll learn what the Holy Grail layout is and how to build it with just three or four lines of code. Before flexbox, that was impossible to attain with regular CSS. Once that's done, we'll build a header with the menu and we'll learn how to centrally the content vertically using flexbox, which used to be a huge headache. After that, will create equal height columns, which is a common layout that you'll see a lot in blogs or magazines sites. Then will create two more sections containing advanced cards layouts that will be very complex if you tried to create them using regular CSS. If you did that, you'd end up having too many lines of code and you'd find it very difficult to handle this kind of layout if you tried to make it responsive. Finally, we'll create an image gallery with this modern layout known as the horizontal masonry layout, which basically means that all the elements should have different random widths but the same height. We'll learn how to set up these random widths using some advanced CSS selectors. And of course, everything will be fully responsive. So it will look great on every screen size, from mobile devices to tablets and even wider screens. Now I'm here to serve you. So during this course, if you have any question and I mean, any question that comes to your mind, just put it in the Q and a section and I'll answer you as soon as possible. I also want to make this a five-star course. So if you have any suggestions, just leave a review with your constructive criticisms. I don't create courses and just leave them out there are regularly enhanced and update this course and maybe even add some more content if I see some good suggestions. Now with all that said, I can't wait to see you in the course. So hit the enroll button and let's dive in and start our journey learning flexbox. 2. 2 creating our first flexbox container: Hello everyone. In this lesson we're going to create our first flexbox container. So let's get started. All right, every time you want to use flexbox to control your elements, you have to go through three steps. First, you have to specify the elements you want to control. Its alignment are sizing or whatever using flexbox. In other words, the elements you want to apply flexbox onto. Second, you want to wrap all of these elements inside an outer container. And third, you want to set the display property of the container to flex by doing these three steps. Now you have a flex container, and inside of that flex container, you have flex items or elements, meaning that now you can use flexbox properties on that container or on those elements, or on both to control how these elements should look on your page according to your layout. Let me show you an example of what I'm talking about here in my code editor. I have some HTML, It's just basic HTML. You can see I have a div with a class of flex container. And inside of that, I've got for children divs with a class of flex item to each one of them. If I view those in my browser, you can see that they're displayed as block elements, of course, because they're divs, they're just sitting above each other. But now I want to use flexbox on this page. Let's use our three steps. First, choose the elements you want to control using flexbox. And of course we would choose these four divs. Second, but all of them inside an outer container. We already did that. You can see they're all wrapped with this outer div with a class of flex container. And then third, set the display property of the container to flex. Let's move to our CSS and do that. Scroll down a little bit until you find flex container and set display to flex. You can see now that by setting the display property of the container to flex, the flex elements are now kind of floated to the left and displayed side by side. And that's what display flex on its own does. Also, the width of each flex element will depend on its content. For example, if I write some extra text right here in the second div, you can see that its width increases to handle the content. And now the flex container and the flux elements are ready to be controlled by flexbox properties and we'll learn how to control them in upcoming videos. But for now, this is it for this lecture. I will see you in the next one. 3. 3 understanding main and cross axes: I think this lesson is one of the most important lessons in the entire course. And if you understand this lesson, then all the upcoming lessons, we'll be just building on this one. Because this lesson talks about the core CSS flexbox, which is understanding Maine and cross axis or flexbox. So let's begin. All right, so in the previous lesson, when we define the flex container by giving it display flex, you notice that the flex elements were displayed side-by-side horizontally. You might be wondering why horizontally and why not, for example, vertically. Well, there's a good reason. You see every time you define a flex container, that will also define the flow direction of the elements inside of that flex container. Whether this direction is horizontally or vertically, There are two flow directions. One row, which is applied as a default when you define the flex container and basically aligns items horizontally, like in the last video. And to column, which you have to apply if you want to override the default. And columns align items vertically. But how do I change the flow direction of the elements from row to column? Well, you use a property called flex flow and apply it to the flex container itself and set its value to column. So let's actually do that and see what it looks like here in my code editor in our CSS file, Let's say flex flow column. You can see now they're just sitting above each other like before. Now, what is the point of all that? And why did I say all those things? This is the most important lesson. Well, the reason is because when the flux flow is set to row, which again is the default, then two imaginary axes are automatically generated. The main axis and the cross axis. The main axis will be horizontal and the cross axis will be vertical. But if we set the flex flow to column, then the main axis in this case will be vertical and the cross axis will be horizontal. But still, what's the big deal? Why is that so important? Well, this is so important because later in the course, when we use flexbox properties, some of them will always affect elements along the main axis depending on whether it's horizontal or vertical. Remember, we said it will be horizontal. Flux flow is rho and it will be vertical if flex flow is column. And some other properties will always affect elements along the cross axis depending on whether it's horizontal or vertical. By understanding this, when you learn new properties, you'll only need to know what axis that property effects. If it's the main axis or if it's the cross axis. And you're good to go. Let me help you understand better. Let's set flex flow to relegate. Now, imagine that there are two axes going on the main axis and the cross axis. The main axis in this case will be horizontal because the flux flow is rho and the cross axis will be vertical. Of course. Now I'm going to set justify content to space between. Don't worry about this property right now. We will explore it later. But what I want you to know about this property is that it's considered a main axis property. In other words, it affects only the main axis, which in our case is the horizontal. So if I go to my browser and refresh, you can see that it affects the elements horizontally because the main axis is horizontal and it's a main axis property. But if I go to my CSS and change flex flow to column and refresh. Oh, look, we elements change vertically. And yes, that is because when the flux flow is column, the main axis is vertical and justify content affects the main axis. Now I hope you understood this lecture. I might've talked a lot and repeated a few things, but that's because this lecture is very important and it will help you understand the entire course. So this is it for this lecture, and I'll see you in the next one. 4. 4 more about flex flow property: Hello everyone. In this lesson we're going to learn more about the flux flow property and the other values it accepts. So let's get started. How rates. So you remember from the last video that after creating a flex container, you then need to define the flux flow direction so that you can define the direction of the main axis and the cross axis. Now, in addition to row and column, the flux flow property also accepts row reverse and column reverse. So in order to set the flow direction of the container, I'm just going to add flex flow rho. You can see nothing changes because as I said, the flux flow is set to row by default, which basically displays the flex elements horizontally and floats them to the left. Now let's take a look at the other values that the flex flow property accepts. In addition to rho, we can use row reverse, which will flip the items horizontally and push them all the way to the end of the container. In other words, float them over to the right and flip them. So you can see now we have 432, then we can also use column. So I'm going to go ahead and add column. Now you can see that our flex container is displaying the flex items as a column. They're sitting below each other like normal block elements. Now, we can also use column reverse. You can see it will flip the items vertically and push them all the way down to the end of the container. You can see we also have 4321, and that's it for this quick lesson. And now you know what values flex flow accepts. 5. 5 learning the flex wrap property: Hello everyone. In this quick lesson we're gonna learn about the flux wrap property. So let's get started. By default, all flexbox containers are single line containers, meaning the flex elements will always be displayed in one single line. And if you have many items, they will not wrap to the next line when there isn't enough space for them inside the container, they will kind of overflow. For example, if I copy all the elements and paste them again and then make the container with smaller. You can see that the elements are now going out of our container. But most of the time we don't want that to happen, especially when it comes to responsive design. Will want the elements to wrap to the next line. If there isn't enough space for them to do that, we just need to use the flex wrap property. So I will apply flex rat, rat to the container. And now you can see the elements just wrap to the next line when they don't have enough space. We can also use a rap reverse. So let's try that and see what will get. You can see that wrap reverse just reverses the lines themselves and doesn't affect the elements or flip them or anything like that. And so this is it for the flex wrap property. It's very easy, but very important, and you will use it a lot. 6. 6 aligning elements with justify content property: Now, after understanding the concept of the main and cross axes, in this chapter, we will take a look at flexbox properties that affect the alignment of both the main axis and the cross axis. All right, so in this lesson, we will begin with the properties that affect the main axis. Let's start with the justify content property. Basically, what justify content does is it controls how the flux elements will deal with the remaining free space inside the container. And how these flux elements will be displayed relative to this remaining space. Or in other words, how the remaining space will be distributed around the elements. So justify content won't do anything if you container has no free space or if the elements completely fill up the container leaving no free space. So remember, whenever you want to use justify content, your container must have free-space. Alright, now, justify content accepts five values. First, flex, start, which is the default. It aligns items to the start of the flex container. Second, flex end, which aligns items to the end of the flex container. Third, Center, which centers the content inside the flex container. Fourth, space between which separates the elements and distributes the remaining space between them, but not around them. And finally, space around which separates the elements and distributes the remaining space between them and around them. And the space around the elements will amount to half the space between them. So let's take a look and see those values in action. If I go back to our CSS, I can set justify content to flex start at first. And you can see that this doesn't do much because it's the default value. And it aligns the items at the beginning of the container with no spacing between them. And the free space will be right here. Now, let's try flex end. You can see it pushes all the items to the end and the remaining space we'll be at the beginning of the container. All right, let's try Center. You can see it just centres the elements and the remaining space is distributed equally between the beginning and the end, the flex container. Next, let's try space between. You can see it separates the elements and puts equal space between each one. But the first element is pushed to the beginning of the container, and the last element is pushed to the end of it, meaning there will be no space between them and their side of the container. And that is the difference between space between n space around. So if I go ahead and add space around, you can see that it separates the elements with equal spaces, just like space between that. The major difference is it will put space at the beginning and space at the end of the container. And those spaces are equal to half the space between the elements themselves. So for example, if the space between the elements is 50 pixels, within the space right here will be 25 pixels. And remember, this is a main axis property, meaning just as we used it to change the elements horizontally, we can also use it to change them vertically. So you notice that the container height is 300 pixels. So we can have free space and we can use justify content vertically. So if I go ahead and set the flex flow to column, and before I reload my browser, you know that what this will do is make the main axis vertical here. So justify content will work vertically. In this case. You can see now that space around works vertically, not horizontally. And now of course, all the previous values can be applied and it will affect the elements vertically. For example, let's use Flex start. You see now it aligns the items at the beginning of the container vertically. And flex end will align them at the end of the container vertically and center will sinter them vertically, Of course. Now, one thing to notice is that justify content properties are applied to the flex container itself, not the items inside of it. And this is it for this lecture. I hope you now understand why the main axis and cross axis are important when we use properties that are applied to the flex container, like justify content. And we will continue working with them in the next video. 7. 7 more about justify content: Hello everyone. In this quick lesson, we will see how justify content works when the flex flow is set to row reverse or column reverse. So let's get started. All right, so now we have our four divs and I'm setting the display property of the container to flex. By default, the flex flow is rho, so items are aligned horizontally to the left like this. Now, let's go to our container and add flex flow row reverse. By doing this, the containers Start is now at the right. Meaning that if I go ahead and add justify content, flex start. You can see that flex start now aligns items to the right, not to the left because we have our flex flow is set to row reverse. And this also means that if I go ahead and add flex end instead, of course, the elements will be aligned to the left in this case. Now, this works the same way with column reverse. So if I change row reverse to column reverse, remember now justify content will work vertically, not horizontally. So when I reload, you can see that the elements are aligned to the top of the container because now the column is inverted. So the start is the end and vice versa. So Flex end aligns islands to the start of the container in this case. And of course, if I change this flex end to flex start, you can see that the elements are now aligned to the end of the container. And this is it for this quick lesson. And I will see you in the next one. 8. 8 aligning elements with align items property: Hello everyone. In this lesson we're going to talk about a line items, which is the property that controls the elements along the cross axis. So let's get started. All right, so before we begin, I must say that a line items and justify content are really similar to each other. Meaning they both are applied to the flex container and they both need free space in the container to work. The major difference is that justify content controls elements along the main axis, like we saw in the previous lesson. But align items controls them along the cross axis. The other difference is the values that align items excepts are a little bit different from the values that justify content accepts. Now, align items accepts four values. First, flex, start, which will align items along the cross axis to the start of the container. Second, flex end, which will align them along the cross axis to the end of the container. Third, center, which will center the elements along the cross axis and forth. Stretch. This is a default value. And it just stretches the elements to have the same height or the same width as the container. Now, let's see those values in action. Here. In our CSS. The flex flow is set to row, meaning that the cross axis is now the vertical one. And you can see our divs or stretching vertically by default. So we can change this using the align items property. So if I go to my flex container and add a line items, flex start. You can see the flex start will push the elements all the way to the top of the container, leaving empty space below. Let's go back to our CSS and try flex end. And you can see it will push the elements to the end of the container vertically along the cross axis. And let's try Center. And of course it will center the elements vertically along the cross axis, leaving equal spaces above and below them. Now, let's try stretch, which is the default value. It will just stretch all the elements and give them the height of the container. And it will not consider the content, meaning that all the elements will end up with the same height even if the content is different. And that is very neat and clean when you want to make columns with the same height, even if the content is different in size. Now, let's use these values when the flex flow is set the column. In other words, when the cross axis is horizontal, if I set the flex flow to column right here. Now the elements are displayed as a column and our stretching horizontally along the cross axis, taking the whole width of the container. Now let's use flex start. You see that the elements are now pushed to the start of the container along the cross axis to the left here. And center. Of course, we'll center them horizontally and flex end. We'll push them to the end of the container horizontally along the cross axis to the right here. Now, let's go ahead and add justify content space. For example. Hey, let's try something. I want you to pause the video and guess what this will do to our elements. So go ahead and pause it now and guess. Okay, We're back. Let's reload our page and see, I hope you guessed it right. What this did is it affected the elements along the main axis, which is vertical in this case, because remember, we have flex flow column right now. So it separates the elements vertically along the main axis. So now you can use both justify content and align items together to get the layout you want. 9. 9 aligning a single element with align self property: Hello everyone. In the previous lesson, we learned how to control the alignment of elements along the cross axis using the align items property. But in this one, we will learn how to do that to a single element using the align self property. So let's get started. All right, So align self and align items are really similar to each other. Meaning they both affect elements along the cross axis. They both except the same values which are flex, start, Flex, End, Center, and stretch. But the major difference is that align self affects a single flex element only inside the container. While align items affects all the children of the flex container. And because of that, when we use align self in our CSS, we use it on a specific flex element, not on the flex container. All right, so if I go here to our flex container selector and add a line items flex start. You can see that all the elements are pushed to the top of the container. Now this is good and it's handy. But what if I want, for example, to stretch only the first element without affecting the other elements. Or what if I want to center the second one and so on. This is where align self comes in. If I go here to my flex element and add align self stretch. You can see the first element is stretching and filling the container vertically. While the other elements there, the top of the container. Let's go to our second element and add align self center. You can see is now centered. Let's use flex end on the third element. And of course this will push it to the end of the container. Now, the last value is flex start. And you can see it doesn't do anything because the align items is set to start up there. So this is it for this lesson, everybody, and I will see you in the next one. 10. 10 aligning multiple lines with align content property: In this lesson, we will be talking about another property that is used on the flex container, align content. So let's get started. All right, So what can we align content property do for our elements? Basically, align content is used when we have multiple lines of elements. It controls how these multiple lines are displayed in our container. For example, if we copy our four divs, paste them a couple of times. Save and reload. Let's go to our CSS and set flex wrap to wrap. And now you can see we have multiple lines of elements inside our container. We can also control how these lines will be displayed using the align content property. For example, if I go ahead and set a line content to center, you can see that the lines are now centered in the container. We can also use flex start. And you can see it will push the lines to the top of the container. Also, we can use Flex N, which will of course push all the lines to the end of the container. We can also use space between and space around. Let's try that out. Let's say space between. And as you would expect, it separates the lines and puts equal spaces between them. And finally, space around which you can see separates the lines and puts equal spaces between them with half of that space before the first line and after the last line. So this is it for the align content property. You can use it only if you have multiple lines in your content inside the container. It will help you to distribute the remaining space between those lines. 11. 11 learning the order property: Flexbox gives us the power to reorder flex elements any way we want without changing the source code. And that's what we're going to do in this lesson. So let's get started. All right, So here in our HTML we have our flex container with our flex elements inside of it. And because in the source order, one shows up first, then to after that. Then 34. If we look at them in the browser, we will see that one comes first, then too, then 34. Now, we can control the order of these elements using the order property. And the default value for the order property is 0. So for example, if I go to my CSS and add order 0 to my second element, you will see that nothing will change because they all have an order of 0 by default. So the order will be set by the source. Now, if I go here and change this 0 to one, you'll see now that the second element will be the very last one here. We can also use negative values to ensure that our element will always appear as the first one. For example, if I add minus one instead of this one, you can see that the second element appears right here. At the first position. We can go beyond that and reorder all our elements. For example, if I go to my first element and add order for, then go to my second and add order three, then add ordered to, to my third one. And then after that, an order one for our last element. Now you can see that they're all reordered. Now we have 4321, and that's it for this property. It's an easy one and will make your work more flexible. We will see how to use it in action while we're building our project. 12. 12 flex grow: Hello everyone. Welcome to this new chapter. In this chapter we're going to learn how to control the sizing of our flux elements. You see when we set the display property of the container to flex, we notice that each flex items with will depend on its content. Meaning if one of the elements has more content than the others, then this element's width will be more than the other elements with, because they have less content. And the remaining space of the container will be empty. In the last chapter, we learned how to distribute this remaining space around elements. In other words, how to separate the elements with the space. But in this one, we will learn how to add the space to the element's width and make the elements with increase and expand to take up this space. So let's get started. So in this lesson we will take a look at the flex grow property. Flex grow is expressed using a number like one or two and so on. And it's used to determine how much the flex item will grow relative to the rest of the flex items inside the container. In other words, how much space the elements with will take from the remaining space relative to the other elements. Will all be elements take up equals space, or will one of them take more than the others? Now enough talking. Let's see this in action. Here. In our code editor. The four divs are sitting beside each other, and the width of each one of them depends on the content. You can see that the second div is bigger than the others. Now, I have remaining space right here, and I want my elements to fill up the container and take up this remaining space. Now. Okay, so let's set flex grow of these flex items to one. So before I reload my browser, what will happen here is this free space will be distributed equally among the four divs. For example, if this remaining space right here is 100 pixels, then each element will take 25 pixels and add them to its width. Which is really awesome to be able to do with just one line of code. So let's reload and you can see that the width of each element increased by the same value. For example, if the width of the first element was 50 pixels according to its content, than its width now is 75 pixels. And the width of the second element was 100 pixels, then its width now is 125 pixels. But that's not all. What if I want the third element to take twice as much of the leftover space. As the other elements would say, let's set flex grow for the third element to two. You can see that its width increase now and the remaining space is now distributed in a way that this third element will take twice as much as the other three dibs. Now the default value for flex grow is 0. And that just means that the width of the elements will depend on the content. So if I go ahead and remove this line right here, go to my flex item selector and flex grow 0. You can see that the elements with is dependent on the content, which is the default setting. Another interesting thing we can do with the flex grow property is you can make just one element expand and take up the free space while the other elements will not change. We can do this easily by setting the flex grow of our element to any value and not setting it for the other elements or just setting it to 0, like we're doing here. So for example, if I want to make only the third element expand and take up this free space, I can go right here and said It's flex grow to one for example, or 2, or any other value. I'll set it to one. And now you can see it expands and takes up the whole space. Now we can also use flex grow to control the sizing of the elements vertically. I think you already know how we can do that. Iep, we just need to change the flex flow from row to column. So if I go right here inside the selector of our container and set flex flow to column. You can see it's working vertically now and affecting the height. So to wrap things up, the flex grow property is used to control the sizing of the flex elements relative to each other. Flex flow is row. It will control the width and if it's column, then it will control the height. The default value for it is 0, which basically means that the size of each element will depend on its content. But if we change it to one for all of the flux elements, when the free space will be added equally to each element size. On the other hand, if we set the flex grow of just one of our elements to any value, but leave all the other elements at a value of 0, then that one element will take all the free space for itself. And if we want to make the elements change and grow relative to each other, we can always set the flex grow for all of them to any value we want. For example, if I want one element to take up twice as much space as all the other elements. The 1970s flex grow property to two and said it's a one for all the other elements. And if I want it to take four times that of the others, I can sell its flex grow to four and the others to one and so on. So I challenge you to play around with the flex grow values and see what you get. And if you have any questions, just leave it in the Q and a section, and I'll be glad to help. So this is it for this section, everybody. And I'll see you in the next one. 13. 13 flex shrink: Hello everyone. In this lesson, we will be learning about the flex shrink property. Don't worry, it's pretty simple. So let's get started. All right. So in the last video we talked about the flex grow property and said that it helps us to control how the free space of the container is distributed among the width of our elements. In this one, we will take a look at the flex shrink property, which basically determines how much the elements will shrink relative to each other inside the container. When there isn't enough space, we all shrink by the same rate. Or will one of them shrink more than the others and lose more space? Here in my code editor, I now have to flex elements. You can see the width of each one is 300 pixels. And I've set the display property of the container to flex. You can also see that we have free space right here. In the last video, we distributed this free space among elements using the flex grow property. But now if I go ahead and shrink my browser until there is no free space anymore and inspect either one of the two elements. So let's see. It's weird. You can see the first elements with is about 300 pixels and the second elements with is also about 300 pixels. Then now if I continue shrinking my browser, you can see that the elements are now shrinking too. Their width is now less than 300 pixels, because the width of the browser itself is less than 600 pixels and it can't handle the elements, so they're shrinking. But the interesting thing is that both the elements are shrinking by the same value. Meaning if I check the width now, they'll have the same width. And this is happening by default. But what if we want to change that? What if we want to make the second elements shrink? Let's say ten times more than the first one. Well, we can do this using the flex shrink property. If I go to the second element right here and add flex shrink 10, you already see that the second element is shrinking much more than the first one. Meaning is losing much more space relative to the first one. Let's delete that and go to the general flex item selector and said flex shrink to one. You can see that now they're acting like they did before, shrinking by the same amount, which tells us that one is the default value for flex shrink. Let's try to 0 and see what we'll get. You can see that the elements in our overflowing out of the container, who sells us that 0 forces the elements not to shrink below its width. But let's try something else. Let's go to our container and set flex wrap to wrap. But something interesting is happening here. The elements are now wrapping to the next line and they aren't sticking out of the container anymore. And honestly, I always use this method in my work because most of the time I don't want my elements to shrink below a specific width, but I want them to drop to the next line when they don't have enough space. This is very handy, especially when it comes to responsive design. So to wrap things up, the flex shrink property is used to control how the flux elements will shrink relative to each other inside the container when they don't have enough space. It's applied to the flex element itself, just like the flex grow property and its default value is one, meaning that all the elements will shrink by the same value. But we can change this default behavior. We can, for example, make a specific element shrink two times more than the others by simply setting It's shrink property to two. We can also force the elements not to shrink below a specific width by simply setting their flex shrink to 0. All right, everybody, this is it for this lesson. I hope you now understand what flex shrink does, and I will see you in the next one. 14. 14 flexbasis: Hello everyone. In this lesson, we will be talking about the flex basis property. So let's get started. Okay, so flex basis is very similar to the width property. It basically defines the initial main size of the element before any remaining space is distributed. So for example, if you set the flex basis of a flex item to, let's say 100 pixels. You're just saying to the browser, hey, as long as there's enough space remaining in the flex container, I want this flex items with to start at 100 pixels and be nevertheless than that. And it's expressed in pixels percentages in any values you would use for the regular width property. So back to our code editor. If I set the flex basis for this second element to 300 pixels, you'll see that it's width increased. And if I inspect it, you'll see that its width is now 300 pixels. But if I shrink my window, you can see as long as there's enough space, the width will be the same. But when I reach this point where there's not enough space and then continue shrinking, you will see that the div begins to shrink. So flex basis tells the browser to start the width of this element at a specific width if there's any available space. But if there isn't, just shrink it, unless of course you said flex shrink to 0. Okay, let's remove these two lines of code. We. 15. 15 section overview and starting files: Hello everyone, welcome to this new section of the course. In this section, we will start using Flexbox on to real-world examples. We will build these two responsive menus using some of the flexbox properties we learned in the previous videos. Let's look at the start-up files for this section. You can see here we have the bare bones for any HTML document. We have a title here. Then I included our style sheet file here. So we will be adding our styles in this file. I also have a CDN link for the Font Awesome library right here, because we'll use some icons in our second menu. I also included the Google fonts right here. I did all of this because I'm assuming that you're familiar with all of that and I didn't want to waste your time making you write all of this code. Then right here inside the body tag, I've added a header and inside of it a div with the class of centered. This class just centers all the elements inside of it. Then I added this heading right here. And then below that we have this main tag which will contain the menus. And if I go to my CSS, you can see some CSS files included. These files are just responsible for general styles to make everything look better. If I look at this HTML file in my browser, you can see we have only the H1 heading right here. All right, so you can download the start-up files after watching this lecture and we can start building our first menu together in the next lesson. 16. 16 building a simple menu with flexbox: Hello everyone. In this lesson we're going to build our first menu using Flexbox. So let's get started. All right, first of all, we will be building the HTML markup of the menu. So I'm going to go right here and add a section with a class of menu section. And inside of that, I'm going to add an H2 with a class of menu Heading. And we'll just say simple menu. Hello, This H2, we're going to add a nav tag to add a class of single nav so that we can use flexbox on this menu by targeting this class and give it a class of menu. So that we can add our general styles for all the menus by targeting this class. All right, so inside of this nav, we're going to add U, L, Then LI inside of it, and an anchor tag. And we will copy that and paste it seven times. And say home services, testimonials, portfolio, blog about and contact. You can see here we have our menu. Let's go back to our CSS and start styling it. I'll target the menu section class. Then I will add padding bottom to EM, then margin bottom to EM as well. And below that we're going to target the UL. So we'll say menu UL and add list-style-type none, so we can get rid of the bullets and then padding 0 and then margin 0. And then we will set the background color of this URL to this nice gray color. All right, now let's target the anchor tags of our menu. I will set text decoration to none. And then I will set its color to this nice dark gray color. And below that, I will add a padding of 0.6 m on the top and bottom, One E M on the left and right. And then I will set its display property to block and set the transition to all 0.5 seconds and ease. And now you can see a menu is looking much better. But let's add some nice white background color. When we mouseover the links back to our CSS, I'll target the anchor tags again. And when we mouse over it, we want to set the background color to this nice white color. Let's also add some styles to the H2. So I'm going to target the menu Heading class and add font-size to E, m, and font-weight normal. Now, our menu is looking great on mobile devices. The links are sitting below each other nicely. So we will leave it like that on smaller screens. But on wider screens, we want to use flexbox to make our menu look like our demo. So we will use media queries to target wider screens. And then we will use flexbox to change our menu. So let's actually do that. Let's go to our CSS and we will start out by defining a media query when the screen is wider than 600 pixels. And inside of this media query, we will target a single nav UL and change the display property to flex. And just like that, we have our list items displayed horizontally and we have a menu that is laid out properly. Now that we have this layout, we can start changing it using Flexbox as well. For example, all the list items are now aligned to the left. What if we want to align them to the right instead? You remember that the default value for flex flow is row, meaning that the main axis is horizontal by default. And you also remember that when we want to control the alignment of elements along the main axis, we would use the justify content property. So in order to control our list items horizontally and align them to the end of the container. For example, we will use the justify content property. So let's go back to our CSS. And below this display flex, we will set justify content to flex end. And now we have all of our menu items aligned to the right. Now, let's play with the justify content values. Let's go to our CSS and try center. Instead. You can see it's now centering the list items. But now there's one important thing. We need to make sure that our menu is fully responsive. And that means if the screen gets small enough, we need to make sure that our menu items are dropping down properly. So for example, if I right-click on any item and go inspect element and change the screen width. You can see our items are getting squished because their container doesn't have enough space for them. So I think you remember what we should do in this case? Yes. We should set the flex wrap of our container to wrap. So let's go to our CSS and I'm going to add flex wrap, wrap. And now you can see our menu items will wrap to the next line when the container doesn't have enough space for them. Now, let's continue playing with the justify content property. Let's head back to our CSS and I will change the justify content to space around. And now you can see we have equal spaces between our menu items. Let's also use space between. And also it's separates the elements with equal spaces between them. You can see there is an empty space right here between the elements that I can't click on. But what if I don't want that? What have? I don't want any spaces between the elements. Meaning I want the elements to expand and take up this free space. Well, we can do this by using the flex grow property. So let's go back to our CSS. We will target our list items and set flex grow to one, meaning all the items will take up equal space from the remaining space. Then flex basis auto, meaning that the item's width will depend on their content. And flex shrink to 0. Meaning the elements will not shrink when they have no available space, but they will rat down to the next line instead. And now, if I hover anywhere between elements, you can see that now there isn't any free space because the flex grow property forces all the menu items to take this free space equally because we set it to one. But now there's a small problem here. You can see that the text itself inside the items is aligned to the left. That can be easily fixed by simply going back to our CSS and set text align to center. So now we have a nice-looking, simple menu that's looking great with items equally spaced and there is no gaps between them. So this is it for this lesson, everybody, and I will see you in the next one. 17. 17 building an advanced menu with flexbox: Hello everyone. In this lesson we will be building our advanced menu using Flexbox. So let's get started. All right, so we'll begin by building the HTML markup. So algo right here below the simple menu section and add a new section with a class of menu section. And then below that we will add an H2 with a class of menu Heading, and we'll say Advanced Menu. And then below that we're going to add a nav tag with a class of Vance nav and also a class of menu. And then we're going to add UL, LI, then anchor tag. And then inside this anchor tag, we're going to add a div with a class of icon. And inside of it we're going to add an I tag and give it a class of FAS and also a class of FIFA football. So this will be the div that contains our Font Awesome icon. And below this div, we're going to add another div and give it a class of text. And inside of it, I'm going to write football. And then I will add a span and just say is a great sport. Then I'm going to copy this and paste it two times. We will change the icon class to F, a film. And we will say, movies make your life better. And here I will say camera captures great moments. So now let's go to our browser. You can see we have our menu and it's already looking nice because of the classes we applied to it. You can see here this menu section and the menu classes that we styled in our earlier video. Now, let's take a look at our HTML markup. You can see we have a nav, UL, LI and then an anchor tag, just like our simple menu. So we will control the list items themselves like we did in the simple menu. Meaning we will make our UL a flex container, which means the list items will be It's flex elements. Then we can change them using Flexbox properties. Now, if you look inside the anchor tag, you can see we have two divs. The first one contains the icon and the second one contains the text. Now, you may be wondering why I'm putting them in two separate divs. Why didn't I just put them in one div? Well, I did that because I will make this anchor a flex container. And by doing this, these two divs will be flex items and I can control them the way I want. Will see this in a second. But now let's go to our CSS and make another media query when the width is greater than 600 pixels as well. And inside of this, we will target that advanced nav UL. Set display to flex and then set flex wrap to wrap. So the list items wrap to the next line when they have no available space. Let's see what it looks like. You can see the list items now sit beside each other and floated to the left. But you can also see that we have some free space on the right that we can't click on. And I think you know how we can fix this. That's right. We should set the flex grow of the list items to one so that they expand and take the remaining space equally. So let's go to our CSS and target our list items. Then set flex grow to one. Let's also set flex basis to 220 pixels. Now, this is a value that I found suitable for our content. So I want the menu items to start at this width. Let's also set flex shrink to 0 so that our items won't shrink below 220 pixels. And now you can see the items are looking great and they're responsive. So if I inspect any element, and when I shrink my browser more, you can see it ramps nicely to the next line and doesn't shrink below 220 pixels because we set flex shrink to 0. And when I shrink the browser more below 600 pixels, the elements will be stacked below each other in a nice way. And this will look great on mobile devices. But now let's continue working. If we take a look at our demo, you can see we have our icon floated to the left and the text to the right, like this. So we can do this easily with Flexbox. You remember we have two divs inside the anchor tag. One contains the icon and the other contains the text. So in order to control them, we should set the display property of the anchor to flex. Let's go to our CSS and let's target the anchor tag and say display flex. You can see the icon and the text are aligning horizontally. But we want a little bit of spacing between them. We can do this using regular margins or padding, but we'll do it with Flexbox. So we will go to our CSS and target the div which contains the icon. And then add flex basis 60 pixels, for example. And also let's add a font size of 35 pixels. And you can see this is looking great already. If we take a look at our demo, you can see that this word is bigger and this text is set below it. So let's do this. Let's go to our HTML. You can see we have this text div, and inside of it a span containing this text. So let's go to our CSS again and target the text div. Then set its font size to 25 pixels. And it's font-weight bold. Now, let's target the span inside of it. Set its display property to block so that it drops down below are big word. Then set its font size to 15 pixels. Then add font weight lighter. When font-style italic. And there you have it. And advanced menu that looks great on wide screens. And when you go to narrower screens, it wraps nicely. And when you go to mobile devices, it looks nice and tight. 18. 18 overview of our final project: Hello everyone. Welcome to this new section of the course where we're going to build our project and try to use all the flexbox properties we learned in the previous sections. So here we have our final project, and here is the header. We'll learn how to easily centered this content vertically. And also how to push the menu to the end of the header vertically, like this, will do all of that with Flexbox. Next we have our Posts section. You can see we have two posts, then three posts. And then the final post that takes up the full width of the content area. And you can see that the columns in each row are equal in height even if the content is different. Using flexbox, we will achieve this layout. Below that, we have the watch today section with the image on one side and the content on the other. We'll learn how to change the order of elements on our page without changing the source code. And we'll do that here in this second card. If you take a look at it, you can see that the content is on the left and the image is on the right. But in the source code or in the HTML page, the image comes first and then the content. So we'll learn how to change their order using Flexbox is order property. Then we have the download now section. You can see it has this really complex layout with the image taking up the whole width. Then the content section below it, with these three divs side-by-side. You can also see that the second div right here has more width than the others. But with Flexbox will build this layout easily. After that, we have our image gallery with this creative layout called the horizontal masonry layout. You can see that the images have random values for width, but they have the same height. And if we click on any image, it pops up nicely in a box model. And we can navigate through the images by simply hitting the keyboard arrows. And then we have our simple footer here. Over here on the right. We have our sidebar with some nice widgets. It's got the same height as the content area. For example, if I scroll down a little bit, you can see that even though there's no content in the sidebar anymore, It's still preserving its height and all the other content is still shifted to the left. That is what we call the Holy Grail layout. So we'll learn how to do that with Flexbox using only about three or four lines of CSS code. Now, let's take a look at the starting files for our project. I have the project folder located here on my desktop. So if I open it, you can see we have our HTML file named index, and we have our style.css file here in this folder. And also we have all of our images located here in this images folder. And we have a JS folder. And inside of that we have the jQuery library and a file called main.js. So if we open those files in our code editor, here's our index.html file. You can see just like the menu section, it has some basic HTML. It has the title here, then the Google Fonts, and then the Font Awesome library. And then finally, our style sheet. Below that, we've included the jQuery library and the main.js file before the closing of the body tag. And of course, our style sheet right here is empty. So we'll start everything from scratch. So make sure to download the starting files, fire up your code editor. And I'll see you in the next lecture where we'll be building the Holy Grail layout of our project using, you guessed it, Flexbox. 19. 19 building the holygrail layout: Hello everyone. In this lesson, we are going to build the Holy Grail layout of our project. So let's get started. So first of all, we will go right here after the body tag and add a div and give it a class of outer wrapper. Now this will be the outer container that will contain all of the sections inside our page. And inside of that we're going to add a header and give it a class of site header. And inside of it we're going to add an H1 tag and give it a class of site title. And we'll just say header. And below that header we will add a div with a class of content area. So this will be the container that holds our main content area, as well as our sidebar. And inside of it we will add a main tag and give it a class of main content area. This main tag will contain our articles and so on. And then an H1 tag and say for example, the main content goes here. And after that we're going to add some temporary content right here inside of some p tags. And then below this main tag, we're going to add a div and give it a class of sidebar, right? And inside of it we will add H1 and say sidebar goes here. And below this we will add some dummy content for viewing purposes inside a p tag. All right, let's add our footer. So I'm going to go ahead and add a footer tag and give it a class of site footer. And inside of it we will add H1 and just say footer. Alright, let's see this in our browser. So here is the header at the top, and then the main content right here, the sidebar below it, and the footer at the bottom. But now let's add some style so that we can see them better. Back to our CSS. I will pay some styles and explain them to you. So there are some base styles. I've nested the body, the buttons, the inputs, and the text areas, and then just added some basic styles. You can see the color is black. The font-family is our font. The font size is 16 pixels and the line height is set to 1.8. And below that, I've added some styles to the body. You can see I've added this nice gray color, has a background color. Set the margin to 0, and then set the font family to our font. Now do that, we're going to target the header and the footer. Add background color green and height 100 pixels for now. Then we will target the sidebar and add background color blue and color white. And then below that we will target the H1 tag and set the color to red. And we will set the margin to 0. Then also, I will target the p tag and give it a margin of 0. Let's take a look. You can see it's looking nicer now. All right, so on wide screens we want a sidebar to be a column at the right side, right here. So what we can do is we can make the container that holds both the main content area and the sidebar, a flex container. So back to our HTML, you can see that the div with the class of content area is the one we want. So let's go to our CSS, create a new role when the screen width is greater than 1, 0, 0, 0, 0, 120 pixels. And I'm going to target the content area and set its display property to flex. And just like that, we have the main content area at the left and our sidebar at the right. And when we shrink our browser, you see when I go below one hundred, one hundred and twenty pixels, the sidebar is dropping down below the main content area. And if you look here, you can see that the sidebar and the main content area have the same height even when the content is different. And that is exactly what the Holy Grail is all about. All right, now, let's, let's continue working. You can see the sidebar here is taking up too much space, so I want to decrease its width a little bit. He remember that by defining the flex container, now the sidebar is a flex item and we can use flexbox properties on it. So let's go to our CSS and target our sidebar. And said It's flex property to 0, meaning it won't grow. Then 0 meaning it won't shrink below a specific width, which is 320 pixels. And now you see it's looking better. And this is it for this lesson, we've built our Holy Grail layout, and now we're ready to build each section of our page individually, but we will do that next. 20. 20 building our header using flexbox: Hello everyone. In this lesson we're going to build and style our header. So as always, let's get started. All right, so back to our HTML. Here inside the header tag, I will add a div and give it a class of site Info. Then I will move the H1 tag into it. And below it we're going to add a paragraph tag with a class of site description. And we will add our site description in here. And below the site info div, we're going to add our menu. So we will add a nav tag with a class of main menu. And we will just say the menu would go here for now. Okay, let's view this in the browser. All right, Let's continue working back to our CSS. So here between our comments, we will start styling the header. So I will target the site header and set its height to 400 pixels. Let's view this. Now you can see we have the div with the class of site info containing the site header and the site description. And below it we have the div with the class of main menu holding our menu. All right, now we want our menu to be pushed to the end of the container right here. We can do this easily using flexbox. We can make the container a flex container and then set the flex flow to column so that the elements will stay below each other and their height will depend on the content. And then set the flex grow of the site info to only one. That it expands vertically and takes up the whole space, pushing them in you all the way down to the end of the container. So let's go to our CSS and do that. I will come here and add display flex, then flex flow column. Then I will target the site info div and set flex grow to one. You remember that when I add flex grow one to an individual flex element only and not the others. This will make it take up all the remaining space of the container. So the site info div will grow vertically, pushing the menu to the end of the container. And just like that, you can see the menu goes all the way down to the end of the container. Now, let's keep working. We will design our project in a mobile first approach, meaning we will design it like we're viewing it on a mobile device. And then we will create media queries and add the changes we want on wider screens. So I'll target the site title here and add some styles. I'm going to add margin 0, font size to em. Font weight 300, text aligned center. Color, white. And text transform uppercase. You can see it's looking nicer. Now, back to our CSS. We will target the site description and add text align center, then change its color to this nice yellow color. And font size 1.2 M. Then margin top minus 0.8, so that it becomes tighter. Then font-style italic. And you can see it's looking better. Let's keep going. I will target our menu. Then add some padding. One EM from the top and bottom, and one E M from the left and the right also. Then I will add color black, then background-color our yellow are right. Now we want the site title to be bigger on wider screens. So back to our CSS. I will create a new role for wide screens. Then I will target the site title and set the font size to four. You can see it's bigger now. And when I go to smaller screens, it will be smaller. Now, we want to center our site title and a site description vertically. We can do this using many different things, but we'll use Flexbox. You can see both the title and the description are contained with the site info div. So we can display the site info as a flex container and make the flex flow column and then center the content using the justify content property. So if I go to my CSS and target the site info div, set its display property, the flags, then flex flow column, and then justify contents center. And now you can see it's centered perfectly. And remember, justify content is a main axis property. And the main axis here is vertical because the flex flow is column. Now let's go to our CSS and change the green background to black so it matches our design. Now, let's review what we've done with Flexbox here. First of all, the menu and the site Info divs are contained in an outer div with a class of site header. We displayed this site header as a flex and made it a column. So the elements stack below each other. Then we set the flex grow of the site info to one so that it expands and takes up the remaining space of the container. Then we needed to center the content inside of it vertically. So we made it a flex container and said It's flex flow to column and then centered its content using justify content center. And that's it. We finished our header except for our menu. We'll finish that later. But for now, this is it for this lesson and we will continue exploring what flexbox can do for us in the next videos. 21. 21 building and styling our posts section: Hello everyone. In this lesson we will start working on the post section. So let's get started. All right, so we will start by removing this dummy content. We just needed it to test things out. And then I will begin by adding a section and giving it a class of posts. And inside of it, I will add an article and give it two classes, post and post half. So the class post half means that this article will take half the space of our main area. All right, now we will add an anchor tag. And inside of it we will add a div. And we will put our image inside of this div. So I will add our first image right here. And below the image div, we will add another div with a class of post content. And inside of that we will add an H2 tag. So this will be the title of the post. Then below it we will add a p tag and add some Lorem text inside of it. Let's view this. You can see we have our image, then our title, and then the content. Okay, Let's continue adding our posts back to our HTML. I will copy this article, paste it again, and we will just change the image and the alt text right here, and then change the title as well. Now these two posts will take up half of the space of the main content area. We will do that using posts have class right here. And this post-class will be responsible for the general styles of all the posts. All right, below that, we will paste our article again three times. And we will change the class of posts, have to post 1 third for these three articles. And we'll also change the images and the titles. So now you can see we have our three articles with a class of post 1 third to each one. And this class will be responsible for making each one of these articles have a width of about 30 percent of the main content area. So the three articles will sit beside each other and align. Now let's add our last article. I'll paste the article one last time and changed post to post full. I will also change the image, the alt text, and the title. Alright, so this article will be full width. It will take up the whole width of the main content area. Let's go to our browser and view those articles. You can see we have all of our articles now. So let's start styling. We're back to our CSS. And right here between our comments, we will target our main content area and add padding to EM. And now you can see we have a little bit of a space. Let's add the general styles for our posts. I'll target post-class and set the background color to white and add margin bottom one, m. So we can have some spaces between the articles. Then we will target the anchor tag inside our posts and add color black to remove this blue color. And text decoration, none to remove the line under the text. Text is looking much better now, but we want some spaces right here. To do that, I will target the post content class and add padding 0 to the top, 40 pixels at the right and the left, and 20 pixels at the bottom. You can see it's looking better now. All right, so let's style the post header. I'll target the header of our post and add background color, our yellow. Then change the color to black. Then padding 20 pixels so we get some spacing and text align center. You can see it's looking good. But we want this yellow background to take up the whole width of the post content div is looking like that because of the 40 pixel padding at the right and the left of the post content div. So in order to make the yellow background take up the whole width, we can add a margin of minus 40 pixels to the H2. So back to our CSS. I'll add margin 0 at the top minus 40 pixels at the right and the left, and 30 pixels at the bottom to have a little space between it, the p tag. And now you can see it's taking up the whole width. Now we're almost done. The only thing left is making the image of the article take up this full width. So back to our CSS. I'll go up here below our base styles, and I'll target all the images and display it as block elements. Set its width to 100%. So it will take up the full width and set its height to auto. And now our images are taking up the whole width of the container. We have our posts looking exactly how we want. The only thing left is controlling them using Flexbox. And we'll do that in the next lesson. 22. 22 adding flexbox to our posts: Hello everyone. In this lesson, we will continue working on our posts section and we will control its layout using Flexbox. So let's get started. All right, so this is how we left our Posts section. You can see every post is taking up 100% of the width. And this is what we want on mobile devices. For example, if I shrink my browser, you can see that this is looking great on mobile devices. We're now what we want to do on medium sized screens and enlarge sign screens is on medium screens or tablets. We want every single post to use half the space of the main content area so that we can have two posts side-by-side. And on large screens we want the first two posts to be in the first row, then the following three posts to be in the second row. And then the last post to take up the whole width of the third row. Great, so let's go back to our CSS and do that. First, I will create a new role for medium-sized screen devices. And inside of it, I will target the post section, which contains all of our posts. And I will set its display property to flex. So all the posts will be displayed side-by-side. And then add flex wrap rat so that the posts will wrap to the next line. If they have no free space. Then I will target all the posts and then add flex basis 49%. You can see we have now two posts on every line. And because I set the flex basis to 49 percent, you can see we have empty space right here, which is 2% of the main content areas with. Now, we want to move this remaining space and put it between the posts. So let's go back to our CSS and go to posts and add justify content space between. And you can see now that the remaining space is right here between the posts that at the end of the container anymore. And this is the layout we want on medium screens. Now, let's continue working to reach the layout we want on wider screens. Back to our CSS. We will add a new role for wider screens. And we will target the posts with the class of post-war 1 third, and add flex basis 32 percent. Then we will target the posts with a class of post half and add flex basis 49%. And finally, we will target the posts with the class of boastful said flex basis to 100%. And just like that, we have our posts laid out the way we want on larger screens. And if we shrink our browser, the layout will change on medium screens and then on mobile devices. And now we've finished our post section and we'll continue working in the next lesson. 23. 23 building and styling the watch section: Hello everyone. In this lesson we will start building our watch today section. So let's get started. All right, so we will start right here after the post section. We will add a new section with a class of watch. And inside of that section, we're going to add H2 with a class of section header. And we'll say watch today. And below that we're going to add a div with a class of watch card. And inside of it we're going to add another div that will contain the card image and give it a class of watch image. And we will put our image inside of that div. And below that we will add another div with a class of watch content. And this div will contain all the texts will add. So inside of that div, we're going to add an H2 tag. And then below that, we're going to add another div with a class of movie info. So this div will contain all the information about our movie, like the movie runtime, the year it was released, its category or a genre, and so on. Now, we will add five spans inside that div. And after our watch content div, we will add a p tag and give it a class of movie story. And then we will add some dummy text. And then below that p tag, we will add an anchor tag and just say read more. And then we will copy this watch card div, paste it again, then change the image. And if we go to our browser, here we have our two cards. Next, let's dial them in our CSS. I'll go right here between the comments. And I'll target the section header at first. Then add color black, font size three, VM, so it's bigger and nicer. And then text align center. And you can see it's much better now, Let's continue working. I'll target the watch card div and give it a margin of 1 e m so that we can have a little bit of spacing below our cards. Then we will target our watch content div and add background color black. Then color white. And padding three VM. You can see we're getting closer here. So let's target the age to set its font size to, to eat em. And it's font-weight to 300. And we will add margin 0 and text transform to capitalize. Let's keep going. I'll target the movie info class and set its font weight to bold. Then we will target the spans inside of it and add padding, right? 1.5. We will also target the p tags with the movie story class. And we will add margin one EM at the top and bottom. Now let's add the anchor tag and change its color to white. And then said it's font-weight to bold. And now we have our watch card looking great for mobile devices. In the next lesson, we will learn how to change it on wider screens using Flexbox. So see you then. 24. 24 adding flexbox to the watch section: Hello everyone. After creating and styling our watch today section for mobile devices in the last lesson. In this one, we will make it look good for wider screens. And we'll do that using flexbox. So let's get started. Alright, so what we want to do here is we want the image to sit to the left and the content to be on the right. Easy enough. And we did something very similar before while we were building the Holy Grail layout. You'll remember that we floated the main content area to the left and a sidebar to the right. So let's do that. We will create new rules for medium and large screens. The layout will work fine for both the medium and large screen sizes. And inside of this media query, we will target the watch card div, set its display property to flex. And just like that, you can see the image is now on the left and the content is on the right. But now we want to center this content vertically. So let's go to our CSS and target the watch content div, which contains all the content. And then we will add display, flex and flex flow column. And then of course, justify content Center. You can see the content is perfectly centered now. Now everything is looking great. But we want to change the order of this image and put it on the right side of the container. We can do this with the order property. So if I go to my HTML and add a class of image rate to the image I want to put on the right. And then go to my CSS and target this image, image right class and set its order property to two so that it will come after the content. Remember, all the flex items have order 0 by default. So any item taking order greater than 0 will be displayed at the end of the line. And you can see the image is now displayed at the right. And now we've finished the watch section. We'll continue working in the next videos. 25. 25 building and styling the download section: Hello everyone. In this lesson we will start building the download now section. It'll be fun. So let's get started. We will begin right here below the watch section and add a new section with a class of download. And inside of that section, we will add an H2 tag with a class of section header. And we'll say download now. And then below that, we will add a div with a class of download card. And inside of that div, we will add another div with a class of download image. This div will container image and inside of it will add that image. And below this download image div, we will add another div with a class of download content. Of course, this will contain all the content of this section. And inside of that, we're going to add an anchor tag. And inside of this anchor tag, we will add a span and just say download. And then we will add Font Awesome icon below that. And below this anchor tag, we're going to add a div with a class of download info. And inside of that, another div with a class of downloads genre. And inside of that download genre div, we're going to add h4 tags and just say genre. And below this, we will add a p tag and add the categories for our series. And below the download genre class, we're going to add another div with a class of download cast. So this div will contain images of the cast that was in the series. And inside of it, we will add an H4 and just say cast. Then we will add some images for the cast of the series. And then finally, below the div with a class of download info, we will add another div with the class of download rating. And inside of it, we will add four spans. The first one we'll have a class of rate and we'll say 8.7. Then we will add a second one and say one hundred, two hundred ratings. And finally, the last one. And we'll say six seasons. So let's see how this will look in our browser. You can see this isn't looking good. So let's go back to our CSS and start styling this. I'll go right here between the comments and I'll start by targeting the download card div and add margin bottom one EM to get a little bit of spacing. And then after that, we will target the download content div and set its background color to white. And then we will target the anchor inside of it and set its background color to black. Then make its color white. And add a padding of one EM from top and bottom and two VM from left and right. Then we will say text decoration none and text transform capitalize. You can see now we have our download content div with background color white. And this anchor right here has a black background. But let's make this icon bigger. Back to my CSS. I will target the icon inside the anchor tag and set its font size to 2.5 EM. So you can see it's bigger. Now, let's keep going. Let's add some padding here to the download info class. So back to our CSS. I will target the download info class and add padding 1 e m from top and bottom, and then to EM from left and right. Next, let's make these images smaller because they're looking weird right now. So I will target the images inside the download cast div and set height to 60 pixels. Then its width also to 60 pixels. And then add a border-radius of 50 percent so that it becomes a circular image. You can see now that overall the sections are looking cleaner. Alright, let's add some styles to this download reading div, swale, go back to my CSS and target this div and background color, our yellow color. Then add padding, one EM from top and bottom, and two EM from left and right. Then add color black and font-size 00.9 AM. Now, let's target this span. You remember it has a class of rate. So I will go back to my CSS and target this span and add font-size, 2.5 mm. Font-weight, bold, and margin, bottom minus 0.25 EM. Back to our CSS. I'll go right here below the download info class selector. And I will select the H4 and add margin 0. Then I will add the p tag and add margin 0 as well. And font size 0.9 EBM. And we finished the styling of this section. And the next lesson we will start adding our flexbox to make it look the way we want. So see you then. 26. 26 adding flexbox to the download section: Hello everyone. In this lesson, we will change the layout of the download section using Flexbox. So let's get started. All right, so you can see here we have our section, and it contains two major dibs. The first div, which contains the image and has a class of download image. And the second, which contains all of this content and has a class of download content. If I shrink my browser until I reach the mobile screen size and go to my demo right here. You can see we have our image taking up the full width. And below it we have the download content div. And you can see the anchor tag here is taking up the full width. And below it, this download info div is also taking up the whole width and the images are displayed horizontally. Also, the reading section is looking nice. So let's go to our CSS and change our layout a little bit. I will select the download content div, which contains the anchor tag, the info div, and the rating div. And I will say display flex. Remember we want them to stack up below each other and mobile devices. So I will set flex flow to column. And now you can see that the anchor tag here is taking up the full width. This is because stretch is the default value for the align items property. And you'll remember that align items work along the cross axis, which is horizontal in this case, because the flux flow is set the column. So for example, if I go back to my CSS and add align items, flex start. You can see that the elements inside the download content div are aligned to the start of the container. All right, Let's remove this line. And let's keep going. We want the content inside this anchor tag to sit below each other. Remember, inside this anchor tag, we have a span that contains this download word. And then we have an icon below that. So we can go back to our CSS, then target the anchor tag, and set display to flex. Then flex flow column so that the elements will sit below each other. And then justify contents center to make sure that the elements will be always centered vertically even if the height changes. And then we will just add text, align center. And now the anchor tag is looking the way we want. Next, we want this div with the class of downloads genre and this div with a class of download cast to be displayed as flex containers so that the content will be displayed horizontally, not vertically. So back to our CSS. We will target the download genre and download cast divs. And we will set the display property to flex and said flex wrap to wrap to make sure that the elements will wrap to the next line if they have no space. And you can see now the content inside each of them is displayed horizontally with this word right here isn't centered vertically. So back to our CSS. I will add a line items center. And you can see now they're centered perfectly along the cross axis, which is vertical here because the flex flow is rho by default. Next, let's move to the download rating. We just want to make it look like the anchor tag up there, meaning we want all the spans inside of it to be displayed below each other and to be centered. So we can go back to our CSS. And then right here beside the anchor tag, we'll add the selective for the download rating section. And just like that, we've got it the way we want. Next. We also want to add a little bit of spacing right here. So back to our CSS. I'll target the H.264 that is inside the download info section. And I will add flex basis 20 percent. And now you can see there's space right here, which will look good on mobile devices. Next, I want to add a little bit of margin right here. So back to our CSS. We will target the downloads genre div, and add margin bottom, since ten pixels. And now it's looking better. So now this is looking great for mobile devices. But on tablets in wide screens, we want the anchor tag, the download info section, and the download reading section to be displayed side-by-side. This can be done super easily using flexbox. We will just need to target their container, which is the download content div, and set its display property to flex. So let's do that. Back to our CSS. I'll make a new rule for medium and large screens. Then target the download content container and say display flex. Now they're displayed side-by-side horizontally. But there's a problem. We have some empty space right here. So we need to distribute this empty space between the three elements. You remember that we can do that using the flex grow property. For example, if I set the flex grow property for each one of them to one, then this free space will be distributed equally between them. But what I'll do here is I'll set the flex grow property for the anchor and the download rating section 2, 1, and set it to two for the download info section. That way, it'll take up double the space at the other two will, because it has more content. So back to our CSS. I will target the anchor tag and the download rating and set flex grow to one. Then I will target the download info div and said flex grow to two. And now you can see this section is looking great. And if I shrink my browser, you can see it's fully responsive on all devices. If you ever try to attain this kind of layout without Flexbox, you will find it very difficult. But with Flexbox, everything is much easier. So this is it for this lesson, everybody, and I'll see you in the next one. 27. 27 building our gallery with the horizontal masonry layout using flexbox: Hello everyone. In this lesson, we'll be building our gallery. So let's get started. All right, everybody, I'll start by going here after the download section and add a new section with a class of gallery. And inside of it, I will add an H2 and give it a class of section header. And we'll say movies gallery. And below that, I will add a div with the class of gallery images. And inside of that div, we will be adding the divs which contain our images. So first, I will add a new div with a class of gallery image. And inside of that, I will add an anchor tag. Then we will be adding our image inside of the anchor tag. If I go to my browser and view this, you can see we have our image right here. Now back to our HTML. I'm going to pause the recording and copy this div with the class of gallery image ten times and change the images. All right, so we're back. I've added 10 divs with new images. So if I go to my browser, you can see they're sitting below each other right here. Now, let's go to our CSS. I'll target the gallery images div, which contains all the inner divs. And I will set its display property to flex. You can see now all the gallery image divs that contain the images displayed horizontally in one line. Let's go back to our CSS below this display flex and said flex, wrap to wrap. And also let's target the divs with the class of gallery image and add height 250 pixels so that all the divs will have the same height. You can see now the images are displayed below each other again, and we all have the same height of 250 pixels. Let's go back to our CSS. Next, we want to add some random flex basis properties, divs that contain our images. That way each div will have a different width than the others, like the layout we want. Now we can do that in two ways. First, we can just add a unique class for each div and then target those classes individually in our CSS and add different flex basis properties to each one of them. But in our case, we have 10 divs. So it would be very difficult to do this to each one of them and it's not a dynamic solution. The other way is by using some advanced CSS selectors. So I'll paste some code here. And now you can see that the images have random values for their flex basis property. Let's go to our CSS and I'll explain what I just did. So here, I've just selected the gallery image div. And in case you don't know what the nth child does, it just accepts numbers to determine the specific element you want. So for example, if I add one here, then what this will do is it will target the first div that has the class of gallery image. And if I add five, then it targets the fifth div with the class of gallery image and so on. But what is this, this for n plus one? Well, first of all, the in letter right here means that this selection process will be repeated dynamically. For example, if I just remove this and add in only, then this will target the first element that has the class of gallery image, then the second one, then the third, and so on. So that in the end, all the elements will be selected. But if we make it to n, then it will target the second and add to each time. So the second, the fourth, the six, and the eighth, and so on will be selected. And if we make this for n, I think you now can guess that it will select element number 48 and 12 and so on. But if we make it for n plus one, then this one we added is called the offset, is the number that we will start counting from. So in this case, we will select elements that have the numbers of 159 and so on, instead of 4, 8, 12. So for example, if I go right here to the second selector and add border five pixels, solid red. Now, if we look at this selector, we will see for n, meaning that we will select a new element every four elements, for example, for eight and 12. But there's a two right here, meaning that our offset is two. In other words, we will start selecting our elements from the second element. So it will be 2, 6, 10, and so on. So let's go to our browser and reload. And now you can see that we have the red border around the element number 2, then number 6, and then number ten. So now you know how I added the dynamic values of flex basis. But when you look right here, you will notice that there is a free space. We can increase the elements with to take up this free space using the flex grow property. So back to our CSS. Let's delete that and go right here inside the gallery image selector and set flex, grow to one. And now you can see the elements expand to take the remaining space. But there's a problem here. Images inside our divs aren't taking up the full height. This can be easily fixed by going back to our CSS and targeting the images. Then add height 100. And you can see the images are stressed to take up the full height of the gallery image div, but they're not looking very good. See how they're forced to fit in the container. If we head back to our CSS and add object fit cover. And the problem is gone. The images are looking great. Now, one thing left, we need some spacing between the images. So back to our CSS. I'll go right here in our gallery image div and add a margin of 0 at the top. 0 from the right, eight pixels from the bottom, and eight pixels from the left. And let's target the outer div with the class of gallery images and add margin left minus eight pixels. So it will pull the container eight pixels to the left and compensate for the eight pixels that the container was pushed to the right. So there you have it. A very advanced gallery layout that looks great and is fully responsive. If I view it on different screens, you can see it's fully responsive. The elements are rubbing nicely when there isn't enough space. Because remember, we set flex wrap to wrap. So that's it for this lesson. Everybody. In the next lesson, we will continue building our gallery. So see you then. 28. 28 adding gallery lightbox plugin to our gallery: Hello everyone. In this lesson we will be creating the modal window for our gallery using the JavaScript Lightbox plugin created by low cash the car. So let's get started. All right, Now, if we look at our HTML, you can see that our images are wrapped inside anchor tags. Now in the opening a tag, we want to use the href attribute to control what we're pointing to. We want each thumbnail image to link to the uncrossed version of that image. So I'm going to add H ref and then copy the path of the image and paste it here. And now if I go back to my browser and click on this image, you can see it now leads to the full image. Now clearly, this is not a modal window. We haven't even plugged in the light box yet. And what's happening here is our webpage is simply linking us to a new page, or in this case, to a new image. And we can go back to our page by simply clicking the back button. Let's go back to our HTML. I'll go through all the links and add the href attributes for them. So I'm going to pause the recording and handle that. And back. So now we have our images and when we click on any one of them, it will lead us to the full version of the image. Now we want to make the modal window take effect when we click on the images. So let's go and search for light box will open this link with location, the car's name. And then we'll download it. Next, we'll extract the zip file, open it, then open the dist folder. And we'll need the CSS folder right here. So I'm going to copy and paste it into our project folder. We will also need the JavaScript folder. So I'm going to open the JS folder and copy the light box dot js file. And then go back to the project folder and open the JS folder and paste the file here. And now we need to include this file in our webpage. Swell, go back to my code editor and go right here before our main.js file. And I'll write script source JS, lightbox dot js. And also let's include our CSS file. I'll scroll up to the head of our webpage. And we'll go right here below the Google fonts, and we'll say link H ref CSS, lightbox dot CSS. Now with the light box CSS and JavaScript files in place, we're one step away from having modal behavior. Let's scroll down to our gallery images. Let's start with the first image. So when the a element, I'm going to add a new attribute called Data light box. You can add a value of anything you like here. So I will use gallery. Now when I click on the first image, you can see it opens in a modal. Next, we need to apply this data-lightbox attribute to all of our images. Let's do that. Now if we go back to the browser, reload and open any image, it will pop up in a modal. And if I hit the right arrow button on my keyboard, you can see the following image is displayed nicely and so on. And now we've finished our gallery section. We'll continue working and learning in the next lectures. 29. 29 building our sidebar using flexbox: In this lesson, we're going to start adding content to our sidebar. So let's get started. All right, so first of all, I'll go right here inside the div with the class of sidebar. And I will delete this dummy content we added before. Then we'll start by adding a div with a class of widget. And inside of it, we're going to add another div with a class of widget content. And then inside of that we will add H3 and just say top rated movies. And inside of that, we're going to add a nav with a class of sidebar menu. And then we will add UL LI, then an anchor tag inside of it. And we will say The Godfather. And then we'll copy that LI and pasted a couple of times. And then we'll just say 12 Angry Men and the Dark Knight. And now you can see our menu is right here. Let's go to our CSS and do some more. Will go right here between the comments. And we'll target the sidebar, right? Class. And then we'll add padding to E m. And then we'll add color black. And below that we will target the widget class. And we will add background color white, and then margin bottom to EM. So there'll be some spacing at the bottom when we add more widgets. You can see it's now got a white background color, but let's add some padding here. Back to our CSS. I'll target the widget content div, and then add padding of 0.5 EM from the top and bottom and two EM from the left and right. And then below that, I'll target the UL of the sidebar menu and add list-style-type, none so that we can get rid of the bullets. And then padding left one VM. So now you can see the menu is shifted a little bit to the left due to our padding. So now let's style the links back to our CSS. I'll target the anchor tag inside the sidebar menu. And I'll add display block. And then padding bottom point for EN so we can get some spacing below them. And then color black. Text, decoration, none. And font-weight, bold. All right, you can see it's looking better now. So back to our HTML. I'm going to pause the recording and copy this div with a class of Widget a couple of times. And I'll change the contents so that we can get more content in our sidebar. Back again. Now you can see we have more content in the sidebar, and our sidebar is looking great on wider screens. But if I inspect any element in the page and resize the windows so that our sidebar collapses when we hit the medium screen size. You can see that the widgets are taking the whole width of the sidebar, and this will look great on mobile devices. For example, if I continue shrinking my browser until I hit the range of small screen sizes, you can see the widgets are looking great. But when we expand to the medium size again, I think it will look better if we have two widgets per row in medium screens will make that happen by using Flexbox. So back to our CSS, we will create a new role for medium screens, which have a minimum width of 800 ten pixels and a maximum width of one hundred, one hundred and twenty pixels. And then we'll target the sidebar right div. Then set its display property to flex. You can see all the widgets are now displayed side-by-side horizontally. Back to our CSS. We'll go below display flex and add flex wrap, wrap. And now the elements are read to the next line. Back to our CSS. I'll target the div with the class of widget and add flex basis 48.8%. And now there are only two widgets per row. But we want this 3% remaining space right here to be between the widgets, not at the end of the container. That's easy to do. So that to our CSS. I'll go right here below the flex wrap, rat and add justify content space between. And now they're separated nicely. But one thing left, Let's go to our CSS and scroll up until we find the sidebar right class. And then change the blue background color to the same background color of the body. And now our sidebar is looking great on medium screens. And if we go to smaller screens, looks nice, then larger screens looks great day too. So that's it for this lesson, everyone. And I'll see you in the next one. 30. 30 building our menu and our footer: Hello everyone. In this lesson, we will be adding the menu to our project. So let's get started. All right, So we'll be adding a menu that is very similar to the simple menu we created in the previous lessons. We'll just remove some links and change the colors. So here I'm opening the HTML file of the symbol menu we created before. And I'll copy this URL and go to the project HTML file and copy it right here in the nav tag with a class of main menu. And then I'll just leave three links and remove the others. We're going to change the link text. So we'll say watch, then download, then gallery. And now you can see the menu. Let's also borrow the styles from the CSS file of the simple menu. So now I'm opening the CSS file and a simple menu, and I'll copy all of the styles we added before. Then go to the CSS folder of our project and paste them right here. Then I'll delete this menu Heading selector because we don't have the menu Heading. And then I'll change this menu selector and make it main menu so that the styles will be applied to our menu. I'll also change this single nav selector and make it main menu as well. That way, the flexbox styles will be applied to our menu. And then we'll change this 600 pixels to 810 pixels. And also, let's remove this background color of the URL because we have our yellow color up here. And then change the color of the links to black. Then make its font size 1.1 EM. And it's font-weight bold. Also, when we mouse over it, we want the background color to be black and the color to be yellow. And here we've got our menu looking great. And when we mouse over any link, the background becomes black and the color changes to yellow. And it looks great on wide screens. And if we view it on mobile devices, you can see the links are nicely sitting below each other. Now, we have one thing left to do, and that is the footer. It'll just contain one simple line of text. So let's go to our HTML. Scroll down to the footer, and let's just remove this one. And say All rights reserved. Ahmed Sidak Udemy. Now let's go to our CSS in search for footer. Then remove this header selector and this 100 pixels height and add color white. Then text align center and padding, 1.5 e m. Then font size 1 point 2, EM, and font-weight bold. Then below that we will target the header and set its background color to black. And now we have our footer. And finally, at last, everybody, we have finished our project. I think we learned a lot about how to use flexbox in action while we were building the different sections of this project. I hope that you liked it and I hope that you now have a solid understanding of all the flexbox properties and how to use them. And of course, if you have any questions or comments or anything you want to ask about this, leave it in the Q&A section and I'll be more than happy to answer as soon as possible. Thanks.