Build your Own Cheatsheet Challenge Project (HTML, CSS)

Hello, karenbarcelos! You can change Tag title in tables as Property, and remove angle brackets of property names below it. For example, like this;

Have a good day :slight_smile:

1 Like

Hello, don’t hesitate to correct me, I’m here to learn!
Thank you

Github Repository: GitHub - AssiarDev/HTML-CHEATS-SHEETS: Small project from Codecademy. We had to create a cheat sheet on HTML or CSS.
Project Github Page : Html-css-cheatsheet-staring

Hi, this is my first post in this forum and here is my gist for this project. I wanted to do it in github, but it’s quite complicated to do, when I have time later, I will also post it in github.

Hello guys, this is my sample of the project cheat sheet please rate it

Hello, this is my first project of full stack skill path.
its a simple one

You can view it here:
https://trikumia.github.io/project2/

<!DOCTYPE HTML>
<html>
 <head>
   <title> Learning HTML and CSS</title>
   <link href="./styles.css" type="text/css" rel="stylesheet">
 </head>

 <body>
   <h1>Learning HTML and CSS</h1>

<!-- html table info -->
   <div class="html">
     <h2>HTML</h2>
     <p><span>H</span>yper<span>T</span>ext <span>M</span>arkup <span>L</span>anguage. Provides structure to the content appearing on a website, such as iamges, text, or videos</p>

     <div class="htmltags">
       <table>
         <thead>
           <tr>
             <th>tag</th>
             <th>description</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <th>&lt;header&gt;</th>
             <td><p>contains h1 - h6 heading</p></td>
           </tr>
           <tr>
             <th>&ltnav&gt;</th>
             <td><p>defines a block of navigation links such as menus and tables of contents</p></td>
           </tr>
           <tr>
             <th>&ltmain&gt;</th>
             <td><p>encapsulate the dominant contnent within a webpage</p></td>
           </tr>
           <tr>
             <th>&ltfooter&gt;</th>
             <td><p>the contnent at the bottom of the subject information. Contains information such as: contact info, copyright info, terms of use, site mapreferences</p></td>
           </tr>          
           <tr>
             <th>&ltsection&gt;</th>
             <td><p>Defines elements in a document, such aschapters, headings, or any other area of the document with the same theme</p></td>
           </tr> 
           <tr>
               <th>&ltarticle&gt;</th>
               <td><p>holds content that make sense on its own such as articles, blogs, comments etc.</p></td>
           </tr> 
           <tr>
               <th>&ltaside&gt;</th>
               <td><p>contains information that is related to the main content, but not required in order to understand the dominant information</p></td>
           </tr> 
             <tr>
               <th>&ltfigure&gt;</th>
               <td><p>encapsulates all types of media</p></td>
             </tr> 
             <tr>
               <th>&ltfigcaption&gt;</th>
               <td><p>is used to describe the media in &ltfigure&gt;</p></td>
             </tr> 
             <tr>
               <th>&ltvideo&gt;</th>
               <td rowspan="3" scope="colgroup"><p>used for media files</p></td>
             </tr> 
             <tr>
               <th>&ltembed&gt;</th>
             </tr> 
             <tr>
               <th>&ltaudio&gt;</th>
             </tr> 
         </tbody>
       </table>
     </div>
   </div>

<!-- css info -->
   <div class="css">
     <h2>Css</h2>
     <p><span>C</span>ascading <span>S</span>tyle <span>S</span>heets. Language use to style HTML content on a web page.</p>
     
     <h4>The Box Model</h4>
     <div class="cssboxmodel">
       <table>
         <thead>        
           <tr>
             <th>property</th>
             <th>description</th>
             <th>example</th>
           </tr>
         </thead>
         <tbody>
         <tr>
             <th>content</th>
             <td><p>The content of the box, where text and images appear</p></td>
           </tr>
           <tr>
             <th>width</th>
             <td><p>width of the content</p></td>
             <td><p> h1 {<br>width: 20px;<br>} </p></td>
           </tr>
           <tr>
             <th>height</th>
             <td><p>height of the contnent</p></td>
             <td><p> h1 {<br>height: 100px;<br>} </p></td>
           </tr>
           <tr>
             <th>padding</th>
             <td><p>the amount of space between the content area and the border.</p></td>
             <td><p> h1 {<br>padding: 5px;<br>} </p></td>
           </tr>
           <tr>
             <th>margin</th>
             <td><p>the amount of space between the border and the outside edge of the element</p></td>
             <td><p> h1 {<br>margin: 10px;<br>} </p></td>
           </tr> 
           <tr>
             <th>border</th>
             <td><p>the thickness and style of the border surrounding the content area and padding</p></td>
             <td><p> h1 {<br>border: 1px solid red;<br>} </p></td>
           </tr>   
           </tbody>  
       </table>
     </div>
   </div>

<footer>
 <h6>Created by Katerina Geroulakou</h6>
</footer>
 </body>
</html>

*{
    font-family: Tahoma;
  }
  p {
  color: #2F4F4F;
  text-align: justify;
  font-size: 12px;
  }
  
  span {
    font-size: 16px;
    font-weight: bold;
  }
  
  h1 {
    font-family: Garamond, serif;
    text-align: center;
    letter-spacing: 5px;
    color: #B22222;
    background-color: #fa8072;
  }
  
  h2, h4 {
    text-align: center;
    color: #2F4F4F;
  }
  
  
  body {
    background-color: #F8F8FF;
  }
  
  footer {
    font-family: Garamond, serif;
    color: #663399;
    background-color: #dda0dd;
    text-align: right;
    font-style: italic;
    padding: 0px 5px;
  }
  
  .htmltags{
    border: 1px solid #fa8072 ;
    text-align: left;
    padding: 5px;
    width: 700px;
    margin: 20px auto;
  }
  
  thead{
    text-align: center;
    background-color: #f5f5f5;
  }
  
  .htmltags th{
    color: #696969;
    border: 1px solid #2F4F4F ;
    background-color: #FAF0E6;
    padding: 0px 5px;
  }
  
  .htmltags td{
    color: #696969;
    border: 1px solid #2F4F4F;
    padding: 0px 5px;
  }
  
  .cssboxmodel {
    border: 1px solid #fa8072 ;
    text-align: left;
    padding: 5px;
    width: 600px;
    margin: 20px auto;
  }
  
  .cssboxmodel th {
    color: #696969;
    border: 1px solid #2F4F4F ;
    background-color: #FAF0E6;
    padding: 0px 5px;
  }
  
  .cssboxmodel td {
    color: #696969;
    padding: 0px 5px;
    border: 1px solid #2F4F4F ;
  }

I am thinking about cloning a Codecademy Cheat Sheet, can that be an acceptable solution ?

This is my gist for my first cheatsheet

Cheatsheet html:

Cheatsheet css:

Here is my cheat sheet on GitHub, please have a look and let me know any comments that you may have.

1 Like

Hi, everybody. This is my project. I would appreciate any feedback and corrections. Thanks.

2 Likes

Hi everyone!
sharing my solution :grinning:
Github: GitHub - RomchukAnton/CheatSheet: this is a challenge project from Codecademy. Build Your Own Cheat Sheet.
Live version: CSS Pseudo Class

1 Like

Hi, i just looked your submitted. The colors are awesome.

Here’s my very basic Cheat Sheet! https://github.com/EJFleet/Codecademy-css-project

https://aarongurovich.github.io/CheatSheetCodeAcademy/

Looks great! I like what you did with the h2 css. The only thing I’m not sure about whether we should use a h tag inside the footer?
Enjoy your studying!

So, I made a mistake :woman_facepalming: Didn’t read the instructions properly and missed the part where it says it has to be a table :sweat_smile:

So I made this Cheatsheet about the Box Model…

https://debh-2024.github.io/

After realising my mistake, I made another Cheatsheet with an actual table…

https://debh-2024.github.io/codecademy.table.cheatsheet/

1 Like

It says page not found :thinking:

Thank you, this was helpful

Hello there. Here is a link to my project GITHUB: GitHub - MandyonGit/HTML-Tables-Cheatsheet: This is a reference cheat sheet for HTML Tables using HTML and CSS code.
I would appreciate some feedback, thank you.

Hi everyone!!
I think there is still room for improvement.
When i open the page with my smartphone the screen size is not fully adjusted.
What can I do to fix this?
Thanks
live link: https://ben-seb.github.io/cheatsheet/
Github rep.: https://github.com/Ben-seb/Ben-seb.github.io/tree/0193d7a3ae5a531398fd2c09d3e1ba93d7275fd4/cheatsheet

Did we learn about Pseudoclass tags at some stage and I missed it? Copied your cheatsheet for future reference :smiley:

I like your formatting of the table. Looks great! Just one thing I saw was maybe use semantic header and footer tags in the html.

Enjoy studying!