How we made this website (using only HTML and CSS)
under construction
This website is static, written exclusively in HTML and CSS by us. Our old website was built with WordPress.org but we wanted to make the code open source and were also running into bottlenecks design-wise (such a pain to constantly be adding plugins!). So we learned some basic HTML and CSS to be able to write the code from scratch. Here you can read about some technical information on how this site was built.
Learning HTML and CSS
All our fundamental knowledge on how to work HTML and CSS were learnt with freeCodeCamp. We didn't know anything about web design when we started and it has taught us so much! We love that it is free, open source and not for profit.
We also have fun playing CSSBattle. Use that border-radius and position:fixed along with other CSS skills to make puzzle images.
Domain and hosting
- Hosting: GitLab Pages
- Domain name registar: NameSilo
- .org top level domain
We chose GitLab because it is an open source alternative to GitHub. It offers free hosting for small static websites and makes the code accessible at the same time. Codeberg is another good alternative but we didn't opt for it because it does not support custom domains yet.
We don't have strong feelings about NameSilo, they just had decent reviews when we were researching.
We chose the .org name extension for our website. It is managed by the non-profit Public Interest Registry. It is an open domain, which means it can be used by anyone. Many open-source projects, non-profits and other communities choose to use it.
Static site generator? (SSG)
We don't use a static site generator because we found it easier to actually code everything from scratch. SSG would have been another thing we have to set up and learn to use. If you are wondering how we manage main elements such as menu navigation and footer, see section on software Atom on our other page.
Final checks before website goes live
speed test, website performance test with Lighthouse (using Chromium's built in function)
if you are transfering from another domain, check that you have redirects setup
Check your website with this accessibility test to ensure it is user-friendly for people with screen readers. It also checks for font size, colour contrast and many different accessibility aspects. A must for all websites!
Hardware and software
Read more about the technologies we use that are vital for the making of this website.