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
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
Sometimes `sizes` is quite important
https://css-tricks.com/sometimes-sizes-is-quite-important/

srcset sizes.

#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