My web development toolkit

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

• Kevin Powell – CSS guru
• Digital Ambition – Oxygen guru
• Sridhar Katakam – Oxygen guru
• Widdin – Oxygen guru
• Snippet Club – WordPress guru
• Official Oxygen Facebook Group – Facebook group for Oxygen community

Pre Code Tools

• Highlight.js – syntax highlighter
• Clipboard.js – easy copy to clipboard functionality
• Mothereff – HTMLencoder/decoder
• CleanCSS – CSS minifier
• DigitalOcean – JavaScript minifier
• Unminify – unminify avaScript, CSS, HTML, XML and JSON

Dev Specific

• Namecheap – domain registrar
• Siteground (affiliate link) – hosting provider

WordPress Specific

• WordPress – content management system and back-end
• All-In-One WP Migration – WordPress migration and backup plugin
• Rank Math – WordPress SEO plugin
• Fluent Forms – WordPress form builder plugin
• Oxywind – WordPress Tailwind CSS plugin
• Barebones Oxygen Themes & Functions – bespoke WordPress theme and plugin to add extra functionality and design to Oxygen
• Oxygen Builder – web builder

Tech

Hardware

• Asus ROG Flow X13 – laptop
• Logitech G Pro Wireless – wireless mouse
• Nothing ear (1) – wireless earbuds to not lose sanity

• 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