Skip to content

Instantly share code, notes, and snippets.

@codecademydev codecademydev/index.html Secret

Created Jun 28, 2020
Embed
What would you like to do?
Codecademy export
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>OwnCheatSheet</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<header>
<h1 class="heading">Cheat Sheet(HTML &amp; CSS)</h1>
<nav>
<ul>
<li><a href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
</ul>
</nav>
</header>
<main>
<section id="html">
<h2>HTML Cheat Sheet:</h2>
<h3>Table Tags</h3>
<div class="table-tag">
<table>
<thead>
<tr>
<th>Tag</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>&lt;table&gt;</td>
<td>Table</td>
<td>The table tag defines an HTML table.</td>
</tr>
<tr>
<td>&lt;thead&gt;</td>
<td>Table Header</td>
<td>The set of rows defining the column headers in a table.</td>
</tr>
<tr>
<td>&lt;tbody&gt;</td>
<td>Table Body</td>
<td>The set of rows containing actual table data.</td>
</tr>
<tr>
<td>&lt;tfoot&gt;</td>
<td>Table Footer</td>
<td>The set of rows defining the footer in a table.</td>
</tr>
<tr>
<td>&lt;th&gt;</td>
<td>Table Head</td>
<td>Defines a header cell that can appear in the first row of an HTML table</td>
</tr>
<tr>
<td>&lt;tr&gt;</td>
<td>Table Row</td>
<td>Defines a table row container.</td>
</tr>
<tr>
<td>&lt;td&gt;</td>
<td>Table Data</td>
<td>Defines a table data container.</td>
</tr>
<tr>
<td>&lt;colgroup&gt;</td>
<td>colomn group</td>
<td>Used for grouping colomns together.</td>
</tr>
</tbody>
</table>
</div>
<div class="table-attr">
<h3>Table Attributes</h3>
<table>
<thead>
<th colspan="2">Attribute</th>
<th>Name</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td colspan="2">colspan</td>
<td>Column Span</td>
<td>Defines how many columns a td element should span.</td>
</tr>
</tbody>
<thead>
<th>Attribute</th>
<th>Name</th>
<th>Description</th>
</thead>
<tbody>
<tr>
<td rowspan="2">rowspan</td>
<td>Row Span</td>
<td rowspan="2">Defines how many rows a td element should span.</td>
</tr>
<tr>
<td>Row Span</td>
</tr>
</tbody>
</table>
</div>
<h3>Sample Code</h3>
<pre>
&lt;table&gt;
&lt;caption&gt;Table Caption&lt;/caption&gt;
&lt;colgroup&gt;
&lt;col&gt;
&lt;col span="2" class="left-two"&gt;
&lt;col span="2" class="right-two"&gt;
&lt;/colgroup&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th colspan="2"&gt;Left Two&lt;/th&gt;
&lt;th colspan="2"&gt;Right Two&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;th rowspan="2"&gt;Top Two&lt;/th&gt;
&lt;td&gt;Body 1,1&lt;/td&gt;
&lt;td&gt;Body 1,2&lt;/td&gt;
&lt;td&gt;Body 1,3&lt;/td&gt;
&lt;td&gt;Body 1,4&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Body 2,1&lt;/td&gt;
&lt;td&gt;Body 2,2&lt;/td&gt;
&lt;td&gt;Body 2,3&lt;/td&gt;
&lt;td&gt;Body 2,4&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;th rowspan="2"&gt;Bottom Two&lt;/th&gt;
&lt;td&gt;Body 3,1&lt;/td&gt;
&lt;td&gt;Body 3,2&lt;/td&gt;
&lt;td&gt;Body 3,3&lt;/td&gt;
&lt;td&gt;Body 3,4&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Body 4,1&lt;/td&gt;
&lt;td&gt;Body 4,2&lt;/td&gt;
&lt;td&gt;Body 4,3&lt;/td&gt;
&lt;td&gt;Body 4,4&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;tfoot&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;td&gt;Footer 1&lt;/td&gt;
&lt;td&gt;Footer 2&lt;/td&gt;
&lt;td&gt;Footer 3&lt;/td&gt;
&lt;td&gt;Footer 4&lt;/td&gt;
&lt;/tr&gt;
&lt;/tfoot&gt;
&lt;/table&gt;
</pre>
<button class="btn">
<a href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_id1">Try Yourself</a>
</button>
<h3>Form Tag</h3>
<div class="form-tag">
<table>
<tr>
<th>Tag</th>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>&lt;form&gt;</td>
<td>Form</td>
<td>the parent tag for an HTML form.</td>
</tr>
</table>
<h3 class="form-child" >Child Tags of form tag:</h3>
<table>
<tr>
<th>Tag</th>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>&lt;input&gt;</td>
<td>Input</td>
<td>Specifies an input field where the user can input data.</td>
</tr>
<tr>
<td>&lt;textarea&gt;</td>
<td>Text area</td>
<td>Defines a multi-line text input control.</td>
</tr>
<tr>
<td>&lt;button&gt;</td>
<td>Button</td>
<td>Defines a clickable button.</td>
</tr>
<tr>
<td>&lt;select&gt;</td>
<td>Select</td>
<td>Used to create a drop-down list.</td>
</tr>
<tr>
<td>&lt;fieldset&gt;</td>
<td>Fieldset</td>
<td></td>
</tr>
<tr>
<td>&lt;option&gt;</td>
<td>Option</td>
<td>Used to group related elements in a form.</td>
</tr>
<tr>
<td>&lt;optgroup&gt;</td>
<td>Option Group</td>
<td>Used to group related options in a &lt;select&gt; element(drop-down list).</td>
</tr>
<tr>
<td>&lt;label&gt;</td>
<td>Label</td>
<td>Defines a lable foe several elements.</td>
</tr>
<tr>
<td>&lt;output&gt;</td>
<td>Output</td>
<td>Used to represent the result of a calculation (like one performed by a script).</td>
</tr>
</table>
</div>
<h3>Sample code</h3>
<pre>&lt;form&gt;
&lt;fieldset&gt;
&lt;legend&gt;Describes fieldset&lt;/legend&gt;
&lt;p&gt;
&lt;input type="radio" name="vertical" id="option1" value="top"&gt;
&lt;label for="option1"&gt;Top&lt;/label&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;label for="option2"&gt;
&lt;input type="radio" name="vertical" id="option2" value="bottom"&gt; Bottom
&lt;/label&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;label for="horizontal"&gt;
Horizontal:
&lt;/label&gt;
&lt;select id="horizontal" name="horizontal"&gt;
&lt;option value="left"&gt;Left&lt;/option&gt;
&lt;option value="middle"&gt;Middle&lt;/option&gt;
&lt;option value="right"&gt;Right&lt;/option&gt;
&lt;/select&gt;
&lt;/p&gt;
&lt;/fieldset&gt;
&lt;/form&gt;</pre>
<button class="btn">
<a href="https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_form_checkbox">Try Yourself</a>
</button>
</section>
</main>
</body>
</html>
@charset "utf-8";
/* CSS Document */
body{
font-family: "Courier New";
background-color: gainsboro;
}
h1.heading{
text-align: center;
color: #FB00EA;
background-color: aqua;
font-family: "Lucida Bright";
}
h3{
text-align: center;
}
table, td, th{
border: 3px solid #FF2B8E;
padding: 15px;
text-align: center;
}
table{
border-collapse: collapse;
width: 650px;
margin: 0 auto;
}
tr:hover{
background-color: antiquewhite;
}
.btn{
background-color: #F52326;
font-weight: 600;
}
.form-child{
text-align: left;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.