Build your Own Cheatsheet Challenge Project (HTML, CSS)

Thanks! I like yours also!

My cheatsheets are not done but this is the progress I have so far. Let me know what you think

Live sit: HTML Cheatsheet

Code: GitHub - rosasor/HTML-CSS-Cheatsheet

1 Like

I just came to a decided end on this cheat sheet project. It was good to put some of the learning into practice as I did find I had forgotten some of the lessons in terms of syntax with etc. I tried to practice semantically correct html as well.

I chose some fairly basic topics to help me remember, particularly with the selector methods. I could have kept going but it was becoming quite easy adding new rows and I was happy enough with the presentation compared to the working example we were given.

Took a while getting the whole posting to Git working again, using the terminal, but got there in the end!

Hi

In case anyone was interested here is my rendition of this project.

Please note: the information in the project is only a simplified version of the source material to practice HTML and CSS concepts

GitHub Page

HTML Code
CSS Code

Thanks for looking, please feel free to leave any constructive criticism :slight_smile:

Your CheatSheet is so useful! Love the layout too :+1:

1 Like

Thanks! I really liked with you came up with as well :smile:

Hi, everyone!

Cheat sheet page completed. :white_check_mark: It’s live here: CSS Cheat Sheet
What are your thoughts about it?

And, what do you think of the code?
View and comment here: Cheat Sheet Project for Codecademy (01-23-2023) · GitHub

Thanks! :slightly_smiling_face:

Hi all,

Here is my stab at this.

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">
    <title>HTML Table Cheat Sheet</title>
    <link rel="stylesheet" type="text/css" 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=Abril+Fatface&family=Cairo:[email protected];400;500&family=Merriweather:[email protected];1&family=Work+Sans:[email protected];500;800&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <h1>HTML Cheatsheet - Tables</h1>
    </header>
    <main>
        <div id="introduction">
            <p>Welcome! This cheatsheet lays out the basics of HTML tables. Including...</p>
            <ul>
                <li>Table Formatting in HTML</li>
                <li>Table Styling Using CSS</li>
            </ul>
        </div>
        <div class="content">
            <h2>HTML Table Tags</h2>
            <p>In this first section, we will cover the basic HTML tags which allow you to create a simple table. In fact, we will do this using those same tags! If you feel up to, inspect the page using dev tools to view the HTML and try to correlate that with what you're reading.</p>
        </br>
            <table>
                <tr>
                    <th class="firstcol">Tag</th>
                    <th>Usage</th>
                </tr>
                <tr>
                    <td>&lt;table&gt;</td>
                    <td>The opening and closing &lt;table&gt; tags define where your table starts and ends. All rows and columns must be specified within these tags.</td>
                </tr>
                <tr>
                    <td>&lt;tr&gt;</td>
                    <td>The table row tag, &lt;tr&gt;, defines a new row. All rows need to be defined in a table, including headers.</td>
                </tr>
                <tr>
                    <td>&lt;th&gt;</td>
                    <td>The table header tag, &lt;th&gt;, indicates a specific cell is a 'header'. Typically, all cells in the first row will be headers. For example, in this table, the headers are 'Tags' and 'Usage'. However, headers are not required. Moreover, rows can have headers defined. This helps with creating matricies where both rows and columns require headers.</td>
                </tr>
                <tr>
                    <td>&lt;colgroup&gt;</td>
                    <td>The &lt;colgroup&gt; tag allows you to group columns so you can style and deal with them as a single unit. This tag should go right after the &lt;table&gt; tag and before the &lt;tr&gt; tags. Example: &lt;colgroup colspan="2"&gt; placed at the top of this table would group both of the table's column as a single group.</td>
                </tr>
                <tr>
                    <td>&lt;td&gt;</td>
                    <td>Last, but certainly not least, we have the &lt;td&gt; tag. This tag specfies what should go in specific cells. This text is defined within &lt;td&gt; tags.</td>
                </tr>
            </table>
        </br>
            <p>Now that you know these tags, you should be able to define the basic structure of any table you desire!</p>
        </div>
        <div class="content">
            <h2>Colspan & Rowspan</h2>
            <p>In this section, we will deal with attributes you can define on individual table tags. While most styling should be done with CSS, which we'll get to later, there are two or three attributes worth knowing at the HTML level. There are two main attributes which you should know:</p>
            <ul>
                <li>colspan</li>
                <li>rowspan</li>
            </ul>
            <p>These attributes can be added to either a &lt;th&gt; or &lt;td&gt; element to make that element span the desired number of rows or columns. This is similar to 'merging' a cell in Excel. Note: If you use colspan or rowspan without changing the overall number of cells in the table, any 'extra' cells will be pushed out, not automatically deleted. Be sure to keep a careful count of your data elements as a result. See below for an example.</p>
            <h3>colspan example</h3>
            <table>
                <tr>
                    <th colspan="2">&lt;th colspan="2"&gt;</th>
                    <th>&lt;th&gt;</th>
                </tr>
                <tr>
                    <td rowspan="2" width="200">&lt;td rowspan="2"&gt;</td>
                    <td>&lt;td&gt;</td>
                    <td>&lt;td&gt;</td>
                </tr>
                <tr>
                    <td>&lt;td&gt;</td>
                    <td>&lt;td&gt;</td>
                </tr>
            </table>
        </div>
        <div class="content">
            <h2>Table CSS</h2>
            <p>Now that you know how to create and structure table in HTML, the next question is obvious: How do you style them? The answer is (unsurprisingly) CSS. This section will go through some common CSS styling tips and tricks to make your tables look just right.</p>
            <table>
                <tr>
                    <th class="firstcol">Element</th>
                    <th>Usage</th>
                </tr>
                <tr>
                    <td>width</td>
                    <td>By default, tables will automatically size themselves based on their content. This is often undesirable for the width property since we frequently want tables to extend across the full width of their parent element regardless of their content. The width property can help. You can use px, percentages, ems, etc.</td>
                </tr>
                <tr>
                    <td>height</td>
                    <td>The height CSS element does the exact same thing as width -- but for height. Modifying this is less common, but the same usage rules apply.</td>
                </tr>
                <tr>
                    <td>border</td>
                    <td>The border property defines what the table borders will look like. Typically, the css rule should apply to table, th, and td to ensure all elements of the table have a border around them.</td>
                </tr>
                <tr>
                    <td>border-collapse</td>
                    <td>Setting the border-collapse element to collapse ensures that all cells in a table share a line rather than each having their own. For example, if the border were not collapsed in this table, you would see individual squares with a small margin between them for all cells in the table.</td>
                </tr>
            </table>
        </div>
    </main>
</body>
</html>

CSS:

* {
    font-family:'Cairo', serif;
}

html {
    background-image: linear-gradient(to bottom right, indigo, rgb(193, 130, 238));
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100%;
    width: 100%;
}

header {
    background-color: #0000008a;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100px;
    width: 100%;
    backdrop-filter: blur(6px);
    z-index: 1;
}

header h1 {
    text-align: center;
    margin: auto;
    font-size: 50px;
    color: white;
    white-space: nowrap;
}

main {
    position: relative;
    top: 110px;
}

main div {
    width: 550px;
    margin: 10px auto;
    background-color: #edce1433;
    padding: 10px 30px;
    border-radius: 50px;
}

table,
th,
td {
    border: 1px solid rgb(47, 47, 47);
    border-collapse: collapse;
}

table {
    width: 100%;
}

th,
td {
    text-align: left;
    vertical-align: top;
}

.firstcol {
    width: 80px;
}
1 Like

Hello, here is my project, I struggled with tab sizes, it render different in edge browser…
Also some styling lacks in around , I would like the tab head without little background space…?

I like a lot Destromas cheat sheet! Big up!

Github LIVE link

Hello guys. Here is my project if anybody wants to check it out and give me some suggestions :slight_smile:

Hi Thanks for your feedback :slight_smile:

Also regarding your comment about the “little background space”, if you mean what I am thinking then I also had a similar issue. The code I used to get rid of the tiny gaps between each of the table elements is:

Table /*containing element for your table(s)*/ {
    border-spacing: 0px; /*this gets rid of the gap between elements */
    border-collapse: collapse; /*this "makes the border of each element overlap each other/*
}

I hope that helps :slight_smile:

p.s. your project is awesome! I really like how you got the rounded edges on your tables :thinking:

Wow, every page is uniq. And I can see some things that I could use in my cheatsheet. Thank you all, friends.

thanks a lot for your feedback! much appreciated! however, it gets a bit complicated, with your suggested solution I am loosing round edges on those tables…I will research it properly and will let you know if I have come to an solution :thinking:

Hi

You’re right! I didn’t realise :thinking:. I did some research and it seems quite complicated to achieve rounded corners on a border-collapse: collapse;ed table. I tried to play around with it and could not get it to work. I’ll let you know if I can manage it. Let me know if you crack it! I’d love to see a solution :thinking:.

My project isn´t exactly what I wished it was, but I think I´ve done a nice job.

It’s not finished yet :slight_smile:

I really like your page design. The layout is very clean.

Here is my cheatsheet, seems like for most of us the hard part is to put it online :sweat_smile:

1 Like