<commit_before># 3.4 Chrome DevTools

## Exercise Screenshots

Exercise 1:
![alt text][logo](imgs/3.4-1.png "3.4-1.png")
Exercise 2:
![alt text][logo](imgs/3.4-2.png "3.4-2.png")
Exercise 3:
![alt text][logo](imgs/3.4-3.png "3.4-3.png")
Exercise 4:
![alt text][logo](imgs/3.4-4.png "3.4-4.png")
Exercise 5:
![alt text][logo](imgs/3.4-5.png "3.4-5.png")
Exercise 6:
![alt text][logo](imgs/3.4-6.png "3.4-6.png")
Exercise 7:
![alt text][logo](imgs/3.4-7.png "3.4-7.png")
Exercise 8:
![alt text][logo](imgs/3.4-8.png "3.4-8.png")
Exercise 9:
![alt text][logo](imgs/3.4-9.png "3.4-9.png")

## Reflection

### How can you use Chrome's DevTools inspector to help you format or position elements?
Chrome's DevTool inspector is incredibly helpful for positioning elements because you can see the site in a browser along with the code in a collapseabel DOM and an adjustable visualization of the margins, borders, and padding and it allows you to make changes and see the results immediately.

### How can you resize elements on the DOM using CSS?
Using CSS you can set the width and height of an object with width: and height:, you can use a px or em unit or measure or even a percentage of the page you want it to cover. You can also set the margin, border, and padding. Rather than writing the code you can also double click any paramater in the Metrics Pane visualization and enter your desired value.

### What are the differences between absolute, fixed, static, and relative positioning? Which did you find easiest to use? Which was most difficult?
*Absolute-object goes to coordinates you set in terms of the page rather than relative to the object's default position. Other objects will fill in the space where it was.
*Fixed-The object stays in place in the window as the page scrolls.
*Static- default position, object occurs where it normally would.
*Relative-coordinates will move the object relative to it's default position while keeping that default position "filled" so objects around it won't move to fill it.


### What are the differences between margin, border, and padding?
The border is the perimeter of an object. The margin is the space outside the border of an object. The padding is the space inside the border of an object specifically between the border and the text.

### What was your impression of this challenge overall? (love, hate, and why?)
I really enjoyed this challenge, I like that there is an immediate cause and effect and I can try a bunch of things out and immediately see what they do. I have a hands on style of learning and this is great for that.
<commit_msg>image link test<commit_after># 3.4 Chrome DevTools

## Exercise Screenshots

Exercise 1:
![alt text][logo](phase-0/week-3/chrome-devtools/imgs/3.4-1.png "3.4-1.png")
Exercise 2:
![alt text][logo](imgs/3.4-2.png "3.4-2.png")
Exercise 3:
![alt text][logo](imgs/3.4-3.png "3.4-3.png")
Exercise 4:
![alt text][logo](imgs/3.4-4.png "3.4-4.png")
Exercise 5:
![alt text][logo](imgs/3.4-5.png "3.4-5.png")
Exercise 6:
![alt text][logo](imgs/3.4-6.png "3.4-6.png")
Exercise 7:
![alt text][logo](imgs/3.4-7.png "3.4-7.png")
Exercise 8:
![alt text][logo](imgs/3.4-8.png "3.4-8.png")
Exercise 9:
![alt text][logo](imgs/3.4-9.png "3.4-9.png")

## Reflection

### How can you use Chrome's DevTools inspector to help you format or position elements?
Chrome's DevTool inspector is incredibly helpful for positioning elements because you can see the site in a browser along with the code in a collapseabel DOM and an adjustable visualization of the margins, borders, and padding and it allows you to make changes and see the results immediately.

### How can you resize elements on the DOM using CSS?
Using CSS you can set the width and height of an object with width: and height:, you can use a px or em unit or measure or even a percentage of the page you want it to cover. You can also set the margin, border, and padding. Rather than writing the code you can also double click any paramater in the Metrics Pane visualization and enter your desired value.

### What are the differences between absolute, fixed, static, and relative positioning? Which did you find easiest to use? Which was most difficult?
*Absolute-object goes to coordinates you set in terms of the page rather than relative to the object's default position. Other objects will fill in the space where it was.
*Fixed-The object stays in place in the window as the page scrolls.
*Static- default position, object occurs where it normally would.
*Relative-coordinates will move the object relative to it's default position while keeping that default position "filled" so objects around it won't move to fill it.


### What are the differences between margin, border, and padding?
The border is the perimeter of an object. The margin is the space outside the border of an object. The padding is the space inside the border of an object specifically between the border and the text.

### What was your impression of this challenge overall? (love, hate, and why?)
I really enjoyed this challenge, I like that there is an immediate cause and effect and I can try a bunch of things out and immediately see what they do. I have a hands on style of learning and this is great for that.

{'fraction_non_alphanumeric': 0.08988334289539109, 'fraction_numerical': 0.025243832472748137, 'mean_word_length': 4.288169868554095, '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': '2134157', 'n_tokens_mistral': 1546, 'n_tokens_neox': 1491, 'n_words': 786}