3d spinning computer with a smiley face on it Make your own Website! 3d spinning computer with a smiley face on it

So here's the thing...

I started to make a tutorial, but then I realized that other people have explained this stuff much better than I could.

What you'll find here are links to tutorials that I've found useful, and then tips about what I've learned by laying out websites over the past however-long I've been learning.

Keep in mind that this is only a hobby for me, though, and I still might be doing some things wrong. If that's the case, do let me know, and I'll update this!

HTML

organise your content


HTML, or "Hypertext Markup Language" tells the computer how to organise what's what on your page. It says "make this chunk of text a paragraph" or "treat these words as a heading."


  • Neocities's HTML Tutorial
    This is what I used to start. It's a basic HTML tutorial that's very cute and very easy to understand.
  • Mozilla's HTML Guides
    A more detailed look at HTML. They also have similarly detailed guides to CSS and Javascript.

CSS

edit your content's looks


CSS, or "Cascading Style Sheets" tell the computer how to display the stuff you created with HTML. They say "make all paragraphs Comic Sans" or "change the background color to green."


  • Webguide's CSS Tutorial
    Super easy to understand and a great place to start. I basically just used this tutorial and then looked up whatever else I wanted using Google.

Web Hacks B)

(But not really it's just CSS)

Centering text/images

I was sort of annoyed when I found out <center> was deprecated, because it felt very convenient to use, but in the end it's a pretty easy tag to replace.

Just go into your style sheet and make a "center" class, and apply that to paragraphs or divs where you want the text to be centered.

For images, just surround them with a div with the center class.


CSS

            .center {
  text-align: center;
}
            

HTML

            <p class="center">
  This text will be centered.
</p>

<div class="center">
  <img src="centered.gif">
</div>
            

Much easier than putting 'style="text-align: center"' on every element. Use the style sheets to your advantage!


Image Credits
Graphics are not mine unless otherwise stated. No copyright infringement intended.