w3school - Go there. I cant stress this enough. This is the best site to learn HTMl. Its all free, no account needed. Just show them some love ^^
circlejourneys' toyhouse editor - I use this exclusively to edit th codes. It works like the site and it already has bootstrap and fa codes installed, so this is a must-use
Get Bootstrap - Everything bootstrap with simple and easy explanations

Before we start you need to know some things about HTML. This is a cheatsheet, so I won't cover everything. So if you need help don't hesitate to check out the resources above. This is a little intro to people who don't know anything about HTML I'll explant tags, divs etc. So feel free to jump this

Tag - a tag is any element inside < > there is a variety of tags, some used for text, other for placements etc. So when I say 'the p tag' it means <p> </p>
Important: Almost all tags have an opening <p> and a closing </p>. but some tags, sile image <img> and break <br> don't need it

Classes - classes are a type of css documentation. Thety are used to decorate various elements with the same css withput needing to repeat it. I won't explain how to create classe since this is a preuim only-feature, and i don't want to confuse anyone. Keep in mund that In free th classes are only used to apply bootstrap
The classes are declared inside the desired tag
Exemple: <p class="text-info"> text </p> becomes text Important: you can use more than one class. They are separated by spaces only ex. class="text-info text center card"   There is no limit to how many classes to use

Style and attribultes - style is used to decorate (or stylize) your tags! They are the fun part of coding! You can put a style in almost anything. From texts and images to divs and videos! You start declaring the style inside the tag, just like clases: <p style=" color: blue "> text </p>.
Important: style attributes are separated by ; if your style is broken you probably forgot a ; somewhere.
Exemple:
<p style="background-color: #ffcfba; padding: 5px; border: 2px dashed #784e3c; border-radius: 5px; text-align: center; "> text </p>.

a text goes here!

We communicate using text everywhere so having an understanding on how the computer interprets if is pretty useful!
Text types
<p> This is the tag for normal text
<b> It makes the text bold!
<i> It makes the text itallic!
<a> this makes a link! the syntax for linking something is <a href="LINKHERE" > text </a>

<h1> Makes the text big

<h2> Makes the text big

<h3> Makes the text big

<h4> Makes the text big

<h5> Makes the text big

<h6> Makes the text big

You can also use bootstrap to change the size of your text! Using the class display

Ex.

<p class="display-1">display one</p>

display-1
display-2
display-3
display-4

Text color
If you want to change the color of the text you need to add color: color inside style, like this:
<p style="color: red"> this text is red! </ p> this text is red!
HTML has some colors already like red blue gold and even lavender but for a better control you can use a hex value like this
<p style="color: #42C4A1"> this is a teal text!
Or even rgba, like this: <p style="color: rgba(255, 137, 79,1); "> this is an orange text!
With RGBA you can even have different levels of opacity! <p style="color: rgba(0, 0, 0,0.5)"> this is a black text with 0.5 oppacity

Changing fonts
You can use and import a variety of fonts web-wide, but Toyhouse has a limited collection for free users
style=" font-family: 'garamond' "
a text in the Garamond Font!

The size of the fonts can vary, so remember to check your code once in a while to be sure nothing is too big or small;

Span can be used inside other tags
<p> this <span style="color: red"> word </span> is red </p>
this word is red