CSS Media Queries in One Video | Responsiveness in CSS - video Dailymotion

Web Artificer

In this tutorial i will show you how you can use media queries in CSS for Responsive Web Design. How you can make responsive websites for cross platforms like Desktop screens, Laptops and mobile screen. #cssmediaqueries #cssmediaqueriesresponsivedesign #cssmediaqueriestutorial #cssmediaqueriesexplained #cssmediaqueriesmin-widthandmax-width #cssmediaqueriesforallmobiledevices #cssmediaqueriesnotworking #cssmediaqueriesbrocode #cssmediaqueriesprint #cssmediaqueriesresponsivedesigntutorial #cssmediaqueriesbreakpoints #cssmediaqueriesnetninja #cssmediaqueriesnavigationbar #cssmediaqueriestagalog #cssmediaqueriesresponsivedesignintamil #cssmediaqueriesand #cssmediaqueriesandresponsivewebdesigntutorialforbeginners #cssmediaqueriesintamil #cssmediaqueriesinhindi #htmlandcssmediaqueries #cssmediaqueriesintelugu #cssmediaqueriesindetail #cssmediaqueriescodewithharry #learncssmediaqueryin7minutes

Transcript

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

CSS Media Queries in One Video | Responsiveness in CSS

Category

Transcript

Be the first to comment

Recommended