Build your Own Cheatsheet Challenge Project (HTML, CSS)

shairalapus868925017 · December 22, 2021, 1:29am

This looks awesome! Love the colors you chose btw.

cloud3923586601 · December 22, 2021, 5:19pm

Hi guys,

I would like to share my project with you:

cloud3923586601 · December 22, 2021, 5:31pm

Hi,
I really like your project. Great eye-catching color choice and a smart distribution across the page!

cloud3923586601 · December 22, 2021, 6:04pm

Very impressive! Your project is my favorite amongst the ones I’ve seen so far! Very well done!

charles.bonilla · December 24, 2021, 1:56am

Hello Everyone,

My name is Charles and I have completed the first big Challenge. I would appreciate some feedback on the Cheatsheet Challenge Project. I was able to place it in GitHub at the following URL:

https://bonillacharles.github.io/Codecademy/index.html

Any feedback will be greatly appreciated!

lordfalcon_art3rmisx · December 25, 2021, 10:13am

Hey guys and Merry Christmas to all of those who celebrate it!

Here’s my project repo:

And here’s the live site:
https://dafalconhunter.github.io/html-css-cheatsheet/

I would appreciate any constructive criticism of the site. Merry Christmas!

jaaljoodi · December 25, 2021, 1:23pm

Hi Ya’ll, this is my cheat sheet.

Cheatsheet

lukadimnik · December 26, 2021, 11:25am

Hi. Here is my initial very basic version of the cheatsheet.

Website: CSS selectors

Repo: GitHub - lukadimnik/html-css-cheatsheet

lordfalcon_art3rmisx · December 26, 2021, 5:22pm

If you try resizing the browser, the sticky nav bar get squashed badly but when I learn about responsive design, I’ll make sure to fix this. Later on, I’ll also add some CSS content to it so that it is complete. Hope y’all like this.

dickykitchenjr · December 29, 2021, 8:35pm

I created a simple cheat sheet about how to comment in HTML CSS and JavaScript.
I wanted my focus to be more on the coding side than the information in the cheat sheet, but the information provided should be correct.

Here is my gist: Codecademy export · GitHub

I’d appreciate any feedback that you might have.
Happy Holidays

akelly24 · December 29, 2021, 11:58pm

Hello! Here’s my Cheatsheet - mine is about CSS named colours (I’m a Graphic Designer so it felt apt). Feedback is most welcome!

I found it super difficult to figure out how to publish it using GitHub Pages so I’ve just put the link to the GitHub repository below and a link to the live site with Glitch (which was sooooo much easier to use)!

GitHub repository

Glitch Live Site

lordfalcon_art3rmisx · December 30, 2021, 8:49am

What a beautiful site!

I also struggled trying to putting up my site on HTML Elements on GitHub Pages but if you move your index.html file into the root folder (the bit where your README.md file is located), it will work. Hopefully. This is because GitHub Pages displays index.html by default if it is in the root folder but if it isn’t there, it will display your README.md file.

akelly24 · December 30, 2021, 5:11pm

Ooh thank you very much, I had a look at yours and loved your colour choice!

I’ll give that a try - I’d really like to get the hang of GitHub/GitHub pages as it seems a pretty essential skill to have!

lordfalcon_art3rmisx · December 31, 2021, 8:22am

Thanks! It’s kind of reminiscent of the Davie’s Burgers site in terms of the colour scheme. I wasn’t happy with black and white so I experimented with some other lighter colours and found that this aqua/cyan background strains my eyes (at least) less than a white background.

sl_frontend · January 2, 2022, 5:11pm

Hey all! First time posting a project to the forums!

Live version of the sheet is available here: CSS Selectors Reference

Of course, open and interested in any and all feedback.

caitlynsun7693463982 · January 3, 2022, 3:04am

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

evchavez · January 4, 2022, 5:20pm

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;
}

notlyall · January 4, 2022, 9:43pm

It looks awesome, congrats @evchavez!
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!

evchavez · January 4, 2022, 11:43pm

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

prince.t.asamoah · January 7, 2022, 11:06am

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.