CSS3 Master Series: The Complete Guide to Master CSS Flexbox | Hichem Med | Skillshare

Playback Speed


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

CSS3 Master Series: The Complete Guide to Master CSS Flexbox

teacher avatar Hichem Med, Full Stack Developer

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

21 Lessons (1h 18m)
    • 1. Introduction to Flexbox Fundementals

      0:18
    • 2. Flexbox overview

      2:22
    • 3. Flexbox basics and terminology

      3:32
    • 4. Understand Flex axes

      2:20
    • 5. Introduction to the flex container

      0:18
    • 6. Flex-direction

      3:01
    • 7. Flex-wrap

      2:38
    • 8. Justify-content

      2:54
    • 9. Align-items

      2:03
    • 10. Align-content

      1:10
    • 11. Introduction to the flex item

      0:18
    • 12. Flex-grow

      2:20
    • 13. Flex-shrink

      1:26
    • 14. Flex-basis

      1:38
    • 15. Order

      2:50
    • 16. Align-self

      1:38
    • 17. Flexbox with margin auto

      2:14
    • 18. Create a website part 1

      10:21
    • 19. Create a website part 2

      13:10
    • 20. Create a website part 3

      10:01
    • 21. Create a website part 4

      11:04
  • --
  • 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.

177

Students

--

Project

About This Class

**** Learn CSS Flexbox and Create responsive websites easily! *****

You know it, I know it, all web developers know that laying out elements in CSS can become tricky,

even something like vertical alignment has been challenging for us!

But you know what? 

Flexbox is here! with Flexbox, laying out elements in CSS has never been that easy, you can create advanced layout, without affecting the markup, you can change the order of elements and so much more!

This course is your complete guide to CSS Flexbox, I know that learning CSS Flexbox can be confusing if you don't learn it properly, that's why I have done my best so this course will be the best course out there to learn EVERYTHING about CSS Flexbox,

and by the end of this course, we will create a complete website from scratch with CSS Flexbox!

Meet Your Teacher

Teacher Profile Image

Hichem Med

Full Stack Developer

Teacher

Hi! I'm Hichem. I'm a full stack developer with a serious love for teaching.

I'm a web designer and developer with a huge passion for creating modern well crafted new things from scratch. I've been building websites for several years.

I'm really excited to finally share my knowledge with you.

"It is my pleasure and privilege to teach you. I hope you'll come away knowing something you didn't, so join me on this crazy adventure that will change your life!

Thank you!"

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. Introduction to Flexbox Fundementals: Hi and welcome to this section. In this section, you will learn how to have control over flex items using all the properties available to you. This section covers everything you need to understand about flex islands, so make sure you watch all the lectures season. 2. Flexbox overview: Before we begin working with Flex Box, I want to take a moment to give an overview of what flex book can do for you and why you should be using them right now. So let's discuss position in in CSS CSS position. In methods like floats, an absolute positioning have certain limitations, and we're not even designed to handle the layouts. Demons off today's complex responsive websites, for example, flows or not intended for page layouts. They were really meant for up in text around images, but developers found a way to use them somehow to create the desired layout for their websites. Also, floats can be really problematic. Sometimes they require clear fixes and can have some quirky behavior. There are also some other tools that developers have been using, like relative position in with the absolute positioning or isn't the display in my block value and the list is long. So we've been using these tools for so long that the most of us got pretty good at building complex layoffs with just the suits. But there have always been some other things that were very tricky, like vertical positioning, which I think should be simple, but in CSS. It has bean really challenging to align elements vertically, or maybe ensuring equal heights in the great off multiple side by side boxes with buttons fixed to the bottom off each box. This was very hard to achieve, but think about it. Laos should not be the heart. That's where Flex Box comes in. Flux Box is just one off several new CSS layoffs models that's are designed to help create powerful layoffs as easy as it should be. So with flex box, you can control alignments and sizing off elements relative to their parents. You can even change the direction or the older, regardless off the order they come in in your issue. More documents. You can place an elements everywhere. Well, all the complex tasks for Les announced elements has no become easy thanks to CSS flex box , and in this course you will learn everything about flex box. You will learn what are the tools available to you and how to use them properly in order to create advanced CSS layouts 3. Flexbox basics and terminology: flex box is a whole module and not a single property, and I believe that you should understand the terminology and concepts behind flex box. So Flex Box involves a lot of things, including its whole set of properties. Some of them are meant to be set on the container known as the flex container, whereas the other ones are meant to be set on the Children known as flex items. Deflects container is created by adding and value off flex to the display of property off any elements, and it says D context for flex box layout. It can be any block level or in line elements like they've header, even respond elements and then every element that is a direct child off. The flex container is called a flex item, and the flux container can have several flex items. So let's explain this with some examples. Here we have a container with four Dave's with different colors. If you go to your CSS and targets this container and then within this declaration block, you said the value off the display property. To flex, though, this container has become a flex container, and these boxes have become flex items I believe that it is really important to differentiate between the flex container and the flex items because, as I said in the beginning, off this lecture, there are some properties that's work on Leon Flex containers, and there are other prophecies that's work only on flex items in addition to the flex container and flex items. To really understand how flex box works, you need to understand the logic that's flex box follows to lay out to the elements. So you need to know about the axes along which brother will place deflects items. This may be a little bit tricky, so I need your attention here. Flex Box follows two axes that determined the layoff direction off Lex Islands. These elements are laid out following either the main access or the cross access or the two axes. Please keep in mind in a flex box layout. Everything is relative to these two axes, so the main access is the primary access along which flex items are laid out. It defines the direction off the flex items in the flex container on the cross access runs perpendicular to the main access. So in our example, when we gave to the container, a display off flex by Defour's. Our elements are sitting next to each other from the left to the right. By default, the main access starts from the left to the right side, and the cross access starts from the top to the bottom. But there are some properties that you can use in order to have control over these to access, for example, you can make your main actions go from top to bottom on the cross access from left to right . I believe these are the two essential parts or flex box. We have the flex container and the flex items, and you have the main access and the cross access. If you don't really understand these two concepts, Flex Box would make you feel stupid on. That's what happened to me when I was first Learning Flags Box. I've been using some property that are for the flex container on the Flex Islands on the opposite, and it has been really confusing without knowing the difference between them and also if you don't make the difference between the main access and the cross access, laying out elements using flex box properties can be very tricky. 4. Understand Flex axes: in the previous video, we have addressed the two essential concepts you need to know in order to understand flex box properly. By now, you know, that's by says in a value off flex to the display property off a specific elements. This enemies now becomes a flex container, and every element that is an immediate child off the flex container is a flex item, and you also know that deflects items are laid out according to the main access and the cross access. So here in this example, we're setting a value off flex to the display property. So this has become a flex container, and these boxes are now flex items. As you may have noticed, elements are laid out by default from the left to the right side, and that's because they are following the main access, which by default is from the left to the right. The easiest way to understand how the Axis work is to think about a flex container as either row or column. If the flex container is said to be a row, the main access around horizontally while the cross access runs vertically, and if it's said to be a condom than the main access is vertical. While the cross access is horizontal, this is very important to remember. Throughout this course, you will be learning properties that's control alignments based on the main access and other purposes that's control alignments based on the cross access. Each access has a source and an end. So the main access has a story that is called the main start and has an end that is called the main. And so if you had the flex container said to be a row, the main access starts from the left to the rice, so the main start is the left point, and the main end is the rice point and for the cruise access. If our container is said to be a row, the coral start is this top point and the cross and is the bottom point. The important thing to remember as you learn flex box is the direction off. The main access will determine which properties you need to use to control alignment and spacing, so be sure you focus on keeping truck or flex access as you begin working with flex box 5. Introduction to the flex container: Hi and welcome to this section. In this section, you will learn how to have control over flex items using all the properties available to you. This section covers everything you need to understand about flex islands, so make sure you watch all the lectures season. 6. Flex-direction: By now, you should know the two essential parts off lex box, which are the flex container and flex items and also the main access and the cross access. And in this video, you will learn a property that allow you to have more control over the access off a flex container. So we saw that if we give to an elements a value off flex to its display prophecy, this elements will become a flex container and is direct. Children are flex items, and by default, the main access runs from the left to the right and the cross access from the top to the bottom. Now what if you wanted the flex items to be positioned from writes the lefts, or maybe from top to bottom or bottom to talk well with flex box. You can do this, and that is by using the flex direction property. This prophecy establishes the main access, which means it is defining the direction off the flex islands. So if you go to deflects container and rice here, flex direction, then set a value off row, well, nothing happened. That's because by default, the flex container has a value of rope, which means your flex items will be from left to right. But if you type in here, wrote reversed. Now the flex items will be positioned from the right side to the left side. So this is the result offsetting a value of row to deflect direction. Property off a flex container, and this is the result offsetting a value off ro reverse to the flex direction prophecy off a flex container. There is also another value that you can set. So here, if you remove ro reverse and set a value off condom using this value, we just changed the direction off the main access and the cross access. When you set a value off columns to deflect direction property off a flex container, the main access becomes vertical, so it will go from top to bottom, and the cross access now will be horizontal, so it will be from the left side to the right side. And with this column value, flex irons were stuck on top of each other, and finally, there is another value that you can use with the Flex Direction property, which is the column reverse. So basically it works just like the column property but reverses the order off the flex items. So let's look up, deflects direction and property can except for different values. The 1st 1 is the road, which is the default value, so the row value will align flex islands from left to right. Then the second value is ro reverse, which basically reversed the order off the flex items on a rope. Then the third value is column. This value allows you to align islands from top to bottom and finally the value off column reverse, which basically works just like condom but reverses the order. 7. Flex-wrap: by default, flex items will try to fit onto one line. For example, here, if you are other elements to our flex container, even if there is no space left for the flex items, they will overflow. And this is the default behavior or flex items. They will always try to fit onto one line. So here, if we decrease the with off their container, you can see it's clearly here that they are overflowing. Even if you have set a flex direction here to Khanum Flex, Iram will overflow. Well here you cannot see it. But if we said a small value to the height off our flex container, you can see here. Flex items really don't scare. They go out off the container. This problem needs to be addressed. So how to fix it? Well, Fortunately, there is the flex where our property that you can use this property accepts three different values, no up or up and drop reversed. So here, let's go to our flex container and type in flex Rupp, then give it a value off no rap where nothing happened. That's because it is the default value, which tells all reflects items to be on one line. But if you said a value of rap now, flex islands were up onto multiple eyes from top to bottom. If you have a flex direction off row and if we have said the floods. Direction two column, the Flex Islands will were up from left to right. So let's go here and let's remove the flesh direction so the default value would be applied , which is rope. And now there is another value that can be used, which is or up rivers. This value will tell the flex items to rub on to multiple lines, but in the opposite order. So by now you know how to control the direction off the main access that lets you align the flex. Ireland's using deflects direction, property. And in this video we saw how to use deflects for our property to make flex islands rap. There is a short and property that you can use to said the floods, direction and the flex rub at the same time, which is deflects flow. The first value is for deflects direction, and the second value is for the flex wrapped. So, for example, here if you type in flex flow column, leave a space. And then, writes Rupp, it is the same thing as having fled direction. Khanum and Flex Rob set to wrap So this is a nice shorthand property that you can use. 8. Justify-content: aligning elements with flex box is very easy. In this video, you will learn how to line elements are long the main access and that is using the justify content property, this property except many values. So you have flex, sort, flex and center space between and space around. So let's go to the flex container here and said the justify content to flex start so you can see that it is the default value. If you don't set these purpose e explicitly, the default value will be flex start. But now if you say flex, and now the flex items will be aligned at the end off the main access. Remember if you said the flex direction to row, the main axis runs left to rice. So the main start is here and the main end is here. And when you said a value off flex and to the justify content property, flex items will move to the main and here, so let's move to the next value, which is center. This value is self explanatory. Deflects items will be centered. The justify constant property can also be helpful if you want to distribute extra free space. So if you set a value off space between, you can notice that the browser is doing a great job at distributing free space around deflects items. The amount of space here is the same, and that's a great thing. There is also another value that you can use, which is space around. Well, basically, with this prophecy, the browser with calculates the main size off each elements, and then if there is free space, it's well distributed around flex items. But the only difference between space between and space around is the with space around. You have extra space here. The brother will take a hard off the free space and puts its next to the first flex item and put the second half next to the last flex item. So here, if the free space was something like 50 pixels, the browser will take 25 pixels and puts it next to the first flex item and 25 pixels next to the last flex island. So now you can start using the justify constant prophecy. So online flex items along the main access. Please keep in mind. This prophecy is relative to the main access, not the horizontal access so if you change the main access using the flags direction property, it will behave differently. That's because it is relative to the main access. So if your main access is said to be row, the justify constant property, you will align flex items horizontally. But if your main access is said to be column, the justify constant property will online flex items vertically. 9. Align-items: In the previous video, you saw how toe align flex items along the main access with flex box. You can also have control over the alignments or long the cross access, and that is using the alliance items prophecy. This prophecy except the following values flexors, flux and censor stretch and baseline. And the default value for this property is stretch. For example, if you go to the flex container and type in a line items and said it to stretch well, nothing has changed. And to see that our flex items are really searching, I will increase the height off the flex container. So if we said this values to the height property, you can see that the Flex Adams are stretching. Now what if this is not what you want when you can use other values? For example, if he said, a value off flex start, no deflects items are a place on the cross start line and are not stretching. If we say flex and no deflects items are placed on the cross and line, you can also use the value off center. This property is self explanatory. It lets you center flex items along the cross access and they're lost. Property that we will see is baseline flex items are aligned such as their base line a line . Now you cannot see the difference. But if you increase the font size off the second elements here and decrease the font size off the last one, you can see that items are aligned, such as their baseline alike. Please keep in mind the align. Ireland's prophecy allows you to align elements or long the cross access. So if you have said deflect direction tow row, this prophecy will allow you to align flex items vertically. But if you set fled direction two column, this prophecy will allow you saw online flex items horizontally. 10. Align-content: If you have flex items that are up on multiple lines, you can control their alignment at the same time when there is extra space in the cross. Access this property except the following values flex, sort, flex and center space between space around and stretch. So if you go to our container and type in a line content and said its value to stretch where nothing happens, that's because it is the default value Lines stretched to take up the remaining space. But if you type in here flex start now lines moved to the start off the container. If we set a value off flex and we're now lines moved to the end off the container, you can also center the lines or set a value off space between or space around. Notice that this prophecy has no effects when there is only one line off Lex islands. So if we remove these elements, you can see that this property has no effects. You can set any value that we've discussed in this video, and nothing will happen 11. Introduction to the flex item: Hi and welcome to this section. In this section, you will learn how to have control over flex items using all the properties available to you. This section covers everything you need to understand about flex islands, so make sure you watch all the lectures season. 12. Flex-grow: In the previous section, we learned all the properties that can be used with the flex container. And in this section we will learn all the properties that can be used with flex items. So in this video, we will learn about deflects girl prophecy. This property gives an element the ability to grow. It accepts a unit Lee supposed to revalue like one or two that serves as a proportion. And with this prophecy, we can sell the flex item. What is the amount off available space that it can take? So here, in my HTML documents, I have a container that has a class or flex container, and in CSS, we said it's display property to flex. So now this element is a flex container and Children are flex items so we can see in the mark up its Children are heaven a class name off flex Iram. So if you go to CSS and targets these flecks items and try to set their flex girl to zero where nothing happened, thus because zero is the default value to this property, which basically means that the elements we must grow but here if we give it a value off one . Now the remaining space in the container will be distributed equally toe or flex items or, if you say to also it will have the same effects. Thus, because on flex items are having the same value or flex grope, therefore they will have the same growth. But what if you wanted to make one of these flecks items to grow more than the others? Well, you can do this, But first, let's go to our issue more documents and give it an I V so we can target it in CSS. So now let's go to the silent and writes the selector. That's targets that specific elements. And here, within this declaration block, let's say flags grow and give it a higher volume. So now you can notice that this element is taken more off the remaining space than the other flex items, and that's because it is heaven, a bigger flex girl value. But if you give it, for example, a smaller value now, it will be smaller than the other flex items 13. Flex-shrink: the flex shrink property specifies deflects shrink fracture, which determines how much deflects Iram will shrink relative to the rest off the flex items in the flex container when there is not enough space on the rope. So let's go to our reflects container and let's give it a small with no. By default, deflects items shrink. And with the flex shrink prophecy, you can have more control over thus, so let's go to this declaration block and type in flex shrink and give it a value of one. So you can notice that the default value for this prophecy is one which means elements are allowed to shrink. But here, for example, if you give it a fixed with and set the flex shrink to zero, which means don't shrink. Now you can notice that deflects items are not shrinking. You can also give difference values to each flex item you can say, For example, I don't want the first flex item to shrink. So you said it's flex shrink value to zero. And then let's other flex Ireland's shrink. So you give other flex items the same value off Lex shrink. You can even give a higher value to a specific item. For example, if you give to the last flex item ah, higher value off flex shrink. Now, when there is no available space, this elements with will be less than the other flex items with. 14. Flex-basis: one of the coolest flex box properties that you can set to flex items is deflects basis. Property. Using this property, you can make your elements responsive with a few lines off coat. This property defines the default size off an element before the remaining space is distributed. The default value for this property is all but if you give it a value, for example, 200 pictures know if there is no space available for this item, it will jump to the next line. So if you resize the browser window, you can see that it jumps to the next life. So let's try another value, maybe something like 50% so you can see that each flex item is taking 50% off the with off its flex container. So let's try a value off 300 pixels and try to resize the browser window. So great we just created responsive elements with few lines of quote. There is also a shorthand property that you can use in order to said the flex grow, deflect shrink on the flex basis properties combined, and that is deflects property. So if remove this and type in flex, then we set a value for deflects grow and then a value for the flex shrink. So let's say zero, which means flex items won't shrink and a value to deflect basis. So that said this value to 200 pixels. And now with the Flex property, we could combine all of what we have learned so far about the properties that we can use with flex items. 15. Order: by default. Flex islands are laid out in the order. They appear in the HTML five. But with flex box, you can have control over this order, and that is using the order prophecy. The older prophecy allows for reordering deflects items within a container and what has been really hard in the past. Now it is really, really easy. So, for example, here we have six days, and as you can see, they are in the following order. You have the 1st 1 than the 2nd 1 than the 3rd 1 up to the 6th 1 They appear in the order. They come in in the source coat. But here, if it's argues, for example, the sixth day, if we can move here and make it says before the 1st 1 Now the default order or flex I REMS is zero. So if you want to place this six there at the beginning off the row, I have to give us a value lower than zero. For instance, negative one will move its at the beginning off the rope. Negative two will also have the same effect. Now let's targets the third box and move it to the end off the rope. So here, let's right the selector that targets that specific elements and then we need to use the order property. So remember, all flex items by defaults have on order property off zero. So if you want to move this specific flex item to the last position, you have to give it a value that is higher than zero. So, for example, a value of one will move it to the last position. A value off two will also have the same effects. No. What if you wanted to move and elements and make it stand next to other flex item, for instance? What if you want the fourth flex item to sit next to the six flex item and the second flex item? Well, this is simple. To make it stay next to these two days, it's order value must have ah higher order value than the order off the sixth elements and a lower value than the second flex item. So remember, all flex items have by default on order off zero, and for the second flex item were not set in explicitly. It's order value, which means it has on order or zero. So now we need to give to our enemy. It's on order value that is smaller than zero, for instance, negative one. And you also need to give it a higher value than this element, or we need to give to the specific elements a lower value. So negative two will just solve this problem for us. So remember, the flex items are arranged from the lowest to the highest order volume. 16. Align-self: When we've been talking about flex containers, we saw how we can make use off the align items prophecy toe online Flex items along the cross access. But what if you want a specific flex item to have a difference alignment or along the cross access without affecting the other flex items? Well, there is the Alliance Self prophecy. The Ally Self for Embassy gives you more control over flex items. This prophecy accepts the following values Oro Flexors, flex and center, Baseline and stretch. So Aro is the default value, which tells the flex item to follow the alignments off its container. So, for example, here within this declaration block that targets deflects container. We have this align items for pretty that is set to flex sorts. And if you go to our flex item and type in a line self or oh, now nothing happens. That's because it is the default value. But here, if we change its value and said it's, for example to center Now this specific flex item is behaving differently. All other elements follow the alignments that we says on this flex container, but this element is a dissenter off its container. We can also give it a value off flex end, which will move it to the end off its cross access. You can also use the value baseline or the value stretch. So using the alliance sell property will give you more control over the alignments off Lex items around the cross access. 17. Flexbox with margin auto: there is an important behavior that we need to address in order to understand how flex Iran's behave with the margin property specifically when a flex item has a margin value off or applying a margin or a flex item will have a were result. If you don't know how it's really works. That's why I believe you really need to understand what's going on. So let's see an example here in our HTML documents. We have a flex container and it is having just one child. And in the CSS, we gave to this container a display off flex, which means now it has become a flex container. And is there a child is a flex item. Now look what happens if I target that specific elements and give it a margin off or oh, what just happened? Well, our elements is centered horizontally and vertically. That's because when you set a value off or go to a flex item and there is free space, that extra free space has been distributed to the top left, right, and bottom off deflects Anna So and here, If we change the margin Orel and say margin left or oh, look what we have now. The free space has been distributed to the left side. Off Deflects Arab. Let's try margin top or Oh, so I think you got the idea. And now let's move to something that is more complicated. Here we have several flex items you can make use off the margin or a prophecy to create advanced layouts. For example, I want the first and the second flex items to be on the left side and the other flex items to be on the right side with the margin Orel property. This can be achieved easily. So let's argues that the second flex item and said it's more generalized property to auto. And now we have what we wanted. And now if I wanted the 1st 2nd and the third flex items to be on the left side instead off applying margin rice or go to the second flex Iram retarget, the third flex item and sets its margin arise value to or and now we have the desired effect 18. Create a website part 1 : hi and welcome to this challenge. In this challenge, we will create a complete website with flex box. So here is the final results. So this website is created with flags box and it is responsive. So for example, here if we go and try to resize the view port, you can see that this website is completely responsive. So here can see the and also for the header. So in this challenge we will be creating this website. So if you believe that you can do it by yourself, pause the video and try to create the same website and now we are going to create this website together. So the first thing we need to do here is to create an Asian or fight Index, that animal and also a CSS fight. Cylon CSS. So here, let's start off with the markup So you can notice that we have a header. We have a section here and also another section here and a footer. So let's go to the index file and here less give us little name is here. Shan met photography biography and then listening to the CSS file CSS. And also let's add a metal Vieux port here. So this website will work on mobile devices. And here let's go and create the basic Markham. So here we have a header. Then we have a section interrupt over here, less fiction, the idea off intro. Then we have a section showcase. Then we have a footer. Great. So let's go to the head of if you can see the final results. We have navigation. Here we have the logo and you have the social links. So here, let's create three enough So the first enough, Let's give us an idea off main links and here we are going this items So the 1st 1 is home . Then we have untucked. It's and then we have of us. Then we have a logo and then the social links. So here we're going to say something like Facebook, then to it up. And then I would plus, So this is what we have. So let's replace these decks with the following Icahn's So let's go to phone. Awesome. Some. So here is a list off the icons that we can use and to link to this phones. Awesome CSS file. I'm going to use phones. Awesome cdn So let's get this link. And here I'm going to say something like drink and then less linked to this. Fine. And now here we can use, for example, Facebook. So this I can't be here and basis? Yes, here. So if you preview, we can see that it is working. And let's do the same thing for the treasure and the Google Plus. So Twitter, that's copy and based here. Then then here. Yeah, good. Plus it's got be. And he's here so great you just finished with the heather and notice moved to this section so you can see that we have an h one here and some very rough. And now let's move to this section. So basically, here we have an aside and we have a main constant. And in the main content, we have courts. So start off the screws, this phone. So this creates a main and then an aside and either mean here we have a cards container and we have cards. Each card has a cart image, a car title, a car description and a call to action. So far, the image and it has an image. So let's give it a new image off 1st 1 and coral title. So it will be in H two se car title, and it has a card description, some random texts and a call to action election link. Here, let's say something like Read more great. So let's copy this guard and create six courts. So the 1st 1 the 2nd 1 and here, has changed the value that let's go created 3rd 1 and exchange this value for Ethan 5th 1 and the last one. Great. So disclosed one of these cards. Great. And let's move to the aside. So we have a church three, which basically says angry. Maybe because he worries. So yeah, categories and enough Ah, allies. This items four list items, I think five five years items and links nature, business, computers, nature, business, computers, health and landscape has and then and escape. Great. And finally we have the footer and basically here are saying made with love by met by me. So if you preview the results so here is our ugly website 19. Create a website part 2: and no, let's go and style this website. So here is going to destroy CSS and less are off the some CSS resets Margin zero and box sizing Brother box Great, it is working So and now let's start off. Let's go to the body and let's give it a the ground color off E c E c e c Great and no less targets the header. So I'm going to split these two fires so we can see. So let's start off with the header and it's give us a background color off this color. So here is go and grab this color. Great disclosed this and now let's removed the fall silent for the links color White takes decoration, non race on this Also, give them a and let's give them some button, something like Tonique pixels. Great and also here. If you remove this two lines, you can notice that we have these bullets. So let's remove them. You say something like Heather this style type and then none great. And here that's CSS resets. And let's start off positioning our links If you give to the header a display property off flex. Now this header has become a flex container. And these this are flex islands. And here we can do something like justify continents, lex and or sense ever or space around. So here let's go inside each enough. So it was targets the first now, which is main links, unless that it's display property display to flex. So here we have main links. Okay, but here we need strong. It's the in order list, grace, and let's do the same thing for the fruitful links Social links. Great. And here has said display block, so you can see the also. He can apply Thiebaud in top and deporting bottom to this links. And now let's target the logo logo and this increase the It's fun size is do something like two ends. It is too big this to something like 1.5 Great. And let's give it a margin, zero and right and left margin value off or oh, great. And here we need to align these links vertically. So we go to the header and online line items and said Center Great has also increased the size off the logo. Great! And now let's move to the intersection Control and let's give it a mean height off 400 pixels. Great and display this playoff, Lex, but we need to give it a flex direction. Off column next direction. Off column Grace And now we need to give it a justify content off center and align items center so they will be centered horizontally and vertically. Great. And also, let's decrease from the size of the paragraph in Truth Than paragraph, with off 60% and margin zero and auto Great. And this August, the the H one into rose. That's H one phone size, toe end and pardon to any pixels. Great. So here in this room, this question mark, maybe 50% great. And here we can add a big round to the interest section, for example, if you say something like background color and then, for example, crimson so you can see here that you can give it a background, but instead we are going to choose a linear ingredient. And from here, let's change this truth ingredients. Okay, that's true, this one. So if you click on, get CSS and then click on copy. So here you can go and based, and also what I need to do here is to set a background image. So, for example, if I say something like that grown image, an image and core, and if I comment out these lines but remove them can see the background image is working. Say something like that. Grown size call over. So it is working. So we need to combine the background image with the linear ingredients. So here I would be doing something like because being here so I can't get. And this is the same thing for this great. And let's remove this line. Great. So let's decrease from the is value nous say to tough and to also talk. And here it's just a value of one and a value of one grace. And here, let's say, points five and fight. It says everyone wants five. The funding for you have five and a value one. Great. And now let's move to this section. So, as you can see here, we have the images that are so big, so the first thing we need to do so you can see what we have. I'm going to target the cords container and then let's give it a funding off 20 pixels. Great and the Sagasti card, then the car image. And let's give it a height off 200 pixels and overflow off hidden. Great. So, no, you can see what we have. And now let's go to the cards container and this is display or flex. So we have cars here. But know this song is the card. Let's give us a flex basis off 250 pixels and a month with marks with off 400 pixels and great so you can see the flex items are trying to fit onto online. Let's go and set flex, rob rough. Great. And also let's give each card the margin of 10 pixels. Great! And now we will be Stylin each court. So let's start off with the card image. Here we have said the card image to 200 pixels, So we've been talking. It's cars, car image and the image place 100% and a min with off 100% Great 20. Create a website part 3: oh, grains and let's go and give each card a box. Shadow your big schools there pixels, 50 pixels and L g b A. Here was Europe on one. So if you and see that we have a book, shadow here. So let's go and target D Car Title course, then card title. Let's give it a budding off 20 pixels, maybe 10 pixels, and this to the same thing for the car description. Car description, but then 10 pixels. But for the budding top zero, Great. And now let's move to the button called Cord, then called to auction. That's our is the anchor display block and this. Give us a button off journey. Maybe it's an pixels. No, let's say something like 20 pixels and let's give it a color off white and this background color, which is in the Header grace and let's remove the text decoration, text decoration none. And also, this gives each called a background color off white. Great. And now here is something interesting that we need to solve with flex box. So if we have not the same text for the card description, try something like or um has changed. The 3rd 1 and also this one and this one. So you can notice that they are not having the same text. But this anchor elements is not here. And this is no you want We want to have something like this. So to solve this used to started the card and let's give it a display off flex. So it's gonna be ugly. Then flex direction, Off column grace. And then with the this element is given a margin, top off or car call to action and then a margin top photo and great, we just solved this problem. So what we have left here to do it is to say something like a line self flex starts grace and let's give it a margin margin. 10 pixels. Great. I'm sorry for this SE margin, the sick it and make its here great. And also, let's increased the fourth decorum for then margin bottom pixels margin bottom 20 pixels. Great. And that's all the over effect to these courts. So when the card is over, give it a box, shadow zero pixel zero pixels and try something like 25 pixels and energy be eight 00 0.2. So here Let's decrease like five Great, unless other a transition transition box shadow as you don't 0.3 seconds. So let's copy this elector and say here when it is being hovered through these lines. Also, this line and here we say background, color, transparent and a color things color, grace. And also, let's a border over there, two pixels solid this color. So as you can see it, is having a weed effects. So that's a transition position Prophecy that say border big grown color than color unless give them the same duration figuration 0.3 seconds. So it is any Mason, but it is having a real effect. And to solve this problem, we need to give a border color off transparent with the same with great. And also let's are this effect to this image, and we need to have toe the effect of this image. So let's go and targets the Qarth image and say transform scale zero point mine So great. And also let's give it a books shadow. Sure, though there are pixels, pixels, 20 pixels and energy Be a I want to Great, so you can see is here. And that's right. This value grace. And when. This when the card is being hovered, that's artist, the card image and the transform scale to one great unless of a transition transition. Transform 0.3 seconds. Here there is a bug. Great. I think the button is big here. Let's go and give it stint, pixels great. 21. Create a website part 4: And now let's move. To the aside, she's this one that is here. But first we need to target this elements and give it a display property off flex. So because all these lines of code and here let's life in showcase, then display flex great. And then that's Argus. The showcase aside. And let's give it a flex basis off 300 pixels. So it is here. Let's remove these bullets, decide this site none. And let's give us a big ground color off white. And here this say something like 400 pixels and also let's give a flex grow to these flecks items. So let's go to the cords. And here we have flex bases that flex grow one great, and they are having a marks with off 400 pixels. So here it's just something like this. Great. Unless Stargate this h three showcase aside a three further off 20 pixels and let's do the same thing for links. So case aside, display block, then Baden off 20 pixels. Great. And let's remove the text, align the text decoration month and a color off. Maybe Black Connor Grace and here just give it that's a over effect to these thinker anchors aside and Kerwin, it has been over. Let's give it a background color. 30 b. A. Here was your points one. And that's other A transition transition. Thank Grown color is your 0.3 seconds great. And now let's move to the footer. Let's artist. This was ER and filter a ground color, so I will try this color, then color off White Grace and let's say something like but then to any pixels, greats and decks online center. Great and also less change the font family. So let's go to Google phones unless shoes this funds and also less true's this one. So let's copy This'll Inc and let's add it to our national documents. And here, let's give this funds family toothy body so we can see that it is working. Let's give the other friends family to the logo and to this title, so less look for the longer and the title great. So it's increased the phone size and also for the footer one size by and so grace. So if you want this aside to be on the left side, not on the right side. So it's argued. The aside which is here and you give it a order off, for example, negative one. And it is here. If you need it, it should be on the right site. And now let's try to precise And at the moment, the website is not 100% responsive. So if we try to see the results, yeah, you can see the records are responsive. There's a problem here, but the header is not so. We can see that the heather is not responsive, but the cards are responsive, and he lists are also a fixed shrink to the aside. Flex shrink zero so it won't shrink. And let's decrease from its size something like. So let's targets this view port list Cerise. Something like There's an immediate Khoury here screen on bucks with and Asare gritty Heather. And let's give it a flex direction off column So you can see that here. The novel is responsive and Heather is expensive. And also let's August the logo, and this gives us an order so it would be on top, and also it sets this song. Is the aside, aside, display off? None. Yes, that is the showcase aside, great. And also let's decrease the font size off this title. So it is in the intro in truth, an H one. Let's give it a phone size off em, maybe something like 1.5 great. And also let's give a to the paragraph with off 80% great! And now the website is 100% responsive.