SHARUK'S RESOURCES FOR HAND-CRAFTING BEAUTIFUL AND PERFORMANT WEBSITES

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

This is my personal fav reference,I use this all the times.

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.

This is my personal fav reference,I use this all the times.

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.

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

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

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

This is my personal fav reference for JS, I use this all the times.

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

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.

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.

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.

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.

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

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

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.

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.

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.

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.

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.

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

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

Tool to convert icon fonts to SVG icons and sprites.

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

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.

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.

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

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

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 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.

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!