Web Development Resources

Web Development resources FOR BUILDING BEAUTIFUL WEBSITES WITH HTML5, CSS3, JAVASCRIPT, Node.js, DataBase's and some other popular Libraries & Frameworks.

Front End Resources

HTML5 Resources

HTML5 Reference by MDN

You don't need to know every HTML5 element. Here you can find and this is excellent reference all the time.

HTML5 Reference by W3Schools

This HTML tutorial site contains hundreds of HTML examples. With online HTML editor, you can edit the HTML using editor.

HTML Entity Code by CSS-Tricks

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

HTML Cheat Sheet

Shotcut Code commands for a very handy printable HTML5 cheat sheet that can save you a ton of time.

CSS3 Resources

CSS3 Reference by MDN

As with HTML5, you don't need to know every CSS3 property. Use this reference instead.

CSS3 Reference by Codrops

Another excellent CSS3 reference, this time from Codrops. Make sure to check this one out, too.

Can I Use?

Up-to-date browser support tables for front-end technologies on desktop and mobile browsers.

30 CSS Selectors by Tutplus

I find myself using this handy list of the 30 most important CSS selectors from Tutplus all the time.

Animate.CSS

Just-add-water CSS animations. A simple CSS library that lates you add animations with ease.

Responsive Grid System

A quick, flexible and easy fluid grid for spectacularly easy responsive web design.

CSS for People Who Hate CSS

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

Clippy

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

CSS easing functions

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

Cubic-bezier function generator

A tool for visually generating timing animation functions to use in CSS transitions and animations.

JAVASCRIPT Resources

JavaScript Reference by MDN

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

The Modern Javascript Tutorial

How it's done now. From the basics to advanced topics with simple, but detailed explanations.

JavaScript Event Reference

Handy reference list of all DOM events with explanations, nicely categorized.

DOM Manipulation Reference

Called "You Might Not Need jQuery", but I use this as a complete DOM manipulation reference.

JavaScript Operator Precedence Table

Very handy cheatsheet to determine which JavaScript operators are evaluated first.

Johnny-Five

Johnny-Five is the JavaScript Robotics & IoT Platform. By using this J5 you can control Robots.

JavaScript Design Patterns

For more advanced developers: learn all common JavaScript design patterns. Perfect reference.

ES6 Browser Compatibility Table

Check out all the new ES2015/ES6 features supported by the most popular browsers.

JavaScript KeyCodes Reference

Get keyboard codes, unicodes and keycodes. Vital reference for keypress event handling.

ES modules: A cartoon deep-dive

ES modules bring an official, standardized module system to JavaScript. It took a while to get here, though — nearly 10 years of standardization work.

State Of JavaScript

Best Site for comparing the Current state and demand of Core JS and it's libraries from all over the World.

Principles of Writing Good JS

It's good to have a style guide to write better code.

Fonts and Typography Tools

Google Fonts

The #1 resource for free and easy-to-use webfonts. Has a huge library of fonts. More than 100's of styles.

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.

MyFonts

World's largest library of premium fonts, if you need more than free fonts for your next project.

TypeTester

Web application for testing and comparing more than 2200 typefaces.

A Pocket Guide to Typography

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

Great Colors and Tools

Flat UI Colors

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

Material Palette

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

0to255

A simple tool that helps you find variations of any color. Perfect for hovers, borders and gradients.

Learn about colors

If you want to learn about colors, this is one of the best resource to go.

Images and Videos

Unsplash

Beautiful, free photos. Gifted by the world’s most generous community of photographers.

The Stocks

The best free stock photos shared by talented photographers.

ISO Republic

Free Stock Photos and thousands of High-Resolution CC0 Licensed images for Your Next Creative Project

Pixabay

Stunning Free Images, Over 1.6 million royalty free stock photos and videos shared by our generous community.

Subtle Patterns

High quality resource of tilable textured patterns, completely free to use.

iStock

Millions of royalty-free Images, illustrations, videos, and music clips at ridiculously great prices.

Random User Generator

A free, open-source API for generating random user data. Like Lorem Ipsum, but for people.

Coverr

Best resource for beautiful and free videos for your website. 7 new videos added every monday.

Startup Stock Photos

Lots of great pictures of startup offices, people, devices and more. I love it.

PlaceIt

Instant iPhone and Macbook mockups. Just place your screenshot on a device, no Photoshop.

Canva

Instant iPhone and Macbook mockups. Just place your screenshot on a device, no Photoshop.

BEST ICONS AND TOOLS

Ionicons

Beautifully crafted open source icons. Premium designed icons for use in web, iOS, Android, and desktop apps.

Font Awesome

Another highly popular icon font, consisting of 628 icons spread across several categories.

Glyphicons

It’s a mixture of essential icons and symbols for everyday design work.

Flaticon

The largest database of free icons available in PNG, SVG, EPS and PSD. It's even searchable.

Iconmonstr

Over 3400 free and simple icons in 246 collections, all searchable.

Icons8

A truly premium icon set with 24,600 icons in any size and format.

IcoMoon

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

Icon54

2100 Vector Icons for iOS, Android, Websites & Apps. Drawn by hand and designed to perfection.

linea

A beautiful iconset containing 700+ icons, available in multiple formats.

Iconjar

A Mac app to organize, search and use icons the easy way. Works with Sketch, PS and AI.

Fontastic

Create a customized icon font from your icons. Choose from 9000 icons or import your own.

Swift Icons

2104 high quality icon set, covering 19 categories in 4 styles: outlined, filled, colored & flat.

FIND DESIGN INSPIRATION

Dribbble

The ultimate design inspiration resource, not just for web design. The show and tell for designers.

Land Book

Product landing page gallery. My #1 inspiration resource when I build a landing page.

One Page Love

The ultimate showcase of delicious One Page websites.

Site Inspire

A showcase of the finest web and interactive design. Currently over 4900 websites.

Call To idea

Get quick inspiration for common website elements such as forms, sliders, navigations, etc.

Media Queries

A collection of responsively designed websites for inspiration.

Back End

Node.Js Resources

Node.JS - Official site

Node.js is a development platform that is used to build scalable server side applications.

Perfect Resource for Beginners

The resources are constantly updated to keep in line with the changing trends, and the e-book can be downloaded for free.

Node School

Run by volunteers with two goals: to create high quality programming curriculum and to host community learning events.

Learn Node.js in a Week

Learn all the key distinctions that contributed to the success of Node.js.

A Step by Step Introduction

This is a very useful resource for those who want to go into details of the Node.js development process.

Node.js Developers

If you are a beginner in Node.js and would like to hear about the experiences of a developer, then this website would be a great resource.

Mixu's Node book

An online tutorial that received much praise for explaining Node.js in a well-structured way.

The Art of Node

Node.js is an open source project designed to help you write JavaScript programs that talk to networks, file systems or other I/O (input/output, reading/writing) sources.

DataBase Resources

PostgreSQL

PostgreSQL, often simply Postgres, is an object-relational database management system with an emphasis on extensibility and standards compliance.

MySQL

MySQL is an open source relational database management system. One of the most popular Database. You can check out this DB.

MongoDB

MongoDB is a free and open-source cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with schemata

Microsoft SQL server

Microsoft SQL Server is a relational database management system developed by Microsoft.

Redis

Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker. And it is a Non-Relational DB.

Mongodb Nosql

MongoDB is the leading NoSQL database, with significant adoption among the Fortune 500 and Global 500. Although it is challenging to ...

Developer Support Resources

Popular libraries & FrameWorks For Both Front & Back Dev

React

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right ...

Vue.js

The Progressive JavaScript Framework. ... You can read the previous issues and listen to our podcast at news.vuejs.org.

ExpressJs

Fast, unopinionated, minimalist web framework for Node.js ... Express is a minimal and flexible Node.js web application framework that provides a robust set of ...

AngularJS

AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations.

Ruby on Rails

A web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) ...

Django

Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of ...

BootStrap

Bootstrap is a free and open-source front-end framework for designing websites and web applications. It contains HTML- and CSS-based design interface components..

Foundation

Foundation is a responsive front-end framework. Similar to Bootstrap. If you are searching alternate for bootstrap this one is best.

Best Practice & coding Challenge Resources

FrontEndMentor

Supercharge your front-end skills by building real projects. Improve your HTML, CSS and JavaScript while using a real-world workflow. Our challenges provide ...

JS - Exercises

The best way we learn anything is by practice and exercise questions. We have started this section for those (beginner to intermediate) who are familiar with JavaScript./p>

freeCodeCamp curriculum

Here you can find thousands of coding lessons to help, improve your skills. You can earn each certification by completing its 5 final projects.

100DaysOfCode

Here you can learn the rules, get answers to your questions by reading the FAQ, and find out more about the community that’s growing around the challenge.

JavaScript30

30 Day Vanilla JS Coding Challenge.Build 30 things in 30 days with 30 tutorials.No Frameworks×No Compilers×No Libraries×No Boilerplate

CodeNewPie

the most supportive community of programmers and people learning to code. CodeNewbie Podcast stories from people on their coding journey. S6 EP 6 ...

Hacker Rank

Explore and add your first skill to get started. HackerRank offers a variety of skills, tracks and tutorials for you to learn and improve. Explore Skills. Explore ...

CodeWar

Codewars is where developers achieve code mastery through challenge. Train on kata in the dojo and reach your highest potential.

Hacker Earth

HackerEarth is a global hub of 1.5 million developers. For enterprises, HackerEarth is a software provider for innovation management & technical recruitment.