Original subtitles

1 1

Welcome back, time to go back to Brackets 2

2

and get our hands dirty again. 3

3

I'm really excited to start building this website. 4

4

In this lecture we will start 5

5

by setting everything up. 6

6

So let's go. 7

7

Now the first step is to actually 8

8

create a nice folder structure 9

9

where we keep all our files very organized. 10

10

And that you can later use for much, much bigger projects. 11

11

So I'll start by creating here a new folder. 12

12

And I will call this omnifood. 13

13

Omnifood. 14

14

Alright, so now inside of this 15

15

I will create the first folder called resources. 16

16

And inside of that folder, show you, like this, 17

17

okay, inside of the resources folder 18

18

we'll put a folder for our CSS files, 19

19

another folder for JavaScript where we will 20

20

put all our jQuery files, 21

21

then another folder for the images that 22

22

we are going to use in the project, 23

23

and also a folder for some data. 24

24

We'll probably not need this folder, 25

25

but I will include it here, so, you know 26

26

where to put it in case you need it 27

27

for some projects of your own later. 28

28

And inside of this CSS folder I will put another 29

29

folder for images, and the difference 30

30

between this one and the other one 31

31

is that these images are going 32

32

to be used by CSS, such as background images. 33

33

Okay, so in the resource folders 34

34

go the files that are created by us, basically. 35

35

Then we have another folder here 36

36

which is called vendors. 37

37

And in here we have some similar folders, 38

38

again, CSS, but the difference is 39

39

that this folder is for CSS that was not created by us. 40

40

So that we download it from the internet 41

41

and use for our project. 42

42

And another one for JavaScript files, 43

43

and one for fonts, that's probably 44

44

where our icon fonts will go. 45

45

So this is a structure that is very flexible 46

46

and allows us to separate the files 47

47

that were created by us and files 48

48

that we download from the internet 49

49

like JavaScript plugins or CSS files, 50

50

such we are going to use later. 51

51

Alright, so this is our folder structure. 52

52

So now let's go to Brackets, and back here, 53

53

this is our old project, you probably remember 54

54

how to open a project, or create a new one, 55

55

it's here, this button, and hit open folder, 56

56

and it's on the desktop omnifood. 57

57

Okay, so that is our working folder. 58

58

Now let's start by creating a new HTML file, 59

59

and I will save it and call it again, index.html, 60

60

and also a new CSS file which I will leave empty for now. 61

61

This one is again, style.css. 62

62

So let's create our HTML structure here starting 63

63

with the doc type, I hope you remember this. 64

64

DOCTYPE html, alright, you remember what comes next? 65

65

Now is the HTML element. 66

66

Give it some space, and one thing we didn't do 67

67

in the first project, but I'm going to do it now, 68

68

is specify the lang attribute. 69

69

And we will say that this page is in English. 70

70

Alright, inside of the HTML we have again, 71

71

the head, and then the body 72

72

where all our main content will go. 73

73

Okay, I will now include the CSS file 74

74

which is, as you probably remember, 75

75

link then rel, say stylesheet, 76

76

then I say it's type, CSS, and now I actually 77

77

realize that I did a mistake here 78

78

because I want this file, you see, 79

79

I put this file right here, but that's not 80

80

where I want it, I want it right in our CSS folder. 81

81

Right here, right. 82

82

So let me see, so as I have told you before 83

83

we have this file tree here where we can see 84

84

all of our files, okay, here it is. 85

85

So I can just delete this one. 86

86

So Brackets allows you to use this 87

87

as a file explorer, you can delete 88

88

and manipulate files in here as well. 89

89

So now let me establish the link 90

90

between these two documents. 91

91

Alright, href, and it's inside resources, 92

92

inside the CSS folder, and it's style.css, and that's it. 93

93

Now we'll just give it a nice title, just Omnifood for now, 94

94

you can just change this later. 95

95

And we will also put much more stuff here 96

96

in the head section later on. 97

97

Now in our CSS file I want to include 98

98

right now is a CSS file which is called normalize.css. 99

99

And as you can see here, normalize.css makes browsers 100

100

render all elements more consistently 101

101

and in line with modern standards. 102

102

It precisely targets only the styles that needs normalizing. 103

103

So it's like a CSS reset which makes CSS 104

104

looks the same in all browsers. 105

105

I'll hit this, now I will save this 106

106

inside our project folder, omnifood, 107

107

and as I explained before, this is a file 108

108

we got from the internet, it's not our file, 109

109

so I'll put this inside the CSS folder 110

110

in the vendors folder, alright. 111

111

So let's include it here. 112

112

And it actually has to go before this file. 113

113

So link, again, all of this stuff, stylesheet, 114

114

type, CSS, href, now it's in the resources, CSS, normalize. 115

115

Right, now the next step we do in this kind of setup 116

116

process is to include the web font we chose. 117

117

Do you remember, it was Lato. 118

118

So I will go to Google Fonts, and it's actually right here. 119

119

So this is the Lato font. 120

120

See here, there are some others here, 121

121

this is Lato. 122

122

So these are the different styles which are available 123

123

for this typeface, with the different font weights, 124

124

and down here some italics. 125

125

So we want to use this one. 126

126

And here we gotta select all the styles we want. 127

127

And I want the light one, and the normal, 128

128

which is already selected, I don't know 129

129

about the very thin, but for now I will just use this, 130

130

and also the italics, this one, we don't 131

131

want to use all of them because that would 132

132

effect the page speed of our webpage. 133

133

So we will just use these four one for now, 134

134

and we can always select more if we need them later. 135

135

So it's very, very easy. 136

136

All we have to do now is to come down here 137

137

and copy this link and go back to our HTML file, 138

138

and paste it here, and that's it. 139

139

And that's because this Google Font 140

140

is actually just a CSS file. 141

141

Which we use here in our project, 142

142

but it's not a file that we download, 143

143

it's a file that's in the internet 144

144

here on the Google Font server. 145

145

Alright, so let's make the first CSS definitions here. 146

146

As you remember maybe, from our first project, 147

147

we should target R elements and put their margin 148

148

and padding to zero, that's always 149

149

the first thing that I do. 150

150

And I also set the box sizing property, 151

151

which we talked about before, which is border box. 152

152

Alright, so now all margins and paddings are gone. 153

153

And now for the HTML we also make 154

154

this basic setup so that we can get started. 155

155

So the first thing I will set the background color, 156

156

now the background color is not necessary 157

157

'cause I want it to be white and that's the default, 158

158

so it's not necessary, but just to 159

159

show you I'll do it anyway. 160

160

And we know that white is FFF, okay now we can 161

161

set the text color for the entire project, 162

162

and what I like to do is to start with black, 163

163

'cause I know it's 000, then I use 164

164

the color picker as we did before, 165

165

with command, E, and choose a nice gray from here. 166

166

Now we'll use this one, 555, which is not 167

167

too dark and not too light, 168

168

but if we want we can change this later as well. 169

169

And we can also set the font family. 170

170

So we will use, as we said, Lato. 171

171

So all we need to do to set this family 172

172

is to include the CSS file such as we did before, 173

173

and then use that font name right here. 174

174

Now as a second choice, as I did before, 175

175

I will say just Ariel, and this is what 176

176

happens, for example, if the user has 177

177

no internet connection for, I don't know 178

178

which reason, so if Lato can't be displayed, 179

179

Ariel will be displayed instead. 180

180

And now, if Ariel is not available as well, 181

181

then we have this CSS keyword which is sans-serif, 182

182

so if Lato and Ariel are both not available, 183

183

then any sans-serif font will be used. 184

184

And I will also set a font size. 185

185

A overall font size for the project to 20 pixels. 186

186

If that's too much, we can always put it back later. 187

187

Another thing about the font is to set the font weight. 188

188

I'll say font weight, and if you remember, 189

189

I will go back here, we selected 100, 300 and 400, 190

190

and the default that I will choose here is 300. 191

191

And the last thing that I should do here 192

192

is text rendering, and then optimize legibility. 193

193

This will make our fonts rendering in a perfect way. 194

194

Okay, I think that now we're ready to start. 195

195

All the setup is done, let me just see 196

196

if everything works, we'll just put in some h1 element here, 197

197

put Omnifood, and test the whole thing. 198

198

Open the live connection as we did before, takes some time. 199

199

Alright, this is Omnifood, with the font we just selected 200

200

and with the font size we selected 201

201

and with the font color. 202

202

So that was the basic setup of our project. 203

203

Next we can start to actually build the site.