- Created on Thursday, 10 March 2011 02:00
- Last Updated on Saturday, 14 December 2013 11:33
- Written by Terrence
- Hits: 11687
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.
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.
This is our major Navigation section. We used <nav> tag and our well known unordered list item.
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.
In the footer element you can add links author details or copyright details. In this footer I used links.
Styling with CSS
The Basic CSS
Styling The Navigation
The Advantage of the pseudo-elements is you can reduce the unnecessary html coding . There are 2 different pseudo- element :before and:after
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
Styling the Main Body
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.
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.