Front End Web Development Best Tips, Tricks and Tools

You must be logged in to view the contents of this board.

JavaScript Help

  1. JavaScript Basics Articles articles about the basics of JS. Written in an understandable way.

  2. try JavaScript compilers

Dev Tricks for Marketing

  1. Jquery : Append querystring to all links

Google Analytics


Resources to help learn about Google Analytics for Development purposes

  1. Google Analytics events

Learning Resources

  1. Google Developer Training  |  Google Developers

    Free Courses by Google on Android, Web Dev, Firebase and more. Even some certs.

CMS & Front End Frameworks


A list of CMS and Frameworks I have worked with and my resources/links/info to help you with them.

  1. Ghost CMS Tips and Tutorials
  2. Keystone JS Most Helpful Tips and Tutorials
  3. Meteor JS Most Helpful Tips and Tutorials

Flexbox Resources

  1. Flexbox Grid

WordPress Tricks

  1. Cleaner output for wp_nav_menu()
  2. Private Tunnel to Local Hosted WP Site

    A public, shareable URL directly to your local WordPress site that you can share with clients

Sketch Plugins

  1. ScottSavarie/Clipboard-Fill


  1. "Cross origin requests are only supported for HTTP." error when loading a local file

    Problem with json and local servers. has notes on installing node server to fix issue

JS jQuery Plugins

  1. Sticky-Kit
  2. Vide

CSS Selectors


Tips, tricks and troubleshooting using selectors in CSS

  1. Preventing blurry rendering with transform: scale



UI, Buttons, Packs etc

  1. Free to-do app UI kit for Photoshop and Sketch | InVision | InVisionDoShare on TwitterS...



For those having issues with PHP basics... :(

  1. How to combine two strings together?


  1. Using node-sass
  2. How to Build an npm Package - Treehouse Blog



Information on using Sass

  1. Sass Basics

    Intermediate guide to quickly grasp what is possible with Sass

CSS Filters


Everything about CSS3 Filters

  1. CSS Filters Playground

    Image, Iframe, Video examples. Enter custom image URL to try

  2. CSS Filters - HTML5 Demos

    Demo showing CSS Filter Effects 1.0

  3. Understanding CSS Filter Effects
  4. Can I use... Support tables for HTML5, CSS3, etc
  5. Dropbox - CSS3 image manipulation

    Cool examples within a Dropbox folder

Coding Utilities

  1. Online Tools for Creative People

    Website tests for screen size and resolution - not the best but the best free option.

  2. Share code real-time in your browser
  3. Learning JavaScript Design Patterns
  4. Refactor yourself



Help with using Codekit.

  1. Working with CodeKit and Git
  2. CodeKit: THE Mac App For Web Developers.

JS Vanilla Plugins - No Dependencies, No jQuery


Pure JS no jQuery or Dependencies required. Lightweight plugs for Web and Mobile.

  1. A lazy loading and multi-serving images, iframes, games and videos script

    Super easy https load for images. Only load images the user sees.

  2. rickharrison/validate.js

    Pure JS validation for forms.

  3. Haroenv/holmes

    interesting plug that allows search for anything within a page. Instant results.

  4. flatpickr - lightweight datetimepicker & calendar

    Date picker - with a lot of options for entering time format (pick a day and it sets format for you)

  5. HubSpot/select

    WARNING: 1 Dependency but the ability to control your select box with CSS could be good.

  6. callmecavs/jump.js

    Great plugin to control page jumps IE: html target but with super control.



Info and Links for MailChimp

  1. Translate Signup Forms and Emails
  2. Additional Tracking Options for Campaigns
  3. Email Design Reference
  4. Find MailChimp Data in Google Analytics
  5. Integrate Google Analytics with MailChimp
  6. Translate Content in a Campaign

UI Design


Inspiration for UI

  1. Animista

    Cool CSS Animation Library

  2. CSS menu design - Pop Out UI

    Simple design using box shadow for highlights and black borders create depth.

  3. Free Professional Fonts - League of Moveable Type
  4. Pure CSS Country Flags
  5. Creative Navigation Patterns in Email Design
  6. demo:CSS image hover effects

WordPress Links


Quick Reference to WordPress Functions

  1. Pagination
  2. The Loop
  3. How To Use Sass With WordPress – A Step By Step Guide

    The Ultimate Guide to WordPress Conditional Tags | If and or || &&

  5. Installing WordPress Locally on Your Mac With MAMP
  6. Generate WordPress Post Type

Mongo DB

  1. How to install MongoDB on Windows

CSS Transforms and Transitions


Info on CSS3 Transforms and Transitions. Tips, tricks, and troubleshooting

  1. Preventing blurry rendering with transform: scale

Freelance Stuff

  1. Visual CSS flexbox builder | Webflow
  2. Best Tools for Freelance Designers and Developers

Useful Blogs for Dev and Design

  1. 32 Chrome extensions for designers and devs


  1. Mac Show Hidden files

    defaults write AppleShowAllFiles true

  2. How to undo (almost) anything with Git
  3. Make your HTML5 video play on mobile devices

Interview Questions

  1. MaximAbramchuck/awesome-interview-questions



Modals built with creative methods. Either with great design or excellent HTML/CSS/JS structure.

  1. Modal Dialog by David Fitas - CSS, jQuery

    Very clean modal design with animations. Missing close modal on click outside though.

  2. Pure CSS Modal - Good Design Great Structure

    This modal uses an Anchor tag w/ absolute positioning & an empty hash to close the targeted modal

0 Comment
Comments or thoughts?
Email a link to this board
Share this board on Facebook
Share this board on Twitter
Notice label will go here