Build your Own Cheatsheet Challenge Project (HTML, CSS)

digital8078677768 · March 28, 2020, 4:05am

Here is my proyect:

gist.github.com

https://gist.github.com/codecademydev/540de259e03c8c060a2e9696e4d79528

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Table Reference</title>
    <link href="styles.css" type="text/css" rel="stylesheet"/>
  </head>
  <body>
    <h1>Commonn CSS Selectors & Specificity</h1>
    <h2>CSS Selectors</h2>
<!----------Selector Table---------->

This file has been truncated. show original

styles.css

* {
  background-color: Aliceblue;
  text-align: center;
  font-family: Arial, sans-serif;
}
h2 {
  color: blue;
}
table {
  border: 2px solid darkblue;

This file has been truncated. show original

wtmatos · March 28, 2020, 9:44pm

Hello everyone! This is my cheat sheet.

Still struggling a bit with the border radius. The table header’s background is overlapping the top of the table rounded corner. Will investigate it.

Cheers and happy coding!

coderunner_pks1 · March 29, 2020, 6:05pm

Hello Everyone! This is my Basic [HTML-CSS-CHEATSHEET](https://pkusaha.github.io/HTML-CSS-CHEATSHEET/).

boyoeng.yoon · March 29, 2020, 6:58pm

https://boyeongyoon.github.io/html-table-reference/

jraura · March 30, 2020, 5:59pm

Hello! Here is my first HTML & CSS Project.

See it live: https://jraura.github.io/codecademy-cheatsheet/

GitHub: https://github.com/jraura/codecademy-cheatsheet.git

syed_azhar.98 · March 30, 2020, 6:35pm

here is my project link,As a beginner i would love to have advices from my seniors to that i can improve my coding.

callmej9 · March 31, 2020, 7:59am

Here’s my cheatsheet, please rate it:

gist.github.com

https://gist.github.com/codecademydev/afd1f1842f7edb225fcec5e73554abf5

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Common CSS Properties</title>
 <link rel="stylesheet" href="styles.css">  
  </head>
  <body>
    <div>
      <h1>Common CSS Properties Reference</h1>
    </div>

This file has been truncated. show original

styles.css


table, th, td {
  border: 2px solid blueviolet;
  width: 650px;
  margin: 0 auto;
 }

h1, h2 {
  text-align: center;
}

This file has been truncated. show original

I’ve tried a couple of times now to connect it to GitHub, but I’m struggling on how to do this as I completed the project on Code Academy

mediel42 · March 31, 2020, 11:33am

Here’s my cheatsheet! Comments welcome

And a live view on GitHub Pages

https://mediel42.github.io/CSS-Cheatsheet/

mediel42 · March 31, 2020, 12:01pm

This is very beautiful!

design1188240349 · April 1, 2020, 1:21pm

First go

Completed it on visual studio code and copied it into codecademy

gist.github.com

https://gist.github.com/codecademydev/caf9c9f79b51ad7320fe6a46ff229d5c

index.html

<!DOCTYPE html>

<html>
    <head>
        <title>HTML Tag Cheat Sheat</title>
        <link href="styles.css" rel="stylesheet" type="text/css">
    </head>

    
    <body>

This file has been truncated. show original

styles.css

body{
    background-color: gainsboro;
}

header{
    text-align: center;
    Margin-top: 50px;

}

This file has been truncated. show original

tera3555399459 · April 2, 2020, 9:09am

First project since being on Code Academy, probably found the hardest part figuring out git/github

Github: Cheatsheet

course2743001552 · April 3, 2020, 3:46pm

First solo project on Code Academy:

gist.github.com

https://gist.github.com/codecademydev/7b3c2e24f1b6a0b6ce03a001c77d1518

index.html

<!DOCTYPE html>
<html>
  
  <head>
    <title>My First Website</title>
    <link href="./styles.css" type="text/css" rel="stylesheet">
  </head>
  
  <body>
    <img src="https://images.newscientist.com/wp-content/uploads/2020/01/27123401/f0070229-coronavirus_artwork-spl.jpg" alt="covid-19 virus" style="width:750px;height:500px;"/>

This file has been truncated. show original

styles.css

body {
  background-color:black;
}
h1 {
  font-family: Oswald, bold;
  font-size: 40px;
  text-align: center;
  color: powderblue;

}

This file has been truncated. show original

All comments welcome!

bimaauliaipb47857991 · April 4, 2020, 6:08am

Here is my cheat sheet

gist.github.com

https://gist.github.com/codecademydev/aa82cd3c320e34bee7b9134f328b5365

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Cheat Sheet</title>
    <link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
    <nav>

This file has been truncated. show original

styles.css

body {
    font-family: Georgia;
    background-color: floralwhite;
}

main {
    padding-left: 5px;
}

header h1 {

This file has been truncated. show original

please leave a comment, thanks guyss

javarunner50426 · April 4, 2020, 9:22am

Please review my project and share suggestions…

debo1711 · April 4, 2020, 3:52pm

Not as good as some I see but I did learn a lot.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Cheat Sheet</title>
  
    <link href="./styles.css" type="text/css" rel="stylesheet">
    
  </head>
  
    <body>
      <h1>HTML Cheat Sheet</h1>
      <br>
      <h3>Table Content</h3>
      
      <table>
        <thead>
          <tr>
            <th scope="row">Tag</th>
            <th scope="row">Name</th>
            <th scope="row">Description</th>
          </tr>
          </thead>
        <tbody>
          <tr>
            <td scope="col" class="code">&lttable&gt</td>
            <td scope="col" class="name">Table</td>
            <td scope="col" class="description">Used contain all tabular data.</td>
          </tr>
          <tr>
            <td scope="col" class="code">&ltthead&gt</td>
            <td scope="col" class="name">Table Heading</td>
            <td scope="col" class="description">Used to add titles to rows & columns.</td>
          </tr>
          <tr>
            <td scope="col" class="code">&lttbody&gt</td>
            <td scope="col" class="name">Table Body</td>
            <td scope="col" class="description">Allows long tables to be sectioned off.</td>
          </tr>
          <tr>
            <td scope="col" class="code">&lttr&gt</td>
            <td scope="col" class="name">Table Row</td>
            <td scope="col" class="description">Used to create table rows.</td>
          </tr>
          <tr>
            <td scope="col" class="code">&lttd&gt</td>
            <td scope="col" class="name">Table Data</td>
            <td scope="col" class="description">Used to add cells to contain data in table.</td>
          </tr>
          <tr>
            <td scope="col" class="code">&lttfoot&gt</td>
            <td scope="col" class="name">Table Footer</td>
            <td scope="col" class="description">Used to section off long table at bottom.</td>
          </tr>
        </tbody>
      </table>

    
    <br>
    <br>
    <br>
  
    <h3>Forms</h3>
      
      <table>
        <thead>
          <tr>
            <th scope="row">Tag</th>
            <th scope="row">Name</th>
            <th scope="row">Description</th>
          </tr>
          </thead>
        <tbody>
          <tr>
            <td scope="col" class="code">&ltinput&gt</td>
            <td scope="col" class="name">input</td>
            <td scope="col" class="description">Creates single row for user input.</td>
          </tr>
          <tr>
            <td scope="col" class="code">&lttextarea&gt</td>
            <td scope="col" class="name">textarea</td>
            <td scope="col" class="description">Creates a bigger text field for user input. Can be expanded with rows & columns.</td>
          </tr>
          <tr>
            <td scope="col" class="code">&ltform&gt</td>
            <td scope="col" class="name">form</td>
            <td scope="col" class="description">Resonsible for collecting info to send somewhere else.</td>
          </tr>
          <tr>
            <td scope="col" class="code">&ltdatalist&gt</td>
            <td scope="col" class="name">datalist</td>
            <td scope="col" class="description">Creates text field users can type info & filter options.</td>
          </tr>
          <tr>
            <td scope="col" class="code">&ltlabel&gt</td>
            <td scope="col" class="name">label</td>
            <td scope="col" class="description">For users to properly indentify &ltinput&gt.</td>
          </tr>
        </tbody>
      </table>
      
    <br>
    <br>
    <br>
      
       <h3>Semantic HTML</h3>
      
      <table>
        <thead>
          <tr>
            <th scope="row">Tag</th>
            <th scope="row">Name</th>
            <th scope="row">Description</th>
          </tr>
          </thead>
        <tbody>
          <tr>
            <td scope="col" class="code">&ltheader&gt</td>
            <td scope="col" class="name">Header</td>
            <td scope="col" class="description">Container for either nav links or intro content containing .</td>
          </tr>
          <tr>
            <td scope="col" class="code">&ltnav&gt</td>
            <td scope="col" class="name">Nav</td>
            <td scope="col" class="description">Used to define block of navigation links &#40menues, table of contents&#41 inside of &ltheader&gt.</td>
          </tr>
          <tr>
            <td scope="col" class="code">&ltmain&gt</td>
            <td scope="col" class="name">Main</td>
            <td scope="col" class="description">Used to encapulate dominant content within webpage.</td>
          </tr>
          <tr>
            <td scope="col" class="code">&ltfooter&gt</td>
            <td scope="col" class="name">Footer</td>
            <td scope="col" class="description">Used to contain info such as Contact Info, Copyright, Terms of Use, Site Map, Reference to top of page links.</td>
          </tr>
          <tr>
            <td scope="col" class="code">&ltarticle&gt</td>
            <td scope="col" class="name">Article</td>
            <td scope="col" class="description">Used to hold content such as articles, blogs, magazine etc.</td>
          </tr>
          <tr>
            <td scope="col" class="code">&ltsection&gt</td>
            <td scope="col" class="name">Section</td>
            <td scope="col" class="description">Defines elements in docments like chapters, headings.</td>
          </tr>
          <tr>
            <td scope="col" class="code">&ltaside&gt</td>
            <td scope="col" class="name">Aside</td>
            <td scope="col" class="description">Used mark additional info that can enhance another element but isn't required in order to understand main content.</td>
          </tr>
          <tr>
            <td scope="col" class="code">&ltfigure&gt</td>
            <td scope="col" class="name">Figure</td>
            <td scope="col" class="description">Used to encapsulate media such as image, illustration, diagram, code snippet etc.</td>
          </tr>
          <tr>
            <td scope="col" class="code">&ltfigcaption&gt</td>
            <td scope="col" class="name">Figcaption</td>
            <td scope="col" class="description">Used inside of &ltfigure&gt element to descibe image. Helps group &ltfigure&gt content.</td>
          </tr>
          <tr>
            <td scope="col" class="code">&ltvideon&gt</td>
            <td scope="col" class="name">Video</td>
            <td scope="col" class="description">Used to add videos to website. Some attributes that can alter playback include: controls, autoplay, loop.</td>
          </tr>
          <tr>
            <td scope="col" class="code">&ltembed&gt</td>
            <td scope="col" class="name">Embed</td>
            <td scope="col" class="description">Used to embed any media content &#40videos, audio links, gifs&#41.</td>
          </tr>
        </tbody>
      </table>

    </body>
 
</html>

table, th, td {border: 1px solid black;
}

.code {color: white; font-family: monospace; font-weight: bold; background-color: SteelBlue;
}
.name {background-color: LightSteelBlue;
}

.description {background-color: LightSteelBlue; 
}

body {background-color: MintCream; font-family: Arial;
}

dnightowl · April 4, 2020, 9:29pm

The code : https://gist.github.com/b99cded511c4caca01966bd4f01b0344

See it live : https://dnightowl.github.io/

chipwhiz67250 · April 5, 2020, 10:01pm

https://github.com/Jairoe92/git_work/blob/master/index.html

chipwhiz67250 · April 5, 2020, 10:03pm

https://github.com/Jairoe92/git_work/blob/master/index.html

Hey Guys, the link above should to link to my GitHub, if anyone has trouble accessing let me know (y).
Also, would love some insight on how to make my code better

beta0287674667 · April 6, 2020, 10:51pm

Hey Guys,

You can see my Cheatsheet here also. Have fun

danieljavavu · April 7, 2020, 9:09am

gist.github.com

https://gist.github.com/DanielJvV/e2a19dc3e2b1f4660a793d688c8f0703

Codecademy Challenge Make a Cheatsheet.css

body {
  font-family: cursive;
}
h1 {
  text-align: center;
  color: Red;
}

h2 {
  color: blue;

This file has been truncated. show original

Codecademy Challenge Make a Cheatsheet.html

<!DOCTYPE html>
<html>
  <head>
    <link href="./styles.css" type="text/css" rel="stylesheet">
    <title>Cheat Sheet</title>
  </head>
  <header>
    <h1>Cheat sheet for HTML Tags and Elements</h1>
    <h2>Semantic Structure Tags</h2>
    <h3>Structure Elements (Containers):</h3>

This file has been truncated. show original

Hello, finally posting this after I figured github out. First Project, probably could have been better but I spent 2 hours on it and could have made it more complex if I wanted to spend more time on it.