Example Website

Make a website!

Follow these steps to make your first website in just five minutes or less, if you're quick :)

What software do you need to make a website?

The only things you need to make a website are web hosting, a text editor, and an ftp client. It's also highly recommended that you use Windows or Apple/Mac laptop or desktop.

There are two programs you need on your computer before you can learn to code and build a website: a text editor and a ftp client. A text editor is a program that lets you write and edit code. You cannot code in Microsoft Word. Programs like Word add formatting to text, which makes programming impossible.

A ftp client is a piece of software that lets you connect to your sever and upload files, which you will be doing a lot.

Step 1: Windows

On Windows, I recommend you use Notepad++ as your text editor and Filezilla as your ftp client, both of which are free!

Step 1: Apple/Mac

On a Mac, I recommend you use Sublime as your text editor and Cyberduck as your ftp client. Sublime has a long non-commercial free trial, and Cyberduck is "donation" ware, so you only have to pay if you want to.

I'm not going to include instructions on how to install software. If you need help, Google it :)

Step 2: Get web hosting

In order to make a website (and learn to program), you need access to a server that can host your code. There are LOTS of web hosting companies, and I recommend a company called Interserver. They are an honest, reputable company run by a team of dedicated and friendly people, they have a great hardware, fantastic service, and they give you access to PHP 7 which is what we will be using in future lessons when you learn to code!

Plus, Interserver has an amazing promotion right now where you get 1 month of web hosting for only $0.01 if you use the 'POPULEARN' coupon code. Domain names are just $2 (most domain registers charge something like $10 or $15), and then hosting is just $5 a month after that which is still a really good deal. Since this course is free, consider it an "educational expense". And, as your needs grow, they have very affordable private servers you can easily upgrade to when the time comes.

web hosting offer

Step 3: Access your web hosting via ftp

So once you've got a text editor, a ftp client, and web hosting... it's time to connect to your server for the first time!

a) Grab your ftp details from Interserver

Log in to your Interserver account, and click on the "Log into cPanel" button. (also take note of your username.)

b) In your cPanel, look for the "FTP Accounts" area

c) Write down your FTP credentials

You can download the "FTP Configuration File" to your computer, but you don't have to.

d) Update your PHP version to PHP7

While you are here, you should update your PHP version to the latest. Scroll down and look for the PHP settings.

Use the default settings and press Save.

e) Log in to your account!

In Filezilla (on Windows)

Set notepad++ as your default editor

Make sure you select "Always use default editor". Then, click on the "Filetype Associations" link on the left.

Make sure "Inherit system's filetype associations" is unchecked. Click OK to save your changes.

To log in to your server, enter you login details to the text boxes beside the "Quick Connect" button.

Then, navigate to the "public_html" folder on your server, right click, and make a file called index.html (then skip to Create your fist web page)

In Cyberduck (on Mac)

Open up your Cyberduck, create a new bookmark, choosing FTP-SSL as your connection option.

Create a new bookmark

Enter your login details:

Don't forget to select FTP-SSL in the dropdown menu! This will make sure your connection is secure. Close this window (the red x), then double click on the new bookmark. You might get a security warning, but don't worry about it - it's triggered because you are being redirected to Interserver's secure connection.

And you're in! Your public-facing files are all stored in the public_html folder. Open up the public_html folder, right click and choose "New File" (or when Cyberduck is selected go to top navigation bar on your computer and choose File -> New File...) and call it index.html.

f) Create your fist web page!

Open the index.html file with your new text editor, copy in the following code, then save it:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My First Website</title>
  </head>
  <body>
    <h1>My First Website :)</h1>
    <p>Hello world! This is my first website.</p>
  </body>
</html>

Congratulations, you just made your first website :) In the next Learn HTML in 45 minutes lesson I'll each you what all that code means. Try visiting your domain in a browser, and if everything works you're ready to continue!