Responsive Web Design

Classes

Responsive Menu

Make a menu that responds to the page width. https://codepen.io/mortona42/pen/JjgdeoR

#Responsive Web Design, #Navigation

Responsive Images

#Responsive Web Design, #Media

Exercises

Style media library upload on mobile

#Theming, #Responsive Web Design

Resources

Learn Responsive Design

https://web.dev/learn/design

Web.dev responsive web design course.

#Responsive Web Design

Screen Resolution Stats Worldwide

https://gs.statcounter.com/screen-resolution-stats

Stats for screen sizes used to browse the web.

#Responsive Web Design, #Front End Development

RespImageLint Linters

https://ausi.github.io/respimagelint/docs.html

Guide for checking correct responsive image syntax.

#Responsive Web Design, #Media

Sometimes `sizes` is quite important

https://css-tricks.com/sometimes-sizes-is-quite-important/

srcset sizes.

#Responsive Web Design, #Media

object-fit | CSS-Tricks

https://css-tricks.com/almanac/properties/o/object-fit/

Using object-fit to place images in CSS.

#Responsive Web Design, #Media

Capping image fidelity on ultra-high resolution devices

https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/capping-i…

Twitter responsive images.

#Responsive Web Design, #Media

Responsive images | MDN

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Re…

Responsive images guide.

#Responsive Web Design, #Media

Subscribe to Responsive Web Design