Voiceover: Welcome back to this project. 2 2
I am really glad that you're still with me 3 3
on this amazing journey, and I hope 4 4
that you're enjoying this course so far. 5 5
You see this at the end of every lecture, 6 6
but I still want to tell you again that it's so important 7 7
that you ask your questions in the course forums, 8 8
if you have any, of course, because interacting 9 9
with other students or with me is the best way 10 10
to learn and to succeed. 11 11
So now let's move on to the next section. 12 12
This one is the How-it-Works section. 13 13
This is our pictures, the section where 14 14
we explain how ordering food works. 15 15
With the app screen on the left side, 16 16
and the three simple steps on the right side. 17 17
Very simple, but efficient in showing 18 18
potential customers how Omnifood works. 19 19
In this lecture, we'll use a lot of the techniques 20 20
that you're already familiar with. 21 21
We'll also learn how to draw circles with CSS, 22 22
a cool technique to make separations between sections, 23 23
and how to incorporate buttons for the 24 24
App Store and the Play Store. 25 25
Who knows? Maybe one day you'll make a website for an app. 26 26
So as always, we start by adding a new section, 27 27
right here after the last one. 28 28
So section, and I'm going call this one section-steps. 29 29
Alright. 30 30
This section will have a title such as the 31 31
second section that we designed. 32 32
So < div class, and so we need a row now 33 33
in order to send there. 34 34
As you hopefully remember, a h2 element 35 35
where we will put the heading for our sections. 36 36
And now you gotta know what text to put here, 37 37
so let's get back to our content file. 38 38
And here it is. 39 39
I'm going to copy all of it, as always, 40 40
and put it down here. 41 41
So the title is this one, 42 42
paste it here, 43 43
and just as the last time, this will be an &mdash. 44 44
Alright, simple as that. 45 45
Now in this case, we don't have a paragraph after this, 46 46
and we'll start it showing the iPhone in the app on the 47 47
left side, and on the right side the three steps. 48 48
So this time, we have two columns and not four. 49 49
So again, we need to start a new row. 50 50
So class=row*. 51 51
Now, we have, as I said, 52 52
two columns. 53 53
So as always, a column needs to col class 54 54
it's a span-1-of-2, 55 55
because we will have two columns. 56 56
And in the first column, we want our iPhone 57 57
with the screenshot on it. 58 58
So it's an image, of course, and we already know 59 59
it's very easy to put an image on our site. 60 60
So in the resources folder and image folder, 61 61
now let's see where it is. 62 62
App iPhone, I guess. 63 63
And we also need an alternative text, 64 64
which can be Omnifood app on iPhone. 65 65
Okay. 66 66
And let me just give this a class called maybe app-screen. 67 67
Alright, so this is the left column here. 68 68
And now as for the right column, let me just 69 69
put another column here. 70 70
And again a span-1-of-2. 71 71
It's to actually start with three containers, 72 72
which will then contain the number of the step 73 73
and the corresponding text. 74 74
So this we'll call works-step. 75 75
So step of how-it-works section, alright? 76 76
Now, the number itself will also be a div element. 77 77
We don't need a class name here for now, 78 78
so we will then make just < div rounds. 79 79
Then for the text, as usual, we will 80 80
put the text inside of paragraph. 81 81
And the text down here. 82 82
Alright. 83 83
Now I will just copy this and 84 84
paste this down here two times, 85 85
because I don't feel like writing it all again. 86 86
And then just copy the actual text, 87 87
right into these paragraphs. 88 88
And the third step. 89 89
So we don't need this anymore. 90 90
Now all that's left to put here are those 91 91
buttons for the App Store, 92 92
so we also want them inside of this column here. 93 93
So we can put them right after those three steps. 94 94
So some space here, 95 95
and we will take care of the formatting later in CSS. 96 96
So the buttons are very simple. 97 97
It's just a link, as you could have imagined, 98 98
and again, which points nowhere. 99 99
And put a class, which I will call bttn-app. 100 100
And now, instead of putting some text here, 101 101
we will put an image. 102 102
Then that image will serve as the button. 103 103
So < img src =, 104 104
we actually already have 105 105
those images in our folder, but they are 106 106
really easy to get from the internet. 107 107
For instance, the button for the App Store, 108 108
you can just get it from the Apple website. 109 109
So in the resources folder, image, 110 110
and then it should be down here somewhere. 111 111
So it's Download App. 112 112
Let's see if that's right, yeah. 113 113
Now we need an alternative text here, as well. 114 114
This is App Store Button. 115 115
Okay, and that's it, actually. 116 116
That's all it takes. 117 117
Now I will duplicate this with Command D, 118 118
and down here just change it. 119 119
It is app-android. 120 120
And then here it's Play Store. 121 121
And that's all it takes. 122 122
So this is the content of our how-it-works section. 123 123
So let's save this and go to our browser. 124 124
And here it is. 125 125
Unformatted, as you can see, 126 126
so the title already looks nice, 127 127
because we already formatted it before. 128 128
And we have those two columns here that we have defined. 129 129
And our two buttons, and now we need 130 130
to go back to CSS and style the whole thing. 131 131
So let's do that.