PSD to Responsive Website Tutorial

Overview

Yo ninjas, in this PSD to responsive website tutorial series, we'll be creating a 1-page responsive web page from a PSD file. We'll cover how to construct the HTML, then how to style for desktop, tablets and mobiles using media queries. Finally we'll be using the picture element to make our banner image responsive, as well as creating a mobile drop-down menu with JavaScript.

Syllabus

PSD to Responsive Website Tutorial #1 - Introduction.
PSD to Responsive Website Tutorial #2 - Slicing Images in Photoshop.
PSD to Responsive Website Tutorial #3 - Creating A Mobile PSD Mockup.
PSD to Responsive Website Tutorial #4 - Header HTML.
PSD to Responsive Website Tutorial #5 - Creating The Main Content HTML.
PSD to Responsive Website Tutorial #6 - Header CSS.
PSD to Responsive Website Tutorial #7 - Styling the Main Content.
PSD to Responsive Website Tutorial #8 - Footer CSS.
PSD to Responsive Website Tutorial #9 - Tablet Styles.
PSD to Responsive Website Tutorial #10 - Mobile Styles.
PSD to Responsive Website Tutorial #11 - Making a Mobile Menu.
PSD to Responsive Website Tutorial #12 - The Picture Element.