This cheatsheet is intended for beginners who want to understand frontend code (such as when using Inspect Element), edit an existing theme or code a simple static webpage.
HTML is your website's structure and includes text, images, links and divs (boxes, rows and columns).
Link: Visit <a href="https://example.com">my website</a>
Image: <img src="https://example.com/cat.gif" alt="My cat">
Heading: <h1>Welcome</h1>
Paragraph: <p>This is my new website.</p>
New line: First line <br> Second line
Div: <div class="my-box">This content is in a box</div>
Span: A sentence with <span class="bold">bold words</span>
CSS is your website's design and includes colors, sizes and backgrounds.
Fonts: p { font-family: Helvetica; font-size: 20px; font-weight: bold; color: black; }
Background: .my-box { background-image: url(https://example.com/cat.png); background-color: orange; }
Border: .my-box { border: 1px solid black; border-radius: 5px; }
Sizing: .my-image { width: 150px; height: 150px } .header { width: 100%; }
Spacing: .inside { padding: 20px; } .outside { margin: 5px; }
Position: .my-row { display: block; } .my-column { display: inline-block; }
Center: .my-text { text-align: center; } .my-box { margin-left: auto; margin-right: auto; }
Hide: .hidden { display: none; }
This code displays a blue box with a green border and black text.
<style>
.my-box {
width: 400px;
height: 200px;
padding: 20px;
margin: 10px auto;
background-color: blue;
border: 1px solid green;
font-family: Helvetica;
font-size: 20px;
font-weight: bold;
color: black;
}
</style>
<div class="my-box"> This text is in a box </div>
Note: To specify a font color in CSS, the command is simply color, not font-color.
Markdown is used in Reddit and Github, plus some blogs (such as WriteFreely) and website templates (such as Jekyll).
Add a link: Visit [my website](https://example.com)
Image: 
Heading: # Welcome
New line: Press enter twice
Italic: My *italic* sentence
Bold: Some **bold** text
Quote: > Quoted text
Here are some more resources to get started with website design and development: