Build Your Own Cheat Sheet with HTML & CSS

Web Development Front-End
1

Hi All,

Another project completed named Build Your Own Cheat Sheet representing a cheat sheet for HTML Table tag.

I would love any honest feedback regarding this page which will help me to progress further in web development career.

Please check this out on my GitHub @ naiyagpatel/ BuildingCheatSheet

Thank you all on spending time looking into my creation.

Update you soon with my next project until then stay safe and Happy Coding :slight_smile:

Naiya

1 Like
2

Your HTML lacks two vitally important lines that should appear before anything else in the HEAD…

 <meta charset="UTF-8"/>
 <title>HTML `table` Cheatsheet</title>

With that encoding declared you can replace all the entities with the actual characters.

Will continue reading and possibly return with more comments.

Back…

I didn’t see a <caption/> in your table. That is a required element per accessibility guidelines. Unfortunately I cannot find a paste-in validator. One must have a web mounted site to be assessed and there is likely a fee. Sucks. Back in the day we could test our code for free. Not no more, it seems.

2 Likes
3

There’s a free paste-in html validator here: W3 Validator: Direct Input. That page also links to a validator for css.

4

We could always count on W3C for markup and style sheet validation, but there is little or no free validation drive-by service for accessibility compliance. That now seems to be on a subscriber domain basis.

5

Good day all
Can you please give me an hint of what this project is all about: CSS:Build Your Own Cheat Sheet

6

Hi everyone,

I will be adding more notes later but this is what I have so far.

https://github.com/jvargas7130/html-css-cheatsheet-starting.git

7

Hello everyone:)
Just finished my Cheat-Sheet and want to share ,may it helps with the idea…
Also will be helpful to get feedbacks:)
thanks
How it looks:
https://leravolt.github.io/mycss-htmlcheatsheet/

https://github.com/LeraVolt/mycss-htmlcheatsheet/blob/main/index.html

2 Likes
8

Hi everyone;
I have finished my Challenge Project: Build Your Own Cheat Sheet. I would appreciate any feedback.
here is my code,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="styles.css" type="text/css" rel="stylesheet"> 
        <title>Cheat Sheet</title>
  </head>
  <body>
    <h1>HTML Table</h1>

    <h2>Table Tags</h2>

    <table>
      <thead>
        <tr>
          <th>Tag</th>
          <th>Name</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>&lttable&gt</td>
          <td>Table</td>
          <td>Represents tabular data</td>
        </tr>

        <tr>
          <td>&ltth&gt</td>
          <td>Table Header</td>
          <td>Defines a cell as the header of a group of table cells</td>
        </tr>

        <tr>
          <td>&lttr&gt</td>
          <td>Table Row</td>
          <td>Defines a row in a table</td>
        </tr>

        <tr>
          <td>&lttd&gt</td>
          <td>Table Data Cell</td>
          <td>Defines a cell of a table that contains data</td>
        </tr>

        <tr>
          <td>&ltthead&gt</td>
          <td>Table Head</td>
          <td>Defining the head of the columns of the table</td>
        </tr>

        <tr>
          <td>&lttbody&gt</td>
          <td>Table Body</td>
          <td>Groups the body content in a table</td>
        </tr>

        <tr>
          <td>&lttfoot&gt</td>
          <td>Table Foot</td>
          <td>Defines a set of rows summarizing the columns of the table</td>
        </tr>

        <tr>
          <td>&ltcaption&gt</td>
          <td>Table Caption</td>
          <td>Element specifies the caption (or title) of a table</td>
        </tr>

        <tr>
          <td>&ltcolgroup&gt</td>
          <td>Table Column Group</td>
          <td>Defines a group of columns within a table</td>
        </tr>

        <tr>
          <td>&ltcol&gt</td>
          <td>Table Column</td>
          <td>
            Element Specifies column properties for each column within a
            &ltcolgroup&gt elemente
          </td>
        </tr>
      </tbody>
    </table>

    <h2>Table Attributes</h2>

    <table>
      <thead>
        <tr>
          <th>Tag</th>
          <th>Name</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>colspan</td>
          <td>Column Span</td>
          <td>Defines how many columns a td element should span</td>
        </tr>

        <tr>
          <td>rowspan</td>
          <td>Row Span</td>
          <td>Defines how many rows a td element should span</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0,
}

body {
  background-color: rgb(240,248,255);
  font-family: "Lucida Console", Courier, monospace;
  text-align: center;
  font-size: 16px;
  overflow: scroll;
}

h1 {
  color: rgb(40, 58, 70);
  font-size: 2.8em;
}

h2 {
  padding: 30px 10px;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  border-radius: 5px 5px 0 0;
  margin: 0 auto;
  background-color: white;
  width: 70%;
  text-align: left;
  margin-bottom: 40px;
}

thead {
  
}

th {
  color: rgb(240,248,255);
  background-color: rgb(40, 58, 70);
  padding: 25px 20px;
}

tr td {
  padding: 20px 20px;
  border-bottom: 0.5px solid rgb(40, 58, 70);
}

https://github.com/jpr-23/cheatsheet.github.io.git

9

hey everyone please check out my cheatsheet that I have built, id love some feedback.

10

Hello fellow coders, here is my project, you are welcome to fork my repository and create a pull request if you feel there is a better way to code something, you are also welcome to comment here with the same

Thank you

Project Github Page: HTML & CSS Cheat Sheet

Github Repository: GitHub - MariaRoDigital/HTML-and-CSS-Cheatsheet

11

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

1 Like
12

This is a clean cheat sheet, nice colors, not too many fonts, my eyes thank you :slightly_smiling_face: