Thatcatbasil

Site-Building Resources

This is a list of resources, many of which I used while building this site! Hopefully these can be of use for you, too :)

(This list will continue to be updated as I find new things to add)

Coding

Accessibility

Graphics

Buttons:

Backgrounds:

Misc:

Fonts

  • Google Fonts (Provides CSS for you to embed fonts without having to download the files)
  • Dafont (Note: Not all fonts here are free or cleared for personal use. Your best bet is to filter by "100% Free". Also pleaseee think about legibility when picking your fonts, the super decorative/tacky ones may work for things like headers, but not the entire website!)
  • OpenDyslexic (Font designed to counter some common symptoms of dyslexia)

If you're not embedding from Google Fonts, you'll have to manually upload the files to your website. Detailed instructions here.

Some quick notes regarding fonts and type if you're not super familiar with how they work:
  • Serif fonts are the fonts that have little decorative strokes on the ends of characters, which are called "serifs". Sans serif fonts do not have serifs.
  • "Display" fonts are intended to be displayed in larger sizes (such as headings and titles). They can be harder to read as body text since their shapes tend to have higher contrast.
  • "Leading" is the spacing between lines of text. You can adjust leading with the "line-height" CSS property.
  • "Tracking" is the spacing of all the letters on a line of text. You can adjust tracking with the "letter-spacing" CSS property.
  • "Kerning" is the spacing between individual letters. You can adjust kerning with the "font-kerning" CSS property.
  • Generally, you'll want to give your text a little bit of breathing room, but be careful to not add too much room to the point that your paragraphs start looking like individual lines instead of a uniform block of text. Don't make your text squished in to the point that the lines and letters start melting together, either. W3schools suggests setting the line-height property to 1.6, which is what I've done here.

The font I am using on this site is Karma, which is a serif specifically designed to be read on screens.

Miscellaneous

  • SCM Music Player (JS music player that can use links from Youtube and Soundcloud)
  • GIFyPet (customizable interactive pet)
  • Cursors-4U (free cursors, just copy and paste the code into your CSS)

Happy sitebuilding! Feel free to poke around through my code if you're curious as to how I've done something specific. If you're on Firefox, you can right click on something and select "Inspect" (or press Q) to see the code and properties of a specific item, or you can select "View Page Source" to see the entire source code.