Lesson Plan 4 Overview
This learning plan focused on responsive web design using CSS3 media queries. The goal was to ensure web pages are usable and visually appealing across phones, tablets, and desktops by implementing breakpoints, orientation settings, and scalable elements like images and videos.
Part 1: Bottom-Up Design Project Challenge
Project Description
This project applied mobile-first principles, focusing on building a homepage designed for smartphones before scaling up to larger screens. The layout integrates breakpoints for tablet and desktop, includes orientation-based styling, and demonstrates responsive video and image handling.
Link to Open Project
Reflection Statement
Designing mobile-first taught me how to prioritize content hierarchy and usability early on. Implementing orientation-based styles was a fun challenge, and I liked how flexible the layout felt when scaling up. This project really helped clarify how to structure CSS progressively using media queries.
Part 2: CSS Media Query Project
Project Description
This was a responsive upgrade of a previous Flexbox layout. The project now includes breakpoints for phone, tablet, and desktop devices, and uses orientation queries. I also ensured all images and the embedded YouTube video scale responsively across screen sizes.
Link to Open Project
View Responsive Flexbox Project
Reflection Statement
Refactoring my Flexbox layout to be responsive showed me just how powerful media queries are. Seeing how small changes in breakpoints affect layout helped me understand when to switch content flow or resize elements. I’m now more confident in handling image and video responsiveness, especially using percentages and aspect ratios.
Final Overall Reflection
This learning plan deepened my understanding of responsive web design. From setting the viewport to scaling media, I now feel equipped to build adaptable layouts from the ground up. The emphasis on a mobile-first approach helped reframe how I think about accessibility and performance. I'm walking away with sharper CSS skills and more confidence in building responsive pages.