I, the author of this post, hereby release the aforementioned post and its attached image into the public domain. These works may be freely used, shared, modified, or distributed for any purpose, without any conditions, unless such conditions are required by law.
Greetings all,
A Bunch of Computer Nerds (ABOCN) is excited to announce a new project, BlogPop. Powered by Next.js and with a design you are going to love, we are ready to enter the 2025 version of ABOCN, one with bigger projects you’ll most certainly love. We aim to become more ambitious with the projects we create, ensuring they are high quality, yet stable and well maintained.
BlogPop features a snappy user interface, modern AF design, and a bright future for plugins, theming, and much, much more. We hope you will join us by becoming an early adopter of BlogPop, which you can do so for free. We suggest utilizing Oracle Cloud or a personal VPS/Vercel. Configurations for an easy setup, powered by Docker, will be provided upon our first official release and release of the GitHub repo.
We have decided to choose a BSD-3.0 license for this project.
This project stemmed from my original frustration with WordPress, software I have used for half of my life, has become very corporate. Automattic and WPEngine rub me the wrong way. However, why not build something everyone can use and maintain, much like WordPress, but smaller and with a tight-knit community building something amazing. I hope this project may reach these goals, however the future will tell.
I thank this community for the huge amount of support from my project. This inspires me daily. I would also like to thank the other members of ABOCN for their support in making this project a reality. It’s truly great to have a team of developers.
This image has been released into the public domain by its author.
It all starts with a website, they say. Who? Nobody, I just came up with that now. Today, I thought it would be a fun idea to share my take on the whole, “you need a website” thing. However, please take my ideas with a grain of salt as you know best. You know the project you are working on, you know your setup and you know the context of the times in terms of web design. Additionally, please don’t expect a professional and traditional SEO-frenzy blog post… I am very casual!
No-code solutions
First, are you doing no-code? If so, this post is not for you. Why? Using a drag-and-drop editor with limited control is not a good setup for a permanent/production website. Some things discussed in this post, including general tasks (such as creating a navigation bar in the shape of a star, for a fun example) cannot be done in this sort of editor.
This is a great place to plug learning HTML. It’s not too hard to get started with creating a website with code (HTML, CSS, and JS, all programming languages) and you can learn a new skill! After all, not everything should be dumbed down for people!
Overall, you won’t get much out of a pre-built solution. In fact, as I write this, I am using one now. As I suggest you do, expect that the style won’t be the most modern (especially when using templates) or in the way you would like. You will face many limitations in your experience, especially after the fact of dropping hundreds on a yearly subscription to the company that starts with a “W” (I don’t like advertising).
Creating your website
Let’s get started by picking what languages you should use. I have included some good suggestions below to help you out, but feel free to explore the massive amount of options when it comes to web dev.
Inexperienced Developers
If you’re an inexperienced programmer, I suggest you start with Bootstrap (with the CDN tag [what’s this?]), HTML, CSS, and JavaScript. This will give you good foundational skills with programming, syntax (formatting of code), logical thinking and prepare you for more advanced implementations, where you will still use these skills.
Experienced Developers
Look at you… a pro! You should first decide which language you would like to write your website in. I have suggestions for each. Do some research on the languages if you don’t know them, or use prior knowledge/favorites to make your decision. I have used all of the suggestions, which is why there will be no coverage (for now) on some languages.
All suggestions contain links from trusted sources only. Only the official website, Wikipedia link, npm/pip package link and guide/documentation will be provided if avaliable. This is in an effort to cut out crappy SEO guides and fishy links.
This one is not a NodeJS solution, as it uses HTML instead. However, it will still work by using HTML.
You may have heard about a few of these solutions and that’s alright! Most of these work together great, so consider mixing some of them together for your project!
Python
Most of these are not specific to Python and are instead included in your website’s HTML/template files. They will work just fine like this 🙂
Once you’ve created a stack (a collection of tools in your “toolbox” combined together to make your website), it’s time to get into my design suggestions.
At this point, you should create a boilerplate layout, prepared for thinking through the design process, which is the focus of this post.
Designing your website the “right” way
First, there is no “right” way to design your website. Well, I’m wrong. The right way to design your website is your way. While I may have a solid list of design suggestions, I cannot be perfect (I’m not a designer) and I also have a unique design style, just like you! Everyone does design different and that’s a good thing. Now, let’s get you the product you’re intending to ship!
Designing
First, I will share some general design guidelines I hold myself to. That makes it sound crazy… It’s not that hard, unless you are trying to make money (which you will probably be putting ads on).
DO
Optionally share your code on a platform like GitHub, or a self hosted solution!
Git is a great way to manage your project
If you don’t mind sharing the code, it can be a great way to keep organized
You can always set your repository to “Private” which will hide the project from the public.
Use a readable, optionally modern font so users can easily read the page’s content
Don’t use heavy animations which might look choppy on low-to-mid-range phones (more prevalent on phones, although laptops may suffer from this as well)
Create a responsive and mobile-friendly user interface
You care about you’re visitors. Give them the best experience possible, no matter what device or screen size they have.
You can use Chrome or Firefox developer tools to test different screen sizes
Implement an easy-to-use navigation bar
People love patterns and keeping consistent (and unique in other areas which don’t confuse the user) navigation styles to the “standard” helps a lot.
Add icons so users can navigate faster
A top navigation bar or a sidebar (bonus points if it’s on the left) is gold.
Add a favicon and title in the <head> tag
This one is a huge improvement over going without one.
Even if it’s just your domain, it looks better than “https://example.com” with a default icon.
Designing the home page
First, we must talk about your home page first. This is the first thing a visitor will see, so it’s important to design your page in a user-friendly way. Let’s take a look at what I personally would do and not do:
DO
Focus on the important content at the top of the page
What do your visitors care about?
What is the user’s goal on your website and what is the fastest way to direct them so they can achieve it?
If you are building an app (even if it’s a web app), focus on demonstrating the features of the app without the user being signed in
When an action which should be account restricted (this is where you come in!) comes up for the user, they should have a popup to login or sign up
If you have the ability to, implement popular social sign-ins
Ensure complete usability for users of a social sign in.
Allow users the ability to add an email and password to their account later
Don’t add complex components or features to the home page, unless your user expects it
Think about it, when you go to someone’s blog, you’re not expecting to play a game where you have to play a minigame to unlock each post
While this could be really cool, your user is going to get disengaged if the content isn’t as they expect.
Instead of putting the components/features on the home page, move them to other pages and create buttons/links to them on your home page
Take the time to make an accessible website
Adding simple “alt” values to images takes seconds
DON’T
Add page ads and popup advertisements
There are much better ways to advertise to people. While this is controversial, it increases page load times and is bloat-ridden.
An ad-free experience will be valued by your users/customers, anyway.
How I implemented this design on my home page
A screenshot of my website’s home
Take a look at my home page, not to toot my own horn, is perfect example of the do and don’t list above. It’s only perfect because I set the rules, which means you should go about creating a website which is perfect in terms of your standards. Everyone can be a designer, especially with websites!
You will notice how on my website, it’s evident the goal of the user is to find out more about me. How do I help them get there? I prioritized the first three things people would need to know (who I am, where you can find/contact me and the music I’m listening to). Music may be important to the user, as I talk about and suggest people music a lot, creating value to the widget.
But wait… didn’t you say we shouldn’t use components on a home page? Even though the user might value music, shouldn’t that be served on another page for an optimal UX (user experience)?
Yes, I did say this! However, I chose to broke this rule for a few reasons.
The widget appears to be static to the user, as it’s generated server-side and streamed to the user.
This does not appear to cause usability issues, in my testing.
While there may be some, it’s a useful feature and something users will care about.
The user is going to expect content. While this may be content served through a component, this determines value to me, which is why it made the cut.
It’s eye candy, which can be ignored by the user without effort (i.e. closing a popup), if desired.
Designing text-focused pages
If you are creating a text-focused page, I am guessing you will be creating something along the lines of a blog post or about page.
First, this does not mean the page must only contain text. A good website always has a trusty navigation bar for the user, among other things. We are simply going to focus on the main content of the page (which excludes site-wide components).
These pages should focus on having a distraction-free experience. Pretty much take a popular news site (bonus points if they have ads) and do the opposite. As we aren’t focusing on money, we will focus on not implementing too many widgets and components. If it’s a blog, a simple sidebar will do. The “power” will come in what the widgets can do, even in a small space. A search is extremely powerful and can fit into a sidebar.
If you’re including social media profile widgets, consider if the user cares. No, most users do not care what your Instagram is (if you’re a business). You can captivate them on Instagram Reels instead, which will get you that follow. However, personal users have it the complete opposite and should put these widgets if they find this valuable.
In terms of a social media post widget, once again, we must ask ourselves if the user cares about the post. If it’s a blog post outlining an outrageous situation on X, you may want to include the widget for context. If there’s not much of a reason, this not be the best option for the user. In addition, consider the privacy implications of implementing these, as they load code which can track users, even though it’s your website.
In general, most text pages should include:
Title/Header
Subtitle (optional)
Appropriately sized headers to divide content
Lightweight site-wide components for text pages (e.g. comment section, copyright notice)
Designing content/component-focused pages
If you are attempting to build an app, or a page which is component or content heavy, this is your section!
Designing an app is complex, which means you should ideally be splitting templates into folders, and keeping organized. Not only should your page be designed nicely, your code should be, too!
Here is a list of my top suggestions for building your web app:
Pay attention to how your app is setup when designing the user flow (how your user navigates the app)
Should you make make the app on the home page and prompt for a sign in later?
Does the app need to be explained (create a landing page which takes you to the app), or will users know what they’re visiting (the app can be the home page)?
Find areas where users might be confused
Implement methods for users to find important features fast
Ensure your app is optimized
This is one of the most important things, in my opinion, when building an app
The goal should be to get near-instant responses to button presses
Waiting is fine, but the user shouldn’t be sitting asking why the screen hasn’t changed after they pressed a button
Loading spinners are great!
Test your page speed often and get real devices to test on
Would you use your own app?
Consider the problems you have for your app. Fix every micro-irritation you have, as it may impact other users
You can always take feedback and suggestions to fix people’s issues later!
If your app is focused on displaying videos or photos, they should take up the whole screen, with widgets around the screen, if required, to help control their experience.
In a setup like this, components are going to be used everywhere
Because of this, think about cutting down on clutter, while not reducing features
My Closing Thoughts
To sum it all up, your website is your website. But, hopefully there are a couple things we can agree on, which you can use to implement into your own website. Hopefully this is a resource you can use now or later to create something amazing.
Each new project is a new way to express and use your knowledge, so if you doubt something, do it! Hopefully I have taught you something new in this half-tutorial-half-advice post.
I won’t take up any more of your time now, so please, go out and put what I’ve said to the test and prove me right or wrong! Find what works for YOU!
