How to make a website
GET A TEXT EDITOR
You can edit HTML with almost any text editor, including TextEdit or Notepad++ — but as we will be dealing with multiple files, we want to use software designed specifically to edit code. This software is called an IDE, or Integrated Development Environment, and gives us a suite of tools to work as a developer.
There are a number of great (and free) tools available to use:
GET YOUR FILES READY
All websites start with, and are served in, HTML (HyperText Markup Language). HTML5 Boilerplate is a basic collection of files that enable you to get editing right away.
- Download the linked file below, and save the folder locally to your computer. Rename the folder to the name of your project.
- Inside your IDE, open the boilerplate folder. You should see the contents of the folder open up inside the IDE.
- Find ‘index.html’ and open the file. This file is the homepage of your website. Do not rename this file.
- Drag the ‘index.html’ into a browser like Safari or Google Chrome. This will allow you to preview your website.
CODE YOUR WEBSITE
Your index.html file is home to the content of your website, but on its own it won't look great or do very much. That's where CSS and Javascript come in.
HTML is the content of a webpage — text, images, buttons, and so on. It lives between the <body> </body> tags.
CSS controls how your HTML looks. You'll find it in css/style.css, and it connects to your HTML through classes and IDs.
Javascript adds interactivity and logic — it's a more powerful layer, and a bit more complex. You can add it to js/app.js.
HOST IT ONLINE
To get your website online, you need to host it on a web server. Because we're building a static site, there are plenty of providers that offer this for free — I'd recommend Netlify as the quickest and easiest way to get started.
- Create an account.
- In Projects, select 'Add New Project', then 'Deploy Manually'.
- Drag and drop your project folder.
- That's it. You'll get a permanent URL for your website straight away.
(OPTIONAL) CONNECT A DOMAIN
A domain points to where your website is hosted and makes it yours. They can cost anywhere from $1 to $1,000,000 a year (though most personal domains sit closer to the $1 end). Holding onto a domain long-term is a good way to establish a personal brand — you can use it for a custom email address, and publish additional websites into the future.
A domain is made up of three main parts:
images
[sub-domain]
.
[root domain]
.
com
[top-level domain]
There are thousands of top level domains (TLDs) to choose from, so get creative.
A word of warning: Many registrars will try to upsell you on products you don't need, or quietly increase the renewal price over time. Always check both the initial cost and the renewal rate before committing. Namecheap can be cheaper upfront, but Cloudflare has a better reputation and sells at-cost.
(OPTIONAL) CONNECT TO GITHUB
So what is GitHub and why should we use it? GitHub is actually just one of the many providers that give us a hosted way to manage a process called Git. The Git process is a universal way of approaching versioning of the code that we write. At its most basic, the Git process is:
Local > Staging Area (Push) > Released Version (Commit)
Using a platform like GitHub enables us to keep a comprehensive history of the changes we make to our website. It also allows us to share our code with other developers, as well as easily deploy our code to website hosts. Rather than needing to re-upload our files each time, we can use GitHub as a middle connector, and send changes we make locally, which get updated instantly on our live site.
(OPTIONAL) BUILDING IT BIGGER
As your website grows, you might find you need a bit more structure. A framework can handle things like routing, dynamic pages, and content management — and there are thousands to choose from, each designed to make specific tasks easier. This is also where things get more complex, with additional languages like Python, Ruby, Java, or PHP coming into play. That said, simpler is almost always better. At its core, the web is just HTML, CSS, and Javascript.