Build your Own Cheatsheet Challenge Project (HTML, CSS)

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:

He terminado mi proyecto. Quise experimentar un poco y tal vez el archivo CSS es un desastre je je.

pueden ver la versión live aqui:
https://ezaguidark.github.io/ezaguidark

el repositorio de github:

Hi, I’m new here and this is my first project on HTML. Love to hear some suggestion from you <3

Here’s a link to my portfolio. It was nice learning how to use Github from the CLI

See the code below;

<meta charset="UTF-8">

<meta name="viewport" content="width=<device-width>, initial-scale=1.0">

<title>Cheat Sheet</title>

<link rel="stylesheet" type="text/css" href="./styles.css">
<header>

    <nav></nav>

    <h1>HTML Forms Cheat Sheat</h1>

    <p>Author: Pat McGroin</p>

</header>

<section>

    <table>

      <thead>

          <tr><th>Form Element</th><th>Description</th></tr>

        </thead>

      <tbody>

          <tr><td>&ltform&gt</td><td>Used to collect and send information to an external source</td></tr>

          <tr><td>&ltinput&gt</td><td>Used to render a variety of input fields on a webpage including text fields, check buttons etc</td></tr>

          <tr><td>&ltlabel&gt</td><td>Provides identification for a specific input based on matching value's of the &ltinput&gt's id attribute and for attribute of the &ltlabel&gt </td></tr>

          <tr><td>&ltselect&gt</td><td>Used to create a drop down list with choices using one or more &ltoption&gt element</td></tr>

          <tr><td>&ltdatalist&gt</td><td>used as a basic search/autocomplete functionality paired with an &ltinput&gt element for users</td></tr>

          <tr><td>&lttextarea&gt</td><td>Used to create a textbox for multi-line input</td></tr>

      </tbody>

      <tfoot><tr><td colspan="2">For more info about other form elements, please visit the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form" target="_blank">mozilla documentation</a></td></tr></tfoot>

    </table>

</section>

<br/>

<section>

    <table>

        <thead>

            <tr><th colspan="2">Input Element Types</th></tr>

            <tr><th>Type</th><th>Description</th></tr>

          </thead>

          <tbody>

            <tr><td>&ltinput&gt:Text type</td><td>declares input as text</td></tr>

            <tr><td>&ltinput&gt:Password type</td><td>declares input as password and hides the data</td></tr>

            <tr><td>&ltinput&gt:Checkbox type</td><td>declares input as checkbox, users can choose multiple options</td></tr>

            <tr><td>&ltinput&gt:Radio button type</td><td>declares input as radio, users have to choose only one option among the available choices</td></tr>

          </tbody>

    </table>

</section> 

For CSS, see below;

body{

background-color: lightskyblue ;

}

p{ font-family: Arial; opacity:0.5;}

h1{

font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

font-weight: lighter;

color:blueviolet;

}

table

{

background-color:lightblue;

border:solid;

width: 600px;

margin-left: 100px;

border-collapse:collapse;

}

th {background-color: royalblue; text-transform: uppercase; text-align: center;color: whitesmoke;}

th,td {border: 1px solid black;padding:7px;}

td,th {font-family: Arial, Helvetica, sans-serif;}

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

Hi all,

Having started the webdev course yesterday, here is my attempt at this challenge project.

My Cheatsheet - GitHub

I’m sure the CSS code could be much tidier, but any feedback on any part of this would be appreciated.

Thanks!