How to Start Your Own Website

August 6, 2021

Creating your own website can be a low cost (or free) way to establish an online presence, boost sales, and cater to a business’ unique needs. Best of all, a website is online 24/7, so anyone can access it any place, any time.

While most people want a really cool website, there seem to be a lot of roadblocks to even getting started. How do websites work? What would creating one look like? How would you share it? We will be discussing all of these things here with the goal of getting comfortable developing and sharing our very own website.

Understanding How Websites Work

A user, computer, Internet connection, and servers making the Internet.

Servers are file storage systems that make up the Internet. Hosting is a service that allows website files to be uploaded to a server and connected to a domain name.

Pages on a websites are HTML files at their core. HTML files contain markup (what most people call "code",) that tells your browser what to display and how. This markup can easily be edited to add content, media, links or other types of page information.

Because websites are usually made up of multiple pages, it's important to understand how page locations are determined. Here is an example of website files and how their file locations relate to their addresses:

Website file structure: The location of the page depends on the domain and what folder(s) index.html is in.

A webpage's address depends on its domain name, along with where an HTML file is located.

Setting Up Your Environment

Now that we have an idea of how websites and their files work, let’s make our own. Here are some tools that may be helpful:

Once you've installed a browser and text editor, create a folder on your computer that will contain your website files. In a text editor of your choice, open the folder containing your website files so its contents can be browsed. Then, create a new file (or path) here called index.html.

Creating a new path called index.html. A folder containing index.html.

In a web browser of your choice, open index.html.

There are now two ways you can view your website:
one that lets you edit its markup, (the text editor,) and another that lets you interact with it (the browser).

A computer setup with a text editor and browser splitting the screen in half.

Creating Your Website

Now that our environment is ready, let’s add some content to our website. To do this, we’ll need to use the text editor to edit the blank index.html file. We can start out with something simple, like saying "hi".

<html> Hi! </html>

Once changes are made, save index.html and refresh the page on your browser. You should see it update with your message.

<html> and </html> are called tags: the first being an opening tag, the last, (with a slash preceding it,) a closing one. Tags are used in HTML to tell your browser what part of the file it’s looking at and how to process it.

Most websites also have <head> and <body> tags, so let’s add those, putting our message in the <body>:

<html> <head> </head> <body> Hi. </body> </html>

To add a title, add <title> tags in the <head>:

<title>My First Website</title>

When you refresh your browser, you’ll notice the title of the window update.

Let’s add an image. In the text editor, create a new folder in the same location as index.html called images:

Creating a new folder called images.

You can use your own photo or find an image online you want to use. (If you are sharing your website with the public, use something free-to-use.) I’m using this image I found of a cat from Unsplash:

A fluffy orange cat in a pink room.

Once you have an image, rename it to your liking and keep in mind what format it is. (Common formats include .png, .jpg, or .gif.) Move this image to your images folder:

Adding an image to a folder.

To add our image, we’ll use an <img> tag. In this tag, there is a src attribute where the path of the image file must be referenced.

<img src="images/cat.jpg">

Save changes in the text editor and refresh your browser to see the image appear. If you’re like me, the image isn’t the ideal size. To change its width, we can add an id attribute to the <img> tag in order to add styling.

<img id=“cat” src="images/cat.jpg">

To set the image’s width, let’s add some CSS. Between the <head> tags, we’ll add a set of <style> tags. Here, we will use CSS to add styling to our image. Because we added an id, we can reference the image using a # symbol followed by its id. Directly after, there will be curly brackets containing styling information, like so:

<style> #cat { width: 300px; } </style>

By adding elements onto the page with id or class attributes, (An id is for a single element, a class is used for multiple,) we can specify styles for these elements.

A <div> tag is an easy way to wrap content and add styling to it. Using this tag, we can create a header and footer. I'm also going to add a <br> (line break) between my message and image, so the image appears on a new line.

<div id="header"> Header </div> <div id="content"> Hi. <br> <img id="cat" src="images/cat.jpg"> </div> <div id="footer"> Footer </div>
Screenshot of website with no styles yet.

Not bad so far. Before making cosmetic changes, let’s add a link. Links are created by wrapping text or an image in an <a href> tag. (Note: the closing tag, </a>.)

<a href="https://www.w3schools.com/html/default.asp">This website</a> taught me a lot.

Now that we have our page elements, let’s work on how they look. Moving back into the <style> tags, we can remove the default page margins and center everything on the page by adding this:

body { margin: 0; text-align: center; }

Let’s add styling to the header and footer, too. White space is an important aspect of web design in general, which can easily be achieved with padding or margins. (Padding is like margins, except it adds spacing in an element rather than around it.) Because I want to apply the same spacing to both elements, I can group them together using commas.

#header, #footer { padding: 20px; }
Screenshot of website with centered text and padding.

The page looks better already, but let’s improve it. We can make our content scroll further by adding a tall height to it, and make our header stay in a fixed position when we scroll. (This involves adding a few more lines of CSS so the header stays top-center.)

#header { position: fixed; top: 0; left: 0; right: 0; } #content { height: 1200px; }

Next up is choosing a font. I prefer Helvetica, but there are lots of web safe fonts available.

body { font-family: Helvetica, sans-serif; font-size: 14px; text-align: center; }

We can also add background colors to our header and content to distinguish parts of the page. I'll also add z-index values to ensure that the header stays layered above content. (For choosing colors, you can use an online color picker, or install a color picker plug-in for your text editor.)

#header { z-index: 2; position: fixed; top: 0; left: 0; right: 0; background-color: #ffffff; } #content { z-index: 1; height: 1200px; padding: 78px 0 20px; background-color: #fbedf0; }

Changing the color of links can be done in many ways—let’s keep it simple for now. You can also make your image look more stylized by adding round corners with border-radius.

a { color: #ff7e99; } #cat { width: 300px; border-radius: 15px; }

Lastly, I’m going to change the text content to fit the context of the cat photo I chose. (I'm unsure of the cat’s real name, but let’s just pretend Freddy is their alter ego.)

<div id="header"> Freddy </div> <div id="content"> I am Freddy the cat. <br> <img id="cat" src="images/cat.jpg"> <br> Check out this <a href="https://zacclarkwebdesign.com/2021/">cool website</a> I found.</a><br> Wish there were more cats, though.</a> </div> <div id="footer"> &copy; Freddy Meow Kibbles </div> Screenshot of website with full styling: fonts, colors, and all.
View the demo
Download the demo

Sharing Your Website Online

Now that our website is done, how do we share it?

There are actually many free website hosting options. Here are just a few I recommend:

For this demonstration I will be using Netlify, but other platforms work pretty much the same. You’ll need to create a free account on a platform of your choice, and then navigate to their hosting application. For Netlify, it's app.netlify.com.

On a brand new account, there will be an area you can upload your website files with a drag and drop. (Make sure you are uploading the folder containing your website files.)

Screenshot of drag and drop directions on hosting application.

Once your website is uploaded, you should be redirected to your website’s information. From here, you can go to your site settings where you can set a free domain (with a .netlify.app extension).

We can also connect our own custom domain. Buying a domain is optional, but it’s cheap and makes your website look more reputable. A domain name registrar that I use and recommend is Namecheap, but others work very similarly. Registrars provide a way to search for and register your desired domain, most only costing about $10 yearly.

Once you've found and purchased a domain from your registrar, go back to your hosting platform and view your site settings. There will be section related to domain management; here, you can type in your new domain.

When you add it, the domain should appear in your custom domains with an error. To complete the setup, go to the domain’s options and navigate to the DNS panel (this might also be called ’Set up DNS’). Here, there will be a section that shows you hosting name servers that you'll need for your domain registrar.

Screenshot of domain options on hosting application. Screenshot of name servers on hosting application.

Back on your domain registrar, go to your list of purchased domains and view the details of your new domain. Under name servers, select the custom DNS option and add all of the name servers given from the DNS panel on your hosting platform. Make sure you save your changes.

Screenshot of name servers on domain registrar.

These changes can take up to 24 hours to take effect, but once this process is done, your website is live. I hope that this walkthrough provided all you need to kickstart your website!

Here are some additional resources that can help add to your website building skillset: