Creating a Responsive Website from Scratch for Absolute Beginners

In this article we will create a basic structure or the backbone on building responsive design which is the most important thing in every programming languages is to know the basic, though, we’re not only building responsive website here, we also create our own basic responsive framework, sounds interesting right? Yes it does.

Over the past year responsive design has become a hot topic in web design or even in web app community, this article is not exhaustive, and we won’t go deep into each technique, but you’ll have enough links and knowledge to explore further by yourself.


Click herehere to view demo page.

Aim of this tutorial

  • Create responsive design from scratch
  • Basic HTML5 DIV structure
  • Basic CSS responsive framework



Below is the code for our HTML structure, with Header, Main Content(Left), Sidebar(Right) and Footer for our copyright.

CSS Code

Contains our basic CSS responsive framework and some of our demo styles.

Using normal code the most time consuming is creating and adding DIV right? Don’t get me wrong, it became fewer burdens when some expert introduces griding system and we’re going to use the same idea here creating our grid.

Our site becomes responsive and made possible by using @media selector, this selector introduces in CSS3.

If you want to target other screen resolution out there like all iOS devices or even some Android Phone and Tab

That’s it happy coding 😉

by Ryan Sutana