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 .
2-The markup
<!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 .
- added a form to experiment new HTML5 Form elements and enhancements (Opera currently is the best at supporting it as it is the only browser supporting datepicker and form auto validation) , and i gave a cry on seeing the datepicker and how simply it was rendered with a line of markup with no need for javascript
- 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 .
4-Resources
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 .
Good blog! I really love how it is simple on my eyes and the data are well written. I’m wondering how I could be notified when a new post has been made. I have subscribed to your feed which must do the trick! Have a nice day!