Build your Own Cheatsheet Challenge Project (HTML, CSS)

Hi people!

Here is my code. Thank you if you took the time to click on it and check it!

Glad I’m not the only one that went a little overboard, haha! Hope you guys like it.
The hardest part was learning how to push to GitHub pages:
Github Repository
Live Site

I LOVE THIS. I did something similar, though the sticky nav you used is much better than my static one. Great job!

Thanks, I just wanted something that felt minimal, smooth and snappy. I’ll probably update it with more VS Code setup and add some JavaScript and React tips when I get some time. I like your use of the details element for disclosure items. My suggestion for your code snippets would be to try displaying them using styled code elements instead of images. That way they can be more accessible and adaptive to high resolution displays.

Here’s Mine… :stuck_out_tongue:
Constructive criticism gladly welcome

Echoing what other people have said - the hardest part was setting up the GIT and GITHUB account.

Anyway, here’s mine:

Here’s mine…

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>
      <p>Cliff's HTML and CSS Reference</p>
    </title>
    <link href="/styles.css" type="text/css" rel="stylesheet">
  </head>
  <body>
    <header>
      <h1>Cliff's HTML and CSS Cheat Sheet</h1>
      <nav>
        <ul>
          <li><a href="">Home</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h2>HTML Tags</h2>
      <p>You will find useful HTML and CSS cheat sheets in this reference material.</p>
      <table>
        <tr>
          <th>HTML Tag</th>
          <th>Name of Tag</th>
          <th>Use(s)</th>
        </tr>
        <tr>
          <td class="html-tags">&lt;table&gt;</td>
          <td>Table</td>
          <td>Used to create tables in an HTML document</td>
        </tr>
        <tr>
          <td class="html-tags">&lt;section&gt;</td>
          <td>Section</td>
          <td>For dividing content into sections</td> 
        </tr>
        <tr>
          <td class="html-tags">&lt;main&gt;</td>
          <td>Main</td>
          <td>The main tag is used to create the main content of the document.</td>
        </tr>
        <tr>
          <td class="html-tags">&lt;link&gt;</td>
          <td>Link</td>
          <td>This is used to link to external documents such as stylesheet or Javascript</td>
        </tr>
        <tr>
          <td class="html-tags">&lt;h1&gt;,&lt;h2&gt;,etc.</td>
          <td>Headings</td>
          <td>For creating headings in a document</td>
        </tr>
        <tr>
          <td class="html-tags">&lt;img&gt;</td>
          <td>Image</td>
          <td>The image tag is used to add an image from a external source to a document</td>
        </tr>
      </table>
      <h2>HTML Attributes</h2>
      <p>In this section, you will find HTML attributes that are used with the tags above.</p>
      <table>
        <tr>
          <th>Attribute</th>
          <th>Name</th>
          <th>Use(s)</th>
        </tr>
        <tr>
          <td class="html-attributes">required</td>
          <td>Required</td>
          <td>Used to make an input field required</td>
        </tr>
        <tr>
          <td class="html-attributes">class</td>
          <td>Class</td>
          <td>Used to group certain elements for styling purposes</td>
        </tr>
        <tr>
          <td class="html-attributes">id</td>
          <td>Required</td>
          <td>Used to make an input field required</td>
        </tr>
        <tr>
          <td class="html-attributes">href</td>
          <td>Hyperlink Reference</td>
          <td>Used to create hyperlinks and link the element to a URL</td>
        </tr>
      </table>
    </main>
    <footer></footer>
  </body>
</html>

Style

body {
  background-color: Azure;
  font-family: Georgia;
}
h1, h2 {
  text-align: center;
}
.html-tags, .html-attributes {
  font-family: monospace;
  background-color: Lavender;
}
table{
  border-collapse: collapse;
}
table, th, tr, td {
  border: 1px solid;
}
th {
  background-color: LightBlue;
}
li {
  list-style-type: none;
  display: inline;
}

Here’s mine that I made about CSS properties!

Here’s mine :slight_smile:

This is what I have so far, and I hope to continue adding to it and perhaps styling it better over time!

https://codenamecct.github.io/cheatsheet/

Happy coding!

1 Like

Here we go people, I will improvise it as the time and practise goes!

1 Like

Here’s my code: https://github.com/khanmazhar/Codecademy-Project-Cheatsheet-
Live here: www.mazharkhan.tk
Let me know how I can improve my code.
I had a hard time remembering some of the topics. Like I took the course on Codecademy but I had to go over it again, sometimes twice to complete this project. So how do I remember the old concepts while learning new ones. Any suggestions for a newbie?

I liked your Cheatsheet a lot.

CHEATSHEET PROJECT

Here’s my Cheat Sheet Project