Easy & Quick Guides

Theme Switcher
Switching themes may cause eyestrain

Welcome to 527bee's easy and quick HTML/CSS guides. Open a tab to get started. Going in order is recommended

Before We Begin This guide assumes that you are:
  • A complete HTML and CSS beginner whose webdesign experience was Carrd/Strawpage/Wix/etc reliant
  • Doing this on computer
You won't need to be both to get something from this guide, however, I do imagine that you will need to skip around if you're not the former and that you'll have trouble copy-pasting if you're not the latter.
The Basics (Read if you have no experience) Brief warning: This one will be long.

So the first thing you need to create any webpage: a code editor.

This can be anything from Microsoft Notepad to Brackets to the Neocities editor. Pick whichever, as long as it can save things to a .html and .css file

I recommend using the Neocities editor if you're on mobile as most default notes editors will save only as regular old text files.

Next, let's move onto the parts of your basic HTML page. 
          
            <html>
              <head>
                <!--This is a comment. Also, the head tags surrounding this thing? You can put...-->
                <title>A title!</title>
              </head>
              <body>
                <p>Meet your average HTML page framework.</p>
              </body>
            </html>
As you can see, it looks nothing like any drag-and-drop editor you may be used to. But trust me, this will provide you the best deal of freedom for free.
Do you notice anything about the code?

That's right! They are all enclosed in less-than and greater-than symbols <like this>!

That's basically to declare that they're not words in a sentence, rather, they're building blocks of your code.

If I typed out p instead of <p>, it'll display regular ol' letter p! But if I put p in-between croc mouths, it won't display. In fact, I have to use special tags to display the p in croc mouths like I did earlier.

Those building blocks in croc mouths are called tags! They're really important.

Some tags like <html and <body need to have closing tags (The tags with slashes in them)
This is because they are container tags. Now, container tags have many different names, but for consistency's sake, this page will refer to them as container tags. Container tags need to have a closing tag to function properly and while you can get away with not ending them properly for a bit, the second your page becomes more complex, it'll be a huge mess.

Tags that don't need ending tags we'll call standalone tags. We'll get into them later, but know that almost all images (<img>) are displayed via standalone tags.

Let me now introduce you to the important tags!
  1. html - This is the most important tag. It's the outermost tag no matter what.
  2. head - Without this container tag, you wouldn't be able to style your website or give it a title!
  3. body - Where you put all the content. I'd say it's second most important after the HTML tag
  4. a - Stands for anchor! This is how you hyperlink text and make text buttons
  5. img - This standalone lets you put in images, very important
  6. br - This is a standalone tag that stands for linebreak! Put two to make an empty line
  7. div/span - Honourary mention to these two tags who make styling things easy.
The difference between div and span Spans and divs are different in that spans are in-line while divs are blocks. Imagine it like this:
Divs want to be different and stand out. So they seperate themselves and take up their own space by default.
Spans want to highlight important things but don't want to outshine others. So they stay in line with the rest of it all.

For better demonstration:
This is a div, it's background colour takes up the entire space by default and leaves no space for others.
Like a tiny plain text like me...

This is a span, note how it only takes up as much space as it needs to. So I can put normal text next to it and it'll be on the same line.

Here's how the code looks on my end. 
              
<div style="background-color:darkred; color:white;">This is a div, it's background colour takes up the entire space by default and leaves no space for others.</div> Like a tiny plain text like me...
<br><br>
<span style="background-color:darkred; color:white;">This is a span, note how it only takes up as much space as it needs to.</span> So I can put normal text next to it and it'll be on the same line.

Remember one last thing: Every change, refresh the page
Styling Your Page So you've made the frame work, you've added your content... But your page looks butt-ugly and hurts your eyes.

What do you need to do? Style it, of course!

There are two methods to styling your page:
A) Making a CSS stylesheet and then importing it. This is the best option if you're planning to make a multi-paged site.
B) Putting your style into a <style> tag. This is the best option if you're only styling a single page and won't need to reuse the style.

To do the first method, simply make a new file in the same directory as the html file you're editing and put this line of code in: 
          
            <head>
              <link href="/CHANGE_THIS_TO_YOUR_CSS_NAME.css" rel="stylesheet" type="text/css" media="all">
            </head>
Then you can edit the CSS stylesheet with the guide below.

For the second method, do this: 
          
            <head>
              <style>
                /*Put your styles in here*/
              </style>
            </head>
Then you can edit the CSS stylesheet with the guide below.
Styling Your Page (Continued) This is where the real magic begins.