codecademydev/index.html Secret

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>My Coding Cheatsheet</title>
  <link href="styles.css" type="text/css" rel="stylesheet">
</head>
<body>
  <header>
    <h1 id="top">My Coding Cheatsheet</h1>
    <h4>By: Chia Lee</h4>
    <nav><h3>Navigation</h3>
      <ul>
        <li class="navigation"><a href="#html">HTML</a></li>
        <li class="navigation"><a href="#css">CSS</a></li>
        <li class="navigation"><a href="#additional_resources">ADDITIONAL RESOURCES</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <em>Below are tables of coding terms/definitions (this is a Codecademy project to display what I have learned so far in regards to HTML and CSS). </em>
  </main>
  <hr>

  <h2 id="html">HTML Table</h2>
  <table>
    <thead>
      <tr>
        <th>Term</th>
        <th>Definition</th>
        <th>Example</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>HTML</td>
        <td>HTML (HyperText Markup Language) is used to give content to a web page and instructs web browsers on how to structure that content.</td>
        <td>(N/A)</td>
      </tr>
      <tr>
        <td>Element Content</td>
        <td>The content of an HTML element is the information between the opening and closing tags of an element.</td>
        <td><img src="images/Element Content.PNG" alt="Snipped photo from codecademy"></td>
      </tr>
      <tr>
        <td>HTML Structure</td>
        <td>HTML is organized into a family tree structure. HTML elements can have parents, grandparents, siblings, children, grandchildren, etc.</td>
        <td><img src="images/html structure.PNG" alt="Snipped photo from codecademy"></td>
      </tr>
      <tr>
        <td>Attribute Name and Values</td>
        <td>HTML attributes consist of a name and a value using the following syntax: <mark>name="value"</mark> and can be added to the opening tag of an HTML element to configure or change the behavior of the element.</td>
        <td><img src="images/attributes name and values.PNG" alt="Snipped photo from codecademy"></td>
      </tr>
      <tr>
        <td> <mark>&lt;img&gt;</mark> Image Element</td>
        <td>HTML image <mark>&lt;img&gt;</mark> elements embed images in documents. The src attribute contains the image URL and is mandatory. <mark>&lt;img&gt;</mark> is an empty element meaning it should not have a closing tag.</td>
        <td><img src="images\image element.PNG" alt="Snipped photo from codecademy"></td>
      </tr>
    </tbody>
  </table>
  <br>
  <hr>
  <br>

  <h2 id="css">CSS Table</h2>
  <table>
    <thead>
      <tr>
        <th>Term</th>
        <th>Definition</th>
        <th>Example</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Purpose of CSS</td>
        <td>CSS, or Cascading Style Sheets, is a language that is used in combination with HTML that customizes how HTML elements will appear. CSS can define styles and change the layout and design of a sheet.</td>
        <td>(N/A)</td>
      </tr>
      <tr>
        <td>Write CSS in Separate Files</td>
        <td>CSS code can be written in its own files to keep it separate from the HTML code. The extension for CSS files is <b>.css</b> These can be linked to an HTML file using a <mark>&lt;link&gt;</mark> tag in the <mark>&lt;head&gt;</mark> section.</td>
        <td><img src="images/Write CSS in separate files.PNG" alt="Snipped photo from codecademy"></td>
      </tr>
      <tr>
        <td>Write CSS in HTML File</td>
        <td>CSS code can be written in an HTML file by enclosing the code in <mark>&lt;style&gt;</mark> tags. Code surrounded by <mark>&lt;style&gt;</mark> tags will be interpreted as CSS syntax.</td>
        <td><img src="/images/wrtie css in html file.PNG" alt="Snipped photo from codecademy"></td>
      </tr>
      <tr>
        <td>Inline Styles</td>
        <td>CSS styles can be directly added to HTML elements by using the style attribute in the element’s opening tag. Each style declaration is ended with a semicolon. Styles added in this manner are known as inline styles.</td>
        <td><img src="/images/inline styles.PNG" alt="Snipped photo from codecademy"></td>
      </tr>
      <tr>
        <td>CSS Rule Sets</td>
        <td>A CSS rule set contains one or more selectors and one or more declarations. The selector(s), which in this example is <mark>h1</mark>, points to an HTML element. The declaration(s), which in this example are <mark>color: blue</mark> and <mark>text-align: center</mark> style the element with a property and value. The rule set is the main building block of a CSS sheet.</td>
        <td><img src="/images/css rule sets.PNG" alt="Snipped photo from codecademy"></td>
      </tr>
    </tbody>
  </table>
  <br>
  <hr>
  <br>
  <footer>
    <h3 id="additional_resources">Additional Resources</h3>
    <ul>
      <li><a href="https://www.codecademy.com/learn/learn-html/modules/learn-html-elements/cheatsheet" target="_blank">HTML Codeacademy Cheatsheet</a></li>
      <li><a href="https://www.codecademy.com/learn/learn-css/modules/learn-css-selectors-visual-rules/cheatsheet" target="_blank">CSS Codeacademy Cheatsheet</a></li>
    </ul>
    <a href="#top">top</a>
  </footer>
</body>
</html>

## styles.css
body {
  background-color: rgb(178, 197, 192);
  font-family: 'Raleway', sans-serif;
  margin: 50px;
}

#top {
  text-align: center;
  border-style: double;
  padding:10px;
  background-color: rgb(106, 185, 185);
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.navigation {
  display: inline-block;
  border: 2px solid;
  border-color: whitesmoke;
  background-color: rgb(198, 221, 146);
  font-weight: 525;
}

.navigation a:hover {
  background: rgb(247, 255, 137);
  border: 1px solid rgb(0, 255, 234);
  color: blue;
}

th {
  text-align: left;
  background-color: lightcoral;
}
table, th, td {
  border-style: solid;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
}

tr:nth-child(even) {
  background-color: #fff;
}

tr:nth-child(odd) {
  background-color: #ddd;
}

mark {
  background-color: lightgrey
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>My Coding Cheatsheet</title>
	<link href="styles.css" type="text/css" rel="stylesheet">
	</head>
	<body>
	<header>
	<h1 id="top">My Coding Cheatsheet</h1>
	<h4>By: Chia Lee</h4>
	<nav><h3>Navigation</h3>
	<ul>
	<li class="navigation"><a href="#html">HTML</a></li>
	<li class="navigation"><a href="#css">CSS</a></li>
	<li class="navigation"><a href="#additional_resources">ADDITIONAL RESOURCES</a></li>
	</ul>
	</nav>
	</header>

	<main>
	<em>Below are tables of coding terms/definitions (this is a Codecademy project to display what I have learned so far in regards to HTML and CSS). </em>
	</main>
	<hr>

	<h2 id="html">HTML Table</h2>
	<table>
	<thead>
	<tr>
	<th>Term</th>
	<th>Definition</th>
	<th>Example</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>HTML</td>
	<td>HTML (HyperText Markup Language) is used to give content to a web page and instructs web browsers on how to structure that content.</td>
	<td>(N/A)</td>
	</tr>
	<tr>
	<td>Element Content</td>
	<td>The content of an HTML element is the information between the opening and closing tags of an element.</td>
	<td><img src="images/Element Content.PNG" alt="Snipped photo from codecademy"></td>
	</tr>
	<tr>
	<td>HTML Structure</td>
	<td>HTML is organized into a family tree structure. HTML elements can have parents, grandparents, siblings, children, grandchildren, etc.</td>
	<td><img src="images/html structure.PNG" alt="Snipped photo from codecademy"></td>
	</tr>
	<tr>
	<td>Attribute Name and Values</td>
	<td>HTML attributes consist of a name and a value using the following syntax: <mark>name="value"</mark> and can be added to the opening tag of an HTML element to configure or change the behavior of the element.</td>
	<td><img src="images/attributes name and values.PNG" alt="Snipped photo from codecademy"></td>
	</tr>
	<tr>
	<td> <mark><img></mark> Image Element</td>
	<td>HTML image <mark><img></mark> elements embed images in documents. The src attribute contains the image URL and is mandatory. <mark><img></mark> is an empty element meaning it should not have a closing tag.</td>
	<td><img src="images\image element.PNG" alt="Snipped photo from codecademy"></td>
	</tr>
	</tbody>
	</table>
	<br>
	<hr>
	<br>

	<h2 id="css">CSS Table</h2>
	<table>
	<thead>
	<tr>
	<th>Term</th>
	<th>Definition</th>
	<th>Example</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>Purpose of CSS</td>
	<td>CSS, or Cascading Style Sheets, is a language that is used in combination with HTML that customizes how HTML elements will appear. CSS can define styles and change the layout and design of a sheet.</td>
	<td>(N/A)</td>
	</tr>
	<tr>
	<td>Write CSS in Separate Files</td>
	<td>CSS code can be written in its own files to keep it separate from the HTML code. The extension for CSS files is <b>.css</b> These can be linked to an HTML file using a <mark><link></mark> tag in the <mark><head></mark> section.</td>
	<td><img src="images/Write CSS in separate files.PNG" alt="Snipped photo from codecademy"></td>
	</tr>
	<tr>
	<td>Write CSS in HTML File</td>
	<td>CSS code can be written in an HTML file by enclosing the code in <mark><style></mark> tags. Code surrounded by <mark><style></mark> tags will be interpreted as CSS syntax.</td>
	<td><img src="/images/wrtie css in html file.PNG" alt="Snipped photo from codecademy"></td>
	</tr>
	<tr>
	<td>Inline Styles</td>
	<td>CSS styles can be directly added to HTML elements by using the style attribute in the element’s opening tag. Each style declaration is ended with a semicolon. Styles added in this manner are known as inline styles.</td>
	<td><img src="/images/inline styles.PNG" alt="Snipped photo from codecademy"></td>
	</tr>
	<tr>
	<td>CSS Rule Sets</td>
	<td>A CSS rule set contains one or more selectors and one or more declarations. The selector(s), which in this example is <mark>h1</mark>, points to an HTML element. The declaration(s), which in this example are <mark>color: blue</mark> and <mark>text-align: center</mark> style the element with a property and value. The rule set is the main building block of a CSS sheet.</td>
	<td><img src="/images/css rule sets.PNG" alt="Snipped photo from codecademy"></td>
	</tr>
	</tbody>
	</table>
	<br>
	<hr>
	<br>
	<footer>
	<h3 id="additional_resources">Additional Resources</h3>
	<ul>
	<li><a href="https://www.codecademy.com/learn/learn-html/modules/learn-html-elements/cheatsheet" target="_blank">HTML Codeacademy Cheatsheet</a></li>
	<li><a href="https://www.codecademy.com/learn/learn-css/modules/learn-css-selectors-visual-rules/cheatsheet" target="_blank">CSS Codeacademy Cheatsheet</a></li>
	</ul>
	<a href="#top">top</a>
	</footer>
	</body>
	</html>
	body {
	background-color: rgb(178, 197, 192);
	font-family: 'Raleway', sans-serif;
	margin: 50px;
	}

	#top {
	text-align: center;
	border-style: double;
	padding:10px;
	background-color: rgb(106, 185, 185);
	font-family: Georgia, 'Times New Roman', Times, serif;
	}

	.navigation {
	display: inline-block;
	border: 2px solid;
	border-color: whitesmoke;
	background-color: rgb(198, 221, 146);
	font-weight: 525;
	}

	.navigation a:hover {
	background: rgb(247, 255, 137);
	border: 1px solid rgb(0, 255, 234);
	color: blue;
	}

	th {
	text-align: left;
	background-color: lightcoral;
	}
	table, th, td {
	border-style: solid;
	border-collapse: collapse;
	}

	th, td {
	padding: 10px;
	}

	tr:nth-child(even) {
	background-color: #fff;
	}

	tr:nth-child(odd) {
	background-color: #ddd;
	}

	mark {
	background-color: lightgrey
	}