Hello everyone,
Here is my solution of the challenge to build your own cheat sheet. It may not be perfect but I’m still learning and improving and open to suggestions on ways to improve my work.
Here is the link to my GitHub repo: GitHub - ■■■■-Ogah2020/Cheat-Sheet-Project: Cheat Sheet for html tables
Thanks and I hope you check it out and drop a comment or suggestion.
Aloha fellow coders,
I’m still figuring out GitHub, but have successfully added a page for the cheatsheet project.
Repo: GitHub - amyynw/amyynw.github.io
Webpage: HTML Table Reference
Any feedback is welcomed and appreciated.
Mahalo!
Amy
Hello fellow coders.
Here is my project: HTML Cheat Sheet!
Repo: GitHub - jnysms/html-cheat-sheet: HTML Cheat Sheet
I have some experience but I’m still solidifying my knowledge base. Any feedback or comments are appreciated. Cheers!
I like the bright color/contrast you chose for your header!
I like how you chose to do an example of code and break the sections down. Appreciate how you have so many different colors for the code. Cool site!
Here’s mine:
I decided to make a cheatsheet for box positioning because it’s the most confusing for me. Here is my site: CSS Box Positioning Reference.
Here is my github repository: the code.
I made my color theme from a picture of toffee pudding on some cake using imagecolorpicker.
Please leave me some feedback!
I liked your table! Here are a couple things that I appreciated:
I didn’t see anything in your code that could be improved, I actually learned a few new things looking at it. I guess the only thing I would suggest improving is the content. Maybe add a table to show some CSS tips to make the table look like yours.
Great job!
Hi there!
Here’s my cheatsheet assignment. All your comments and feedback are welcome, thank you!
Kindly rate my project. Thanks!! https://github.com/subhamaich/big-o-cheatsheet
Very nice style … 
I’ve never really posted to forums before so I don’t know if this is the right way to reply. I’ve been rather quiet in the Codecademy community tbh. I’m a little shy about my work.
Here is my version of the Build Your Own Cheatsheet Challenge project. I decided to fiddle with the colour scheme because it told me I could make it different and I prefer cyan over purple. I know the original colors though if it needs to be changed. I also chose to go with a flexible table width rather than a specific width.
Here is my Cheatsheet Challenge 
live: WebDev Cheatsheet
gist: Cheatsheet Challenge · GitHub
Found a CSS reset template and made a small css display cheat sheet! take a look at it 
<!DOCTYPE html>
<html>
<head>
<title>CSS Cheat Sheet</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=New+Amsterdam&display=swap" rel="stylesheet">
</head>
<body>
<header><h1>CSS Display models</h1></header>
<div class="intro">
<h2>Just a quick reminder of how each of the following display values mean</h2>
</div>
<table>
<tr class="col_headers">
<th scope="col">Inline</th>
<th scope="col">Block</th>
<th scope="col">Inline-Block</th>
</tr>
<tr>
<td>Elements displayed Inline, will have the size of their contents and cannot
be specified. Inline elements do not force a new line to be placed and are
placed next to other inline elements
</td>
<td>
Block elements take a whole row to be placed and can be specified dimensions.
</td>
<td>
Inline-Block elements do not force a new row to be placed but can be specified
dimensions.
</td>
</tr>
</table>
</body>
</html>
/*CSS RESET*/
/*
1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
box-sizing: border-box;
}
/*
2. Remove default margin
*/
* {
margin: 0;
}
/*
Typographic tweaks!
3. Add accessible line-height
4. Improve text rendering
*/
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/*
5. Improve media defaults
*/
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
/*
6. Remove built-in form typography styles
*/
input, button, textarea, select {
font: inherit;
}
/*
7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/*
8. Create a root stacking context
*/
#root, #__next {
isolation: isolate;
}
/******************************************************************/
body {
font-family: Helvetica, Arial, sans-serif;
background-color: lightsalmon;
}
.intro {
height: 100px;
border-bottom: 1px solid black;
background-color: aquamarine;
}
.intro h2 {
text-align: center;
padding: 10px auto;
position: relative;
top: 30%;
}
header {
margin: 0;
box-sizing: border-box;
height: 200px;
background-color: blanchedalmond;
border-bottom: 1px solid black;
}
header h1 {
position: relative;
text-align: center;
top: 20%;
font-size: 60px;
font-family: 'New Amsterdam';
}
table {
display: inline-block;
table-layout: fixed;
width: 80%;
margin: 2% 10%;
background-color: aliceblue;
font-family:Arial, Helvetica, sans-serif;
}
table th {
font-size: larger;
}
table td {
font-size: x-large;
text-align: center;
}
table, th, td {
border-collapse: collapse;
border: 2px solid black;
}
No screenshot?
| Tag | Name | Description |
|---|---|---|
| <table> | Table | The wrapper element for all HTML tables. |
| <thead> | Table Head | The set of rows defining the column headers in a table. |
| <tbody> | Table Body | The set of rows containing actual table data. |
| <tr> | Table Row | The table row container. |
| <td> | Table Data | The table row container. |
| <tfoot> | Table Foot | The set of rows defining the footer in a table. |
