What I Discovered From The Course "Conquering Responsive Layouts" by Kevin Powell

#responsive #webdev #css #html

Always try to follow these key points to design responsive layout.

1.Do not use fixed width or height.

2.if needed, use percentage(%) for width or max-width property.

.container{
 width:80%;
 max-width:45rem;
}

.container{
 width:min(80%,45rem);
}

3.if needed, use min-height property.

4.Avoid using px unit, try to use em,rem,ch,ex unit.

5.Ensuring make the image responsive.

img{
 max-width:100%;
}

6.@media query
->Always try to put media query at the very last of css.
->Always use media query from smallest to biggest devices.
->To reduce complexity, use less number of media query.
->The less break points(@media query) you have, the easier the webpage to maintain.

Summery

Website are responsive before we right any css.
When our layouts run into issues, we're at fault in our css style, we have done wrong in our own css.
Desktop-first approach is the main culprit.
Writing mobile-first css tends to be the easier approach, even if you have a desktop layout.

N.B: The course is completely free, you can find the course from this link
course link