Resources

Tools that I often use. This saves time.

VS Code
VS Code

I've switched from Atom. VS Studio IDE is also good.

Visual Studio Code Setup
Visual Studio Code Setup

My VS code setting JSON file.

Code Pen
Code Pen

Test out some codes.

Emmet Cheat Sheet
Emmet Cheat Sheet

Emmet plug-ins for HTML, XML, XSL, and other structured code formats.

HTML5 resources

HTML reference
HTML reference

MDN is one of the most reliable source for me.

HTML glyphs
HTML glyphs

CSS-Tricks is another reliable source.

HTML Cheat Sheet
HTML Cheat Sheet

Cheat Sheet for HTML Tags.

CSS resources

CSS reference
CSS reference

MDN reference for CSS.

CSS Selectors
CSS Selectors

List of CSS selectors.

Browser support check
Browser support check

Up-to-date browser support check for frontend technologies.

Responsive grid System
Responsive grid System

To create a responsive web site.

Flexbox cheat sheet
Flexbox cheat sheet

Flexbox grid system cheat sheet.

CSS Grid system
CSS Grid system

CSS Grid system cheat sheet.

Cubic-bezier calculator
Cubic-bezier calculator

Visually generating cubic-bezier calculator.

Collection of easing functions
Collection of easing functions

Easing functions calculator.

Color Hex Color Codes
Color Hex Color Codes

Color-hex gives information about colors (RGB,HSL,HSV and CMYK).

JavaScript resources

JavaScript reference
JavaScript reference

MDN reference for JavaScript.

JavaScript Event Reference
JavaScript Event Reference

JavaScript DOM events.

JavaScript Operator Reference
JavaScript Operator Reference

JavaScript operator precedence.

DOM Manipulation Reference
DOM Manipulation Reference

List of things you can do in jQuery with Vanilla JavaScript.

JavaScript KeyCodes
JavaScript KeyCodes

Get keyboard codes, unicodes.

ES6 Browser Compatibility table
ES6 Browser Compatibility table

It has all the new ES2015/ES6 features.

Principles of Writing Consistent, Idiomatic JavaScript
Principles of Writing Consistent, Idiomatic JavaScript

Style guide to write better code organized by open sources.

Fonts and typography tools

Google Fonts
Google Fonts

Google Fonts.

MyFonts
MyFonts

Professional fonts.

TypeTester
TypeTester

Web application for testing and comparing typefaces.

Colors, themes and tools

Colorhunt Palettes
Colorhunt Palettes

Beautiful color palettes.

Material Palette
Material Palette

Good set of colors inspired in material design.

Paletton
Paletton

Create color combinations that play well together.

BrandColors
BrandColors

Collection of colors themes by name brands.

UI Gradients
UI Gradients

Color gradients.

0to255
0to255

Variations of any color.

Images & Videos

Unsplash
Unsplash

Free high-resolution photos.

Pixaby
Pixaby

Free stock photos, vectors and art illustrations.

Subtle Patterns
Subtle Patterns

High quality resource of tilable textured patterns.

Coverr
Coverr

Free videos

Canva
Canva

Create designs with drag-and-drop features and layouts.

Image Optimizer
Image Optimizer

Resize, compress and optimize image files.

Icons and tools

Icomoon
Icomoon

Convert icon fonts to SVG icons and sprites.

Fontastic
Fontastic

Create a customized icon font.

Flaticon
Flaticon

Free icons available in PNG, SVG, EPS and PSD.

Font Awesome
Font Awesome

Popular icon font,icons spread across several categories.

Icons8
Icons8

Premium icon set with a lots of icons in any size and format.

Design samples

Dribbble
Dribbble

Good design inspiration resource, not just for web design.

One Page Love
One Page Love

The ultimate showcase of delicious One Page websites.

Site Inspire
Site Inspire

A showcase of the finest web and interactive design.

Media Queries
Media Queries

A collection of responsively designed websites for inspiration.

Call To idea
Call To idea

Get quick inspiration for common website elements such as forms, sliders, navigations, etc.

Communities and blogs

Stack Overflow
Stack Overflow

I think it's largest programmer community.

Web Designer Depot
Web Designer Depot

Web design news, views, techniques, and resources.

Front End Front
Front End Front

Front-end focused community where developers can ask questions, share links, and show works.

Hey Designer
Hey Designer

Curated articles for designers and front-end developers.

Designer News
Designer News

A community for people in design and tech, to discuss and share interesting things in the industry.

Planning, optimization & deploymenet

Usability checklist
Usability checklist

Catch common usability problems for the website before deploy it.

Periodic Table of Web Design Process
Periodic Table of Web Design Process

Overview of the web design process. Project brief to launching.

Optimizilla
Optimizilla

Compress up to 20 JPEG and PNG images while keeping a good level of quality.

Nibbler
Nibbler

Website testing tool for key areas including accessibility, SEO, social media and technology.

Website Speed Optimization Guide
Website Speed Optimization Guide

An excellent guide to optimize your webpage speed.

Sizzy
Sizzy

A tool for developing responsive websites. Let you be able to see multiple devices at once.

Google Mobile-Friendly Test
Google Mobile-Friendly Test

Testing webpages for mobile-friendly design, according to Google's ranking factors.

Google PageSpeed Insights
Google PageSpeed Insights

Quick tool to test your webpage for performance on all devices.

Google Analytics
Google Analytics

Get free insights about traffic, visitors and conversions. A must for every website.