In this overview you will find the most useful resources and tutorials on modern web development. Check them out!

CSS Frameworks

Skeleton

30+ Hand-Picked Resources and Tutorials for Web Developers 1

Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

Foundation

30+ Hand-Picked Resources and Tutorials for Web Developers 2

The most advanced responsive front-end framework in the world.

Bootstrap

30+ Hand-Picked Resources and Tutorials for Web Developers 3

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

SUSY

30+ Hand-Picked Resources and Tutorials for Web Developers 4

The web is a responsive place, from your lithe and lively development process to your end-user’s super-tablet-multi-magic-lap-phone. You need grids that are powerful yet custom, reliable yet responsive. You can quickly add media-query breakpoints for new layouts with at-breakpoint, or create your own math using Susy’s array of grid helpers. Build a one-off site in minutes, or create your own scalable grid library for large projects.

Gridiculous

30+ Hand-Picked Resources and Tutorials for Web Developers 5

A fully responsive grid boilerplate.

Responsive Grid System

30+ Hand-Picked Resources and Tutorials for Web Developers 6

Simple CSS framework for fast, intuitive development of responsive websites. Built using the ‘Mobile First’ approach, ‘clearfix’ for clearing floats, box-sizing: border-box for adding additional padding to elements, and weighs less then 1kb compressed. Responsive design isn’t hard, you’ve just never used responsive.gs.

Unsemantic

30+ Hand-Picked Resources and Tutorials for Web Developers 7

Unsemantic is a fluid grid system that is the successor to the 960 Grid System. It works in a similar way, but instead of being a set number of columns, it’s entirely based on percentages.

Professional CSS-framework

30+ Hand-Picked Resources and Tutorials for Web Developers 8

inimalistic and sufficient for everything, adaptive and responsive. Revolutionary flexible grid and beautiful typography. Absolute freedom with no imposed styling.

One% CSS Grid

30+ Hand-Picked Resources and Tutorials for Web Developers 9

One% CSS Grid is a 12 column fluid CSS grid system. It’s been designed as a base for building responsive web layouts easily, quickly and with minimum effort. You don’t have to take care of resizing and rearanging your layout for each platform separatelly. One% CSS Grid will do all this for you. One% CSS Grid is a percentage based grid system, it means that it will perfectly adapt to all screen resolutions (mobile, tablets and big screens).

BASE

30+ Hand-Picked Resources and Tutorials for Web Developers 10

Built for all devices big and small, base has got you covered.

Tutorials and techniques

Developing a responsive, Retina-friendly site

30+ Hand-Picked Resources and Tutorials for Web Developers 11

Adaptive Blog Theme: From Photoshop to WordPress

30+ Hand-Picked Resources and Tutorials for Web Developers 12

Perfecting the Stylesheet: Common Errors Made by CSS Beginners

30+ Hand-Picked Resources and Tutorials for Web Developers 13

Build a Responsive, Filterable Portfolio, with CSS3 Twists

30+ Hand-Picked Resources and Tutorials for Web Developers 14

Building A Better Responsive Website

30+ Hand-Picked Resources and Tutorials for Web Developers 15

CSS Media Queries & Using Available Space

30+ Hand-Picked Resources and Tutorials for Web Developers 16

Convert a Menu to a Dropdown for Small Screens

30+ Hand-Picked Resources and Tutorials for Web Developers 17

How To Create A Responsive Navigation

30+ Hand-Picked Resources and Tutorials for Web Developers 18

Responsive Design in 3 Steps

30+ Hand-Picked Resources and Tutorials for Web Developers 19

How to Create a Responsive Website in About 15 Minutes

30+ Hand-Picked Resources and Tutorials for Web Developers 20

Scalable Navigation Patterns in Responsive Web Design

30+ Hand-Picked Resources and Tutorials for Web Developers 21

Tools

THE RESPONSIVE CALCULATOR

30+ Hand-Picked Resources and Tutorials for Web Developers 22

RWD Calculator is a simple calculator to help turn your PSD web template into the start of your responsive website.

Responsivepx

30+ Hand-Picked Resources and Tutorials for Web Developers 23

Enter the url to your site – local or online: both work – and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels. Then use that information in your media queries to create a responsive design.

VIEWPORT RESIZER

30+ Hand-Picked Resources and Tutorials for Web Developers 24

Viewport resizer is a browser-based tool to test any website’s responsiveness. Just save the bookmarklet, go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page.

Graphene

30+ Hand-Picked Resources and Tutorials for Web Developers 25

Graphene is a realtime dashboard & graphing toolkit based on D3 and Backbone. It offers a very aesthetic realtime dashboard that lives on top of Graphite.

Paperkit

30+ Hand-Picked Resources and Tutorials for Web Developers 26

With Paperkit you can easily generate online the exact type of graph paper (grid paper) that you need. Use the toolbar to adjust the settings. You have full control over spacing between grid lines, margin size, stroke color and width as well as paper size. A live preview will help you evaluate your design. There are five formats available: A4, A3, legal, tabloid and letter. You can use units that you are comfortable with (millimeters or inches).

Web Development Project Estimator

30+ Hand-Picked Resources and Tutorials for Web Developers 27

The Web Development Project Estimator is a simple tool that allows web designers and site developers to quickly and thoroughly estimate the time and materials required for a proposed web project.

SassMe

30+ Hand-Picked Resources and Tutorials for Web Developers 28

Visualize SASS color functions in real-time without compiling.

CSS BEAUTIFIER

30+ Hand-Picked Resources and Tutorials for Web Developers 29

It Beautifies your css automatically so that it is consistent and easy to read.

BROWSERHACKS

30+ Hand-Picked Resources and Tutorials for Web Developers 29

Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs.