codecademydev/index.html Secret

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Basic HTML Elements</title>
  <link href="styles.css" type="text/css" rel="stylesheet">
</head>

<body>
<div class="header">
  <div class="background-image">
  <h1>Let's Learn to Code</h1>
  <h3>&lt;p&gt;Code is fun!&lt;/p&gt;</h3>
  </div>
</div>

<div class="content">
  <h5>August, 07th 2020</h5>
  <br>
  <h2>HTML Elements</h2>
  <p>HTML (Hyper Text Markup Language) is the skeletons of a website. Texts you read, images you see and videos you watch are basically the works of HTML. Along with CSS, it structures how elements(text, images, etc) are shown up in a web page. Thus, mastering HTML is indeed the first thing you must acquire if you're interested in being a front-end developer.</p>
  <p>New with this? Here are HTML basic elements that can help you shaping your first website.</p>

  <table class="table">
    <thead>
      <tr>
        <th scope="col">Element</th>
        <th scope="col">Name</th>
        <th scope="col">Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>&lt;!DOCTYPE html&gt;</td>
        <td>Document Type Declaration</td>
        <td>This is the first line of an HTML document. It informs the browser about what type of document to expect and which version of HTML is being used</td>
      </tr>

      <tr>
        <td>&lt;html&gt;-&lt;/html&gt;</td>
        <td>HTML Element</td>
        <td>This is the root of an HTML document. All structures is put inside this element (between the opening and closing tag)</td>
      </tr>

      <tr>
        <td>&lt;head&gt;-&lt;/head&gt;</td>
        <td>Head Element</td>
        <td>Containing general information about an HTML page called metadata</td>
      </tr>

      <tr>
        <td>&lt;title&gt;-&lt;/title&gt;</td>
        <td>Title Element</td>
        <td>Containing a text that defines the title of an HTML document. The title is displayed in the browser’s tab in which the HTML page is displayed. This element can only be contained inside a document’s &lt;element&gt;</td>
      </tr>

      <tr>
        <td>&lt;body&gt;-&lt;/body&gt;</td>
        <td>Body Elements</td>
        <td>It represents the content of an HTML document. Only content inside &lt;body&gt; tags are rendered on the web browsers</td>
      </tr>
    </tbody>
  </table>

  <br>
  <p>Make sure to put these elements altogether and in order to make your HTML worked. After that, you can fill some content as you like inside the body element. Here are some tags to make your content look nice.</p>
  <br>

  <table class="table">
      <thead>
        <tr>
          <th scope="col">Tag</th>
          <th scope="col">Name</th>
          <th scope="col">Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>&lt;p&gt;</td>
          <td>Paragraph</td>
          <td>This element contains and displays a block of text</td>
        </tr>

        <tr>
          <td>&lt;h1&gt;-&lt;h6&gt;</td>
          <td>Headings</td>
          <td colspan="2">Like in newspaper, headings are useful for making title in your article. There are 6 levels of heading which is ordered from the biggest to smallest</td>
        </tr>

        <tr>
          <td>&lt;span&gt;</td>
          <td>Span</td>
          <td>An inline container for text and can be used to group text for styling purposes</td>
        </tr>

        <tr>
          <td>&lt;strong&gt;</td>
          <td>Strong</td>
          <td>It highlights important and serious text. Browsers will normally render this highlighted text in bold by default.</td>
        </tr>

        <tr>
          <td>&lt;em&gt;</td>
          <td>Emphasis</td>
          <td>The element is for emphasizing text and browsers will usually italicize the emphasized text by default.</td>
        </tr>

        <tr>
          <td>&lt;img&gt;</td>
          <td>Image</td>
          <td>The "src" attribute contains the image URL and is mandatory</td>
        </tr>

        <tr>
          <td>&lt;video&gt;</td>
          <td>Video</td>
          <td>This element embeds a media player for video playback. The "src" attribute will contain the URL to the video. Adding the "controls" attribute will also display video controls in the media player</td>
        </tr>

        <tr>
          <td>&lt;br&gt;</td>
          <td>Line Break</td>
          <td>The element will create a line break in text</td>
        </tr>

        <tr>
          <td>&lt;ul&gt;</td>
          <td>Unordered List</td>
          <td>Theunordered list element is used to create a list of items in no particular order.</td>
        </tr>

        <tr>
          <td>&lt;ol&gt;</td>
          <td>Ordered List</td>
          <td>The ordered list element creates a list of items in sequential order. Each list item appears numbered by default</td>
        </tr>

        <tr>
          <td>&lt;li&gt;</td>
          <td>List Item</td>
          <td>The list item element creates list items inside &lt;ul&gt; and &lt;ol&gt;</td>
        </tr>

        <tr>
          <td>&lt;div&gt;</td>
          <td>Div</td>
          <td>A container that divides an HTML document into sections</td>
        </tr>

        <tr>
          <td>&lt;id&gt;</td>
          <td>Id</td>
          <td>This is a unique and specific element that will be useful to diferentiate one element to another</td>
        </tr>

        <tr>
          <td>&lt;class&gt;</td>
          <td>Class attribute</td>
          <td>Same as id, the element is used to diferentiate one element to another.</td>
        </tr>

      </tbody>
  </table>
  <p>Don't forget to end each tag with a closing tag after you've put content in it (ex:&lt;p&gt;Hello World!&lt;/p&gt;), unless for img and br tag-they are empty tags with only opening tags.</p>
  <p>Have fun with HTML!</p>
</div>

<div class="footer">
</div>

</body>
</html>

## styles.css
body {
  margin: 0 0;
  background-color: whitesmoke;
}

.content {

  margin: auto 80px;
  padding: 10px 60px;
  font-size: 18px;
  font-family: 'Courier New', Courier, monospace;
  line-height: 30px;
  text-align: justify;
}

.header {
  background-image: url("https://images.unsplash.com/photo-1484417894907-623942c8ee29?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1789&q=80");
  background-size: cover;
  background-position: center;
  height: 300px;
  color: whitesmoke;
  text-align: center;
  padding-right: 600px;
  padding-left: 50px;
  padding-top: 150px;

  }

.header h1 {
  background-color: black;
  opacity: 0.6;
  text-transform: uppercase;

}

.header h3 {
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  letter-spacing: 0.5px;


}

.table, th, td {
  border: solid 1px gray;
  font-size: 20px;
}

th {
  background-color: lightslategrey;
  text-align: center;
}

.footer {
  background-image: url("https://images.pexels.com/photos/270408/pexels-photo-270408.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200");
  background-position: center;
  height: 110px;
  opacity: 0.9;

}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Basic HTML Elements</title>
	<link href="styles.css" type="text/css" rel="stylesheet">
	</head>

	<body>
	<div class="header">
	<div class="background-image">
	<h1>Let's Learn to Code</h1>
	<h3><p>Code is fun!</p></h3>
	</div>
	</div>

	<div class="content">
	<h5>August, 07th 2020</h5>
	<br>
	<h2>HTML Elements</h2>
	<p>HTML (Hyper Text Markup Language) is the skeletons of a website. Texts you read, images you see and videos you watch are basically the works of HTML. Along with CSS, it structures how elements(text, images, etc) are shown up in a web page. Thus, mastering HTML is indeed the first thing you must acquire if you're interested in being a front-end developer.</p>
	<p>New with this? Here are HTML basic elements that can help you shaping your first website.</p>

	<table class="table">
	<thead>
	<tr>
	<th scope="col">Element</th>
	<th scope="col">Name</th>
	<th scope="col">Description</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td><!DOCTYPE html></td>
	<td>Document Type Declaration</td>
	<td>This is the first line of an HTML document. It informs the browser about what type of document to expect and which version of HTML is being used</td>
	</tr>

	<tr>
	<td><html>-</html></td>
	<td>HTML Element</td>
	<td>This is the root of an HTML document. All structures is put inside this element (between the opening and closing tag)</td>
	</tr>

	<tr>
	<td><head>-</head></td>
	<td>Head Element</td>
	<td>Containing general information about an HTML page called metadata</td>
	</tr>

	<tr>
	<td><title>-</title></td>
	<td>Title Element</td>
	<td>Containing a text that defines the title of an HTML document. The title is displayed in the browser’s tab in which the HTML page is displayed. This element can only be contained inside a document’s <element></td>
	</tr>

	<tr>
	<td><body>-</body></td>
	<td>Body Elements</td>
	<td>It represents the content of an HTML document. Only content inside <body> tags are rendered on the web browsers</td>
	</tr>
	</tbody>
	</table>

	<br>
	<p>Make sure to put these elements altogether and in order to make your HTML worked. After that, you can fill some content as you like inside the body element. Here are some tags to make your content look nice.</p>
	<br>

	<table class="table">
	<thead>
	<tr>
	<th scope="col">Tag</th>
	<th scope="col">Name</th>
	<th scope="col">Description</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td><p></td>
	<td>Paragraph</td>
	<td>This element contains and displays a block of text</td>
	</tr>

	<tr>
	<td><h1>-<h6></td>
	<td>Headings</td>
	<td colspan="2">Like in newspaper, headings are useful for making title in your article. There are 6 levels of heading which is ordered from the biggest to smallest</td>
	</tr>

	<tr>
	<td><span></td>
	<td>Span</td>
	<td>An inline container for text and can be used to group text for styling purposes</td>
	</tr>

	<tr>
	<td><strong></td>
	<td>Strong</td>
	<td>It highlights important and serious text. Browsers will normally render this highlighted text in bold by default.</td>
	</tr>

	<tr>
	<td><em></td>
	<td>Emphasis</td>
	<td>The element is for emphasizing text and browsers will usually italicize the emphasized text by default.</td>
	</tr>

	<tr>
	<td><img></td>
	<td>Image</td>
	<td>The "src" attribute contains the image URL and is mandatory</td>
	</tr>

	<tr>
	<td><video></td>
	<td>Video</td>
	<td>This element embeds a media player for video playback. The "src" attribute will contain the URL to the video. Adding the "controls" attribute will also display video controls in the media player</td>
	</tr>

	<tr>
	<td><br></td>
	<td>Line Break</td>
	<td>The element will create a line break in text</td>
	</tr>

	<tr>
	<td><ul></td>
	<td>Unordered List</td>
	<td>Theunordered list element is used to create a list of items in no particular order.</td>
	</tr>

	<tr>
	<td><ol></td>
	<td>Ordered List</td>
	<td>The ordered list element creates a list of items in sequential order. Each list item appears numbered by default</td>
	</tr>

	<tr>
	<td><li></td>
	<td>List Item</td>
	<td>The list item element creates list items inside <ul> and <ol></td>
	</tr>

	<tr>
	<td><div></td>
	<td>Div</td>
	<td>A container that divides an HTML document into sections</td>
	</tr>

	<tr>
	<td><id></td>
	<td>Id</td>
	<td>This is a unique and specific element that will be useful to diferentiate one element to another</td>
	</tr>

	<tr>
	<td><class></td>
	<td>Class attribute</td>
	<td>Same as id, the element is used to diferentiate one element to another.</td>
	</tr>

	</tbody>
	</table>
	<p>Don't forget to end each tag with a closing tag after you've put content in it (ex:<p>Hello World!</p>), unless for img and br tag-they are empty tags with only opening tags.</p>
	<p>Have fun with HTML!</p>
	</div>

	<div class="footer">
	</div>

	</body>
	</html>
	body {
	margin: 0 0;
	background-color: whitesmoke;
	}

	.content {

	margin: auto 80px;
	padding: 10px 60px;
	font-size: 18px;
	font-family: 'Courier New', Courier, monospace;
	line-height: 30px;
	text-align: justify;
	}

	.header {
	background-image: url("https://images.unsplash.com/photo-1484417894907-623942c8ee29?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1789&q=80");
	background-size: cover;
	background-position: center;
	height: 300px;
	color: whitesmoke;
	text-align: center;
	padding-right: 600px;
	padding-left: 50px;
	padding-top: 150px;

	}

	.header h1 {
	background-color: black;
	opacity: 0.6;
	text-transform: uppercase;

	}

	.header h3 {
	font-family: 'Courier New', Courier, monospace;
	font-weight: bold;
	letter-spacing: 0.5px;


	}

	.table, th, td {
	border: solid 1px gray;
	font-size: 20px;
	}

	th {
	background-color: lightslategrey;
	text-align: center;
	}

	.footer {
	background-image: url("https://images.pexels.com/photos/270408/pexels-photo-270408.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200");
	background-position: center;
	height: 110px;
	opacity: 0.9;

	}