How to Code a Clean Minimalist HTML CSS Website Layout

AD

A long time ago, one of our authors named Jillz created a tutorial about “Designing a Minimalist Website Layout in Photoshop“. I used that exact PSD file and created an HTML CSS Layout for our readers – so that you can learn some coding lessons or download it and use it as your own site (naturally free of charge).

As you might have guessed, we are going to start a step by step tutorial for creating a Minimalist HTML CSS Layout.

This tutorial doesn’t require slicing in Photoshop, because it will cover only the most basic topics and is for beginners.

To start, you will need your favorite HTML/Code editor like Dreamweaver or Notepad ++ and PSD of this Tutorial.

Final Version Demos

Minimalist html css web template

Live Demo

{filelink=15}

Lets Get Started

Let’s start by making a new folder and a directory structure as mentioned below within this folder.

1. Create a Folder called “Images”, which will contain all our images

2. Create a Folder called “styles”, which will contain style.css – or if you prefer to move it to the images folder, feel free to do so.

3. Open a blank/new index.html  and save it in this primary folder.

4. Open a blank/new css file, name it as style.css and save it in styles folder.

Head Area Code

Now I am going to show you the obvious HTML head area of index.html with the attached CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Designzzz's Minimalist Website Layout</title>
    <link rel="stylesheet" type="text/css" href="styles/style.css" media="screen" />
 </head>

Moving Forward to Body

I am defining the width of the web page as 960px and the main container div would be called ‘frame’. This is how our body structure will look like :

<body>
<div id="frame">

<!-- All the Body Area Code -->

</div>
</body>

CSS for Body and Frame Container

html, * {padding:0; margin:0;} //defining 0 margin and padding for all elements

body {background:url(../images/bg.jpg) no-repeat top center #ada6a0; font-family:Arial,Verdana,Helvetica,sans-serif; font-size:12px;}

a {color:#000;text-decoration:none;}

a:hover{text-decoration:underline;} 

#frame {width:960px; margin:0 auto;} //Frame Container's CSS

This chunk of CSS defines the basic element styling, a background image to the page and frame’s width and margins.

Logo, Navigation and Search Area

Header Area

As you can see in the demo, the top center area is defined for logo, below lies the navigation and the search box. This is the HTML for these sections:

<!-- Logo Area Starts -->
<div id="logo">
  <img src="images/logo.png" alt="logo" />
</div>
<!-- Logo Area Ends-->
<!-- Navigation Starts-->
<div class="nav">
<ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Portfolio</a></li>
   <li><a href="#">Blog</a></li>
   <li><a href="#">Contact</a></li>
</ul>
<!-- Navigation Ends -->
<!-- Search Area Starts -->
<div id="search">
   <input type="text" id="s" name="s" onclick="this.value='';" value="Site Search" />
   <input type="image" class="btn" id="searchsubmit" value="Search" src="images/search.jpg" name="" />
</div>
<!-- Search Area Ends -->
</div> <!-- Navigation Div Ends -->

CSS for this Area

/* Logo CSS Starts */
  #logo {width:200px; height:80px; margin:15px auto;}
/* Logo CSS ENDS*/

/* Navigation and Search  CSS Starts*/

 .nav {width:100%;height:45px;background:#fff; -moz-box-shadow:0 0 8px #666; -webkit-box-shadow:0 0 8px #666; box-shadow:0 0 8px #666;}
  .nav ul {list-style:none;}
  .nav ul li {float:left;font-size:16px; margin:13px 22px;}
  .nav div {float:right;}
  .nav p {margin:15px; float:left;}
  #search {float:right;border:none;}

  #search input {
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  border: 1px solid #CCCCCC;
  float: left;
  padding: 8px;
  width: 285px;
  margin:5px;
  }
  #search input.btn {
  background: none repeat scroll 0 0 transparent;
  border: 0 none;
  margin: 10px 0 0 -40px;
  padding: 0;
  width: auto;
  }
/* Navigation and Search CSS Ends */

Its pretty much self explanatory.

Featured Gallery Area

gallery area

This would be the area where featured images will rotate or have a previous/next button. Since we are only working on the design view, we will not work on any jQuery or flash for this area, thus only show it via a static image.

Featured Gallery Area HTML

<div id="gallery">
   <img src="images/gallery.jpg" alt="gallery" />
</div>

Featured Gallery Area CSS

/* Gallery Area */
#gallery { //css for gallery div
width:960px;
height:370px;
margin:20px auto;
text-align:center;
background:#fff; -moz-box-shadow:0 0 8px #666;
-webkit-box-shadow:0 0 8px #666;
box-shadow:0 0 8px #666;
}
#gallery img {padding:10px 0;} //css for img with in the gallery

Moving to Content Area 4 Blocks

content area

There are 4 blocks which represents content in a beautiful manner. Since all four of these blocks are visually the same, they will use one common CSS. Below i will show code of 1 block.

HTML for Blocks

<div class="blocks">
   <img src="images/thumb1.jpg" alt="thumb" />
<p>Lorem ipsum dolor sit amet, uer uer Duis autem vel eum iriure Duis autemvel eum iriure dolor. ipsum dolor sit amet, consectetuer Duis autem vel Lorem ipsum Lorem ipsum dolor sit amet, uer uer Duis autem vel eum iriure Duis autemvel eum iriure dolor. ipsum dolor sit amet, consectetuer </p>
  <p><a href="#" class="more">more...</a></p>
</div>

CSS for Blocks

/* Content Blocks */
.blocks {width:200px;
float:left;
margin-right:26px;
padding:10px;
height:350px;
background:#fff;
-moz-box-shadow:0 0 8px #666;
-webkit-box-shadow:0 0 8px #666;
box-shadow:0 0 8px #666;
text-align:justify;
margin-bottom:15px;
}
.blocks img {margin-bottom:5px;}
.more {font-size:12px; float:right; color:#000; margin-top:7px; text-decoration:underline;}

Moving to Welcome Text and Description Box

Description Area

This area will contain 4 small thumbnails and some welcome or introduction message as a text.

HTML for Description Box

<div id="desc-box">
<div class="thumbnails-div"><img src="images/small-thumb1.jpg" alt="smallthumb" />
   <img src="images/small-thumb2.jpg" alt="smallthumb" />
   <img src="images/small-thumb1.jpg" alt="smallthumb" />
   <img src="images/small-thumb2.jpg" alt="smallthumb" /></div>
<div class="description"><h3>Welcome to the Site.</h3>
<p>	Lorem ipsum dolor sit amet, uer uer Duis autem vel eum iriure Duis autemvel eum iriure dolor. ipsum dolor sit amet, consectetuer Duis autem vel Lorem ipsum Lorem ipsum dolor sit amet, uer uer Duis autem vel eum iriure Duis autemvel eum iriure dolor. ipsum dolor sit amet, consectetuer  Lorem ipsum dolor sit amet, uer uer Duis autem vel eum iriure Duis autemvel eum iriure dolor. ipsum dolor sit amet, consectetuer Duis autem vel Lorem ipsum Lorem ipsum dolor sit amet, uer uer Duis autem vel eum iriure Duis autemvel eum iriure dolor. ipsum dolor sit amet, consectetuer 	Lorem ipsum dolor sit amet, uer uer Duis autem vel eum iriure Duis autemvel eum iriure dolor. ipsum dolor sit amet, sectetuer.</p><p><a href="#" class="more">more...</a></p></div>
</div>

CSS For Description Box

/* Welcome Text Box */
#desc-box {
height:160px;
margin:10px auto;
text-align:center;
background:#fff;
-moz-box-shadow:0 0 8px #666;
-webkit-box-shadow:0 0 8px #666;
box-shadow:0 0 8px #666;
overflow:hidden;
padding:10px;
}
.thumbnails-div {
width:200px;
float:left;
}
.thumbnails-div img {
margin:4px;
}
.description {
float:right;
width:710px;
padding:10px;
text-align:justify;
}
.description h3{margin:5px 0;}

Footer Area

footer area

Our Navigation area and footer area are alike, so I made a common CSS for both of them.  See the code below:

HTML For Footer

<div class="nav">
<p>
  <a href="#">Terms of Service</a>
</p>
<p>
  <a href="#">Privacy Policy</a>
</p>
<p>© 2009 <a href="http://www.designzzz.com/">Designzzz</a> </p>
<div>
<ul>
  <li><a href="#">Home</a></li>
    <li><a href="#">Portfolio</a></li>
      <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
        </ul>
</div>
</div>
Live Demo

{filelink=15}

Some End Notes

1. This tutorial is intended for beginners and that is why I have neglected the use of common CSS classes for multiple divs etc., such as the CSS used for shadows of all the divs that can be make into one style and can be applied to all the divs with their id CSS.

2. If you get errors on Validation because of possible repetitions of IDs in div, don’t worry about it. It is because we have used same div ids for alike divs like blocks. So instead of making CSS with different names, I made one common and used it 4 times. (FIXED)

3. Feel free to use this layout in your personal or commercial layouts if you want. A link back to us will be appreciated though .

4. Waiting for your suggestions and critique in comments!

Advertisement

Related Stuff!

Published on: February 7, 2011,

This post is in: Designs, Tutorials

Author

Ayaz Malik

Artist by soul, programmer by profession. I am a designer, developer and Publisher. Running a few blogs and publishing a lot of interesting stuff. you can find me here on twitter
All Articles by

Leave a Response