🔥🔥🔥 I just completely updated my bestselling HTML + CSS course on Udemy! 35 hours of fresh content! Start learning now →

Jonas' Resources for Hand-Crafting
Beautiful and Performant Websites

Join 50,000+ developers and don't miss an update to this list!

Development tools

Visual Studio Code

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

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

CSS Resources

Jonas' Advanced CSS Course

Master advanced and modern CSS, responsive design, Sass, flexbox, CSS Grid, and so much more!

CSS3 Reference by MDN

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

CSS3 Reference by Codrops

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

Can I Use?

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

30 CSS Selectors by Tutplus

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

CSS for People Who Hate CSS

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

Clippy

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

CSS easing functions

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

JavaScript Resources

Jonas' JavaScript Course

My premium course to learn and truly understand JavaScript, by coding real-world projects.

JavaScript Reference by MDN

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

JavaScript Operator Precedence Table

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

JavaScript Event Reference

Handy reference list of all DOM events with explanations, nicely categorized.

ES6+ Browser Compatibility Table

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

DOM Manipulation Reference

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

JavaScript KeyCodes Reference

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

Principles of Writing Good JavaScript

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

JavaScript Design Patterns

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

Fonts and Typography Tools

Google Fonts

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

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.

Great Colors and Tools

Open Color

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

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

Unsplash

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

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

Ionicons

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

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 Inspiration

Land Book

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

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.

Popular Blogs & Communities

Stack Overflow

The biggest programmer community. Ask and find answers to HTML, CSS and JS questions.

CSS Tricks

Excellent articles, guides, and even an almanac, all about front-end development, with a focus on CSS.

Smashing Magazine

A very popular web dev blog, writing about all things coding and designing.

Codrops

Another blog, featuring articles and tutorials about latest web trends and techniques.

Hey Designer

Curated articles for designers and front-end developers. Available as a newsletter.

Front End Front

A place where front-end developers can ask questions, share links, and show their work.

Testing, Optimization and Deployment

HTML Validator by W3C

Check if your HTML markup is valid and contains no errors. Official W3C tool.

CSS Validator by W3C

Check if your CSS code is valid and contains no errors. Official W3C tool.

Google PageSpeed Insights

Easy tool to test your webpage for performance. You can also use it in Chrome DevTools (Lighthouse).

Squoosh

Compressing images is the most important performance optimization. This is my #1 tool to do so!

Optimizilla

Another tool to compress up to 20 JPEG and PNG images while keeping a good level of quality.

Real favicon Generator

Just upload an image and this tool creates favicons for your website for all platforms.

The Front-End Checklist

Extremely popular checklist to check if your website's code is actually ready for deployment.

Web Usability Checklist

Another checklist, this one is to catch common usability problems of your website.

Website Speed Optimization Guide

An excellent guide to optimize your webpage speed. This is something many devs overlook!

Woorank

Get a SEO review of your website to address common issues, and get ahead of your competition.

Google Analytics

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

Fathom

A privacy-first alternative to Google Analytics. Doesn't require annoying GDPR cookie notices!

Netlify

My #1 go-to platform to host static websites. They have a very generous free plan!

Hover

If you need to buy a domain name, this is the place to go. I have all my domains here.

Node.js development

Jonas' Node.js Bootcamp

My premium course for modern back-end dev with Node, Express, MongoDB, and many more.

Node.js Documentation

The Node.js documentation is an essential guide for every developer. There are also useful guides.

Express Reference

Essential manual for building express applications. Also contains tutorials and other resources.

The MongoDB Manual

Learn all about the amazing features of MongDB, especially the ones not covered in my course.

Mongoose Documentation

Keep this open at all times when building an app. Indispensable documentation for every developer!

Node.js Best Practices

Huge list of best practices for building Node apps. Important for big projects.

Awesome Node.js

Want to use more packages than you learned in my course? This is a great list to get you started!

Node Weekly Newsletter

This is how I stay informed about everything happening in the Node.js world.

Join 50,000+ developers and don't miss an update to this list!