tarah34/100-days-of-code.markdown

## 100-days-of-code.markdown

      
    Raw
  

              100-days-of-code.markdown
            
          
    100 Days of Code

100 Days of Code Challenge where I'll practice HTML and CSS and also JavaScript
A Pen by Tara Hollander on CodePen.
License.

  
## index.html
<html>
  <head>
    <meta charset="utf-8">
    <title>External Styles: 100 Days of Code</title>
  <!--This is a webpage for practicing EXTERNAL styles
  or linked style sheets CSS.-->
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
  </head>

  <body>
<h1>100 Days of Code</h1>
<h1 id="h1SubHead">External Styles Practice</h1>
<h2 id="heck">We're going to style the heck out of this webpage!</h2>
<img src="https://cdn.pixabay.com/photo/2012/04/13/17/00/lcd-32872_960_720.png" height="250" alt="CSS Styles practice" align="right">

<h3>The styles are in Linked Stylesheet files</h3>
<p>Files with extentions .css are where the styles code exist.</p>
<p id="screen">This is the <span class="red">screen display</span> version of the page. &#8594;</p>
<div><p id="line-through">This is the print display version of the page.</p></div><br>
<p id="print">This is the <span class="purple">print display</span> version of the page.</p>

<p>Why do we want to learn style?</p>
<ul>
  <li>
    Aesthetics matter
  </li>
  <li>
    Targeting and differentiating sections for emphasis and clarity
  </li>
  <li>Coding from a humanities perspective makes the world a better place</li>
</ul>
<h3>The 100 Days of Code Challenge</h3>
<p>Here's my approach to the 100 days of code challenge.</p>
<p> #100daysofcode Practice HTML, CSS and dig into JavaScript.</p>
<pre>
  Here is where a not often
  used
       tag
           can
               change
                      the
                          layout
                        of
                   text.
           So what?
  Practice!
</pre>

<p>How many linked stylesheets does this webpage have?</p>
<table border="solid">
  <caption>
    Follow these steps
  </caption>
  <th>3</th>
  <th>Steps</th>
  <tr>
    <td>1</td>
    <td>View &lt;head&gt; element section of html file</td>
  </tr>
  <tr>
    <td>2</td>
    <td>See if there is a &lt;link&gt; element with href attribute</td>
  </tr>
<tr>
  <td>3</td>
  <td>Count the number of link elements with href attributes</td>
</tr>
<tr>
  <td>4</td>
  <td>You now know the # of styles sheets linked to this webpage</td>

</tr>
</table>
<br />
<table border="solid">
  <caption>
    Table 2 - <span class="word">word-spacing practice</span> and variations on a table
  </caption>
  <th>3</th>
  <th>steps </th>
  <tr>
    <td>1</td>
    <td>View &lt;head&gt; element section of html file</td>
  </tr>
  <tr>
    <td>2</td>
    <td>See if there is a &lt;link&gt; element with href attribute</td>
  </tr>
<tr>
  <td>3</td>
  <td>Count the number of link elements with href attributes</td>
</tr>
<tr>
  <td>4</td>
  <td>You now know the # of styles sheets linked to this webpage</td>

</tr>
</table>

  </body>
</html>

## style.css
#print {
  display: none;
}

#line-through {
  text-decoration: line-through;
}

body {
  padding: 5px 5px 5px 15px;
}

pre {
  background-image: url(media/sky2.png);
  background-repeat: no-repeat;
}

.red {
  color: red;
  font-style: italic;
}

@font-face {
  font-family: 'Montserrat';
  src: url('https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYAzyDMXhdD8sAj6OAJTFsBI.woff2') format ('woff2');
  font-weight: normal;
  font-stretch: normal;
}

#h1SubHead {
  text-indent: 150px;
}

#heck {
  font-weight: lighter;
  }

* {
    font-family: Montserrat; Georgia, serif;
    font-weight: lighter;
}

h1 {
  font-family: Tangerine;
  font-weight: 900;
  font-size: 34pt;
  letter-spacing: .02em;
  text-shadow: 1px 1px 1px #FFAE00;
}

.word {
  word-spacing: -.35em;
  text-shadow: 1em;
}

th {
  text-transform: uppercase;
	<html>
	<head>
	<meta charset="utf-8">
	<title>External Styles: 100 Days of Code</title>
	<!--This is a webpage for practicing EXTERNAL styles
	or linked style sheets CSS.-->
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine">
	</head>

	<body>
	<h1>100 Days of Code</h1>
	<h1 id="h1SubHead">External Styles Practice</h1>
	<h2 id="heck">We're going to style the heck out of this webpage!</h2>
	<img src="https://cdn.pixabay.com/photo/2012/04/13/17/00/lcd-32872_960_720.png" height="250" alt="CSS Styles practice" align="right">

	<h3>The styles are in Linked Stylesheet files</h3>
	<p>Files with extentions .css are where the styles code exist.</p>
	<p id="screen">This is the <span class="red">screen display</span> version of the page. →</p>
	<div><p id="line-through">This is the print display version of the page.</p></div><br>
	<p id="print">This is the <span class="purple">print display</span> version of the page.</p>

	<p>Why do we want to learn style?</p>
	<ul>
	<li>
	Aesthetics matter
	</li>
	<li>
	Targeting and differentiating sections for emphasis and clarity
	</li>
	<li>Coding from a humanities perspective makes the world a better place</li>
	</ul>
	<h3>The 100 Days of Code Challenge</h3>
	<p>Here's my approach to the 100 days of code challenge.</p>
	<p> #100daysofcode Practice HTML, CSS and dig into JavaScript.</p>
	<pre>
	Here is where a not often
	used
	tag
	can
	change
	the
	layout
	of
	text.
	So what?
	Practice!
	</pre>

	<p>How many linked stylesheets does this webpage have?</p>
	<table border="solid">
	<caption>
	Follow these steps
	</caption>
	<th>3</th>
	<th>Steps</th>
	<tr>
	<td>1</td>
	<td>View <head> element section of html file</td>
	</tr>
	<tr>
	<td>2</td>
	<td>See if there is a <link> element with href attribute</td>
	</tr>
	<tr>
	<td>3</td>
	<td>Count the number of link elements with href attributes</td>
	</tr>
	<tr>
	<td>4</td>
	<td>You now know the # of styles sheets linked to this webpage</td>

	</tr>
	</table>
	<br />
	<table border="solid">
	<caption>
	Table 2 - <span class="word">word-spacing practice</span> and variations on a table
	</caption>
	<th>3</th>
	<th>steps </th>
	<tr>
	<td>1</td>
	<td>View <head> element section of html file</td>
	</tr>
	<tr>
	<td>2</td>
	<td>See if there is a <link> element with href attribute</td>
	</tr>
	<tr>
	<td>3</td>
	<td>Count the number of link elements with href attributes</td>
	</tr>
	<tr>
	<td>4</td>
	<td>You now know the # of styles sheets linked to this webpage</td>

	</tr>
	</table>

	</body>
	</html>
	#print {
	display: none;
	}

	#line-through {
	text-decoration: line-through;
	}

	body {
	padding: 5px 5px 5px 15px;
	}

	pre {
	background-image: url(media/sky2.png);
	background-repeat: no-repeat;
	}

	.red {
	color: red;
	font-style: italic;
	}

	@font-face {
	font-family: 'Montserrat';
	src: url('https://fonts.gstatic.com/s/montserrat/v7/zhcz-_WihjSQC0oHJ9TCYAzyDMXhdD8sAj6OAJTFsBI.woff2') format ('woff2');
	font-weight: normal;
	font-stretch: normal;
	}

	#h1SubHead {
	text-indent: 150px;
	}

	#heck {
	font-weight: lighter;
	}

	* {
	font-family: Montserrat; Georgia, serif;
	font-weight: lighter;
	}

	h1 {
	font-family: Tangerine;
	font-weight: 900;
	font-size: 34pt;
	letter-spacing: .02em;
	text-shadow: 1px 1px 1px #FFAE00;
	}

	.word {
	word-spacing: -.35em;
	text-shadow: 1em;
	}

	th {
	text-transform: uppercase;