You Can Make A Website

Jun. 1st, 2025 08:36 am
osteophage: photo of a leaping coyote (Default)
[personal profile] osteophage

If you have any doubts, then you're the target audience of this guide. Many people hesitate or even write off the possibility of making a website due to common misconceptions, poorly-written instructions, or simply feeling unsure where to start. So to help you over those hurdles, this guide is designed to address some of those misconceptions, walk you through resolving certain mental blocks, and present you with some tutorials to help get you on your way.

The first misconception to address is the idea that you don't already have what it takes to begin. Many people hesitate because they think in order to make a website, you need to spend money (you don't) or that you need to engage in advanced computer wizardry that a normal person could never possibly understand (this isn't true either). There are only a few things you truly need:

  • the ability to connect to the internet
  • an email address you can use to sign up for services
  • the ability to read and handle looking at large amounts of text

If you can check off all of those boxes, then you have all the prerequisites you need to follow this guide.

Crossposted to Neocities and Pillowfort.

 

This guide is broken into three main sections:

  1. "But I don't know what to even put on a website if I had one" is a common thing to get stuck on, which is why this guide begins with a section on What to Put On It. If you're undecided about making a website, start there.
  2. In order to make your website actually be on the internet, you'll need to Put It Online. This is a step that will necessarily require visiting another website and using your email to create an account.
  3. In order to create the pages that make up your website, you'll need to Create The Thing Itself. This section focuses on helping you tackle self-doubt and will point you to some helpful tools and tutorials.

Feel free to approach these three stages in any order. For any other extra questions, considerations, or concerns, see the FAQ at the end.

A few quick notes:

  • This guide was written by a non-professional for non-professionals, with an effort to avoid any kind of presumptuous "you know what that means" about beeping the snarfus.
  • This guide is intended for personal sites and other small-scale sites, not multi-user social media or wikis. For that kind of thing, look to Run Your Own Social or Miraheze Wikis.
  • To those who already have websites: if you're interested in conversations about how to make the indie web easier, more approachable, or more inviting, please share this guide or leave a comment with feedback. I'm interested in any technical corrections or constructive suggestions for how to make this guide more useful to its target audience.

    •  

What To Put On It

Even if you don't think of yourself as any kind of creator, even if you don't write or draw or compose or design, there's one thing that does probably apply to anyone reading this guide: you're someone who browses the web, and as such you probably have opinions about where to browse and how. For instance, you may have some favorite websites, browser tools, or downloadable resources tucked away in your bookmarks.

So if you don't know where to start? Make a list of links.

And if you can't think of anything off the top of your head?

  1. Go to my Useful Links list or browse the Bukmark Club to find another links page.
  2. Look for things you recognize or that look interesting to you.
  3. Pick at least three, if you can.
  4. Keep working on your list over the next two weeks as you browse the web.

If you amass a list of links, then even without having to create anything "new," you will have stuff to put on a website.

Hand-crafted link collections like these are inherently valuable, especially in an age where search engines are getting worse. We can't count on Google to fix what it has broken, which is why so many people have started talking about the value of manually-curated web directories like URL Town. The more links we share, the more we help everyone to discover new things, or for that matter, re-discover old things that they didn't know how to find anymore.

So even of you feel like you've got nothing else to share? Share links.

For more ideas:

How to Put It Online

In order to make your stuff go from being a file on your computer to being online, you will need what's called a web host. A web host is a service that Makes Things Be Online, and many of them will let you use their service for free. This section links to some starting points for picking a web host, but first, think about what it is you're looking for.

Some questions to ask yourself:

  • Are you willing to pay money, or are you looking for a host with a free tier?
  • Do you need an approachable user interface?
  • What are you looking for in a NSFW policy?
  • What file types are you looking to upload?
    • Some file types you might be familiar with are image file types like .png and .gif and audio file types like .mp3 and .midi.
  • How big are your files, and how much space do you need?
    • If you're an illustrator, photographer, or other visual artist, check the sizes of your image files—and if they're very large, consider compressing them.

Some web hosts with free tiers:

For more options and information:

How To Create The Thing Itself

Creating the actual pages themselves can be the most daunting for many people, which is why this guide has saved it for the end. Instead of walking you through a technical explanation, this section will focus on the mental hurdles you may face in learning how to create a page. For what it's worth, no, you do not have to "learn how to code," so if you'd like the lowest possible learning curve, stay tuned. First, though, let's go over some common sources of hesitation:

  • You're not the kind of person who talks to the computer
  • You don't know what to expect from learning how
  • You don't know where to go for help

    •  

Talking to The Computer

You can talk to the computer directly or indirectly by drawing on the skills you already have. This is worth pointing out because many people wind up with a mental block about it, thinking of it as something completely separate and foreign to the things they already know how to do. For those people, I have good news.

Instead of talking to the computer directly, you can use an intermediary called a web builder, which lets you use a drag-and-drop what-you-see-is-what-you-get interface kind of like Canva. Web builders have their pros and cons, and whether they're the right choice for you will depend on what you're looking for. You'll find a few suggestions for web builders to try at the end of this subsection. Overall, you might get the most out of web builders if you have a good eye for design and can work with visuals more easily than text.

Alternatively, if you prefer working with words, you can talk to the computer more directly in a computer language, i.e. code. "Code" might evoke the image of ones and zeroes and digital rain, but you know what a lot of "code" is?

It's words. It's literally words, and words are something you can handle. Check this out:

header {width: 100%}

This is a piece of code that points at the header and tells it to be as wide as the entire area available to it (a width of one hundred percent). If you can follow that example, then you have the necessary skills to learn CSS. CSS is a language for talking to computers, and it's the companion of another language called HTML. Together, HTML and CSS are some of the most elementary and durable ways to make a website. You don't even need to start from scratch, either—you can find free templates to use in the FAQ.

 

Tutorials for learning HTML & CSS:

Web builders you can use without learning to code:

  • Simple Webpage Builder by Stefan Bohacek – general drag-and-drop web builder
  • Indie Aisle – drag-and-drop web builder for creative professionals
  • Hotglue – drag-and-drop web builder and host with a crafty aesthetic
  • Mmm.page – drag-and-drop web builder and host with an animated maximalist aesthetic
  • Omg.lol by Adam Newbold – paid markdown-based web builder

    •  

What To Expect

Setting the right expectations is important if you're just starting out. You may not have any frame of reference for what the webweaving experience is like, and without putting things in perspective, you might experience any friction as a sign to just quit, instead of going into it with the mentality that some bumps in the road are all part of the journey. So try to think of it this way:

With any skill in life, you build up from small steps. If you're an illustrator, you may know that it's important to work up to larger and more complex pieces by first studying some basic shapes, doing some practice, and laying down a sketch before inking the lines and adding the shading and color. If you're an avid author, you may be familiar with the process of taking notes, doing research, constructing an outline, creating multiple drafts, and adjusting the structure of your sentences in order to get the desired effect. If you're a knitter, you probably learned how to knit and purl in a straight line before learning how to do increases and decreases, knit in the round, or make lace.

The same thing applies to making a webpage. It involves starting from really basic, elementary steps, one at a time, in order to build a foundation for you to work up to what you've envisioned. You will have moments of going, "Okay wait, why is it doing that?" and "Well that isn't what I wanted at all." Along the way, your work-in-progress may spiritually resemble an unfinished pencil sketch, a messy rough draft, or a scarf-to-be that's nothing more than one line of loops on a knitting needle. That's okay. Things look unfinished when they're unfinished. Your website is under construction.

 

Asking For Help

Once you embark on your webweaving journey, you'll want some options ready on hand for where to ask questions. Asking questions about making a website may be daunting because you may run into people who have a lot of Experience and who might talk in a way that is unfamiliar to you. This can understandably lend itself to some insecurity about asking questions, even though asking questions is a completely normal part of the learning process—which is why it's so important to have access to the right venues where people are expected to be helpful and supportive.

So on that note, look for places with welcome mats and open doors, not just raw expertise. Among web enthusiasts (including professionals), there are a lot of people who actively want more people to create their own websites. This is the ethos of This Page Is Under Construction, We Can Have a Different Web, The Website Manifesto, The Indieweb Is For Everyone, and For The Love of God, Make Your Own Website. In places where this ethos is strong, many people are happy to help if asked. For instance, check out the 32-Bit Cafe forum, the IndieWeb Camp chatroom, or the Neocities community on Pillowfort.

Hope to see you there, and happy webweaving!

 

But wait! How do I…

...make it look good?

Looking good is subjective, but there are lots of free templates out there for people just starting out. Here are some for you to browse:

If you'd like to set up your own multi-column layout, you can use Sarah Edo's CSS Grid Generator.

If you need help with picking out color palettes, there are lots of tools out there like Paletton, Coolors, and Color Designer's Palette From Image. Don't forget to check the contrast.

 

...make it look good on a phone?

Making a website look good on more than one screen size is called responsive design.

For responsive design, you'll want 1) a viewport meta tag and 2) some kind of dedicated instructions for smaller screens, which can be accomplished in multiple ways.

A viewport meta tag is just this:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Put this on the HTML head of every page.

Then add some specific instructions for smaller screens. If your page doesn't have too many different things going on, the easiest way to do this is probably a media query with relative units. So for instance, if you set the main element to normally be 800px wide, you can tell the main element to shrink down on smaller screens by using this piece of CSS:

@media only screen and (width < 800px) {main {width: 90vw;}}

This code says that if the screen is less than 800px wide, the main element should use only 90% of the view width (vw) instead of shooting off the edge of the screen. You can replace "main" here with any element or class name you like.

If you want a multi-column layout, you might want to use flexbox. Flexbox is a way of coding a container in CSS so that the items inside the container will adapt based on the amount of space available to them. You can learn and practice flexbox by playing Flexbox Froggy.

Whatever you create, you can test out the results with tools like Responsive Design Checker or Firefox Responsive Design Mode.

 

...make it accessible?

There are several kinds of access needs to bear in mind with websites. For example,

  • people who are blind may be reading your site via screen reader
  • people with low manual dexterity may be navigating your site via keyboard
  • people with visual impairments may want to use browser settings to englarge the font size or view the page zoomed in
  • people with visual sensitivities may need certain degrees of contrast or reduced motion

A lot of stuff about HTML and CSS is accessible by default unless you go out of your way to mess with it or create problems. For instance, removing focus outlines, adding unavoidable flashing images, or implementing navigation menus that are reliant on hovering a mouse pointer—those kinds of things can make your site less accessible.

There are some things it helps to do proactively, too. For instance, it's generally recommended to use semantic HTML, descriptive link text, and relative font sizes in em or rem units (ex. 1em is browser default) rather than a specific size (like 16px).

For more information, check out these guides:

 

...make a gallery?

Technically all you need to make an image gallery for art or photography is to put images on a page, but there are a few things you can do to spruce up the results. For instance, if you want the look of a modern gallery site, you're probably going to want a lightbox.

Here are some tutorials on creating lightboxes and galleries:

 

...add dark mode?

You can add dark mode by using a media query, switch buttons, or light-dark CSS. All three approaches call for getting comfortable with CSS variables.

 

...reuse the same CSS on more than one page?

Once you've got multiple pages on your site, you can make it easier to manage your CSS by creating and uploading a separate CSS stylesheet, which is like a HTML file except that the file type is .css instead of .html. Then connect your pages to the stylesheet by using a link element in the HTML head.

<link rel="stylesheet" type="text/css" href="FileNameHere.css">

This will automatically apply all your CSS to that page, without you having to copy and paste any of it over.

 

...choose my own web address?

If you want to choose your entire web address, you'll have to pay for a domain name. Paying for a domain name is something you can do through a registrar like Porkbun, Namecheap, or Nearly Free Speech.

If you do this, make sure to choose a registrar that protects your privacy against WhoIs lookups so that your personal information won't be available to just anyone.

 

...make it so that people can subscribe to updates?

If you want visitors to be able to subscribe to updates, you'll need what's called an RSS feed.

RSS feeds can be finnicky to set up, so you might prefer to just create an account on a service that automates one for you. You can get automatic RSS feeds for accounts on Dreamwidth, Bearblog, Wordpress sites, and Mastodon sites.

Alternatively, you can create your own RSS feed with an RSS generator like RuSShdown.

Once you have your RSS feed, you can add the link to that feed wherever. Putting a visible link on your homepage is a good way to alert visitors that you have one. You can also help people detect your RSS feed with automatic tools by adding a link in your HTML head:

<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="https://example.com/feed.xml">

<link rel="alternate" type="application/atom+xml" title="Atom Feed" href="https://example.com/feed.atom">

When you offer an RSS feed, other people can follow your updates using anything that can parse it, including Dreamwidth, Fediverse sites, and dedicated feed readers like Feedly or Fraidycat.

 

...make the link previews look good on social media?

Link previews generally draw from the page's metadata (that's data-about-the-data). You can add metadata to your page with a few lines in the HTML head. For instance, try some Open Graph meta tags like these:

<meta property="og:image" content="Put an image address here">

<meta property="og:description" content="Put a sentence or two here">

Then you can check the results by using a tool like Open Graph Preview or Lens.

 

...make one of those 88x31 buttons?

Making and sharing 88x31 buttons is a classic web tradition that can encourage people to link and visit your website. You can create a button in just about any free image editing program (like Photopea, Inkscape, etc.), but if you want something simple and easy, you can use Hekate's Button Maker.

 

...get an answer to a different question?

If you like, you can contact me or leave a comment below. I recommend checking out beginner-friendly web enthusiast communities like the 32-Bit Cafe. You can also browse Useful Links: Coding & Webweaving or the 32-Bit Cafe Resource List.


Note: guest comments are screened! This means that if you submit a comment without an account, it will not be published until I manually approve it.

Tags:
  • Add Memory
  • Share This Entry
(will be screened)
(will be screened if not validated)
If you don't have an account you can create one now.
HTML doesn't work in the subject.
More info about formatting
 
Notice: This account is set to log the IP addresses of people who comment anonymously.
Links will be displayed as unclickable URLs to help prevent spam.

Profile

osteophage: photo of a leaping coyote (Default)
Coyote

June 2025

S M T W T F S
1234567
891011121314
15161718192021
22232425262728
2930     

Links

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Jun. 5th, 2025 06:06 pm
Powered by Dreamwidth Studios