Skip to main content
Resources
Learning
MDN Web Docs
A great resource for learn HTML, CSS, JavaScript, and more!
Flexbox Froggy
A game to learn CSS flexbox layouts.
Grid Garden , Grid Attack
Games to learn CSS grid layouts.
Kevin Powell
I've learned so much about CSS this youtube channel, he rocks.
Tools
140 HTML Color Names
When I don't want to fuss with colours codes
Hex Color To CSS Filter Converter
Convert black images to a target hex color code with a generated filter. Great for transparent PNGs and SVGs!
Font Awesome
A resource for various icons all over my site, like social media icons, the back to top icon, and more! Lots of free options.
GifCities by the Internet Archive
A GeoCities animated GIF search engine
CodePen.io
Useful for practicing and workshopping code on my secondary devices when I just want to noodle around quickly on a secondary device.
clamp() Calculator by Chris Burnell
A resource for a very useful function that can reduce the need for media queries.
Things I Use (Or Have Used) On My Site
Insert Updateable Elements by kiophen
A way to insert external html into another html document. I also found I can add related javascript below the last line to have it work on the inserted html, something that didn't work using W3's Include-HTML script.
Pure CSS Tabs Using <radio> and <label> Tags by Joachim Kliemann
Switches between panels on a static page- doesn't create new history states when navigating between them.
Anchor Link JSFiddle
Uses links to toggle between visible divs- creates new history states by use of location hashes, for example: website.com/page#locationhash
Responsive equal height images with CSS by Nathan Nguyen
When I need images of different widths to have the same height in a row.
Animate <details> without JavaScript by jgustavo.wd
Used in conjunction with Transitioning to Height Auto using the grid approach.
Seamless Responsive Photo Grid by Chris Coyier
The guide I followed for my (last website's) responsive art galleries.
Lightbox2 by Lokesh Dhakar
A fully-featured lightbox for images!