Join 85,000+ developers and don't miss an update to this list + new courses
Check out exactly what theme, extensions and settings I currently use in VSCode.
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.
My premium course for building beautiful responsive websites with HTML and CSS.
You don't need to know every HTML element. I just use this excellent reference all the time.
Super useful reference, gives you HTML entity name, numeric code, hex code and ISO code.
Master advanced and modern CSS, responsive design, Sass, flexbox, CSS Grid, and so much more!
As with HTML, you don't need to know every CSS property. Use this reference instead.
Another excellent CSS reference, this time from Codrops. Make sure to check this one out, too.
Up-to-date browser support tables for front-end technologies on desktop and mobile browsers.
I find myself using this handy list of the 30 most important CSS selectors from Tutplus all the time.
Excellent guide on how to write better, cleaner and more reusable CSS code.
An amazing collection of easing functions bo be used in CSS transitions and animations.
My premium course to learn and truly understand JavaScript, by coding real-world projects.
Another reference by MDN, this one is for JavaScript. This is pretty advanced stuff.
Very handy cheatsheet to determine which JavaScript operators are evaluated first.
Handy reference list of all DOM events with explanations, nicely categorized.
Check out all the new ES6+ features supported and their browser support.
Called "You Might Not Need jQuery", but I use this as a complete DOM manipulation reference.
Get keyboard codes, unicodes and keycodes. Vital reference for keypress event handling.
While I don't follow this 100%, it's good to have a style guide to write better code.
For more advanced developers: learn all common JavaScript design patterns. Perfect reference.
List of free fonts, from vintage-inspired typefaces to slab serifs, for a range of projects.
World's largest library of premium fonts, if you need more than free fonts for your next project.
Amazing resource to learn about typography. Learn typography basics in less than 30 minutes.
An open-source color scheme, optimized for UI. My go-to resource to choose colors from scratch.
Another excellent and popular set of color pallettes. Great selection of colors for all your projects.
Yet another set of colors, inspired in material design. Generate and download your palette.
Don't know what colors to use for your website? Colorhunt helps you with beautiful color palettes.
Collection of beautiful color gradients for you to choose from and export to your project.
Easily create lighter and darker versions of any base color. Perfect for hovers, borders and gradients.
Tool to check whether two colors have a good contrast ratio. Essential for building accessible websites!
My #1 resource for free high-resolution photos. There are more photos here than you can imagine!
Another great resource for free stock photos and videos, created by photographers around the world.
Hundreds of free and open-source illustrations for your websites, and colors are even customizable.
Generate random user data, including photos. Like Lorem Ipsum, but for people.
A highly popular icon font, consisting of 1000+ icons spread across countless categories.
Font awesome (previous icons) looks a bit outdated at this point, so this is a very simple alternative.
4500+ free and simple icons in 300+ collections, perfect if you need a single icon and not a whole set.
An incredible premium resource. Has 175,000+ icons, some for free, across countless styles and categories.
5000 vector icons for iOS, Android, Websites and Apps. Worth checking out if you have a budget!
The biggest programmer community. Ask and find answers to HTML, CSS and JS questions.
Excellent articles, guides, and even an almanac, all about front-end development, with a focus on CSS.
A place where front-end developers can ask questions, share links, and show their work.
Easy tool to test your webpage for performance. You can also use it in Chrome DevTools (Lighthouse).
Compressing images is the most important performance optimization. This is my #1 tool to do so!
Another tool to compress up to 20 JPEG and PNG images while keeping a good level of quality.
Just upload an image and this tool creates favicons for your website for all platforms.
Extremely popular checklist to check if your website's code is actually ready for deployment.
Another checklist, this one is to catch common usability problems of your website.
An excellent guide to optimize your webpage speed. This is something many devs overlook!
Get a SEO review of your website to address common issues, and get ahead of your competition.
Get free insights about website traffic, visitors and conversions. A must for every website.
A privacy-first alternative to Google Analytics. Doesn't require annoying GDPR cookie notices!
My premium course for modern back-end dev with Node, Express, MongoDB, and many more.
The Node.js documentation is an essential guide for every developer. There are also useful guides.
Essential manual for building express applications. Also contains tutorials and other resources.
Learn all about the amazing features of MongDB, especially the ones not covered in my course.
Keep this open at all times when building an app. Indispensable documentation for every developer!
Huge list of best practices for building Node apps. Important for big projects.
Want to use more packages than you learned in my course? This is a great list to get you started!
Join 50,000+ developers and don't miss an update to this list!
