A common duty of a front end developer is to take designs and translate them to code. When you are learning web application development, it can be intimidating to even know where to begin. One technique I use is called blocking.

Before you do anything in code, you have to create a plan for developing the site. Planning correctly will prevent you from having to rework code later and will ensure that you build the site to look as close to the original design. Especially when you build for all different environments (desktop, tablet, phone). I prefer to think of it as “mobile inclusive” instead of “mobile first” since its of equal importance.

I prefer to think of it as “mobile inclusive” instead of “mobile first” since its of equal importance.

Think of a house being built. When you pass by it in its early stages, you see framing and the base structure. Over time, you will see it become a beautiful home.

Take this design…

design-sm

The important thing to remember is that every design can, and should, be broken into its most simple components (shapes and space assignments). If you block items out, you can build the base components out before you worry about the design specifics. If you use a “mobile inclusive” strategy, this is a huge benefit because everything is strategically designed to fit into the responsive grid.

blocking-sm

As you can see, the design is broken into blocks. The shapes do not have to be perfect, just representative of the approximate location of the areas of content.

For the examples below, I am using Twitter Bootstrap for all the layout. It is much easier to work with a framework in order to gain control over the responsive grid. Trust me, you dont want to mess with media queries on your own. Learn what they are, but use a framework to manage it with classes.

Taking the header area as an example, it can be developed in isolation from the rest of the page. Adding the “block” class to all blocked elements gives us the ability to quickly add a border (border: 2px solid #000000) or background color (background-color: #000000). When you have completed blocking and are ready to add content, you can then just change the blocking css and remove the property.

.block {
  border: 2px solid #000000;
}

<div class="container-fluid topHeader">
   <header class="container block">
   </header>
</div>

Here is a sample of the middle area blocked. Notice, if there is no content in your html, no heights will be assigned to the areas so they appear as flat lines if you use borders or nothing if you use background colors (because of the box model).

<div class="container">

<!-- LEFT COLUMN -->
  <div class="col-sm-4 leftColumn">
   <div class="col-sm-12 block"></div>
   <!-- Features -->
   <div class="col-sm-12">
     <h3>Featured</h3>
     <img src="http://placehold.it/219x109">
     <p>Consectetur vitae Donec ligula lectus, consectetur vitae vulputate non, rhoncus lacinia risus. </p>
   </div>
   <!-- End Features -->
   <div class="col-sm-12 block"></div>
   <div class="col-sm-12 block"></div>
  </div>
<!-- END LEFT COLUMN -->

<!-- RIGHT COLUMN -->
  <div class="col-sm-8 rightColumn">
   <div class="col-sm-12 block"></div>
   <div class="col-sm-12 block"></div>
  </div>
<!-- END RIGHT COLUMN -->

</div>

Once your blocking is complete, you take each blocked row and add CSS and images to style. This is where you begin to see the house begin to take shape and eventually become that beautiful design.

Here is the full code for the page with the header and an area of content:

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Blocking</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
    </style>
</head>

<body>
    <div class="container-fluid topHeader">
        <header class="container">
            <div>
                <span class="pull-left"><img src="/img/logo.gif"></span>
                <span class="pull-right">
                <ul id="connection">
                    <li class="item1"></li>
                    <li class="item2"></li>
                    <li class="item3"></li>
                    <li class="item4"></li>
                </ul>
            </span>
            </div>

            <h1>Page Template Full Width<h1>

        </header>
    </div>

    <div class="container border">

    <!-- LEFT COLUMN -->
        <div class="col-sm-4 leftColumn">

            <div class="col-sm-12 block"></div>

            <!-- Features -->
            <div class="col-sm-12">
                <h3>Featured</h3>
                <img src="http://placehold.it/219x109">
                <p>Consectetur vitae Donec ligula lectus, consectetur vitae vulputate non, rhoncus lacinia risus. Phasellus risus nunc, porttitor</p>
            </div>
            <!-- End Features -->

            <div class="col-sm-12 block"></div>

            <div class="col-sm-12 block"></div>

        </div>
    <!-- END LEFT COLUMN -->

        <div class="col-sm-8 rightColumn">
            <div class="col-sm-12 block"></div>
            <div class="col-sm-12 block"></div>
        </div>

    </div>

    <div class="container-fluid bottomFooterTop">
        <div class="container border">sdf</div>
    </div>
    <div class="container-fluid bottomFooterMid">
        <div class="container border">sdf</div>
    </div>
    <div class="container-fluid bottomFooterBottom border">
        <div class="container">dff</div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>

</html>

Here is the completed project.