We are going to help you hone your skills in manipulating those codes to respond at will when displayed on different devices. And to do this, we are featuring Responsive Web Design Tutorials found online. This list is not meant to be an exhaustive one but it will get you started on understanding the basics of designing an adaptive website that will cater to all sorts of screen sizes.

This is another tutorial that starts from the basics but breaks everything down bit by bit, including the OS and browsers you are turning your website responsive for as well as the elements that are affected when the website is viewed from different devices. The author also featured some useful WordPress and jQuery plugins to help make your work far easier.

This tutorial, will explain how you can produce a responsive web design with meta tags, HTML structure and the all-important media queries. You need some knowledge of CSS to understand it.

If text-filled tutorials are not viable options, try this video tutorial instead. It is still rather technical but if it makes you feel better, you don’t have to do much reading. It’s about 25 minutes long and the video-maker actually fast-fowarded through the parts where he codes, then goes back to explain what the codes do.

This tutorial talks about the lessons the author learned from a working on a large-scale responsive web design project. Read his ‘walkthrough’ about how to create templates that are easier to configure for user-friendly and responsive results. It is a great look behind the scenes in understanding how to design interfaces in the best way for desktop, tablet and mobile views.

And another excellent tutorial to make you learn how to design a cross-browser responsive website template with HTML5 and CSS3. It’s a step-by-step approach and there are demos of a web design before and after the media queries were implemented to better appreciate the impact of media queries.

Learn how to use adaptive or flexible layouts with CSS media queries. Just follow the exercise to learn to adapt your design to double-column view or single-column view as well as to prepare the design for the iPhone and iPad.

Here’s a tutorial that used the build-from-mobile-first approach. This technique specifies a larger size for the images to use on larger screen resolutions, minus image requests as well as UA sniffing.

This tutorial teaches you how to create a horizontal layout with several scrollable content panels. Using The Origin of Species as the sample text, each chapter of the book is separated in columns placed next to each other in full-browser mode but when shrunk down to small enough, the layout changes to a fully vertical scrolling ‘book’.

This tutorial will show you how to convert a menu to a drop-down list when the browser window is narrow, or when you are on a mobile device. The row of links in the upper right corner of the page gets converted into a drop-down menu to save space without sacrificing navigation options.

This is great for websites that feature thumbnails in a gallery. As the browser window is resized, the layout is changed to occupy between two columns (smaller screen sizes) and five (maximum) columns.

Skeleton is an awesome framework to build responsive websites with it. This tutorial takes you in a step-by-step guide on how to use Skeleton framework to build awesome responsive designs. You will be stunned to see how easy it is to implement.

If you haven’t been properly introduced to Less, then do check out our own Less CSS tutorial first to get a taste of Less. In this tutorial, the Less framework was used to let you see clearly the effects of media queries.

Learn how to create a simple and flexible accordion layout, with fade-in transitions and adjustable widths based on screen size and resolutions.

This tutorial deals with the scaling of videos as your browser window is resized. It’s essentially a CSS trick and there’s a demo to see the trick at work in the tutorial itself.

This tutorial makes you learn the trick of making fixed-width images change their size and spacing in order to line up with the accompanying text, no matter how the browser window is resized.