100 (more) things you can do with your personal website
Published on under the IndieWeb category.
My site is the result of a series of incremental changes. When I have free time, I often ask myself: what can I do with my website? Sometimes, I have an idea, get excited, and spend hours lost in making something that brings me joy, or something that I can share with other people. Other times, I have the motivation and energy, but no idea.
I recently curated a list of 100 ideas of things you can do with your personal website. Well, almost 100. I left some spaces blank and encouraged other people to contribute ideas. Indeed, my ideas were a reflection of my experience on the web and my interests. This list is a place I can go when I’m bored and have the question “what could I do with my site today?”
Since writing that post, I have been taking mental notes of more cool ideas I have seen on the web. This weekend, I decided to sit down and turn all of the ideas I have had over the last few weeks into a new blog post: 100 (more) things you can do with your personal website. This time, there are 100 things. Maybe. You’ll have to read the list to find out.
If you find yourself wondering what you can do with your personal website hosted on the information superhighway, perhaps the list below will be helpful!
Without further ado, let’s get started!
- Add a profile image to your site that changes at different times of the day.
- Post your Wordle scores on your personal website.
- Change the highlight colour of your cursor.
- Add a skip link for accessibility.
- Join a fanlisting.
- Start a fanlisting for something you love. Make a button for members.
- Use an
abbr
HTML tag to show an abbreviation on your website. - Make a list of projects you have worked on: art, poetry, blog posts, websites — anything you have made!
- Create a glossary of words you like to use, or words you use a lot on your website. You can link to the glossary whenever you use those words in your blog posts, if you want.
- Make a page that, when clicked, takes you to a random page on your website.
- Subscribe to the RSS feeds of blogs you like using a tool like NetNewsWire.
- Write a blog post about an event you enjoyed.
- Make a list of coffee shops you like in a city and what you liked about them.
- Document landmarks you visited in a city.
- Make a colour palete for your personal website, and use CSS variables to track them.
- Make a web quiz for others to fill out.
- Make a gallery of your favourite photos.
- Dither an image on your website.
- Add a banner or header image to the top of pages on your website.
- Make a list of all the banners or header images you have used on your website.
- Write a blog post just for you that you will not publish (you don’t need to share everything you make!).
- For academic work: Add a citation to your website.
- For people in academia: Make a list of all of your publications.
- For people in film: Publish b-roll you have recorded that you are proud of.
- Use an image size attribute for a big image to show a smaller image and, on click, show the larger image.
- Write a blog post about:
- Your favourite television show.
- Listing songs from an album you love in order of which ones you enjoy the most.
- A lesson a teacher taught you when you were young that has made an impact on you.
- Your sticker collection.
- A challenge you encountered when learning something new, and how you overcame it.
- Add an icon for your website (favicon).
- Add a link that lets someone skip to the top of an article.
- Create a visualization that shows how many posts you have written over time. A bar graph? (For developers).
- Make a 404 page.
- Add an icon that appears after external links.
- Make a list of CDs or vinyl records you enjoy.
- Add an “intended audience” to a blog post.
- Look at your site and see if there is anything you don’t want anymore. Scripts, sections, etc. in the words of Thoreau: simplify, simplify, simplify.
- Make a list of your favourite quotes.
- Review a movie.
- Write and publish a resume.
- Choose a new font for your website.
- Add a fleuron.
- Create an accessibility statement.
- Make a now page.
- If you are writing CSS, check if you are using relative font sizes.
- Test your website on a mobile phone.
- Share your plant care tips.
- Make your images lazy load.
- Add an emoji to a page on your website.
- Draw an illustration and put it on your website.
- Make a list of websites that inspired parts of your current website.
- Make a website template with HTML and CSS that others can use.
- Check the contrast of colours on your website with the WebAIM color checker (aim for AA).
- Add backlinks that list pages that link to a specific page.
- Interview a blogger whose content you like.
- Start an interview series about a topic you enjoy.
- Invite a few friends to create a website with you.
- Use the PerformanceObserver API to report the size of all assets loadded on a page (for developers).
- Make a list of jokes you like.
- Add a link in your navigation bar so people can easily find your RS feed.
- Create a message that changes every time someone rotates the page.
- Make a list of the coffee cups you own and share the stories about how you got them.
- Make an image map (a clickable image) for:
- The plants in your house, with links to advice on how you care for them.
- Objects on your desk, with links to content that describes what each object means to you.
- A collection you have (thimbles, teddy bears — anything!).
- Your bookshelf, so people can click to read your book reviews or learn more about each book. (you can use my tool for this!)
- Add a list of related articles to the bottom of your blog posts.
- Write a blog post about something you learned recently.
- Make a privacy statement that explains what analytics you use.
- Write and share a poem.
- Make a web page where you only use HTML and no more than ten CSS rules.
- Start a digital garden or a personal wiki. See Maggie Appleton’s article on digital gardens as a starting point.
- Download your Instagram photos and put them on your website (for a developer).
- Add a Story section to your website.
- Create a timeline that documents milestones as you learn a new skill.
- Write a blog post about a design pattern you like online (i.e. a way of presenting content, a common pattern in blog posts, etc.).
- Click around the web for an hour and see what inspires you. Start with this website! Or Maggie Appleton’s. Or Tracy Durnell’s.
- Share a recording of some music you have played.
- Create a linktree page on your personal website.
- Write a Manual of Me where you describe how people can most effectively work together.
- Add a hover effect to links.
- Click around pages on your website to see if anything doesn’t look like you expected (font sizes off, broken links, etc.).
- Embed a map of places you have been. You can use leaflet.js to make maps (for developers).
- Create a list of ideas you want to work on.
- Add CSS animations to part of your website. You can make parts of a page fade in or change on hover.
- Create different themes through which someone can toggle (i.e. a retro theme where everything looks like it is from the 90s, a garden theme where there is more green on your website.).
- Add the time it will take to read an article.
- Add an under contruction GIF or image to part of your website.
- Write a blog post about:
- Your favourite time of day and why.
- Your morning routine.
- Your favourite season and why.
- How you write blog posts (if you like writing!).
- If you are using analytics, consider using a privacy-first option like Cabin.
- Curate a list of things in real life. Interesting pieces of street art in a city? Murals? Provide a way for others to contribute.
- Use italics somewhere on your personal website.
That’s… 99 ideas (including the ones nested in bullet points that I don’t want to go back and change). I think that’s close enough to 100.
Just kidding. There’s one more:
- Write a blog post where you share what you find joyful about personal websites.
The web is a place to be creative. To share your ideas and perspectives. You can do so how you want: with images, poetry, blog posts, collages, music, and more. Optionally, you can code, too! (But you definitely don’t need to code to have a personal website.)
I am curious: what ideas do you have that people could do with their personal websites? Make a list! If you follow one of the ideas above, I would love to see what you created. Send me an email at readers [at] jamesg [dot] blog.
Happy web weaving!
Thank you to everyone at IndieWebCamp Brighton 2024 for the inspiration that helped me finish this list.