Simple Website Layout Tutorial Using HTML 5 and CSS 3

AD

Simple Website Layout Tutorial Using HTML 5 and CSS 3

As most of us know HTML 5 has created a big buzz on internet and is sure to give Adobe a hard time. Apple believes that HTML5 is what will define the web and would love to see more developers adopt it instead of Flash.

Now that big video sites such as YouTube are testing support for HTML5 (Mashable).

HTML 5 is a breakthrough which will improve the sites from design view point, seo etc.

It when combined with css3 can make amazing web sites. For this you should check out this collection of all HTML 4 & 5 Tags reference sheet.

The Most prominent additions in HTML 5 are tags like <header>, <footer>, <aside>, <nav>, <audio> etc. HTML 5 will also include APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more . Site layout would be easily understandable and in code, tags are easy to understand as well Like the few tags i listed above clearly explains that :

  • <header> = Header (Head area of the site)
  • <nav> = Navigation (Menu/Navigation Area)
  • <footer> = Footer Area
  • <aside> = An area on a side (Side Bar)

Simple HTML 5 Tutorial

We will make a very very Simple web page with HTML 5 and styling with CSS 3. This is how the final result will look like :

Final HTML 5 Tutorial Result

Demo and Source:

View Demo

Download this Freebie

Simply enter your email address and the download link will be sent right to your inbox. If you did not get an email please check your junk folder.

Starting HTML Tutorial Code:

The Structure would be like this :

<!Doctype html>
<html lang="en">
<head>
<title>Your Page title</title>
</head>
<body>
<!-- Define Header -->
<header>
</header>
<!-- End Header -->
<!-- Define Navigation/Menu -->
<nav>
</nav>
<!-- End Navigation -->
<!-- Main content area -->
<section>
</section>
<!-- End of Main content area -->
<!-- Sidebar -->
<aside>
</aside>
<!-- End Sidebar -->
<!-- Footer -->
<footer></footer>
<!-- End of Footer -->
</body>
</html>

Defining Header Tag:

<header>
<h1>HTML 5 Tutorial Sample </h1>
</header>

Doctype and Html Lang Added. Thanks for the suggestion Mark for correcting validation.

Defining Navigation Area with Few links in it:

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Contact</a></li>
</ul>

Stylizing the Navigation with CSS3 for Rounded Corners:

nav {
width:77%;
height:40px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px; //for opera
background:#f3f3f3;
border:1px solid #cccccc;
position:absolute;
}
nav ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0 auto;
width:940px;
}
nav ul li {
float:left;
}
nav ul li a{
margin-right:20px;
display:block;
line-height:40px;
}

You can Also use px in Nav width instead of %. In this tutorial’s case you can add width=”960px” .

Then we Defined a DIV for the main content area and in it defined <section> and <article> area where the main content of the page is (the two paragraphs). You can see details in the source with comments for better understanding. The image inserted is also a simple div with css3 in it to show the image in background and rounded corners.

After that comes a very handy and prominent new addition in HTML 5. The <aside> tag which works like a sidebar without any extra css to move it on a side.

Defining Sidebar <aside>:

<aside>
<section>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Feedback</a></li>
<li><a href="#">Contact</a></li>
</ul>
</section>
</aside>

The UL (unordered list ) is repeated three times in the code.  Its just for giving an idea how sections will look like and links are dummy as well you can put blogrolls, categories etc. anything you like.

Defining the Footer:

<footer>
<section>Anything you want to put in footer goes here. </section>
</footer>

Stylizing the Footer:

footer{background:#666666;
border-top:1px solid #cccccc;
padding:10px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
border-radius:5px; // for Opera
text-align:center;
color:#ffffff;
}

What’s Covered so Far:

  • So far we have learned how to make simple HTML 5 Tags Layout
  • Understanding of the Tags and their behaviors
  • CSS3 for Rounded Corners and Text

Hope you like this Simple tutorials :)
Edited:  Doctype and html lang=”en” added for correcting validation. Thanks for the suggestion Mark
border-radius style added for rounded corners in Opera. Thanks for the Suggestion Aleksander

Share the Love:


Advertisement

Join the 98,750+ Subscribers

Subscribe and grab Free Ebook! Photoshop Crash Course!

We promise not to spam!

Further Related Readings

Ayaz Malik

I'm a coding geek, art lover, and a proud father. I'm running several online businesses; sometimes I take freelance projects to pay my coffee bills. you can find me here on twitter
All Articles by
52 Comments on “Simple Website Layout Tutorial Using HTML 5 and CSS 3” Join The Discussion!
  1. gulpari says:

    very nice and simple method to make a web page by using html and css niceand keep it up.

  2. GDevelop WebDesign says:

    HTML has come a long way. Nice to see, that it is possible now to create well-designed webpages with HTML only.

  3. Ayaz Malik says:

    Yup i agree with u GDevelop web design

  4. Inside the Webb says:

    Great tutorial! Really simple and easy to follow, the steps actually make sense and it’s an amazing outcome. Keep up the great content

  5. andy says:

    This is no doubt extremely worth taking a look at. But one thing I want to ask is as of now we has many template technologies like joomla or smarty than is it proper to spend our time behind making it via HTML?

  6. Mike says:

    Nice tutorial except that it fails validation. Try giving it a proper doctype and language declaration
    <!DOCTYPE html>
    <html lang=”en”>
    Also the 77% width on the nav is giving me a horizontal scrollbar, why not make it 960px?

  7. Aleksander says:

    add “border-radius” with no prefix to make it work in Opera also!

  8. Ayaz Malik says:

    Thanks Aleksander and Mark. tut edited !

  9. Adiian says:

    As most of us know HTML 5 has created a big buzz on internet and is sure to give Adobe a hard time

  10. Reginald Waldschmidt says:

    I’m going to bookmark this blogg on Identica to get more views for you.

    1. Ayaz Malik says:

      thank u so much Reginald :) really appreciate it

  11. Johnny cricket says:

    Good morning, This is a superb blog, and I can agree with what was created here. I will be back to look at the comments soon. Thanks

  12. Robin Madrid says:

    I’m happy !You seem very extatic about this topic and it shows. Looking forward to future posts.Cheers!

  13. Hermitbiker says:

    …. cool, a real great tutorial Ayaz…. I was actually checking out “devSnippets” and I saw a tut about “simple layout design” and wa-la, I’m here at “Designzzz”…. who’d of thunk it !! :) My list of favorite design sites just keeps getting longer !!
    I’m starting to realize that “everybody is everywhere” on all the design type sites…. you just gotta look long enough !! :)

  14. Simon Loveland says:

    This website did not validate and it has 14 errors so although it’s OK for getting a basic feel, it’s got a quite a few mistakes in it…

  15. Simon Loveland says:

    See all the mistakes for yourselves here at: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.designzzz.com%2Fhtml-5-tutorial.html

    If you’re going to learn html5 and css3 then you might as well learn it properly from the start…

  16. Richard says:

    Hi
    Thanks for the info.
    I had a problem viewing this as the source code in the zip file was missing tags.
    I thought it was some HTML% feature-when inserted code displayed fine (using IE with javascript snippet).
    Thanks

  17. Jason says:

    HTML5 is very powerful and using CSS3 with it makes creating rich web apps more easier and alot less time consuming.
    I think adobe will have some competition especialy around the animations and video embedding capabilities.

    Good post

  18. rifky says:

    thanks…i’ll try!!!!

  19. Dave Porter says:

    Mistake in the downloaded CSS:
    .bpage div {
    -webkit-column-count:2;
    -moz-column-count:2;
    -moz-column-gap:22px;
    -webkit-coulmn-gap:22px;
    }

    last line has column spelt coulmn
    regards, Dave

  20. John Del says:

    Thanks for posting this Ayaz! Consider this bookmarked! :)

  21. andrew says:

    Wow, i got the right plate to learn CCS and HTML, very like it. thanks

  22. Ben says:

    Hey its a very nice tutorial..
    I’ll try build my design on these stuff..
    I hope its more effective..

  23. Juegos says:

    Great tutorial. Greetings from Argentina my Friend

  24. stecy says:

    Great tutorial! Really simple and easy to follow, the steps actually make sense and it’s an amazing outcome. Keep up the great content

  25. smith says:

    Thanks for posting this Ayaz
    I’ll try build my design on these stuff..
    Keep sharing more and more …..

    Thanks

Comments are closed.

Copyrights © 2014 - Designzzz. All Rights Reserved