How to make a website

Introduction

This guide is about how to code a website. Therefore, I am going to assume that you want to learn how to code (as well as 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, as an art portfolio, etc) and you want to get there as soon as possible with a professional-looking result, then this guide 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 and host it on popular indie web hosts such as Neocities or Nekoweb, this guide is for you!

Learning coding

HTML

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> and italic text looks like <i>this</i> (the b stands for bold, the i for italics). 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 to rush though: Just learn the most basic ones and as you continue to learn to code you'll naturally 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, but if this confuses you just stick to HTML for now.

CSS

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 border.

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.

Development 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 open them with the F12 key or via your browser's menu (usually hidden somewhere in "more tools") or via right-click a page and selecting '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.)

Tips

If your website doesn't update after you've made changes, it's probably because of cache. Learn how to fix this here.

Code Editors (IDEs)

There are many different ways to write code. (All tools/software I mention here are free.)

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 of IDEs that are helpful include: automatic formatting/indenting (very important to keep code easy-to-read and organised!), autocompleting code suggestions (e.g. typing background-c in CSS will suggest background-color, and more! You'll really want these features.

Online Services

Online Services. Some online sites make it possible to code small projects without leaving your browser. The most famous ones include codepen and jsfiddle. Or, 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.

Hoster

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

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. 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).

Hosting

Choosing a hoster

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.

Going live

Once you have an account for a hoster set up you'll need to upload your files to make your website live. For example, your index.html will become your homepage. Files you have to upload include all your HTML, CSS, JavaScript as well as any images you want to host on your own website.

Most hosters will give you an option to upload files manually, but there are easier ways to do this: For example, you can automate updating your Neocities website with the help of a git Action - I have a tutorial on that here.

Next Steps

JavaScript

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.

More

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

1. 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.
2. Don't forget to also learn to use the browser development tools, especially the inspector and console. This is not optional.
3. 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.
4. 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.
5. 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.
6. After that, you're free to learn whatever interests you.

Comments

Leave your questions, problems, suggestions, requests and thanks here!

To share very long code or error messages with me, please upload it to pastebin (or a similar site) and include the link. This is to make sure you don't hit the max character limit on comments.