1 00:00:01,871 --> 00:00:04,689 Welcome back, time to go back to Brackets 2 00:00:04,689 --> 00:00:07,700 and get our hands dirty again. 3 00:00:07,700 --> 00:00:11,401 I'm really excited to start building this website. 4 00:00:11,401 --> 00:00:13,355 In this lecture we will start 5 00:00:13,355 --> 00:00:15,187 by setting everything up. 6 00:00:15,187 --> 00:00:16,187 So let's go. 7 00:00:17,586 --> 00:00:19,577 Now the first step is to actually 8 00:00:19,577 --> 00:00:21,893 create a nice folder structure 9 00:00:21,893 --> 00:00:25,472 where we keep all our files very organized. 10 00:00:25,472 --> 00:00:29,639 And that you can later use for much, much bigger projects. 11 00:00:31,737 --> 00:00:35,849 So I'll start by creating here a new folder. 12 00:00:35,849 --> 00:00:38,349 And I will call this omnifood. 13 00:00:42,233 --> 00:00:43,066 Omnifood. 14 00:00:44,958 --> 00:00:47,458 Alright, so now inside of this 15 00:00:50,734 --> 00:00:54,734 I will create the first folder called resources. 16 00:00:56,546 --> 00:01:00,463 And inside of that folder, show you, like this, 17 00:01:01,955 --> 00:01:04,955 okay, inside of the resources folder 18 00:01:05,980 --> 00:01:09,063 we'll put a folder for our CSS files, 19 00:01:10,333 --> 00:01:13,916 another folder for JavaScript where we will 20 00:01:15,345 --> 00:01:17,428 put all our jQuery files, 21 00:01:21,481 --> 00:01:25,510 then another folder for the images that 22 00:01:25,510 --> 00:01:28,427 we are going to use in the project, 23 00:01:29,903 --> 00:01:32,570 and also a folder for some data. 24 00:01:34,584 --> 00:01:37,187 We'll probably not need this folder, 25 00:01:37,187 --> 00:01:39,795 but I will include it here, so, you know 26 00:01:39,795 --> 00:01:42,645 where to put it in case you need it 27 00:01:42,645 --> 00:01:45,645 for some projects of your own later. 28 00:01:47,444 --> 00:01:51,338 And inside of this CSS folder I will put another 29 00:01:51,338 --> 00:01:54,141 folder for images, and the difference 30 00:01:54,141 --> 00:01:56,215 between this one and the other one 31 00:01:56,215 --> 00:01:59,508 is that these images are going 32 00:01:59,508 --> 00:02:03,258 to be used by CSS, such as background images. 33 00:02:05,000 --> 00:02:07,681 Okay, so in the resource folders 34 00:02:07,681 --> 00:02:11,598 go the files that are created by us, basically. 35 00:02:13,411 --> 00:02:16,216 Then we have another folder here 36 00:02:16,216 --> 00:02:18,216 which is called vendors. 37 00:02:20,652 --> 00:02:23,335 And in here we have some similar folders, 38 00:02:23,335 --> 00:02:26,343 again, CSS, but the difference is 39 00:02:26,343 --> 00:02:30,510 that this folder is for CSS that was not created by us. 40 00:02:31,824 --> 00:02:34,508 So that we download it from the internet 41 00:02:34,508 --> 00:02:37,183 and use for our project. 42 00:02:37,183 --> 00:02:40,266 And another one for JavaScript files, 43 00:02:41,292 --> 00:02:44,125 and one for fonts, that's probably 44 00:02:45,282 --> 00:02:47,699 where our icon fonts will go. 45 00:02:51,666 --> 00:02:54,266 So this is a structure that is very flexible 46 00:02:54,266 --> 00:02:57,804 and allows us to separate the files 47 00:02:57,804 --> 00:03:00,087 that were created by us and files 48 00:03:00,087 --> 00:03:02,527 that we download from the internet 49 00:03:02,527 --> 00:03:05,610 like JavaScript plugins or CSS files, 50 00:03:08,176 --> 00:03:10,759 such we are going to use later. 51 00:03:12,689 --> 00:03:16,474 Alright, so this is our folder structure. 52 00:03:16,474 --> 00:03:20,057 So now let's go to Brackets, and back here, 53 00:03:24,326 --> 00:03:27,896 this is our old project, you probably remember 54 00:03:27,896 --> 00:03:31,590 how to open a project, or create a new one, 55 00:03:31,590 --> 00:03:35,653 it's here, this button, and hit open folder, 56 00:03:35,653 --> 00:03:38,403 and it's on the desktop omnifood. 57 00:03:40,170 --> 00:03:43,055 Okay, so that is our working folder. 58 00:03:43,055 --> 00:03:47,205 Now let's start by creating a new HTML file, 59 00:03:47,205 --> 00:03:51,288 and I will save it and call it again, index.html, 60 00:03:53,997 --> 00:03:58,164 and also a new CSS file which I will leave empty for now. 61 00:04:00,102 --> 00:04:02,519 This one is again, style.css. 62 00:04:05,218 --> 00:04:09,240 So let's create our HTML structure here starting 63 00:04:09,240 --> 00:04:12,907 with the doc type, I hope you remember this. 64 00:04:15,944 --> 00:04:20,111 DOCTYPE html, alright, you remember what comes next? 65 00:04:22,219 --> 00:04:24,219 Now is the HTML element. 66 00:04:26,260 --> 00:04:30,041 Give it some space, and one thing we didn't do 67 00:04:30,041 --> 00:04:33,011 in the first project, but I'm going to do it now, 68 00:04:33,011 --> 00:04:35,511 is specify the lang attribute. 69 00:04:37,883 --> 00:04:41,633 And we will say that this page is in English. 70 00:04:42,766 --> 00:04:46,348 Alright, inside of the HTML we have again, 71 00:04:46,348 --> 00:04:48,598 the head, and then the body 72 00:04:53,271 --> 00:04:56,188 where all our main content will go. 73 00:04:59,739 --> 00:05:02,822 Okay, I will now include the CSS file 74 00:05:05,383 --> 00:05:07,745 which is, as you probably remember, 75 00:05:07,745 --> 00:05:10,245 link then rel, say stylesheet, 76 00:05:13,543 --> 00:05:17,293 then I say it's type, CSS, and now I actually 77 00:05:21,413 --> 00:05:24,163 realize that I did a mistake here 78 00:05:26,658 --> 00:05:29,491 because I want this file, you see, 79 00:05:32,350 --> 00:05:35,074 I put this file right here, but that's not 80 00:05:35,074 --> 00:05:39,241 where I want it, I want it right in our CSS folder. 81 00:05:40,719 --> 00:05:42,219 Right here, right. 82 00:05:46,328 --> 00:05:49,067 So let me see, so as I have told you before 83 00:05:49,067 --> 00:05:51,551 we have this file tree here where we can see 84 00:05:51,551 --> 00:05:54,153 all of our files, okay, here it is. 85 00:05:54,153 --> 00:05:56,630 So I can just delete this one. 86 00:05:56,630 --> 00:05:59,316 So Brackets allows you to use this 87 00:05:59,316 --> 00:06:02,149 as a file explorer, you can delete 88 00:06:03,669 --> 00:06:06,752 and manipulate files in here as well. 89 00:06:08,228 --> 00:06:09,893 So now let me establish the link 90 00:06:09,893 --> 00:06:12,226 between these two documents. 91 00:06:13,473 --> 00:06:16,890 Alright, href, and it's inside resources, 92 00:06:18,469 --> 00:06:22,636 inside the CSS folder, and it's style.css, and that's it. 93 00:06:27,451 --> 00:06:31,618 Now we'll just give it a nice title, just Omnifood for now, 94 00:06:37,311 --> 00:06:39,428 you can just change this later. 95 00:06:39,428 --> 00:06:41,911 And we will also put much more stuff here 96 00:06:41,911 --> 00:06:44,513 in the head section later on. 97 00:06:44,513 --> 00:06:46,790 Now in our CSS file I want to include 98 00:06:46,790 --> 00:06:50,957 right now is a CSS file which is called normalize.css. 99 00:06:53,467 --> 00:06:58,147 And as you can see here, normalize.css makes browsers 100 00:06:58,147 --> 00:07:00,917 render all elements more consistently 101 00:07:00,917 --> 00:07:03,197 and in line with modern standards. 102 00:07:03,197 --> 00:07:08,003 It precisely targets only the styles that needs normalizing. 103 00:07:08,003 --> 00:07:11,748 So it's like a CSS reset which makes CSS 104 00:07:11,748 --> 00:07:14,331 looks the same in all browsers. 105 00:07:15,208 --> 00:07:18,125 I'll hit this, now I will save this 106 00:07:20,694 --> 00:07:24,356 inside our project folder, omnifood, 107 00:07:24,356 --> 00:07:28,418 and as I explained before, this is a file 108 00:07:28,418 --> 00:07:31,100 we got from the internet, it's not our file, 109 00:07:31,100 --> 00:07:34,107 so I'll put this inside the CSS folder 110 00:07:34,107 --> 00:07:36,690 in the vendors folder, alright. 111 00:07:43,137 --> 00:07:45,705 So let's include it here. 112 00:07:45,705 --> 00:07:49,288 And it actually has to go before this file. 113 00:07:53,392 --> 00:07:57,225 So link, again, all of this stuff, stylesheet, 114 00:08:02,044 --> 00:08:06,211 type, CSS, href, now it's in the resources, CSS, normalize. 115 00:08:12,331 --> 00:08:16,498 Right, now the next step we do in this kind of setup 116 00:08:18,113 --> 00:08:22,266 process is to include the web font we chose. 117 00:08:22,266 --> 00:08:25,033 Do you remember, it was Lato. 118 00:08:25,033 --> 00:08:29,200 So I will go to Google Fonts, and it's actually right here. 119 00:08:31,165 --> 00:08:33,248 So this is the Lato font. 120 00:08:38,155 --> 00:08:41,893 See here, there are some others here, 121 00:08:41,893 --> 00:08:42,976 this is Lato. 122 00:08:44,170 --> 00:08:47,382 So these are the different styles which are available 123 00:08:47,382 --> 00:08:51,549 for this typeface, with the different font weights, 124 00:08:52,954 --> 00:08:55,067 and down here some italics. 125 00:08:55,067 --> 00:08:57,317 So we want to use this one. 126 00:08:58,848 --> 00:09:02,430 And here we gotta select all the styles we want. 127 00:09:02,430 --> 00:09:05,847 And I want the light one, and the normal, 128 00:09:08,649 --> 00:09:11,283 which is already selected, I don't know 129 00:09:11,283 --> 00:09:15,450 about the very thin, but for now I will just use this, 130 00:09:18,797 --> 00:09:22,130 and also the italics, this one, we don't 131 00:09:23,064 --> 00:09:26,086 want to use all of them because that would 132 00:09:26,086 --> 00:09:29,169 effect the page speed of our webpage. 133 00:09:33,531 --> 00:09:36,135 So we will just use these four one for now, 134 00:09:36,135 --> 00:09:41,094 and we can always select more if we need them later. 135 00:09:41,094 --> 00:09:43,613 So it's very, very easy. 136 00:09:43,613 --> 00:09:47,309 All we have to do now is to come down here 137 00:09:47,309 --> 00:09:51,309 and copy this link and go back to our HTML file, 138 00:09:53,486 --> 00:09:56,236 and paste it here, and that's it. 139 00:09:57,962 --> 00:10:00,234 And that's because this Google Font 140 00:10:00,234 --> 00:10:02,567 is actually just a CSS file. 141 00:10:04,300 --> 00:10:07,389 Which we use here in our project, 142 00:10:07,389 --> 00:10:08,730 but it's not a file that we download, 143 00:10:08,730 --> 00:10:11,563 it's a file that's in the internet 144 00:10:13,570 --> 00:10:16,153 here on the Google Font server. 145 00:10:19,386 --> 00:10:23,553 Alright, so let's make the first CSS definitions here. 146 00:10:29,140 --> 00:10:32,973 As you remember maybe, from our first project, 147 00:10:34,023 --> 00:10:38,023 we should target R elements and put their margin 148 00:10:39,095 --> 00:10:41,288 and padding to zero, that's always 149 00:10:41,288 --> 00:10:43,455 the first thing that I do. 150 00:10:44,745 --> 00:10:47,995 And I also set the box sizing property, 151 00:10:49,020 --> 00:10:53,187 which we talked about before, which is border box. 152 00:10:54,634 --> 00:10:58,801 Alright, so now all margins and paddings are gone. 153 00:11:02,488 --> 00:11:05,984 And now for the HTML we also make 154 00:11:05,984 --> 00:11:09,651 this basic setup so that we can get started. 155 00:11:10,688 --> 00:11:14,855 So the first thing I will set the background color, 156 00:11:16,665 --> 00:11:18,855 now the background color is not necessary 157 00:11:18,855 --> 00:11:21,863 'cause I want it to be white and that's the default, 158 00:11:21,863 --> 00:11:24,063 so it's not necessary, but just to 159 00:11:24,063 --> 00:11:26,313 show you I'll do it anyway. 160 00:11:28,454 --> 00:11:32,287 And we know that white is FFF, okay now we can 161 00:11:34,188 --> 00:11:37,688 set the text color for the entire project, 162 00:11:40,042 --> 00:11:43,455 and what I like to do is to start with black, 163 00:11:43,455 --> 00:11:46,541 'cause I know it's 000, then I use 164 00:11:46,541 --> 00:11:49,220 the color picker as we did before, 165 00:11:49,220 --> 00:11:53,387 with command, E, and choose a nice gray from here. 166 00:11:55,606 --> 00:11:59,023 Now we'll use this one, 555, which is not 167 00:12:00,692 --> 00:12:02,888 too dark and not too light, 168 00:12:02,888 --> 00:12:07,237 but if we want we can change this later as well. 169 00:12:07,237 --> 00:12:10,237 And we can also set the font family. 170 00:12:12,758 --> 00:12:15,508 So we will use, as we said, Lato. 171 00:12:17,312 --> 00:12:19,223 So all we need to do to set this family 172 00:12:19,223 --> 00:12:23,306 is to include the CSS file such as we did before, 173 00:12:25,033 --> 00:12:28,286 and then use that font name right here. 174 00:12:28,286 --> 00:12:32,274 Now as a second choice, as I did before, 175 00:12:32,274 --> 00:12:34,875 I will say just Ariel, and this is what 176 00:12:34,875 --> 00:12:37,027 happens, for example, if the user has 177 00:12:37,027 --> 00:12:40,486 no internet connection for, I don't know 178 00:12:40,486 --> 00:12:43,817 which reason, so if Lato can't be displayed, 179 00:12:43,817 --> 00:12:46,621 Ariel will be displayed instead. 180 00:12:46,621 --> 00:12:50,280 And now, if Ariel is not available as well, 181 00:12:50,280 --> 00:12:54,447 then we have this CSS keyword which is sans-serif, 182 00:12:56,801 --> 00:13:00,396 so if Lato and Ariel are both not available, 183 00:13:00,396 --> 00:13:03,563 then any sans-serif font will be used. 184 00:13:04,832 --> 00:13:07,838 And I will also set a font size. 185 00:13:07,838 --> 00:13:11,699 A overall font size for the project to 20 pixels. 186 00:13:11,699 --> 00:13:15,866 If that's too much, we can always put it back later. 187 00:13:16,979 --> 00:13:21,697 Another thing about the font is to set the font weight. 188 00:13:21,697 --> 00:13:24,706 I'll say font weight, and if you remember, 189 00:13:24,706 --> 00:13:28,873 I will go back here, we selected 100, 300 and 400, 190 00:13:31,367 --> 00:13:35,284 and the default that I will choose here is 300. 191 00:13:36,902 --> 00:13:40,235 And the last thing that I should do here 192 00:13:41,212 --> 00:13:45,212 is text rendering, and then optimize legibility. 193 00:13:48,045 --> 00:13:52,212 This will make our fonts rendering in a perfect way. 194 00:13:53,089 --> 00:13:56,302 Okay, I think that now we're ready to start. 195 00:13:56,302 --> 00:13:59,469 All the setup is done, let me just see 196 00:14:00,447 --> 00:14:04,614 if everything works, we'll just put in some h1 element here, 197 00:14:06,103 --> 00:14:09,353 put Omnifood, and test the whole thing. 198 00:14:10,453 --> 00:14:14,620 Open the live connection as we did before, takes some time. 199 00:14:16,998 --> 00:14:21,165 Alright, this is Omnifood, with the font we just selected 200 00:14:22,408 --> 00:14:25,333 and with the font size we selected 201 00:14:25,333 --> 00:14:27,728 and with the font color. 202 00:14:27,728 --> 00:14:31,504 So that was the basic setup of our project. 203 00:14:31,504 --> 00:14:35,254 Next we can start to actually build the site.