Web Design Resources

Web Design Resources

Thesarus (word finder)

  • wordhippo - finds older and specialty words!

Code hightlights

Docs

Logos

Slides

Images and Icons

I’m often looking for a way to make websites more interesting here are a few resources I use:

Drawings

https://themeisle.com/blog/free-illustrations/

Photos - royalty free (without registration)

Image Editing - Free

Web Drawing

CSS - NextGen

# learn to build a rails template!
git clone https://github.com/justalever/kickoff_vite_rails.git
rails new project --skip-webpack-install --skip-javascript -m kickoff_vite_rails/template.rb

cd project
bin/rails s
bin/vite dev (in second window or with forman/overmind)

CSS

CSS / AlpineJS / StimulusJS

Icons

DB Svelte Tool

SVG Text Logos

Sometimes I find it hard to come up with a good logo, but not a shortname.

Wide larger Logo (for Desktop views)

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 240 45" xmlns="http://www.w3.org/2000/svg">
  <style>
    .heavy { font: bold 30px sans-serif; fill: blue;}
    .small { font: italic 25px sans-serif; fill: green; }
  </style>
  <text x="0" y="35" class="heavy" fill="blue">ED</text>
  <text x="41" y="35" class="small" fill="green">gility</text>
</svg>

Small stacked logo (for mobile views)

<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg">
  <style>
    .heavy { font: bold 28px sans-serif; fill: blue;}
    .small { font: italic 18px sans-serif; fill: green; }
  </style>
  <text x="0" y="22" class="heavy" fill="blue">ED</text>
  <text x="0" y="40" class="small" fill="green">gility</text>
</svg>
Bill Tihen
Bill Tihen
Developer, Data Enthusiast, Educator and Nature’s Friend

very curious – known to explore knownledge and nature