<commit_before><!DOCTYPE html>
<html>
<head><title>Week Three</title>
</head>
<body>
  <hr />
<main>
  <img src="blogheader.png" alt="Taylor Learns to Code"/>
  <hr />
<section>
<h2>Week Three</h2>
<h3><em>Put in an awkward position.</em></h3>
<h4>January 14th, 2016</h4>
<p>Starting off this week's post with a semi-offensive CSS pun:</p>
<img src="css-blogimg.png" alt="CSS Titanic Pun"/>
<p>Learning how to position things on a page with CSS is extremely tough. Actually felt like I was drowning at times (get the joke above now??). I spoke with a few DBC grads about CSS and they all responded with a resounding "UGH, I'm horrible at CSS." This was a little demoralizing, but I decided to push through and frustrate myself until I learned a few of the nuances. One of my most valiant efforts was trying to figure out positioning.</p>
<p>I learned there are four types of positioning: static, fixed, relative, and absolute. I started to differentiate these by figuring out which positions respond to changing the top, bottom, left, or right properties. Static does not, all the other three do. A static position is just where something is positioned naturally, or where it falls within the HTML code. This is just how the website spits out the HTML code naturally onto the page, with no adjustments. Now, onto relative. Relative is basically static, but you can adjust the position with those top, bottom, left, and right properities. Use this if you want to adjust the placement of something a little to the left, or a little to the right, and so on. All of these adjustments move the item RELATIVE to its natural placement, or where it would be if it were static.</p>
<p>Absolute and fixed get trickier. Both of these are positions that are relative to other things on the page. Absolute positioning relies on its closest positioned (not static!) parent element. You can use this to position something relative to the entire document, or relative to that positioned parent element. Using absolute is like saying "I want this to be here and it doesn't matter what is going on around it." That thing will stay in that position no matter how or where you move the other things on the page. This is a little like inserting an image into a document and setting the text to display in front of it: the image does not move even when something overlaps it. Things that are absolutely positioned will still scroll with the page. Finally, fixed position is something fixed in a specific place relative to the browser window. When a user scrolls up and down on their broswer, this thing will not budge. Think of the search/menu bars at the top of the Facebook and Twitter websites: when you scroll, these bars remain in place at the top of the screen.</p>
<p>Wordy explanations like the ones above just simply won't make sense until you try it out for yourself. Experiment using DevTools to see how adjustments to an item's position affect it's placement. I promise you'll find a glimmer of clarity on these concepts as you pop items in, out, and around your page!
</section>
<footer>
<h4>Taylor</h4>
 <p><a href="mailto:<EMAIL>">contact me</a> | <a href="https://www.linkedin.com/in/taylor-daugherty-3077a03b">LinkedIn</a> | <a href="https://github.com/taylordaug">GitHub</a> | <a href="https://twitter.com/taylor_codes">Twitter</a>
  </p>
  <a href="../blog/index.html">back to blog home</a>
</footer>
</main><commit_msg>fix inline image<commit_after><!DOCTYPE html>
<html>
<head><title>Week Three</title>
</head>
<body>
  <hr />
<main>
  <img src="blogheader.png" alt="Taylor Learns to Code"/>
  <hr />
<section>
<h2>Week Three</h2>
<h3><em>Put in an awkward position.</em></h3>
<h4>January 14th, 2016</h4>
<p>Starting off this week's post with a semi-offensive CSS pun:</p>
<img src="cssblog-img.png" alt="CSS Titanic Pun"/>
<p>Learning how to position things on a page with CSS is extremely tough. Actually felt like I was drowning at times (get the joke above now??). I spoke with a few DBC grads about CSS and they all responded with a resounding "UGH, I'm horrible at CSS." This was a little demoralizing, but I decided to push through and frustrate myself until I learned a few of the nuances. One of my most valiant efforts was trying to figure out positioning.</p>
<p>I learned there are four types of positioning: static, fixed, relative, and absolute. I started to differentiate these by figuring out which positions respond to changing the top, bottom, left, or right properties. Static does not, all the other three do. A static position is just where something is positioned naturally, or where it falls within the HTML code. This is just how the website spits out the HTML code naturally onto the page, with no adjustments. Now, onto relative. Relative is basically static, but you can adjust the position with those top, bottom, left, and right properities. Use this if you want to adjust the placement of something a little to the left, or a little to the right, and so on. All of these adjustments move the item RELATIVE to its natural placement, or where it would be if it were static.</p>
<p>Absolute and fixed get trickier. Both of these are positions that are relative to other things on the page. Absolute positioning relies on its closest positioned (not static!) parent element. You can use this to position something relative to the entire document, or relative to that positioned parent element. Using absolute is like saying "I want this to be here and it doesn't matter what is going on around it." That thing will stay in that position no matter how or where you move the other things on the page. This is a little like inserting an image into a document and setting the text to display in front of it: the image does not move even when something overlaps it. Things that are absolutely positioned will still scroll with the page. Finally, fixed position is something fixed in a specific place relative to the browser window. When a user scrolls up and down on their broswer, this thing will not budge. Think of the search/menu bars at the top of the Facebook and Twitter websites: when you scroll, these bars remain in place at the top of the screen.</p>
<p>Wordy explanations like the ones above just simply won't make sense until you try it out for yourself. Experiment using DevTools to see how adjustments to an item's position affect it's placement. I promise you'll find a glimmer of clarity on these concepts as you pop items in, out, and around your page!
</section>
<footer>
<h4>Taylor</h4>
 <p><a href="mailto:<EMAIL>">contact me</a> | <a href="https://www.linkedin.com/in/taylor-daugherty-3077a03b">LinkedIn</a> | <a href="https://github.com/taylordaug">GitHub</a> | <a href="https://twitter.com/taylor_codes">Twitter</a>
  </p>
  <a href="../blog/index.html">back to blog home</a>
</footer>
</main>
{'fraction_non_alphanumeric': 0.07693432792160304, 'fraction_numerical': 0.00585051923358198, 'mean_word_length': 4.4747798238590875, 'pattern_counts': {'":': 0, '<': 101, '<?xml version=': 0, '>': 101, 'https://': 6, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1964569', 'n_tokens_mistral': 1864, 'n_tokens_neox': 1761, 'n_words': 1061}