Build your Own Cheatsheet Challenge Project (HTML, CSS)

Had fun in completing the challenge. Did not exactly follow the rules.https://gist.github.com/7a510b31ed3f12cc0aafadc5cb69a840

Here’s my first try

here is my first Html Page for Table Refrence please rate it!!!

Here is my first (ever) HTML/CSS project!

Thanks Codecademy!

This is the cheatsheet I set up: https://github.com/Paul361Smith/Codecademy01

As anyone can see, design is not my forte!

I’d interested in any comments on the code.

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