Mudassir' Resources for Building Beautiful and Amazing Websites

Development tools

Visual Studio Code

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

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

HTML5 Reference By W3schools

It's very useful for biginers it's easy to understand. Follow this page for understanding HTML 5.

HTML5 Reference by MDN

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

HTML Entity Reference by CSS-Tricks

Super useful reference, gives you HTML entity name, numeric code, hex code and ISO code.

CSS Resources

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.

FreeCodeCamp

Great resource for front-end Development With Projects as well as Certificate.

JavaScript Resources

JavaScript Course By FreecodeCamp

Amazing course to learn JavaScript, by coding basic to advance JavaScript with Certificate.

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.

Node.js development

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!

React JS Resources

React Js Course By FreecodeCamp

Amazing course to learn React Js, basic to advance JavaScript with Certificate.

React Reference By React

React JS Documentation it is well organised page mentained By Meta Community.

React JS By W3schools

React JS Page For Beginner By W3schools.

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.

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.

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.