CSS warm up challenges

StevenLawsonCodePenCSSWarmUp.md

CSS Warm Up challenges

Challenge 1

Went with absolute positioning. Trickiest thing was getting rid of the margin.

Challenge 1

Challenge 2

Think I got it pretty good: the question I had about this one is how responsiveness changes it, though I know we haven't gotten to responsiveness yet.

Challenge 2

Challenge 3

Used margin-right: auto and margin-left: auto for the majority of the centering. A bit hacky, but it's better than text-align, right?!!

Challenge 3

Challenge 4

Position absolute all the way! To offset the grey div, I used 25px from the top and left.

Challenge 4

Challenge 5

Not too bad: key for me was to use absolute positioning, then just invert what I did for challenge 2.

Challenge 5

Challenge 6

Big ol whale of a grey div! My technique here was to nest the two smaller divs in the big grey one.

Challenge 6

Challenge 7

For the smaller div, position: absolute, and bottom: 0, right: 0.

Challenge 7

Challenge 8

Just had to modify 7 a bit, this time in the other corner.

Challenge 8

Challenge 9

Started messing around with percents in my top and left absolute positioning.

Challenge 9

Challenge 10

Continued with percents, and trying to think about the big grey div as the parent element.

Challenge 10

Challenge 11

Starting mixing and matching percents for positioning and px for div height and width. Is that weird?

Challenge 11

Challenge 12

Thought this would be a good one to use relative positioning for the child divs...And it WAS.

Challenge 12

Challenge 13

Positioned the first div with absolute, then the rest with relative. This was frustrating, even though I was able to acheive the desired result; lots of guessing and checking. Must be a more precise way.

Challenge 13

Challenge 14

Pretty easy with absolute positioning!

Challenge 14

Challenge 15

Challenge 15