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