CSS Technologies: LP3

Overview of Learning Plan 3

A simple responsive flexbox layout featuring a header, main area, two asides, and a footer.

I already knew flexbox, but this deepened my understanding of its properties. Still want to explore more advanced flexbox patterns.

A responsive website built with flexbox — includes a header, footer navigation, main section, and sidebar.

I learned flex-wrap, flex-basis, flex-grow, and flex-shrink. Still need to apply flex-basis more broadly in real projects.

A site redesign using CSS Grid — logo, header, nav, main content, aside, sponsors section, and footer laid out with grid-template-areas.

CSS Grid Layout

I had no prior grid knowledge. I learned columns, rows, and grid-template-areas from scratch. There's still a lot more to explore.

Took a basic CSS layout using floats and converted it to a flexbox layout.

I have experience converting float-based layouts to flexbox. I still need practice on more complex conversion scenarios.

Took my flexbox tutorial project and converted it into a CSS Grid layout.

This was my first time truly building a grid layout. I still need lots of practice with grid properties to build confidence.