My web development toolkit

Here is a list of everything that goes into my web development process. I'm pretty sure there are other things that I use but I use the following pretty much every week!

Tools and Inspiration


  • Figma - prototype and design
  • VS Code - code editor
  • Local WP - local WordPress testing and development
  • Prettier - code formatter
  • Notion - note-taking, project management, and planning
  • Spotify - to not lose sanity

Browser & Web Tools

  • Firefox - browser for development
  • Wappalyzer - browser extension to view web technologies
  • ColorZilla - browser extension to know colour of any website
  • WhatFont - browswer extension to know font properties of any website
  • GoFullPage - browser extension to take full page screenshots (Chrome)
  • Font Squirrel - website to generate webfont kit
  • Websemantics - website for fluid responsive typography (simple)
  • Utopia - website for fluid responsive typography and spacing (advance)
  • Codepen - website for inspiration and technical code
  • Tiny Helpers - large collection of open-source resources for developers


Technical Guides

Pre Code Tools

Dev Specific

WordPress Specific



  • iPhone 11 Pro Max - phone for responsive testing
  • iPad Air - tablet for responsive testing
  • Google Pixel 2 XL - phone for responsive testing
  • Google Nexus 5 - phone for responsive testing

Want to be notified of new posts like this?

Sign up to be notified of new posts using the form below. Email addresses are used for the sole purpose of sending once-in-a-while email notifications and nothing else. I promise I don't spam!