As website development advances with new best practice techniques, the need for helpful tools and resources to assist with your production cycle has arisen.

These resources not only help you build better and more compatible websites, but also save you time with testing and troubleshooting.

Here’s a list of my go-to tools and resources, in no particular order.

Tools

Modernizr

Taking advantage of cool new web technologies is great fun, until you have to support browsers that lag behind. Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily.

Normalize

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

BrowserStack

Instant access to all desktop and mobile browsers. Say goodbye to your setup of virtual machines and devices.

Sass: Syntactically Awesome Style Sheets

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Sublime Text

Sublime Text is a sophisticated text editor for code, markup and prose. You’ll love the slick user interface, extraordinary features and amazing performance.

Bitbucket

Host, manage, and share Git and Mercurial repositories in the cloud. Free, unlimited private repositories for up to 5 developers give teams the flexibility to grow and code without restrictions.

Resources

HTML5 Boilerplate

HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.

Google Fonts

Google Fonts makes it quick and easy for everyone to use web fonts, including professional designers and developers.

Font Awesome

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

365psd

download a free psd every day

CodePen

CodePen is a playground for the front end side of the web. It’s all about inspiration, education, and sharing.

960 Grid System

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

Foundation

The most advanced responsive front-end framework in the world.