Website Development Cheat Sheet

Sharing is caring, so I thought I’d compile a list of important toolkits that our team uses to build great-looking websites.

Creativity can’t be taught, but good tools are the same for everyone. While compiling this small list, I thought it’d be even better to add on website links to the exact cheat sheets and tutorials that can help any web design or developer get up to speed with the tools.

Let’s start with web development stuff.

jQuery Tutorials

Website Development Cheat Sheet 1

jQuery simplifies Javascript and there is a vast variety of jQuery libraries that can help to power up the website with effects and animations, AJAX, form validations and plenty of other cool stuff.

CSS Tutorials

Website Development Cheat Sheet 2

CSS are the rules for styling and structuring your web page content. Animations and effects are possible with CSS and CSS plays very well with jQuery to create amazing results.

Divi WordPress Drag and Drop Page Builder

Website Development Cheat Sheet 3

WordPress is a powerful content management system, powering it up with Divi Page Builder makes building your website faster and easy to maintain. The Divi Page Builder gives you the power to design mobile-responsive layouts easily, drag and drop commonly used web page components like sliders, buttons, parallax backgrounds, full-width sections, location maps, forms without touching too much code.

Divi page builder comes jam-packed with 87 WordPress themes at the low pricing starting from $69 / year. We recommend trying out the developer plan at $89 / year and once you feel the productivity and power of Divi, then you can upgrade to the lifetime plan at $249 (one time payment and no more annual payments). Well, that’s what we did.

Bootstrap 3 Tutorials

Website Development Cheat Sheet 4

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. We totally agree and use it in many of our custom development projects.

Free Icons and Symbols for Commercial Use

The Ultimate Icon Cheatsheet

This cheatsheet cover 6 sets of icons and symbols which are very comprehensive and free for commercial use. We use quite a fair bit of Font Awesome in our custom development projects.

  • Font Awesome
  • Glyphicons
  • Foundation Icon Fonts
  • Ionicons
  • Material Design Icons
  • Elusive-Icons

And to take care of the common problems where clients don’t have photos…

Free Images and Photos for Commercial Use

These libraries are always being updated so you can always find new and interesting images for use in your projects.


This probably is not the most comprehensive list but these are our commonly used tools and cheatsheets in our day to day.

What else do you use for web development? Let’s make this a comprehensive list for all web designers and developers.

Feel free to leave a quick comment below. I’ll be around to reply comments and answer questions.


Website Development Cheat Sheet 5