Simple Web Design Using HTML5 And CSS3(part-1)

Published on September 13, 2012

Today, Let’s see how to create simple web page design using HTML5 & CSS3. If compare to HTML4 with HTML5 on design side only thing we need to consider is semantics. That means ins tead of using all divs for creating layout design we can use some HTML 5 semantics like header,aside,nav,so on…

Demo

Download

But if your really want to tase the power of HTML5 you should consider using HTML5 JavaScript api’s like File API, Geo-locations,Web storage,etc… Read:DRAG N DROP MULTIFILE UPLOAD WITH HTML5-API

CSS3 is another amazing tool for creating nice look and feel. Before CSS3 people has to depended on image edition tools like Photoshop to create shapes like rounded corners, etc. But now we don’t need any other tool. We can use create most amazing page design using CSS3 it self. Another very good features css3 have is animations we can create very cool animation. For example look at Techumber.com logo the rotating logo based on CSS3 only. This tutorial has two parts you can see the second part here.

Create Folder Structure as below

Basic HTML5 Markup

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset=UTF-8" />
    <title>Site Title</title>
    <link rel="stylesheet" href="css/style.css" />
    <!–[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]–>
  </head>
  <body></body>
</html>

This minimal HTML5 code to start writing code for your web page. html5shiv is for supporting HTML5 in older IE browsers.

Adding layout

Now we will add layout to your web page. Now change the index.html as below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Site name</title>
    <link rel="stylesheet" href="css/style.css" />
    <!–[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]–>
  </head>
  <body>
    <div id="wrapper">
      <header>
        <h1>
          <a href="">SiteName</a>
        </h1>
      </header>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
      <div id="main">
        <article>
          <h2><a href="">This is post title</a></h2>
        </article>
        <article>
          <h2><a href="">This is post title</a></h2>
        </article>
        <article>
          <h2><a href="">This is post title</a></h2>
        </article>
        <article>
          <h2><a href="">This is post title</a></h2>
        </article>
      </div>
      <aside class="box">
        <section>
          <h2>Categories</h2>
        </section>
        <section>
          <h2>Who we are?</h2>
        </section>
        <section>
          <h2>Sponcers</h2>
        </section>
      </aside>
      <footer></footer>
    </div>
  </body>
</html>

Here we add header,footer,sidebar, main content area. The main content area will have articles so we put HTML5 articles. Sidebar will have Sections. Don’t confuse your self with article and section. We use article tags for blog post,news articles,etc.. Section element for representing generic section area on web page. You can have article inside sections. Have a look at image below.

Layout CSS

body {
  background: #fdfdfc;
  font: 12px/21px Arial, sans-serif;
  color: #1e1e1e;
  line-height: 20px;
  text-align: justify;
}
h1,
h2,
a {
  color: #0084d6;
  text-decoration: none;
}
/* wrapper
==================================*/
#wrapper {
  margin: 0 auto;
  width: 960px;
  border: 1px solid #aaa;
  overflow: hidden;
}
/*header
===================================*/
header {
  background: #676767;
  height: 100px;
}
header h1 {
  padding: 40px 0px 0px 12px;
}
header h1 a {
  color: #fff;
  text-decoration: none;
}
/*Navgation
====================================*/
nav {
  background: #676767;
  height: 30px;
}
nav ul li {
  border-top: 3px solid #676767;
  float: left;
  margin-left: 10px;
  height: 27px;
  line-height: 27px;
}
nav ul li:hover {
  background: #3f3f3f;
  border-top: 3px solid #0084d6;
  color: white;
}
nav ul li a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}
/*Main content
========================================*/
#main {
  width: 66%;
  float: left;
}
article {
  margin: 20px;
}
/*Sidebar
=========================================*/
aside {
  width: 27%;
  float: left;
  margin: 20px;
}
aside section {
  margin-bottom: 20px;
}
aside section h2 {
  border-bottom: 1px solid #ccc;
}
ul.cat li a:hover {
  text-decoration: underline;
}
/*Footer
===========================================*/
footer {
  background: #3f3f3f;
  border-top: 1px solid #484848;
  min-height: 50px;
  clear: both;
  color: #fff;
}
.copyright {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
}
.copyright a {
  color: #fff;
  text-decoration: underline;
}

Here we only apply normal CSS code to give proper shape to you web page. We didn’t use any CSS3 properties yet. If you see demo it won’t be that good looking one. In next part of this tutorial i will show you how to beautify this same markup using css3. Read the next part at Simple Web Design Using HTML5 And CSS3(part-2)