WEBVTT 00:00.520 --> 00:01.210 All right guys. 00:01.210 --> 00:03.830 Welcome back to a new section here. 00:03.860 --> 00:09.950 I'm really excited about this because it is the section where we are building the web site to be responsive 00:09.980 --> 00:16.000 and we are also building a custom CSSA responsive navigation menu. 00:16.340 --> 00:17.150 So get ready. 00:17.170 --> 00:18.770 We are about to start off 00:27.700 --> 00:35.460 or I guess we are back here and before we actually start building our Web site responsive we need to 00:35.460 --> 00:38.670 do three small adjustments. 00:38.700 --> 00:45.820 So the first one is I have my brackets we know open here with the live view enabled. 00:45.850 --> 00:48.220 And here is the Web site. 00:48.220 --> 00:56.420 So one thing that I want to adjust is first that the font size of these footer here already culprit's 00:56.420 --> 00:59.750 section because in my opinion they look pretty big. 01:00.130 --> 01:08.030 As of this cell if we go to the CSSA and I know that the glass of these is called in line. 01:08.200 --> 01:10.810 So those three are getting selected. 01:10.810 --> 01:19.820 And what I can do is basically change their font size from 20 to 15 and we can see that they're getting 01:19.820 --> 01:24.260 smaller and in my opinion this looks much better. 01:24.260 --> 01:31.010 The next adjustment I want to make is as you can see that these Here are links so my web site is laying 01:31.040 --> 01:31.540 here. 01:31.670 --> 01:39.350 And these three images are also links so they should be clickable and lead to somewhere for example. 01:39.350 --> 01:47.270 So if I just go to the HD e-mail and scroll down to the last corporate section we can see that none 01:47.270 --> 01:53.060 of those is a HGF link because you remember HGF is a link. 01:53.090 --> 02:04.000 So if I just select this and remove it or just copy it and if I now right here right Tref which is going 02:04.000 --> 02:05.500 to lead nowhere so far. 02:05.500 --> 02:13.680 And if it pays my Web site here we can see that the Web site is becoming an actual link. 02:13.940 --> 02:22.880 Ok so because it leads to nowhere so far what I can do here is write HTB as column seven column two 02:22.880 --> 02:28.720 dashes and write double and double w my actual website. 02:29.060 --> 02:36.870 This should be leading to my actual Web site and that's exactly what we want here. 02:37.840 --> 02:38.490 OK. 02:38.590 --> 02:44.070 Now the next thing you want to do is the same thing with the images here. 02:44.260 --> 02:50.950 So if I just type again a if that's going to lead to nowhere so far. 02:50.950 --> 03:01.610 And if I just cut these line of code and pasted here and do pretty much the same thing with the susah 03:01.610 --> 03:13.090 just remember the WDR so D-W class D R and then change this to Twitter and then they dribble. 03:13.410 --> 03:17.500 And now we can see that those are links as well. 03:17.670 --> 03:25.170 So now we can do just let's say that we want this link to lead us to somewhere random to Facebook for 03:25.170 --> 03:25.680 example. 03:25.680 --> 03:31.740 All we need to do is write the same thing as above. 03:32.550 --> 03:40.060 So this will lead to Facebook one cool feature is that if after this you write target 03:43.870 --> 03:51.370 and then equals to blank its target equals under dash blank. 03:51.370 --> 03:59.590 This will actually be open in another tab so it won't interfere with your current tab here. 03:59.590 --> 04:07.770 So for example if I read the same thing right there this link will lead me to my Web site again. 04:07.780 --> 04:10.410 But within a new tab Okay. 04:11.110 --> 04:12.730 So that's perfect. 04:12.730 --> 04:20.380 Now lets just edit out so this link here is not weird style like this. 04:24.970 --> 04:35.230 But we can do is if we select all the links inside of the inline A-class or am I mistaken here that 04:35.540 --> 04:37.900 line a. 04:38.380 --> 04:41.830 And if we do text decoration to none. 04:44.670 --> 04:55.700 If I refresh we can see that the underline is gone and now I'm going to send the color to black so red 04:55.710 --> 04:55.930 there. 04:55.930 --> 04:57.080 There it is. 04:57.490 --> 05:02.830 So the second thing that I want to do before we get into responsiveness part is actually pretty important 05:03.400 --> 05:09.360 as you can see that I have here a resize window plug in or add on. 05:09.400 --> 05:16.860 OK I have downloaded this from the Chrome store and this is pretty useful when dealing with dynamic 05:17.190 --> 05:18.280 web site that I've mentioned. 05:18.280 --> 05:25.890 So here I can test the Web site if I click on any screen size I can test it and see how it looks live. 05:25.930 --> 05:28.450 So we're going to use that as as well. 05:28.510 --> 05:36.320 When we resize the window notice at these top and so the bottom right corner we can see that the actual 05:36.320 --> 05:38.410 size of the viewport. 05:38.650 --> 05:39.260 OK. 05:40.150 --> 05:42.070 So this is pretty important as well. 05:42.150 --> 05:47.710 We want this viewport size is the size of the Web site it's currently on. 05:47.710 --> 06:00.650 So just download this go to Google dot com and type window resize or wrong and you can see there is 06:00.650 --> 06:07.190 the add on here just install it and it will be added to Chrome if you press on here and then you will 06:07.190 --> 06:09.390 be ready to go. 06:09.850 --> 06:16.420 Or perfect title was The second thing that we want to do before there's a response from the start. 06:16.820 --> 06:22.790 And now the last thing that I want to share with you is to explain what is responsive most of you probably 06:22.790 --> 06:30.650 know and then show you how it's actually done so making a web site responsive means that it will look 06:30.860 --> 06:40.220 equally good on a big screen TV for example and it will look equally good on a small mobile screen. 06:40.220 --> 06:41.760 For example an iPhone. 06:41.870 --> 06:43.100 So how is this possible. 06:43.100 --> 06:44.120 How is this done. 06:44.150 --> 06:52.850 Well all we actually are doing in easy words is basically we are changing and we are repositioning the 06:52.880 --> 06:59.110 elements on the Web site as we are shrinking down the screen size. 06:59.120 --> 07:07.560 So for example let's say that at this given screen size this iPhone as we can see is interfering in 07:07.560 --> 07:09.440 sync with the other options. 07:09.440 --> 07:14.350 So we have plenty of options here maybe to remove maybe to replace it or something else. 07:14.460 --> 07:17.540 We can see this button here is behaving really weird. 07:17.600 --> 07:22.160 These columns are overlapping and the web site looks a complete mess. 07:23.540 --> 07:28.930 As of now being without media queries what we what media queries. 07:28.940 --> 07:39.260 OK so media queries is basically a C says rules that we specify and we explicitly tell the elements 07:39.260 --> 07:42.480 on how to behave at a different screen size. 07:42.560 --> 07:49.550 So if this sounds complicated let's try a life example here and that's how we're going to continue doing 07:49.560 --> 07:50.660 new website responsive. 07:50.660 --> 07:59.470 So it's pretty easy go to your style that's VSS and other animations just right media. 07:59.700 --> 08:03.990 Where is slash us on softness. 08:04.180 --> 08:05.050 Okay. 08:05.480 --> 08:09.860 And close a comment logis some whitespace here are. 08:09.890 --> 08:10.280 Perfect. 08:10.280 --> 08:18.540 Now let's say that I want for example this is just an example OK. 08:18.890 --> 08:28.310 For example at a given screen resolution of 12 40 cell one thousand two hundred and forty pixels at 08:28.310 --> 08:33.850 this exact resolution I want the logo to disappear. 08:34.010 --> 08:40.200 Because let's say maybe it's interfering with something so so all I need to do is write. 08:40.250 --> 08:48.580 So the correct markup would be media only screen and that open up for interest and inside right. 08:48.570 --> 08:52.650 The max zoom with off. 08:52.850 --> 08:53.530 How much was it. 08:53.540 --> 08:58.570 I'm sore 12:40 pixels. 08:59.220 --> 09:02.490 And then open up the curly brackets you see what the markup is. 09:02.490 --> 09:09.360 Media only screen and maximum width of one thousand two hundred and forty pixels you don't necessarily 09:09.360 --> 09:10.770 need to know what this means. 09:10.770 --> 09:11.810 This is correct Mark. 09:11.820 --> 09:20.890 And what basically happened here is everything inside these curly brackets so every rule every Caesar 09:20.890 --> 09:24.660 street ruled that we will be writing inside Diskworld brackets. 09:24.840 --> 09:31.620 It's going to apply once the website reaches sizes smaller than 12 for it. 09:31.620 --> 09:35.670 So let's try it let's try and see it in action here. 09:35.970 --> 09:41.490 So all I need to do is not write logo display none. 09:42.200 --> 09:43.170 OK. 09:43.620 --> 09:45.610 So let's see what happens here. 09:45.840 --> 09:47.720 Let's increase the size. 09:47.760 --> 09:52.020 Right now it's 13 50 pixels so if I refresh now the logo is still there. 09:52.260 --> 10:01.770 But as I shrink down as soon as I reach the resolution that is written here the logo should disappear. 10:01.830 --> 10:07.590 See watch the logo right there and it's gone. 10:08.050 --> 10:08.910 All right. 10:09.220 --> 10:16.430 So once I increase the size it's there once I reach 12 40 pixels the logo is gone. 10:16.870 --> 10:19.040 So this is just an example here we can do. 10:19.090 --> 10:26.670 For example we can do body display none and everything should be empty when we reach that screen size 10:26.680 --> 10:32.440 and when we are increasing but the body's back and where we should know the body is gone. 10:32.620 --> 10:40.660 So basically we can write any kind of rule that we want here inside these curly brackets and that is 10:40.660 --> 10:43.740 actually how we are making the web so responsive. 10:43.750 --> 10:47.230 So I hope this concept is clear for you. 10:47.230 --> 10:53.290 If it's not read watch it again because this is very important and this will build up on the next lectures 10:53.350 --> 10:56.170 where we will start making the web said responsive. 10:56.170 --> 10:57.370 So stay tuned guys. 10:57.370 --> 10:58.410 I'll see you in the next one.