Everything I know about coding is self-taught, and mostly I just look up examples and tinker with the code until it does what I want. Since I have no actual training and keep forgetting things, I have created this cheatsheet for later use. I hope it can be useful to someone else too.
Code Samples
For creating sample code boxes like these! Remove the asterisks (*) in the code for it to work.
Border Styles
Borders can be applied to many different elements, such as containers, images, and tables. The "border" propriety should be followed by its thickness in pixels, the border style, and a color. Example:
Possible styles: solid / double / dotted / dashed / wavy.
You can also use 'border-top', border-bottom', 'bottom-left', and/or 'border-right' if you want the border only on specific sides of the element.
Example on how to apply it to an image:
Text Labels
Labels or descriptions that will appear when hovering over text.
Try hovering over the following abbreviation to see its full name: HTML.
List Styles
Create lists with bullet points. Possible styles:
- disc
- circle
- none
- square
Tables
When creating tables, 'tr' makes a new row and 'td' makes a new cell. You can also use 'th' to make headers.
Dog | Cats |
Tip! You can also directly style the table and the individual rows and cells.
Quotations
Can be used to quote something or just to highlight some text.
"Coding is hard and I am forgetful."
Text Styles
The text-decoration property can be used to add decorative lines to text.
TEXT DECO
Possible styles: none / underline / overline / line-through.You can also combine any of the latter three, and add a color, thickness (in pixels), and/or a line style (solid / double / dotted / dashed / wavy).
Link in New Tab
Makes it so a clicking a link will open that page in a new tab instead of the current one.
Try clicking here to open my site's homepage in another tab.
Numbered Lists
Create numbered lists. Possible styles:
- 1 (numbers)
- A (uppercase letters)
- a (lowercase letters)
- I (uppercase roman numerals)
- i (lowercase roman numerals)
Grid Layouts
Create grids made of rows and columns, like the one on this page.
Tip! You can also style your rows and columns directly.
✾Coding✾