Introduction

Welcome!

This guide is intended to be a quickstart to creating websites!

Many people view creating websites as something difficult, however the basics are fairly easy.

How do Websites Work

At the most basic level, websites are just a bunch of files. The browser requests files from a server, and the server responds with those files.

sequenceDiagram Browser->>Server: request: index.html Server->>Browser: response: index.html

Loading Diagram...

The browser is often called the client, or frontend.

The server is sometimes called the backend.

There are several types of files that the browser might ask for:

Hypertext Markup Language (HTML): Files containing the contents of pages
Cascading Stylesheets (CSS): Files dictating how webpages look
JavaScript (JS): Files containing code that adds functionality and reactivity to pages
JavaScript Object Notation (JSON): Files containing arbitrary information
Misc Files: Any other files the site might need to function, such as images, fonts, etc

Static Sites

Because websites are made of a bunch of files, an easy way to make a simple website is to just make these files, and then have a server that gives the browser the files. These are called static sites, as there are no pages being dynamically generated on the server.

Note

While they're called static sites, this doesn't mean they can't be reactive, or have additional functionality to them.

In this context, static site just means there is no extra work done on the server. All of the files it serves are premade. Additional functionality can be added on the client-side using JavaScript

There are several sites that offer free static website hosting!

GitHub Pages: GitHub offers free static site hosting for public repositories. Provides powerful tools for more experienced developers, but it has a barrier to entry for new developers.
Neocities: A static site host targeted towards beginners. Provides an online text editor for editing files, as well as an active community to share your site with!
Nekoweb: A static site host similar to Neocities.

For this tutorial, we'll be using Neocities. However transitioning between these sites isn't very difficult, so you should be able to switch hosts if one offers a feature you like more.