As a new mom it is still quite difficult to get back to work due to time-limits . i thought of what to do to keep my skills up-to-date and to get my hands dirty with latest web standards, and i came up with experimenting HTML5 & CSS3 capabilities through making a free theme ,and since both HTML5 & CSS3 still have unfinished specifications i would get back to this theme more often to update the code with the latest specifications .
1-The Theme (simply HTML5 & css3)
this is a screenshot of the theme which is named (simply HTML5 & css3) , a very
basic theme with header , navigation menu , right side column and left content column , fluid content fixed width sidebar and a footer .
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Simply HTML5 & CSS3</title> <link rel="stylesheet" href="css/style.css" type="text/css" /> <!--[if lt IE 8]> <link rel="stylesheet" type="text/css" href="css/ie7-and-down.css" /> <![endif]--> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> </head> <body> <header id="header"> <hgroup> <h1><a href="#">Simply HTML<span class="coloredNum">5</span> & CSS<span class="coloredNum">3</span></a></h1> <h3><a href="#">The future is for web standards</a></h3> </hgroup> <section id="headerbox"> <form action=""> <input type="search" placeholder="search..." /> </form> </section> </header> <div id="maincontainer"> <div id="wrapper"> <nav> <ul id="mainnav"> <li class="active"><a href="#">home</a></li> <li><a href="#">portfolio</a></li> <li><a href="#">blog</a></li> <li><a href="#">contact</a></li> </ul> </nav> <div id="contentwrapper"> <section id="contentcolumn"> <article> <h2>First Article</h2> <figure><img src="http://localhost/html5/images/babyfeet.jpg"/></figure> <p><!--first article--></p> </article> <article> <h2>second Article</h2> <p><!--second article--></p> </article> </section> </div> <aside id="rightcolumn"> <section class="asidecontent"> <!--sidebar panel content--> </section> <section class="asidecontent"> <!--sidebar panel content--> </section> </aside> </div> <footer id="footer"> <section class="footercol"> <h3>About The Author</h3> <article><p><!--Footer column--></p></article> </section> <section class="footercol"> <h3>Contact Me</h3> <!--Footer column--> </section> <section class="footercol"> <article> <h3>Sample Form</h3> <!--Footer column--> </article> </section> <p id="copyright"><!--copyright goes here--></p> </footer> </div> </body> </html>
3-Steps I followed
- plan a mockup of the theme using pencil and paper
- write the markup in divs as i used to , then after making sure it works i turned them semantic wise to HTML5 elements like section,aside,footer, article,figure (you may disagree with me on this addtional unnecessary step , but i found that easier as i this was my first time to discover HTML5 new code)
- for CSS3 i simply picked CSS3 effects i want to add to the theme (same way you add flavors to your cook) , so i picked box-shadow , rounded corners ,transform and transition for animation and added them to page elements .
- Finally i ran tests , it was tested on Firefox 3.6 , Chrome 7 , Opera 10.63 , IE 7 , IE 8 . I took a look at IE6 and the layout was working to my astonishment but there was a bug in the top navigation has nothing to do with HTML5 nor CSS3 but i didn’t bother fixing as i don’t want to support this legacy browser version .
Tutorials introducing you to HTML5 & CSS3 features
and although web tutorials are handy and easy to have , books remain a more in-depth source giving you references from A to Z check my earlier post about HTML5 & CSS3 new books
For Test :
For inspiration :
any suggestions or ideas about the markup are welcomed .