Build your Own Cheatsheet Challenge Project (HTML, CSS)

Projects Challenge Projects
2264

This is my first time sharing. I’m still very new with VScode and was happy to get this to work! Please let me know if it renders ok for you!

2265

Hello all, loved seeing everyone’s cheatsheets. Here’s mine, I welcome your feedback. Thank you!

Cheatsheet

2266

Hello guys,

check my simple font cheatSheet project…

2267 
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS concepts</title>

<link rel="preconnect" href="https://fonts.googleapis.com">

<tr>
    <th>CSS code</th>
    <th>Description</th>
    <th>Selector</th>
    <th colspan="2">Declaration</th>
    
</tr>
<tr>
    <th></th>
    <th></th>
    <th></th>
    <th>Property</th>
    <th>Value</th>
</tr>
<tr>
    
    <td>th{color:blue;}</td>
    <td>changes the color of the text in the headings to blue</td>
    <td>th</td>
    <td>color</td>
    <td>blue</td>
</tr>
<tr>
    
    <td>table{border-color:blue;}</td>
    <td>changes the color of the borders to blue</td>
    <td>table</td>
    <td>border-color</td>
    <td>blue</td>
</tr>
<tr>
    
    <td>table{border:1px solid black;}</td>
    <td>creates a solid black border with thickness of 1px around the table</td>
    <td>table</td>
    <td>border</td>
    <td>1px solid black</td>
</tr>
<tr>
    
    <td>table{text-align: left;}</td>
    <td>Moves all heading texts in the table to the left, and also other texts if not specified</td>
    <td>table</td>
    <td>text allignment</td>
    <td>left</td>
</tr>

<tr>
    
    <td>table{border-collapse: collapse;}</td>
    <td>This will make the borders collapse into a single border and so eliminate double borders </td>
    <td>table</td>
    <td>border-collapse</td>
    <td>collapse</td>
</tr>
<tr>
    
    <td>td {background-color: yellow;}</td>
    <td>This will make the background color of the cells, apart from the heading, to turn yellow. </td>
    <td>td</td>
    <td>background-color</td>
    <td>yellow</td>
</tr>  
<tr>
    
    <td>table {background-color: yellow;}</td>
    <td>This will make the background color of all the cells to turn yellow. </td>
    <td>table</td>
    <td>background-color</td>
    <td>yellow</td>
</tr>  
<tr>
    
    <td>td {border-radius: 10px;}</td>
    <td>This will make the corners of the cells to be rounded instead of pointed. <br>Note: this will not work with border-collapse in place. </td>
    <td>td</td>
    <td>border-radius</td>
    <td>10px</td>
</tr> 

<tr>
    
    <td>th {border-style:dotted; }</td>
    <td>This will make the lines of the border around the headings to be dotted. Other styles include dotted <br>    
        dashed, solid, double, groove, ridge, inset, outset,none.</td>
    <td>th</td>
    <td>border-style</td>
    <td>dotted</td>
</tr>


table,th,td { border: 1px solid black; text-align: left; border-color:blue; } th{color:blue; border-style:dotted; } td { background-color: yellow; border-radius: 10px; } .monospace { font-family: "Lucida Console", Courier, monospace; background-color:beige; }
2268

Here is link to my “cheat sheet” project.

https://obitteleo.github.io/codecademy_project/

2269

Here is a link to my cheat sheet:
https://bens88-cloud.github.io/Cheat-Sheet/

2270

Hello! Here is my CheatSheet, Hope it is good enough, I’ve made it nice and simple for everyone to understand!

2271

This looks beautiful

2272

At first I thought you did this in Google Docs :slight_smile: Great job!

2273

Thanks!!
Thanks!!
Thanks!!

2274

Hi :wave:
See it live: https://gorgeous-lokum-7bf7b8.netlify.app
Use the browser’s inspect tool to view the code.

2275

This is the best I can do for now… It was a bit of a challenge, because I have a habit over thinking things. I was able to clean it up a bit though. What do you guys think?

HTML & Cheatsheet

HTML Table Reference

Table Tags

<table class="table">
  <thead>
    <tr>
      <th>Tag</th>
      <th>Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tr>
    <td>&lt;table&gt;</td>
    <td>Table</td>
    <td>The wrapper element for all HTML tables.</td>
  </tr>

  <tr>
    <td>&lt;thead&gt;</td>
    <td>Table Head</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;tr&gt;</td>
    <td>Table Row</td>
    <td>The table row container.</td>
  </tr>

  <tr>
    <td>&lt;td&gt;</td>
    <td>Table Data</td>
    <td>The table row container.</td>
  </tr>

  <tr>
    <td>&lt;tfoot&gt;</td>
    <td>Table Foot</td>
    <td>The set of rows defining the footer in a table</td>
  </tr>

  <td></td>
</table>
<br />
<br />
<table class="table">
  <header>
    <h2>Table Attributes</h2>
  </header>
  <thead>
    <tr>
      <th>Attribute</th>
      <th>Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tr>
    <td>&lt;colspan&gt;</td>
    <td>Column Span</td>
    <td>Defines how many columns a td element should span.</td>
  </tr>

  <tr>
    <td>&lt;rowspan&gt;</td>
    <td>Row Span</td>
    <td>Defines how many rows a td element should span.</td>
  </tr>
</table>
<footer></footer>

This is my css code below:

.serif {
font-family: Times, “Times New Roman”, Georgia, serif;
}

body {
border: 6px dashed;
border-color: darkslateblue;
margin: 50px 300px;
background-color: rgba(255,228,225, 0.5);
padding-bottom: 30px;

}

h1, h2{
text-align: center;
}

td {
border: 1px solid rgba(72,61,139,0.5);
}

table {
border: solid;
margin: 0, 100px;
}

header h1 {
color: darksalmon;
}

header h2 {
color: rebeccapurple;
background-color: rgba(233,150,122,0.45);
border: solid;
width: 500px;

}

th {
color: rgba(25,25,112,0.65);
background-color: rgb(233,150,122);
}

td {

}

.table, header h2 {
border: 2px solid rgba(72,61,139,0.5);
margin-left: auto;
margin-right: auto;
text-align: center;
width: 600px;
}

2276

Hello i would like to share my code for the review thank you!!!

2277

Hi, Here is my code fore review.

https://banana649.github.io/bananacheatsheet.github.io/

Thank you!

1 Like
2278

Hey there,

Please see my solution for the cheatsheet project: GitHub - lendarin/lendarin-s_cheatsheet: lendarin's_cheatsheet project for codecademy
Thanks for any comment in advance!