Lesson Plan 3 Overview
This module explored modern CSS layout techniques, focusing on Flexbox and Grid. The goal was to understand how each layout system works individually and how they can be combined for greater flexibility.
Sample Flexbox Layout
Project Description
Created a webpage using the Flexbox layout method to structure and align elements efficiently.
Link to Project
View ProjectReflection Statement
Prior to this project, I understood Flexbox conceptually but had limited experience applying it. Through this lesson, I learned how powerful Flexbox is for alignment and responsiveness. I struggled initially with managing space distribution, but experimenting with different flex properties helped solidify my understanding.
Flexbox Tutorial Practice
Project Description
Worked through a guided Flexbox tutorial to reinforce layout structuring principles.
Link to Project
View ProjectReflection Statement
This tutorial gave me hands-on experience with different Flexbox properties, including justify-content and align-items. One challenge I faced was making sure items were properly aligned in various viewport sizes. This exercise highlighted the importance of using flex-wrap effectively.
CSS Grid Layout Conversions
Project Description
Converted multiple layouts into CSS Grid, demonstrating control over row and column placements.
Links to Projects
Float Layout Flexbox Layout CSS Grid LayoutReflection Statement
Understanding Grid layouts helped me realize how much control it offers over spacing and structure. The biggest challenge was properly defining rows and columns while ensuring responsiveness. This project helped me see when Grid is preferable over Flexbox.
Final Overall Reflection on Lesson Plan 3
This module deepened my understanding of modern CSS layouts. Flexbox is great for flexible alignment, while Grid provides precise structural control. Through these projects, I developed a clearer strategy for deciding which method to use in different scenarios.