1 00:00:02,482 --> 00:00:04,284 Let's take a small break 2 00:00:04,284 --> 00:00:08,315 and talk about a very important thing in modern web design, 3 00:00:08,315 --> 00:00:10,428 responsive web design. 4 00:00:10,428 --> 00:00:13,142 You have probably heard of it by now. 5 00:00:13,142 --> 00:00:16,263 So, in this lecture we will set up our project 6 00:00:16,263 --> 00:00:20,346 to that we can easily build a responsive website. 7 00:00:21,789 --> 00:00:25,089 So, what is responsive web design? 8 00:00:25,089 --> 00:00:29,055 Building a responsive website means that that website 9 00:00:29,055 --> 00:00:31,022 will work well on any device 10 00:00:31,022 --> 00:00:33,785 and with any screen resolution. 11 00:00:33,785 --> 00:00:38,011 Working well means that that website is easy to read 12 00:00:38,011 --> 00:00:41,132 and to navigate without needing to constantly zoom in 13 00:00:41,132 --> 00:00:44,350 and zoom out, which is really annoying. 14 00:00:44,350 --> 00:00:48,933 Here are just two examples of responsive websites. 15 00:00:48,933 --> 00:00:52,737 You can see that they change with the browser's width 16 00:00:52,737 --> 00:00:56,183 which means that they respond to the screen size; 17 00:00:56,183 --> 00:01:00,035 therefore, the name responsive web design. 18 00:01:00,035 --> 00:01:04,277 According to Google, 50% of all internet traffic 19 00:01:04,277 --> 00:01:07,024 already happens on mobile phones 20 00:01:07,024 --> 00:01:10,015 and this will even increase in the future. 21 00:01:10,015 --> 00:01:12,681 In fact, Google recently announced 22 00:01:12,681 --> 00:01:16,061 that mobile-friendly websites will be ranked higher 23 00:01:16,061 --> 00:01:19,166 on their Search Results page. 24 00:01:19,166 --> 00:01:21,376 So, it's really important 25 00:01:21,376 --> 00:01:24,959 to embrace responsive web design right now. 26 00:01:27,309 --> 00:01:29,942 So, there are three main ingredients 27 00:01:29,942 --> 00:01:32,527 to responsive web design. 28 00:01:32,527 --> 00:01:34,527 First is the fluid grid. 29 00:01:35,509 --> 00:01:39,053 In a fluid grid all layout elements are sized 30 00:01:39,053 --> 00:01:41,773 in relative units like percentages 31 00:01:41,773 --> 00:01:45,719 instead of absolute units like pixels. 32 00:01:45,719 --> 00:01:48,842 in the CSS section we used a static layout 33 00:01:48,842 --> 00:01:51,342 and defined width with pixels. 34 00:01:52,960 --> 00:01:57,443 Now we are leaving that behind and work with percentages. 35 00:01:57,443 --> 00:02:00,943 We will set up the fluid grid in a minute. 36 00:02:02,736 --> 00:02:06,343 And the same goes for images so as to prevent them 37 00:02:06,343 --> 00:02:10,940 from displaying outside their parent elements. 38 00:02:10,940 --> 00:02:14,427 And finally, media queries allow us to specify 39 00:02:14,427 --> 00:02:18,431 different CSS rules for different browser width. 40 00:02:18,431 --> 00:02:21,706 With media queries we can target different devices 41 00:02:21,706 --> 00:02:23,928 like mobile phones and tablets 42 00:02:23,928 --> 00:02:28,095 and make the website respond to their screen size. 43 00:02:29,522 --> 00:02:31,821 So, now that we know the main ingredients 44 00:02:31,821 --> 00:02:35,384 to responsive web design let's go back to brackets 45 00:02:35,384 --> 00:02:37,551 and set up the fluid grid. 46 00:02:38,756 --> 00:02:41,706 We will then build our website using that grid 47 00:02:41,706 --> 00:02:44,062 in the next lectures. 48 00:02:44,062 --> 00:02:47,357 We will take care of the media queries part later 49 00:02:47,357 --> 00:02:49,541 after building our webpage. 50 00:02:49,541 --> 00:02:51,801 While we build the webpage it's just important 51 00:02:51,801 --> 00:02:54,134 that we always use the grid. 52 00:02:56,054 --> 00:02:59,559 Now, the fluid grid we will use in this course 53 00:02:59,559 --> 00:03:03,697 is based on this little responsive grid system, 54 00:03:03,697 --> 00:03:07,864 which claims to be spectacularly easy responsive web design. 55 00:03:10,210 --> 00:03:12,892 So you can build any layout you can imagine 56 00:03:12,892 --> 00:03:15,115 with this fluid grid. 57 00:03:15,115 --> 00:03:19,444 I actually made some changes that makes things easier for us 58 00:03:19,444 --> 00:03:22,854 and compiled everything in one file. 59 00:03:22,854 --> 00:03:24,654 Please go download that file 60 00:03:24,654 --> 00:03:28,486 from the lecture description right now. 61 00:03:28,486 --> 00:03:31,819 We will come back to this website later 62 00:03:31,819 --> 00:03:35,133 so I can show you how that grid works. 63 00:03:35,133 --> 00:03:38,485 So I hope you downloaded the file by now. 64 00:03:38,485 --> 00:03:41,742 I actually already have it here on my desktop 65 00:03:41,742 --> 00:03:43,242 so I will copy it. 66 00:03:46,359 --> 00:03:49,730 And then we put it in the Vendors folder 67 00:03:49,730 --> 00:03:53,945 because once again it's a file that we got from the internet 68 00:03:53,945 --> 00:03:56,195 and then in the CSS folder. 69 00:03:58,197 --> 00:04:00,197 And here we go, alright. 70 00:04:04,308 --> 00:04:06,339 So now back to brackets. 71 00:04:06,339 --> 00:04:08,339 Let's include that file. 72 00:04:12,067 --> 00:04:13,637 I'll do it here. 73 00:04:13,637 --> 00:04:17,804 Again, before the style CSS, which is our CSS file, 74 00:04:20,266 --> 00:04:23,369 and let me just tell you another trick 75 00:04:23,369 --> 00:04:24,536 which is I can 76 00:04:25,898 --> 00:04:28,963 since I don't want to write all of this again 77 00:04:28,963 --> 00:04:31,894 and instead of copying which is a little annoying 78 00:04:31,894 --> 00:04:32,977 I can just do 79 00:04:35,093 --> 00:04:37,142 duplicate, which is Command + D 80 00:04:37,142 --> 00:04:40,475 or probably Control + D on Windows. 81 00:04:41,817 --> 00:04:45,984 So right here just Command + D and here we go. 82 00:04:47,295 --> 00:04:51,045 'Cause all I want to change now is this file. 83 00:04:52,583 --> 00:04:55,341 So I want the grid file, right. 84 00:04:55,341 --> 00:04:59,341 So now the grid file is included in our project. 85 00:05:00,743 --> 00:05:04,076 Now let me show you how that grid works. 86 00:05:05,360 --> 00:05:08,610 So on this website is a little example. 87 00:05:10,283 --> 00:05:13,783 So all our content will be inside columns, 88 00:05:16,011 --> 00:05:17,639 as you can see here. 89 00:05:17,639 --> 00:05:21,306 And each of these group of columns is a row. 90 00:05:22,907 --> 00:05:26,892 So in each row we can have two or three or four or five 91 00:05:26,892 --> 00:05:29,612 all the way to 12 columns 92 00:05:29,612 --> 00:05:32,112 which all have the same width. 93 00:05:34,248 --> 00:05:36,911 And now as for the responsive part, 94 00:05:36,911 --> 00:05:39,554 if we resize the browser window 95 00:05:39,554 --> 00:05:41,054 all of them shrink 96 00:05:42,811 --> 00:05:46,978 and that means that they are defined with a relative width 97 00:05:48,443 --> 00:05:51,623 because their width is always relative 98 00:05:51,623 --> 00:05:53,456 to the browser window. 99 00:05:54,784 --> 00:05:56,929 So they get smaller and smaller 100 00:05:56,929 --> 00:05:59,343 as I decrease the browser window. 101 00:05:59,343 --> 00:06:02,810 And that's what responsive web design is all about. 102 00:06:02,810 --> 00:06:05,727 And after a certain amount of width 103 00:06:07,197 --> 00:06:08,998 they even stack. 104 00:06:08,998 --> 00:06:12,791 So when they get too small we can't see any content 105 00:06:12,791 --> 00:06:14,745 in this column here, right? 106 00:06:14,745 --> 00:06:17,541 Then they will all stack 107 00:06:17,541 --> 00:06:18,710 just like this. 108 00:06:18,710 --> 00:06:21,871 In our website, since we will use this grid, 109 00:06:21,871 --> 00:06:23,371 we'll do the same. 110 00:06:26,085 --> 00:06:29,085 Okay, so then let's see the CSS file 111 00:06:32,848 --> 00:06:36,775 that we just included and it's down here. 112 00:06:36,775 --> 00:06:38,958 Let me just open it. 113 00:06:38,958 --> 00:06:41,698 And if I click it twice, double click, 114 00:06:41,698 --> 00:06:46,180 then it appears up here in the working files. 115 00:06:46,180 --> 00:06:47,513 So we have a row 116 00:06:50,946 --> 00:06:51,863 and columns 117 00:06:53,532 --> 00:06:55,927 and then different spans 118 00:06:55,927 --> 00:06:59,177 and each of this span will be a column. 119 00:07:01,578 --> 00:07:04,245 For example this span one of two 120 00:07:05,237 --> 00:07:06,570 is just columns. 121 00:07:08,915 --> 00:07:13,225 But don't worry, we will use that in the next lecture 122 00:07:13,225 --> 00:07:16,559 and then you will understand everything 123 00:07:16,559 --> 00:07:18,226 just how this works. 124 00:07:19,221 --> 00:07:22,638 Alright, let's get back to our HTML file. 125 00:07:24,662 --> 00:07:28,245 And as I said, the content will be in rows. 126 00:07:29,451 --> 00:07:31,784 So let's just define the row 127 00:07:33,263 --> 00:07:36,271 and I will simply call it row. 128 00:07:36,271 --> 00:07:38,646 And what I want for this row 129 00:07:38,646 --> 00:07:40,146 is a maximum width 130 00:07:43,151 --> 00:07:44,401 of 1,140 pixels 131 00:07:47,442 --> 00:07:50,775 just as we used in our previous project. 132 00:07:52,576 --> 00:07:54,074 So this is the only value 133 00:07:54,074 --> 00:07:57,752 that will have an absolute value in pixels. 134 00:07:57,752 --> 00:08:00,070 We will define all other layout margins 135 00:08:00,070 --> 00:08:02,235 in pettings and percentages 136 00:08:02,235 --> 00:08:04,266 and not in pixels. 137 00:08:04,266 --> 00:08:07,433 And now I also want to center this row 138 00:08:08,633 --> 00:08:12,633 on the webpage so all our rows will be centered. 139 00:08:15,491 --> 00:08:18,408 So do you remember how we did that? 140 00:08:19,572 --> 00:08:21,786 We'll just set margin 141 00:08:21,786 --> 00:08:24,286 and then to center a container 142 00:08:26,809 --> 00:08:28,456 inside another container 143 00:08:28,456 --> 00:08:33,035 as you remember we set the left margin to auto 144 00:08:33,035 --> 00:08:35,985 and the right margin to auto. 145 00:08:35,985 --> 00:08:37,690 You probably also remember 146 00:08:37,690 --> 00:08:41,923 that we can use a shorthand to set margins just like this. 147 00:08:41,923 --> 00:08:43,006 Top and right 148 00:08:45,088 --> 00:08:46,755 and bottom and left. 149 00:08:48,632 --> 00:08:52,799 Alright, but there's an even simpler way of doing this. 150 00:08:54,934 --> 00:08:58,363 So let me show you that as well. 151 00:08:58,363 --> 00:09:01,113 Which is we can say zero and auto 152 00:09:02,501 --> 00:09:05,010 and then top and bottom will be zero 153 00:09:05,010 --> 00:09:07,677 and left and right will be auto. 154 00:09:09,340 --> 00:09:10,840 Let me delete this 155 00:09:12,117 --> 00:09:14,684 and now this row will be centered. 156 00:09:14,684 --> 00:09:16,851 You can just try this out. 157 00:09:20,201 --> 00:09:23,368 So I'll say div and class will be row. 158 00:09:29,262 --> 00:09:31,429 Alright, just put us here. 159 00:09:36,312 --> 00:09:39,818 And let's see how this looks like. 160 00:09:39,818 --> 00:09:42,691 Okay, you'll see it's perfectly centered. 161 00:09:42,691 --> 00:09:45,047 So now we have everything in place 162 00:09:45,047 --> 00:09:49,214 so we can start building the first section of our webpage 163 00:09:50,085 --> 00:09:52,168 which will be the header. 164 00:09:54,377 --> 00:09:58,294 So don't wait, and join me in the next lecture.