Today I am going to show you how to make your own HTML5 and CSS3 website !

First of all let me show you its final look

Final Look

Freakify image

 

DEMO                DOWNLOAD

 

Structure


html5sturecture image

What we are upto?

We will make

  1. index.html (Containing the site HTML 5 Mark up)
  2. style.css (Containing the styles in CSS3)
  3. /images/ Folder (For certain images if required)

Basic HTML Mark Up:

Below is the HTML5 basic mark up put it in index.html and start your work.

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <title>Freakify.com | HTML5 Template | By Ahmad Awais</title>
  5.         <link rel=“stylesheet” href=“style.css” type=“text/css”/>
  6.     </head>
  7. <body>
  8.     <div id=“content”>
  9.         <header>
  10.             <!–<h1>Your Logo comes Here</h1>–>
  11.         </header>
  12.         
  13.         <nav id=“navbg” >
  14.             <!–your Navigation–>
  15.         </nav>
  16.         
  17.         <section id=“banner”>
  18.             <header >
  19.             <!–This is banner–>
  20.             </header>
  21.         </section>
  22.         
  23.         <section>
  24.             <article>
  25.             <!–Main Contents–>
  26.             </article>
  27.         </section>
  28.     <footer id=“myfooter”>
  29.     <!–Your Footer–>
  30.     </footer>
  31.     </div>
  32. </body>
  33. </html>
HTML5 Introduces some new elements here are the explanations 

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

<nav> - The nav element is for the menu to link with other pages

<section>- It represents a large block, that might be of custom width inside the code

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

<footer> - The footer element is of-course the ending footer of some HTML doc.

 

Let’s start

Now let’s start editing the elements I explained

Header

  1. <header>
  2. <h1>Your Logo comes Here</h1>
  3. </header>

Navigation

The <nav> part to come here

  1. <nav id=“navbg” >
  2. <ul  class=“navigation”>
  3.  
  4. <li >
  5. <a href=“/”>Services</a></li>
  6.  
  7. <li>
  8. <a href=“/”>Solutions</a></li>
  9.  
  10. <li>
  11. <a href=“/”>Company</a></li>
  12.  
  13. <li >
  14. <a href=“/”>Home</a></li>
  15.  
  16. </ul>
  17. </nav>

The Banner

 

The banner can be anything you want (Later you will see I have put an image as banner through background property of CSS) 

  1. <section id=“banner”>
  2. <header>
  3. This is banner
  4. </header>
  5. </section>

The Main Body

In the main body i have put some fake text using html-ipsum.com .It is the main area where you can put your content !

  1. <section>
  2. <article>
  3. <ul  class=“catagories”>
  4.  
  5. <li id=“cat1″>
  6. <h3>Service1</h3>
  7. <p>Duis diam odio, lacinia nec elementum 
  8. sit amet, faucibus eu nulla. Nulla hendrerit
  9.  interdum turpis sed accumsan. Mauris aliqu
  10. et sapien adipiscing enim rutrum ultrices. </p>
  11. <p>Pellentesque habitant morbi tristique senec
  12. tus et netus et malesuada fames ac turpis eges
  13. tas. Sed a dui at enim sodales semper id quis risus. </p>
  14. </li>
  15.  
  16. <li id=“cat2″>
  17. <h3>Service2</h3>
  18. <p>Duis diam odio, lacinia nec elementum 
  19. sit amet, faucibus eu nulla. Nulla hendrerit i
  20. nterdum turpis sed accumsan. Mauris aliquet
  21.  sapien adipiscing enim rutrum ultrices. </p>
  22. <p>Pellentesque habitant morbi tristique senect
  23. us et netus et malesuada fames ac turpis eg
  24. estas. Sed a dui at enim sodales semper id quis risus. </p>
  25. </li>
  26.  
  27. <li id=“cat3″>
  28. <h3>Service3</h3>
  29. <p>Duis diam odio, lacinia nec elementum sit a
  30. met, faucibus eu nulla. Nulla hendrerit interdum 
  31. turpis sed accumsan. Mauris aliquet sapien adipis
  32. cing enim rutrum ultrices. </p>
  33. <p>Pellentesque habitant morbi tristique senec
  34. tus et netus et malesuada fames ac turpis egest
  35. as. Sed a dui at enim sodales semper id quis risus. </p>
  36. </li>
  37.  
  38. <li id=“cat4″>
  39. <h3>Service4</h3>
  40. <p>Duis diam odio, lacinia nec elementum sit 
  41. amet, faucibus eu nulla. Nulla hendrerit interd
  42. um turpis sed accumsan. Mauris aliquet sapie
  43. n adipiscing enim rutrum ultrices. </p>
  44. <p>Pellentesque habitant morbi tristique sen
  45. ectus et netus et malesuada fames ac turpis e
  46. gestas. Sed a dui at enim sodales semper id quis risus. </p>
  47. </li>
  48.  
  49. </ul>
  50. </article>
  51. </section>

The Footer

And at-last the footer ! you an put some social icons here to link up your site with them and some info that relates to the subject of respective site

  1. <footer id=“myfooter”>
  2. <ul class=“footer”>
  3.  
  4. <li>
  5. <strong>Links</strong>
  6.  
  7. <ul class=“footertext”>
  8.  
  9. <li >
  10. <a href=“/”>Home</a></li>
  11.  
  12. <li>
  13. <a href=“/”>Company</a></li>
  14.  
  15. <li>
  16. <a href=“/”>Services</a></li>
  17.  
  18. <li>
  19. <a href=“/”>Solutions</a></li>
  20. </ul>
  21. </li>
  22.  
  23. <li>
  24. <strong> Join in</strong>
  25.  
  26. <ul class=“footertext”>
  27.  
  28. <li >
  29. <a href=“/”>Signup</a></li>
  30.  
  31. <li>
  32. <a href=“/”>Promotion</a></li>
  33.  
  34. <li>
  35. <a href=“/”>Fourms</a></li>
  36.  
  37. </ul>
  38. </li>
  39.  
  40. <li>
  41. <strong> Follow Us</strong>
  42. <ul class=“footertext”>
  43.  
  44. <li >
  45. <a href=“/”>RSS</a></li>
  46.  
  47. <li>
  48. <a href=“/”>Twitter</a></li>
  49.  
  50. <li>
  51. <a href=“/”>FaceBook</a></li>
  52.  
  53. <li>
  54. <a href=“/”>Linkedin</a></li>
  55.  
  56. </ul>
  57. </li>
  58. </ul>
  59. </footer>

Full Markup

So here is the complete HTML Markup just copy it all into your index.html if you haven’t been following the above parts

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset=“utf-8″ />
  5. <title>Freakify.com | HTML5 CSS3 site | By Ahmad Awais</title>
  6. <link rel=“stylesheet” href=“/css/Style.css” type=“text/css”/>
  7. </head>
  8. <body>
  9. <div id=“content”>
  10. <header>
  11. <h1>Your Logo comes Here</h1>
  12. </header>
  13. <nav id=“navbg” >
  14. <ul  class=“navigation”>
  15. <li >
  16. <a href=“/”>Services</a></li>
  17. <li>
  18. <a href=“/”>Solutions</a></li>
  19. <li>
  20. <a href=“/”>Company</a></li>
  21. <li >
  22. <a href=“/”>Home</a></li>
  23. </ul>
  24. </nav>
  25. <section id=“banner”>
  26. <header>
  27. This is banner
  28. </header>
  29. </section>
  30. <section>
  31. <article>
  32. <ul  class=“catagories”>
  33. <li id=“cat1″>
  34. <h3>Service1</h3>
  35. <p>Duis diam odio, lacinia nec elementum sit 
  36. amet, faucibus eu nulla. Nulla hendrerit interdum 
  37. turpis sed accumsan. Mauris aliquet sapien adipiscing 
  38. enim rutrum ultrices. </p>
  39. <p>Pellentesque habitant morbi tristique senectus et 
  40. netus et malesuada fames ac turpis egestas. Sed a dui at
  41.  enim sodales semper id quis risus. </p>
  42. </li>
  43. <li id=“cat2″>
  44. <h3>Service2</h3>
  45. <p>Duis diam odio, lacinia nec elementum 
  46. sit amet, faucibus eu nulla. Nulla hendrerit
  47.  interdum turpis sed accumsan. Mauris aliquet
  48.  sapien adipiscing enim rutrum ultrices. </p>
  49. <p>Pellentesque habitant morbi tristique senectus
  50.  et netus et malesuada fames ac turpis egestas.
  51.  Sed a dui at enim sodales semper id quis risus. </p>
  52. </li>
  53. <li id=“cat3″>
  54. <h3>Service3</h3>
  55. <p>Duis diam odio, lacinia nec elementum sit amet,
  56.  faucibus eu nulla. Nulla hendrerit interdum turpis
  57.  sed accumsan. Mauris aliquet sapien adipiscing
  58. enim rutrum ultrices. </p>
  59. <p>Pellentesque habitant morbi tristique senectu
  60. s et netus et malesuada fames ac turpis egestas.
  61.  Sed a dui at enim sodales semper id quis risus. </p>
  62. </li>
  63. <li id=“cat4″>
  64. <h3>Service4</h3>
  65. <p>Duis diam odio, lacinia nec elementum sit amet,
  66.  faucibus eu nulla. Nulla hendrerit interdum turpis s
  67. ed accumsan. Mauris aliquet sapien adipiscing enim 
  68. rutrum ultrices. </p>
  69. <p>Pellentesque habitant morbi tristique senectus 
  70. et netus et malesuada fames ac turpis egestas. Sed
  71.  a dui at enim sodales semper id quis risus. </p>
  72. </li>
  73. </ul>
  74. </article>
  75. </section>
  76. <footer id=“myfooter”>
  77. <ul class=“footer”>
  78. <li>
  79. <strong>Links</strong>
  80. <ul class=“footertext”>
  81. <li >
  82. <a href=“/”>Home</a></li>
  83. <li>
  84. <a href=“/”>Company</a></li>
  85. <li>
  86. <a href=“/”>Services</a></li>
  87. <li>
  88. <a href=“/”>Solutions</a></li>
  89. </ul>
  90. </li>
  91. <li>
  92. <strong> Join in</strong>
  93. <ul class=“footertext”>
  94. <li >
  95. <a href=“/”>Signup</a></li>
  96. <li>
  97. <a href=“/”>Promotion</a></li>
  98. <li>
  99. <a href=“/”>Fourms</a></li>
  100. </ul>
  101. </li>
  102. <li>
  103. <strong> Follow Us</strong>
  104. <ul class=“footertext”>
  105. <li >
  106. <a href=“/”>RSS</a></li>
  107. <li>
  108. <a href=“/”>Twitter</a></li>
  109. <li>
  110. <a href=“/”>FaceBook</a></li>
  111. <li>
  112. <a href=“/”>Linkedin</a></li>
  113. </ul>
  114. </li>
  115. </ul>
  116. </footer>
  117. </div>
  118. </body>
  119. </html>
 
Yup , as per now the HTML part is complete ! 
 

The Mighty CSS3

So let’s start styling our HTML5 Mark up

The Basic CSS

  1. body
  2. {
  3. font-family: ”Lucida Grande”, sans-serif;
  4. font-size:14px;
  5. margin:0;
  6. background-color:#f1f1f1;
  7. }
  8. p,h1,h2,h3
  9. {
  10.  margin-left:5px;
  11. }
  12. #content
  13. {
  14.  width:1002px;
  15.  clear: both; margin: 0 auto;
  16.  
  17. }

Styling The Navigation

  1.  
  2. ul.navigation {
  3.  padding: 0;
  4.  margin: 0;
  5.  width: 100%;
  6. }
  7.  
  8. ul.navigation li {
  9.   list-style-type: none;
  10.   display: block;
  11.   width: 100px;
  12.   line-height:35px;
  13.   margin:0 15px;
  14.   padding:0 5px;
  15.   float: right;
  16.   text-align: center;
  17.   background:#484BDD;
  18.   margin-top:-10px;
  19.   font-size:16px;
  20.   font-weight:bold;
  21. }
  22.  
  23. ul.navigation li a {
  24.   display: block;
  25.   text-decoration: none;
  26.   color:#FFF;
  27. }
  28.  
  29. ul.navigation li a:hover {
  30.   display: block;
  31.   width: 100px;
  32.   line-height:35px;
  33. margin-top:-10px;
  34.   text-decoration: none;
  35. }
  36.  
  37. .navigation li:before {
  38. content:”";
  39. display:block;
  40. position:relative;
  41. left:-15px;
  42. width:0;
  43. height:0;
  44. border-width:5px 5px 5px 5px;
  45. border-style:solid;
  46. border-color: transparent #2e3f00 #2e3f00 transparent ;
  47. }
  48.  
  49. #navbg
  50. {
  51.     display:block;
  52.     background-color:#888888;
  53.     height:35px;
  54. }

CSS pseudo-elements:

This is an advance topic ! there are three different kinds of pseudo elements like before and after etc

  1. .navigation li:before {
  2. content:”";
  3. display:block;
  4. position:relative;
  5. left:-15px;
  6. width:0;
  7. height:0;
  8. border-width:5px 5px 5px 5px;
  9. border-style:solid;
  10. border-color: transparent #2e3f00 #2e3f00 transparent ;
  11. }

Styling The Banner

You can see that I have used the banner.jpg as a background image here

  1. #banner
  2. {
  3.     display:block;
  4.     height:250px;
  5.     background-image:url(images/banner.jpg)
  6. }

Styling the Main Body

  1.  
  2. ul.catagories {
  3.  padding: 0;
  4.  margin:0;
  5.  width: 100%;
  6. }
  7.  
  8. ul.catagories li {
  9.   list-style-type: none;
  10.   display: block;
  11.   width: 25%;
  12.   float: left;
  13.   text-align: left;
  14.   background:#5f7e0a;
  15. }
  16.  
  17. li#cat1
  18. {
  19.     background-color:#E0ECF8;
  20. }
  21.  
  22. li#cat2
  23. {
  24.     background-color:#A9D0F5;
  25. }
  26.  
  27. li#cat3
  28. {
  29.     background-color:#58ACFA;
  30. }
  31.  
  32. li#cat4
  33. {
  34.     background-color:#2E64FE;
  35. }

Styling The footer

And in the end we are upto style the footer

  1.  
  2.  
  3. #myfooter
  4. {
  5. display:block;
  6.  clear:both;
  7.  background-color:#888888;
  8.  height:120px;
  9.  padding:5px;
  10.  
  11. }
  12.  
  13. ul.footer {
  14.  padding: 0;
  15.  margin: 0;
  16.  list-style: none;
  17. }
  18.  
  19. ul.footer li {
  20.   list-style-type: none;
  21.   display: block;
  22.   margin-right:50px;
  23.   
  24.   float: left;
  25.   text-align: left;
  26.   line-height:30px;
  27. color:#FFF; 
  28. }
  29.  
  30.  
  31.  
  32. ul.footertext {
  33.  padding: 0;
  34.  margin: 0;
  35.  list-style: none;
  36. }
  37. ul.footertext li {
  38.  text-align: left;
  39. float:left;
  40. clear:both;
  41. }
  42. ul.footertext li a {
  43.  text-decoration: none;
  44.  display: block;
  45.  width: auto;
  46.  color: #FFFFFF;
  47. }
  48. ul.footertext li a:hover {
  49.  width:auto;
  50.  color: #dff293;
  51. }
Done! :)

Final Words

Yes , it was that simple. This will work fine in all the browsers except IE and for it

by: Chris Coyier

When working with HTML5 today, many of you know that you’ll need to include the “HTML5 shiv” to ensure that CSS will recognize and be able to style those elements in browsers that aren’t yet hip to HTML5.

<!--[if IE]>  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Credit for that to Remy Sharp, Jon Neal, John Resig and anybody else who contributed to that idea.

Use it just befor you include the css in the head element if you care about IE.

 

 

            DEMO               DOWNLOAD