Transcripts
1. Introduction: I'm Jay Silverstein, a Web development boot camp instructor and front end developer, and I'll be guiding you through this course on CSS Flex Box. Flex Box is one of my favorite new CSS developments, and companies are really starting to dig into its potential for flexibility and responsiveness. This course is perfect for people who already know a little bit about age to mountain CSS and already familiar with them some and are looking to expand. Osias has toolkit. Over the course of these, 16 videos will go through the tools we need to set up a project, refresh a few age two melons, isas basics and then get done. Business with CSS Flex box will also go over some responsive design techniques and concepts , and also a little bit of front and play out. Decide. By the end of the course, you'll be able to design and build your own one page website using CSS Flex box. I'm really excited to teach this course, and I'm excited to have you along for the right One thing that I do want to point out is that because of the way that says this is a has a concept is a thing. It's not possible that teach you everything about it in 16 videos, even though we're only doing a very small subset, so to sort of alleviate that what I've done is I've put together a set of resource materials that you could refer to as you're going to the videos. These will include things like all of the code I use in the examples any links and articles that I think you would find helpful and any additional exercises that I think you should do in order to practice your skills. This will be linked in the description of this of this course, so you can go ahead and click on that and follow along through the resource materials as you're going with videos. Without further ado, let's start this journey towards Let's box mystery
2. Setup & Tooling: one of the most important parts of any developers set up is there tooling? Tooling refers to the tools they use when they're working on projects, and this course I'll be using V s code. There are a number of other code editors out there, Adam and sublime or two examples, and you can use whatever when you're the most comfortable with. However, you do need to be using a code editor. You can't write code into Microsoft Word or pages or no pet or whatever. If you don't have an editor at all, I recommend Della Envious code at code visual studio dot com. It's available for Mac, Windows and Lennox, another important tool that developers frequently uses the command line or the terminal. Generally, when you interact with your computer was, you use what's called the graphic user interface, the gooey that shows you where your folders are, What's formats. Your files are and etcetera as opposed to the gooey, which gives you sort of a visual layer over what's going on underneath the surface of your computer. The terminal allows you to interact directly with your machines file system. I'm going to go through how to use the command line on a Maxwell A next machine because that's what I have. I'll give you If you're on a Windows machine, you can still follow along. There's a couple of commands that are different. But I'll tell you what. Those are in advance. Um, if you're not comfortable using the terminal to navigate, would rather just used finder or Windows Explorer, What have you That's totally fine. I just find that using the terminal helps me to be more productive. So that's what I'm gonna be demoing throughout the course. So the first thing that I'm gonna dio on my back isn't gonna use Spotlight, which is command space to find the terminal. I'm gonna type in terminal and open it up so you can see it tells me the name of my computer, which is Victoria on. And then it has my user name. The first thing that I want to do is I want to check what directory I'm and I'm going to do that by taping the Commander P W. D. This stands for print working directory, and it tells me that I met users slash Jail are That's pretty cool. But what if I want to know what's in this directory. I can use the command. L s l s is gonna list out all of the all of the all of the subdirectories and all of the files that are in this particular directory. This is one of the commands that's gonna be a little bit different on a Windows machine. If you're on a Windows machine, you should use the command. D I r is gonna look a little bit different. Is gonna give you some different information. That's OK. So here is my list of everything that's in this particular folder. I'm I'm going to want to make a new folder called Flux Box. This is where I'm going to keep all of the materials for this course. To do that, I'm going to still do that on the command line and gonna use the command m k d I R. That stands for make directory. And then I'm going to give it the name of the directory that I want to make, which is flats box. I'm gonna go ahead and hit enter and it's gonna tell me. Okay, I made this directory flex box, and if I do ls or de ir. If you're on a Windows machine again, you can see that flex boxes. Now, here in my list of things that are in this particular folder, she's pretty cool. So what I want to do now is I'm gonna want to go into that flex box folder and start making files so I can do things with them. So what I'm gonna do is I'm gonna dio the command C d. That stands for change directory and then I'm going to give it the name of the folder that I want to change into flex box. And then if I do, if I check where I am again by using PWD and see that I'm now it users slash jlr slash flex box. Cool. If I wanted to go back up a level and go into my containing fuller, I would type c d dot dot and that would take me up a level back into my user folder. Um, dot dot stands for the fuller above the current one. If you do just one dot that stands for current folder. We'll see this again when we talk about how to link up HTML and CSS files um, for now, just remember that those of dot dot means back dot means the current folder. So I'm gonna cd back into flex box, and then I'm going to want to make my first file. I'm gonna make a file called, uh, flex box that CSS on a Mac. The Mac or Lennox machine. The command for this is touch. And then the name of the file that you want to make touch, Uh, flex box that CSS. And now, if I do ls again, we can see that I now have the flex box that CSS file in my in my directory Windows users. What you'll want to do in order to make a file is type N u l greater than and then the name of the file flex box. That's yes. This was gonna break if I try to run it because I don't I'm not running a Windows machine, but this is what you would do right here. If I want to open this up and look at everything was in this file, and in this directory, I could just type code, uh, open dot and that's gonna open that up in finder or windows Explorer or what have you, which is pretty cool. The last thing I want to go over in this video is that if you've downloaded V s coat, there's an extra thing you can do that's gonna make your process a whole lot smoother. So I want I want you to do is I want you to open up V s code. I want to go ahead and type command shift p to open up the command palette and then start typing shell and then go to this option, which is installed code command in path. You should get this thing that says Shell command code successfully installed in path. Then if you quit your terminal using command Q and restart it. Let's CD back into flux box. Then I can type code dot And what that will do is it's gonna open the current folder in V s code, including all of the files that are in that folder, which is pretty cool. The command line consume a little intimidating the first time you learned about it. But it's a really powerful tool that can really help up your productivity as a developer. And the resource is I mentioned in the first video. There's a set of command line exercises for you to do in order to practice your command line skills. And, of course, as I mentioned, if you're not comfortable using the command line, you don't have to. You can go ahead and keep using the graphic User Interface Finder or Windows Explorer, or what have you in order to do all of the steps required for this project. I do, however, ask that you make that flats box folder so that you have somewhere to put all of your course materials. In this video. We've talked about the tools of developer uses. A code editor like V S Code Adam are sublime, and the terminal commands, once you've made that flex box folder and optionally have also done the command line exercises that I have in the resource materials. Let's move on to the third video
3. HTML Refresher & HTML5 Semantic Elements: in this video, I'm going to briefly go over the basics of HTML. If you haven't worked with HTML before, I recommend really spending some time learning about it before continuing on with the course. On the other hand, if you're already familiar with HTML and know about HTML five semantic elements, you can go ahead and skip this video. HTML stands for hypertext markup language. It was created by Tim Berners Lee over at CERN as a way to share research. HTML defines the structure of everything that you see on the Web. CSS defines the style, and JavaScript defines the interactivity, and this course will be talking about how to use HTML to create structure for our sites and then using CSS to style them. Every HTML page has two basic parts. A head and a body. The head of an HTML document contains information about the document, the title that should show on the tab and the appropriate style sheets. Any CEO information, etcetera. The body contains the content that will be shown in the browser, so I have terminal open. I'm going to create a new within my flux box holder. I'm going to create a new folder called Demo site Demo site and then within demo site, I'm going to create a new file called index dot html indexed at HTML. Then I'll open it up. Envious code using my code dot command. Then I'm going to scaffold out of basic HTML structure. The first thing I need is a dock type. This tells the browser what type of document this is in this case is an HTML document. Then I need to wrap everything inside an HTML tag like this so you can see I have the opening tag up here and then the closing tag down here. This is what demonstrates a closing tag, Um, the slash after the carrot, Then I need ahead element, which I I'm also gonna include in here that title. All right, First, what page then? I also going to need a body. And within that, I'm gonna have in each one that just says hello world, and this is a very simple HTML page. The other things that you can do is, instead of having to type all of this out yourself ves code, we'll scaffold up for you if you type html colon five and hit tab. So I have the HTML tag. I have the body tag I have to head tag I'm gonna swept up with this title is which is gonna be my first sight and then in the body I'm gonna have in each one that says hello, world. I'm gonna go ahead and open this in and crow by typing open index that h two mouth. There we go. We have something that says hello, world. This also gives me access to Chrome's developer tools. If I go ahead and right, click and then hit Inspect, You can see that I have down here this toolbox that opens up and it gives and it shows me of the html for what is showing on the page. It also has some stuff with the style sheets in that who will mess around with us in a little bit. So this is another very powerful tool that developers use quite a bit. You're probably familiar with a lot of HTML. Elements are ready. For example, Dube's P tags a tags H ones 36 spans yelled allies, etcetera, etcetera, etcetera. What you may not know is that newest html spec and introduced a new set of elements called HTML five semantic elements. Semantic elements include things like Never main article, header, Footer Aside and others. Semantic elements don't appear on the Web any differently from DIV elements, but they are beneficial for things like Web crawlers, screen readers and S e O. What they do is they describe what each part of the document is and how it relates to other parts of the document. This is why it's beneficial for modern Web development, and the resource is, I've included a link where you can read more about each type of semantic element. Once you're done reading that, you can continue on to the next video.
4. CSS Review & reset.css: so I've made a few small modifications to our demo site. I've added some structure to it, so now we have a header on a main. The main has some facts about Earth, which I thought would be fun. We're saying hello. World leaders will have some facts about the world, uh, and thes e in a diff with a P tag in it, which is pretty cool, but so far it looks pretty basic. We haven't done any of our own styling. We just are relying on the browser to decide what it looks like. What you might notice, however, is that some elements appear different from others, even though we haven't written any styles. This is because each browser has its own built in styles that it will default to in the absence of any user defined styles. For example, Crom says said this each one should be bigger than this h three, and that a three should be bigger than should these P tax. It also says that there should be a margin of eight pixels or something, and that each one of these should be spaced out a little bit so that you can see around them. We want to get rid of all this default styling. So we're gonna be using something called Reset CSS. We want to get rid of the styling because each browser deals with a little bit differently . So it it's good to start out with a blank slate so that we can start from scratch and not have to worry about anything. We're gonna do this using something called Reset CSS. As the name suggests, this will take away any default styling and give us a blank canvas with which to create our web design Art. There are a couple different versions of Reset CSS. We're gonna be using the original one from Eric Meyer. You can go. You can find it on my web dot com slash eric slash tool slash CSS slash reset. Or you can just do what I do every time and Google it reset. Here we go. Uh, and here it is. So we have here and it describes it a little bit, and then it has the content of the CSS reset. You can see it's just resetting everything to be zero and all of its defaults. What we're gonna do is we're gonna take this, we're gonna copy it, and then we're gonna paste it into something called Reset CSS. Now, we haven't made this file yet, but what we're going to do is in terminal we have our index HTML and our demo site folder. So far, we're gonna make another folder called Styles there and then we're also going to make one called assets Assets is going to be what holds any images that we may include later on. We're not going to use it yet, but we will. So in, we're gonna So now we're gonna CD into styles. Then we're gonna make a new reset CSS folder, touch reset, Nazi assess. And we're also going to make a style CSS file touch style that CSS cool. This update will show in our in R. V s code. You see, we have these new things, so we're gonna go into styles in reset CSS, and we're just gonna paste the entire reset CSS in there. Save it now. There still isn't any change in our HTML document. This is because we haven't connected the CSS with the HTML yet. So in index it she Mel, we're gonna get within the head tag. We're gonna add a new line that's gonna say OK, include this style sheet. We're gonna say link brow is style. Shoot type is a text slash CSS and the IT ref is the current folder and then the Styles folder and then reset that CSS. So what this does is it says OK, we're gonna include a link to another document. That document is going to be a style sheet of type text, CSS. And then here's the path to it, Which is that styles, uh, reset that CSS. So now if we save this and refresh this, you can see No, we have absolutely no styling at all over here, which I think is a plus. Of course, this looks super boring. Let's fix that. I'm going to say that maybe we should make a Chuan is big again. We should also maybe space things out a little bit and add a little bit of color as well. So what I'm gonna do is I'm going to go ahead and link my style that CSS So I'm gonna say Link Rale his style sheet again type is text slash CSS and then a draft. This time is gonna be in styles. It's gonna be style that CSS cool. Then all that remains for me to do is go ahead and open up my style sheet. First thing I'm gonna do as I gonna take everything in the body tag and make it Sand Saref because I prefer looking at Sand Saref over Sarah. So I'm gonna write a rule for that. First comes my selector. Then comes the property, which is gonna be fun family, and then the value. Which is gonna be Sands. Sarah. Cool. There we go. Then I want ever I went each one's to be big again. So I'm gonna say each one should be fun Size 2 a.m. And I'm gonna say that each div should have a margin of five pixels all the way around. So that's going to space that out a little bit more. Let's also just make age threes lovable fun. Wait, Should be both cool and we're done. This still is not very beautiful, but it looks a little bit better than it did before. Um, but we've included the reset CSS. So now we have a blank canvas toe work on if you don't feel comfortable with CSS. I've included some links in the resource material for you to look through before continuing on, since this course is intended for people who already have a little bit of familiarity with CSS. If all of the stuff that I've just written is totally alien to you, I really recommend that you look through those legs before continuing on. There's one article in particular that I would like everyone who's washing this to read that is thean visible parts of CSS by Mike Wreath Mueller. I especially recommend the part about the visual formatting model, since that's going to become relevant in a little bit. So so far in our demo site, we've included Reset CSS. We've done a little bit of standing, but not that much. We still haven't introduced Flex Box, and we will do that in the next video
5. Flexbox: A New Context: so the time has finally come to introduce the star of this show. CSS Flex Box. Let's see what the officials see this, as special occassions have to say about Flex Box. The CSS three flexible box module or flex box, is a layout mode, providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes in different display devices. The defining aspect of the flex layout is the ability to alter its items with and or hype to best fit in the available space on any display device. Who What does that mean? Let's explore and find out. But before we do, we need to talk about the concept of context and your average Internet website. The elements are laid out in a block context on upwards, their default display value is. Block gives Heather's list elements. In HTML. Five semantic elements are all blocked elements by default. Being a black element means a couple of things by default that take up the full weight of their parent container. By default, they adopt the height of their content and, if you nest, block elements within block elements. A new block context is created that behaves similarly when we apply Display. Flex to an element, however, were resetting the context. We end up with what's called a flex context. Elements within a flex context behave very differently from your ordinary block elements. Let's take a look at an example, so I have Here are same demo site. I've added some additional dips with numbers. 123456789 They are just dibs of class box. They have a couple of styles there in this container, called boxes that has a minimum might height of 300 pixels and with of 600 pixels. So they're behaving as normal block elements. However, let's go ahead and apply display flex to our parent container display flex. Now, when I refresh the page, what we're going to see is very different from what we saw. We were observing in the black context. Any element that has the property display flex becomes what's called a flex container. This is where we've created a flex context. Here's what the W three specs have to say about this. Each end flow child of a flex container becomes a flex item. Each continuous run of text that is directly contained inside a flex container is wrapped in an anonymous flex item. So but it means about the anonymous flex item is that if I just have so I have the section class boxes, This is our foot container. I have all of these boxes gives. All of these are what's called flux items. If I have just some random text in side of this, it also gets treated like a flex item. That's all that that means. So any block level elements within our new flex context it becomes what's called a flex item. Flex items are flex level boxes, which means they participate in their parents flex formatting context. So that means that they just lay out, as you can see here. Within each flex item, however, the context is relatives, whatever that particular elements display value is which, by default is usually block. What that means is that if inside one of these days, I go and create a couple of other dibs, that's eager. Did class equals Box One? Okay, let's make a couple more of these okay, and to a cool and then let's also go ahead and different. Treat them a little bit, so we have a box box order. You can see that these air being laid up in the normal way that a block element would be so . While a flex item exists in a flick context, its contents still exists in whatever context that creates, which is usually going to be a block context by default. We can also perform what I like to call flex option, which is nesting flex contexts within other flex contexts. So let's demo this quickly. If I was to take the our parent box and say that it should be display flex, you can see that now our child elements are now flex items. This is a new flex context. These are flex items and you can see that we have created another flex context and these air displaying in this long sort of vertical stretch like the other elements in this flex in the flats container. Now that we've discussed setting up a new context for our elements, the Flex context will spend the next five videos discussing specific properties that we can apply to flex containers and flex items. As always, the code that we've written in this video is in the resource materials
6. Main Axis, Cross Axis: In the last video, we mentioned the concept of flex containers and flex items in this video and the following videos. We're going to dive into what differentiates a flex container for him from a flex item and what specific properties we can apply to each one. Before we do so, However, we need to talk about the two axes that are specific to flex contexts. Each flex container has a main axis and across axis. It's really important that you not think of these axes is X and Y axes or horizontal and vertical axes or anything like that. They are the main access and the cross axes. The main access defines which direction items are placed on the page by default. The main axis starts at the left side of the page and goes towards right. Meeting items are laid out horizontally next to each other. This is what happens when we apply display flex to an element. It's child elements line up along the main access their properties we can use to change the direction of the main axis. We will go over these in the next video, but for now, here is a quick demo. So we can see here that in this small box we have a flex container with three flex items boxes. We also have a little indicator that shows us where the main access starts. So the main excess starts on the left side and then all of the elements are laid out accordingly. Now I'm gonna uncommon these other sections that have similar play out. You can see they have the same exact HTML markup. They just have the direction of the main access changed. So let's take a look at this. So you can see when the main access starts at the top of the container. The elements are aligned according to that. In this case, since the main access is at the top, the alliums are laid out vertically. Here's another example where the main access begins at the right and goes towards the left . You can see the 1st 1 is now all the way towards the right because they're still lining up in accordance with the main access. And last but not least, we have the main excess beginning at the bottom. And then we have 123 going up. The cross access is always perpendicular to the main access by default. It will just start at the top where the left. But we can also switch which direction of it as well. We're going to see how to use the cross access in our layouts very soon.
7. Flex Properties: flex-direction, flex-wrap: In the last video, we talked about the two axes that each flex container has the main axis and the cross access. In this video, we're gonna learn how to switch up those axes so that we can create different layouts on my flocks container, which is the section I'm going to add the property flex direction and give it the value Row flex flex direction row. This isn't going to do anything because Row is the default value, however, if instead of saying flex direction row I say Flux Direction column you can see that this change is where the main access starts, which is, as I said, said before indicated by this little red dot This is handy, especially when designing a site that's gonna be used both on desktop and mobile because we can switch which direction are elements are going to be laid out just by changing one property value, we can also use the value. For example, Ro reverse ro reverse starts the flex axis on the right side instead of the left. And as you could probably guess, if we said when it's a column reverse, that's going to start at the bottom instead of at the top. This so far is pretty slick, but there's a problem we might run into. If we have a bunch of elements lined up next to each other and one of them has to have a set with, they will overflow the container. We can fix this behavior by adding the property flex rap rap. So first of all, let's let's let's break this first before we fix it. So we're gonna change this back to row. I have a bunch of other boxes in here that I'm going to a NCAA meant, and then let's see how this looks. Oh, no, this is not really the look that we're going for. I think it would be cool if all of these, like, wrapped it down under the next line. So that's what we're gonna do it. We're gonna apply the property flex rap flex wrap. So now these will flow down onto the next line. If I was to add another row of boxes, those would also continue flowing down. Let's see how that looks cool. As you can see, they're still overflowing the bounds of our container, but that's because I container is too small. to hold all of them, and that is fine. Cool. So I can also do this with, um with a column. So if I wanna have Flux Direction column and I know that this is too large to hold all of these and column form, so it'll get 123 in the column and then so on and so forth. We can also reverse the direction of thes by using rap reverse. So now, instead of this, changes the direction of the cross access. So if we had, for example, flex direction grow and flex wrapped rep reverse, we're starting down here at the bottom instead of and at the bottom left. And so the top left. So we're just changing where the cross access starts. We can combine these two properties into one property that's called flex flow. Flex flow is sort of like the border, the border property or any of those other properties that you can give a whole bunch of values to all at once. That happened type out individual property names, so with flex flow, you give it first the direction that you want to go. Let's say we want Theo to go and column. And then whether or not you wanted to wrap that, I'm gonna sell it to wrap just like that. There we go. So we've talked about flex direction flex wrap in flex flow and the next video we're gonna talk about how to align and justify our items along each axis.
8. Flex Properties: align-items, justify-content: we've talked about how to manage the direction of flex elements using flex direction flex wrapped in flex flow. Next, we need to talk about how to position those elements relative to their parent containers. The properties that we're going to talk about in this video are the ones that really blew my mind when I was first learning Flex Box did take a lot of the grunt work out of learning CSS and just make it everything a whole lot easier. Ah, so I'm excited to share them. They're also a dream for responsive design as well. Talk about in a later video the properties. For that we're gonna be talking about our align items and justify content. They do very similar things, which is why we're talking about them together. Justify content deals with how elements are positioned along the main axis while a line items deals with how their positions along the cross access. So let's take a look at both of these and demonstrate Um, so let's first look at the different values for justify content. Ah, I'm going to start by saying that these air properties that are applied on ah flex container so I'm gonna take my flex container, which is the section, and I'm going to say justify content. Should be, uh let's start with Flex Start. One of the nice things about Bs code is that it provides little hints about what each of the properties do as you type them. So as you can see, flex start packs all of elements to the front of the container. This is the defaults, and we're not going to see any change yet. However, if we change this deflects end, flex items are gonna be packed toward the end of the line because you can see here, this is different from rap reverse When we did rep reverse the one was all the way at the right. As you can see here is just pushing the elements to write instead of reordering them. So okay, so we have flex and we also are gonna have center which, as you might suspect, centers the elements. And then we have, um also the default value, which is stretch eso. The elements are is stretched along the height of the page, but this is the default. One very handy thing that you can do with this is you can do something. You consent her elements both horizontally and vertically. Which takes a lot of work to do if you're not using flex box, but with flex boxes. Super simple. So we say online items center and then we also say justify content center. And there we go. We have our elements right in the middle of our box. If you're not doing this with flex Box, you have to do a couple of like, slightly hacky things, and it's very frustrating. So that's a line. Items in justify content. There is 1/3 property that belongs in this family. It is called a line content that applies to flex containers that have more than one wrapped line of content. So let me add a couple of more boxes in here. Are they wrapping up? Yup. They should wrap. So we're gonna go back and say, uh, Flix flow pro rap. Cool. So now they're wrapping. The default for this is to have them stretch up, but we can say ah, line content flex start, and this will push all of them up towards the start. Of course, we can go through flex end and see what that looks like it will push them down to the bottom center will, of course, put them in the middle. And then we also have space around, as you can see and space between. I don't know if space evenly applies to this one or not. Oh, it does. So we have space around space evenly and space between as you could see using a line items and justify content helps us solve a lot of layout problems that otherwise we would have to do a lot of manual work in order to solve. So that's just one of the many benefits of using flex boxes. The ability to use online items and justify content is you leave place items. Now that we've talked about those two and how atoms are aligned on the page, we next get to talk about how to grow and order items so that we can control their size and the order in which they appear
9. Flex Properties: flex-grow, flex-basis, order: Now that we know how to put elements where we want them. Let's talk about how to adjust their sizing. To do this, we're going to use to properties flex spaces and flex grow. Flex basis describes the base size of one flex item along the main axis. So okay, so that's a little bit hard to understand. Let's break it down a little bit. So here I have another version of my boxes in their flex container. Um, there's five different boxes. Each of them is a div inside of a section, so I can target all of them using this and then target them individually using the classes . And then here is my section. It's got display flecks on it. So it is bi flex container. So I want each of these devices to be 25 pixels wide. I do want to point out that I am super zoomed in on this particular thing. So it 25 pixels is not usually this big, but I want each one of these to be 25 pixels. What? So my default response right is going to be to say, uh, what, 25 pixels that seems normal and reasonable, right? Okay, so each of them is 25 pixels. What? Now let's say that I want thes actually to be columns. Right? So I want to just flip these so the one is on the top and then going down 2345 I still want them to take up the entire with. I still want them to be toe have to retain that 25 pixels I mentioned. Except for I wanted to be a height now instead of a what? So let's try first. Applying flex direction column. Okay, well, they are lined up in the way that I wanted them to be, but they're all still 25 pixels wide. It didn't change because now I want them to be 25 pixels high instead of 25 pixels wide. So in order to fix something like this, instead of using width or height, we're going to use a new property called flex basis. Flex basis. Flex basis describes the the measurement of the element along the main axis. So now these air 25 pixels high along the main access which starts at the top man is going towards the bottom. If I was to get rid of this flex direction column, I would get them 25 pixels wide along the main access, which goes from the left to the right. So that's how flex basis works. I do want to point out that flex basis, um, is not necessarily a saying of like, Oh, I want this to be exactly this wine. So if I was to say this whole div, this whole section is 300 pixels wine. But if I tell the flex basis to be 300 pixels, it's not going to do that because it doesn't want to expand past the container. If I wanted it to actually be 300 pixels wide, I would have to use men. What in with which is the minimum allowed with of this particular element? So as you can see, setting the flex basis of an element is not the same as setting it's with. It can still expand or shrink, depending on how much space is available, the basis just gives it a guideline on where to start. Now, if we do want to talk about expanding an element, we are going to use the property flex grow. I'm gonna get rid of this men with and go back to our normal layout of these guys. And then I'm gonna apply a flex grow property with the value one to all of them together you can see what this does. It takes out the extra space that we have here. Sub divides it into however many units we have over here and applies one unit of the extra space to each one, which has the result lifting effect of evenly spacing them out. Now we've applied Flex grow one toe all five of these elements, which means that we're taking the extra space and sub dividing it into five parts and that applying one part to each of those five elements. But if I was to take that off so that were again looking like this and then apply Flex, grow one to just one element. Our first box that's gonna take up all of the additional space left over because there's only one element that we have to apply it to. Now, if I was going to go apply Flex, grow one to my second box, you can see that the remaining spaces now have in between them I can also use different numbers to apply different amounts of growth to each item. So if I'm gonna say flex, grow one on the first box and flicks grow to on the second box, that's gonna look like this. So what we're doing is we're taking that extra space that was available over here. We're adding up all of the flex grow numbers that are in that particular or that are in this flux container, so we have three. So it's dividing that extra space into three, and then those pieces of extra space. It's apportioning them out to each of the sub boxes on the number that they're flex grow. Number is so this one gets one piece of extra space in this one gets two pieces of extra space. Flex Grow is one of the trickier concepts to understand in Flex box. If you're feeling like you could use a little bit more help understanding it, I've linked an article in the resource materials that you can go take a look at that has some detailed illustrations and some explanations of all of the math that's involved as the browser is doing its calculations. The next property that we have to talk to is talk about is the order property. The order property allows us to rearrange our flex items without changing the source code. This is helpful, for example, for S C O. It allows important content to appear first in the source code even if it doesn't appear first on the page. Use the order property. All we have to do is say is apply order and then give it a number. I'm going to say order 54 Box one. Then when I refresh the page, box one will be at the end. If I was to say box to should have, let's give actually, Box four should have order four. It's going to appear next to box One now. So now our order is 235 for one. According to the order property that we've given here, this is pretty cool. It's also very helpful for dealing with a CEO and responsive design because it gives us the flexibility to rearrange our elements without having to change the HTML markup of our page . Now that we've talked about sizing with the flex grow property and the flex basis property , and ordering our elements with the order property. It's time to wrap up and get some more practice in before we dive into actually creating sites using flex books.
10. Flexbox Froggy: we've talked about direction, wrapped alignment, justification, size and order. But there's always more to learn more to practice. If you really want to practice your flex bucks, I really recommend the site. Flex Box Froggy You Confined Effect Flex box for he dot com Basically what it is, it's an interactive practice with flex box. You have this frog that you need to get to the lily pad and you just apply the correct flats property for it to end. And this level we want to use the justify content property contents property to send the fraud all the way to the end of the container. Flex, I really recommend playing through this. I played through this all the time. If I just want to refresh my skills. I played through this as I was putting this course together to make sure that I wasn't forgetting anything. So on and so forth there is also one other thing that I would like to show you. Luckily for me, Flex box Robbie has a level devoted to that particular think sold him. Let right on here it is the property aligned self. A line self allows you to take a particular flex item and align it differently from the other items on the page. So you know, how are line items? Properties are things like, um Flex, start flex, end center So on and so forth, alone across access. Well, if we want, we have one item that we want to put at the beginning or the end of a page separate from its other surrounding elements. We apply the property, align self to that particular flex item. So we're gonna say, ally in self center, and you can see that we have this frog of class. Yellow is now in the center while all of other frogs are still aligned at the top and we would have actually moved us all the way down to flex. And and there we go. So as far as I'm concerned, where you've touched on all of the flex properties and we know how to apply them to different elements now we can start going ahead and creating some layouts using flex box
11. The Holy Grail Layout: and this video, we're gonna take a layup description. We're going to solve it with Flex box, and then we're going to talk through life. Solving it with flex bogs is the best and most efficient choice the layout will be solving is called the Holy Grail layout. You've seen it before, about a 1,000,000,000 times. It looks like this to put it into words. The Holy Grail layout has a fluid center, which means that the center column changes with as the browser changes with and fixed with sidebars. All of those are the same height. The center column appears first in the H two. Mel, any column can have the most content. It has a fixed height, header and footer that spanned the width of the page. It has a footer that reaches at least the bottom of the browser window. No matter the height of the content without using absolute or fix positioning, it requires only one extra element, and it uses as little CSS as possible. Now this description is taken from an article on a list apart entitled Holy Grail layout. I've linked it, and the resource materials will be working from this HTML. It just looks like this. We have had our element of main element on article two asides and a footer That's it on. We'll be using flex box to turn this into something that looks like the image I showed you before. So I've created based styles that just gives us some color. We have the structure of our H two mouths set up here in our document. Let's start writing some CSS. It seems to me that a good place to start would be to make the whole body of flex container eso we're gonna dio display should have display flex Looks cool. Okay, so now we have this wonderful flex thing going on. Let me take a look at this. As you can see, we want the body to be the full height of the browser window. Um, but right now it's only what, 348 pixels tall. What we're gonna do is we're gonna take that height, and we're going to say that the men height of the body should be 100 V h v h stands for Vieux port height. Um, and what that's going to do is it's gonna tell our body container that is gonna be have to be 100% of the height of the browser window. Then we also need to change the flex direction because we want the header to be at the top in the footer to be at the bottom. Um, so we're going to say flex direction column, which is gonna leave us sort of back where we started. But we know that there's a lot of different stuff going on under the hood here now. Okay, so now that we have that set up, I'm gonna go ahead and tackle this description of the header and the footer as having an equal set height. So we're gonna say header and footer, foot her are both gonna have, uh, flex property flex basis of 150 pixels, so that will give them their equal height. So I have this flex container. It spends the entire height of the browser window, but I have all this extra space at the end. I want to take all of this extra space and give it to my main element. So I'm gonna say Maine is gonna have a flex grow Property of one. There we go. So now this is getting towards what our description looked like. We have the header at the top. We have the foot or all the way at the bottom. Even though there's not content in here yet. We also want our main container to be a flux container. So we're going to say, uh, Display Flex here as well. Awesome. Now all that's left to do is resize these sidebars. So the sideburns are both side elements, and they are gonna have a flex basis of 200 pixels, so that gives them an equal size. And then our article tag is gonna have all of this remaining space over here. So we're gonna say Flex, grow one for that article tag, and then we just have to order it. The left side bar has a class of left, so we're going to say order zero. The article has to have order one, and then our right side bar has to have order three. And there we go. We've made this layer. It was super fast and easy with flex box. I just want to show you briefly a small snippet of code of what the solution looks like without flex box. This is extremely ugly. If you ever have a negative margin that is that big, you have done something wrong, and you should probably rethink whatever you're doing with your CSS. So we've solved this layup problem using flex box, and we've explored a little bit y flex boxes, the correct choice for this type of thing. But there are still some flaws and our solution. For example, if we go ahead and take a look at what this looks like, if we make the screen smaller, for example, if it's a mobile device, it starts looking a little bit funky. When we make the screen small enough, it's not responsive yet. We're going to spend the next couple of videos talking about responsive design, what it is and how we can use flex box to make our designs responsive.
12. Responsive Design: So our Holy Grail layout that we've built using flex boxes pretty cool, but it still has some flaws. Like I mentioned, it's not very responsive. Before we go ahead and make a responsive, we're going to talk a little bit about what responsive design is and what it means. The term responsive design was coined by Ethan Marcotte in 2010. Here's what he has to say about it. Responsive Web design is the approach that suggests that design and development should respond to the users behavior and environment based on screen size, platform and orientation. Now, designing in this way with on I to what the user needs at the particular time, it's something that's specific to screens, right? If you're designing for print, you can't make things responsive. Designing for screens is inherently different from designing for print. Because of this concept that Frank Camaro calls flux. Flux is the concept that, uh, the screen is mutable. It can change over time. Um, my good example of this is an Excel document. You can rearrange the columns, you can rearrange the rose so on and so forth, whereas with a printed out table, you cannot originally the people who were designing for Web were print designers. This is why a lot of early Web designs in the nineties and in the early two thousands look a lot look very boxy. They don't resize well. They're built using table so on and so forth because the designers were used to designing for print, so they carried over the same same sort of tool set as they were working on it. But as soon as people viewing started viewing the Web at different screen sizes, so as soon as there started to be different sizes of monitors, as soon as people started to look at things on their phones, etcetera, etcetera, it became pretty obvious pretty quickly that the way that we thought about designing for screen needed to change. Here's a definition of a Web page from an article entitled The Web's Grain by Frank Camaro . Ah, webpage is a naturalist surface of unknown portions comprised of small, individual invariable elements from multiple vantage is assembled into a readable hole. Now there are a couple of things in here that I want to unpack individually. The 1st 1 is this concept of Edgell isn ISS. If you look If you think about a Web page and you think about what shape your Web pages, the initial response right is to think of it as a rectangle because the browser window is rectangular. But in reality it's more like an infinite surface that connects spend potentially, infinitely in any direction. Right, Because you're able to scroll, you're able to scroll in different directions. There could even be elements of interactivity. If the website is blamed, music, or if it's able to respond to your environment, I would say that that's part of what shape it is. So that's one element of this definition. Another element is this concept of reassembly, or of elements that can be moved around and reassembled to create different versions of the same hole. I'm gonna show you a graphic to help you make sense of this. On the left. Here we have an image of the Mona Lisa. We can think of the Mona Lisa as designing for print that static. It doesn't change on the right. We have what's called a joiner by David Hockney. Now, this is much more like designing for Web. You can see we have all of these small individual elements. There's a lot of motion in this particular piece. We can imagine that if we were to take out some of these photographs and rearrange them in a slightly different order, we would still get the same context of the whole. This is a lot like, you know, thinking off your Web pages that you're designing. You can think of them as small, individual pieces of a larger hole that you can rearrange as necessary. So let's take a look at that definition again on edge list, surface of unknown proportions. So we talked about the shape of a site and how we don't know how big it is until reviewing it. Comprised of small, individual invariable elements, these are dues and spans and so on assembled into a readable hole. Now, managing this type of reassembly is what we're doing when we do responsive design, because we shouldn't think of responsive design as managing the break points of a site or of managing where it starts to look weird. Where the layout starts to break so on and so forth we should think of it in terms of reassembly. We're taking the same elements that we already have and reassembling them into a different , readable whole. The job of a designer or developer. This to structure page that at any given moment, no matter the size of the screen or the device of the user, the user is seeing the information they need the most. One of the beautiful things about flex boxes that it makes it reassembly so much easier to manage as we'll see in the next video. But I want to leave you with one last thought. Responsive design isn't just about making sure the site looks good in all sizes. It's also about anticipating the user's individual needs. We're talking mostly in the context of visual design, but this extends Teoh things like how the site's content is structured like should. The important information should be closer, the top on a mobile device because it's more of a pain to scroll down. It should be how easy the site is to read on the screen reader as well. That's another part of responsive design. So on and so forth, designers just approaching a problem with through a creative lens in order to find a beautiful solution. If this topic is interesting to you, like it is. To me, responsive design is definitely one of my favorite things to talk about. I really recommend to articles by Frank Camaro. The first is entitled What Screens Want and the in second is entitled The Web's Grain I've linked to both in the resource materials.
13. Implementing Responsive Design: Media Queries: so we've discussed the theory behind responsive design. Now let's talk about how to actually implement it in our site using something called media queries. Media queries are what allows us to make our websites adaptable for variable screen wits. Here's the syntax for immediate query that applies to screens with a width of of 10 25 pixels. It makes sense when you read it out loud to Hey, media, where the screen sizes over 10 25 pixels. You can right size based media queries without specifying that, therefore, screen. But usually it's good to be as specific as possible. You can also specify print meaning when someone goes to print out your page and speech for screen readers in order to get media queries to work on your page, you have to include something that's called the meta Vieux Port tag. That is, this one right here. This is something that you'll be Googling a lot. I recommend that you just book market. I've included a link with more about what the meta viewpoint attack is in the resource materials. So right now we have this Holy Grail layout that starts to look weird when the screen gets small enough. So let's add a media query to it. So the first thing I'm gonna do is I'm gonna say, um that I want this to be a media query. Four phone sizes, the phone size that I usually start with starts at 7 68 pixels. So I'm gonna say at media screen, and we're going to say this should apply to screens that are less than 768 pixels wide. So we're gonna say Max with has to be 7 68 p x and then we have our media query. We can start reading some rules in here. I think the 1st 1 that we're gonna tackle is this main area here in the center because we wanted to line up as columns instead of his a row, I will have the smaller screen size. So what we're gonna do is we're gonna say main should be flex direction. Call him cool. Now, when I refresh the page and resize this once it gets to the size it swaps to being the column direction. This is so nice. I love flex box specifically, just like to do things like this without having to worry about any floats or like where elements are positioned on the page. But I could just say flicks direction calm and it swamps automatically. I love it so much. Okay, the next thing we need to work on is the orders that the contract comes first, and then the left side bar on the right side bar. That's also pretty simple. All that we have to do is say, uh, that left should be border one, uh, right gets his gets to stay. Order three like it is right now, and we're gonna say that Maine should be order zero and that's it. That's all we had to do. I love it. So what media queries should you include in a project? It really depends on what your project needs are. It's pointless to try and write a media query for every single device sites, because there are literally hundreds of different device sizes out there. My advice is to start designing for mobile and then put all of your desktop styles inside of a desktop media query as usually a good idea to start with mobile because design is easier as an additive process than as a subtracted one. Meaning you should start with the most basic version of your site, which will usually be the mobile one. We're very close to being able to do the project. And the next video. I'm gonna go over some common layout techniques and design trends to help you design your project.
14. Layout 101: so so far, we've learned how to put a page together. What we haven't talked about is what to put on the page and what it looks like when you put it there. That's, Ah, whole topic for a whole nother video Siri's so I won't cover all of site design in this video. But I will go over a few basics that will help you out as you're working on your project. The first thing is considering the readability of your site. One mistake that I noticed a lot of new designers making is they make the text full width or really, why, ah, good rule of thumb is try to keep your text sort of narrow er's and like blocks. There's a length, and I'm gonna put in the resource materials that has a game that you can play that will help you figure out the correct ratio of line height, too. Uh, paragraph length to paragraph with a big trend and Web design right now is to have something that's called a hero section, which is a large section at the top of the page that includes an image and some large text . I have curated some selections from ads I have seen on the subway, and I want you to notice how vibrant all of these images are and how attention getting they are. Also check out the typography. Typography is one of those details that doesn't seem super important, but when it's really good, it's one of those things that you shouldn't notice at all. Another thing that a lot of these sides demonstrate is really good sense of rhythm as you scroll down the page, something a lot of sites do is they'll have separate distinct sections. Maybe would like a picture and an image, or are several eye catching images. This one has a bunch of products. This one has some calls to action called The action is an area that has, like a little blurb. And then somewhere you can click to taken action that will either sell you the product or something like that. You'll also frequently see something like this. This three column layout, with either three different products or three steps that you can take or some information about a particular product. Getting the rhythm of a page right takes a lot of time in practice. If it's if you're not feeling good about the rhythm of your 1st 2 sites. That's okay. That actually means that you're in a good spot, which is that your taste is running ahead of where your abilities are. That's really good place to be, because you can always improve your abilities. All of this stuff is building on a really solid foundation of good color and good typography. Picking colors and typefaces are both courses of their own. But I do want to point out a couple of resource is that you couldn't visit to help you learn about both of those things. This site that Ammon right now is called Color Claim. It's by two bias Van Schneider. He designed Spotify, and he has the site that has a a bunch of really good color pairings. I go to this site whenever I need to take the colors for a new project and then another site that you would find him handy if you're looking up good. Typography is the site type wolf. This site just has a lot of examples of sites with good typography. Looking at examples is one of the best ways toe learn how to do this type of thing. And, of course, Google fonts is always a great resource. As always, I've put links to a bunch of these sites in the resource materials. In the next video, I'm going to demonstrate how I would build a project like the one you're going to build.
15. Full Build Demonstration: it's finally project time. How exciting but I'm gonna be doing in this video is I'm gonna be doing a demonstration of a project like the one that you will be doing for this course. So what I'm gonna do is I'm gonna decide on a website that I want to build. I'm gonna design it. I'm gonna wire frame it out. I'm gonna and then I'm gonna build it with H two mountain CSS. The site that I'm gonna build is gonna be about, I think a spaceship. Um and I'm gonna show you my creation process with all of the things that I do in order to prepare site. And you can take what I do and adapt it to your own needs as you build your project. As I mentioned before, I really prefer drawing out my wire friends. They don't get distracted by features of various wire fearing programs, starting with my hero area. Gonna have large text in a small work with button that called Action Area that has text on a blurb, then a section that has three columns with a title picture and a little description under each picture for each one of those, then an area that has it's gonna have an image on the left and then some text on the right , followed by another short paragraph and then last but not least, a footer with three columns to text and one image. Another thing this is looking pretty good So far, another thing that I like to do is I like to break this up and how many sections are gonna have So one, 23 for five and then last but not least, that footer is our sixth section. Then I also like to subdivided sections into dibs that I think I'm gonna need on my page. So there is one this whole hero section, Maybe this texting button will be another. Then our each of our column area is going to be a div. And then each of the columns will have its own div. The picture and imagination would be a div on. Then this instituted as well so that we can offset it from the sides a little bit. It needs to be spaced out properly, and then each one of these columns is gonna be it's owned. If this just really helps me to see what? The structure of my HTML is gonna be pretty happy with this now All that remains is the started working on coating it. So I'm going to start out by making a spaceship site directory and my flicks box directory making index HTML file make a styles folder and an assets folder and then within styles I need to make reset CSS in style. CSS. Then open it all up in code. I'm also gonna open up the index html and chrome. Um, then I need my html five boilerplate. Give it a title. So far, it doesn't look like anything. That's pretty cool. Uh, we need reset CSS in here. Don't be distracted by how fast I'm typing here. I sped this up some so it didn't take quite a song when you watch it, okay, I'm using split screen so I can look at the HTML and CSS at the same time. I'm gonna link my style sheets. I need, uh, one for reset. And I also need another link for this style sheet itself. Who's going to be what holds all of my own styles? Cool. Still does not look like anything's Let's add some html Let's start with a header tag. This is gonna be where our hero is, and then we're gonna say H one spaceships paragraph with some warm ups and text and then a span of class button that I'm gonna style later look like a button instead of just looking with some text. Say it's girl to learn more. Okay, cool. So it's there. It just doesn't look like anything, but we know it can look like something, So let's go ahead and start styling it. So with the header that is display flex, it should have a flex direction of column and we're gonna give it a men height so that it takes up some area at the top of the page. We're gonna also say I want a container div around these three elements, but I had for gotten that. I already actually have a container tive, so I don't need that one. I have this divide class hero that's gonna suit my needs were also going to say a line item center and justify content center so that this is vertically and horizontally centered in that box. We're gonna say all here attacks should be alliance center. We're gonna give it a font size and font wait for this h one. There we go. Bigger doesn't seem quite big enough, but we'll get to that in a little bit. There's the margin making a little bit bigger. Let's make all the text on the hero bigger so that we can see that as well, and then just fiddle with that for a little bit. One way to make your text more readable is to give it a highlight of 1.4 E. M. This strips helps space out the text in a paragraph so that it's easier for the eye to follow from line to line. As you do that, you just have to make sure that every time you're changing the font size, you have Teoh set the line height as well, so that just helps makes things more readable. Also gonna make it sand Sarah, because I find that a little bit less painful to look at as I'm designing and let's give this header background color so that it can take a look at how it looks not quite tall enough. Give it that class as well. So that's that makes a little bit bigger. Okay, this is sort of what I want to have. So far, Let's work on the first section, which is RCD A or our call to action. I'm gonna comment this, saying what each section ends, that we can look at it, uh, on its own. Cool. So we're gonna have an eight story that says this is a site about spaceships on an actual site. This would be something like contact us to learn more about global blah. And then the button would say Call now or something like that and then linked to the contact page. But since I don't have another page that again a link to and is gonna leave it like this So I'm putting on my base styles of the top. I'm going to say that each span should have a display of block so that I could move them around a little bit more easily later. Cool. So that's not really what I want that to look like so far, but it will be. So we have We're gonna make a div CJ to put these two text elements into cool. And then we're gonna say that tops et a the C T a div used to have a display of flex. I need to give it some padding as well, and then give it a max with because I don't want it. I'm gonna give it a width of 80% of the report within a max with 1000 pixels, They were given a margin auto, which basically will take the all of the available space and then sort of center this div on the page. You can see how it did that. I'm gonna say a Wainaina space between Except for since we're doing it along the main access, it should actually be justified content. I always get those two mixed up when I'm trying to do stuff like this. Cool. So the okay is on one side and the H three is on the other. Make the H three a little bit bigger, make a little bit smaller, adjust the line height. Like I mentioned before. I keep doing that. These two aren't quite even so I'm gonna add a line islands baseline that just winds them up on the bottom of the text. I didn't mention that when I talked about a wine Adam's first time, but It's very handy for cases like this when you have to text items and need to line up the text itself. So that's that section done. Let's work on this three column area. I decided it need that section display flex. So we have this three common area. It's gonna have a title and then it's gonna have those three combs. Let's get started on that. So we have the section with an H three n it. Here are some basic facts about spaceships I can spell cool and then we have a diff of our column container and then each bar columns also needs to be an individual def. So we have called third, and then we're gonna use this thing called place. Hold that I t. To grab some images. They just are like gray images of whatever size you happen to need. It comes as a link. I don't want it as a link. Get rid of that. There's that. And then my spaceship fact, which is going to be something like they are usually pretty big, which is a good fact about spaceships on then, another column just right in the html for these columns. That's really good when you name your classes to name them descriptively, Um, so that you can see what they're meant to do. They make long journeys in space. And then I got a copy, this whole thing, and then just change that text again. So let's toast this one. They are accrued by extremely brave men, woman and people because we don't know what judges aliens have. Okay, So cool. So that looks like that. So far, we need to add some things on here so that we can make sure that this looks like it did in our wire frame. First, the first thing we're gonna do is we're gonna mess with that. I believe we're gonna mess with that h three so we can make it look the way that it needs to. It's three. We're again gonna do the thing where we give it a width and max with and margin so that it doesn't extend the entire with the page that is contained in this area. I've used this box sizing property a couple of times as well. If you don't know what that one does, I recommend looking it up. It has to do with the CSS box model and how it works. Adding some padding. Just a space out the section a little bit more. There we go. That looks better. And then adding a margin on the top of the bottom of our header so that we can space it out even a little bit more. Okay, then our column container needs to be display flex because we want to line these three up next to each other. We're going to give each the whole thing and padding and 50 pixels. We're also gonna do this same thing up here, which is that we want the specific container to be of a lesser with are a factor. Opportunity here is to put all of those rules into one class and then apply that class definitive. That needs it. Okay, so now elements were lined up, so we're gonna work on the individual columns were going to say that each one of them should have a max width of 33% and a flex grow of one. We're gonna have a margin, and they were gonna tell them to use box sizing. And we're also going to say that every image and one of those little boxes should only have a max with the 100% because Okay. Yeah, there we go. The images were overflowing earlier, so this looks pretty good so far. Next, I'm gonna work out making the text look. OK, so every column, third paragraph is gonna have a slightly larger font size. It's gonna be centered. Cool, slightly word. Your font size is gonna be centered. We're gonna give it a little bit of a margin. And then I think we're also gonna give it a little bit of a different line. Height. There we go. That looks better. We could maybe look even better. There we go. Cool. So there's our third section. The next section that we have to work on is the one with the picture and the text right next to each other. Cool. So we're gonna work on the section class to have his 1/2 of it is the picture of the other half is the image picture and then the text, rather, and we're going to start out by writing. So we're going to say that the two house section should be display flex right up front. Yep. There Go on. Then it's gonna have to do this. One is gonna be called pick container. The other one is gonna be called content. So there is the picture of this content that pic container won. Instead of actually putting the picture within it, we're gonna set the pick picture as the background image that makes it a little bit easier to manage how it re sizes on different screen sizes. If you want to see a description of that particular problem with a picture next text and it looks weird when the screen resize is check out that article, The Web's green. Okay, so this doesn't look anything like we wanted to work now. So we want both pick container and content to have a flex grow of one. And then we also want both of those two have a flex basis of 50%. Cool. There we go. So it's you can see there's gonna be a picture on the left and an image on some text on the right. Make the font a little bigger, said the line height and then also set some padding on the content tive. There we go. That looks pretty good. A little bit more padding. Here we go. Um, we're also gonna say that these both should be a minimum height of 200 pixels. We're going to give him a just foot content or on the line items rather center and then tell him to display Flex so that that will be centered in the thing. And then we're gonna give container also a background color of grey so that we can see what that looks like when we actually do put a picture there. It looks pretty good. And then our second to last section is this blurb. So you have a different class of blurb. We're gonna actually put some actual or minutes from there. So I don't have to, like, keep trying toe pull out what parts of it I've memorized. We go, our paragraph cool. And so far that looks like See, that's going all the way across the width of the page. I don't really like that look, So we're gonna change that up. We're going to use the same set of rules as we did before stuff. We're gonna make it even a little bit narrower by default just so that it stands out a little bit more march auto petting D and then box sizing. Then our paragraph We're gonna make it a little bit bigger and you put a line height, See how it looks. Okay, that looks pretty good. But we're gonna make it even bigger. Just that it stands out more and then up the padding. Awesome. And then all that remains to do is the footer. We're gonna reuse some of these classes that we had used before. So this column, container class and then this column, third class Just because, you know, we know that we've used them before and we know that they look the way that we want them to put some, like, dummy texting here. List of noticed spaceships includes the William Fall him, the USS Enterprise and the wild card and many more. And our next column. We're just gonna have another blurb about space travel. Cool innovations of the 22nd century. Clearly, this is a website from the future. If I can type and then last but not least, we're gonna include a little image over here, and we're going to use this place. Hold that I t image thing again. One of the benefits of using this is that you can recites these images sort of on the fly just but changing the numbers in the URL. So I decided I didn't really like that. Look, they're gonna change. What size images. Okay, okay. Okay. There we go. That's what looks right. And then one thing that I like to do is I like to make the footer sort of the heaviest thing on the site. So it on. So the rhythm flows, downs, we're gonna make this have a black background, and then we're going to give it some white, uh, text. Okay, so that's the structure of our page. It looks pretty good so far. I'm pretty happy about it. What I'm going to do is I'm going to take this and then add colors, fonts and images, and then we'll reconvene and I'll show you what I came up with. Okay. As you can see, here's our finished version of the site. I've picked out some colors, have picked some images. We have a good, bold image at the top. The fonts and I'm using are all from Google funds. I chose a nice dark blue accented by a couple of warmer colors for the color palette A Z you can see it's starting to actually look like a website. We have some background patterns in here, so on and so forth, as I mentioned before, if you're interested in learning how to good colors and fonts for your site, you should check out the sights in the resource materials to help you through that process . A swell. I have the code of the updated code with all of the updated styles. This will also be in the resource material, so you can go take a look at it. Basically, I did the re factor thing that I mentioned earlier, where I took every part of the code that looked like this and then convinced it own toe one class and then kept applying. That class threw up. That's concept that's called a helper class. It really helps. It's really one of those things that really helps module arise your CSS that you can reuse parts of it without having to type it all out again, which is something to strive for. And on the whole, I'm pretty happy with my sight. I'm pretty excited about it, and I'm also excited to see what you come up with in your project. And there you have it, one Internet website put together with flex box. As always, the code for this build is in the resource materials, and now it's your turn. Think of an idea wire, frame it out and then build out the HTML and CSS for it.
16. Outro: Well, you made it to the end of the course and this Siri's we've gone over a tooling set up HTML and CSS Basics. What flex box is, how to use individual sex properties a little bit about what responsive Web design is and how to apply its concepts and even talked a little bit about layout design before you made your project. I'm so glad that you came along on this ride with me and have something to show for it. I just want to leave you with one thought. Learning CSS takes time. It's unreasonable to expect yourself to understand all of CSS all at once. It's one of those things were no matter how long you've been doing it, you still it's still a little bit of a process of trial and error. You still have to breach our things type of different properties, so on and so forth. You'll spend a lot of time in your developer tools trying to make things work. That's OK, that's normal. My advice is to, if you really want to get these skills down, is to First of all, keep playing Flex box, Brockie and second of all, going make three or four projects like the one you just made that will really cement the knowledge in your mind, and it'll you'll be able to see how you improve from project to project. Thank you so much for watching. It's been a pleasure.
J Silverstein, User Interface Developer
