RESOURCES FOR HAND-CRAFTING BEAUTIFUL AND PERFORMANT WEBSITES

GET STARTED

development tools

vscode icon Visual Studio Code

The best text editor in the world see next resource for my current setup

vscode icon My Visual Studio Code Setup

Check out exactly what theme, extensions and settings I currently use in VSCode.

Codepen

Codepen is an essential tool to quickly test out ideas. I use it in multiple courses too.

Emmet Cheat Sheet

Emmet is an essential tool for writing HTML. I teach it in my advanced CSS course. This is a very handy cheat sheet to get started.

html5 resources

vscode icon HTML5 Reference by MDN

You don't need to know every HTML element. I just use this excellent reference all the time.

vscode icon HTML Entity Reference by CSS-Tricks

Super useful reference, gives you HTML entity name, numeric code, hex code and ISO code.

CSS resources

vscode icon CSS3 Reference by MDN

As with HTML, you don't need to know every CSS property. Use this reference instead.

vscode icon CSS3 Reference by Codrops

Another excellent CSS reference, this time from Codrops. Make sure to check this one out, too.

vscode icon Can I Use?

Up-to-date browser support tables for front-end technologies on desktop and mobile browsers.

vscode icon 30 CSS Selectors by Tutplus

I find myself using this handy list of the 30 most important CSS selectors from Tutplus all the time.

vscode icon CSS for People Who Hate CSS

Excellent guide on how to write better, cleaner and more reusable CSS code.

vscode icon Clippy

A small tool to help you using the new and powerful clip-path property.

vscode icon CSS easing functions

An amazing collection of easing functions bo be used in CSS transitions and animations.

javascript resources

vscode icon JavaScript Reference by MDN

Another reference by MDN, this one is for JavaScript. This is pretty advanced stuff.

vscode icon JavaScript Operator Precedence Table

Very handy cheatsheet to determine which JavaScript operators are evaluated first.

vscode icon JavaScript Event Reference

Handy reference list of all DOM events with explanations, nicely categorized.Very handy cheatsheet to determine which JavaScript operators are evaluated first.

vscode icon ES6+ Browser Compatibility Table

Check out all the new ES6+ features supported and their browser support.

vscode icon DOM Manipulation Reference

Called "You Might Not Need jQuery", but I use this as a complete DOM manipulation reference.

vscode icon JavaScript KeyCodes Reference

Get keyboard codes, unicodes and keycodes. Vital reference for keypress event handling.

vscode icon Principles of Writing Good JavaScript

While I don't follow this 100%, it's good to have a style guide to write better code.

vscode icon JavaScript Design Patterns

For more advanced developers: learn all common JavaScript design patterns. Perfect reference.

fonts and typography tools

vscode icon Google Fonts

The #1 resource for free and easy-to-use webfonts. Has a huge library of fonts.

vscode icon Fontsquirrel

The best, 100% free fonts for commercial use. Another well-known huge font library.

The 100 best free fonts by Creative Bloq

List of free fonts, from vintage-inspired typefaces to slab serifs, for a range of projects.

MyFonts

World's largest library of premium fonts, if you need more than free fonts for your next project.

A Pocket Guide to Typography

Amazing resource to learn about typography. Learn typography basics in less than 30 minutes.

fonts and typography tools

vscode icon Open Color

An open-source color scheme, optimized for UI. My go-to resource to choose colors from scratch.

vscode icon Tailwind Colors

Another excellent and popular set of color pallettes. Great selection of colors for all your projects.

Flat UI Colors

A good starting point for choosing a flat design color for your next project.

Material Palette

Yet another set of colors, inspired in material design. Generate and download your palette.

Colorhunt Palettes

Don't know what colors to use for your website? Colorhunt helps you with beautiful color palettes.

LOL Colors Palettes

Curated color palettes inspiration. Another source for great color palettes.

UI Gradients

Collection of beautiful color gradients for you to choose from and export to your project.

Paletton

A very popular tool which allows you to create color combinations that play well together.

Tint and Shade Generator

Easily create lighter and darker versions of any base color. Perfect for hovers, borders and gradients.

0to255

Another helpful tool that generates variations of colors.

Coolors Contrast Checker

Tool to check whether two colors have a good contrast ratio. Essential for building accessible websites!

images and videos

vscode icon Unsplash

My #1 resource for free high-resolution photos. There are more photos here than you can imagine!

vscode icon Pexels

Another great resource for free stock photos and videos, created by photographers around the world.

ISO Republic

Free and premium stock photos for your website. Easily searchable by topic.

Pixaby

Over 2M free stock photos, vectors and art illustrations you can use anywhere.

unDraw

Hundreds of free and open-source illustrations for your websites, and colors are even customizable.

DrawKit

Hand-drawn vector illustration and icon resources, perfect for your next project.

UI Faces

Avatar photos, perfect for mockups or placeholders. Don't use them for real people...

Random User Generator

Generate random user data, including photos. Like Lorem Ipsum, but for people.

Coverr

Best resource for beautiful and free videos about every imaginable topic, easily searchable.

best icons and tools

vscode icon Ionicons

A beautiful and round icon set, very easy to use, and 100% free even for commercial usage.

vscode icon Hero Icons

A 230-pieces icon set, available in outline and solid styles, best used at 24x24 px.

Phosphor Icons

Another beautiful, more boxy SVG icon set. Customizable thickness and color.

Font Awesome

A highly popular icon font, consisting of 1000+ icons spread across countless categories.

Line Awesome

Font awesome (previous icons) looks a bit outdated at this point, so this is a very simple alternative.

Iconmonstr

4500+ free and simple icons in 300+ collections, perfect if you need a single icon and not a whole set.

Icons8

An incredible premium resource. Has 175,000+ icons, some for free, across countless styles and categories.

Icon 54

5000 vector icons for iOS, Android, Websites and Apps. Worth checking out if you have a budget!

Icomoon

Tool to convert icon fonts to SVG icons and sprites. I use it in my advanced CSS course.

Iconjar

A macOS app to organize, search and use all your icons in an easy way.

find design inspirations

vscode icon Land Book

Showcase of beautiful web design. My essential #1 inspiration resource when I design websites!

vscode icon One Page Love

Another gallery of beautiful websites, sorted into multiple categories.

Awwwards

The awards of design, creativity and innovation on the internet. This one features more creative designs.

Screelane

Inspiration for individual elements and components. Another of my go-to resources!

Dribbble

Most well-known destination to find design inspiration, not just web design.