Color names in HTML

Tools

user image Visual Studio Code One of the best text editors and most technologically advanced tools of its kind. Keyboard shortcuts (PDF, Windows)
Codepen Codepen Codepen is an essential tool to quickly test and share ideas.
Emmet Cheat Sheet Emmet Cheat Sheet Emmet is a useful and helpful tool for writing HTML.

HTML5

HTML5 Reference by MDN HTML5 Reference by MDN An excellent reference source (all HTML elements are grouped by function).
HTML Entity Reference by CSS-Tricks HTML Entity Reference by CSS-Tricks References to HTML entity name, numeric code, hex code and ISO code.

CSS

CSS3 Reference by MDN CSS3 Reference by MDN Important CSS reference.
CSS3 Reference by Codrops CSS3 Reference by Codrops An extensive CSS reference with all the important properties and info to learn CSS from the basics.
Logo Can I Use? Up-to-date browser support tables for front-end technologies on desktop and mobile browsers.
Logo 30 CSS Selectors by Tutplus 30 most important CSS selectors from Tutplus.
Logo CSS for People Who Hate CSS How to write better, cleaner and more reusable CSS code.
Logo Clippy How to use a powerful clip-path property.
Logo CSS easing functions A collection of easing functions in CSS transitions and animations.

JavaScript

Logo JavaScript Reference by MDN This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language.
Logo JavaScript Event Reference Useful reference list of the DOM events (with explanations).
Logo ES6+ Browser Compatibility Table To resource to check if all the new ES6+ features are supported by browsers.
Logo DOM Manipulation Reference A handy DOM manipulation reference.
Logo JavaScript KeyCodes Reference Keyboard codes, unicodes and keycodes.
Logo Principles of Writing Good JavaScript A style guide to write better and cleaner code.
Logo JavaScript Design Patterns All common JavaScript design patterns (advanced).

Fonts & Typography

Google Fonts Google Fonts One of the best resources for free and easy-to-use webfonts (exstensive library of fonts).
Fontsquirrel Fontsquirrel Nice free fonts for commercial use.
The 100 best free fonts by Creative Bloq The 100 best free fonts by Creative Bloq A list of free fonts from vintage-inspired typefaces.
A Pocket Guide to Typography A Pocket Guide to Typography A basic guide to typography.

Colors

Open Color Open Color An open-source color scheme, optimized for UI.
Tailwind Colors Tailwind Colors Customizing the default color palette for projects.
Flat UI Colors Flat UI Colors 280 handpicked colors.
Colorhunt Palettes Colorhunt Palettes Good range of beautiful color palettes.
LOL Colors Palettes LOL Colors Palettes Curated color palettes inspiration (nice and beautiful).
UI Gradients UI Gradients Collection of beautiful color gradients.
Paletton Paletton To create color combinations.
Tint and Shade Generator Tint and Shade Generator Important tool to create lighter and darker versions of any base color.
Coolors Contrast Checker Coolors Contrast Checker Calculate the contrast ratio of text and background colors.

Images

Logo Unsplash My #1 resource for free high-resolution photos. There are more photos here than you can imagine!
Logo Pexels Another great resource for free stock photos and videos, created by photographers around the world.
Logo ISO Republic Free and premium stock photos for your website. Easily searchable by topic.
Logo Pixaby Over 2M free stock photos, vectors and art illustrations you can use anywhere.
Logo unDraw Hundreds of free and open-source illustrations for your websites, and colors are even customizable.
Logo DrawKit Hand-drawn vector illustration and icon resources, perfect for your next project.
Logo UI Faces Avatar photos, perfect for mockups or placeholders. Don't use them for real people...
Logo Random User Generator Generate random user data, including photos. Like Lorem Ipsum, but for people.
Logo Coverr Best resource for beautiful and free videos about every imaginable topic, easily searchable.

Icons

Logo Ionicons A beautiful and round icon set, very easy to use, and 100% free even for commercial usage.
Logo Hero Icons A 230-pieces icon set, available in outline and solid styles, best used at 24x24 px.
Logo Phosphor Icons Another beautiful, more boxy SVG icon set. Customizable thickness and color.
Logo Font Awesome A highly popular icon font, consisting of 1000+ icons spread across countless categories.
Logo Line Awesome Font awesome (previous icons) looks a bit outdated at this point, so this is a very simple alternative.
Logo Iconmonstr 4500+ free and simple icons in 300+ collections, perfect if you need a single icon and not a whole set.
Logo Icons8 An incredible premium resource. Has 175,000+ icons, some for free, across countless styles and categories.

Communities

Logo Stack Overflow The biggest programmer community. Ask and find answers to HTML, CSS and JS questions.
Logo CSS Tricks Excellent articles, guides, and even an almanac, all about front-end development, with a focus on CSS.
Logo Smashing Magazine A very popular web dev blog, writing about all things coding and designing.
Logo Codrops Another blog, featuring articles and tutorials about latest web trends and techniques.
Logo Hey Designer Curated articles for designers and front-end developers. Available as a newsletter.
Logo Front End Front A place where front-end developers can ask questions, share links, and show their work.

Testing

Logo HTML Validator by W3C Check if your HTML markup is valid and contains no errors. Official W3C tool.
Logo CSS Validator by W3C Check if your CSS code is valid and contains no errors. Official W3C tool.
Logo Google PageSpeed Insights Easy tool to test your webpage for performance. You can also use it in Chrome DevTools (Lighthouse).
Logo Squoosh Compressing images is the most important performance optimization. This is my #1 tool to do so!
Logo Optimizilla Another tool to compress up to 20 JPEG and PNG images while keeping a good level of quality.
Logo Real favicon Generator Just upload an image and this tool creates favicons for your website for all platforms.
Logo Website Speed Optimization Guide An excellent guide to optimize your webpage speed.
This is something many devs overlook!
Logo The Front-End Checklist Extremely popular checklist to check if your website's code is actually ready for deployment.
Logo Web Usability Checklist Another checklist, this one is to catch common usability problems of your website.
Logo Google Analytics Get free insights about website traffic, visitors and conversions. A must for every website.
Logo Fathom A privacy-first alternative to Google Analytics. Doesn't require annoying GDPR cookie notices!
Logo Netlify My #1 go-to platform to host static websites. They have a very generous free plan!
Logo Hover If you need to buy a domain name, this is the place to go. I have all my domains here.
Logo Woorank Get a SEO review of your website to address common issues, and get ahead of your competition.

Node.js

Logo Node.js Documentation The Node.js documentation is an essential guide for every developer. There are also useful guides.
Logo Express Reference Essential manual for building express applications. Also contains tutorials and other resources.
Logo The MongoDB Manual Learn all about the amazing features of MongDB, especially the ones not covered in my course.
Logo Mongoose Documentation Keep this open at all times when building an app. Indispensable documentation for every developer!
Logo Node.js Best Practices Huge list of best practices for building Node apps. Important for big projects.
Logo Awesome Node.js Want to use more packages than you learned in my course? This is a great list to get you started!