sendesignz

Create a HTML5 and CSS3 Layout From Scratch

Web development is an area you need to keep up to date. Most of you all know HTML5 is creating a big change on the Internet. With HTML5 and css3 combination you make a good website. Today we are going to make HTML5 web layout with using some of the css3 features from scratch.

The Final Design

This is the Final layout you will get.

Structure



 

The Markup

<!doctype html>

<html>

<head>

<title>Sendesignz</title>

<link rel="stylesheet" href="/css/Style.css" type="text/css"/>

</head>

<body>

<div id="content">

<header>

<!--<h1>Your Logo comes Here</h1>-->

</header>

<nav id="navbg" >

<!--your Navigation-->

</nav>

<section id="banner">

<header >

<!--This is banner-->

</header>

</section>

<section>

<article>

<!--Main Contents-->

</article>

</section>

<footer id="myfooter">

<!--Your Footer-->

</footer>

</div>

</body>

</html>


HTML5 Introduce new elements

<header> -- The header element is used, such as the page title, logo or Banner.

<nav> - The nav element represents a section of a page that links to other pages or to parts within the page

<section>- The section element represents a large block of a document. It can contain all kinds of markup and sections can be nested inside each other.

<article> - The article element specifies independent, self-contained content.

<footer> - The footer element specifies the footer section of the HTML Document or section.

The Header

<header>

<h1>Your Logo comes Here</h1>

</header>

The Navigation.

This is our major Navigation section. We used <nav> tag and our well known unordered list item.

<nav id="navbg" >

<ul  class="navigation">

 

<li >

<a href="/">Services</a></li>

 

<li>

<a href="/">Solutions</a></li>

 

<li>

<a href="/">Company</a></li>

 

<li >

<a href="/">Home</a></li>

 

</ul>

</nav>

The Banner

<section id="banner">

<header>

This is banner

</header>

</section>

The Main Body

This is our main body where our all contents will be. In this example I have used list item. In side the <article> element you can use all your content group. The article element is used to denote an independent entry in a article, blog, discussion, etc.

The section define the main content section.

<section>

<article>

<ul  class="catagories">

 

<li id="cat1">

<h3>Service1</h3>

<p>Duis diam odio, lacinia nec elementum sit amet, faucibus eu nulla. Nulla hendrerit interdum turpis sed accumsan. Mauris aliquet sapien adipiscing enim rutrum ultrices. </p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed a dui at enim sodales semper id quis risus. </p>

</li>

 

<li id="cat2">

<h3>Service2</h3>

<p>Duis diam odio, lacinia nec elementum sit amet, faucibus eu nulla. Nulla hendrerit interdum turpis sed accumsan. Mauris aliquet sapien adipiscing enim rutrum ultrices. </p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed a dui at enim sodales semper id quis risus. </p>

</li>

 

<li id="cat3">

<h3>Service3</h3>

<p>Duis diam odio, lacinia nec elementum sit amet, faucibus eu nulla. Nulla hendrerit interdum turpis sed accumsan. Mauris aliquet sapien adipiscing enim rutrum ultrices. </p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed a dui at enim sodales semper id quis risus. </p>

</li>

 

<li id="cat4">

<h3>Service4</h3>

<p>Duis diam odio, lacinia nec elementum sit amet, faucibus eu nulla. Nulla hendrerit interdum turpis sed accumsan. Mauris aliquet sapien adipiscing enim rutrum ultrices. </p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed a dui at enim sodales semper id quis risus. </p>

</li>

 

</ul>

</article>

</section>

The Footer

In the footer element you can add links author details or copyright details. In this footer I used links.

<footer id="myfooter">

<ul class="footer">

 

<li>

<strong>Links</strong>

 

<ul class="footertext">

 

<li >

<a href="/">Home</a></li>

 

<li>

<a href="/">Company</a></li>

 

<li>

<a href="/">Services</a></li>

 

<li>

<a href="/">Solutions</a></li>

</ul>

</li>

 

<li>

<strong> Join in</strong>

 

<ul class="footertext">

 

<li >

<a href="/">Signup</a></li>

 

<li>

<a href="/">Promotion</a></li>

 

<li>

<a href="/">Fourms</a></li>

 

</ul>

</li>

 

<li>

<strong> Follow Us</strong>

<ul class="footertext">

 

<li >

<a href="/">RSS</a></li>

 

<li>

<a href="/">Twitter</a></li>

 

<li>

<a href="/">FaceBook</a></li>

 

<li>

<a href="/">Linkedin</a></li>

 

</ul>

</li>

</ul>

</footer>

Full Markup

<!doctype html>

<html>

<head>

<meta charset="utf-8" />

<title>Untitled Document</title>

<link rel="stylesheet" href="/css/Style.css" type="text/css"/>

</head>

<body>

<div id="content">

<header>

<h1>Your Logo comes Here</h1>

</header>

<nav id="navbg" >

<ul  class="navigation">

<li >

<a href="/">Services</a></li>

<li>

<a href="/">Solutions</a></li>

<li>

<a href="/">Company</a></li>

<li >

<a href="/">Home</a></li>

</ul>

</nav>

<section id="banner">

<header>

This is banner

</header>

</section>

<section>

<article>

<ul  class="catagories">

<li id="cat1">

<h3>Service1</h3>

<p>Duis diam odio, lacinia nec elementum sit amet, faucibus eu nulla. Nulla hendrerit interdum turpis sed accumsan. Mauris aliquet sapien adipiscing enim rutrum ultrices. </p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed a dui at enim sodales semper id quis risus. </p>

</li>

<li id="cat2">

<h3>Service2</h3>

<p>Duis diam odio, lacinia nec elementum sit amet, faucibus eu nulla. Nulla hendrerit interdum turpis sed accumsan. Mauris aliquet sapien adipiscing enim rutrum ultrices. </p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed a dui at enim sodales semper id quis risus. </p>

</li>

<li id="cat3">

<h3>Service3</h3>

<p>Duis diam odio, lacinia nec elementum sit amet, faucibus eu nulla. Nulla hendrerit interdum turpis sed accumsan. Mauris aliquet sapien adipiscing enim rutrum ultrices. </p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed a dui at enim sodales semper id quis risus. </p>

</li>

<li id="cat4">

<h3>Service4</h3>

<p>Duis diam odio, lacinia nec elementum sit amet, faucibus eu nulla. Nulla hendrerit interdum turpis sed accumsan. Mauris aliquet sapien adipiscing enim rutrum ultrices. </p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed a dui at enim sodales semper id quis risus. </p>

</li>

</ul>

</article>

</section>

<footer id="myfooter">

<ul class="footer">

<li>

<strong>Links</strong>

<ul class="footertext">

<li >

<a href="/">Home</a></li>

<li>

<a href="/">Company</a></li>

<li>

<a href="/">Services</a></li>

<li>

<a href="/">Solutions</a></li>

</ul>

</li>

<li>

<strong> Join in</strong>

<ul class="footertext">

<li >

<a href="/">Signup</a></li>

<li>

<a href="/">Promotion</a></li>

<li>

<a href="/">Fourms</a></li>

</ul>

</li>

<li>

<strong> Follow Us</strong>

<ul class="footertext">

<li >

<a href="/">RSS</a></li>

<li>

<a href="/">Twitter</a></li>

<li>

<a href="/">FaceBook</a></li>

<li>

<a href="/">Linkedin</a></li>

</ul>

</li>

</ul>

</footer>

</div>

</body>

</html>

Styling with CSS

The Basic CSS

body

{

font-family: "Lucida Grande", sans-serif;

font-size:14px;

margin:0;

background-color:#f1f1f1;

}

p,h1,h2,h3

{

margin-left:5px;

}

#content

{

width:1002px;

clear: both; margin: 0 auto;

 

}

Styling The Navigation

ul.navigation {

padding: 0;

margin: 0;

width: 100%;

}

 

ul.navigation li {

list-style-type: none;

display: block;

width: 100px;

line-height:35px;

margin:0 15px;

padding:0 5px;

float: right;

text-align: center;

background:#5f7e0a;

margin-top:-10px;

font-size:16px;

font-weight:bold;

}

 

ul.navigation li a {

display: block;

text-decoration: none;

color:#FFF;

}

 

ul.navigation li a:hover {

display: block;

width: 100px;

line-height:35px;

margin-top:-10px;

text-decoration: none;

}

 

#navbg

{

display:block;

background-color:#a2cb03;

height:35px;

}

CSS pseudo-elements:

The Advantage of the pseudo-elements is you can reduce the unnecessary html coding . There are 2 different pseudo- element :before and:after

.navigation li:before {

content:"";

display:block;

position:relative;

left:-15px;

width:0;

height:0;

border-width:5px 5px 5px 5px;

border-style:solid;

border-color: transparent #2e3f00 #2e3f00 transparent ;

}


In my previous tutorial How to Draw Speech Bubble and Shapes with CSS3 you can get a better understanding about this element.

Styling The Banner

#banner

{

display:block;

height:250px;

background-image:url(../Images/sendesignz.png)

}

Styling the Main Body

ul.catagories {

padding: 0;

margin:0;

width: 100%;

}

 

ul.catagories li {

list-style-type: none;

display: block;

width: 25%;

float: left;

text-align: left;

background:#5f7e0a;

}

 

/*Category Color Classes*/

li#cat1

{background-color:#ebfaaf;}

 

li#cat2

{background-color:#dff293;}

 

li#cat3

{background-color:#cbe36e;}

 

li#cat4

{background-color:#b8d34f;}

Styling The footer

Lastly, we are going styling the footer. This is also just a basic CSS styling with Unordered list Item. Most of this css are you already known.

#myfooter

{

display:block;

clear:both;

background-color:#2f390a;

height:120px;

padding:5px;

}

 

ul.footer {

padding: 0;

margin: 0;

list-style: none;

}

 

ul.footer li {

list-style-type: none;

display: block;

margin-right:50px;

float: left;

text-align: left;

line-height:30px;

color:#FFF;

}

ul.footertext {

padding: 0;

margin: 0;

list-style: none;

}

ul.footertext li {

text-align: left;

float:left;

clear:both;

}

ul.footertext li a {

text-decoration: none;

display: block;

width: auto;

color: #FFFFFF;

}

ul.footertext li a:hover {

width:auto;

color: #dff293;

}


Take a look at the Final Design

Finally, The page renders correctly in modern browsers only Internet Explorer will not support for HTML 5. So I've chosen to ignore Internet Explorer. I have tested in Chrome and FireFox.

Leave your comments

Post comment as a guest

0
terms and condition.

People in this conversation

  • Guest (Sheila)

    Thank you for this article, it was very helpful :) however, my finished result does not look like yours even though I followed the instructions exactly. my text blocks are displaying vertically instead of horizontally and the navigation looks quite different as there is no shadow to make the buttons look like they are going behind the bar. I would appreciate if anyone else could tell me if they experienced this problem.

    1 Like Short URL:
  • Guest (Jaylord)

    this one

    this one takes the cake. shokran

    1 Like Short URL:
  • Guest (Jaylord)

    this one take the cake. shokran

    2 Like Short URL:
  • This is a good post. If you can explain the development process step by step (i.e. How, and where to copy the css etc..). So that even beginners can make use of this interesting tutorial. Thanks.<br /><br /><br />--------------------------------------------------------------------<br />sampath - http://creativepresenters.com

    3 Like Short URL: