My web development toolkit

  • Updated: January 2, 2023
  • 2 mins read

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

Applications

  • 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

Inspiration

  • Dribbble – website for inspiration
  • Bestfolios – website for inspiration
  • Awwwards – website for inspiration
  • Behance – website for inspiration and free bespoke fonts

Technical Guides

Pre Code Tools

Dev Specific

WordPress Specific

Tech

Hardware

  • 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