Tips for Making Your Own Website

Introductory Tips

Learn As You Go

While it's all well and good taking classes to learn something new, researching an activity is not the same as actually doing it. You could spend weeks reading tutorials like this one and not even have a "hello world!" to show for it. My greatest advice to you:

Just start making your website!

After you finish reading here, go do one small thing to move your project along. If you are already taking an HTML/CSS course, push yourself to apply something from every lesson to your actual site.

When In Doubt, Search For "CSS"

Personally, I have never taken any courses on web design. My process is like: I have a very specific vision → I do my best to create it → Fuck, I don't know how → I look for help online.

My early searches were literally things like...

... and on and on and on. Truthfully, the learning never stops. For years I kept a pinned tab of CSS selectors. Even now I'm constantly looking up random things about grids, tables, filters, animations... Looking things up means you are learning. Unless you're taking a test, don't try to do anything from memory. Let the memorisation come from consistent practice.

Trusted Resources

When you're searching stuff up, look for results from the following websites:

  • MDN Web Docs by Mozilla
  • W3Schools
  • CSS-Tricks
  • Web.dev
  • Stack Overflow (part of the Stack Exchange network)
    •

    Of course, these are not the only websites worth looking at. As your research gets more advanced, sometimes you'll find what you're looking for on a random blog from 2002. The great thing about CSS is that you can change it very quickly and easily, oftentimes instantly undoing mistakes. Therefore, there's no risk when trying new things. Simply remove or rewrite code that doesn't work. Cheer when the computer does what you want it to do. That's all there is to it!

    Dissect Your Favourite Sites

    Ever see an amazing website and think, "wow, how did they do that?!"

    explain viewing source code on other websites, devtools, the mouse cursor hover thing.

    Use Semantic HTML

    Now, what's all this semantic nonsense about?? This article by Web.Dev explains it better than I can. Their entire "Learn HTML" course is pretty helpful, too!

    Basically, instead of having 4,000 <div>s, you'll make some of them into <header>, <main>, <nav>, and <footer>. There are many, many more semantic elements, but those five are the most important. Every page should have them! Something something reader mode...

    Pro Tip: <aside> does NOT mean "sidebar!"

    If you want sidebars, use <section> or, if they're for navigation, <nav>.

    Start With Templates

    When choosing which template, start by asking yourself what you need. Do you need something for your entire website, or just one page? Do you want a blog? An image gallery?

    Do you need it to look good on desktop, mobile, or both? When the same page instantly adapts to different screen sizes and orientations (i.e. landscape or portrait), that's called responsive design.

    Remember, not all templates are created equal. Code is only as skillfully written as its creator's present capability. Don't be surprised when an amateur's code is messy, broken, or incomplete.

    My Recommended Templates

    One day I plan to make some of my own! But until then, I highly recommend Nenrikido's work. I can vouch for her as both an excellent webdesigner and phenomenal person. Lazerbunny's resource page has all kinds of amazing links on it, too. Not just templates but like, literally everything!!!

    Pro Tip: add semantic HTML to templates that don't already have it!

    Work Offline/Local

    Did your personal website journey begin with a service like Carrd, Strawpage, Tumblr, or Neopets? All of them will have you creating pages directly in your web browser. When you graduate to Neocities, Nekoweb, FC2, or even Wordpress, you'll find they work in similar ways. However, this is not ideal for a few reasons:

    Choose Your Text Editor

    Recommendation for code editors: VSCode, SublimeText, anything with quality-of-life features like auto-completion and suggestions. I do NOT recommend Notepad++ for beginners... or anyone, for that matter. I personally swear by VSCodium, which is just VSCode without the skeevy data collection.

    Choose Your File Transfer Program

    I use WinSCP and Filezilla. Some hosts like Neocities, Nekoweb, FC2, and WordPress offer drag-n-drop uploads.

    Use Relative File Paths

    THIS IS A PERSONAL PET PEEVE OF MINE. LMFAO. Remember how fucking stupid you all looked using D*scord to host your images??? YEAH.

    Organise Your Files

    1. YOURSITE, AKA "root"
      1. assets (for your homepage / entire site)
        • backgrounds
        • stickers
      2. blog
        1. assets (just for your blog)
          • backgrounds
          • stickers
          • whatever
        2. index.html (appears as YOURSITE/blog/)
        3. january
          1. index.html (appears as YOURSITE/blog/january/)
      3. gallery
        1. assets (just for your gallery)
          • photos
          • thumbnails
        2. index.html (appears as YOURSITE/gallery/)
        3. vacation.html (appears as YOURSITE/gallery/vacation.html)
      4. index.html (appears as YOURSITE.com)

    I think this whole thing would be better rendered as an image... Use TreeSizes maybe

    Compress Your Images

    For the love of God, please, if you take nothing else away from this article... COMPRESS YOUR IMAGES! When all you want to do is immerse yourself in someone's handcrafted Internet aesthetic, doesn't it jostle you out of ~the zone~ if the page loads too slow? Many different factors contribute to load times, but the simplest one to solve is oversized images. Trust me, "anime_girl.png" does not need to be 3.44MB.

    You don't even have to make your images physically smaller— as in resizing the height and width. We live in an age where you can still have a giant, highres image with an appreciably smaller file size. It's all thanks to the magic of image optimisation! That said, I do advocate for making images only as big as they need to be. If your anime girl only occupies about 300sqpx (square pixels), her original image does not need to be three thousand sqpx.

    I use a free software called Caesium Image Compressor. It's so simple, it requires no elaboration. It's fast, robust, and can do things in bulk. I personally have it set up to automatically replace the original image, just for ease of use. If you want to have an uncompressed backup, make sure your settings DO NOT look like mine. Either designate a folder just for the compressed versions, or have it add a suffix like "_xs".

    To compress .gifs, I use EZGif. TBH, I use EZGif for all my .gif related activities. It's such a stand up little site, I've never felt pressured to find an offline alternative.

    When To Leave Images Un-Compressed?

    Image optimisation works by reducing the overall number of colours in the picture. Very small images like pixels, or images with very few colours/faint variation between colours, should be left as they originally are. Use my art as an example, and the bg i used on MARCHsite...

    Create Interactive Designs

    The best thing about a website is that you can point and click on it. Seriously! Make an interactive example?? links that do nothing, links that change colour on hover, links that slide... YEAH.

    It's not very hurrdurr indie web of me, but seriously, one of my favourite instances of an interactive webpage is Apple's page for Airpods 2. blah blah. I was just trying to replace my stupid, worthless, wireless earbuds that I both love and hate, so I was pleasantly surprised to see so much care put into this design. The background moves based on your scroll position.

    General Design Tips

    Here are some quick ways to add more visual interest to any page.

    Wait maybe I should move this to its own article??? Yeah... And have photo examples hehe.

    Troubleshooting Tips

    outline: 5px solid red; to see where everything is ... html and css are read from top to bottom, so what you write lower in the document overwrites what you wrote before. ... !important; hack lol ... inspect element helps a lot

    Protect Your Privacy

    Anonymise Yourself

    How many people know your first name, date of birth, and the state or province you live in? Well, that's the number of people who can find you with a single Goo*le search. It's up to you how fast and loose you play with you real identity, but I advise everyone to reserve 3D dealings for friends you genuinely trust. And just because someone else tells you a lot of their personal details does NOT mean you owe them the same information in return.

    I suggest removing your data from people search websites. Even then, be cautious with what you disclose and to whom. For years I've been butting up against stories I want to tell or pictures I want to post on here, but Godly intuition curls in my gut and reminds me, "Flonne, anybody with a personality disorder could use this to find out what high school you went to." And then I don't post it!

    Remove EXIF Data from Photos

    EXIF data is some fancy code that tells you when and where a photo was taken, what kind of camera was used, and more. If you don't want Internet people knowing where you live, then while you're compressing your pics, you should wipe the EXIF, too. At the bottom of Caesium's "compression" tab, there's a checkbox that says "keep metadata." Leave that unchecked.

    Many social media websites— and I think Neocities, too— automatically remove the EXIF for you. But if you're hosting on your own, or otherwise unsure what privacy protections the platform offers, better safe than sorry. Plus, you're compressing your pictures anyway, aren't you?! It's easy!

    Be A Good Netizen

    Your experience on the independent web is what YOU make of it. If you set out to learn new things, express yourself creatively, and connect with like-minded individuals, that is what you'll do! Everyone makes mistakes, and every mistake listed here can be forgiven, so it's understandable if you mess up sometimes. Just do your best to respect yourself and others, and everything will work out.

    Bad Etiqutte

    Good Etiquette

    Most Importantly...

    ☆ Have fun!!! ☆

    I'm being so for real right now. What's the most fun and interesting thing about making or maintaining a website? What motivated you to start? What keeps you coming back? Whatever your answer is, focus on that. That's what turns problems into puzzles.

    I make websites because I adore CSS. I'm not so good at drawing or drag-n-drop type graphic design. Being so easy to write and reproduce, CSS lets me create adorable, interactive visuals that would otherwise stay trapped behind a skill barrier. For me, the entire process— the flash of inspiration, laying everything out in HTML/PHP/CSS, finally populating the page with all my illustrious words... It's just so satisfying!

    I love the culture on the indie web, too. Here, we expect slow-paced, long-form content, and the connections I've made through Vivarism outpace my long-forgotten social media mutuals by miles. This is the only online space I want to exist in. Cultivating a cute little corner of the web, just for me, my friends, and whoever else might stop by... This is my greatest joy.

    What About You?

    Yeah, YOU! Why do you make websites, or want to start making one? Tell me everything— get your inspiration flowing!

    HTML Comment Box is loading comments...