Website Development Cheat Sheet

Written by Bryan Ho

February 18, 2017

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

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


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

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

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.



Singapore Web Design Company - Smmile


Smmile is a Singapore Web Design Company with over 10 years of experience in the industry.

We do amazing web design, eCommerce, WordPress and the latest innovation in technology with compelling narrative to ensure our clients’ success. We design websites, get your website to the top of Google. Basically everything related to the web and online world. At Smmile, we believe in designing for trust. Because we agree with the greatest brands in the world that design builds trust. And from trust, relationships are built and all businesses, are built on relationships.

Related Articles

3 Differences between SEO and SEM

3 Differences between SEO and SEM

SEO, SEM, PPC are all commonly used as measures for engagement levels. SEO and SEM are different, though many think they are similar. Click here to read!