heart's super awesome guide to building your own webzone

this page is a huge WIP but here's the general advice for now
1. Get familiar with HTML / CSS terms if you aren't already!
A very easy way to do this is to go to W3Schools.com and starting their free HTML introduction tutorial, or just use the entire site for reference as you're figuring stuff out. This website is my go to for when I forget anything HTML related.

2. Open up a live HTML editor (a live editor is one that shows your page changing as you code)
* If you want a program on your computer instead, I would download Brackets. It has live previewing and other nice features. There is a 'successor' program called Pheonix Code but I haven't used it so idk if it's as good as Brackets.
My go to is htmledit.squarefree.com because I'm strange, and like having it in browser. Only downside is it does seem to pad whatever is in the preview, so sizing might not be the same when applying code made here to your website. It's not egregious, just a lil off a few pixels.
Another option is liveweave.com which allows for a seperate CSS and JS tab to code in.

2a. (Optional) Find some free website templates
Totally optional, but I will say I wish I did this before I threw myself into website coding with only Tumblr custom blog theme knowledge.
Here are some template sites with layouts I really enjoy (featuring mostly late 2000s to early 2010s web design)
all-free-download.com + html.am + freewebsitetemplates.com dreamtemplate.com

3. Start fiddling around!
It'll definitely be weird at first and frustrating trying to figure out why something went wrong, but as you keep making pages and editing existing ones, you will begin to familiarize yourself.

extra advice

1. display:inline-block is my bestest friend

position:absolute is not my friend! unless it's used on something already contained within a div, then it's a good friend

2. Utilize z-index! do you have a site graphic that keeps overlapping on important bits?
z-index: -1; that shit!!

3. Refrain from using percentages for width and height on main divs
I thought this was a great idea at first because in my head it meant no matter what monitor someone was using, they could view my site!
it ended up making my site look a hot mess and not how I really wanted. IMO it's better to use px for any wrapping or main divs, and then create subdivs within those divs that use % instead.
its even better for mobile viewing if you care about that

4. The span tag is good for sections of text you want to add decoration to, but not create a whole new id or class for. Can't do much else though