<commit_before>



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

How can you resize elements on the DOM using CSS?

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

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

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

Below are my inline screenshots:

![1: Change the colors](./3.4-screenshots/Screen Shot 2015-10-13 at 9.14.45 PM.png "1: Change the colors")

![2: column](./3.4-screenshots/Screen Shot 2015-10-13 at 9.21.51 PM.png "2: column")

![3: row](./3.4-screenshots/Screen Shot 2015-10-13 at 9.27.35 PM.png "3: row")

![4: make equidistant](./3.4-screenshots/Screen Shot 2015-10-13 at 9.37.34 PM.png "4: make equidistant")

![5: squares](./3.4-screenshots/Screen Shot 2015-10-13 at 9.42.39 PM.png "5: squares")

![6: footer](./3.4-screenshots/Screen Shot 2015-10-13 at 9.54.08 PM.png "6: footer")

![7: header](./3.4-screenshots/Screen Shot 2015-10-13 at 10.09.02 PM.png "7: header")

![8: sidebar](./3.4-screenshots/Screen Shot 2015-10-13 at 10.23.31 PM.png "8: sidebar")

![9: get creative](./3.4-screenshots/Screen Shot 2015-10-13 at 10.33.39 PM.png "9: get creative")<commit_msg>edit positioning reflection<commit_after>



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

Chrome's DevTools inspector allows you to adjust CSS elements in the browser and see what effect the changes have immediately, rather than needing to save the .css file and refresh the browser. It's a much quicker process that allows you to tweak things much more efficiently.

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

By adjusting the selector values you can view the effects of your adjustments on the DOM.

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

Summarizing [cssbasics](http://www.cssbasics.com/css-positioning/)'s definitions:
* Static is basically the same as declaring no position
* Relative position places the element within the normal flow of your html, and then offsets it using properties such as left, right, top, and bottom.
* Absolute position removes the element from the normal flow of your html, and positions it in relation to a parent element.
* Fixed position also removes the element from the normal flow of your html, but the parent element is always the browser window.

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

Margin declares the distance between an HTML element and the elements around it.

Border declares how the outer limits of an HTML element will be defined.

Padding is the distance between the border of an HTML element and the content within it.


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

I thought this challenge was very useful. Although I had been using Chrome DevTools to inspect html and css of various websites for a few days, I was not aware of the ability to tweak and play with the values until I did this exercise. I'll defintely use this tool more in the future, and this exercise was a good chance to practice.

#### Below are my inline screenshots:

![1: Change the colors](./3.4-screenshots/Screen Shot 2015-10-13 at 9.14.45 PM.png "1: Change the colors")

![2: column](./3.4-screenshots/Screen Shot 2015-10-13 at 9.21.51 PM.png "2: column")

![3: row](./3.4-screenshots/Screen Shot 2015-10-13 at 9.27.35 PM.png "3: row")

![4: make equidistant](./3.4-screenshots/Screen Shot 2015-10-13 at 9.37.34 PM.png "4: make equidistant")

![5: squares](./3.4-screenshots/Screen Shot 2015-10-13 at 9.42.39 PM.png "5: squares")

![6: footer](./3.4-screenshots/Screen Shot 2015-10-13 at 9.54.08 PM.png "6: footer")

![7: header](./3.4-screenshots/Screen Shot 2015-10-13 at 10.09.02 PM.png "7: header")

![8: sidebar](./3.4-screenshots/Screen Shot 2015-10-13 at 10.23.31 PM.png "8: sidebar")

![9: get creative](./3.4-screenshots/Screen Shot 2015-10-13 at 10.33.39 PM.png "9: get creative")
{'fraction_non_alphanumeric': 0.10868522072936661, 'fraction_numerical': 0.07485604606525911, 'mean_word_length': 4.059466019417476, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 1, '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': '4257261', 'n_tokens_mistral': 1512, 'n_tokens_neox': 1250, 'n_words': 572}