My solution:
https://www.codecademy.com/workspaces/67629678af4735f0b47b7d95
Im looking for a way to center the table. Does anybody know a way?
thanks in advance!
Looks nice! Using it hahaha
where can I find the codes?
Hi everyone, here my result of the project:
Live site url: Cheat Sheet
CSS Code: Cheat-Sheet/resources/css/styles.css at main · nurularifin83/Cheat-Sheet · GitHub
Please any feedback on this solution is welcome.
1 Like
hello,
my cheatsheet
Hi! This is my CSS Cheatsheet created in VSC and deployed on Github Pages: CSS Properties Cheatsheet.
Hello
Here is my solution for the challenge:
Created my cheat sheet in VSC, deployed on github pages, let me know what you think :3 Cheatsheet
First Dev project. // Cheat sheet with Table Ref//
take a look at my cheatsheet!
https://jwwilson1993.github.io/cheatsheet/
Happy New Year Peeps!
Just finished my cheatsheet!
Very basic I know but feel free to critique it as much as you like
SSCod3/My-First-Cheat-Sheet: First solo project
Happy Coding! 
Just finished my own cheatsheet. Decided to take the information found here and reformat it to fit the project guidelines. I have it up on my Github Pages here, and of course the code below.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic CSS Properties</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<header>
<h1>Basic CSS Properties</h1>
<p>Basic CSS properties separated by category</p>
</header>
<!-- Links to the different categories -->
<nav>
<ul>
<li><a href=#text>Text Properties</a></li>
<li><a href=#list>List Properties</a></li>
<li><a href=#border>Border Properties</a></li>
<li><a href=#font>Font Properties</a></li>
</ul>
</nav>
<!-- Main content -->
<!-- Text properties section -->
<section id="text">
<h2>Text Properties</h2>
<table>
<thead>
<tr>
<th>Tag</th>
<th>Description</th>
<th>Values</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="code">color</span></td>
<td>Sets the color of a text</td>
<td>RGB, hex, keyword</td>
</tr>
<tr>
<td><span class="code">line-height</span></td>
<td>Sets the distance between lines</td>
<td>normal, <em>number, length, %</em></td>
</tr>
<tr>
<td><span class="code">letter-spacing</span></td>
<td>Increase or decrease the space between characters</td>
<td>normal, <em>length</em></td>
</tr>
<tr>
<td><span class="code">text-align</span></td>
<td>Aligns the text in an element</td>
<td>left, right, center, justify</td>
</tr>
<tr>
<td><span class="code">text-decoration</span></td>
<td>Adds decoration to text</td>
<td>none, underline, overline, line-through</td>
</tr>
<tr>
<td><span class="code">text-indent</span></td>
<td>Indents the first line of text in an element</td>
<td><em>length, %</em></td>
</tr>
<tr>
<td><span class="code">text-transform</span></td>
<td>Controls the letters in an element</td>
<td>none, capitalize, uppercase, lowercase</td>
</tr>
</tbody>
</table>
</section>
<!-- List properties section -->
<section id="list">
<h2>List Properties</h2>
<table>
<thead>
<tr>
<th>Tag</th>
<th>Description</th>
<th>Values</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="code">list-style</span></td>
<td>Sets all the properties for a list in one declaration</td>
<td><em>list-style-type, list-style-position, list-style-image,</em> inherit</td>
</tr>
<tr>
<td><span class="code">list-style-image</span></td>
<td>Specifies an image as the list-item marker</td>
<td>URL, none, inherit</td>
</tr>
<tr>
<td><span class="code">list-style-position</span></td>
<td>Specifies where to place the list-item marker</td>
<td>inside, outside, inherit</td>
</tr>
<tr>
<td><span class="code">list-style-type</span></td>
<td>Specifies the type of list-item marker</td>
<td>none, disc, circle, square, decimal, decimal-leading-zero,
armenian, georgian, lower-alpha, upper-alpha, lower-greek,
lower-latin, upper-latin, lower-roman, upper-roman, inherit</td>
</tr>
</tbody>
</table>
</section>
<!-- Border properties section -->
<section id="border">
<h2>Border Properties</h2>
<table>
<thead>
<tr>
<th>Tag</th>
<th>Description</th>
<th>Values</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="code">border</span></td>
<td>Sets all the border properties in one declaration</td>
<td><em>border-width, border-style, border-color</em></td>
</tr>
<tr>
<td><span class="code">border-bottom</span></td>
<td>Sets all the bottom border properties in one declaration</td>
<td><em>border-bottom-width, border-bottom-style, border-bottom-color</em></td>
</tr>
<tr>
<td><span class="code">border-bottom-color</span></td>
<td>Sets the color of the bottom border</td>
<td><em>border-color</em></td>
</tr>
<tr>
<td><span class="code">border-bottom-style</span></td>
<td>Sets the style of the bottom border</td>
<td><em>border-style</em></td>
</tr>
<tr>
<td><span class="code">border-bottom-width</span></td>
<td>Sets the width of the bottom border</td>
<td><em>border-width</em></td>
</tr>
<tr>
<td><span class="code">border-color</span></td>
<td>Sets the color of the four borders</td>
<td><em>color_name, hex_number, rgb_number,</em> transparent, inherit</td>
</tr>
<tr>
<td><span class="code">border-left</span></td>
<td>Sets all the left border properties in one declaration</td>
<td><em>border-left-width, border-left-style, border-left-color</em></td>
</tr>
<tr>
<td><span class="code">border-left-color</span></td>
<td>Sets the color of the left border</td>
<td><em>border-color</em></td>
</tr>
<tr>
<td><span class="code">border-left-style</span></td>
<td>Sets the style of the left border</td>
<td><em>border-style</em></td>
</tr>
<tr>
<td><span class="code">border-left-width</span></td>
<td>Sets the width of the left border</td>
<td><em>border-width</em></td>
</tr>
<tr>
<td><span class="code">border-right</span></td>
<td>Sets all the right border properties in one declaration</td>
<td><em>border-right-width, border-right-style, border-right-color</em></td>
</tr>
<tr>
<td><span class="code">border-right-color</span></td>
<td>Sets the color of the right border</td>
<td><em>border-color</em></td>
</tr>
<tr>
<td><span class="code">border-right-style</span></td>
<td>Sets the style of the right border</td>
<td><em>border-style</em></td>
</tr>
<tr>
<td><span class="code">border-right-width</span></td>
<td>Sets the width of the right border</td>
<td><em>border-width</em></td>
</tr>
<tr>
<td><span class="code">border-style</span></td>
<td>Sets the style of the four borders</td>
<td>none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit</td>
</tr>
<tr>
<td><span class="code">border-top</span></td>
<td>Sets all the top border properties in one declaration</td>
<td><em>border-top-width, border-top-style, border-top-color</em></td>
</tr>
<tr>
<td><span class="code">border-top-color</span></td>
<td>Sets the color of the top border</td>
<td><em>border-color</em></td>
</tr>
<tr>
<td><span class="code">border-top-style</span></td>
<td>Sets the style of the top border</td>
<td><em>border-style</em></td>
</tr>
<tr>
<td><span class="code">border-top-width</span></td>
<td>Sets the width of the top border</td>
<td><em>border-width</em></td>
</tr>
<tr>
<td><span class="code">border-width</span></td>
<td>Sets the width of the four borders</td>
<td>thin, medium, thick, <em>length,</em> inherit</td>
</tr>
</tbody>
</table>
</section>
<!-- Font properties section -->
<section id="font">
<h2>Font Properties</h2>
<table>
<thead>
<tr>
<th>Tag</th>
<th>Description</th>
<th>Values</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="code">font</span></td>
<td>Sets all the font properties in one declaration</td>
<td><em>font-style, font-variant, font-weight, font-size/line-height, font-family,</em> caption, icon,
menu, message-box, small-caption, status-bar, inherit</td>
</tr>
<tr>
<td><span class="code">font-family</span></td>
<td>Specifies the font family for text</td>
<td><em>family-name, generic-family,</em> inherit</td>
</tr>
<tr>
<td><span class="code">font-size</span></td>
<td>Specifies the font size of text</td>
<td>xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, <em>length, %,</em>
inherit</td>
</tr>
<tr>
<td><span class="code">font-style</span></td>
<td>Specifies the font style for text</td>
<td>normal, italic, oblique, inherit</td>
</tr>
<tr>
<td><span class="code">font-variant</span></td>
<td>Specifies whether or not a text should be displayed in a small-caps font</td>
<td>normal, small-caps, inherit</td>
</tr>
<tr>
<td><span class="code">font-weight</span></td>
<td>Specifies the weight of a font</td>
<td>normal, bold, bolder, lighter, <br>
100, 200, 300, 400, 500, 600, 700, 800, 900, inherit <br>
<strong>Careful, many of these are not supported!</strong>
</td>
</tbody>
</tr>
</table>
</section>
</body>
CSS:
/* Misc. formatting */
body {
overflow: visible;
font-family: Arial, Helvetica, sans-serif;
}
a {
text-decoration: none;
color: orange;
}
h2 {
text-align: center;
}
/* Header section */
header{
text-align: center;
overflow: visible;
}
/* Navbar */
nav {
position: sticky;
top: 0px;
background-color: Dodgerblue;
width: 100%;
z-index: 1;
}
nav ul {
list-style-type: none;
display: flex;
max-width: 600px;
margin: 0 auto;
}
li {
margin: 20px auto;
padding: 0 5px;
font-weight: bold;
}
/* Ensure that table titles aren't obscured by navbar when following the anchor elements */
section {
padding-top: 40px;
margin-top: -40px;
}
/* Table section */
table {
border: 4px solid dodgerblue;
min-width: 800px;
max-width: 1200px;
width: 80%;
margin: 0 auto;
border-collapse: collapse;
}
thead {
background-color: orange;
}
th, td {
border-bottom: 2px solid dodgerblue;
padding: 0.25em 0;
}
/* Set Column widths */
th:nth-child(1), td:nth-child(1) {
width: 20%;
}
th:nth-child(2), td:nth-child(2) {
width: 40%;
}
th:nth-child(3), td:nth-child(3) {
width: 40%;
}
/* Format the code snippets properly */
.code {
background-color: lightsteelblue;
font-family: monospace;
}
/* Color every other row */
tbody tr:nth-child(odd) {
background-color: bisque
}
Got a tiny bit ahead of myself with making the navbar sticky, but I think it’s better that way. I also found out that you can target the nth-child of an element in the CSS, which came in quite handy. The only other way I found online to achieve the same result would’ve been implementing in-line CSS styles in the HTML for each table, which isn’t exactly scalable.
Hi all this is my project
Here is my HTML Cheat Sheet!
github: GitHub - eliazar-lopez/HTML_Cheat_Sheet: a custom made cheat sheet for HTML
see it live: HTML Cheatsheet
index.html
Build Your Own Cheat Sheet!Using this cheat sheet will help!
style.css
body {
background-color: Sienna;
}
h1 {
text-align: center;
font-family: ‘Times New Roman’, Times, serif;
font-weight: 100;
font-size: medium;
}
table {
text-align: center;
border: 0.75em;
}
My humble attempt