Your Own Website

Let me tell you about the magic of having your own website.


Here's what sucks about making 'professional' websites today: It's like when you were a kid, and your parents told you that you could grow up to be anything you wanted, and then you grew up and realized 'fuck... I can't be a [insert cool career here] unless I want to literally starve to death and be homeless'. So suddenly all of those fun things you dreamed of doing are narrowed down to 'valuable' and 'marketable' stuff tailored to your skillset.

It's the same as any kind of avenue of self-expression. Many feel that because their hobby/interest can't generate a revenue for them, it's a waste of time. Have you ever wanted to start a YouTube channel but then you think of how oversaturated YT is with people who are also trying to "make" it, so you have all of this pressure to make the BEST channel and the BEST content that will stand out and get seen (because algorithms), and then you feel discouraged because who are YOU compared to freaking Pewdiepie?

The internet today is focused on highlighting "top" content and "top" influencers. It's a popularity contest - exhausting. This is where YOU come in and make a super awesome website, and help to rebuild the cozy smalltime web where the rules are made up and the points don't matter! Who cares if you aren't making money, it's free??

I want to help ANYONE be able to make their own site. Here's a hopefully easy-to-follow guide for getting started with OR improving your (static) website. Click to expand a section!



1. Identify what KIND of website you want (the best part!!)

My website is a mix of a personal site and a uh... informational blog I guess? If getting personal on the web doesn't appeal to you, there are so many other options. You can even use a combination of ideas. I recommend picking something you're passionate about!

Personal
An "about me" page
A web shrine for a favorite media or concept.
A collection of casual memoirs.
Lists of your favorite things.
A public dream journal.
A showcase of your art/writing.
A blog
Non-Personal
An informational site.
An instructional guide.
An interactive website existing of links and pages.
A directory of links to your favorite sites.


2. Identify your current skill level in HTML and CSS.

If you've ever successfully made changes to your layout on Myspace, Spacehey, Xanga, Livejournal, etc. then you probably have some experience with HTML and CSS.

Do you know what these lines of HTML do? (If not, no worries!)

<a href="https://link.com/" target="_blank">My Link</a> 
<img src="https://myimage.jpg">
<br> <br> <br>

What about these lines of CSS, can you roughly determine what this does?

.about {
  color:#fff;
  font-size:15px;
  line-height:20px;
  background-color:#000;
  border:1px solid limegreen;
}
If this looks intimidating or unfamiliar, I recommend getting started with a basic guide, like this one or this one.

If it makes sense to you though, you probably know enough to proceed with this guide. (If you think I'm wrong or think I should provide more resources, please let me know.)



3. Use & edit pre-made layouts

This one may be a bit controversial, especially because there have been many an internet fight about "stolen" layouts. I guess if you're using a layout you found online... just make sure to use credit if required. Some of the older sites prohibit anyone editing their stylesheet, but who's gonna know?

I learned everything I know about modern CSS from tweaking Tumblr layouts to make them fit my vision, lol. Find some ready-made HTML layouts here.


4. Play with HTML/CSS in a sandbox environment.

Even if you're not totally brand new, I recommend taking some time to play around with HTML/CSS in a live editor where you can see your changes instantaneously.

This is the single most useful resource I have ever used when creating a webpage. The guide above talks about running everything from your PC, with text files which is one way to do it - but it gets a little exhausting to refresh after every page to see what it looks like.

A great tool for this is CodePen. With CodePen, every time you make a change to your HTML/CSS, it automatically refreshes with a live preview.



5. Learn to use the developer console.

I KNOW it sounds intimidating but I swear to you, it has made my life SO much easier. I recommend doing this in Google Chrome but it's pretty much the same as Firefox. I mainly use the console when:

Something I did on my page looks weird and I can't figure out how to fix it.

Ready for the answers to all of your questions? Open your page in a browser. Right-click anywhere on the page and click Inspect or press ctrl+shift+e. It will bring up the console which consists of two main areas. One is for HTML, and the other is for CSS.

At the top left of the console, you'll see an image of a square with a cursor in it. This is the inspect tool. Click on this, and then click somewhere on your site that's looking weird. The exact line of HTML and the CSS that is associated with it will be selected.

In my experience, it's usually the CSS that's being a pain in a butt. If you hover your mouse over the CSS for that element, you can actually deselect specific properties to see in real-time how removing that element would effect the page, (like unchecking "background-color:#000;" to remove that line). You can also replace element properties (like changing it to "background-color:#fff") and watch the changes happen instantly.

I find this most useful for positioning elements because that is something I do not have a complete grasp on yet. If I'm especially frustrated and feeling like I don't know what to do next, I just play around in the developer console until I figure out what's causing or what would fix the issue. Note that any changes you make in the console do NOT save, so be sure to make note of which settings you're changing. Also, if you refresh the page, all of your changes will be gone.



6. Don't be afraid to a u t o m a t e.

Let's be real here. You probably have an exhausting job with limited free time, and you DON'T want to become a web developer. You don't have to, this is just for FUN! So what's the harm in cutting some corners to skip to the fun parts?

I am not an expert at HTML/CSS by any means, but I would say I know more than the average person. The way I've learned the most is essentially by 'cheating' uhh... automating - so let me explain a little bit how that looks.


Cheatin' CSS

Layout

If your idea of a good time isn't manually creating a bunch of DIVs and then suffering to figure out how to align them just the way you want, there are tools that can help you map out your general layout and then automatically generate the CSS/HTML to create it.

A tool I recommend for beginners is ConstructYourCSS, which makes it super easy to lay out (once you figure out the order it places everything in).

Cleaning up Formatting

If your code, like mine, usually looks like spaghetti, you can run it through a Beautifier which will automatically fix the formatting so everything is nicely indented to your preference.


Cheatin' HTML

Skipping the Formatting

Unless you've been practicing for a while, some of the tags might be difficult to remember, like how to make a table, a list or a bunch of links/images! Wouldn't it be cool if you could tell the computer what you want and it could just... make it for you?

Start out with an HTML Boilerplate template like this one. It's basically a skeleton of all of the HTML tags you need for a basic functioning site.

Check out this HTML Generator. You can generate all sorts of stuff which can shave some time off of putting everything together and making it ~work~.

If you prefer to type something out in Word or Google Docs, but dread going through and manually adding formatting tags, I gotchu!

Try this Word to HTML tool that lets you paste your formatted version in, and automatically generates HTML tags to make it look the same on a webpage.

Cleaning up Formatting

I suck at indenting things, period. Where should you put this closing <div>? Did you lose track of your HTML nesting?

A great tool for this is this HTML Formatter. I've had weird luck with other sites, probably because my code is garbage. The tool will auto-nest your HTML clearly and neatly.


7. Find somewhere to host your static site.

Finding a host makes it possible to share your website to others and usually assigns it a subdomain based on the host (like username.neocities.org).

As you might imagine, I recommend Neocities which is what I use to host this site. It's FREE! And for $5 a month, you can get some pretty cool extra features but honestly they're not necessary.

You can also use Github Pages but I find that's best for when you need to host something more professional (like a portfolio).


8. Sharing your website.

Having a website is no fun if no one knows that you have it. One of the perks of Neocities is that your site is visible to all other Neocities' members, and they have the choice of following your site to watch for updates. This is seriously awesome because it already guarantees you won't be shouting ~directly~ into the void.

What other options are there? Well, in the old says there were Web Rings, a collection of like-minded users sharing their personal website. They're few and far between but they still exist! I plan on adding a list of active webrings eventually.



If HTML and CSS aren't your jam, have a look at these drag & drop platforms:

https://build.mmm.page/
https://hotglue.me/