How to Design a Simple HTML CSS Custom layout

Simple Blog HTML CSS Custom layout

On the internet, we use many websites and browse dozens of sites every day but have you notice these entire sites have different layouts. And when we open these sites on different platforms their interface is changed according to our device like a tablet, mobile, desktop, PC, laptop etc.

So today in that post we know how to create a simple layout for a web page it’s a very simple and basic layout which is under in use of many sites on the internet.

HTML CSS Layout image
HTML CSS Layout image

As in above picture, it’s a simple web page layout and we easily build using HTML and CSS. We develop those layouts using simple div tag elements which we are cover in our previous post.

CSS Style Sheet Properties

So let’s start for this first to understand the basic architecture of the layout and how to place div’s in that layout we take help of a picture.

HTML Layout Alignment
HTML Layout Alignment

As in picture on the top, it’s a div and class=”header”

Below the header div there is a container div which has two more sub div’s one is on the left and other in on write and we use float: left to place both of them side by side.

 

And on the bottom, there is footer div which has class=”footer”. And all these tags are placed inside the main div tag having class=”main”.

That’s it for this layout in HTML now to stylize them we use CSS and target this div using a class as a selector which is main, header, footer, left and right.

 

Understanding Div in HTML Layout
Understanding Div in HTML Layout

 View Live Demo for HTML Custom Layout

Advanced HTML Custom Layout

In the previous section, I showed how to create a simple web page layout it’s for a simple blogger or word press site where you have to upload post day by day and need a header where you show the menu and logo of the site.

Today we learn about another web layout which is suitable for online CV or resume and portfolio and also you can use it as you about us page where all of your introduction, qualification or address is placed.

So the above picture shows the basic layout of the web page. Now start how to build it. If you on the top of that page it’s a circle which is used for the picture of the user or whom for which you are designing that page.

And bellow that picture there is the name of the user and nickname also.

Bellow this there are 6 fields the top one is for introduction of the user in plain language the first on left is for contact info bellow this is for skill and after this a language box where you put the names of the languages which you will understand.

On the right after introduction field, there is Work experience field and below this Education field.

On the bottom, there are two boxes one for social icons and links and other you can you for to put a download CV button.

Now let’s start coding for it.

We divide the whole layout in three parts top mid and bottom top and the bottom has 100% width and the mid is slightly small then top and bottom.

First, we create a top and then and intro field using div and gave them some class names.

Then to write the other info we divide this into two parts right and left right part to contain contact, skills and languages and the right part contain experience and education fields.

And on the bottom, there is a download button and on the last div, there are social icons like Facebook and some others.

And to stylize it and put all the divs in their proper location we use CSS and target all the elements one by one using their class names.

View Live Demo Of HTML, CSS Advanced layout