32bit.cafe/content/guides/websiteideas.html

---
title: Ideas for Your Personal Website
author: Star
aliases:
  - /websiteideas
---
<h2>Ideas for Your Personal Website</h2>
<blockquote>Lovingly written and submitted by <a href="https://fencraft.leprd.space/" target="_blank">Star</a>. Thank you, Star!</blockquote>

<section>
<p>You've just made a website, but now you're unsure where to go from here. Here are some ideas for things to add and techniques to learn. If you need more inspiration, browse other folks' websites (start on <a href="https://neocities.org" target="_blank">Neocities</a>!) and surf the 'net! You'll surely find something that you want to add to your own personal website.</p>
</section>

<section>
<ul>
<li><a href="#pages">Page Ideas</a></li>
<li><a href="#topics">Potential Website Topics</a></li>
<li><a href="#css">CSS & Page Design</a></li>
<li><a href="#art">Art & Graphic Design</a></li>
<li><a href="#tech">Technical Tasks</a></li>
<li><a href="#accessibility">Accessibility</a></li>
<li><a href="#interactivity">Interactivity</a></li>
<li><a href="#social">Social</a>
</ul>
</section>

<h3 id="pages">Page Ideas</h3>
<section>
<ul>
    <li>Make an /about page</li>

    <li>Make a <a href="https://sive.rs/nowff" target="_blank">/now</a> page
        <ul>
            <li>Sort of like a six-monthly social media update status - sharing your current projects and where you are in your life, like if an old friend asked, "So, what have you been up to?"</li>
        </ul>

    <li>Make a <a href="https://uses.tech" target="_blank">/uses</a> page 
        <ul>
            <li>You can use this for your favourite programs, hardware, art equipment, guitars, stationary, tools... anything you use!</li>
        </ul>

    <li>Make a fonts page, crediting and displaying all the fonts on your site</li>

    <li>Create a site map
            <ul>
                <li>A simple list, often bullet-pointed as a tree, of all the pages on your website</li>
            </ul>
    
        </li>

    <li>Make a credits page with all the tools, tutorials, and resources you used to make your site</li>

    <li>Make a static blog
        <ul>
            <li>You don't need any <a href="https://discuss.32bit.cafe/wiki/resources#free-blogging-platforms-static-site-generators" target="_blank">blogging software</a> if that's a bit overwhelming right now. Just create a new webpage or section whenever you want to add a post, and then manually update an index or any other links.</li>
        </ul>
    </li>

    <li>Make a personalised 'dashboard/homepage'
        <ul>
            <li>Like the vintage Yahoo homepage, this might include a news feed, the weather, the moon phase, links to check every day, a 'thought for the day,' and so on</li>
        </ul>
    </li>

    <li>Make a <a href="https://marcus.io/blog/making-rss-more-visible-again-with-slash-feeds" target="_blank">/feeds</a> page
        <ul>
            <li>If you have multiple RSS feeds, people can find them all in one place! For example, one for your blog, one for any social media, etc.</li>
        </ul>
    
    <li>Create a page to display old versions of your website design (if it's been around a while)
    </li>

    <li>Create a secret page (that people have to search for or solve a puzzle to find)</li>

    <li>Add a changelog
        <ul>
            <li>This is a list of updates to your website over time. <a href="https://keepachangelog.com/en/1.0.0/" target="_blank">Why Keep a Changelog?</a></li>
        </ul>
    </li>

    <li>Make a <a href="https://webgardens.neocities.org" target="_blank">Webgarden</a></li>

    <li>Make a shrine
        <ul>
            <li>This is a page dedicated to a favourite thing - often things like music artists, characters, movies, games, genres, and special interests.</li>
        </ul>

    <li>Create a page about your favorite memories (especially nostalgic ones) </li>

    <li>Create a dream journal</li>

    <li>Create a media log (books, tv, games, board games, movies)</li>

    <li>Make an art or craft gallery</li>

    <li>Create a 'place' evoking a physical space
	<ul><li>This could be, for example, a house, a room, or a place in a town.</li>
        </ul>
    </li>

    <li>Make a collections/library page 
        <ul>
            <li>You could include things you collect or own a lot of in one category including images like stamps, gifs, blinkies, and also real-life objects.</li>
        </ul></li>
   
    <li>Create a page dedicated to your personal history on the net
	<ul><li>You could talk about what websites you used to hang out on, what your processes were like in the past, and how your internet usage changed over time.</ul></li>

    <li>Make a 'to-do list' page, tracking your progress on habits, projects, and chores</li>

    <li>Make a page sharing layouts, bits of layouts with others, or your favorite code snippets</li>
    
    <li>Make a custom 404 page on your site</li>

    <li>Make a page emulating a specific old-school website style</li>

    <li>Create a resources page with links to your favorite <a href="https://discuss.32bit.cafe/w/resources" target="_blank">personal web resources</a></li>

    <li>Make a graphics page where you share site assets you've made with others</li>
    
    <li>Collect a page of internet bumper stickers, stamps, 88x31 buttons, and other website owners' banners</li>

</ul>
</section>


<h3 id="topics">Potential Website Topics</h3>

<p>Write about any of the following on your website or use these ideas to spark more about aspects of you to cover:</p>

<section>    
<ul>   
    <li>A manifesto about why you're on the small web</li>

    <li>Your favourite recipes</li>

    <li>Any original characters, constructed languages (conlangs), or worldbuilding you've done</li>

    <li>A wishlist for your collections so you can keep track of what you'd like to have in the future</li>

    <li>Your pets, including photos and videos</li>

    <li>Tutorials for things you know how to do</li>

    <li>Resources you have made (e.g. custom RPG content, knitting patterns) </li>

    <li>Favourite quotes, poems, or lyrics</li>

    <li>Log stats from a game of your choice</li>

    <li>Your outfits, closet, and wardrobe items</li>

    <li>Look at your current social media presence. Is there anything you want to cross-post from there to your own site?
	<ul><li>This could be things like Tumblr posts you are especially proud of or favourite Instagram photos.</li>
</ul>
</section>

<h3 id="css">CSS & Page Design</h3>

<section>
    <ul>
        <li>Add the correct <a href="https://usability.yale.edu/web-accessibility/articles/headings" target="_blank">heading information and tags</a> to all your pages</li>
        
        <li>Add meta tags to your website/pages:
            <ul><li>Start with <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#adding_an_author_and_description" target="_blank">author and description</a>, then look at <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#other_types_of_metadata" target="_blank">OpenGraph data</a></li></ul>
    
        <li>Make a temporary site redesign for an upcoming event (like <a href="https://tilde.32bit.cafe/~slug/events/halloween-2023/" target="_blank">Halloween</a>!)</li>
        
        <li>Try to replicate the style of one of your favourite bits of media (e.g. computer game screens, typography, architecture)</li>
        
        <li>Add a custom scrollbar</li>
    
        <li>Incorporate a clickable image map</li>

	<li>Learn how to <a href="https://albertwalicki.com/blog/creating-shapes-in-css" target="_blank">make shapes in pure CSS</a></li>
        
        <li>Visit <a href="https://codepen.io" target="_blank">Codepen</a> and play with code, find something to use or get inspired</li>
    
        <li>Recreate a physical interface or object from real life (e.g. map, restaurant menu, computer screen, phone, book)</li>
    
        <li>Make a new <a href="../themes/">theme</a> for the 32-Bit Cafe website</li>
    </ul>
</section>


<h3 id="art" name="art">Art & Graphic Design</h3>

<section>
<ul>
    <li>Make a pattern to use as a background</li>

    <li>Make a favicon</li>
    
    <li>Add a custom cursor</li>
    
    <li>Make a 88x31 button so people can to link to you on button walls</li>
    
    <li>Create downloadable pixel art other people can adopt from your site</li>
    
    <li>Learn to make an animated gif</li>

    <li>Make a pixel-art based layout</li>

    <li>Use the <a href="https://web.archive.org/" target="_blank">Wayback Machine</a> to surf old pixel sites for inspiration</li>

    <li>Make a 'doll base' or other piece of art that people can use to create their own art</li>

    <li>Run a doll fashion contest where people submit designs each round</li>

    <li>Make a set of pixel desktop icons</li>

    <li>Make a full set of cursors to use on your desktop (or download someone else's)</li>

    <li>Make or collect some wallpapers for your desktop</li>

    <li>Make a set of user icons 
        <ul>
            <li>Traditionally, user icons are 150x150px, as seen on LiveJournal or <a href="https://dreamwidth.org" target="_blank">Dreamwidth</a></li>
        </ul>
    </li>
</ul>

<h3 id="tech">Technical Tasks</h3>
<ul>
    <li>Set up an RSS feed</li>

    <li>Make a blog with a <a href="https://discuss.32bit.cafe/wiki/resources#free-blogging-platforms-static-site-generators" target="_blank">self-hosted platform or static-site generator</a></li>

    <li>Replace Google Fonts with <a href="https://discuss.32bit.cafe/wiki/resources#typefaces-fonts" target="_blank">self-hosted fonts or a CDN replacement</a></li>

    <li>Archive your site on the <a href="https://web.archive.org/" target="_blank">Wayback Machine</a> at the Internet Archive</li>

    <li>Set up a routine for backing up your website locally</li>
    
    <li>Make sure your folders and files are nice and tidy on both your local storage and your website itself</li>

    <li>Move your site off Neocities or other hosts and learn to self-host it</li>

    <li>Transition to more robust text editors like <a href="https://notepad-plus-plus.org/" target="_blank">Notepad++</a>, <a href="https://code.visualstudio.com/" target="_blank">Visual Studio Code</a>, or <a href="https://brackets.io/" target="_blank">Brackets</a></li>

    <li>Learn how to use Git version control
        <ul>
            <li>You can use this for tracking changes over time and to be able to easily rollback any mistakes.</li>
        </ul>
    </li>

    <li>Learn to use FTP
        <ul>
            <li>FTP is used for uploading pages to your website more easily.</li>
        </ul>
    </li>
    
    <li>Self-host apps for your friends</li>

    <li>Think about the place you use your computer and make your space more ergonomic
	<ul><li>Get a chair and other tools that support your posture, a tray to use your laptop without it overheating, and think about the physical space, if it needs tidying, decorating, or organising.</li></ul>

    <li>Tidy your cables and clean your PC fans</li>
</ul>

<h3 id="accessibility">Accessibility</h3>

<ul>
    <li>Make your site easier to browse for slower connections
	<ul><li>Resize and compress all your images to actual resolution it displays at to decrease file size and load times
	<li>Add <a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading" target="_blank">lazy loading</a> by including <code>loading="lazy"</code> on pages with tons of images
	<li>Use image sprites</li></ul>
    
    <li>Check your site's <a href="https://www.websitecarbon.com" target="_blank">carbon emissions data</a> and learn about <a href="https://solar.lowtechmagazine.com" target="_blank">low-tech website-making</a>
        <ul>
            <li>You can make your own simple, static website-carbon display for your site instead of using their code to ensure you don't incur more emissions by using it!</li>
        </ul>
    </li>
    <li>Make your site's layout responsive for mobile visitors</li>
    <li>Check how much your site costs to load</li>
    <li>Make a page on your site mobile accessible</li>
    <li>Check if your site is <a href="https://discuss.32bit.cafe/wiki/resources#accessibility" target="_blank">accessible for screen readers</a></li>
    <li>Download a free screen reader and see what your website is like</li>
    <li>Make a light mode and dark mode for your site</li>
    <li>Create a 'foyer' or 'splash' page ahead of your main index with any necessary information for visitors <ul><li>If you use flashing imagery, have NSFW content, aren't optimised for mobile, or need visitors to have some other kind of warning, this is absolutely recommended.</li></ul>
    <li>Add JavaScript so visitors can toggle to freeze gif and animations like <a href="https://github.com/ctrl-freaks/freezeframe.js" target="_blank">freezeframe.js</a></li>    
</ul>


<h3 id="interactivity">Interactivity</h3>

<ul>
    <li>Make a dollmaker or a <a href="https://picrew.me/en" target="_blank">Picrew</a>-style game</li>

    <li>Make a layout or page that changes the design based on the day of the week, month of the year, or time of day</li>

    <li>Make a personality quiz with a result that website owners can post on their sites</li>

    <li>Make a choose-your-own-adventure story
	<ul><li>You can use something like <a href="https://twinery.org/" target="_blank">Twine</a> to help organize your story and post it on your site.</li></ul>

    <li>Put a chatbox, comment system, or guestbook on your site</li>

    <li>Make a <a href="https://thoughts.melonking.net/guides/creating-a-3d-world-in-x3d" target="_blank">3D digital location</a> for people to visit</li>
    
    <li>Add a cursor trail</li>

    <li>Create something on your site that, when you click on it, it makes a sound</li>

    <li>Display a random quote, picture, facts about you, or interesting tidbits that change at the push of a button</li>

    <li>Incorporate a widget or page where visitors can see local (to them) information (e.g. weather, sunset time)</li>

    <li>Make a theme-switcher</li>

    <li>Make a background-switcher</li>
</ul>

<h3 id="social">Social</h3>

    <ul>
    
    <li>Write a blog post responding to someone else's blog post</li>
    
    <li>Set up an <a href="https://rss.32bit.cafe/i/" target="_blank">RSS feed reader</a> to read other websites</li>

    <li>Make a link or bookmark page connecting to other favourite websites</li>

    <li>Make a website award and gift it to another site</li>

    <li>Join some <a href="https://brisray.com/web/webring-list.htm" target="_blank">webrings</a>
        <ul>
            <li>A webring is a group of sites with similar themes that link to one another.</li>
        </ul>
    </li>

    <li>Join a <a href="https://discuss.32bit.cafe/wiki/resources#pixel-cliques-clubs" target="_blank">pixel clique</a>
        <ul>
            <li>A pixel clique is a group of sites that collect pixel art on a theme from other members.</li>
        </ul>
    </li>

    <li>Learn more about how to <a href="https://32bit.cafe/interactingontheweb/">interact with other websites as a website owner</a></li>

    <li>Join a 32-Bit Cafe Code Jam, make a <a href="https://sundaysites.cafe/howto" target="_blank">Sunday Site</a>, or go to an <a href="https://events.indieweb.org" target="_blank">Indieweb Personal Website-Maker event</a>
    </li>

    <li>Join some <a href="https://thefanlistings.org/" target="_blank">fanlistings</a>
        <ul>
            <li>A fanlisting is a group of sites that are fans of the same thing.</li>
        </ul>
    </li>

    <li>Set up <a href="https://discuss.32bit.cafe/wiki/resources#creating-managing-and-finding-webrings" target="_blank">your own webring</a>, fanlisting, web club, or pixel clique</li>

    <li>Explore small-web social media such as <a href="https://dreamwidth.org/" target="_blank">Dreamwidth</a>, <a href="https://spacehey.com/" target="_blank">SpaceHey</a>, or <a href="https://www.wired.com/story/how-to-get-started-use-mastodon/" target="_blank">Mastodon</a></li>
</ul>

</section>