Responsive design is one of the most useful web techniques to appear during the past few years. A website layout can adapt to a device’s screen and look beautiful no matter what resolution is used. So here are 15 awesome tutorials for building and enhancing a responsive web design with HTML5 and CSS3.

Create a Flexible Folded Paper Effect With CSS3

In this tutorial we’ll learn to create a flexible (responsive) folded paper effect using CSS3 features like background gradients and box-shadows, which can give a cool-looking background to the content area of your website.

Responsive IMGs

Great responsive IMGs tutorial/article series.

Responsive CSS3 Slider Without Javascript

The actual slider is much like any JavaScript slider. It floats all of the content areas (articles) next to each other. And then hides the overflow. We then animate the margin of the inner div, so if we have 5 articles, moving the left-margin -100% would give us the second article.

How to Create a Responsive Navigation

One of the trickiest parts to be responsified on a website is “the Navigation”, this part is really important for the website accessibility, as this is one of the ways visitors jump over the web pages.

Fluid CSS3 Slideshow with Parallax Effect

In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides.

Build a Responsive, Filterable Portfolio, with CSS3 Twists

The inherent visual appeal of filterable portfolios (like the Tuts+ hub) has made them very popular. Today, we’ll be making one using straight-forward markup, CSS3 and a little bit of jQuery.

Enhancing your thumb galleries using CSS3 Transitions and Transforms

We’re going to look at using progressive enhancement techniques to improve our user’s experience, in this case, with image galleries. These enhancements aren’t essential to the functionality of our galleries, but they do show that we care about our users, offering them the best experience we can in their browser of choice.

Responsive Web Design – An Advanced Guide to HTML & CSS

Responsive and adaptive web design are closely related, and often transposed as one in the same. Responsive generally means to react quickly and positively to any change, while adaptive means to be easily modified for a new purpose or situation, such as change. With responsive design websites continually and fluidly change based on different factors, such as viewport width, while adaptive websites are built to a groups of preset factors. A combination of the two is ideal, providing the perfect formula for functional websites. Which term is used specifically doesn’t make a huge difference.

Build a lightbox for a responsive HTML5 touch interface

Lightbox widgets have been standard around the web since the original lightbox.js was released in 2005. A lightbox creates a modal dialog box for viewing large images, typically with ‘next’ and ‘previous’ buttons to navigate between slides.

How To Build A Pricing Table With CSS3 Animation

This tutorial is will teach you how to create this pricing table with the CSS scaling effects.

Accordion with CSS3

Using hidden inputs and labels, we will create a CSS-only accordion that will animate the content areas on opening and closing.

Seamless Responsive Photo Grid

Let’s say you have a bunch of images you want to display, and the goal is to get them edge-to-edge on the browser window with no gaps. Just because you think that would be cool. They are of all different sizes. You don’t care if they are resized, but they should maintain their aspect ratio.

Creating an HTML5 Responsive-Ready Contact Form with JavaScript Detection

HTML5 brings many great features that we can start using now, and many of them lie within forms and inputs. Some HTML5 enhancements often require fallbacks for our projects, through polyfills or fallbacks. Here we will show you how to create an HTML5 enhanced responsive-ready contact form with custom JavaScript feature detection.

Progressive And Responsive Navigation

Developing for the Web can be a difficult yet rewarding job. Given the number of browsers across the number of platforms, it can sometimes be a bit overwhelming. But if we start coding with a little forethought and apply the principles of progressive enhancement from the beginning and apply some responsive practices at the end, we can easily accommodate for less-capable browsers and reward those with modern browsers in both desktop and mobile environments.

Mobilizing websites with responsive design and HTML5 tutorial

This is a blog post series tutorial for adapting your existing websites for mobile devices without building a separate mobile site. It shows, with examples, how with little changes in your HTML, CSS and Javascript code you can deliver much nicer user experience for small screen and mobile devices. You can make existing HTML designs more mobile friendly with selective CSS loading and HTML5 tags. Selective CSS loading with CSS3 media queries allow you to change layout depending on the browser screen size: this kind of layout is called responsive design.