Responsive CSS and flexbox: Prep

Learning outcomes

• What is Responsive Web Design?
• Viewport
• Flexbox
• Media queries
• Responsive media

Pre-sessional activities

Priority

Robbins, Jennifer; "CSS Layout with Flexbox and Grid"; Learning Web Design : A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics.

Robbins, Jennifer; "Responsive Web Design"; Learning Web Design : A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics.

One Month "What is Responsive Web Design", 1 min 58 seconds, 13 February 2015 (ignore end bit about frameworks, not using frameworks for this course's assessment).

Yellow Systems "What is Responsive Web Design", 2 mins 29 seconds, 24 January 2023.

Coding2GO "CSS Flexbox Tutorial for beginners", 12 mins 20 seconds, 22 April 2023.

Cem Eygi Media "CSS Media Queries for Beginners: Breakpoints, Max-Width, Min-Width, and More", 6 mins 46 seconds, 8 April 2020.

A Designer Who Codes "How to Make Images Responsive in HTML & CSS", 8 mins 17 seconds, 26 January 2021.

Also recommended

Frain, Ben; "Chapter 3: Media Queries – Supporting Differing Viewports"; Responsive Web Design with HTML5 and CSS : Develop Future-Proof Responsive Websites Using the Latest HTML5 and CSS Techniques, 3rd Edition

Frain, Ben; "Chapter 4: Fluid Layout, Flexbox, and Responsive Images"; Responsive Web Design with HTML5 and CSS : Develop Future-Proof Responsive Websites Using the Latest HTML5 and CSS Techniques, 3rd Edition