1 00:00:00,150 --> 00:00:04,040 Now, before we get started with Flex Box, let's do just a bit of basic maintenance. 2 00:00:04,320 --> 00:00:09,150 First of all, I created a folder on my desktop called Flex Box, and this is where everything will 3 00:00:09,150 --> 00:00:09,540 happen. 4 00:00:09,750 --> 00:00:11,220 I would create two files. 5 00:00:11,220 --> 00:00:14,070 One would be a indexed thought e-mail 6 00:00:17,850 --> 00:00:19,680 and a style DOCSIS. 7 00:00:24,130 --> 00:00:29,020 Now for a text editor, I'm using visuals to the code, obviously, you can use whatever code editor 8 00:00:29,020 --> 00:00:34,510 or text editor you wish, for example, Brackett's or Adam or whatever you wish. 9 00:00:34,520 --> 00:00:39,820 It does not matter for discourse, but I will use visuals to the code or also known as the US code, 10 00:00:39,820 --> 00:00:44,350 because for me is the best text editor, Orrego editor out there. 11 00:00:44,650 --> 00:00:47,650 Also, I have a separate, complete course on visual still. 12 00:00:47,680 --> 00:00:50,200 Of course, if you want to get into it, try it out. 13 00:00:50,680 --> 00:00:54,900 OK, so let's get into our e-mail and let's start with the boilerplate. 14 00:00:54,940 --> 00:01:00,340 I am going to use Emet here and then we're going to call this for the title Fleck's Box. 15 00:01:04,180 --> 00:01:06,220 Now, down here, I'm also going to use Emet. 16 00:01:06,220 --> 00:01:12,760 I'm going to create a each one which will have a title of Fleck's box. 17 00:01:16,320 --> 00:01:19,620 And then after this, we're going to create a section tag. 18 00:01:22,490 --> 00:01:30,200 With an idea of I.D., I will replace that later on because it will have to do this and this will include 19 00:01:30,200 --> 00:01:30,560 then. 20 00:01:32,600 --> 00:01:33,650 H-2. 21 00:01:36,350 --> 00:01:39,500 Which will have a text within it of properties 22 00:01:42,710 --> 00:01:50,300 of the parent, actually properties of the dot, dot, dot, because they're going to replace this flux 23 00:01:50,300 --> 00:01:51,220 container. 24 00:01:51,950 --> 00:01:55,520 And after this age, too, I'm going to have a div. 25 00:01:55,830 --> 00:01:56,900 So just a general div. 26 00:01:56,900 --> 00:02:03,650 But this will have a class of Fleck's bonks, the hash container. 27 00:02:06,520 --> 00:02:07,780 OK, and this. 28 00:02:08,830 --> 00:02:15,310 Main container will contain our items, so let's say that this will contain. 29 00:02:18,330 --> 00:02:29,680 Another class of flex box on this core item, and I need this six times, so I'm going to do. 30 00:02:30,680 --> 00:02:37,460 A pope, a open parenthesis here and actually the close and here I'm going to open our parenthesis and 31 00:02:37,460 --> 00:02:40,130 going to multiply this time six. 32 00:02:41,080 --> 00:02:43,760 I think I will see what will result from this. 33 00:02:45,080 --> 00:02:51,800 Now, I also need here and know I'm going to do this later on, and I think that's basically it. 34 00:02:52,130 --> 00:02:55,310 So let me multiply after I age to. 35 00:02:56,440 --> 00:03:04,260 No, including the S. So here needed to open parentheses and after this I need to close by the single 36 00:03:04,270 --> 00:03:09,240 to multiply this as to solicit enter and well, there's our entire container. 37 00:03:09,640 --> 00:03:19,000 Now, as I said, I'm going to press this ID, the first song with parent and the second one will be 38 00:03:19,000 --> 00:03:19,620 children, 39 00:03:22,720 --> 00:03:23,090 OK? 40 00:03:23,290 --> 00:03:30,640 And right here in the tooth for the titles, I'm going to have parents actually and the copy this to 41 00:03:30,640 --> 00:03:31,390 be a parent. 42 00:03:32,710 --> 00:03:34,480 And this would be children. 43 00:03:34,750 --> 00:03:36,880 No Gebek. 44 00:03:38,370 --> 00:03:49,380 And back again, control and control, C, control V, there we go now, right in here, I want to create 45 00:03:49,380 --> 00:03:54,930 I turn right and I'm going to go pull down. 46 00:03:56,240 --> 00:03:58,000 Ult and go on. 47 00:03:58,100 --> 00:04:05,180 Here, here, here, here, here, here, here, here, here, here and here. 48 00:04:05,480 --> 00:04:06,100 Let's type in. 49 00:04:06,110 --> 00:04:07,190 I come. 50 00:04:08,750 --> 00:04:20,750 And Dash, and now we're going to type in one, two, three, four, but it's not like five and six, 51 00:04:20,750 --> 00:04:23,540 of course, and here is the same. 52 00:04:23,570 --> 00:04:26,090 So one, two, three. 53 00:04:27,570 --> 00:04:36,640 Four and five and six, five and six, dammit, I'm asleep, let's said tape and uphill. 54 00:04:36,660 --> 00:04:38,240 We also need to include our style. 55 00:04:38,250 --> 00:04:43,220 So before our title we're going to create a link tag. 56 00:04:43,230 --> 00:04:45,060 And within here we're going to include our styles. 57 00:04:45,060 --> 00:04:46,710 DOCSIS Keys. 58 00:04:46,740 --> 00:04:48,240 Everything is linked up now. 59 00:04:48,260 --> 00:04:48,840 Next up. 60 00:04:50,420 --> 00:04:56,500 Papa, papa, papa, let me do a bit of general styling, so first I'm going to do a star. 61 00:04:56,510 --> 00:04:58,560 So this is basically a reset. 62 00:04:58,610 --> 00:05:01,390 I'm going to reset all my margins to zero. 63 00:05:01,400 --> 00:05:04,380 Actually, I need to open this up so you can also see what has happened. 64 00:05:04,400 --> 00:05:06,320 So let's open this up with lights over. 65 00:05:06,830 --> 00:05:09,320 And so was just an extension of Visual Studio Code. 66 00:05:09,800 --> 00:05:11,810 So we're going to have it here. 67 00:05:12,390 --> 00:05:15,680 I'm just going to drop it on the right side of Visual Studio. 68 00:05:15,930 --> 00:05:19,270 So let's make you, first of all, smaller. 69 00:05:19,830 --> 00:05:21,770 I'm going to drag you here. 70 00:05:22,760 --> 00:05:26,720 So let's resize you and let me also resize you. 71 00:05:27,190 --> 00:05:28,960 Oh, let me make this large. 72 00:05:29,810 --> 00:05:30,130 Yeah. 73 00:05:30,150 --> 00:05:31,760 So I can talk you in here. 74 00:05:33,090 --> 00:05:37,440 All right, and I think we need to zoom this in a bit. 75 00:05:37,770 --> 00:05:39,810 Well, let me finish up the styling. 76 00:05:39,810 --> 00:05:40,960 So margin zero. 77 00:05:40,980 --> 00:05:48,180 What will this do if I hit save this, reset all of my margins to zero and I also need padding zero 78 00:05:49,380 --> 00:05:52,770 so we won't have any unnecessary padding. 79 00:05:53,160 --> 00:05:55,040 So this is saved and this is safe. 80 00:05:55,060 --> 00:05:59,550 The next thing I'm going to use a box sizing on board the box 81 00:06:02,670 --> 00:06:07,800 and also for any type of lifestyle, I'm going to choose none. 82 00:06:08,570 --> 00:06:13,260 And also list and also text decoration and those who choose none. 83 00:06:13,740 --> 00:06:15,700 So I don't want any tax decoration and a list. 84 00:06:15,700 --> 00:06:26,070 Titles now for the body tag is targeted by the tank and it's to a fun family of lotion sans serif. 85 00:06:29,660 --> 00:06:32,530 I see that we have everything set up here. 86 00:06:33,470 --> 00:06:36,350 Let's do just a quick check of. 87 00:06:38,120 --> 00:06:39,350 Background, color. 88 00:06:41,740 --> 00:06:46,650 Read as if this is working class or something is not working here. 89 00:06:48,140 --> 00:06:50,360 This is my mistake, OK? 90 00:06:51,280 --> 00:06:51,640 Yep. 91 00:06:53,410 --> 00:06:54,280 Let's go back. 92 00:06:54,820 --> 00:06:59,800 Next up, I'm going to change the font size to 16 pixels 93 00:07:02,860 --> 00:07:05,290 and the max width of my page. 94 00:07:07,720 --> 00:07:09,970 Should be nine hundred fifty pixels. 95 00:07:10,120 --> 00:07:17,590 So I want this to have only nine of the pixels and also I'm going to choose the margins to be oral and 96 00:07:17,590 --> 00:07:21,250 this will push my content wide in the center of the page. 97 00:07:21,910 --> 00:07:24,790 So we could zoom this in a bit. 98 00:07:25,630 --> 00:07:26,910 Also, let me sit on this in. 99 00:07:27,150 --> 00:07:32,020 So we're going to hit control and plus a few times on the fifty. 100 00:07:33,210 --> 00:07:40,260 Now, within my body, I'm going to select my H1 and I'm just going to tell you right from the start, 101 00:07:40,260 --> 00:07:47,190 I'm going to be very specific form where what is or even if I will select a class that is specifically 102 00:07:47,190 --> 00:07:54,390 only one time in the entire page, I'm still going to specify that hate that the class is actually within 103 00:07:54,390 --> 00:07:56,640 a detec or somewhere else. 104 00:07:57,100 --> 00:07:57,270 Okay. 105 00:07:57,330 --> 00:08:02,880 I want to be very specific for for each of everyone to have a perfect understanding of what I'm doing. 106 00:08:03,340 --> 00:08:05,110 Okay, so let's do it. 107 00:08:05,110 --> 00:08:06,750 Takes a line to the sentence. 108 00:08:06,750 --> 00:08:10,050 Let's push to text each one in the center of the page. 109 00:08:11,670 --> 00:08:18,240 OK, we have that one done and let's change the font size to 80 pixels. 110 00:08:21,970 --> 00:08:23,560 The font weight. 111 00:08:25,750 --> 00:08:26,890 To Boulder. 112 00:08:29,190 --> 00:08:36,000 And I'm going to give this a bit of a margin, so from the top and bottom to rim and from the left and 113 00:08:36,000 --> 00:08:36,970 right, zero. 114 00:08:37,800 --> 00:08:43,170 So if you only specifying two values, the first two will be top and bottom. 115 00:08:43,170 --> 00:08:49,170 And the second I saw the first value will be for top and bottom and the second will be for left and 116 00:08:49,170 --> 00:08:49,460 right. 117 00:08:49,470 --> 00:08:55,990 If I would do four values, then it would be top left, top, right and bottom. 118 00:08:56,010 --> 00:08:57,510 So it's like like a clock. 119 00:08:58,960 --> 00:09:05,080 OK, next up, I'm going to give it a background color, so let's say A, B, C. 120 00:09:06,590 --> 00:09:08,490 And go back on color. 121 00:09:08,780 --> 00:09:15,890 I'm going to go with the hexadecimal number of hash free, free, free cake, unless we are going to 122 00:09:15,890 --> 00:09:18,260 change the color of the text to orange 123 00:09:22,670 --> 00:09:23,520 now within our body. 124 00:09:23,540 --> 00:09:26,020 I'm going to select all of my H twos. 125 00:09:26,910 --> 00:09:34,290 And I was called up a bit and I'm going to change the margins to one room, so give them a bit of a 126 00:09:34,290 --> 00:09:37,790 margin, top to bottom, left and right, the one room. 127 00:09:38,370 --> 00:09:42,640 And also I'm going to align the tax supported tax to the center of the page. 128 00:09:43,410 --> 00:09:50,690 OK, so because these are also titles now, a couple of things I want to do for our parent idea of parent. 129 00:09:51,030 --> 00:09:54,190 So this one and the idea of children. 130 00:09:54,630 --> 00:09:59,640 So first of all, let's start with the parent and we need the hash for the I.D. Selecter. 131 00:10:01,260 --> 00:10:07,620 And now within the within the idea of parent, I'm going to select the flex box container 132 00:10:10,770 --> 00:10:17,190 and also the flex and for it from this, the flex box item 133 00:10:20,790 --> 00:10:21,870 Gilliss say the next me. 134 00:10:21,870 --> 00:10:23,330 Let me check if this is correct. 135 00:10:23,340 --> 00:10:23,950 So textbook. 136 00:10:23,970 --> 00:10:25,620 Eitam Yep. 137 00:10:25,860 --> 00:10:26,440 There we go. 138 00:10:27,120 --> 00:10:29,150 So what do I want to do with this? 139 00:10:29,160 --> 00:10:36,840 I want to increase the font size to 24 pixels, you know, to give them margin one. 140 00:10:36,850 --> 00:10:39,410 Ram, let me close this one up here. 141 00:10:40,200 --> 00:10:42,780 So font size four to pixels 142 00:10:46,140 --> 00:10:55,140 and margin one ran all of them all around, also padding one ram all around. 143 00:10:56,070 --> 00:10:58,590 And of course, let's change the background color. 144 00:10:59,920 --> 00:11:06,220 So I have a bit of a difference here to background color to orange. 145 00:11:13,520 --> 00:11:20,770 OK, let's also give them a tax shadow of one pixel, one pixel 146 00:11:25,300 --> 00:11:30,700 and a hexadecimal number of hash RIFIFI And there we go. 147 00:11:31,780 --> 00:11:34,450 So we have this one, Don, and this one, Don. 148 00:11:35,400 --> 00:11:43,850 OK, now, next up, I'm going to also stand our contain itself a bit soulless compris spend IDM Flexibles 149 00:11:43,860 --> 00:11:44,580 container. 150 00:11:45,210 --> 00:11:49,950 And within here, I'm going to give you the background color of hexadecimal. 151 00:11:49,950 --> 00:11:50,730 Free, free, free. 152 00:11:52,400 --> 00:11:53,690 A book, Shadow. 153 00:11:55,220 --> 00:12:03,470 Well, zero pixels, zero PSM pixels and two pixels for the spread. 154 00:12:03,590 --> 00:12:08,880 Is it safe actually practice or to lift a bit? 155 00:12:09,740 --> 00:12:10,010 Yes. 156 00:12:10,030 --> 00:12:11,090 So there's a container. 157 00:12:13,680 --> 00:12:15,960 And also, we have this bombshell all around it. 158 00:12:18,580 --> 00:12:27,000 OK, so the last thing I want to do is give it a height of three hundred pixels for the campaign itself. 159 00:12:28,190 --> 00:12:35,750 Unless it's safe, so it is limited now to three other pixels and within here, I'm going to then type 160 00:12:35,750 --> 00:12:38,780 in a comment display, it will change the display. 161 00:12:41,760 --> 00:12:44,790 And I also want to tell our other container down here. 162 00:12:46,740 --> 00:12:49,470 So I'm going to copy our parent. 163 00:12:50,530 --> 00:12:55,960 Change the idea to children, and I said save. 164 00:12:57,580 --> 00:13:05,060 And also copy the items within the parent element, you know, to do the same thing for the children. 165 00:13:05,500 --> 00:13:08,860 This was copy the idea and replace it in here. 166 00:13:10,660 --> 00:13:17,710 This looks awful, but don't worry, as soon as we're going to go into our next video, we'll change 167 00:13:17,710 --> 00:13:18,200 everything. 168 00:13:18,790 --> 00:13:23,240 So let me just copy this comment of this playing between here and. 169 00:13:23,240 --> 00:13:23,710 There we go. 170 00:13:23,960 --> 00:13:24,380 That's it. 171 00:13:24,400 --> 00:13:28,150 OK, so that's it for basic styling and yet seeing the next one.