Build your Own Cheatsheet Challenge Project (HTML, CSS)

Here is my project. If anyone whant’s to see it. Thank you for your time
HTML Table Reference

Web Development Cheat Sheet

Straightforward project. I wanted to be more creative but did not want to take too much time. Overall, I understand how to build tables and use proper selectors in CSS.

Hello everyone!
I just finished my project, which will be updated during the course with the most important topics. I would love to get some feedbacks and know how you would improve it!

Repo: GitHub - Andre-DM/Coding-Cheat-Sheet: Coding Cheat Sheet Project for Codecademy
Live site: HTML Cheatsheet

2 Likes

Hi!

Here’s my finished project!

Here is my cheatsheet~! Please let me know what you think

Hi, I’m Monica and this is my cheatsheet with CSS table elements from github.
I agree with @djuliny the hardest part was git & github :sweat_smile:

https://github.com/Monica-tech75/stylesheet-project/commit/d8599726395f66429feb31fc6b88095db5c650d2

Still not sure i get it all but thanks codecademy and all people around.

Wow you did a good job! I am looking forward to your javascript part!

1 Like

Thank you! I hope I will be able to meet your expectations!

Here is my simple solution, for the effect, please visit my.git.io
My project is here project page

Hey everyone!
Here is my take on the Cheatsheet project. Never mind the colors - I was just having fun.

Hey guys, please review my work

Hello here is my proyect:

gist
GITHUB

Hello guys here is gist by me on CSS3 Cheat Sheet

Only one word can describe this and it’s clean. Great job with this. I can’t think of a single critique and I combed through the code pretty intensively.

If I absolutely had to suggest something, perhaps you could’ve specified the scope of the rows like you did with the columns but that’s literally all I can think of.

Great job! :+1:

Be wary of the order you’re placing your header tags. Remember to always start with h1 and work your way down as you add descending header tags.

Other than that, solid work :+1:

1 Like

Please check out my code:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  <title>Common HTML Tags and CSS Properties</title>
</head>
<body>
  <h1>Common HTML Tags and CSS Properties</h1>
  
  <h2>HTML Tags</h2>
  
  <table>
    <thead>
      <tr>
        <th>Tag</th>
        <th>Description</th>
        <th>Example</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>&lt;a&gt;</td>
        <td>Anchor (link)</td>
        <td>&lt;a href="https://www.example.com"&gt;Link&lt;/a&gt;</td>
      </tr>
      <tr>
        <td>&lt;p&gt;</td>
        <td>Paragraph</td>
        <td>&lt;p&gt;This is a paragraph.&lt;/p&gt;</td>
      </tr>
      <tr>
        <td>&lt;img&gt;</td>
        <td>Image</td>
        <td>&lt;img src="image.jpg" alt="Image"&gt;</td>
      </tr>
      <tr>
        <td>&lt;ul&gt;</td>
        <td>Unordered list</td>
        <td>
          &lt;ul&gt;
          <br>
          &nbsp;&nbsp;&lt;li&gt;Item 1&lt;/li&gt;
          <br>
          &nbsp;&nbsp;&lt;li&gt;Item 2&lt;/li&gt;
          <br>
          &lt;/ul&gt;
        </td>
      </tr>
      <tr>
        <td>&lt;ol&gt;</td>
        <td>Ordered list</td>
        <td>
          &lt;ol&gt;
          <br>
          &nbsp;&nbsp;&lt;li&gt;Item 1&lt;/li&gt;
          <br>
          &nbsp;&nbsp;&lt;li&gt;Item 2&lt;/li&gt;
          <br>
          &lt;/ol&gt;
        </td>
      </tr>
      <tr>
        <td>&lt;table&gt;</td>
        <td>Table</td>
        <td>
          &lt;table&gt;
          <br>
          &nbsp;&nbsp;&lt;tr&gt;
          <br>
          &nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Cell 1&lt;/td&gt;
          <br>
          &nbsp;&nbsp;&nbsp;&nbsp;&lt;td&gt;Cell 2&lt;/td&gt;
          <br>
          &nbsp;&nbsp;&lt;/tr&gt;
          <br>
          &lt;/table&gt;
        </td>
      </tr>
      <tr>
        <td>&lt;form&gt;</td>
        <td>Form</td>
        <td>
          &lt;form action="/submit </td>
        </tr>
      </tbody>
    </table>

          <h2>CSS Properties</h2>
  
  <table>
    <thead>
      <tr>
        <th>Property</th>
        <th>Description</th>
        <th>Example</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>color</td>
        <td>Text color</td>
        <td>color: blue;</td>
      </tr>
      <tr>
        <td>font-size</td>
        <td>Font size</td>
        <td>font-size: 16px;</td>
      </tr>
      <tr>
        <td>font-weight</td>
        <td>Font weight</td>
        <td>font-weight: bold;</td>
      </tr>
      <tr>
        <td>text-align</td>
        <td>Text alignment</td>
        <td>text-align: center;</td>
      </tr>
      <tr>
        <td>background-color</td>
        <td>Background color</td>
        <td>background-color: #f5f5f5;</td>
      </tr>
      <tr>
        <td>width</td>
        <td>Width of an element</td>
        <td>width: 200px;</td>
      </tr>
      <tr>
        <td>height</td>
        <td>Height of an element</td>
        <td>height: 150px;</td>
      </tr>
      <tr>
        <td>margin</td>
        <td>Outer margin of an element</td>
        <td>margin: 10px;</td>
      </tr>
      <tr>
        <td>padding</td>
        <td>Inner padding of an element</td>
        <td>padding: 20px;</td>
      </tr>
      <tr>
        <td>border</td>
        <td>Border around an element</td>
        <td>border: 1px solid #ccc;</td>
      </tr>
      <tr>
        <td>display</td>
        <td>Display behavior of an element</td>
        <td>display: block;</td>
      </tr>
      <tr>
        <td>position</td>
        <td>Positioning of an element</td>
        <td>position: relative;</td>
      </tr>
      <tr>
        <td>float</td>
        <td>Float an element to the left or right</td>
        <td>float: left;</td>
      </tr>
      <tr>
        <td>clear</td>
        <td>Clear floating elements</td>
        <td>clear: both</td>
      </tr>
    </table>

CSS

body {
  font-family: Arial, sans-serif;
}

table {
  width: 80%;
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
}

th, td {
  padding: 10px;
  border: 1px solid #ccc;
}

th {
  background-color: #f5f5f5;
  font-weight: bold;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

h1 {
    text-align: center;
    font-size: 50px;
  }
  
h2 {
    text-align: center;
    padding-top: 10px;
  }
type or paste code here

Hey there! For big chunks of code like this, would you mind creating a Codecademy workspace? This lets us view the code in its entirety and how it’s displayed visually. Thank you!

1 Like

What you did there was fantastic brother, I just got inspired on how I should make mine unique as well.

Thank for your review. I appreciate it.

1 Like