https://github.com/heraldofortuna/html-css-cheatsheet-starting
In this project, you’ll be building your own reference cheat sheet to help you build more websites in the future! Although there are great places to learn HTML & CSS like Codecademy, the best reference for yourself is often your own notes and projects.
https://github.com/heraldofortuna/html-css-cheatsheet-starting
codecademy-pro css html
Last synced: about 1 year ago
JSON representation
In this project, you’ll be building your own reference cheat sheet to help you build more websites in the future! Although there are great places to learn HTML & CSS like Codecademy, the best reference for yourself is often your own notes and projects.
- Host: GitHub
- URL: https://github.com/heraldofortuna/html-css-cheatsheet-starting
- Owner: heraldofortuna
- Created: 2021-05-19T23:42:56.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-05-24T17:06:32.000Z (about 5 years ago)
- Last Synced: 2024-04-23T21:33:25.241Z (about 2 years ago)
- Topics: codecademy-pro, css, html
- Language: HTML
- Homepage: https://heraldofortuna.github.io/html-css-cheatsheet-starting/
- Size: 61.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Codecademy - Build Your Own Cheat Sheet
Your project should document at least one HTML or CSS topic. In our example project, we documented the tags and attributes used in HTML tables layouts, but you can choose any HTML or CSS topic that you’ve learned so far—the sky is the limit!
Possible topics could be:
- HTML Tables
- Other HTML tags
- CSS selectors and specificity
- Common CSS properties
If you choose to document HTML tags, open the hint to see how to include HTML tags as text in your code.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
### The challenge
Your site uses HTML tables to display the documentation. Be sure to label the columns in your HTML.
In our example site, we used tables with columns for:
- The tag or attribute name.
- The actual formatted tag.
- A description of what to use the tag for.
- You can use these same columns or choose your own.
Your site should utilize a custom color scheme. You can use any of the named CSS colors.
Your site should use custom styles for any code such as HTML tags (like h1) or CSS properties or values (like font-family). Represent code using a monospace font family and a different background color.
### Screenshot
### Links
- [Solution Link](https://github.com/heraldofortuna/html-css-cheatsheet-starting)
- [Live Site Link](https://heraldofortuna.github.io/html-css-cheatsheet-starting/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
### What I learned
```html
Tag
Name
Description
<table>
Table
The wrapper element for all HTML tables.
...
```
```css
table {
width: 95%;
border: 2px solid var(--purple-color-3);
}
thead {
background-color: var(--purple-color-2);
}
td {
border-top: 1px solid var(--purple-color-3);
}
th,
td {
height: 20px;
}
.code {
background-color: var(--white-color);
font-family: monospace;
}
```
### Continued development
Now I will continue with another Codecademy project.
### Useful resources
I used the guides found on codecademy website. Only that.
## Author
- Codeacademy - [heraldofortuna](https://www.codecademy.com/profiles/heraldofortuna)
- Twitter - [@heraldofortuna](https://twitter.com/heraldofortuna)
## Acknowledgments
To my father, for everything.