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
This is my cheatsheet not the best but a nice try I guess
My Cheatsheet
HTML basic tags cheatsheets
Here is my first HTML reference sheet about specificity.
Let me know suggestions
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"><body> </span></td>
<td>body{}</td>
<td>0-0-1</td>
</tr>
<tr>
<td><span class = "element"><html> </span></td>
<td>html{}</td>
<td>0-0-1</td>
</tr>
<tr>
<td><span class = "element"><h1> </span></td>
<td>h1{}</td>
<td>0-0-1</td>
</tr>
<tr>
<td><span class = "element"><p> </span></td>
<td>p{}</td>
<td>0-0-1</td>
</tr>
<tr>
<td><span class = "element"><span> </span></td>
<td>span{}</td>
<td>0-0-1</td>
</tr>
<tr>
<td><span class = "element"><em> </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><body class= "highlight"></td>
<td>body.highlight{}</td>
<td>0-1-1</td>
</tr>
<tr>
<td><span class= "highlight"></td>
<td>span.highlight{}</td>
<td>0-1-1</td>
</tr>
<tr>
<td><h1 class= "highlight"></td>
<td>h1.highlight{}</td>
<td>0-1-1</td>
</tr>
<tr>
<td><div class= "notebox"></td>
<td>div.notebox{}</td>
<td>0-1-1</td>
</tr>
<tr>
<td><div class= "notebox warning"></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><h1 id="heading"></h1></td>
<td>h1#heading{}</td>
<td>1-0-1</td>
</tr>
<tr>
<td><p id="one"></td>
<td>p#one{}</td>
<td>1-0-1</td>
</tr>
<tr>
<td><h1 id="heading"></td>
<td>#heading{}</td>
<td>1-0-0</td>
</tr>
<tr>
<td><h1 id="one"></td>
<td>#one{}</td>
<td>1-0-0</td>
</tr>
<tr>
<td><p id="header"></td>
<td>p[id="header"]{}</td>
<td>1-0-1</td>
</tr>
<tr>
<td><h1 id="header"></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 :
- GitHub : GitHub - hrere/cheatsheet.github.io
- See it live : My personal cheatsheet HTML & CSS
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
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
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…
thanks…
Hey family, here’s my HTML & CSS Cheat-sheet that I created ! 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.