This is a simple responsive flexbox layout with a header, main area, two asides, and a footer.
Sample Flexbox LayoutI previously knew how to code a flexbox layout. I learned how to use different properties for a flexbox layout. I still need to learn other ways to code a flexbox layout.
In this tutorial, I made a responsive website using flexbox. The website contains a header and footer navigation, a main section, and a sidebar.
Flexbox TutorialI have previously used Flexbox to design websites. I prefer using flexbox over floats and positioning. I learned how to use flex-wrap, flex-basis, flex-grow, and flex-shrink. I still need to learn how to use flex basis in other projects.
This project was a site redesign using CSS grid.
CSS Grid LayoutI had no previous knowledge of how to code a grid template. I learned how to code a grid layout with a logo, header, navigation, main content, aside, sponsors section, and footer. I also learned how to use column, rows, and grid-template-areas. I still need to learn more grid layout properties.
I took my sample basic CSS layout and converted it to a flexbox layout.
Basic CSS LayoutI have experience replicating floats and positioning layouts to flexbox. I learned how to convert an existing website to flexbox. I still need to learn how to complete a more in depth conversion.
I took my flexbox tutorial and converted it into a grid layout.
Flexbox LayoutI previously learned a little about grid. I have never coded a grid layout before. I learned how to create a layout using grid and how to convert a flexbox layout into a grid layout. I still have to learn how to use the grid properties and I need practice coding layouts using grid.