1 00:00:01,266 --> 00:00:02,252 Hi, there. 2 00:00:02,252 --> 00:00:06,419 This is Part Two of Building the how-it-works section 3 00:00:07,699 --> 00:00:11,151 and this is what we're gonna format in this lecture. 4 00:00:11,151 --> 00:00:14,484 So let's start with these two step boxes 5 00:00:15,443 --> 00:00:19,639 and of course make this image here smaller. 6 00:00:19,639 --> 00:00:22,639 Okay, so right back to the CSS file. 7 00:00:24,553 --> 00:00:26,803 Let me grab a copy of this. 8 00:00:29,138 --> 00:00:30,555 And how it works. 9 00:00:34,512 --> 00:00:37,262 So, I'll start with the steps box 10 00:00:40,362 --> 00:00:42,112 cause as you remember 11 00:00:43,783 --> 00:00:44,616 those are 12 00:00:46,325 --> 00:00:47,158 the two boxes 13 00:00:47,158 --> 00:00:49,741 the left one and the right one. 14 00:00:50,823 --> 00:00:52,298 Okay? 15 00:00:52,298 --> 00:00:55,631 So let's first put a margin between them 16 00:00:57,528 --> 00:00:58,861 and the h2 title 17 00:01:00,128 --> 00:01:03,795 somewhere at the top of let's say 30 pixels. 18 00:01:05,854 --> 00:01:10,143 And now we need to select each of the boxes individually 19 00:01:10,143 --> 00:01:12,875 and in order to do that I will show you a new 20 00:01:12,875 --> 00:01:15,845 very, very useful selector 21 00:01:15,845 --> 00:01:17,872 and it's this one. 22 00:01:17,872 --> 00:01:20,122 It's actually a zero class 23 00:01:21,251 --> 00:01:22,888 and it's this one. 24 00:01:22,888 --> 00:01:23,888 First-child. 25 00:01:26,490 --> 00:01:29,157 So this will select the first of 26 00:01:30,652 --> 00:01:32,044 these step boxes. 27 00:01:32,044 --> 00:01:35,044 Which is, in our case, the left one. 28 00:01:35,899 --> 00:01:38,399 And there's also a similar one 29 00:01:39,522 --> 00:01:41,522 which is the last-child. 30 00:01:43,532 --> 00:01:46,949 So these are two very useful zero classes 31 00:01:48,512 --> 00:01:51,330 and actually in the course e-book you can find 32 00:01:51,330 --> 00:01:54,111 a link to an article which has, I think, 33 00:01:54,111 --> 00:01:57,611 30 very useful selectors such as this one. 34 00:01:59,020 --> 00:02:02,833 Alright, so in the first box we want the text 35 00:02:02,833 --> 00:02:05,333 align to be to the right side. 36 00:02:06,686 --> 00:02:09,081 Now you may ask, "We don't have any text there." 37 00:02:09,081 --> 00:02:11,028 And that's actually right. 38 00:02:11,028 --> 00:02:14,196 But the text align property doesn't work only for text 39 00:02:14,196 --> 00:02:17,927 it actually does work for all in line, or 40 00:02:17,927 --> 00:02:21,301 in line block elements and the image is one of 41 00:02:21,301 --> 00:02:23,019 those inline block elements. 42 00:02:23,019 --> 00:02:25,378 And so, it will then be aligned to the 43 00:02:25,378 --> 00:02:27,295 right side of this box. 44 00:02:28,390 --> 00:02:32,847 And I also want to add a heading to the right side 45 00:02:32,847 --> 00:02:34,264 of three percent. 46 00:02:35,459 --> 00:02:38,078 And now you maybe feel a little confused 47 00:02:38,078 --> 00:02:41,635 why I'm adding this heading with a percentage 48 00:02:41,635 --> 00:02:44,969 instead of adding pixels, and there's a simple reason 49 00:02:44,969 --> 00:02:47,739 for that and it has to do with responsive web design 50 00:02:47,739 --> 00:02:51,019 where we want our layout to be fluid, 51 00:02:51,019 --> 00:02:52,080 and as I explained to you before, 52 00:02:52,080 --> 00:02:56,100 fluid means that we have all our layout properties 53 00:02:56,100 --> 00:03:00,100 defined in percentages instead of ridged pixels. 54 00:03:02,053 --> 00:03:04,477 So let's do the same thing with the other box 55 00:03:04,477 --> 00:03:07,208 and here we will say that we want a padding 56 00:03:07,208 --> 00:03:11,275 to the left side of three percent as well. 57 00:03:11,275 --> 00:03:12,775 And now let's take 58 00:03:14,474 --> 00:03:16,219 what else we have, so the image, 59 00:03:16,219 --> 00:03:17,636 I want the image. 60 00:03:19,033 --> 00:03:22,099 And it's called app-screen, so we already have a 61 00:03:22,099 --> 00:03:23,999 class name here. 62 00:03:23,999 --> 00:03:26,718 So let's say app-screen 63 00:03:26,718 --> 00:03:28,301 and let's say width 64 00:03:31,250 --> 00:03:33,330 let's say 40 percent. 65 00:03:33,330 --> 00:03:35,209 And again on defining the width 66 00:03:35,209 --> 00:03:37,626 with a percentage of the box. 67 00:03:38,584 --> 00:03:42,076 So let's see what it looks like now. 68 00:03:42,076 --> 00:03:44,681 Alright, this looks quite good, right? 69 00:03:44,681 --> 00:03:48,914 So we have a nice distance between the image and the text 70 00:03:48,914 --> 00:03:52,164 and I think the image size is okay now. 71 00:03:53,252 --> 00:03:56,151 So the next thing is we want to format 72 00:03:56,151 --> 00:03:57,591 those numbers here. 73 00:03:57,591 --> 00:04:00,638 As you remember, we want this to be a circle 74 00:04:00,638 --> 00:04:03,190 with a number inside of the circle, 75 00:04:03,190 --> 00:04:05,763 and we also want some distance, some space, 76 00:04:05,763 --> 00:04:09,930 of course, between each of these work steps elements. 77 00:04:13,025 --> 00:04:15,221 So let's start doing this. 78 00:04:15,221 --> 00:04:16,138 Works-step. 79 00:04:18,993 --> 00:04:22,993 And margin to the bottom, I would say 50 pixels. 80 00:04:28,293 --> 00:04:31,210 And again, let's take our HTML file 81 00:04:33,774 --> 00:04:36,298 so we want to select the div element 82 00:04:36,298 --> 00:04:38,681 inside of a work-steps, 83 00:04:38,681 --> 00:04:41,348 because that will be our number. 84 00:04:43,288 --> 00:04:44,664 So, 85 00:04:44,664 --> 00:04:45,914 works-step div. 86 00:04:49,123 --> 00:04:51,680 And what are we gonna do? 87 00:04:51,680 --> 00:04:54,680 First let's set its color to orange. 88 00:04:56,910 --> 00:05:00,414 And we already know where that is. 89 00:05:00,414 --> 00:05:01,445 It's 90 00:05:01,445 --> 00:05:02,278 up here. 91 00:05:05,299 --> 00:05:07,466 Then we also want a border 92 00:05:09,534 --> 00:05:12,814 and I will use two pixels here 93 00:05:12,814 --> 00:05:15,050 such as in other elements on the website, 94 00:05:15,050 --> 00:05:17,933 so it'll keep some consistency here. 95 00:05:17,933 --> 00:05:21,016 And here with the same color as well. 96 00:05:25,570 --> 00:05:29,167 And I want to display it as an in-line box, so 97 00:05:29,167 --> 00:05:32,446 this very much used property display, 98 00:05:32,446 --> 00:05:35,551 and I want the inline-blocks because that way 99 00:05:35,551 --> 00:05:39,718 we can ensure that the element doesn't force a line break 100 00:05:40,591 --> 00:05:44,758 and so the number can be side by side with the text. 101 00:05:47,166 --> 00:05:49,583 So let's just check that out. 102 00:05:50,498 --> 00:05:51,331 Okay, great. 103 00:05:51,331 --> 00:05:54,609 So we have some distance here now and 104 00:05:54,609 --> 00:05:55,609 so now let's 105 00:05:56,471 --> 00:05:59,073 continue formatting this. 106 00:05:59,073 --> 00:06:02,941 It's now a square and we want it to be a circle. 107 00:06:02,941 --> 00:06:05,793 And you probably remember how to do it. 108 00:06:05,793 --> 00:06:08,460 That's border-radius 50 percent. 109 00:06:12,222 --> 00:06:15,156 And we can now define the height 110 00:06:15,156 --> 00:06:18,236 of that element, let's say 50 pixel. 111 00:06:18,236 --> 00:06:19,499 And the width. 112 00:06:19,499 --> 00:06:22,180 Of course, if we want it to be a circle 113 00:06:22,180 --> 00:06:25,013 it has to be as high as it's wide. 114 00:06:26,015 --> 00:06:27,883 And inside of this box, 115 00:06:27,883 --> 00:06:31,135 the number should be centered. 116 00:06:31,135 --> 00:06:32,968 So, text-align center. 117 00:06:34,022 --> 00:06:36,022 So let's check this out. 118 00:06:37,447 --> 00:06:40,734 Alright, it's already circular. 119 00:06:40,734 --> 00:06:43,339 We will now increase the font size of this 120 00:06:43,339 --> 00:06:45,422 and give it some padding. 121 00:06:46,580 --> 00:06:48,463 So, you see this is now really 122 00:06:48,463 --> 00:06:50,495 designing in the browser. 123 00:06:50,495 --> 00:06:53,504 One thing that is also left to do is 124 00:06:53,504 --> 00:06:54,921 to make this text 125 00:06:56,952 --> 00:06:58,915 appear here on the side, 126 00:06:58,915 --> 00:07:01,101 and in order to do that we need to define 127 00:07:01,101 --> 00:07:03,934 a float property for that element. 128 00:07:06,075 --> 00:07:08,887 So some padding, as I said, 129 00:07:08,887 --> 00:07:11,968 I would say like five pixels 130 00:07:11,968 --> 00:07:15,385 and then let's make it float to the left. 131 00:07:16,601 --> 00:07:20,141 So you see we have a whole lot of properties here 132 00:07:20,141 --> 00:07:22,141 for this little element. 133 00:07:24,813 --> 00:07:26,491 The other thing is the font-size. 134 00:07:26,491 --> 00:07:28,324 Let's say 150 percent. 135 00:07:32,330 --> 00:07:33,966 Alright. 136 00:07:33,966 --> 00:07:37,733 Okay this looks already quite good, right? 137 00:07:37,733 --> 00:07:40,140 Now what I would do now is to 138 00:07:40,140 --> 00:07:42,708 define some margin to the right here 139 00:07:42,708 --> 00:07:46,603 and maybe increase the size of those circles. 140 00:07:46,603 --> 00:07:48,603 So, a margin to the left 141 00:07:49,994 --> 00:07:51,077 of 25 pixels. 142 00:07:52,873 --> 00:07:55,735 It then increases here to let's say 143 00:07:55,735 --> 00:07:56,568 54. 144 00:07:58,320 --> 00:07:59,570 Or 55 actually. 145 00:08:00,479 --> 00:08:03,729 It really doesn't matter for one pixel. 146 00:08:04,747 --> 00:08:07,879 Okay, this is obviously margin to the right 147 00:08:07,879 --> 00:08:09,212 not to the left. 148 00:08:10,427 --> 00:08:11,260 Okay. 149 00:08:12,184 --> 00:08:13,851 So, this looks cool. 150 00:08:15,234 --> 00:08:17,793 Now we probably should add some more space 151 00:08:17,793 --> 00:08:21,687 between this and here at the h2 element 152 00:08:21,687 --> 00:08:24,292 because it doesn't look quite aligned right now. 153 00:08:24,292 --> 00:08:26,327 We want the phone to be more aligned 154 00:08:26,327 --> 00:08:28,227 with this text here. 155 00:08:28,227 --> 00:08:32,045 And so let's increase the margin for 156 00:08:32,045 --> 00:08:34,295 this box on the right side. 157 00:08:36,265 --> 00:08:40,987 So we already defined that there is a margin-top 30 158 00:08:40,987 --> 00:08:43,711 but we actually want this 159 00:08:43,711 --> 00:08:46,628 second box to have a larger margin. 160 00:08:48,135 --> 00:08:50,552 So let's say maybe 70 pixels. 161 00:08:52,276 --> 00:08:55,888 And so we can cut this and put it here. 162 00:08:55,888 --> 00:08:57,444 So the first one will have 30 and 163 00:08:57,444 --> 00:09:00,129 the second will have 70 pixels. 164 00:09:00,129 --> 00:09:03,212 And so I don't need this one anymore. 165 00:09:05,020 --> 00:09:06,103 And, alright. 166 00:09:07,455 --> 00:09:08,288 Great. 167 00:09:09,454 --> 00:09:13,144 And now one thing left to do is to format 168 00:09:13,144 --> 00:09:14,727 these buttons here. 169 00:09:16,064 --> 00:09:18,257 You want them of course to be the same size 170 00:09:18,257 --> 00:09:20,979 and this one is way too big. 171 00:09:20,979 --> 00:09:23,062 So let's do that as well. 172 00:09:24,876 --> 00:09:26,209 We can just say, 173 00:09:28,023 --> 00:09:29,835 well I better check the HTML because 174 00:09:29,835 --> 00:09:31,918 I don't remember exactly. 175 00:09:32,873 --> 00:09:35,630 Okay, so we have the button-app 176 00:09:35,630 --> 00:09:38,240 and now we want to style the image inside 177 00:09:38,240 --> 00:09:40,240 of the button-app class. 178 00:09:42,195 --> 00:09:43,695 So buttom-app img. 179 00:09:46,990 --> 00:09:50,125 And we want to set height for them. 180 00:09:50,125 --> 00:09:52,733 Let's say 50 pixels so that they 181 00:09:52,733 --> 00:09:53,900 look the same. 182 00:09:55,991 --> 00:10:00,985 So the width is then defined automatically, of course. 183 00:10:00,985 --> 00:10:04,565 And let's set a margin between them. 184 00:10:04,565 --> 00:10:07,945 So set a margin to the right side 185 00:10:07,945 --> 00:10:09,112 of ten pixels. 186 00:10:13,033 --> 00:10:14,950 And let's check it out. 187 00:10:16,490 --> 00:10:19,407 Great, now they look quite similar. 188 00:10:21,359 --> 00:10:24,526 Now it's time to add some margin here. 189 00:10:26,729 --> 00:10:30,393 So that these two are not so close to the text. 190 00:10:30,393 --> 00:10:33,034 We want them to be more like here at the 191 00:10:33,034 --> 00:10:34,701 bottom of the phone. 192 00:10:35,550 --> 00:10:38,072 So in order to do that I ill actually show you 193 00:10:38,072 --> 00:10:39,239 a new selector 194 00:10:40,464 --> 00:10:42,990 cause what I want to do here is to add 195 00:10:42,990 --> 00:10:45,573 a space to the left work-steps. 196 00:10:47,143 --> 00:10:50,194 So I'll do that here, and I'll say 197 00:10:50,194 --> 00:10:51,027 works-step 198 00:10:53,298 --> 00:10:55,965 and then I'll say, last-of-type. 199 00:10:58,010 --> 00:11:02,040 This is quite similar to last-child but so 200 00:11:02,040 --> 00:11:04,522 in order that you get to know last-of-type 201 00:11:04,522 --> 00:11:07,105 as well I'll show you this too. 202 00:11:08,088 --> 00:11:12,255 So now I say that I want a larger margin here to the bottom. 203 00:11:15,480 --> 00:11:18,563 And in this case I will say 80 pixels 204 00:11:19,855 --> 00:11:22,085 instead of those 50. 205 00:11:22,085 --> 00:11:24,503 So the work-steps all have 50 pixels, but now 206 00:11:24,503 --> 00:11:28,003 I stated the last one will have 80 pixels. 207 00:11:30,349 --> 00:11:31,349 Okay, right. 208 00:11:33,405 --> 00:11:34,840 For now this looks very good. 209 00:11:34,840 --> 00:11:36,813 Don't you think so? 210 00:11:36,813 --> 00:11:39,631 But there is however a problem now, 211 00:11:39,631 --> 00:11:40,606 which is this. 212 00:11:40,606 --> 00:11:43,249 You see, that even though we defined 213 00:11:43,249 --> 00:11:46,740 that a section should have 80 percent padding 214 00:11:46,740 --> 00:11:49,218 there seems to be no padding here between this 215 00:11:49,218 --> 00:11:52,177 section and this one, right? 216 00:11:52,177 --> 00:11:54,130 And there's actually a good reason for that 217 00:11:54,130 --> 00:11:57,014 and I will use the Chrome developer tools to 218 00:11:57,014 --> 00:11:58,181 show you that. 219 00:12:01,110 --> 00:12:04,610 So let's start by inspecting this element. 220 00:12:11,188 --> 00:12:12,521 It's right here. 221 00:12:15,527 --> 00:12:18,101 So the section steps which is the selected one 222 00:12:18,101 --> 00:12:21,438 is the blue one, and we will see that the section 223 00:12:21,438 --> 00:12:23,297 starts right here. 224 00:12:23,297 --> 00:12:27,278 So the steps section starts where the meal section 225 00:12:27,278 --> 00:12:28,278 should start 226 00:12:29,911 --> 00:12:32,407 and you actually see the green area 227 00:12:32,407 --> 00:12:34,751 is those 80 pixels padding 228 00:12:34,751 --> 00:12:37,918 and it starts at a weird place, right? 229 00:12:38,814 --> 00:12:41,015 But there is actually a good reason for that 230 00:12:41,015 --> 00:12:44,423 and it has to do with clearing the floats. 231 00:12:44,423 --> 00:12:47,968 Maybe you remember that from the introductory lectures? 232 00:12:47,968 --> 00:12:51,498 Where I told you that, when you define some floats 233 00:12:51,498 --> 00:12:54,479 you then later have to clear those floats 234 00:12:54,479 --> 00:12:57,396 and we didn't do any of those here. 235 00:12:58,375 --> 00:13:01,189 So the section meals actually has 236 00:13:01,189 --> 00:13:04,856 as you can see up there, zero pixels height. 237 00:13:06,107 --> 00:13:09,187 That's because we didn't clear the floats. 238 00:13:09,187 --> 00:13:12,687 So we need to take care of that right now. 239 00:13:13,816 --> 00:13:15,733 And so we go back here. 240 00:13:16,822 --> 00:13:17,655 And yeah. 241 00:13:17,655 --> 00:13:21,335 The LivePreview was canceled because, as I told you before 242 00:13:21,335 --> 00:13:25,191 when you open the Google Chrome developer tools 243 00:13:25,191 --> 00:13:29,358 in this live window then the connection gets lost. 244 00:13:31,078 --> 00:13:32,666 Now clearing those floats, 245 00:13:32,666 --> 00:13:35,249 I will now show you a new class 246 00:13:37,948 --> 00:13:41,160 which is very used in web design. 247 00:13:41,160 --> 00:13:43,143 In web development. 248 00:13:43,143 --> 00:13:46,107 And it's called a clearfix class. 249 00:13:46,107 --> 00:13:48,107 And I will define it now 250 00:13:49,003 --> 00:13:52,003 but don't worry about understanding 251 00:13:53,699 --> 00:13:56,282 exactly what I'm gonna do here. 252 00:13:57,126 --> 00:14:00,709 We just use this class to clear the floats. 253 00:14:03,420 --> 00:14:07,003 And the actual clearing happens right here. 254 00:14:08,667 --> 00:14:11,084 So let me just complete this. 255 00:14:13,696 --> 00:14:16,330 So again, don't worry so much about 256 00:14:16,330 --> 00:14:17,913 understanding this. 257 00:14:19,771 --> 00:14:22,269 Visibility is hidden. 258 00:14:22,269 --> 00:14:24,746 Okay, what this class will do, 259 00:14:24,746 --> 00:14:28,163 it will clear the float after an element. 260 00:14:30,207 --> 00:14:33,040 So we will actually add this class 261 00:14:35,556 --> 00:14:36,806 here in the ul. 262 00:14:37,761 --> 00:14:40,738 And I will explain to you why. 263 00:14:40,738 --> 00:14:44,462 This is because the child elements of this class 264 00:14:44,462 --> 00:14:47,852 which are the li elements, are the one who have 265 00:14:47,852 --> 00:14:51,935 the float property, and so we say that the parent 266 00:14:53,013 --> 00:14:56,901 has this clearfix class and then that float 267 00:14:56,901 --> 00:15:00,484 will be cleared right after the ul element. 268 00:15:02,150 --> 00:15:04,586 And we do that here and we do that here. 269 00:15:04,586 --> 00:15:07,022 And now the problem should be solved. 270 00:15:07,022 --> 00:15:10,189 So let's open up the connection again. 271 00:15:11,444 --> 00:15:13,277 And close the old one. 272 00:15:15,507 --> 00:15:17,450 And here we are. 273 00:15:17,450 --> 00:15:20,413 So this works, now we have our space here 274 00:15:20,413 --> 00:15:21,996 such as we want to. 275 00:15:23,583 --> 00:15:25,250 We can confirm this. 276 00:15:27,476 --> 00:15:29,059 This section meals. 277 00:15:31,540 --> 00:15:35,081 And now the section meals no longer has zero pixels height 278 00:15:35,081 --> 00:15:38,414 but it has its actual 546 pixels height. 279 00:15:39,992 --> 00:15:42,659 And everything works just right. 280 00:15:43,743 --> 00:15:46,332 So one other thing to do that I 281 00:15:46,332 --> 00:15:49,132 told you at the beginning of this lecture, 282 00:15:49,132 --> 00:15:51,382 is to create a good way to 283 00:15:52,731 --> 00:15:54,959 separate between different sections. 284 00:15:54,959 --> 00:15:57,687 And what I want to do here 285 00:15:57,687 --> 00:16:01,520 is to add a very, very subtle background color 286 00:16:04,192 --> 00:16:06,065 to this section. 287 00:16:06,065 --> 00:16:07,898 So it's section-steps. 288 00:16:12,569 --> 00:16:14,319 And background-color. 289 00:16:16,159 --> 00:16:18,492 And I will start with white. 290 00:16:22,245 --> 00:16:26,412 And so as I said, I want a very subtle effect here. 291 00:16:28,877 --> 00:16:30,544 So such as this one. 292 00:16:32,124 --> 00:16:35,297 And you will not notice it right now. 293 00:16:35,297 --> 00:16:36,801 The live connection was lost again, 294 00:16:36,801 --> 00:16:38,218 I don't know why. 295 00:16:42,215 --> 00:16:43,965 So this one is white, 296 00:16:45,254 --> 00:16:49,063 and this has a very subtle grey color. 297 00:16:49,063 --> 00:16:51,139 And you will not notice it so much now, 298 00:16:51,139 --> 00:16:53,385 but you will notice the difference once we design 299 00:16:53,385 --> 00:16:57,717 out next section and it will have a greyed effect. 300 00:16:57,717 --> 00:17:00,484 So now we have four sections designed, 301 00:17:00,484 --> 00:17:04,495 and it's already starting to look very promising I think. 302 00:17:04,495 --> 00:17:07,469 And so in the next lecture we're starting with 303 00:17:07,469 --> 00:17:08,886 our city section. 304 00:17:10,266 --> 00:17:14,124 So, feel free to review this lecture or 305 00:17:14,124 --> 00:17:16,722 to even ask some questions in the course forums 306 00:17:16,722 --> 00:17:19,282 if you have some and then after that 307 00:17:19,282 --> 00:17:21,699 see you in the next lecture.