Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules.

Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

Highlight web colors in your editor.

Shows image preview in the gutter and on hover.

It'll enable live changes without saving file.

My favorite theme for VSCODE.

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.

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.

Here you can find 30 most important CSS selectors from Tutplus all the time.

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

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

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

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

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

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

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

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

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

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

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.

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

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

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

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

Another helpful tool that generates variations of colors.

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

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.

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

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

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

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

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

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

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

This is useful, for example, when resizing photos or video.

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

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

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

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.

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

Showcase of beautiful web design. Here you can find inspiration resources to make a beautiful!

Another gallery of beautiful websites, sorted into multiple categories

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

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

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

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 very popular web dev blog, writing about all things coding and designing.

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

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

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

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

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

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.

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