How to make a website

Interested in making a website? Here's a little guide I wrote! It won't teach you anything per se, but it will tell you want you will need to learn, in which order, and how. I hope it's helpful to you!

(This page is still a bit work-in-progress and will be expanded soon.)

To code or not to code?

This guide is about how to code a website. Therefore, I am going to assume that you want to learn how to code, and every other step required to host a website. However, maybe you want a website but are not particularly intersted in learning to code? That's of course super valid too, and though I think that coding is a lot of fun and a wonderful skill to have I understand that some people just want a website with as little effort as possible.

So, if your goal is simply to have a website because you need one (e.g. for your business, portfolio, etc) then this guide probably isn't for you. There are ways of creating websites without having to know how to code. Just google "free website builder" and you'll find some. Many of these builders have professional websites in mind, but you can also create fun personal sites with them or other services such as carrd and straw.page.

But if your goal is to code a website, this guide is for you!

To clarify: If you want an indie website hosted on Neocities or Nekoweb specifically, you'll have to learn how to code!

Where to start...? (HTML and CSS)

In the most simple terms, the very first step to learning how to code a website it to learn HTML.

HTML is not technically a programming language but a markup language. That's just semantics, but essentially you can think of it like this: You know how you can use stuff like *this* and **this** to format text bold and italic in some applications (e.g. YouTube comments)? That's also markup; a way to add basic formatting to your content by using pre-defined symbols. HTML works just like that. For example, bold text looks like <b>this</b> (the b stands for bold). And that's really how simple it is!

HTML is very easy to learn, you won't have many problems. There is only a very limited number of elements (e.g. bold text, images, links, tables, ...), and I believe you could theoretically learn them all in one sitting. There's no need for that though: Just learn the most basic ones and as you continue to learn to code you can learn the rest.

As to how to learn HTML... That's really up to you, as it depends on how you like to learn. For beginners I highly recommend interactive tutorials, so that you can get the theory and the practice at the same time. Personally, I also like text-based tutorials. Others might prefer video tutorials. (It can be helpful to watch a video tutorial on the language as a whole before starting a more in-depth tutorial, so that you already have a bit of an overview of what the language looks like and how it works.) Whatever you like, just search for it and you will find thousands.

Some HTML tutorials might at the same time also teach you CSS.

You can absolutely learn HTML and CSS at the same time.

CSS is the second language you need to learn. While HTML is mostly about the content of your website, CSS is the styling. For example, in your HTML you write your paragraphs and insert your pictures, and in your CSS you will right-align your text, make the heading blue and give the picture a frame.

The basics of CSS are very simple too. For example, to make a text red, you use the following rule: color: red;. However, CSS is a very powerful language, and there are many different rules to learn. It will probably take you years to know most of them, but don't fret: You won't need most of them at the beginning.

Just as with HTML, I highly recommend following an interactive tutorial for learning CSS, or at the very least coding alongside a text/video tutorial. You'll need to start feeling comfortable writing code.

By the way, interactive tutorial should provide you with a way to write code within them. But if this is not the case, or if you're following text/video tutorials and want to start coding by yourself you will need some kind of software to code in. I'm covering this in the next section.

What if something doesn't work...? (Dev Tools)

You'll try to do things, and sometimes they won't work. So what now? Troubleshooting.

Learning how to find out which mistake you've made is one of the most important skills for coding. Unless you know your mistake, you can't fix it.

There's many ways to troubleshoot and debug, but for beginners the most important tool are your browser's development tools ('dev tools'). You can use them with the F12 key or via your browser's menu (usually hidden somewhere in "more tools") or via right-click 'Inspect element'. Your dev tools let you inspect your website's HTML and CSS and read error messages. You can even temporarily change the HTML and CSS to test out changes you want to make. Be aware that all changes made in the dev tools will vanish once you refresh the page!

Try inspecting the following element for a secret message:

I've already written a guide about the dev tools and troubleshooting, so I won't repeat myself here. Click here to read it. (The guide also gives some tips on where and how to ask for help when you're stuck while coding.)

With what to code...? (Editors and IDEs)

There are many different ways to write code.

Online Services. Some online sites make it possible to code small projects without leaving your browser. The most famous ones include codepen and jsfiddle. If you're using an interactive tutorial for learning how to code the tutorial itself should have a space to write your code into. These services are a great way to try out code really quick, or to share small code snippets with others (You will often see links to code hosted on codepen in tutorials!), but they are extremely limited in features, so I do not recommend using them for ongoing projects.

Directly in your Hoster. Your website being live on the Internet means that the HTML/CSS/other files are uploaded to a server somewhere. Often, hosters make it possible to edit files in there directly. An example is the built-in editor into Neocities.

These two types of editors suffer from limitations that make coding harder than it has to be, so avoid them if you can, especially as a beginner!

Here a two great ways to code locally (= on your device):

Text Editors installed on your device are the simplest way to work on your project locally. Opening your HTML/CSS/other file in a text editor and editing it in there is similar to opening your texts in word documents. (To clarify: Word is NOT a text editor to use for coding. I shudder to think about it.) You can use your computer's built-in text editors (e.g. NotePad), but those basically have no features. Notepad++ is a very popular alternative, which is still simple to use but has more features. For your very first time coding, I think Notepad++ is a good choice.

IDEs. IDEs are programs that are made to code in. The most popular for web development is VSCode (Visual Studio Code). I personally love VSCode, it's great and it's what I use. VSCode has many features, and you can easily install add-ons to add even more features. Once you're somewhat comfortable coding and have multi-file projects I highly recommend switching to VSCode. (I have a site that shows my VSCode setup (e.g. installed addons) here, if you're interested).

All tools/software I mentioned is free, by the way.

If you're wondering what those nebulous "features" are that I kept mentioning there...: Some things make the process of coding much, much easier. It pains me so much whenever I see beginner coders use an online editor to code whole websites... No wonder they are having such a hard time finding their own mistakes, there is basically no error check! Besides checking for errors, some other features that are helpful include: automatic formatting/indenting (very important to keep code easy-to-read!), autocompleting text and code suggestions (e.g. typing background-c in CSS will suggest background-color, and more!)

Hosting

So, now you have some HTML and CSS files, and now what? How do publish it to the internet?

You need a hoster. In simple terms, a hoster provides you with a server that will host your website on the Internet 24/7. You just have to register, choose a URL (most hosters offer free URLs that end in their domain name, e.g. .neocities.org), and upload all your project files (your HTML, CSS, JavaScript, images, etc).

There are free hosters and paid hosters. Paid hosters usually offer more space for your files and better uptime. But for a personal project, free hosters are usually more than enough. (I am also using a free Neocities account.)

Popular hosting sites for the indie web are Neocities and Nekoweb. Be aware that free Neocities accounts are not allowed to use external scripts. (More info on that here.) Nekoweb does allow it, however, Nekoweb does not have a community as big as Neocities. The choice is yours.

If you want a custom URL such as example.com, you'll have to purchase one. These domains are usually paid monthly or yearly, and the price depends on the ending. .com domains are quite expensive.

And now...? (JavaScript and Beyond)

JavaScript (JS) is the third most important language to learn if you want to make a website. If HTML is content and CSS is styling, then JavaScript is functionality/interaction. With Javascript, you can make elements appear and disappear, make something happen when a user clicks a button, and so on. You can also use JavaScript to dynamically (this means during run-time, so while a visitor is browsing your site) change HTML and CSS! For example, you can add an HTML element when a button is clicked, or change the styling of an element at a specific time of day. The possibilities are endless.

Heads up: Not all interaction is JavaScript. For example, links to other pages are simple HTML elements. There is also an HTML element that lets visitors show/hide more content (like a "Read more"). Hover effects (e.g. changing the color of a link when the mouse is on top of it) can be done with CSS. But everything beyond these simple things is most likely done with JavaScript.

JavaScript is the first real programming langauge you'll learn. There's variables, functions, array (those are lists of variables), loops, and so on. As such, JavaScript is harder to learn than HTML or CSS, as you'll have to learn entirely new concepts which are shared between all programming languages (Reminder: HTML and CSS are not programming languages).

As before, I highly recommend learning JavaScript with an interactive tutorial.

By the way, if you ever see a tutorial that wants to teach you jQuery (which is a JavaScript library) - run and never look back! You don't want to learn jQuery, it's outdated and stupid. I elaborate on this here.

"Java" is also a programming language. It has nothing to do with JavaScript, so please don't let that confuse you. You don't need to learn Java to make a website.

Once you know HTML, CSS and at least the basics of JavaScript there is still a lot to learn! Check out my guide: "I know HTML/CSS/JS. Now what...?"

FAQ

Do I have to be good with computers to be able to learn how to code?

No. First of all, being 'good with computers' is not in your genes or a talent, it's a skill, which means you can improve in it. The more time you spend with computers, the better you will be with them. But coding on a beginner level doesn't actually require you to be very good with computers. You're not going to hack into a mainframe or built a PC from scratch. You're just going to write a bit of code and run it and (probably) get an error message, then fix it and run it again, ad infinitum.

The skills most important for coding, in my opinion, are logical thinking, problem solving, and persistence. Knowing how to google and reading comprehension (for error messages) also helps.

Do I need a computer to code, or can I do it on a phone?

First and foremost, if you can, code on a computer, not your phone. It will make many things much easier. But yes, if you don't have a computer, theoretically you can code on your phone. It will probably be a pain in the ass though. And as I've never done that I can't give you any software recommendations, sorry.

How do I build a layout like this...?

See here.

What do I do so I don't have to change my layout in all HTML files for every change?

See here.

Summary

Start by learning HTML and CSS with interactive tutorials. HTML is the content of your website, CSS is the styling. You should feel very comfortable writing HTML code and at least somewhat comfortable with the most basic CSS rules.

Don't forget to also learn to use the browser development tools, especially the inspector and console. This is not optional.

To code, you can use an editor (such as Notepad++) or – even better – an IDE (such as VSCode). Whatever you use, make sure it checks for errors and formats your code for you; that will help a lot. Avoid online editors (such as Codepen) for projects as they lack features, but you can use them to try out things quickly or share code snippets.

Once you have a project (that is: at least one HTML and CSS file) you want to have on the Internet, choose a hoster (such as Neocities or Nekoweb) and upload the files. Your website will now be live on your chosen URL.

The third language (and the first real programming language) you should learn is JavaScript with an interactive tutorial. JavaScript is the functionality/interactivity of your site.

After that, you're free to learn whatever interests you.

More Guides

Here are some other guides I've written that will be helpful to you:

• common questions
• common mistakes
• code quality guide
• i know html/css/js... now what?
• CSS positioning/layout tutorial
• Neocities tips
• self-study checklist