Original subtitles

1 1

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.