1 00:00:01,060 --> 00:00:09,580 Hello, let's build a fun image portfolio site, one of the biggest problems that people have and the 2 00:00:09,580 --> 00:00:16,660 hardest problem with access, it's always making sure that we have our items displayed in the location 3 00:00:16,660 --> 00:00:17,200 that we want. 4 00:00:17,440 --> 00:00:19,330 That is a really, really difficult problem. 5 00:00:19,600 --> 00:00:21,770 And there are many, many solutions to this problem. 6 00:00:21,770 --> 00:00:26,890 But one of the new ways and now is probably the most popular way is called Flex Box. 7 00:00:28,890 --> 00:00:34,760 And we're going to be using that to create a beautiful image Web site. 8 00:00:35,010 --> 00:00:35,700 Let's get started. 9 00:00:36,480 --> 00:00:43,530 So I have an index e-mail file here and a style that's useful in the same directory on my desktop. 10 00:00:44,630 --> 00:00:47,640 So let's get started with our typical e-mail file. 11 00:00:47,780 --> 00:00:58,970 We're going to title access and in the body, we're going to have a header of life in the wild. 12 00:01:00,280 --> 00:01:10,790 And refresh perfect and in here, we're going to have a div with a class of container. 13 00:01:11,470 --> 00:01:12,430 We'll close that off. 14 00:01:12,670 --> 00:01:15,820 And in here, let's add some images. 15 00:01:15,970 --> 00:01:22,240 Now, if you remember with images, I can type in this and then tab with sublime text and we don't have 16 00:01:22,240 --> 00:01:23,100 any pictures yet. 17 00:01:23,110 --> 00:01:28,210 So for now, let's just copy and paste and add six images. 18 00:01:30,930 --> 00:01:32,310 Save and refresh. 19 00:01:32,340 --> 00:01:40,260 OK, let's start adding some of these images and actually have a file full of these images for you, 20 00:01:40,680 --> 00:01:44,550 and I'll attach it to the next lesson so you can also build it yourself. 21 00:01:44,760 --> 00:01:47,070 So I'm just going to copy these quickly. 22 00:01:59,430 --> 00:02:02,970 Q That was a lot of copy and pasting, let's save that and refresh. 23 00:02:04,080 --> 00:02:04,600 All right. 24 00:02:04,680 --> 00:02:10,340 We have our images and they're massive, so let's make this a little bit smaller. 25 00:02:11,160 --> 00:02:19,260 We can now go to our stylesheet and we can select the images and let's just do with four hundred fifty 26 00:02:19,260 --> 00:02:21,630 pixels and height. 27 00:02:22,570 --> 00:02:29,530 Three hundred pixels, and you might be asking yourself, how come we don't do it here on the individual 28 00:02:29,530 --> 00:02:29,940 images? 29 00:02:29,970 --> 00:02:35,650 And remember, we can add attributes, but that means if we needed to ever change anything, we have 30 00:02:35,650 --> 00:02:40,990 to individually go into each image and change it versus just changing in one location. 31 00:02:41,020 --> 00:02:44,590 So for now, we're going to stick to the success size. 32 00:02:44,590 --> 00:02:46,660 Let's save that and refresh. 33 00:02:46,670 --> 00:02:48,960 And obviously we need to link the file. 34 00:02:48,970 --> 00:02:56,170 So let's add a link here and it will reference our style that say that and refresh. 35 00:02:56,830 --> 00:02:57,500 There you go. 36 00:02:57,520 --> 00:03:00,970 We have our images like that, some beautiful animals here. 37 00:03:01,840 --> 00:03:05,290 Now, Fleck's box has a great resource. 38 00:03:08,120 --> 00:03:09,950 Obviously from Strix. 39 00:03:10,880 --> 00:03:14,610 And this is pretty much all you need. 40 00:03:14,630 --> 00:03:19,970 It shows you all the things that Flex boss can do, and as you can see, it allows you to play around 41 00:03:19,970 --> 00:03:23,620 with content and shift it around in a very nice way. 42 00:03:25,410 --> 00:03:30,630 I'm going to attach this link for you at the end of this video and you can take a look for yourself. 43 00:03:30,660 --> 00:03:34,290 For now, let's learn a few flex box properties. 44 00:03:36,590 --> 00:03:44,630 We want to define that everything inside of this d'Hiv is part of Fleck's let's select it's called container, 45 00:03:44,630 --> 00:03:47,170 so let's do container. 46 00:03:47,630 --> 00:03:53,360 And within this container we will say that display will be Fleck's. 47 00:03:53,580 --> 00:03:56,990 So that's how we activate Fleck's box refresh. 48 00:03:57,380 --> 00:04:02,720 OK, we have a few changes, which is nice, but I don't want to scroll through this. 49 00:04:02,900 --> 00:04:05,200 Ideally, I can see everything without scrolling. 50 00:04:05,570 --> 00:04:09,620 So one thing we want to do and again, we can look down over here at. 51 00:04:10,660 --> 00:04:15,070 The suggestion we see that flex wrap might be something that we want to add. 52 00:04:16,080 --> 00:04:21,810 So let's do flex wrap, do wrap and refresh. 53 00:04:22,260 --> 00:04:23,190 OK, that's perfect. 54 00:04:23,300 --> 00:04:27,630 If I make this bigger, you see that everything is wrapping around. 55 00:04:28,630 --> 00:04:34,450 OK, but I think the continent should be centered, it kind of looks we are having everything to the 56 00:04:34,450 --> 00:04:35,110 left over here. 57 00:04:35,350 --> 00:04:40,390 So again, we can do something called justify content, then we can do center. 58 00:04:42,370 --> 00:04:50,440 And refresh perfect, and we if we look on the guide over here, justify content, should be right over 59 00:04:50,440 --> 00:04:50,710 here. 60 00:04:50,910 --> 00:04:52,690 You can see all the properties that it has. 61 00:04:54,040 --> 00:05:00,580 That looks pretty good, and we did that pretty fast, made a nice little portfolio website already. 62 00:05:00,760 --> 00:05:08,540 What else can we add now that we have this flexible container around our website? 63 00:05:08,980 --> 00:05:12,810 Let's make the header a little bit prettier than it is now. 64 00:05:12,820 --> 00:05:13,960 So that's the one. 65 00:05:15,030 --> 00:05:24,660 We can add in each one here and we'll say that the font family is I like this one fantasy save and refresh. 66 00:05:25,650 --> 00:05:27,950 I like that one font size. 67 00:05:27,960 --> 00:05:30,670 Let's make it a little bit bigger. 68 00:05:30,720 --> 00:05:32,420 We'll do three ETM. 69 00:05:34,520 --> 00:05:36,270 So if you don't remember what Ms. 70 00:05:36,290 --> 00:05:38,270 Make sure you check out that video. 71 00:05:38,510 --> 00:05:40,610 OK, so that looks better. 72 00:05:40,610 --> 00:05:46,100 Maybe it will be nice to have a bit of a border as well so we can do border bottom because we only want 73 00:05:46,100 --> 00:05:51,980 to border on the bottom and we'll do two pixels solid pink. 74 00:05:54,950 --> 00:05:56,370 OK, perfect. 75 00:05:56,810 --> 00:06:01,460 That looks good, but ideally, I want a border just around this, I don't want the entire section so 76 00:06:01,460 --> 00:06:07,460 we can actually just say that for each one, we want the width to be four hundred pixels. 77 00:06:07,820 --> 00:06:09,080 I save and refresh. 78 00:06:10,400 --> 00:06:11,510 All right, perfect. 79 00:06:11,870 --> 00:06:20,540 That looks good and ideally, this is centered so that the line underneath it is well on the left side 80 00:06:20,540 --> 00:06:22,690 and right side is equally distributed. 81 00:06:23,660 --> 00:06:27,050 So we can use something like text a line. 82 00:06:32,650 --> 00:06:38,120 And you'll notice here that it's aligned in the center, but not the Web page center. 83 00:06:38,290 --> 00:06:43,810 It's a line in the center of the width of four hundred pixels, but that looks good. 84 00:06:44,130 --> 00:06:47,070 It would be actually nice to have a border on here as well. 85 00:06:47,080 --> 00:06:55,630 So let's add the border right to pixel, solid pink, save and refresh. 86 00:06:56,470 --> 00:06:57,040 All right. 87 00:06:57,400 --> 00:06:58,920 That looks very nice. 88 00:07:00,050 --> 00:07:05,040 And then the final thing I want to add is I want to have some spacing between these images, so I'm 89 00:07:05,040 --> 00:07:09,960 going to add a margin of 10 pixels here and refresh. 90 00:07:10,980 --> 00:07:14,010 All right, let's take a look at our website right now. 91 00:07:18,830 --> 00:07:26,810 That looks very, very nice, as you can see, flecks box is a very easy thing to implement and it makes 92 00:07:26,810 --> 00:07:31,940 your websites look really, really nice and you can position your content very easily, especially if 93 00:07:31,940 --> 00:07:34,380 you have these container like structures. 94 00:07:35,240 --> 00:07:38,450 I want to show you one last resource for Fleck's box. 95 00:07:38,500 --> 00:07:41,420 Again, this is a tool that you'll see more and more of. 96 00:07:41,420 --> 00:07:46,990 And ideally, you'll build websites using Fleck's box instead of some of the older ways. 97 00:07:47,720 --> 00:07:51,700 One way to get really, really good Aflex box is to play this game. 98 00:07:51,710 --> 00:07:54,960 And it's called Flex Box from the I believe. 99 00:07:55,490 --> 00:07:55,940 Let's see. 100 00:07:57,290 --> 00:08:02,240 And here you're trying to get the frog onto the leaf. 101 00:08:02,600 --> 00:08:10,520 It's a little home so you can do something like justify content, flex and. 102 00:08:11,870 --> 00:08:18,320 And look at that, you get the frog onto the leaf and you move on to the next round, I'll leave this 103 00:08:18,530 --> 00:08:19,040 for you. 104 00:08:19,250 --> 00:08:21,660 It's a really, really good way to learn flex box. 105 00:08:21,680 --> 00:08:25,930 I think this is probably the best way to do layout and success. 106 00:08:26,510 --> 00:08:27,470 I'll see you in the next one. 107 00:08:27,950 --> 00:08:28,300 Bye bye.