Resources

Starter folder (download and rename)

HTML boilerplate

Codepens so far

Flex 1/3 col grid
Remember .ROW then .COL then .CONTENT
flex: GROW SHRINK WIDTH; flex:0 0 33.333%;

Recap on selectors and targeting elements correctly.
Remember to reuse code as much as possible

Mix of cols
Full site
Image layout
Using just flex you can move content around easily. This aligns everything to the bottom of each image, and then sometimes aligns self__top to the top.

Center anything
You can easily center something inside a flex box. Notice the use of vh and vw instead of px this is viewport height and viewport width. Makes it exactly 100% hight and 100% wide

Facebook layout with flex

Slide in menu

Rollover with jQuery

Rollover card flip
A few divs involved, a card container, the card itself and then 2 sides. You can add the positioning to the card-container.

Rollover card flip within layout
A good example of using flex with the card flip and create a grid layout.

General

HyperText Markup Language
Character Code
CSS Tricks
Adobe Color CC
HTML Color Names

Learning

Learn Layout
Codecademy
Shay Howe's Guide to HTML & CSS
Codepen

Google docs

AM CLASS LINKS Google doc
PM CLASS LINKS Google doc

AM CLASS QUESTIONS Google doc
PM CLASS QUESTIONS Google doc