Web Development Resources

Resources I use for my web development projects, and for others to use.

Offline Code Editor

VS Code

Visual Studio Code is a free code editor redefined and optimized for building and debugging modern web and cloud applications.

Text Sublime 3

Sublime Text is a sophisticated text editor for code, markup and prose. You'll love the slick user

Atom Editor

Atom is a desktop application built with HTML, JavaScript, CSS, and Node.js integration.

Online Code Editor

Codepen

CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets. It functions as an online code editor .

JS Fiddle

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Code Sandbox

CodeSandbox is an online code editor and prototyping tool that makes creating and sharing web apps faster.

HTML5 Resources

HTML Reference

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

w3schools.com

The World's Largest Web Developer Site.W3schools.com.The World 's Largest Web Developer Site.

HTML & CSS in 30 Days (Youtube)

Learn HTML and CSS in 30 Days with Tuts Plus Full Course. It covers almost everything you need know to become a Web Designer.

HTML Entity Reference

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

HTML Cheat Sheet

A very handy printable HTML5 cheat sheet that can save you a ton of time.

CSS3 Resources

CSS3 Reference MDN

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

Tutorial by w3schools.com

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS to make the Awesome Web.

CSS3 Reference by Codrops

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

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

This is the Responsive Grid System, a quick, easy and flexible way to create a responsive web site.

Clippy Clip Path Generator

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

Cubic-bezier function generator

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

JavaScript Resources

JavaScript.info

Modern JavaScript Tutorial: simple, but detailed explanations with examples and tasks, including: closures, document and events, object oriented programming

Eloquent Javascript

Though simple for beginners to pick up and play with, JavaScript is a flexible, complex language that you can use to build full-scale applications.

MDN JS Guide

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

You dont know JS

This is a series of books diving deep into the core mechanisms of the JavaScript language. This is the second edition of the book series:

FreeCodeCamp

JavaScript Algorithms and Data Structures will teach you basic JavaScript in a series of challenges. It will teach you how to assign variables, arrays,create functions, and some of the various loop types used in JavaScript.

Principles of Writing JavaScript

JavaScript is a curious language. It's easy to write, but difficult to master.By the end of this article, hopefully, you 'll transform your spaghetti code into a five-course meal, full of readable,maintainable yumminess!

ES6 Browser Compatibility Table

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

Fonts

Google Fonts

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

The 100 best free fonts by Creative Bloq

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

Font Space

Free downloads of legally licensed fonts that are perfect for your design projects. The best place in the universe to search for amazing fonts.

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

Don't know what colors to use for your website ? Colorhunt helps you with beautiful color palettes.

UI Gradients

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

Lol Colors

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

Image and Graphic

Unsplash

My #1 resource for free high-resolution photos. 10 new photos every 10 days.

Shopify Brust

Browse thousands of beautiful copyright-free images. All our pictures are free to download for personal and commercial use, no attribution required.

Subtle Patterns

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

PlaceIt

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

Canva

Easily create beautiful designs with drag-and-drop features and professional layouts.

Icons and Webfont

Font Awesome

The world's most popular and easiest to use icon set just got an upgrade.More icons.More styles.More Options.

Ico Font

IcoFont is an icon font application that contains 2100+ icons in a single font. Download the font for free or build icons bundle and download custom buildfont.</p>

Bootstrap Icon

Official open source SVG icon library for Bootstrap.

Flaticon

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

PlaceIt

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

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.

Code Inspiration and Communities

Codepen

CodePen is an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets. It functions as an online code editor .

Codrops

Another blog, writing articles and tutorials about latest web trends, techniques and new possibilities.

Smashing Magazine

A very popular web design and development blog, writing about all things coding and designing.</p>

Stack Overflow

The biggest programmer community. Ask and find answers to HTML, CSS and JS questions.

Github

GitHub brings together the world's largest community of developers to discover, share, and build better software.From open source projects to private team

Dev.to

Where programmers share ideas and help each other grow—A constructive and inclusive social network.

PLANNING, TESTING, OPTIMIZATION AND DEPLOYMENT

HTML Validator by W3C

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

CSS Validator by W3C

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

Tinypng

Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!

Responsinator

The Responsinator is designed to test responsive websites on different device resolutions.

Google PageSpeed Insights

Quick tool to test your webpage for performance on all devices.

Git - Version Control System

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.