Build your Own Cheatsheet Challenge Project (HTML, CSS)

Hey everyone,

I uploaded the gist of my Cheat sheet Challenge project on GitHub.

Feel free to review and leave your feedback :slight_smile:

This is my very first work with HTML and CSS by myself without the guide of Codecademi.
I would like to know your suggestions about it. :slight_smile:

my html cheat sheet

my cheat sheet


My first cheatsheet!

Here is my cheatsheet please leave me some feedback on it if something is wrong.

Here’s my project!

This is mine on gist:
https://gist.github.com/xsky13/c4f865f49b96cd0cb8d7375ec5f5b62a
and on github pageshttps://xsky13.github.io/cheat-sheet/
And here’s the code:
(index.html)

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Types of inputs</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
  </head>
  <body>
    <h1 class="text-center">Types of inputs</h1>
    <table class="table table-hover d-block m-auto">
      <thead>
        <tr>
          <th>Tag attribute(type)</th>
          <th>Description</th>
          <th>Example</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><span class="code">text</span></td>
          <td>Will accept any kind of text/numerical values</td>
          <td><input type="text" class="form-control" value="text"></td>
        </tr>
        <tr>
          <td><span class="code">email</span></td>
          <td>Specifies email input, but will accept other characters</td>
          <td><input type="email" class="form-control" value="email@gmail.com"></td>
        </tr>
        <tr>
          <td><span class="code">number</span></td>
          <td>Will only accept numerical values</td>
          <td><input type="number" class="form-control" value="2020"></td>
        </tr>
        <tr>
          <td><span class="code">password</span></td>
          <td>Defines a password field. Since the password should be encrypted, the value will display in bullet form</td>
          <td><input type="password" class="form-control" value="password"></td>
        </tr>
        <tr>
          <td><span class="code">Submit</span></td>
          <td>This is an input used to submit form data</td>
          <td><input type="submit" class="form-control"></td>
        </tr>
        <tr>
          <td><span class="code">Radio</span></td>
          <td>The radio input lets you select from only one from a number of options </td>
          <td>
            <div class="form-check">
              <label class="form-check-label">
                <input type="radio" class="form-check-input" name="optradio">Male
              </label>
            </div>
            <div class="form-check">
              <label class="form-check-label">
                <input type="radio" class="form-check-input" name="optradio">Female
              </label>
            </div>
          </td>
        </tr>
        <tr>
          <td><span class="code">Reset</span></td>
          <td>After replacing input values, this input will reset the typed-in values
          for the previously written ones</td>
          <td>
            <form>
              <label for="fname">First name:</label><br>
              <input type="text" id="fname" name="fname" value="John" class="form-control"><br>
              <label for="lname">Last name:</label><br>
              <input type="text" id="lname" name="lname" value="Doe" class="form-control"><br>
              <input type="reset" class="form-control">
            </form>
          </td>
        </tr>
        <tr>
          <td><span class="code">Checkbpx</span></td>
          <td>Here, you can select any number of the given options</td>
          <td>
            <div class="form-check-inline">
              <label class="form-check-label">
                <input type="checkbox" class="form-check-input" name="optradio">I have a car
              </label>
            </div>
            <div class="form-check-inline">
              <label class="form-check-label">
                <input type="checkbox" class="form-check-input" name="optradio">I have a bike
              </label>
            </div>
            <div class="form-check-inline disabled">
              <label class="form-check-label">
                <input type="checkbox" class="form-check-input" name="optradio">I have a motorcycle
              </label>
            </div>
          </td>
        </tr>
        <tr>
          <td><span class="code">Color</span></td>
          <td>This input allows you to pick colors</td>
          <td><input type="color" class="form-control"></td>
        </tr>
        <tr>
          <td><span class="code">Date</span></td>
          <td>Will allow to pick a date for you</td>
          <td><input type="date" class="form-control"></td>
        </tr>
        <tr>
          <td><span class="code">File</span></td>
          <td>Will allow to pick a file from your file explorer</td>
          <td><input type="file" class="form-control"></td>
        </tr>
        <tr>
          <td><span class="code">Range</span></td>
          <td>This input is used for entering a number whose exact value is not important (like a slider control). The default value is 0 to 100, but you can set restrictions with the min, max, and step attributes</td>
          <td><input type="range" class="form-control"></td>
        </tr>
      </tbody>
    </table>
    <p class="text-center">These are not all of the input types. To see the whole list, vist <a href="https://www.w3schools.com/html/html_form_input_types.asp">this </a>page about input types</p>
  </body>
</html>


(style.css)

.code {
  background-color:rgb(223, 223, 223);
  color: rgb(232, 43, 43);
  font-family: monospace;
  font-weight: bold;
  border-radius: 5px;
  padding: 5px;
}
.table {
  width: 85% !important;
}

Hello everyone, I’m super excited to be here and to have completed my first project. :grinning:

Here’s the link to my take on it!

Hi everyone! This is my very first attempt at writing code. I welcome and appreciate any feedback you may have!

Here’s my cheatsheet project:
CSS Cheatsheet

Github: https://github.com/samyadel/html-css-cheatsheet
Live: https://samyadel.github.io/html-css-cheatsheet/

1 Like

Hey guys,

I’ve just done my first project on this cheatsheet.

I’ve been at it all day! Experimenting with CSS can get a bit long, so the actual table isn’t complete.
But I’ll be adding to it as I go along and learn new stuff - this is going to be a kind of a handbook for me for future reference.

The comments on the elements and functions are completely personal, but feel free to take the structure and CSS and add to it or make it your own!

P.S. adding code in text format to a page is painful!

My Cheatsheet

Sending love to all,
have a beautiful coding journey!

1 Like

My First Html page…I’ve learned a lot from starting day . Thanks Codeacademy :slight_smile:

Here is my first project. Please visit and comment !!! :slight_smile: