Voiceover: 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.