1
00:00:08,860 --> 00:00:15,850
All right, let's get started with responsive design while building this project.

2
00:00:16,180 --> 00:00:22,540
What we are lacking is what we call media query because we haven't talked about it.

3
00:00:22,690 --> 00:00:26,230
So in this video, let's talk about media query.

4
00:00:26,230 --> 00:00:30,190
And then after that, we start building this project.

5
00:00:30,280 --> 00:00:35,260
So as always, I have provided a start up widget for you.

6
00:00:35,440 --> 00:00:42,610
If you open it, we have the images folder and this contains all the images that we are going to use

7
00:00:42,610 --> 00:00:44,090
in our project.

8
00:00:44,110 --> 00:00:47,470
And if you want to use your own images, why not?

9
00:00:47,470 --> 00:00:50,050
You can go ahead and use your own images.

10
00:00:50,320 --> 00:00:57,520
And inside the HTML you can see that I have added font or some icon and this one too.

11
00:00:57,550 --> 00:01:06,490
We have covered and how to use icons and I've added Google fonts also and I will show you how I use

12
00:01:06,490 --> 00:01:14,410
Google font also is pretty simple and I have connected my CSS and I have opened it as that.

13
00:01:14,410 --> 00:01:19,990
You are going to use this one as a route map to build this empty page.

14
00:01:20,140 --> 00:01:24,400
So the first concept is what is media query?

15
00:01:24,580 --> 00:01:32,920
So media query simply means is a way of implementing what is called responsive design, and it can be

16
00:01:32,920 --> 00:01:36,670
achieved using what is called breakpoint.

17
00:01:36,670 --> 00:01:38,890
So what is breakpoint?

18
00:01:38,890 --> 00:01:48,910
Well, breakpoints are values that we add in our code so that the website contains responds to those

19
00:01:48,910 --> 00:01:53,100
points depending on the device screen size.

20
00:01:53,110 --> 00:02:02,110
So we have example of these break points ranging from small devices to big devices.

21
00:02:02,230 --> 00:02:08,169
So I think it's better for me to show you with code than explaining to you in this way.

22
00:02:08,289 --> 00:02:11,110
So let's get started and let me show you with code.

23
00:02:11,110 --> 00:02:13,150
In that way you better understand.

24
00:02:13,150 --> 00:02:15,250
So open this CSS.

25
00:02:15,250 --> 00:02:18,730
So let's start with playground.

26
00:02:18,940 --> 00:02:24,460
So the first thing that we need to understand is what we call the break point.

27
00:02:24,550 --> 00:02:35,500
So break points are values that we add in our code that's going to tell the browser to start rearranging

28
00:02:35,500 --> 00:02:39,300
the content when that particular point meet.

29
00:02:39,310 --> 00:02:41,590
So back to the final project here.

30
00:02:41,590 --> 00:02:43,780
Let me show you what is called breakpoints.

31
00:02:43,810 --> 00:02:46,840
Now, let me reduce the browser.

32
00:02:46,900 --> 00:02:52,990
When we say breakpoint is a code, like I said, we are going to add using CSS.

33
00:02:52,990 --> 00:02:53,970
So have a look.

34
00:02:53,980 --> 00:03:01,990
Now, if I reduce the screen size, when you see that some contents are start moving around, that is

35
00:03:01,990 --> 00:03:04,270
a big point we are talking about now.

36
00:03:04,270 --> 00:03:07,630
Have a look when it goes to small screen sizes.

37
00:03:07,660 --> 00:03:10,780
Now have a look at a number and you can see.

38
00:03:10,780 --> 00:03:14,050
So at this point, this is a break point.

39
00:03:14,050 --> 00:03:21,280
So at this value, then the items or the content start moving around like that.

40
00:03:21,280 --> 00:03:22,210
Have a look.

41
00:03:22,240 --> 00:03:29,710
If I increase the width of the browser now you can see that the elements are starting moving.

42
00:03:29,710 --> 00:03:37,150
And this is a big point that elements start moving around and we are going to implement that with code.

43
00:03:37,450 --> 00:03:43,960
So to be able to understand that, we need to know the breakpoints of certain devices.

44
00:03:43,960 --> 00:03:47,500
So these are examples of breakpoints.

45
00:03:47,500 --> 00:03:52,570
So here on the mobile devices, this is the value.

46
00:03:52,990 --> 00:03:59,260
It ranges from 320 pixels to 480 pixels.

47
00:03:59,260 --> 00:04:08,170
So between this value, it represents the mobile devices and on iPads and tablets.

48
00:04:08,170 --> 00:04:22,450
So iPads and tablets, the value is equal to 481 PC 6 to 7 six eight P6.

49
00:04:22,900 --> 00:04:27,400
And this is for the iPads and tablets.

50
00:04:27,400 --> 00:04:30,790
So what about small screen and laptops?

51
00:04:30,790 --> 00:04:37,450
So let's see if our small screens and laptop is going to be from way seven, six, nine.

52
00:04:37,450 --> 00:04:42,490
So small screen and the laptops.

53
00:04:43,400 --> 00:04:44,680
Laptops.

54
00:04:45,560 --> 00:04:58,730
The big point for that is equal to seven, six nine paddocks to ten 2424 peasants represent the laptop

55
00:04:58,730 --> 00:05:08,660
screens and if want to have large screens and then with desktop this is going to be the value desktops

56
00:05:08,660 --> 00:05:12,380
and then the large screens.

57
00:05:12,950 --> 00:05:24,950
So the value for this one is equal to 1025 PCs to 1200 parsecs.

58
00:05:25,040 --> 00:05:32,330
And if you want the extra, extra, extra large screens like television.

59
00:05:32,330 --> 00:05:37,700
So TV here and extra screens.

60
00:05:39,600 --> 00:05:41,580
Extra screens.

61
00:05:42,270 --> 00:05:57,900
Let's look at the breakpoint value is 1 to 0 one PC to more to more we can add let's say up to 9999999

62
00:05:57,950 --> 00:05:58,700
POSIX.

63
00:05:58,710 --> 00:06:05,370
But guys, trust me, we are going to use what is called mobile first approach design.

64
00:06:05,520 --> 00:06:13,470
When we say mobile, first approach is simply means that we need to design our websites on a mobile

65
00:06:13,470 --> 00:06:20,610
device first, meaning we need to target the mobile device first and that is what we are going to follow.

66
00:06:21,000 --> 00:06:26,310
Then the next step is how can we write media query?

67
00:06:26,550 --> 00:06:34,830
Remember, media query is a function that is going to take in any of this break point.

68
00:06:35,100 --> 00:06:42,030
But before we get into that, we have two ways of implementing responsive design.

69
00:06:42,330 --> 00:06:47,310
The first one is what we call mobile first approach.

70
00:06:47,340 --> 00:06:52,830
The next approach is what we call desktop first.

71
00:06:54,260 --> 00:06:55,220
Approach.

72
00:06:55,550 --> 00:06:58,160
So what is mobile first approach?

73
00:06:58,190 --> 00:07:07,160
It means that when designing a website you need to target the mobile first, meaning how your content

74
00:07:07,160 --> 00:07:10,940
is going to be laid out on the mobile first.

75
00:07:10,970 --> 00:07:14,150
That is what you call the mobile first approach.

76
00:07:14,180 --> 00:07:16,300
Likewise, desktop.

77
00:07:16,310 --> 00:07:20,450
So which of these one is the best way to go?

78
00:07:20,660 --> 00:07:25,910
Well, the best way to go is what we call the mobile first approach.

79
00:07:26,240 --> 00:07:33,780
Even most of the CSS frameworks or libraries like Bootstrap, the UX, what is called mobile first approach.

80
00:07:33,800 --> 00:07:37,840
So what is the advantages of using this one?

81
00:07:37,850 --> 00:07:40,170
If you are using mobile first approach?

82
00:07:40,190 --> 00:07:43,940
You are going to write less code.

83
00:07:44,150 --> 00:07:51,800
But if you want to go by desktop approach, unless you always test and changing the element, how it

84
00:07:51,800 --> 00:07:54,810
behaves on a mobile and then on desktop.

85
00:07:54,830 --> 00:07:57,390
So this is the best way to go.

86
00:07:57,410 --> 00:08:01,130
So how can we develop mobile first approach?

87
00:08:01,160 --> 00:08:02,060
Here we go.

88
00:08:02,060 --> 00:08:07,000
And we are going to use the media query function to get it done.

89
00:08:07,010 --> 00:08:12,590
So let's start with desktop first and I will show you what I mean.

90
00:08:12,740 --> 00:08:23,300
Now to be able to create media query, we bring in AD and then media and you call it as a function and

91
00:08:23,300 --> 00:08:29,840
then we carry basis and this is like a function in JavaScript, right?

92
00:08:30,020 --> 00:08:30,550
Good.

93
00:08:30,560 --> 00:08:37,520
So inside the body here we pass in our break point inside.

94
00:08:37,520 --> 00:08:40,710
So which big point are we going to use?

95
00:08:40,730 --> 00:08:46,560
So if you want to start with the desktop approach, then this is a syntax.

96
00:08:46,580 --> 00:08:51,680
First you bring in the max, meaning the maximum width.

97
00:08:52,010 --> 00:09:02,510
So if the maximum width is equal to six, seven, five or any of these ones, let's use, let's say

98
00:09:02,510 --> 00:09:08,120
the seven six, eight, seven, six, eight POSIX.

99
00:09:08,120 --> 00:09:15,760
And inside the function body, we can change any elements using CSS properties.

100
00:09:15,770 --> 00:09:21,380
So here I will say you can change any.

101
00:09:22,610 --> 00:09:23,390
Elements.

102
00:09:25,910 --> 00:09:26,990
Properties.

103
00:09:27,830 --> 00:09:29,240
Using CCIS.

104
00:09:29,450 --> 00:09:30,050
Okay.

105
00:09:30,140 --> 00:09:35,570
So let me explain the syntax here, which is the breakpoint.

106
00:09:35,570 --> 00:09:37,200
So what does it mean?

107
00:09:37,220 --> 00:09:45,110
Remember, as soon as we bring in max that width, meaning the maximum width, it means that we are

108
00:09:45,110 --> 00:09:49,400
developing our application using desktop approach.

109
00:09:49,490 --> 00:10:00,140
So this one simply means that if the maximum width of your page is equal to or less than, then the

110
00:10:00,140 --> 00:10:02,930
code inside here is going to change.

111
00:10:03,260 --> 00:10:09,890
Meaning that if it is above which is desktop, then we are not going to change anything here.

112
00:10:09,890 --> 00:10:12,980
Meaning we are on what large screen?

113
00:10:13,100 --> 00:10:21,950
So at this point if I make use of body meaning, I want to change the body background to read.

114
00:10:22,250 --> 00:10:24,860
Now let's save it and let's check it out.

115
00:10:25,220 --> 00:10:33,440
You can see that nothing seems to be happening simply because we say that when the maximum weight of

116
00:10:33,440 --> 00:10:40,760
my page is less than or equal to seven 6/8, then I won't apply that.

117
00:10:40,760 --> 00:10:43,550
But at this point it is more than 768.

118
00:10:43,550 --> 00:10:46,280
So this is on a desktop first.

119
00:10:46,280 --> 00:10:51,500
So at this point any code or write in here will never take effect.

120
00:10:51,800 --> 00:10:59,990
But if I reduce the browser and now have a look, you can see that at this point it is less than or

121
00:10:59,990 --> 00:11:02,150
equal to seven, six, eight.

122
00:11:02,180 --> 00:11:09,800
Now things have started changing, so I can change any element on the page using this syntax.

123
00:11:09,800 --> 00:11:18,980
So let's say that inside my HTML, let's add inside the body here, let's add h one and says that welcome.

124
00:11:23,090 --> 00:11:25,160
Now back to the media query.

125
00:11:25,190 --> 00:11:34,160
I can say that when the minimum width of my page is less than or equal to seven, six, eight, then

126
00:11:34,160 --> 00:11:37,850
I want to change the color to white.

127
00:11:38,420 --> 00:11:39,980
Now let's see.

128
00:11:40,190 --> 00:11:42,590
I see that at this point it is not white.

129
00:11:42,590 --> 00:11:48,290
But as soon as I reduce the browser, now you can see that things have started changing.

130
00:11:48,440 --> 00:11:55,760
So this is what we call desktop approach, meaning that we have finished designing on the page because

131
00:11:55,760 --> 00:11:57,260
we don't want to change anything.

132
00:11:57,350 --> 00:12:03,150
But when it gets the smaller size like this one, then I won't develop the mobile too.

133
00:12:03,170 --> 00:12:06,020
So at this point, this is a desktop first.

134
00:12:06,020 --> 00:12:09,280
And secondly, I go ahead and design the mobile first.

135
00:12:09,290 --> 00:12:13,900
So the best way to go is to use the mobile first approach.

136
00:12:13,910 --> 00:12:15,700
So this how you're going to write.

137
00:12:15,710 --> 00:12:18,920
So instead of maximum, you're going to use men.

138
00:12:18,920 --> 00:12:26,900
So this means that I'm targeting a device which is more than seven, six, eight, seven, six, eight

139
00:12:26,900 --> 00:12:27,860
and above.

140
00:12:27,890 --> 00:12:30,920
That's where I want to start moving things around.

141
00:12:30,950 --> 00:12:38,030
Now you can see that as soon as I go to the mobile first, nothing is happening but more than seven,

142
00:12:38,030 --> 00:12:38,810
six, eight.

143
00:12:38,840 --> 00:12:44,990
You see, things have started changing and this is what you call the mobile first approach.

144
00:12:44,990 --> 00:12:47,660
And this is a pattern that we are going to use.

145
00:12:47,750 --> 00:12:53,410
Most times we narrow down the break point to six, seven, five.

146
00:12:53,420 --> 00:12:54,740
So the choice is here.

147
00:12:54,740 --> 00:12:58,540
So for us it is between 48127, six, eight.

148
00:12:58,550 --> 00:13:00,230
You can select any number.

149
00:13:00,410 --> 00:13:03,480
So that is it about the media query.

150
00:13:03,500 --> 00:13:09,680
So in the next video, let's get started with the project and see how we can make use of media query

151
00:13:09,680 --> 00:13:11,150
and Flexbox.