Create a Responsive Website Page in about 10 Minutes

The buzz around responsive websites has been going on for several months now, and a lot of websites are already responsive, or underway. You know what that means? Today I will teach you how to create a responsive website.

If you follow 1WD on Facebook or Twitter, then you already know that we’re already preparing for an explosive design, which includes being responsive. Watch out for it!

Tutorial Level: Beginner

Skills Required: Basic CSS, Basic HTML

Completion Time: Approximately 10 minutes

By the end of this quick tutorial about responsive design, you will already be on your way to web stardom, and by that I mean you’ll be ready to convert and create responsive websites!

Are you ready? Show me your war faces! Roaaar!

Responsive Website Tutorial

I promised that it will only take about 10 minutes to create a responsive website, and I will hold true to my words. Only, we shall start slow and small. We will start by creating a simple single-page website. Cool? Okay!

Files we will create:

• Index.html – this is where we will place almost everything!
• Style.css – for our ultra awesome styling
• Framework – I will list 5 frameworks that you can use to create a responsive website, but in this tutorial I will only create one. But don’t worry, there won’t be too much difference!
  • 1140 Grid - we will be using 1140 Grid for this tutorial. Why? Because it’s the simplest. It does the job without extra components. 
  • Twitter Bootstrap - one of our contributors, Ranjith Kumar, has written a couple of Twitter Bootstrap Tutorials which you will definitely find helpful.
  • Less Framework 
  • Adapt.js

Before moving further, please download 1140 Grid and create a folder for this tutorial and unpack the contents there.