Michael John Burns has shown us how to convert a PSD file to working HTML/CSS. Now, in this tutorial he will teach you how to make it Responsive by using Media Queries. Media Queries will change the look of the website depending on the screen resolution of the device: desktop to a mobile resolution by tweaking the CSS for a variety of viewports. By the end of this media queries tutorial you will learn how to convert any website into a responsive website.
Make sure that you followed the previous tutorial where Michael John Burns converted a PSD file into a working HTML/CSS website. Before anything else he wants to point out that he needs to design how it will look based on his existing design for a different viewport, in this case for a mobile device that has a max-width of 320px. In the image above you can see the elements are the same but he styled it in a way that will suit the 320px width of a mobile version. For this tutorial Michael John Burns will not tackle the design process, he will jump into coding directly.
Comments
Be the first to write a comment
You must me logged in to write a comment.