Build your Own Cheatsheet Challenge Project (HTML, CSS)

Well, this project is taking a while for me to code. Since HTML5 was not developed when I was learning HTML, I decided to use this project to review all of the new syntaxes associated with HTML5. Here is the link to the GitHub repository and this is the link to the live version.

The structure is complete for each section, but I still have some tags and attributes I need to add. I’m going to have less hours to work on this now that my PTO is done, but I’m hoping to have this finished by end of next week at the latest.

Note that at this time, I am facing the following issues, and thus the rows are not complete:

  • Autocomplete & novalidate - I have not figured out the server side for the form to complete the live example
  • Track - Subtitles are not displaying for the video

HTML and CSS Cheatsheet

Hello everyone, this is my first post, all feedback is welcome, what could be done better or what could be done in a different way?

Thank you all.

index.html

<!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="resources/style.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;700;900&display=swap" rel="stylesheet">
    <title>HTML & CSS Cheatsheet</title>
</head>

<body>
    <div class="html">
        <div class="h1-top-div">
            <h1>HTML & CSS</h1>
        
            <p><span class="top-p">This is some basic HTML and CSS.</span></p>
        </div>
        

        <h2>HTML Cheats</h2>

        <div class="h3p-html">

        <h3>The &ltdiv&gt</h3>
        <p>
            The <strong>&ltdiv&gt</strong> HTML element is the generic container for flow content. It
            has no effect on the content or layout until styled in some way using
            CSS (e.g. styling is directly applied to it, or some kind of layout
            model like Flexbox is applied to its parent element).
        </p>

        <h3>The &ltsection&gt</h3>
        <p>
            The <strong>&ltsection&gt</strong> HTML element represents a generic standalone section
            of a document, which doesn't have a more specific semantic element to
            represent it. Sections should always have a heading, with very few
            exceptions.
        </p>
        <div class="list">
            <ul>
                <li>&lth1&gtChoosing an Apple&lth1/&gt</li> <br>
                <li>&ltsection&gt</li>
                 <ul>           
                    <li>&lth2&gtIntroduction&lt/h2&gt</li>
                    <li>&ltp&gtThis document provides a guide to help with the important task of
                choosing the correct Apple. <br> &lt/p&gt</li>
                </ul>
                <li>&lt/section&gt</li>
                <br>
                <li>&ltsection&gt</li>
                    <ul>
                        <li>&lth2&gtCriteria&lt/h2&gt </li>
                        <li>&ltp&gt There are many different criteria to be considered when choosing
                an Apple — size, color, firmness, sweetness, tartness... <br> &lt/p&gt</li>
                    </ul>    
                <li>&lt/section&gt</li>
            </ul>
            
        </div>
        

        <h3>The &ltarticle&gt</h3>
        <p>
            The <strong>&ltarticle&gt</strong> HTML element represents a self-contained composition
            in a document, page, application, or site, which is intended to be
            independently distributable or reusable (e.g., in syndication). Examples
            include: a forum post, a magazine or newspaper article, or a blog entry,
            a product card, a user-submitted comment, an interactive widget or
            gadget, or any other independent item of content.
        </p>
        <h3>The &lttable&gt</h3>
        <p>
            The <strong>&lttable&gt</strong> HTML element represents tabular data — that is,
            information presented in a two-dimensional table comprised of rows and
            columns of cells containing data.
        </p>
        <div class="list">
        <ul>
        <li>&lttable&gt</li> 
            <ul>
                <li>&ltthead&gt</li>
            </ul>
                <ul>
                    <ul>
                <li>&lttr&gt</li> 
                <li>&ltth colspan="2"&gtThe table header&lt/th&gt</li>
                <li>&lt/tr&gt</li></ul>
                <li>&lt/thead&gt</li>
                </ul>
            
        
        <ul> 
            <li>&lttbody&gt</li>
                <ul>
                <li>&lttr&gt </li>
                    <li>&lttd&gtThe table body&lt/td&gt</li>
                    <li>&lttd&gtwith two columns&lt/td&gt</li> 
                    <li>&lt/tr&gt</li>
            </ul> 
            <li>&lt/tbody&gt</li> 
            
        </ul>
        <li>&lt/table&gt</li>
        </ul>
    </div>

        
        <div class="table">
            <tr>
            <th scope="row"><strong> Permitted content</th>
            <td>In this order:<td></strong>
                <ol>
                    <li>An optional &lt;caption&gt; element,</li>
                    <li>Zero or more &lt;colgroup&gt; elements,</li>
                    <li>An optional &lt;thead&gt; element,</li>
                    <li>Either one of the following:</li>
                        <ul>
                            <li>zero or more &lt;tbody&gt; elements</li>
                            <li>one or more &lt;tr&gt; elements</li>
                        </ul>
                    </li>
                    <li>An optional &lt;tfoot&gt; element</li>
                </ol>
            </td>
            </tr>
        </div>
        </div>

    <div class="css">
        <h2>CSS Cheats</h2>

        <div class="h3p-css">
        <h3>Linking style sheet</h3>
        <p>To link styles.css to index.html add the following line somewhere
            inside the <span class="classid">&lthead&gt</span> of the HTML document. <br>
        <br>
        <span class="classid">&ltlink rel="stylesheet" href="styles.css"&gt</span> <br>
        <br>
        This <span class="classid">&ltlink&gt</span> element tells the browser that we have a stylesheet, using the rel
        attribute, and the location of that stylesheet as the value of the href attribute.
        You can test that the CSS works by adding a rule to styles.css.</p>

        <h3>Class and ID Selectors</h3>
        <p>CSS classes can be reusable and applied to many elements.
            Class selectors are denoted with a period <span class="classid">.</span> followed by the class name.
            CSS ID selectors should be unique and used to style only a single element.
            ID selectors are denoted with a hash sign <span class="classid">#</span> followed by the id name.</p>
        <aside><em> /* Selects all elements with class="column" */ </em><br>
            <span class="aside-css">.column { }</span>
            <br>
            <br>
            <em>/* Selects element with id="first-item" */ </em><br>
            <span class="aside-css"> #first-item {}</span></aside>

        <h3>Groups of CSS Selectors</h3>
        <p>Match multiple selectors to the same CSS rule, using a comma-separated list. In this example, the text for
            both <span class="classid">h1</span> and <span class="classid">h2</span> is set to red.</p>

        <aside>h1, h2 {
            color: red;
            }</aside>

        <h3>Selector Chaining</h3>
        <p>CSS selectors define the set of elements to which a CSS rule set applies.
            For instance, to select all <span class="classid">&ltp&gt</span> elements,
            the <span class="classid">p</span> selector
            can be used to create style rules.</p>

        <h3>Chaining Selectors</h3>
        <p>CSS selectors can be chained so that rule sets apply only
            to elements that match all criteria. For instance, to select <span class="classid">&lth3&gt</span>
            elements that also have
            the <span class="classid">section-heading</span> class, the selector <span class="classid">h3.section-heading</span>  can be used.</p>

        <aside><em> /* Select h3 elements with the section-heading class */ </em><br>
            <span class="aside-css"> h3.section-heading {
            color: blue;
            }</span>
            <br>
            <br>
            <em> /* Select elements with the section-heading and button class */ </em><br>
            <span class="aside-css">.section-heading.button {
            cursor: pointer;
            }</span></aside>

        </div>
        
    </div>
    <footer>Created by Enrique Chavez.</footer>

</body>

</html>

style.css

body {
  background-color: hsl(30, 56%, 93%);
  padding: 0px 40px 0px 40px;
}

h1 {
  font-family: Poppins;
  font-weight: 900;
  font-size: 100px;
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
  margin: 5px;
  margin-bottom: -40px;
  color: hsl(0, 0%, 10%);
}

.h1-top-div {
  text-align: center;
}

span.top-p {
  font-family: Poppins;
  font-weight: 400;
  font-size: 15px;
  text-align: center;
  color: hsl(0, 0%, 10%);
}

h2 {
  font-family: Poppins;
  color: hsl(30, 56%, 93%);
  font-weight: 700;
  font-size: 40px;
  background-color: hsl(1, 81%, 73%);
  padding-left: 20px;
  margin-bottom: 80px;
  /*color 1: hsl(165, 15%, 58%);*/
}

h3 {
  font-family: Poppins;
  font-weight: 400;
  font-size: 25px;
  color: hsl(1, 81%, 73%);
  background-color: hsl(7, 72%, 92%);
  padding-left: 20px;
  margin-right: 60%;
}

.h3p-html p {
  font-family: Poppins;
  font-weight: 400;
  font-size: 14px;
  margin-right: 35%;
  margin-bottom: 65px;
}

.list {
  font-family: Poppins;
  font-weight: 400;
  font-size: 14px;
  background-color: hsl(164, 27%, 53%);
  margin: 40px 20px 40px 30px;
  padding: 20px 50px 20px 20px;
  border-radius: 30px;
  color: white;
  margin-right: 60%;
  list-style-type: none;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.list ul {
  list-style-type: none;
}

.table {
  font-family: Poppins;
  font-weight: 400;
  font-size: 14px;
  background-color: hsl(164, 27%, 53%);
  margin: 40px 20px 40px 30px;
  padding: 40px 50px 30px 50px;
  border-radius: 30px;
  color: white;
  margin-right: 60%;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.css {
  padding: 50px 0px 0px 0px;
}

.h3p-css p {
  font-family: Poppins;
  font-weight: 400;
  font-size: 14px;
  margin-right: 35%;
  margin-bottom: 65px;
}

.classid {
  background-color: hsl(164, 27%, 53%);
  color: hsl(30, 56%, 93%);
  padding: 0px 8px 0px 8px;
}

aside {
  font-family: Poppins;
  font-weight: 400;
  font-size: 14px;
  background-color: hsl(164, 27%, 53%);
  margin: 40px 20px 40px 30px;
  padding: 40px 50px 40px 50px;
  border-radius: 30px;
  color: white;
  margin-right: 60%;
  /*box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;*/
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.aside-css {
    background-color: hsl(1, 81%, 73%);
    padding: 0px 8px 0px 8px;
}


footer {
    padding: 50px 0px 0px 0px;
    color: hsl(0, 0%, 10%);
    font-family: Poppins;
    font-weight: 400;
    font-size: 12px;
    text-align: center;
}

It looks awesome, congrats @evchavez! :clap:
I’m particarly a fan of the color scheme you’ve used.

The only thing I’d note is because the header and the footer and center-aligned, I personally think it would make sense to have the rest of the page reflect this and also be center-aligned.

Also while the path would have been correct in the learning environment (or whatever other tool you used to create it) since on the Gist the files are in the same folder, the file path for the <link> tag is incorrect there.

Overall it looks great, well done!

1 Like

Thank you for the feedback :clap:t4:, I thought about doing it all center-aligned, I will change it and see how it looks :slightly_smiling_face:.
And about the Gist file, I have no idea what I did there, kinda lost on github :sweat_smile: I’m going to have to look for additional resources to understand Github.

1 Like

Hi everyone,
Just finished my cheatsheet today and is about Semantic HTML Elements, kindly check it out live Semantic HTML Reference or on GitHub and give me feedback if you can.

Congrats :clap:!

I would just note that the live version you sent is a link to the Codecademy workspace which is unique for each person (and therefore we can’t access your version via that link) but I checked it out via GitHub instead :slightly_smiling_face:

It looks great, well done! :tada:

1 Like

Thank you, much appreciate it. Will change the link when am able to host it live myself

1 Like

Hello shairalapus, great site! I’m sure you’re on your next site designs now but I may have a couple of fix solutions.

first, the banner can be set in the stylesheet to take the whole screen space. You can do this by resetting the default margin value like so…

  • {
    font-family: Helvetica, sans-serif;
    margin: 0px;
    }
    also, on line 16 you put “font-color” and not color that’s why it didn’t change your title to white.

I hope this helps, peace and love

Hello everyone! Here is the cheatsheet I made:

I decided to do a BASH/Git cheatsheet since I personally struggle with those the most.
Let me know how I did, any feedback is much appreciated!

Here is my first cheatsheet using HTML and CSS.
It only has a tables section right now but it will be updated as I go through the course.
https://github.com/Sumaine210/Cheatsheet.git

My contribution:
This is the link to my project in Github:

Hope you all like it!

Hi there,
Here’s my little HTML Cheat Sheet of what’s come up so far,
thank you for taking a gander!

https://checkoutchuck.github.io/htmlcheatsheet/

Please review my gist: https://gist.github.com/loordbarringtn/4c4ee6d2fccf62eea61ecb5493325ed7

My Own Style Sheet

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Building My Own Cheat Sheet</title>
    <link type="text/css" rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comforter+Brush&display=swap" rel="stylesheet">
  </head>
  <body>
    <header>
    </header>
    <main>
      <h2>my own style sheet</h2>
      <h1><span id="c">C</span><span id="h">H</span><span id="e">E</span><span id="a">A</span><span id="t">T</span><span id="s">S</span></h1>
      <section>
        <table id="course">
            <tr>
              <th>Courses</th>
              <th>tasks</th>
              <th style="border-right-style:none;">%</th>
            </tr>
            <tr>
              <td>Front-End Engineer</td>
              <td>48</td>
              <td style="border-right-style:none;">10</td>
            </tr>
        </table>
      </section>
        <br>
        <br>
        <br>
      <section>
        <table id="game">
          <tr>
            <td>O</td>
            <td> </td>
            <td style="border-right-style: none;">X</td>
          </tr>
          <tr>
            <td>O</td>
            <td>X</td>
            <td style="border-right-style: none;"></td>
          </tr>
          <tr>
            <td style="border-bottom-style:none;">X</td>
            <td style="border-bottom-style:none;"> </td>
            <td style="border-right-style: none; border-bottom-style:none;"></td>
          </tr>
        </table>
        </section>
    </main>
  </body>
</html>

CSS

h2{
  text-transform: uppercase;
  font-family: "Comforter Brush","Comic Sans MS", sans-serif;
  font-weight: bold;
  letter-spacing: 2px;
  text-align: center;
  color: rgba(12,132,132,0.65);
}
body{
  background-color: hsl(171,10%,85%);
}
main{
  background-image: url('https://image.freepik.com/fotos-gratis/quadro-negro-verde-sujo_125540-774.jpg');
  height:400px;
  border: ridge gold 6px;
}

h1{
  font-family: "Comforter Brush","Comic Sans MS", sans-serif;
  text-align: center;
  letter-spacing: 0.3em;
}
#c{
  color: rgba(14,67,33,0.7);
}
#h{
  color: rgba(71,41,222,0.5);
}
#e{
  color: rgba(123,55,32,0.5);
}
#a{
  color: rgba(95,51,56,0.6);
}
#t{
  color: rgba(56,77,81,0.7);
}
#s{
  color: rgba(95,57,84,0.7);
}
#table{
  margin: auto;
}

#course,#game{
  font-family: "Comforter Brush","Comic Sans MS", sans-serif;
  letter-spacing: 10px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.36);
  border-color: rgba(255,255,255,0.34);
}
td,th{
  border-right-style: dotted;
  border-bottom-style: dotted;
}

2022-01-14T03:00:00Z

Here is my solution!

Github: Build your own cheatsheet (Topic: CSS Selectors) · GitHub

Topic: CSS Selectors and Specificity
I used the color Blue for my theme.

How to make it is live?

GitHub Pages

1 Like

Nice! Here’s my cheatsheet. GitHub Cheatsheet

Welcome to the forums!

It looks like the link you’ve attached returns a 404, can you ensure that the repository is set to public? :slightly_smiling_face:

My solution:
Get the gist of it: index.html · GitHub
See it live.