Build your Own Cheatsheet Challenge Project (HTML, CSS)

Hi Michael, I think your code looks really good and I love how you created the <span> elements for each item with a link back to the reference material.

Happy Coding!

Hi everyone!
Please take a look at my project and let me know what you think :slightly_smiling_face:
Live: CheatSheet
Repo: anaderkach/cheatsheet

Thank you!

1 Like

Hello everyone.

Here is my cheatsheet:
Live: Cheatsheet
Repo: GitHub - rfinke4/cheatsheet

Would love to hear your thoughts

This is my attempt at the challenge!
Not sure why its appearing like this instead of pure code but you get the idea :))

"

Cheat Sheet

html cheat sheet

document prerequisites

Tag Name Description
<!DOCTYPE html> Document Type Declaration(DTD) First line of the HTML Document
<html> HTML Doc Root Represents the root (top-level element) of an HTML document
<head> HTML Doc Head Contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.
<header> HTML Doc Header The header HTML element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.
<body> HTML Doc Body The body HTML element represents the content of an HTML document. There can be only one body element in a document.
<footer> HTML Doc Footer The footer HTML element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents.

element attributes

Attribute Name Description
lang="" Language Selector (Within <html>)Defines the language of the Document
dir="" Text Direction (Within <html>) Defines the direction of the text either left-to-right (ltr) or right-to-left (rtl)
"

html {
background-color: #959A65;
}

h1, h2 {
text-align: center;
color: white;
font-family: trocchi, ‘Times New Roman’, Arial, Serif;
}

table {
background-color: #AAAE84;
color: whitesmoke;
border: 1px solid black;
border-radius: 5px;
margin: 0 auto;
}

td {
border-top: 1px solid black;
}

.tag, .attribute, .name, .description {
background-color: #959A65;
width: auto;
}

.code {
font-family: monospace;
background-color: #8884AE;
text-align: center;
}

Here’s the link to my project. I had fun looking up fonts and colors for this project, and it looks really helped me strengthen my foundation on tables and styling.

Git Link: Manny-HTML-Cheatsheet-Project · GitHub

Here is my cheatsheet

Hiii!

Here is my cheat sheet. I had a lot of fun doing it. :3

There is room for improvement If you have any feedback I would like to hear it!

1 Like

:raised_hand: :high_brightness: :hugs:

Here is a link to my version of the project!
GitHub Link
Live Link

1 Like

Here is my attempt, open for suggestions: GitHub - brad-roode/Cheat-Sheet-HTML-CSS at 1192a8baabc6784d697c86426b2c3aabbbe96d81

Here is my version of the cheat sheet. I did a github cheat sheet.
GitHub Cheat Sheet (iwindon.github.io)

iwindon/cheatsheet (github.com)

Cheers,

Ivan

1 Like

I’m pretty proud of mine. Here is my gist - Display and position css cheatsheet · GitHub

Hi all. I am working on my cheat sheet for the project. But can someone please direct me toward how to put this on GitHub (I have an account but don’t really know how to use it yet). The instructions said to click a share link from the project, but there is no share button on my screen. Any help would be appreciated, thank you!

Here’s my CSS HTML cheat sheet. I’m really insecure because looking at everyone else’s they’re all so colorful and mine pales in comparison. I hope you guys will like it

https://aidandjalins.github.io/my-html-css-cheat-sheet/index.html

1 Like

What are we missing, here?

<html>
    <head>
        <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=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="./resources/styles.css">
    </head>
    <title>Aidan's HTML & CSS Cheat Sheet</title>
    <body>
        <div class="container">

            <header>
                <h1>Aidan's CSS and HTML Cheat Sheet</h1>
            </header>

            <section>
                <article class="description">
                    <h2>Welcome to my HTML/CSS Cheat Sheet!</h2>
                    <p><p>This cheat sheet is a handy reference guide containing all the HTML 
                        and CSS concepts I've learned through CodeAcademy. Use these notes to 
                        quickly refresh your memory on key web development fundamentals!</p>
                    </p>
                </article> 
            </section>

            <h2 class="topic-description">Let's go over a topic!</h2>

            <section class="topics">
                <a href="./html.html">
                    <figure>
                    <img src="./resources/html symbol.png" alt="html">
                    <figcaption>HTML</figcaption>
                </figure>
                </a>

                <a href="./css.html">
                    <figure>
                    <img src="./resources/css symbol.png" alt="css">
                    <figcaption>CSS</figcaption>
                    </figure>
                </a>                
            </section>
        </div>
    </body>
</html>

Did you accidentally omit the content?

Hello, other than the not being visible and double

tags, I redesigned my cheat sheet from zero all over again because I was quite dissatisfied with the overall look. Feel free to look at my Cheat Sheet 2.0 via the same link again. Would be happy to receive your thoughts on that after you’ve had a look with the files (hopefully) correct this time. :slight_smile:

Keep working to fill it out, including tables of other elements, not just headings. The CSS page is blank, but we suppose you know that. This is a project that could be ongoing to which you add new elements and CSS properties as you learn them.

1 Like

Hello everyone, here’s my project, I tried to emulate a google docs spreadsheet.

Below you will find the links to check the project.

https://github.com/Dani8Bits/spreadsheet-css-practice

https://dani8bits.github.io/spreadsheet-css-practice/

2 Likes

Hi there,

Here’s my CSS Cheat Sheet code I did on VS. Hope to continue working on more projects and become further advanced on this!

Git link: CSS Cheat Sheet · GitHub

Here is my cheat sheet: github link