CSS Layout

Overview

In Module 3 we began to look at Flexbox and Grid Layouts. We learned about the differences between float, flex, and grid layouts and how to apply and use various properties for each layout style.

Sample Flexbox Layout

Description

This project was aimed to help our understanding of how to create a flexbox layout and the properties that can be used.

Practice

Flexbox Layout Sample

Reflection

Flexbox was completely new to me, in this sample I struggled getting some of my styling to work, so I focused on learning the flexbox properites. By focusing more on flexbox itself, and not how pretty it was, I was able to gain some confidence with the process.

Flexbox Tutorial Practice

Description

For this assignment, we were given two tutorial options to choose from. After deciding on one, we were to complete the tutorial and post our result. I chose Tutorial A, which is a beautiful flexbox website for The Grand Hotel.

Practice

The Grand Hotel Flexbox Tutorial

Reflection

I had a lot of fun doing this tutorial! And it really helped drive home the flexbox concepts. I knew little about flexbox but felt good with my knowledge by the time this site was finished. I like the video presentation, I feel I get more tips and hints by seeing and doing than just reading how to do it.

CSS Grid Layouts - 5 Project Series

Description

In this portion of Module 3, we were givena resource with 5 grid-layout projects to complete. The resource and projects were useful in becoming more familiar with using a grid layout.

Practice

Reflection

These tutorials were somewhat challenging, I was having a hard time wrapping my head around Grid. It was fun and at time confusing but by the time I reached the end of the tutorials I feel like I had a better grasp of grids.

Conversions

Description

This portion of the module was about converting. The goal was to be able to convert basic CSS to flex and flex to grid.

Practice

Basic CSS to Flexbox

Flexbox to Grid

Reflection

I expected the conversions to be easier than they were. I still need to do more studying on understanding everything they have to offer and how to use them. It was rewarding when something went the way I expected!