Build your Own Cheatsheet Challenge Project (HTML, CSS)

Im 5 years late but here’s my cheatsheet on html tables :slight_smile:

Hello, here is my quick late night submission where I made a reference/cheatsheet for using colors in CSS. It just explains named colors, rgb colors, hex values and hsl values, and at the end is a table with examples of different colors in different formats. Of course, the table could be extended to include many more colors but there you go.

Project completed I focused more on CSS formatting then overloading with HTML knowledge
[](https://My Gist Cheatsheet)

Hello, guys. Here’ my html table cheat sheet. I will be glad to hear your feedbacks.
Git link: HTML Cheat Sheet

Hello, everyone and everywhere.

Take a look to my version of cheat sheet!

Well be glad to here feedback from you.
Have a good one!

Live preview : Cheat Sheet

Repo: GitHub - b1ackwand/cheat-sheet.github.io: This project is my Cheat Sheet for HTML, CSS, and JavaScript—a simple and stylish reference to help me (and maybe others) navigate essential web elements. I created this as a personal learning project to sharpen my skills while making something useful. Feel free to check it out, contribute, or just say hi!

This is my cheatsheet not the best but a nice try I guess
My Cheatsheet

HTML basic tags cheatsheets

CheatSheet

Here is my first HTML reference sheet about specificity.
Let me know suggestions :smile:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>CSS selectors and specificity</h1>
    <h2>Let's start with Basic CSS Selectors</h2>
    <h3>Type Selectors</h3>
    <table>
        <thead>
            <tr>
                <th>Element</th>
                <th>Selector</th>
                <th>Specificity</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><span class = "element">&lt;body&gt; </span></td>
                <td>body{}</td>
                <td>0-0-1</td>
            </tr>
            <tr>
                <td><span class = "element">&lt;html&gt; </span></td>
                <td>html{}</td>
                <td>0-0-1</td>
            </tr>
            <tr>
                <td><span class = "element">&lt;h1&gt; </span></td>
                <td>h1{}</td>
                <td>0-0-1</td>
            </tr>
            <tr>
                <td><span class = "element">&lt;p&gt; </span></td>
                <td>p{}</td>
                <td>0-0-1</td>
            </tr>
            <tr>
                <td><span class = "element">&lt;span&gt; </span></td>
                <td>span{}</td>
                <td>0-0-1</td>
            </tr>
            <tr>
                <td><span class = "element">&lt;em&gt; </span></td>
                <td>em{}</td>
                <td>0-0-1</td>
            </tr>
        </tbody>
    </table>
    <h3>Class selectors</h3>
    <table>
        <thead>
            <tr>
                <th>Element</th>
                <th>Selector</th>
                <th>Specificity</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>&lt;body class= "highlight"&gt;</td>
                <td>body.highlight{}</td>
                <td>0-1-1</td>
            </tr>
            <tr>
                <td>&lt;span class= "highlight"&gt;</td>
                <td>span.highlight{}</td>
                <td>0-1-1</td>
            </tr>
            <tr>
                <td>&lt;h1 class= "highlight"&gt;</td>
                <td>h1.highlight{}</td>
                <td>0-1-1</td>
            </tr>
            <tr>
                <td>&lt;div class= "notebox"&gt;</td>
                <td>div.notebox{}</td>
                <td>0-1-1</td>
            </tr>
            <tr>
                <td>&lt;div class= "notebox warning"&gt;</td>
                <td>div.notebox.warning{}</td>
                <td>0-2-1</td>
            </tr>
        </tbody>
    </table>
    <h3>ID selectors</h3>
    <table>
        <thead>
            <tr>
                <th>Element</th>
                <th>Selector</th>
                <th>Specificity</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>&lt;h1 id="heading"&gt;</h1></td>
                <td>h1#heading{}</td>
                <td>1-0-1</td>
            </tr>
            <tr>
                <td>&lt;p id="one"&gt;</td>
                <td>p#one{}</td>
                <td>1-0-1</td>
            </tr>
            <tr>
                <td>&lt;h1 id="heading"&gt;</td>
                <td>#heading{}</td>
                <td>1-0-0</td>
            </tr>
            <tr>
                <td>&lt;h1 id="one"&gt;</td>
                <td>#one{}</td>
                <td>1-0-0</td>
            </tr>
            <tr>
                <td>&lt;p id="header"&gt;</td>
                <td>p[id="header"]{}</td>
                <td>1-0-1</td>
            </tr>
            <tr>
                <td>&lt;h1 id="header"&gt;</td>
                <td>h1,<br> #header{}</td>
                <td>0-0-1<br>1-0-0</td>
            </tr>
        </tbody>
    </table>
    <a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Basic_selectors">Basic CSS selectors</a><br>
    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors">CSS selectors</a><br>
    <a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements">Pseudo-classes and pseudo-elements</a><br>
    <a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts">Handling conflicts</a><br>
    <a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Combinators">Combinators</a><br>
    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator">Descendant combinator</a><br>
    <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator">Child combinator</a>
</body>
</html>

style.css

html {
    background-color: lightgrey;
    font-family: "Lucida Console", Courier, monospace;
    font-size: 16px;
}

h1{
    color: navy;
}

h2 {
    color:blueviolet;
}

h3 {
    color: whitesmoke;
    text-shadow: #FC0 1px 0 10px;
}

p {
    color:coral;
}

table {
    border: 2px solid darkorchid;

}

tr th{
    background-color: rgb(221, 160, 221);
}

tr td {
    border-top: 2px solid rgb(153, 50, 204);
}

.element {
    background-color: beige;
}```

My cheatsheet :

Here’s my tables!

Here´s what I put together for the [Cheat Sheet project],(Codecademy Project · GitHub) if anyone would like to take a look.

my cheatsheet

My first HTML with CSS

Hi, this is my work:

enjoy

Hello!
This is my first post in the forum. I’d like to share my modest “Web Development Cheat Sheet” with you. I’ll probably update this project every now and then, when learning more stuff.

GitHub repo: GitHub - MarkoSmiles/web-development-cheat-sheet
See it live: Web Development Cheat Sheet

I’m particulary proud of making my tables responsive, with the help of Kevin Powell’s excellent video …youtube.com/watch?v=czZ1PvNW5hk :grin:

I’d love to hear your feedback and especially about accessibility of my responsive tables. Thanks.

Hi!
This is my first post in the forum and here’s my project for this practice. I still got some difficulties with displaying content with margin, display, etc. I always want to make it too difficult instead of simple but here it is: GitHub - Koishka - Project 1 : Cheat sheet
I tried my best, I feel I still get stuck easily, but thanksfully, Internet was really helful to remind all the properties I already forgot :joy:

Hi,

This is my first time on code academy forum and here is my Cheat sheet Project.
Any feedback appreciated.
Thank you so much if you are looking at my project.

GitHub: GitHub - Amarciuk/Form-reference-cheat-sheet

See it live: Cheat Sheet- Forms

HI, I started the full-stack web developer code (a 24 days ago)
this is the source code for html and css for this project: GitHub - Mohammed-ObaidUllah/HtmlTableCheatsheet.io: Build your own Cheatsheet challenge project (HTML, CSS)
see it live here: Table CheatSheet
Any opinions/suggestions/feedback appreciated… :blush:
thanks…

Hey family, here’s my HTML & CSS Cheat-sheet that I created :slight_smile: ! Its simple, but i’m excited on how I did. First project I made with no assistance, going through any tutorials to make. I would definitely love some feed-back.

Code: GitHub - rosellidev/html-css-cheatsheet-starting
Live: Cheatsheet Project

I dont know how to upload it to my github. Ive created an account and set up initially through the code academy module. Help.