00:00Assalam-o-Alaikum
00:02Today's topic is very interesting
00:06Maximum usage of our CSS
00:10which is the real purpose of web development
00:14We will see that in today's lecture
00:19We often think that
00:23Some websites run on a computer or laptop
00:31They are different
00:33But when they run on a mobile, they are different
00:36There are a lot of changes
00:38A lot of menus disappear
00:40And a lot of different functionalities come
00:43As we are talking about our computer screen
00:46So in this website, we have menu options
00:52They disappear in the mobile screen
00:55And a toggle button is placed in its place
00:58And when we press it, all the menus appear in the column
01:02Although in the desktop screen, they are in the row
01:06So all these things are possible
01:09Media queries are responsible for accessibility
01:13Which adjusts
01:16How to see different things in the mobile view
01:19How to see in tablets
01:21And how to see things in desktop screens
01:24So let's see all these things in our lecture today
01:27Media queries
01:29First of all, let's take our div
01:32And let's give it a class of container
01:37In this, we take anchor tags
01:454
01:48We have taken all the anchor tags
01:51And
02:09I have taken 4 anchor tags
02:12And let's give it a class
02:25For example, let's give it a class
02:28And let's style it
02:32link1
02:40link2
02:48link4
02:51link5
03:00link is a separate class
03:031,2,3,4 is a separate class
03:06All these have a common class link
03:09And 1,2,3,4 is a separate class for all these links
03:12So let's design it
03:15First of all, we take the link
03:18And
03:21We will also repeat our CSS a little
03:24So text decoration
03:27So first of all we
03:30We will finish the text decoration
03:33Let's do it
03:36So its underline is gone
03:39Let's take the body tag
03:42And let's call it
03:45font-family
04:04font-family
04:07font-family
04:10Let's change the color of the link
04:18Let's give it a class name
04:21link1
04:24background-color
04:31Let's make it a little lighter
04:38Let's change the color
04:45Now we have 4 different patterns
04:55Let's use media query
04:58To use media query
05:01We will see at the rate
05:04screen
05:07and
05:13max-width
05:24920px
05:34By default
05:37Styling
05:46920px
05:49Desktop
05:52Styling
06:04Styling
06:12Styling
06:21CSS
06:24Screen
06:27Screen
06:30Screen
06:33For laptops
06:36Minimum 769px
06:39And maximum 1024px
06:42For large screens
06:451025px-1200px
06:48And above 1200px
06:51So
06:54We will take 920px
06:57Or we will give it 1200px
07:00For desktop
07:03So let's do this
07:06When it comes to this screen
07:09Background-color
07:16Background-color
07:19Black
07:24And
07:30Background-color
07:33White
07:36For testing
07:39Refresh
07:42Right click
07:451100px
07:48Width
07:511200px
07:54Screen
07:57Screen
08:001200px
08:03Size
08:06Background-color
08:09Black
08:121200px
08:15Screen
08:181200px
08:21Width
08:241100px
08:27Background-color
08:30White
08:36700px
08:39Maximum
08:42Color
08:45Green
08:48400px
08:51Background-color
08:54Blue
09:05If we inspect this
09:08We will see that
09:11From 1100px to 1200px
09:14Our value
09:17Background-color will be black
09:20From 1100px to 1000px
09:23Our value will be red
09:26From 700px to 1000px
09:29Our value will be green
09:32From 400px to 1000px
09:35Our value will be blue
09:38Media queries work like this
09:41For example
09:44We take a media query
09:47We want to change
09:50Our display
09:53We have this
09:56In normal display
09:59But
10:02I want to
10:05In my mobile
10:08I will take it in full width
10:11Display
10:14Flex direction
10:17Call
10:20Refresh
10:23I can't see any difference
10:26But when I come to mobile screen
10:29I see it like this
10:32I will call it
10:35Text Align Center
10:38Text Align Center
10:41I will make it bigger
10:44Now it is back to its position
10:47But when I
10:50Come to mobile screen
10:53It will show me things like this
10:56After that
10:59For example
11:02I will take another display
11:05Wrapper
11:08I will take two display
11:14Item
11:17One
11:20I will give second display
11:23Class
11:26Item2
11:33I will give class
11:36Class
11:39H1
12:00Same
12:33is
14:24a
Comments