Website
Overview
Generally for a website you need 3 things.
A domain.
Actually building the site.
And a hosting service.
For my Domain I use Porkbun. You can buy a .com domain for about 10$ a year
on there.
I also heard a lot of people use Namecheap but I haven't tried it.
For actually building the site you can either use a website builder like wordpress or code it yourself with HTML, CSS and Java.
I have no experience with website builders, I can only tell you they tend to have slightly more expensive hosting plans.
Generally website builders are probably easier to get started with but a bit more expensive while coding it yourself will have more
of a learning curve but you have full control over everything and it's cheaper.
There are also static site generators to help with making a site with hmtl and css but I haven't tried any. It may be worth checking out though
if you don't like doing everything manually.
For hosting I use Neocities which is 5$ a month.
Another alternative I've heard of that's slightly cheaper is nekoweb. Both of these only support
static sites and not website builders like wordpress.
They do both offer free hosting but if you want to connect your custom domain to your site (which you have to if you want to have a newsletter
for example) then you'll need to pay.
Porkbun also has hosting services but I have not tried any of those.
-
@thewebsitearchitect
Good videos on web design -
Structuring the web with HTML
These tutorials from Mozilla are what I used back then to learn HTML and CSS and I think they're quite good. -
How to Build a Personal Website
Nice Blog going over the different methods you can use to make a website. Also mentions Web builders -
Learn HTML Free in [2025] – Basic HTML Codes for Beginners
Nice short introduction to the most important things about html
Layout and Decoration
Templates
- eggramen.neocities.org/code/css_testpages
- kalechips.net/projects/layouts/
- auroraveil.org/category/layouts/
- nomnomnami.com/templates/
-
portfolio.arunyi.art/#carrd
Templates for Carrd -
github.com/syxanash/awesome-web-desktops
examples and source code for desktop aesthetic websites - Notebook template
- Notebook template
- Repth themes
- tessisamess themes
- Vizune templates
- a-random-website templates
Backgrounds
-
goblin-heart.net/sadgrl/webmastery/downloads/tiledbgs
Tile Backgrounds -
projects.verou.me/css3patterns/
Css Patterns -
10015.io/tools/css-background-pattern-generator
Css Patterns -
10015.io/tools/css-clip-path-generator
custom css mask cutouts -
animated-gradient-background-generator.netlify.app/
css animated gradient -
stripesgenerator.com/
Generate Stripe Background
Animations
-
animate.style
-
joerezendes.com/projects/Woah.css/
over the top css animations -
fabled.day/codes/transitions
Page transitions -
skykristal.art/Links/
many tools and resources for css animations java and vector graphics -
ianlunn.github.io/Hover
Hover Effects
Decoration
- gify pet
-
patorjk.com/software/taag/
ascii text generator -
glowtxt.com
Fancy Text -
pookatoo.com
Fancy Text -
3dgifmaker.com
3D Gif Editor -
earthboundtext.com
Earthbound Text Generator -
makesweet.com/my/heart-locket
Hearlocket Gif -
photofunia.com/effects/retro-wave
Retro Wave Graphic -
maxbittker.github.io/broider/
Making fancy borders
Colors
-
paletton.com/
Color Palettes -
frills.dev/experiments/html-named-colors/
HTML colors
Other
-
goblin-heart.net/sadgrl/webmastery/downloads/fonts
Fonts -
modern-fluid-typography.vercel.app/
Dynamic font size graph
Code Snippets
-
pklucky.neocities.org/coding/
music player -
mf2fm.com/rv/
Javascript Effects -
bechnokid.neocities.org/resources/tut_freezeframe
making gifs stop with a button - freezeframe -
kalechips.net/projects/snippets/burger
hamburger nav menu on mobile -
tinytools.directory/
great tools for a bunch of things -
biati-digital.github.io/glightbox/
image gallery -
atomiks.github.io/tippyjs/
Tooltips - solaria guides
- search function for website by groundedwren
- submenus by groundedwren
- Tablist by groundedwren
-
Guestbook by groundedwren
Bit more complicated to set up but has reply functions and you can use it as a comment box on multiple pages of your site. -
Atabook
simple guestbook
Accessibility
- Web Accessibility by Mozilla
- a11y stands for accessibility
- Validate your HTML
- How Letterspacing Can Make All Caps Easier to Read
- HTML semantics cheat sheet
- Please Let Me Use Reader Mode
- Making your site look good on mobile
- Setting up a screen reader testing environment on your computer
-
Wave - web accessibility evaluation tool
Put in your site to see how accessible it is