1
00:00:02,220 --> 00:00:04,580
Welcome to this module.

2
00:00:04,580 --> 00:00:08,150
In this module, we will dive into the concept

3
00:00:08,150 --> 00:00:11,650
of responsive web design.

4
00:00:11,650 --> 00:00:13,680
Up to this point in the course

5
00:00:13,680 --> 00:00:16,210
all our websites that we created,

6
00:00:16,210 --> 00:00:21,070
were built in a way that they look good on a desktop device,

7
00:00:21,070 --> 00:00:24,343
on a laptop, on a normal computer so to say.

8
00:00:25,240 --> 00:00:29,500
Things are a bit more complex these days though,

9
00:00:29,500 --> 00:00:33,970
users, people who want to access your real world website

10
00:00:33,970 --> 00:00:37,270
can use different devices to do so.

11
00:00:37,270 --> 00:00:41,170
Users might use a mobile phone, a tablet,

12
00:00:41,170 --> 00:00:43,670
a laptop, or a desktop computer

13
00:00:43,670 --> 00:00:47,090
to get the information on your website.

14
00:00:47,090 --> 00:00:50,080
Our goal as web developers is to make sure

15
00:00:50,080 --> 00:00:54,240
that no matter which device our users are using,

16
00:00:54,240 --> 00:00:57,990
our users have the best possible user experience.

17
00:00:57,990 --> 00:01:00,250
This means the information is presented

18
00:01:00,250 --> 00:01:04,510
in a visually appealing way on all these devices.

19
00:01:04,510 --> 00:01:09,110
And this goal can be achieved with responsive web design.

20
00:01:09,110 --> 00:01:11,000
Therefore in this module,

21
00:01:11,000 --> 00:01:13,810
we'll dive into the whats and whys

22
00:01:13,810 --> 00:01:15,870
behind responsive web design,

23
00:01:15,870 --> 00:01:18,093
so what it is and how we can use it.

24
00:01:19,120 --> 00:01:22,660
We'll explore the concept of media queries.

25
00:01:22,660 --> 00:01:26,380
These media queries allow us to specifically change

26
00:01:26,380 --> 00:01:29,280
the look or the layout of our website,

27
00:01:29,280 --> 00:01:32,853
depending on the size of a specific device.

28
00:01:33,900 --> 00:01:38,210
And we'll also learn what a so-called site drawer is.

29
00:01:38,210 --> 00:01:40,440
It's a specific layout,

30
00:01:40,440 --> 00:01:44,830
a specific way of displaying information on mobile devices

31
00:01:44,830 --> 00:01:47,980
and how we can implement this specific layout

32
00:01:47,980 --> 00:01:51,053
just by using HTML and CSS.

33
00:01:52,220 --> 00:01:54,140
These are the core concepts

34
00:01:54,140 --> 00:01:56,600
we will dive into in this module,

35
00:01:56,600 --> 00:01:58,573
therefore, let's get started.