If you want to play around with the styles you saw in class:

1. Open index.html in your browser or open a Go Live server in VSCode.
2. Open any of css files and make some changes!
   • Make sure to uncomment the line in the .wrapper selector where it says display: block;.
3. Make some changes. When you save the CSS, the browser will update. ___ # LOs ## Box Model and Positioning
4. Describe how:
   • padding and margins work in the box model
   • the browser positions a fixed positioned element
   • the browser positions a relatively positioned element
   • the browser positions absolutely positioned elements with and without a relatively positioned parent element
   • the browser positions a static positioned element
5. Identify elements rendered with specific padding and margin settings
6. Apply padding and margins to HTML elements to achieve a desired layout
7. Apply positioning settings to elements (fixed, relative, and absolute) to HTML elements to achieve a desired layout
8. Identify which HTML elements have a default “inline” display value
9. Identify which HTML elements have a default “block” display value
10. Describe and use z-index positioning of elements

Media Queries

1. Identify the different types of media that a media query can target
2. Explain how the media features (and prefixed subfeatures) of “aspect ratio”, “height”, “orientation”, and “width” are applied
3. Use media queries to change the styles of content in an HTML page to achieve a desired effect

Flexbox

1. Explain how flexible box layout lays out elements
2. Use the flex property to specify grow, shrink, and basis values.
3. Use the flex-direction property to direct the layout of the content
4. Use the flex-wrap property to affect the wrap of content layout within an element using flexible box layout
5. Use align-self, justify-content, and align-items to change the way that children elements are laid out in a flexible box layout
6. Use the order property to change the order in which elements will appear in a flexible box layout

Grid

1. Explain how grid layout lays out elements
2. Use the grid-template-columns, grid-template-rows, and grid-template properties to specify the layout of the grid using relative and absolute measures
3. Use grid-template-areas to label areas of a grid and grid-area to assign an element to the area
4. Use grid-column-gap, grid-row-gap, and grid-gap to set the “gutter” areas between elements in a grid layout
5. Use grid-column-start/grid-column-end and grid-row-start/grid-row-end to create spans across multiple columns and rows with positive integers, negative integers, and in conjunction with the “span” operator
6. Explain and use the shorthand versions of grid-column and grid-row to define how an element will span a grid layout
7. Use the order property to change the default order in which items are laid out
8. Explain and use the “fr” unit of measure
9. Use justify-items, align-items, justify-content and align-content to layout items in each grid area

External Resources:

• FlexBox Guide
• Grid Guide
• Standard Media Queries