codecademydev/index.html Secret

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Cheat Sheet</title>
    <link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#form">HTML-Form</a></li>
            <li><a href="#">HTML-Semantic</a></li>
            <li><a href="#">CSS-Rules</a></li>
        </ul>
    </nav>
    <header>
        <h1>Bim's Cheat Sheet</h1>
        <p>I'm making cheat sheet only for the modul that i think its too hard for me to understand.
        Only making it until HTML-Form because I'm too lazy. Hopefully this would be useful for you.</p>
    </header>
    <main>
        <h2 id="form">HTML-Form</h2>
        <table>
            <thead>
                <tr>
                    <th>TAG</th>
                    <th>NAME</th>
                    <th>DESCRIPTION</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>&lt;form&gt;</td>
                    <td>Form</td>
                    <td>Collect and send information to an external source</td>
                </tr>
                <tr>
                    <td>&lt;input&gt;</td>
                    <td>Input</td>
                    <td>Render a variety of input ﬁelds</td>
                </tr>
                <tr>
                    <td>&lt;label&gt;</td>
                    <td>Label</td>
                    <td>Provides identiﬁcation for a speciﬁc &lt;input&gt; based on matching values</td>
                </tr>
                <tr>
                    <td>&lt;select&gt;</td>
                    <td>Select</td>
                    <td>Used to create a dropdown list</td>
                </tr>
                <tr>
                    <td>&lt;option&gt;</td>
                    <td>Option</td>
                    <td>Created a list of choices for the dropdown list</td>
                </tr>
                <tr>
                    <td>&lt;datalist&gt;</td>
                    <td>Data List</td>
                    <td>Used to store a list of &lt;option&gt;</td>
                </tr>
                <tr>
                    <td>&lt;textarea&gt;</td>
                    <td>Text Area</td>
                    <td>Used when creating a text-box for multi-line input</td>
                </tr>
            </tbody>
        </table>
        <br><br>
        <table>
            <thead>
                <tr>
                    <th>ATTRIBUTE</th>
                    <th>NAME</th>
                    <th>DESCRIPTION</th>
                </tr>
            </thead>
            <tbody>
                    <td>action=" "</td>
                    <td>Action Attribute</td>
                    <td>Information submitted is passed to the named action</td>
                </tr>
                <tr>
                    <td>method=" "</td>
                    <td>Action Attribute</td>
                    <td>Tells the form what to do with that information once it’s sent</td>
                </tr>
                <tr>
                    <td>value=" "</td>
                    <td>Value Attribute</td>
                    <td>Value attribute are sent as a key-value pair when the form is submitted</td>
                </tr>
                <tr>
                    <td>name=" "</td>
                    <td>Name Attribute</td>
                    <td>The name will become the key of submitted form</td>
                </tr>
                <tr>
                    <td>required</td>
                    <td>Required Attribute</td>
                    <td>speciﬁes that the ﬁeld must include a value</td>
                </tr>
            </tbody>
        </table>
        <br><br>
    </main>
    <footer>
        <small><strong>UnderConstructionBy: Bims</strong></small>
    </footer>
</body>
</html>

## styles.css
body {
    font-family: Georgia;
    background-color: floralwhite;
}

main {
    padding-left: 5px;
}

header h1 {
    text-align: center;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: salmon;
    display: table;
    width: 100%;
}

nav li {
   display: table-cell;
}

li a {
    display: block;
    padding: 25px;
    text-align: center;
    color: white;
    text-decoration: none;
    text-emphasis: bold;
}

li a:hover {
    background-color: #3D405B;
}

table {
    text-align: center;
    margin: 0 auto;
    height: 300px;
    border: 3px solid antiquewhite;
    border-collapse: collapse;
}

td, th {
    padding: 10px;
    border: 2.5px solid antiquewhite;
}

th {
    color: white;
}

thead {
    background-color: salmon;
}

small {
    margin-left: 5px;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>My Cheat Sheet</title>
	<link href="styles.css" rel="stylesheet" type="text/css">
	</head>
	<body>
	<nav>
	<ul>
	<li><a href="#form">HTML-Form</a></li>
	<li><a href="#">HTML-Semantic</a></li>
	<li><a href="#">CSS-Rules</a></li>
	</ul>
	</nav>
	<header>
	<h1>Bim's Cheat Sheet</h1>
	<p>I'm making cheat sheet only for the modul that i think its too hard for me to understand.
	Only making it until HTML-Form because I'm too lazy. Hopefully this would be useful for you.</p>
	</header>
	<main>
	<h2 id="form">HTML-Form</h2>
	<table>
	<thead>
	<tr>
	<th>TAG</th>
	<th>NAME</th>
	<th>DESCRIPTION</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td><form></td>
	<td>Form</td>
	<td>Collect and send information to an external source</td>
	</tr>
	<tr>
	<td><input></td>
	<td>Input</td>
	<td>Render a variety of input ﬁelds</td>
	</tr>
	<tr>
	<td><label></td>
	<td>Label</td>
	<td>Provides identiﬁcation for a speciﬁc <input> based on matching values</td>
	</tr>
	<tr>
	<td><select></td>
	<td>Select</td>
	<td>Used to create a dropdown list</td>
	</tr>
	<tr>
	<td><option></td>
	<td>Option</td>
	<td>Created a list of choices for the dropdown list</td>
	</tr>
	<tr>
	<td><datalist></td>
	<td>Data List</td>
	<td>Used to store a list of <option></td>
	</tr>
	<tr>
	<td><textarea></td>
	<td>Text Area</td>
	<td>Used when creating a text-box for multi-line input</td>
	</tr>
	</tbody>
	</table>
	<br><br>
	<table>
	<thead>
	<tr>
	<th>ATTRIBUTE</th>
	<th>NAME</th>
	<th>DESCRIPTION</th>
	</tr>
	</thead>
	<tbody>
	<td>action=" "</td>
	<td>Action Attribute</td>
	<td>Information submitted is passed to the named action</td>
	</tr>
	<tr>
	<td>method=" "</td>
	<td>Action Attribute</td>
	<td>Tells the form what to do with that information once it’s sent</td>
	</tr>
	<tr>
	<td>value=" "</td>
	<td>Value Attribute</td>
	<td>Value attribute are sent as a key-value pair when the form is submitted</td>
	</tr>
	<tr>
	<td>name=" "</td>
	<td>Name Attribute</td>
	<td>The name will become the key of submitted form</td>
	</tr>
	<tr>
	<td>required</td>
	<td>Required Attribute</td>
	<td>speciﬁes that the ﬁeld must include a value</td>
	</tr>
	</tbody>
	</table>
	<br><br>
	</main>
	<footer>
	<small><strong>UnderConstructionBy: Bims</strong></small>
	</footer>
	</body>
	</html>
	body {
	font-family: Georgia;
	background-color: floralwhite;
	}

	main {
	padding-left: 5px;
	}

	header h1 {
	text-align: center;
	}

	nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color: salmon;
	display: table;
	width: 100%;
	}

	nav li {
	display: table-cell;
	}

	li a {
	display: block;
	padding: 25px;
	text-align: center;
	color: white;
	text-decoration: none;
	text-emphasis: bold;
	}

	li a:hover {
	background-color: #3D405B;
	}

	table {
	text-align: center;
	margin: 0 auto;
	height: 300px;
	border: 3px solid antiquewhite;
	border-collapse: collapse;
	}

	td, th {
	padding: 10px;
	border: 2.5px solid antiquewhite;
	}

	th {
	color: white;
	}

	thead {
	background-color: salmon;
	}

	small {
	margin-left: 5px;
	}