1 00:00:01,089 --> 00:00:03,271 Welcome back to this project. 2 00:00:03,271 --> 00:00:05,547 I am really glad that you're still with me 3 00:00:05,547 --> 00:00:07,939 on this amazing journey, and I hope 4 00:00:07,939 --> 00:00:10,702 that you're enjoying this course so far. 5 00:00:10,702 --> 00:00:13,163 You see this at the end of every lecture, 6 00:00:13,163 --> 00:00:16,112 but I still want to tell you again that it's so important 7 00:00:16,112 --> 00:00:19,131 that you ask your questions in the course forums, 8 00:00:19,131 --> 00:00:22,451 if you have any, of course, because interacting 9 00:00:22,451 --> 00:00:25,330 with other students or with me is the best way 10 00:00:25,330 --> 00:00:28,070 to learn and to succeed. 11 00:00:28,070 --> 00:00:30,996 So now let's move on to the next section. 12 00:00:30,996 --> 00:00:33,620 This one is the How-it-Works section. 13 00:00:33,620 --> 00:00:36,662 This is our pictures, the section where 14 00:00:36,662 --> 00:00:40,307 we explain how ordering food works. 15 00:00:40,307 --> 00:00:43,326 With the app screen on the left side, 16 00:00:43,326 --> 00:00:46,576 and the three simple steps on the right side. 17 00:00:46,576 --> 00:00:48,898 Very simple, but efficient in showing 18 00:00:48,898 --> 00:00:52,056 potential customers how Omnifood works. 19 00:00:52,056 --> 00:00:56,584 In this lecture, we'll use a lot of the techniques 20 00:00:56,584 --> 00:00:59,022 that you're already familiar with. 21 00:00:59,022 --> 00:01:02,203 We'll also learn how to draw circles with CSS, 22 00:01:02,203 --> 00:01:05,385 a cool technique to make separations between sections, 23 00:01:05,385 --> 00:01:07,823 and how to incorporate buttons for the 24 00:01:07,823 --> 00:01:10,168 App Store and the Play Store. 25 00:01:10,168 --> 00:01:14,335 Who knows? Maybe one day you'll make a website for an app. 26 00:01:15,183 --> 00:01:19,100 So as always, we start by adding a new section, 27 00:01:22,474 --> 00:01:24,704 right here after the last one. 28 00:01:24,704 --> 00:01:28,871 So section, and I'm going call this one section-steps. 29 00:01:34,828 --> 00:01:35,661 Alright. 30 00:01:37,242 --> 00:01:40,168 This section will have a title such as the 31 00:01:40,168 --> 00:01:42,835 second section that we designed. 32 00:01:44,650 --> 00:01:47,983 So < div class, and so we need a row now 33 00:01:50,339 --> 00:01:52,256 in order to send there. 34 00:01:53,148 --> 00:01:56,260 As you hopefully remember, a h2 element 35 00:01:56,260 --> 00:02:00,177 where we will put the heading for our sections. 36 00:02:01,438 --> 00:02:04,340 And now you gotta know what text to put here, 37 00:02:04,340 --> 00:02:07,507 so let's get back to our content file. 38 00:02:09,518 --> 00:02:10,768 And here it is. 39 00:02:12,932 --> 00:02:16,507 I'm going to copy all of it, as always, 40 00:02:16,507 --> 00:02:18,257 and put it down here. 41 00:02:23,127 --> 00:02:25,210 So the title is this one, 42 00:02:27,075 --> 00:02:28,242 paste it here, 43 00:02:29,768 --> 00:02:33,935 and just as the last time, this will be an &mdash. 44 00:02:36,014 --> 00:02:38,313 Alright, simple as that. 45 00:02:38,313 --> 00:02:42,702 Now in this case, we don't have a paragraph after this, 46 00:02:42,702 --> 00:02:46,869 and we'll start it showing the iPhone in the app on the 47 00:02:50,272 --> 00:02:54,335 left side, and on the right side the three steps. 48 00:02:54,335 --> 00:02:58,422 So this time, we have two columns and not four. 49 00:02:58,422 --> 00:03:01,505 So again, we need to start a new row. 50 00:03:03,344 --> 00:03:04,927 So class=row*. 51 00:03:08,940 --> 00:03:10,940 Now, we have, as I said, 52 00:03:15,047 --> 00:03:16,765 two columns. 53 00:03:16,765 --> 00:03:20,182 So as always, a column needs to col class 54 00:03:21,270 --> 00:03:22,853 it's a span-1-of-2, 55 00:03:26,495 --> 00:03:29,397 because we will have two columns. 56 00:03:29,397 --> 00:03:32,857 And in the first column, we want our iPhone 57 00:03:32,857 --> 00:03:35,024 with the screenshot on it. 58 00:03:38,639 --> 00:03:42,331 So it's an image, of course, and we already know 59 00:03:42,331 --> 00:03:46,069 it's very easy to put an image on our site. 60 00:03:46,069 --> 00:03:49,273 So in the resources folder and image folder, 61 00:03:49,273 --> 00:03:51,440 now let's see where it is. 62 00:03:53,314 --> 00:03:54,981 App iPhone, I guess. 63 00:03:57,493 --> 00:04:00,576 And we also need an alternative text, 64 00:04:01,789 --> 00:04:04,789 which can be Omnifood app on iPhone. 65 00:04:11,704 --> 00:04:12,537 Okay. 66 00:04:14,142 --> 00:04:18,309 And let me just give this a class called maybe app-screen. 67 00:04:21,990 --> 00:04:25,407 Alright, so this is the left column here. 68 00:04:27,563 --> 00:04:31,230 And now as for the right column, let me just 69 00:04:32,509 --> 00:04:34,509 put another column here. 70 00:04:36,387 --> 00:04:38,387 And again a span-1-of-2. 71 00:04:48,949 --> 00:04:52,699 It's to actually start with three containers, 72 00:04:54,196 --> 00:04:56,495 which will then contain the number of the step 73 00:04:56,495 --> 00:04:58,745 and the corresponding text. 74 00:05:03,784 --> 00:05:06,284 So this we'll call works-step. 75 00:05:11,089 --> 00:05:14,506 So step of how-it-works section, alright? 76 00:05:17,887 --> 00:05:22,054 Now, the number itself will also be a div element. 77 00:05:23,065 --> 00:05:26,398 We don't need a class name here for now, 78 00:05:28,800 --> 00:05:32,050 so we will then make just < div rounds. 79 00:05:33,282 --> 00:05:36,788 Then for the text, as usual, we will 80 00:05:36,788 --> 00:05:39,538 put the text inside of paragraph. 81 00:05:41,409 --> 00:05:43,326 And the text down here. 82 00:05:49,698 --> 00:05:50,531 Alright. 83 00:05:52,392 --> 00:05:54,435 Now I will just copy this and 84 00:05:54,435 --> 00:05:57,018 paste this down here two times, 85 00:05:58,684 --> 00:06:02,601 because I don't feel like writing it all again. 86 00:06:03,561 --> 00:06:06,478 And then just copy the actual text, 87 00:06:08,506 --> 00:06:10,839 right into these paragraphs. 88 00:06:12,709 --> 00:06:14,292 And the third step. 89 00:06:16,982 --> 00:06:19,482 So we don't need this anymore. 90 00:06:20,790 --> 00:06:23,483 Now all that's left to put here are those 91 00:06:23,483 --> 00:06:25,650 buttons for the App Store, 92 00:06:27,384 --> 00:06:31,384 so we also want them inside of this column here. 93 00:06:32,632 --> 00:06:37,044 So we can put them right after those three steps. 94 00:06:37,044 --> 00:06:38,627 So some space here, 95 00:06:40,039 --> 00:06:43,870 and we will take care of the formatting later in CSS. 96 00:06:43,870 --> 00:06:46,866 So the buttons are very simple. 97 00:06:46,866 --> 00:06:50,616 It's just a link, as you could have imagined, 98 00:06:52,044 --> 00:06:54,711 and again, which points nowhere. 99 00:06:56,363 --> 00:07:00,030 And put a class, which I will call bttn-app. 100 00:07:01,448 --> 00:07:04,768 And now, instead of putting some text here, 101 00:07:04,768 --> 00:07:06,463 we will put an image. 102 00:07:06,463 --> 00:07:09,880 Then that image will serve as the button. 103 00:07:14,637 --> 00:07:16,304 So < img src =, 104 00:07:22,903 --> 00:07:24,366 we actually already have 105 00:07:24,366 --> 00:07:26,525 those images in our folder, but they are 106 00:07:26,525 --> 00:07:28,940 really easy to get from the internet. 107 00:07:28,940 --> 00:07:31,982 For instance, the button for the App Store, 108 00:07:31,982 --> 00:07:35,419 you can just get it from the Apple website. 109 00:07:35,419 --> 00:07:38,205 So in the resources folder, image, 110 00:07:38,205 --> 00:07:41,781 and then it should be down here somewhere. 111 00:07:41,781 --> 00:07:43,531 So it's Download App. 112 00:07:47,284 --> 00:07:50,070 Let's see if that's right, yeah. 113 00:07:50,070 --> 00:07:53,903 Now we need an alternative text here, as well. 114 00:07:55,179 --> 00:07:57,262 This is App Store Button. 115 00:07:59,173 --> 00:08:01,673 Okay, and that's it, actually. 116 00:08:02,911 --> 00:08:04,578 That's all it takes. 117 00:08:05,930 --> 00:08:09,273 Now I will duplicate this with Command D, 118 00:08:09,273 --> 00:08:11,690 and down here just change it. 119 00:08:15,148 --> 00:08:16,648 It is app-android. 120 00:08:18,979 --> 00:08:21,479 And then here it's Play Store. 121 00:08:23,623 --> 00:08:25,620 And that's all it takes. 122 00:08:25,620 --> 00:08:29,787 So this is the content of our how-it-works section. 123 00:08:31,054 --> 00:08:34,471 So let's save this and go to our browser. 124 00:08:38,298 --> 00:08:39,548 And here it is. 125 00:08:41,712 --> 00:08:44,045 Unformatted, as you can see, 126 00:08:45,845 --> 00:08:49,026 so the title already looks nice, 127 00:08:49,026 --> 00:08:51,998 because we already formatted it before. 128 00:08:51,998 --> 00:08:55,411 And we have those two columns here that we have defined. 129 00:08:55,411 --> 00:08:58,593 And our two buttons, and now we need 130 00:08:58,593 --> 00:09:03,004 to go back to CSS and style the whole thing. 131 00:09:03,004 --> 00:09:04,421 So let's do that.