Build a Website with $0, Zero Experience, and Zero Time

Introduction

Creating and building a simple website can be unnecessarily complex — like, doing your taxes complex.

If you're someone with limited experience and funds and you need to build something fast, what are your options?

Your best bet for a simple static site might seem like Wix or Squarespace, and while these are perfectly fine choices, they come with recurring fees and performance limitations.

AI tools can now build full sites for you, which is incredible, but if you’re after a quality site, you’ll likely end up paying a decent monthly fee.

If you want to go cheaper and have more control, you'll need to dive into some code.

The good news? It’s not as scary as it sounds. This post intends to simplify the process so you can build a website even if you’re short on time, money, and tech skills.

What We’ll Cover

1. Where to find quality, free HTML templates
2. Curating the proper tools
3. Editing and updating website content
4. Hosting
5. Custom domains

By the end, you’ll know how to get a simple website online for your business or project — fast and free with no compromise in quality.

Where to Find Quality, Free HTML Templates

If you have no experience working with code, don’t worry — this guide is for you.

What is HTML?

HTML, or, Hypertext Markup Language, is the most basic building block of a website. We write HTML to define the structure of our website.

Your website’s foundation will start with a free HTML template and thankfully, there is no shortage of amazing options to choose from.

Here are some reliable sources to find beautiful, functional templates:

• HTML5 UP: Simplest option — clean, modern designs with responsive layouts.
• Theme Wagon: A variety of free templates for different use cases. These tend to be more modern and feature-rich by default.
• CodeStitch: Perfect if you need HTML for a single component or section on your website — Tons of free resources and code snippets.

Browse the options, find one that fits your vision, and download the template’s zip file to your computer.

If you would like to follow along, I will be using the "Landed" theme from HTML5 UP.

Curating the Proper Tools

Before diving into edits, you’ll need a couple of free tools:

• VS Code (Visual Studio Code): A free, beginner-friendly code editor. You will use this to update your website's content and structure. Eventually, you can edit your code to do anything you want! Download it here.
• Netlify: There are a few platforms to host static sites for free but my go-to hosting platform is Netlify. Optionally, we can also purchase and provision a custom domain here. Sign up at Netlify.com.

Once you’ve downloaded your HTML template, open the folder in VS Code. This is where we will make updates to your site.

Editing and Updating Website Content

Here’s where the magic happens. To set up a proper workflow, open your project folder and double-click index.html. This will load the website theme in your default browser.

You can refresh this window to see any changes you make in your HTML.

Optionally, you can download a free VS Code extension called Live Server to see your changes update live without refreshing your browser window.

Even if you’ve never worked with code, you can follow these basic steps to update your site’s content:

1. Open the Template in VS Code

Once opened, you’ll see files like index.html, elements.html, and an assets and images folder.

2. Edit Text

HTML defines the structure of your content. For example, an <h1> and <h2> would describe headings, a <nav> element would be used for your site's navigation, and so on.

Open the index.html file, and look for the <title> HTML tag. This will update the title of the website and will be displayed on your browser tab. I will update mine to "Wave Land Web."

3. Find <h1> Tag

Next, you will want to search for an <h1> tag. In this instance, the <h1> is the main site title displayed in the top left corner of the page (if you are using the "Landed" theme).

The text content doesn't always have to match your <title> tag, but in this case, it makes sense to.

4. Replace Images

Search for the first <img> tag. In that tag, there is an attribute named src. This attribute points to the location of your image.

Swap out any placeholder images with your own by uploading them to the images folder and updating the file names in the HTML.

You can read more about the <img> tag here.

Challenge

Experiment with updating all placeholder text and images on the homepage. Text will be displayed within HTML tags such as <p> and <h2>. Take your time and test often to ensure your website updates are displayed as intended.

You can find common HTML tags here.

Not bad for simply updating some text and images!

Pro Tip(s)

• You can search an entire file with Command + F on Mac or Ctrl + F on Windows.
• If you're stuck, you can use AI tools like ChatGPT or Claude to help you write concise, engaging website copy.
• You can also copy and paste your code into the AI chat if you need help finding things or making sense of the code.
• Get creative!

Hosting with Netlify

Ready to make your site live? Hosting with Netlify is as easy as dragging and dropping your website's folder.

1. Sign in to Netlify: Access your team dashboard where you can upload your site folder and set up your website.
2. Drag and Drop: Navigate to Sites > "Add new site" > "Deploy manually." Here, you can drag and drop your website folder to deploy your site.
3. Boom, Your Site is Live: Netlify provides a free subdomain (e.g., your-site.netlify.app) that you can share immediately! ✨

We can change our subdomain to anything we want in the Netlify site configuration.

Custom Domains

Want your site to have a custom domain like yourbusiness.com? Netlify makes this process seamless. You can either:

1. Purchase a Domain on Netlify: Head to the Domains section on Netlify and search for an available domain. It’s a one-stop shop where you can buy and connect your domain.
2. Connect an Existing Domain: If you already own a domain purchased elsewhere (e.g., GoDaddy or Namecheap), follow Netlify’s DNS setup guide to connect it to your site.

Having a custom domain is optional but adds a polished, professional touch to your website.

Share Your Work

Congratulations! You’ve just built and launched a website for the cost of a domain name (or free if you opt out of a custom domain).

When you have an idea for a creative project or business, it's easy to get bogged down with the minutiae. Following these steps will help you go from idea to website faster and cheaper, with the option to add features and scale in the future.

Now you have a live URL that you can show off to the world and you’ve empowered yourself with the skills and tools to take your next big step online.

What's Next?

If you are excited about your new website and want to venture beyond updating images and copy, please check out the following educational resources to learn more about HTML, as well as styling your website and adding custom functionality:

• HTML Crash Course For Absolute Beginners
• W3 Schools
• FreeCodeCamp
• Codecademy

Feel free to reach out anytime with thoughts, ideas, or questions. We are here to help no matter where you are on your creative or entrepreneurial journey.

If you are ready for the big leap and are looking for professional help, check out our services and pricing page to learn more about how Wave Land can help you launch your next project!