Personal Website Survival Guide

Make Yourself A Free1, Open2 Home On The Web

  1. 1 Free as in free speech, and free as in $0
  2. 2 Open as in everyone's welcome!

Table of Contents

It's really more a List of Links than a "table", right?

  1. Welcome To Your New Web Home
  2. Table of Contents
  3. What Is This Guide?
  4. Get Your Site Up And Out!
  5. Look-Edit-Save-Refresh
  6. Focus on Structure
  7. Leave the Details to the Docs
  8. Free and Open Images, Fonts, and Ideas!
  9. Professional Tools For Everyone!
  10. What Now?
  11. Acknowledgements
  12. The End

What Is This?

I want you to see yourself in the big picture of the World Wide Web. I hope that you'll soon share your URL with your friend and with it your pride and joy for your new unique creation.

You can find thousands of resources on the Web for how to build your website, but each is either too much or too little. A walk-through tutorial may not explain each confusing step, and technical documents may overwhelm you with specifics. This guide is just the highlights, the must-haves, the survival kit.

Get Your Site Up And Out!

Sign up for neocities.org, Nekoweb, or ichi.city.

Just pick one and go! You do not need to know anything before you start. These are free and safe and won't lock you in.

I want everyone who reads this to make a website!

However, if you know you want to focus on writing, the web can offer many distractions, so I recommend you use a blog platform. Try ʕ•ᴥ•ʔ Bear Blog, smol.pub, or mataroa and let your words flow quickly and smoothly!

Look-Edit-Save-Refresh

Get comfortable with the fact that you must do these steps in order constantly for each little change you make.

  1. Look at your live site
  2. Edit your HTML and CSS
  3. Save!
  4. Refresh your live site
  5. Optional: Feel deep pride
  6. Optional: Feel deep doubt

Focus on Structure

Forget the details

HTML, CSS, and the whole Web run on Structure, and the more you understand, the more your website dreams will come true.

In HTML, the structure is the syntax of tags and their attributes.

<href="neocities.org">Neocities<a>

In CSS, the structure is the syntax of rules with their selectors, properties, and values.

.small { font-size: 0.8rem;}

Learn and internalize the names we give that weird, mathy text, and the rest will click ;)

Leave the Details to the Docs

Does an img need a src or an href?

Forget the details! Seriously. Nobody keeps it all in their heads. Instead, we build the skills (and learn the Structure!) to find and understand the details we need when we need them.

As you learn from tutorials, articles, videos, and documentation, let the details pass through you like water, but grasp onto the rocky structures and don't let go until it clicks!

Always try MDN by Mozilla first for all web details. Just add MDN to any Internet search and you'll get what you need. They also have great (wordy) learning resources.

Free and Open Images, Fonts, and Ideas!

Your website is public, so you need the legal right to post any images, sounds, fonts, etc. But don't fret. There are so many free resources if you know where to look.

Try CC Search, FontSpace, and GifCities

You can always use anything you make. Ask artists you love for permission to use their work, and link back to their page! Attribute all others' work which you use!3. If your file is too big for Neocities, you can use Catbox!

3Attribution of your sources, recognition of the people and services which provided you their work, is the right thing to do. Be a good citizen Netizen!

Professional Tools For Everyone

Here's a secret 🤫 In every desktop browser, incredible development tools, known as DevTools, hide behind this magical incantation:

Anywhere, on any webpage, Right Click then click Inspect. A portal opens to the HTML and CSS of the element you clicked! From there you can view all of the HTML & CSS on the page. You can see how any website works, and learn from it!

What Now?

Now it is time. You have the big picture. Go, Try, Create, Break, Get Stuck, Get Annoyed and Learn.

You know how you learn best. Here's a tutorial explaining HTML on the web. 32bit.cafe's great guide to all the details. A Neocities Walk-through. More (very pink) explanation of how personal web development works. Here's a more expanded guide like this one.

Thanks to You and The Web

Acknowledgements

3D Hand Cursor by jhnri4 on OpenClipArt. Save button from neocities.org. Refresh icon screenshot from Google Chrome. Novem , Alpha Prota, Rainbow 2000, First Time Writing, Home Video, Home Video Bold, Unitblock, Scabber, OSerif, Crayon Libre, Stampcraft, Free Cheese, TwistTwist fonts all by GGBotNet

The End…

Benig done with this zine marks the beginning of your personal website journey!

If you are ever stuck, or you want to share what you've made, please email me, the author, at reed with 2 es at gmail.