Skip to content

Instantly share code, notes, and snippets.

@JavierVargas97

JavierVargas97/index.html

Last active March 25, 2023 00:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JavierVargas97/ff3fc8289879c15c35d51c1021f0af16 to your computer and use it in GitHub Desktop.
Save JavierVargas97/ff3fc8289879c15c35d51c1021f0af16 to your computer and use it in GitHub Desktop.
Download ZIP
Html Cheatsheet
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Cheat sheet</title>
</head>
<body>
<nav>
<ul>
<li><a href="#row-html">HTML</a></li>
<li><a href="#row-css">CSS</a></li>
<li><a href="#footer">About</a></li>
</ul>
</nav>
<header>
<h1>HTML Tables <span class="red">Cheatsheet</span></h1>
</header>
<!-- HTML TABLES -->
<table>
<tr class="row-html" id="row-html">
<th>Tag</th>
<th>Name</th>
<th>Description</th>
</tr>
<tr class="row-1">
<td>
<p> &lt;table&gt; </p>
</td>
<td>
<p> Table </p>
</td>
<td>
<p> The wrapper element for all HTML tables.</p>
</td>
</tr>
<tr class="row-2">
<td>
<p> &lt;thead&gt; </p>
</td>
<td>
<p>Table Head</p>
</td>
<td>
<p> The set of rows defining the column headers in a table. </p>
</td>
</tr>
<tr class="row-3">
<td>
<p> &lt;tr&gt; </p>
</td>
<td>
<p>Table Row </p>
</td>
<td>
<p> The table row container </p>
</td>
</tr>
<tr class="row-4">
<td>
<p> &lt;td&gt; </p>
</td>
<td>
<p> Table Data </p>
</td>
<td>
<p>The table data container. </p>
</td>
</tr>
<tr class="row-5">
<td>
<p> &lt;tbody&gt; </p>
</td>
<td>
<p>Table Body </p>
</td>
<td>
<p> The set of rows containing actual table data. </p>
</td>
</tr>
<tr class="row-6">
<td>
<p> &lt;tfoot&gt; </p>
</td>
<td>
<p>Table foot </p>
</td>
<td>
<p> The set of rows defining the footer in a table. </p>
</td>
</tr>
</table>
<!-- CSS TABLE -->
<h1>CSS Selectors <span class="css">Cheatsheet</span> </h1>
<table>
<tr class="row-css" id="row-css">
<th>Tag</th>
<th>Name</th>
<th>Description</th>
</tr>
<tr class="row-1">
<td>
<p> &lt;(select)&gt; </p>
</td>
<td>
<p> Type </p>
</td>
<td>
<p> This Selector is used when we need to select an element based on its HTML Tag.</p>
</td>
</tr>
<tr class="row-2">
<td>
<p> &lt;(“.sort”)&gt; </p>
</td>
<td>
<p>Class</p>
</td>
<td>
<p> This selector is used when we need to select elements based on their Class name. </p>
</td>
</tr>
<tr class="row-3">
<td>
<p> &lt;(“#offers”)&gt; </p>
</td>
<td>
<p>ID </p>
</td>
<td>
<p> This selector is used when we need to select elements based on its ID </p>
</td>
</tr>
<tr class="row-4">
<td>
<p> &lt;(“#offers + a”)&gt; </p>
</td>
<td>
<p> Adjacent Sibling </p>
</td>
<td>
<p> This selector is used when we need to select the Immediate sibling with reference to the current
element </p>
</td>
</tr>
<tr class="row-5">
<td>
<p> &lt;(“.sort select”)&gt; </p>
</td>
<td>
<p>Descendant </p>
</td>
<td>
<p> As the name suggests, this selector is used when we need to select descendants of the parent
element. </p>
</td>
</tr>
<tr class="row-6">
<td>
<p> &lt;(“.sort > select”)&gt; </p>
</td>
<td>
<p>Child </p>
</td>
<td>
<p> This selector is used when we need to select direct child elements for the given parent element.</p>
</td>
</tr>
</table>
<!-- Footer -->
<footer id="footer"> This page was created by Javier Vargas.</footer>
</body>
</html>
Raw
style.css
body {
background-color: #FFFAE5;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
background-color: rgb(187, 201, 185);
text-align: center;
}
nav li {
display: inline-block;
width: 20%;
margin-right: -4px;
opacity: .9;
}
a {
color: #2E2D2D;
font-family: 'Times New Roman', Times, serif;
font-size: 25px;
}
table .row-html {
background-color: #cd7228;
border-collapse: collapse;
width: 100px;
font-size: larger;
}
table {
margin: 0 auto;
}
h1 {
font-family: 'Courier New', Courier, monospace;
text-align: center;
font-size: 50px;
}
td,
th {
text-align: left;
border: 1px solid #2E2D2D;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
p {
font-family: 'Times New Roman', Times, serif;
text-align: left;
}
span {
color: brown;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-weight: 700;
}
.css {
color: blue;
}
table .row-css {
background-color: #2877d1;
border-collapse: collapse;
width: 100px;
font-size: larger;
}
footer {
color: #2E2D2D;
opacity: .8;
display: flex;
padding: 45px;
float: right;
}
@JavierVargas97
Copy link
Author

This page was created for the Codecademy Challenge, please see the page for feedback comments! ⚡️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment