1 00:00:08,280 --> 00:00:09,450 In this video. 2 00:00:09,480 --> 00:00:18,360 Let's go ahead and style the number to have something like this because we are going to implement what 3 00:00:18,360 --> 00:00:20,210 is called responsive design. 4 00:00:20,220 --> 00:00:26,010 We need to find a way or the technique, how we can implement responsive design. 5 00:00:26,250 --> 00:00:28,530 And we have two approaches. 6 00:00:28,530 --> 00:00:34,230 One is mobile first approach or desktop approach. 7 00:00:34,230 --> 00:00:40,110 So the best way to go is always develop for mobile first approach. 8 00:00:40,110 --> 00:00:48,390 In that way, we are going to write less CSS code, but if you choose to go for desktop first approach, 9 00:00:48,390 --> 00:00:50,760 we are going to write a bunch of CSS. 10 00:00:50,760 --> 00:00:57,960 So let me show you how we can design responsive website using mobile first approach. 11 00:00:57,960 --> 00:01:07,230 Because of that, I'm going to reduce the browser size to have a smaller screen something like this. 12 00:01:07,260 --> 00:01:11,940 Now I need to require the CSR inside enough. 13 00:01:11,940 --> 00:01:21,690 So here I'll make is of import and then code dot slash number dot CSS. 14 00:01:21,690 --> 00:01:26,940 So let's see how we are going to write the CSS for the novel. 15 00:01:26,940 --> 00:01:30,870 And this is a view of what I'm going to design. 16 00:01:30,960 --> 00:01:31,920 Perfect. 17 00:01:31,920 --> 00:01:35,310 So we need to control the image. 18 00:01:35,310 --> 00:01:40,800 Remember the image, it is inside the nav and then the IMG. 19 00:01:40,830 --> 00:01:48,150 We can give it a class, but I can target the nav element and then the IMG inside. 20 00:01:48,150 --> 00:01:52,860 Or I can select the NOP logo and then IMG. 21 00:01:52,890 --> 00:01:54,750 So here we go. 22 00:01:54,780 --> 00:01:57,450 Dart's NAV logo. 23 00:01:59,370 --> 00:02:02,250 And then the IMG, that is the image. 24 00:02:02,250 --> 00:02:07,610 Then I want to control the width of 90 pixels with this one. 25 00:02:07,620 --> 00:02:11,039 Now let's see, this is what we have. 26 00:02:11,039 --> 00:02:14,670 We can see how we are designing for mobile first approach. 27 00:02:14,820 --> 00:02:17,550 So the next step is less control. 28 00:02:17,550 --> 00:02:25,080 The parent of the number by using flags to align the children at the center of the page. 29 00:02:25,260 --> 00:02:29,550 This is how I like arranging my assets from top to bottom. 30 00:02:29,550 --> 00:02:32,430 So if I take my case, I will know that. 31 00:02:32,430 --> 00:02:38,550 Okay, I will move from top to bottom based on how the elements are being arranged here. 32 00:02:38,550 --> 00:02:40,320 But this is optional. 33 00:02:40,680 --> 00:02:44,610 Okay, so now the number comes before the image. 34 00:02:44,610 --> 00:02:53,460 So I'll bring this one here and say, now here and I'm going to use display flags as soon as I do that. 35 00:02:53,460 --> 00:02:57,420 Have a look can see that it is moving from left to right. 36 00:02:57,450 --> 00:03:02,490 So it is my main axis and top to bottom is my cross axis. 37 00:03:02,490 --> 00:03:10,650 So I need to change the direction to use column is going to be flexed direction to be column now to 38 00:03:10,650 --> 00:03:12,300 be on top of each other. 39 00:03:12,330 --> 00:03:18,630 So now the main axis is from top to bottom and then the cross axis is from left to right. 40 00:03:18,630 --> 00:03:24,420 So I can center eight using just five content and then the align items. 41 00:03:24,600 --> 00:03:32,250 If I make use of align items here to be central now I will look indeed at the center of the page and 42 00:03:32,250 --> 00:03:34,620 I want to give it a background color. 43 00:03:35,550 --> 00:03:39,560 Off hash tag three F's. 44 00:03:39,570 --> 00:03:48,450 And let's see what we have and this is what we have next is I need to give the entire body of the page 45 00:03:48,540 --> 00:03:49,920 a background color. 46 00:03:49,950 --> 00:03:53,070 So here we go inside the index. 47 00:03:53,070 --> 00:03:59,760 Remember, this is the roots because it's being called here and this is the index, the CSS. 48 00:03:59,760 --> 00:04:00,660 Oh, sorry, guys. 49 00:04:00,660 --> 00:04:02,040 I made a mistake. 50 00:04:02,340 --> 00:04:11,310 This code must be in the universal selector like this one, so I can reset the default behavior of the 51 00:04:11,310 --> 00:04:12,090 browser. 52 00:04:12,090 --> 00:04:13,560 And here we go. 53 00:04:13,560 --> 00:04:15,840 So let's target the body. 54 00:04:15,840 --> 00:04:25,020 And for the body, I want to give the background color of the body as hashtag F five, f five, f five. 55 00:04:25,200 --> 00:04:28,560 And next is I want to give it a font family. 56 00:04:28,560 --> 00:04:30,240 Global font family. 57 00:04:30,450 --> 00:04:33,360 So a font family here is going to be. 58 00:04:36,090 --> 00:04:44,880 So next is let's give the entire color of my text to be hashtag three, three, three and then font 59 00:04:44,880 --> 00:04:56,340 size is going to be as 1.2 ram and line height is going to be as 1.5. 60 00:04:56,340 --> 00:04:58,680 Now this is my global CSS. 61 00:04:58,680 --> 00:05:04,620 So if I check it out here, you can see that this is a background and this is the background of my nav 62 00:05:04,620 --> 00:05:11,250 bar and you can see it has been increased the font size for me and this is what I want. 63 00:05:11,340 --> 00:05:19,530 The next step is let's go ahead, let me close this one and let's focus on the nav bar after the background 64 00:05:19,530 --> 00:05:25,230 color, let's add padding, going to be zero and 20 pages. 65 00:05:25,560 --> 00:05:26,940 So save it. 66 00:05:26,940 --> 00:05:32,340 And now this is what we have next is I want to control the length. 67 00:05:32,340 --> 00:05:41,550 And remember, the length is inside this nav link and inside we have a parent called you L so our target, 68 00:05:41,550 --> 00:05:43,080 my nav. 69 00:05:43,080 --> 00:05:46,740 And then you see that I can control the children. 70 00:05:46,740 --> 00:05:51,270 So here we go now and then the other. 71 00:05:52,750 --> 00:05:56,020 Give it display or flex. 72 00:05:57,060 --> 00:06:00,870 And then let's tire to none. 73 00:06:01,350 --> 00:06:03,450 Now, let's see. 74 00:06:03,480 --> 00:06:03,970 Good. 75 00:06:03,990 --> 00:06:05,560 This is what we have now. 76 00:06:05,580 --> 00:06:07,100 There is no bulletin. 77 00:06:07,110 --> 00:06:11,000 So the next step is let's target the individual length. 78 00:06:11,040 --> 00:06:14,970 So now you l and then the airline. 79 00:06:15,030 --> 00:06:27,420 And let's give it a pattern of eight x 15 paisa x and then border radius is going to be as four pixels. 80 00:06:28,980 --> 00:06:32,490 Well, you can see that the links are moving away from it. 81 00:06:32,490 --> 00:06:33,420 Parent. 82 00:06:33,570 --> 00:06:39,320 Well, you can decide whether on the small screen you want them to be on top of each other. 83 00:06:39,330 --> 00:06:41,310 So let me show you that one, too. 84 00:06:41,340 --> 00:06:47,460 So on the nephew arrow, we can change the direction to column. 85 00:06:47,700 --> 00:06:52,230 And then we also need to control the pattern for this one. 86 00:06:52,230 --> 00:06:57,380 So let's remove the pattern for now and let's see, I think this one is okay. 87 00:06:57,390 --> 00:07:04,740 So the next step is I need to align everything at the center, align items to be centered, and then 88 00:07:04,740 --> 00:07:08,640 just file contents also at the center of the page. 89 00:07:08,640 --> 00:07:10,440 And now it looks good. 90 00:07:10,470 --> 00:07:15,660 Next step is let's remove the underline and let's change the color. 91 00:07:15,660 --> 00:07:17,490 So here we go. 92 00:07:17,520 --> 00:07:30,060 Let's target the now u l l i and the links inside the HTML and let's change text decoration to non and 93 00:07:30,060 --> 00:07:34,830 then color of hashtag three, three, three. 94 00:07:35,910 --> 00:07:37,470 And here you go. 95 00:07:37,500 --> 00:07:39,960 Yes, we have it as before. 96 00:07:40,140 --> 00:07:43,530 So on desktop, we are going to change the direction. 97 00:07:43,530 --> 00:07:46,710 But let's design for mobile first approach. 98 00:07:47,040 --> 00:07:53,160 You can see that for the final one, I have this Hoover effect, so let's add that one also. 99 00:07:53,370 --> 00:07:56,490 So now we are going to add some states. 100 00:07:56,490 --> 00:08:04,950 So let's go ahead and select now U, L, L, II, and then column and on Hoover. 101 00:08:04,950 --> 00:08:08,160 I want to add some background color to it. 102 00:08:08,160 --> 00:08:19,380 And the background color is going to be as this hash tag c, b, two, one, two, and then that is 103 00:08:19,380 --> 00:08:20,970 it and a color on it. 104 00:08:20,970 --> 00:08:24,770 I want to change the color to hashtag f, f, f. 105 00:08:25,060 --> 00:08:25,390 Okay. 106 00:08:25,470 --> 00:08:26,540 I think it's good. 107 00:08:26,550 --> 00:08:33,600 So let's go ahead and then do that and see and this is what we have where I think we can give it a pot 108 00:08:34,110 --> 00:08:35,159 on Hoover. 109 00:08:35,159 --> 00:08:43,020 So let me add that one here and say pardon on both sizes as five paste. 110 00:08:43,110 --> 00:08:44,490 So let's see. 111 00:08:45,180 --> 00:08:47,670 Yeah, I think, I think it's okay now. 112 00:08:47,670 --> 00:08:48,090 Good. 113 00:08:48,090 --> 00:08:49,440 The choice is yours. 114 00:08:50,040 --> 00:08:52,320 You can see that it's not all that smooth. 115 00:08:52,320 --> 00:08:56,210 So let's ask some transition on the L II. 116 00:08:56,250 --> 00:09:05,970 So transition is going to be or the properties are 0.3 seconds and is in out as that. 117 00:09:05,970 --> 00:09:06,990 So let's see. 118 00:09:07,440 --> 00:09:09,720 Yeah, I think the summary is okay. 119 00:09:09,750 --> 00:09:10,440 It's good. 120 00:09:10,440 --> 00:09:15,090 I think we can have some pattern around the I the lengths. 121 00:09:15,090 --> 00:09:18,630 So here let's give it a pattern bottom. 122 00:09:19,790 --> 00:09:22,990 Of, say, five Pacers. 123 00:09:23,260 --> 00:09:25,120 And let's have a look. 124 00:09:25,130 --> 00:09:27,110 Yeah, I think it's good now. 125 00:09:27,110 --> 00:09:28,460 Yes, it's good. 126 00:09:28,460 --> 00:09:29,690 Not great. 127 00:09:29,690 --> 00:09:33,350 So now we are done with the sets for the mobile. 128 00:09:33,350 --> 00:09:38,120 So now what about the desktop and let's go ahead and implement that. 129 00:09:38,120 --> 00:09:44,210 So here are going to be our media query for desktop media query. 130 00:09:45,640 --> 00:09:52,040 And any time you start developing your application using mobile first approach, this is a major query 131 00:09:52,060 --> 00:09:53,070 we're going to use. 132 00:09:53,080 --> 00:09:57,190 We are going to use many ways, but not maximum width. 133 00:09:57,220 --> 00:10:00,010 Maximum width is for desktop approach. 134 00:10:00,010 --> 00:10:07,120 So now I'm going to be add media and then you specify a function call and then objects. 135 00:10:07,360 --> 00:10:13,060 So inside this function of ADD media, we are going to pass in the media query. 136 00:10:13,150 --> 00:10:19,600 If you are developing the application using desktop approach, I'm going to use maximum dash width. 137 00:10:19,600 --> 00:10:24,400 But because we are developing for mobile first, we're going to be main with. 138 00:10:25,650 --> 00:10:33,000 And the minimum wage is supposed to be seven, six, $8, and you can use any breakpoints of your choice. 139 00:10:33,030 --> 00:10:33,620 Great. 140 00:10:33,630 --> 00:10:40,560 So now inside here, what you are going to do is that you are just going to change the direction of 141 00:10:40,560 --> 00:10:43,830 the UL to row and that is it. 142 00:10:43,830 --> 00:10:45,930 So going to be now. 143 00:10:47,550 --> 00:10:53,820 Now u l and then the flexed direction to row. 144 00:10:54,240 --> 00:10:58,830 And let's see if I save this one and I increase the browser. 145 00:10:58,830 --> 00:11:04,170 You can see the effect how able to write a few lines of code to get it done. 146 00:11:04,200 --> 00:11:08,010 That's why designing for mobile first is really important. 147 00:11:08,040 --> 00:11:11,640 Next is let me have some spacing around the links. 148 00:11:11,880 --> 00:11:20,200 So let's copy this one and inside the media query, let's paste it here and change everything and make 149 00:11:20,200 --> 00:11:24,030 this of padding to be ten pages. 150 00:11:24,060 --> 00:11:27,150 Now let's see I there we go. 151 00:11:27,150 --> 00:11:33,120 We have it and start now we are done with the number, the next video. 152 00:11:33,120 --> 00:11:36,690 Let's work with the actual header here. 153 00:11:36,840 --> 00:11:37,410 Great. 154 00:11:37,410 --> 00:11:38,700 Let's get into that.