How to Create a Layout with Sidebars

Creating a Layout with Sidebars

We cover two type of layout so far one may be used for portfolio and other will be use full for the tutorial site today I gonna make a layout which in which user will be able to build blogger and word press type site and you also use that design for your personal web profiles.

First, let me clear the use of that design and what layout helps? When in web development we are creating a different type of site and design like e-commerce’s and portfolio and social site all of them need some specific design and these layouts help us at that point to pick a writing choice of design.

The second thing if you say there are lot of layout templates over the internet why not we use them so answer is that they are just PSD template and you can’t use them until you create them using HTML and CSS designs so I provide the simple and basic code for them so that a developer easily understand how to handle different element and how to make website responsive.

layout with sidebars
layout with sidebars

Above is the sample picture of web layout we gonna learn today. On the top left, there is a field where company logo its name and below the social icons appears.

On the top right here you can put a slider or a static picture.

Bellow this there is a menu bar where different menu items appear and after this here you see three boxes. First and last left one and right one is for link and categories’ and center is the main body for content and on the bottom here is footer for a site.

Now let’s code for it, we divide this time it in three main parts top mid and bottom and top will also divide in two parts logo and slider.

HTML:

Above is the basic HTML code for today layout now we have to apply CSS on all these elements and target them by using their classes and put some order of them which is the basic purpose of these layout tutorials.

CSS:

Live Demo of layout with sidebars