[Tech] HTML, CSS & Markdown cheatsheet

Tags: #tech #html #markdown #webdev

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: ![My cat](https://example.com/cat.gif)

Heading: # Welcome

New line: Press enter twice

Italic: My *italic* sentence

Bold: Some **bold** text

Quote: > Quoted text

More resources

Here are some more resources to get started with website design and development: