<commit_before># Positioning Reflection

- How can you use Chrome's DevTools inspector to help you format or position elements?

It's great because you can plug in your CSS and then manipulate it live to see the result! All you have to do is change the positioning properties in the inspector.

- How can you resize elements on the DOM using CSS?

Just by altering the width and height properties in the inspector.

- What are the differences between Absolute, Fixed, Static, and Relative positioning? Which did you find easiest to use? Which was most difficult?

Static is the default and isn't affected by top, bottom, left or right.
Relative means the element is positioned relative to it's normal position. So the top, bottom, left and right elements move it that many pixels/ems/%s from its normal position.
Fixed always stays in the same place, even if the page is scrolled.
Absolute is like fixed, but is positioned relative to an ancestor.

I found absolute the easiest, but there are a lot of scenarios where I can see fixed being more useful. I'm still a little bit fuzzy on positioning, and had some trouble with relative.


- What are the differences between Margin, Border, and Padding?

Padding is inside the border and determines how close the content is to the border. The border is the outer edge, defining the end of the element. Margin is outside of the border and determines how close this element will be to others or the edge of the page.

- What was your impression of this challenge overall? (love, hate, and why?)

I liked it - it was different from what we've been doing but I found it very helpful to just drill exercises for a while and work hands-on.

![1. Color](../imgs/1-color)

![2. Column](../imgs/2-column)

![3. Row](../imgs/3-row)

![4. Equidistant](../imgs/4-equidistant)

![5. Squares](../imgs/5-squares)

![6. Footer](../imgs/6-footer)

![7. Header](../imgs/7-header)

![8. Sidebar](../imgs/8-sidebar)

![9. Get Creative!](../imgs/9-get-creative)<commit_msg>correct image file path<commit_after># Positioning Reflection

- How can you use Chrome's DevTools inspector to help you format or position elements?

It's great because you can plug in your CSS and then manipulate it live to see the result! All you have to do is change the positioning properties in the inspector.

- How can you resize elements on the DOM using CSS?

Just by altering the width and height properties in the inspector.

- What are the differences between Absolute, Fixed, Static, and Relative positioning? Which did you find easiest to use? Which was most difficult?

Static is the default and isn't affected by top, bottom, left or right.
Relative means the element is positioned relative to it's normal position. So the top, bottom, left and right elements move it that many pixels/ems/%s from its normal position.
Fixed always stays in the same place, even if the page is scrolled.
Absolute is like fixed, but is positioned relative to an ancestor.

I found absolute the easiest, but there are a lot of scenarios where I can see fixed being more useful. I'm still a little bit fuzzy on positioning, and had some trouble with relative.


- What are the differences between Margin, Border, and Padding?

Padding is inside the border and determines how close the content is to the border. The border is the outer edge, defining the end of the element. Margin is outside of the border and determines how close this element will be to others or the edge of the page.

- What was your impression of this challenge overall? (love, hate, and why?)

I liked it - it was different from what we've been doing but I found it very helpful to just drill exercises for a while and work hands-on.

![1. Color](../imgs/1-color.png)

![2. Column](../imgs/2-column.png)

![3. Row](../imgs/3-row.png)

![4. Equidistant](../imgs/4-equidistant.png)

![5. Squares](../imgs/5-squares.png)

![6. Footer](../imgs/6-footer.png)

![7. Header](../imgs/7-header.png)

![8. Sidebar](../imgs/8-sidebar.png)

![9. Get Creative!](../imgs/9-get-creative.png)
{'fraction_non_alphanumeric': 0.08189015338941118, 'fraction_numerical': 0.008906481939633844, 'mean_word_length': 3.865222623345367, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6980141', 'n_tokens_mistral': 1140, 'n_tokens_neox': 1084, 'n_words': 614}