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!

Further Related Readings

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
38 Comments on “How to Code a Clean Minimalist HTML CSS Website Layout” Join The Discussion!
  1. Smashing Hub says:

    excellent stuff, keep it up

  2. gcarterIT says:

    Nice tutorial, but I would have emphasized, to beginners in particular, using duplicate id names is a bad coding practice.

    1. Ayaz Malik says:

      Hello GcarterIT , yes you are right that is why i mentioned it in the end notes. I just kept the code neat and easy for beginners. and thx :)

  3. Jeff Sawyer says:

    Not bad and a good starting place for people. It should at least have an h1 tag if not h2 and h3. Showing off the uses of other tags would be good as well, but this is a good way to show beginners how to build a simple site.

  4. Mars says:

    this is a very nice tutorial to follow, thanks for sharing your talent

  5. Tayyab says:

    Very Nice tutorial Ayaz.
    I really appreciate the idea to keep it simple and easy for the beginners.
    I hope this article is just the start and you’ll keep making more tutorials like this. Good job. :)

  6. atxatx says:

    It’s not valid if you use the same id for several tags.

    Maybe you should use class instead of the id.

  7. Ayaz Malik says:

    Hello Atxatx, i have already mentioned that in the end notes that it can be make valid by using class instead of same id. cheers

  8. Gonzo the Great says:

    Hi,

    Although you mention it in your end notes, your solution:
    “So instead of making CSS with different names, I made one common and used it 4 times.” is not very brilliant too .. I hope you meant you will not have to rename all your id’s but just make a new class called ‘blocks’ to tackle this problem?

    If you make a tutorial then at least make it valide and W3C compliant, so everybody (especially beginners) can learn how to code correctly? Or is it just my strange opinion?

  9. Ayaz Malik says:

    @Gonzo, yes you are right, well it was my first coding tut :D . anyways fixed ! thanks for the update

  10. Gonzo the Great says:

    Hi Ayaz,

    Cheers, man! I think it’s better to ‘learn’ peeps the right stuff, because there is already enough invalide and dirty code on the interwebs ;-P

    Wish you lots of luck when you’ll write your second tut, looking forward to that. Have a great day, Cheers & Ciao ..

  11. Ayaz Malik says:

    Thanks Gonzo :) . you will see another one next week hopefully! You to have a great day !

  12. michael says:

    thanks for the tutorial! i am planning to use it to create my site–however, i’d like to have two elements on top (the logo on the left and an additional image and text on the right). should i just add a floating box? thanks for your help!

  13. Ayaz Malik says:

    Hello Michael, Yes you can change the auto in margins to 0 as : margin:15px 0; and add a float : left; … then make a new div and set it up as u like :) it will do the trick ! hope that helps

  14. forbes2000 says:

    thanks for your help Ayaz! I’m still trying to get my head around CSS! :) so, just to be clear, I add a “float” element to the left div for the logo and then an entirely new div that also has “float” for the right box? thanks so much!!

  15. forbes2000 says:

    Here’s the page where I tried it (and made a mess :) any help you can offer would be greatly appreciated!! http://passengerproductions.com/test/

  16. Ayaz Malik says:

    Hello Forbes2000, k what we are missing here is a primary div which will contain both , the logo and the social bookmarks div.
    It would be like this :

    <div class="top-container">
    <div id="logo"><img src="images/logo.png" alt="logo"></div>
    <div id="social">Holder</div>
    </div>
    

    Css of top-container would only have : width:100%; overflow:hidden;
    or you can define exact height and width in pixels.
    That shall fix it

  17. forbes2000 says:

    you’re amazing–thank you!!

    1. Ayaz Malik says:

      Thank you so much Forbes2000, Glad to be helpful :)

  18. forbes2000 says:

    Sorry to bug you again Ayaz, but I’m having trouble :). I tried what you suggested, but unfortunately it obscured the logo… here’s what I tried, and it seemed to work, except in IE. Any suggestions? http://siouxperman.com/beta/

    1. Ayaz Malik says:

      Hello Forbes2000, everything seems to work fine for me in IE, which version are u using ? also i checked the code there doesn’t seems to be my last suggested code implement in the last comment. what area you are having issues in ?

  19. forbes2000 says:

    Hey Ayaz, here’s what happens if I try your suggestion: http://passengerproductions.com/test/ (the top left logo isn’t entirely visible… and if I change the top-container to overflow:visible, everything gets smashed up to the top). Any suggestions?

  20. Ayaz Malik says:

    @forbes2000, as i mentioned in teh coded comment u can replace the overflow hidden with height, forexample : height:100px;
    that will fix it

  21. forbes2000 says:

    Btw, the http://siouxperman.com/beta/ site shows the top right black logo under the nav bar in IE 7. Maybe I should just ignore it and hope nobody is still using IE 7?

    1. Ayaz Malik says:

      Try adding display:inline; in that element’s css it might fix that area.

  22. forbes2000 says:

    Great! I took your advice by adding the height tag and now everything looks great! Thanks again for your quick and helpful help!!

  23. roger says:

    simple to follow and properly explained. Thanks

    1. Ayaz Malik says:

      @Roger, Glad to hear that. thank you

  24. Kiriyama says:

    nice tutorial, you have a problem with your css though – you use “//” twice when it should be “*/” as they are comments not programming code :P#

    couldnt get the boxes to line up but i managed to figure it out eventually lol

    thanks for the tutorial though, overall was nice and easy to follow and i have a much better understanding of css now :D

  25. Kiriyama says:

    *Edit – apologies dude, just went back through your tutorial must have been me adding comments thats done the “//” the code is spot on… sowwiee

Comments are closed.

Copyrights © 2014 - Designzzz. All Rights Reserved