How To Make a Web Site

This webpage details how to make a website that can serve as your hub online. Think carrd but it's yours. The goal here is not to explain the deep inner workings of HTML, CSS, JavaScript or the like nor is it to teach you to code. The goal is simply: make it so that you've got YOUR space online that can be easily transferred.

Please note that while some services are referenced here, I am not necessarily endorsing any such service nor am I saying I have used every service here and thus can help you troubleshoot whatever particular service you use.

Want a little more explanation? Maybe even get a site up and running? Read on.

Vocabulary

Here are some terms that may be useful to you as you read on.

Domain Name

the name of the website that you type in the URL bar (e.g. google.com)

Subdomain

this is a portion of a domain name used to create separate sections of a website. Many websites offer this to you for free for you to host your content under their brand (e.g. username.tumblr.com, username.wix.com, username.bigcartel.com, etc.)

Domain Name Registrar

the business that handles the registration of your domain name (e.g. such as porkbun, namecheap, cloudflare)

Web Host

the server that hosts (stores and displays) your website and its content (e.g. tumblr hosts a number of user's blogs)

HTML

HyperText Markup Language is what a web page is made of. You use it to mark up where text, images, and other content goes on the page when it is loaded.

CSS

Cascading Style Sheets are how you style your page to make it look nice. These styles can be separate files you link to in your HTML or it can be embedded within it.

With some vocab under our belt, let's get started!

Get Your Domain Name

If you do nothing else, get you a domain name.

A domain name is like your username on a site -- except, you can bring it with you anywhere! It is your address. But much like you need to pay your rent, mortgage, and/or property taxes to stay living at your address in meatspace, you need to buy and annually renew your domain name to keep your address in cyberspace (luckily, domains can be really cheap, less than $15 USD a year.)

If you buy a domain name, you can then at minimum redirect your domain name to ANY SITE you want.

For example, say you have a carrd account at yourusername.carrd.co and want to use a custom domain but don't want to pay for carrd's Pro Standard account. You can have your domain name yourname.com forward to or redirect to yourusername.carrd.co when a user types "yourname.com" into their browser's URL bar.

Register Your Domain Name

Steps to buy and then connect your domain to your web host (or forward the URL to another URL) vary depending on domain registrar, but in general you will do the following:

1. Navigate to the domain registrar's site
2. Search for the domain name you want to buy. If it is available, you will be able to purchase it.
3. Purchase the domain name if it is available

Note: Domain registars vary. An important thing to make sure you get or have enabled is WHOIS privacy protection.

Forwarding Your Domain Name to Another URL

To forward or redirect your domain name to another url (e.g. forward yoursite.com to yourusername.carrd.co), the steps will vary but in general you will do the following:

1. Navigate to your account with your domain registrar
2. Look for your domain management or domain list page and navigate to your domain's information
3. Look for URL Forwarding or Redirect Domain
4. If prompted, add your domain name to the source field (e.g. yoursite.com)
5. Add the URL of wherever you want your domain to forward to in the destination field (e.g. yourusername.carrd.co )
6. Make sure

If you use Namecheap, they have a guide on how to set up a URL redirect for a domain. If you use Porkbun, they also have a guide on URL forwarding.

At this point, you can be done. You have your address.

Setting Up a Custom Domain

You'll likely set up a custom domain once you have your web host figured out. For example, netlify and tumblr allow you to use a custom domain name for free, whereas neocities, carrd, and many others require a paid plan to use a custom domain. Setting up a custom domain is both domain registrar and webhost specific, so it will really depend on what registrar and host you use.

That said, domain registars provide guides in their documentation -- Porkbun even provides individual guides for setting up custom domains with various webhosts

Web Hosting

Now that we've talked about domains, let's talk about web hosting.

Your webhost is your landlord. They maintain a server that serves up files to clients (i.e. peoples' browsers, apps). They give you a portion of that server space to host your website files. You may get a small portion of that server space for free (e.g. carrd, tumblr, wix, weebly, neocities, netlify) but you may be limited to storage amounts, file sizes, file types, or simply a subdomain rather than a custom domain (e.g. yourusername.carrd.co or yourusername.tumblr.com). Or you may pay for your server space for a monthly fee (e.g. pro versions of free hosts, BlueHost, DreamHost, NearlyFreeSpeech). Your web host might be very user friendly and handles a lot of the tech stuff behind the scenes or may be better suited to someone with experience. Which host you choose will depend on your needs and use case.

For the complete newbie (or person who, like me, would like to spend time not screaming at a computer) I do recommend either of the following (as of Summer 2025):

1. Neocities if you're OK with having your domain name forwarded (unless you wanna pay for pro)
2. Netlify if you want to set up a custom domain

Both hosts have a free version and both do drag-and-drop file upload of your website so it is super easy to use in that regard. Can you put files in Dropbox or Google Drive? Congrats, you can publish your site. This guide will walk you through it under the publishing section.

Build Your Web Page

Now let's make your webpage. This will be a super simple landing page that will let you write a little bit about you and provide links to where people can find you (e.g. social media links, blog posts, storefronts, etc.) If you're an artist and want something a little bit more robust, you can check out my gallery template (which is also on itch).

Some of this information can also be found in my gallery template guide, but what we build here will be a much simpler website.

What you need before getting started

A computer and internet connection. Technically, you should have on your computer some built-in text editor of sorts (Notepad for Windows, Text for ChromeOS, TextEdit for MacOS) which you can use (NOT Word, LibreOffice Writer, Pages, Google Docs, etc.) If for some reason you do not have a text editor, options include Visual Studio Code or Sublime Text or Notepad++.

Set Up Your Files

On your computer, create a new folder and name it WEBSITE. Inside of this folder is where all the files for your website will live. When you're ready to launch your site, we will upload all the files and subfolders within this folder to your host.

Now inside of your WEBSITE folder, create a new file and name it index.html. Make sure .html is the file extension. If you're on Windows, I would recommend you open your text editor of choice (Notepad included) and create your file there, as Windows by default turns off file extension visibility. For Notepad Users: If you're in Notepad, simply go to File > Save As and then in the Save As window, select All files under "Save as Type" dropdown. Then in your filename, write index.html, then click Save.

By now, your directory structure (that is, what is inside your WEBSITE folder) should look like this:

    WEBSITE/
        index.html

Copy everything in the below section from <!DOCTYPE html> all the way to </html> and paste it in your index.html file. Save the file.

Don't want to make the file yourself? Right click here and select "save as" to download the index.html for the template and be sure to save it in your WEBSITE folder.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Your Name"> <!-- EDIT ME! change "Your Name" to your name/username/author name for SEO purposes-->
    <meta name="description" content="Describe your website here for SEO purposes!"> <!-- EDIT ME! only write within the quotations where it says "Describe...purposes!"-->
    <!-- EDIT ME! Change "My Site" below to whatever you're site is!-->
    <title>My Site</title> 
    <!-- EDIT ME! PUT THE LINK TO THE ICON THAT WILL SHOW UP IN YOUR BROWSER TAB BELOW -->
    <link rel="icon" type="image/x-icon" href="images/favicon.png">

    <!-- STYLESHEET BEGIN -->
    <style>
        
        * {
            margin: 0;
            padding: 0;
            border: 0;
            box-sizing: border-box;
        }

        html, body {
           height: 100%;
        }

        body {
            background-color:#363636; /* EDIT ME! CHanges bg color of entire page */
            color: lightgrey; /* EDIT ME! Changes text color of entire page */
            font-family: Arial, Helvetica, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
           
        }

        nav {
            background-color: #272727; /* EDIT ME! */
            text-align: center;
            width: 100%;
            position: sticky;
            top: 0;
        }

        nav ul li {
            list-style: none;
            display: inline-block;
            padding: 0.75rem 0.5rem;
            margin: 0;
        }

        nav a {
            color: #f5f5f5; /* EDIT ME! - colors the links in your navbar*/
            margin: 0;
            font-size: 1.25em;
        }

        nav a:hover {
            color:lightcoral; /* EDIT ME! - will change the hover on all links within the nav*/
            text-decoration: none; /* removes the underline on links on hover */
        }

        main{
            max-width: 75vw;
            margin: 0 auto;
        }


        h1, h2, h3, h4, h5, h6 {
            margin-top: 2rem;
            margin-bottom: 1rem;
            text-align: center; /*remove this line if you do not want all headings to be centered! */
            color: lightcoral /* EDIT ME - colors the headings */
        }

        p {
            line-height: 3ch;
        }

        @media screen and (min-width: 700px) {
            main {
                max-width: 50vw;
            }
        }
    </style>

    <!-- STYLESHEET END -->

</head>
<body>
    
        <main>
            <h1>Your Name Here</h1>
            <p>Write something about you here. Anything about you goes between the opening <p> and closing </p>. Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque expedita vitae itaque quos modi hic odit. Quis, velit consequatur. Quaerat illum voluptatibus quod quasi minima ducimus iste assumenda. Esse, pariatur.</p>
            <h2>Links</h2>
            <!-- Here you will list all links you want to include. Links have a format of <a href="URL">The text that will be clickable</a>. Replace the # in the "" below with the URL you want and replace 'Link 1' (or Link 2, etc) with the text you want to display (e.g. Blog, Bluesky, Tumblr, Shop, etc.)-->
            <nav>
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li>|</li>
                    <li><a href="#">Link 2</a></li>
                    <li>|</li>
                    <li><a href="#">Link 3</a></li>
                    <li>|</li>
                    <li><a href="#">Link 4</a></li>
                    <li>|</li>
                    <li><a href="#">Link 5</a></li>
                    <li>|</li>
                    <li><a href="#">Link 6</a></li>
                </ul>
            </nav>
        </main>
    
</body>
</html>
        

Editing Your Site Content

In the index.html file, you will see a number of comments. If you press CTRL+F on Windows/Linux or CMD+F on MacOS, you should be prompted with the FIND or FIND/REPLACE function of your text editor/the in-browser editor. In the FIND prompt box, type in EDIT ME! which will bring you to all instances of editable content. Inside the <style> tags, the editable content is basically for the colors. Websites can use HEX codes or HTML color names.

Otherwise, the editable content is one of the below:

• the content between two html tags
  • the sentences between the opening <p> tag and closing </p> tag
  • the text between the opening <title> tag and closing </title> tag
  • the text between the opening <h1> tag and closing </h1> tag (or h2 or h3 etc.)
  • the text between the opening <a href="#"> tag and closing </a> tag
• the value of some attribute (held within quotation marks)
  • the value of a content attribute on a <meta> tag
  • the value of a href attribute on a <a> tag

Don't worry if it seems like a lot -- just know your edits will either be inside quotations or between opening and closing HTML tags.

Publish Your Site

Now that you got your file made and content typed in it, it's time to go live! What you do exactly will depend on your host but as said earlier, many hosts have an easy drag-and-drop method of uploading files. That said, different hosts have different methods of upload. Netlify, for example, wants you to take your entire site folder -- that is, the folder you made at the beginning called WEBSITE -- and upload it. Neocities wants you to upload whatever is INSIDE your WEBSITE folder -- that is, your index.html file.

Let's go through the process of publishing your site to neocities.

Publish To Neocities

1. Go to neocities.org and sign up (choose the free option)
2. Confirm your account by entering the code they give you
3. Go to your neocities dashboard (when you login)
4. In your dashboard you'll see a section that says Home with a number of files. Go ahead and delete those files by hovering over each and clicking Delete.
5. Click the Upload button
6. Locate your index.html file in your WEBSITE folder on your computer and select index.html

You should now be able to click on your neocities site where it says yourusername.neocities.org and see your site live! If ever you want to edit your site, you can click on your uploaded index.html file and edit it in the browser.