Responsive Web Design | 6 Effective Tips - CSS Tutorial 102

Notes for You:: Responsive Web Design | 6 Effective Tips - CSS Tutorial 102
6 Effective Tips on How to Make a Website Responsive.
- designing web pages which are displayed properly in all devices of different screen sizes.

Point 1: Make web pages mobile friendly
- add to head section: <meta name="viewport" content="width=device-width, initial-scale=1.0">

Point 2: Normalize web pages
*{margin:0px; padding:0px; font-family: arial; box-sizing:border-box; etc.}

Point 3: Use media queries
- media queries detect screen size and execute respective code
- use 5 media queries targeting 5 different screen sizes

/* Extra small screen devices (phones, 600px and down) */
@media screen and (max-width: 600px) {...}
OR

/* Small screen devices (large phones and portrait tablets, 600px and up) */
@media screen and (min-width: 600px) and (max-width:768px) {...}
OR

/* Medium screen devices (landscape tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width:992px) {...}
OR

/* Large screen devices (laptops/desktops, 992px and up) */
@media screen and (min-width: 992px) and (max-width:1200px) {...}
OR

/* Extra large screen devices (large laptops and desktops, 1200px and up) */
@media screen and (min-width: 1200px) {...}
OR

Note: most commonly designers use 3 css files:

Point 4:
- Set width of HTML elements in %
- use width property

Point 5:
- Set height of HTML elements in px
- use min-height property

Point 6:
- Set font size of HTML elements in vw unit

Note:
- replace < with less-than symbol.
- replace > with greater-than symbol.

=========================================

Follow the link for previous video:
CSS Flexbox Properties Part 2 | CSS Flex Item Properties - CSS Tutorials 101

=========================================

CSS Tutorials Playlist:-

=========================================
Watch My Other Useful Tutorials:-

HTML Tutorials Playlist:-

JavaScript Tutorials Playlist:-

jQuery Tutorials Playlist:-

=========================================

► Subscribe to our YouTube channel:

► Visit our Website:

=========================================
Hash Tags:-
#ChidresTechTutorials #CSS #CSSTutorial