learn to code

tool box

bulleted lists dont have to be boring

emojipedia is a really useful tool for web developers, especially when you're making lists. it can even double as your bullet point source.

a refresher on the html for a list

<ul>
  <li>first item</li>
  <li>second item</li>
</ul>

how to change the bullets in a list:

by default, browsers will put a solid round dot in front of each list item.

  • example here with default dot!
  • not very aesthetic

but you can change them! here's the same list, but with an emoji from emojipedia:

  • example with a custom bullet
  • so much cuter

the css that makes it happen:

.fancy-list {
    list-style-type: none; 
    padding-left: -; 
}

.fancy-list li::before {
    content: "🍄"; 
    color: var(--coral);     
}

put the fancy-list tag inside your opening ul tag

here's what's happening:

  • list-style-type: none; kills the default dots.
  • padding-left: 0; realigns the text.
  • li::before lets you place something before each item.
  • content: "🍄"; that “something” is your emoji.
  • color: var(--coral); uses your brand color.

88x31 buttons

tiny graphics • big feelings

i was invited to a webring (screaming internally!!) which means i finally get to make my own 88Ă—31. if you're new to them too, here's the quick links i used to make it + a place to collect mine.

what's an 88x31?

a teeny banner (exactly 88x31px) you can trade, collect, and stick on your site. think stickers for your web notebook.

my little button rail

i'll drop my button + any i collect here:

example 88Ă—31

svg logos for quick mockups

svgl.app

found svgl.app — a site full of clean, ready-to-use brand logos in svg format. perfect for placeholders or quick mockups when you don't feel like redrawing icons just to fill space.

it's small stuff like this that makes designing layouts faster. drop in a logo, test color balance, move on.