• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction to HTML5/CSS3 In Drupal 7
 

Introduction to HTML5/CSS3 In Drupal 7

on

  • 20,814 views

HTML5 is here and it has many improvements over its predecessors, offering a full range of new features previously unavailable without complex JavaScript coding. Now it is possible to offer intuitive ...

HTML5 is here and it has many improvements over its predecessors, offering a full range of new features previously unavailable without complex JavaScript coding. Now it is possible to offer intuitive rich user interfaces using baked-in techniques and supported by more and more modern browsers.

If you have ever wondered about the next emerging technology on the web or need a quick crash course in HTML5 and CSS3 this program is right for you. We will answer the following questions:

What is HTML5?
How does HTML 4.01/ XHTML 1.0 compare with the new HTML5?
What are the new HTML5 structural elements?
What do you need to do to build a Drupal 7 theme in HTML5?
What is CSS3?
What are the new CSS3 properties and techniques?
What CSS3 techniques should be used in Drupal?
What are some advanced CSS3 techniques?

About our speaker: Dante Taylor, Creative Director at Mediacurrent. Dante has his Bachelor of Fine Arts (BFA) from Savannah College of Art and Design, and has worked as a designer for over ten years, starting with the version 4.7 release.

Statistics

Views

Total Views
20,814
Views on SlideShare
16,154
Embed Views
4,660

Actions

Likes
15
Downloads
477
Comments
3

16 Embeds 4,660

http://www.rgracia.com 3810
http://www.scoop.it 739
http://technology-beta.asu.edu 35
http://www.technonj.com 35
http://translate.googleusercontent.com 11
https://twitter.com 7
http://webcache.googleusercontent.com 7
https://si0.twimg.com 4
http://odeonwebsitedesign.com 4
http://localhost 2
http://www.verious.com 1
http://cms.painchaudhtml.webnode.com 1
http://technonj.com 1
http://paper.li 1
http://www.basspain.com 1
http://painchaudhtml.webnode.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Introduction to HTML5/CSS3 In Drupal 7 Introduction to HTML5/CSS3 In Drupal 7 Presentation Transcript

  • INTRODUCTION TOHTML5/CSS3 In Drupal 7 @thememaster
  • BROUGHT TO YOU BYTHE GOOD FOLKS AT DO DRUPAL RIGHT
  • Bachelor of Fine Arts in GraphicDesign from Savannah Collegeof Art & Design (SCAD)Creative Director atMediacurrentWorking in the web space forabout 12 yearsWorking with Drupal senseversion 4.7Favorite Drupal Install isWatchGMC.com  
  • ABOUT ME DANTÉ TAYLORBachelor of Fine Arts in GraphicDesign from Savannah Collegeof Art & Design (SCAD)Creative Director atMediacurrentWorking in the web space forabout 12 yearsWorking with Drupal senseversion 4.7Favorite Drupal Install isWatchGMC.com  
  • BASIC ASSUMPTIONSBasic understanding of HTML& CSS markupBasic understating aboutDrupal & Theming.Familiar with modernbrowsers such as Firefox,Safari, Chrome & InternetExplorer
  • BASIC ASSUMPTIONSBasic understanding of HTML& CSS markupBasic understating aboutDrupal & Theming.Familiar with modernbrowsers such as Firefox,Safari, Chrome & InternetExplorer
  • HELPFUL BOOKS
  • IN THE NEXT 45 MINUTESWhat’s NEW in HTML5 & CSS3How both technologies will effect the way you develop,work & experience the WebWhy HTML5 & CSS3 is important, who is interested in itand what you should be doing.
  • GUESS WHOCARES? ABOUT HTML5 & CSS3
  • HOW WILL IT EFFECT YOU
  • HOW WILL IT EFFECT YOU
  • WHO CARES ABOUT HTML5 & CSS3 First of all, just as he did during his time on stage, Taylor made it very clear that there are two key high-level focuses for Facebook in 2011 from a technology perspective: HTML5 and mobile. And actually, as he sees them, those are both very much related as well. "over the next couple of years, a large percentage [of development teams] will be working on mobile primarily," ~ Facebooks CTO, Bret Taylor Source: Tech CrunchFacebook CTO Bret Taylor On HTML5, Mobile As The Future, And Yes, FriendFeed : Posted June 3, 2011 : By MG Siegler
  • HOW WILL IT EFFECT YOU
  • HOW WILL IT EFFECT YOU
  • WHO CARES ABOUT HTML5 & CSS3Apple is one of the biggest supporters of HTML5, andSteve Jobs clearly thinks this new standard is the future ofthe web. To show why Flash is no longernecessary, Apple has launched a HTML5 showcasedisplaying what an HTML5-capable browser can dowithout the need of additional plugins. Source: Mashable Apple Shows Us What HTML5 Can Do : Posted June 4, 2010 : Stan Schroeder
  • WHO CARES ABOUT HTML5 & CSS3The software giant shared the new interface withWinRumors earlier this week in preparation forimprovements the company is planning across itsWindows Phone operating system. Microsoftis overhauling the user interface of SkyDrive. The newinterface will include a HTML5 version of its imageviewer, alongside a refreshed interface to view documentsand files uploaded to the free service. Source: WinRumors Microsoft reveals HTML5 overhaul of Windows Live SkyDrive : Posted May 24, 2011 : Tom Warren
  • WHO CARES ABOUT HTML5 & CSS3As a result, come August 1, Google Apps will no longerprovide support for Firefox 3.5, IE7, Safari 3, or previousversions of those browsers. At first, on these browsers,Google features like Gmail, Google Calendar, GoogleTalk, and Google Docs may not work properly, buteventually they may completely stop functioning. "Older browsers just dont have the chops to provide you with the same high-quality experience…" ~ Googles vice president of engineering, Venkat Panchapakesan Source: PC Magazine Google Apps Giving Older Browsers the Boot : Posted June 3, 2011 : By Hillary Scott
  • WHO CARES ABOUT HTML5 & CSS3I believe in HTML5 enough that I wanted to makeit one of the top 5 initiatives for Drupal 8; andswitch Drupals default doctype from XHTML to HTML5.This is the fifth official Drupal 8 initiative after theConfiguration Management, Design, Web Services andMultilingual initiatives. "HTML5 is about to rock our world" ~ Dries Buytaert Source: Bries Buytaert Blog HTML5 in Drupal 8 : Posted May 18, 2011 : By Dries Buytaert
  • HMMM! WHATS SO SPECIAL ABOUTHTML5 DIFFERENCES BETWEENHTML 4.01, XHTML, HTML5
  • HTML5HTML 4.01& XHTML
  • HTML5 KEY FEATUREBETTER BLEND
  • HTML5 KEY FEATUREBETTER BLENDHTML5 CSS3 JS
  • HTML5SEMANTICS Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users. Source: w3c.org
  • HTML5OFFLINE & STORAGE Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications. Source: w3c.org
  • HTML5DEVICE ACCESS Beginning with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to microphones and cameras, to local data such as contacts & events, and even tilt orientation. Source: w3c.org
  • HTML5CONNECTIVITY More efficient connectivity means more real-time chats, faster games, and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server more efficiently than ever before. Source: w3c.org
  • Source: w3c.org
  • HTML5GOOD BYE COOKIES Source: w3c.org
  • HTML5MULTIMEDIA Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action! Source: w3c.org
  • HTML53D, GRAPHICS, EFFECTS Between SVG, Canvas, WebGL, and CSS3 3D features, youre sure to amaze your users with stunning visuals natively rendered in the browser. Source: w3c.org
  • HTML5PERFORMANCE & INTEGRATION Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers & XMLHttpRequest 2. No user should ever wait on your watch. Source: w3c.org
  • HTML5PERFORMANCE & INTEGRATION CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before. Source: w3c.org
  • NEW ELEMENTSHTML5
  • NEW HTML5ELEMENTS Source: w3.org
  • NEW HTML5 ELEMENTS<section> <figcaption> <bdi><article> <video> <wbr> <aside> <track> <canvas> <header> <embed> <command> <hgroup> <mark> <details> <footer> <progress> <datalist> <nav> <meter> <keygen> <figure> <time> <output><section> <ruby> <svg> Source: w3.org
  • IE & HTML5 Source: Remy Sharp
  • IE & HTML5<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> Source: Remy Sharp
  • OLD HTML/XHTMLPAGE STRUCTURE
  • OLD HTML/XHTML PAGE STRUCTURE <id=”header”> <id=”navigation”> <id=”left”><id=”content-1”> <id=”right”><id=”content-2”> <id=”footer”>
  • NEW HTML5PAGE STRUCTURE
  • NEW HTML5PAGE STRUCTURE <header> <nav><section><article> <aside><article> <footer>
  • NEW HTML5 ELEMENT<!doctype html>
  • OLD HTML DOCTYPECODE SAMPLE Example: w3cschools.com
  • OLD HTML DOCTYPE CODE SAMPLE<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title of document</title> </head> <body> ... </body></html> Example: w3cschools.com
  • NEW HTML5 DOCTYPECODE SAMPLE Source: w3.org
  • NEW HTML5 DOCTYPE CODE SAMPLE<!doctype html><html> <head> <meta charset="UTF-8"> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body></html> Source: w3.org
  • HTML5 DOCTYPE USE CASEThe HTML syntax of HTML5 requires a DOCTYPE to be specifiedto ensure that the browser renders the page in standards mode. TheDOCTYPE has no other purpose and is therefore optional forXML. Documents with an XML media type are always handled instandards mode. [DOCTYPE]The DOCTYPE declaration is <!DOCTYPE html> and is case-insensitive in the HTML syntax. DOCTYPEs from earlier versions ofHTML were longer because the HTML language was SGML-basedand therefore required a reference to a DTD. With HTML5 this isno longer the case and the DOCTYPE is only needed to enablestandards mode for documents written using the HTML syntax.Browsers already do this for <!DOCTYPE html>. Source: w3.org
  • NEW HTML5 ELEMENT<header> <hgroup>
  • NEW HTML5PAGE STRUCTURE
  • NEW HTML5PAGE STRUCTURE <header> <nav><section><article> <aside><article> <footer>
  • HTML5 HEADER CODE SAMPLE<!-- begin: page header --><header> <hgroup> <h1>Header</h1> <h2>Sub-Header</h2> </hgroup> <p>Some more header content</p></header><!-- end: page header --> Example: www.essentaste.com
  • HTML5 HEADER USE CASEIdeal for use in defining global page structure.Usually intended to contain sections headings h1- h6& navigation.This could also be used inside of section containers to help identifythe section purpose or relevancy. Source: www.essentaste.com
  • NEW HTML5ELEMENT<nav>
  • NEW HTML5PAGE STRUCTURE
  • NEW HTML5PAGE STRUCTURE <header> <nav><section><article> <aside><article> <footer>
  • HTML5 NAV CODE SAMPLE<header> <!-- begin: primary nav --> <nav> <a href=”home.html”>Home</a> <a href=”about.html”>About</a> </nav> <!-- end: primary nav --></header> Example: www.essentaste.com
  • HTML5 NAV USE CASESet primary navigation in header inside header tags.Use to define secondary navigation in left and rightsidebar rails.Use anywhere on side that requires navigation or sitetoolbars functionality. Source: www.essentaste.com
  • NEW HTML5 ELEMENT<section>
  • NEW HTML5PAGE STRUCTURE
  • NEW HTML5PAGE STRUCTURE <header> <nav><section><article> <aside><article> <footer>
  • HTML5 SECTION CODE SAMPLE<!-- begin: science section --><section id=”science”> <header> <hgroup> <h2>Science</h2> </hgroup> </header> <p>Space Matter And Time (SMAT)</p></section><!-- end: science section --> Example: www.essentaste.com
  • HTML5 SECTION USE CASEUse to group content into logical category or sectionsWith very few exceptions, section should not be used ifthere is no natural heading for it.Section should not be used like aside or nav containersjust to position contentCheck work in a HTML5 Outliner Tool Source: HTML5 Doctor
  • NEW HTML5 ELEMENT<article>
  • NEW HTML5PAGE STRUCTURE
  • NEW HTML5PAGE STRUCTURE <header> <nav><section><article> <aside><article> <footer>
  • HTML5 ARTICLE CODE SAMPLE<!-- begin: science section --><section id=”science”> <article> <header> <h2>Science</h2> </header> <p>Space Matter And Time (SMAT)</p> <footer> <p>Creative Commons License</p> </footer> </article></section><!-- end: science section --> Example: www.essentaste.com
  • HTML5 ARTICLE USE CASEThe article element represents a component of a pagethat consists of a self-contained composition in adocument, page, application, or site and that is intended tobe independently distributable or reusable, e.g. insyndication.This could be a forum post, a magazine or newspaperarticle, a blog entry, a user-submitted comment, aninteractive widget or gadget, or any other independentitem of content. Source: HTML5 Doctor
  • NEW HTML5 ELEMENT<video>
  • Good-byeFlash Plug-ins maybe next year!
  • HTML5 VIDEO CODE SAMPLE<!-- begin: video --><video id="vid1" poster="http://v.com/video.jpg> <source type="video/webm" src="http://v.com/vid.webm" /> <sourcesrc="http://v.com/vid.m4v"/> <source src="http://v.com/vid.ogv" /></video><!-- end: video --> Example: kaltura.org
  • HTML5 VIDEO USE CASETo make the video work in Internet Explorer, Safari andfuture versions of Chrome, we must add a MPEG4 andWebM file.The video element allows multiple source elements.Source elements can link to different video files. Thebrowser will use the first recognized format:Tools for HTML5 Video (Kaltura & HTML) Source: HTML5Video.org & w3school.org
  • NEW HTML5 ELEMENT<aside>
  • NEW HTML5PAGE STRUCTURE <aside>
  • NEW HTML5 PAGE STRUCTURE <header> <nav> <section><article> <aside><article> <footer>
  • HTML5 ASIDE CODE SAMPLE<!-- begin: aside right --><aside id=”aside-right”> <nav> <ul> <li><a href=”link.html”>noop</a></li> <li><a href=”link.html”>zoop</a></li> <li><a href=”link.html”>Link 3</a></li> </ul> </nav> <p>Space Matter And Time (SMAT)</p></aside><!-- end: aside right --> Example: www.essentaste.com
  • HTML5 ASIDE USE CASEIntended to be used to support surrounding elementsWith the new definition of aside, it’s crucial to remain awareof its context. When used within an article element, thecontents should be specifically related to that article (e.g., aglossary).When used outside of an article element, the contentsshould be related to the site (e.g., a blogroll, groups ofadditional navigation, and even advertising if that content isrelated to the page). Source: HTML5 Doctor
  • NEW HTML5 ELEMENT<footer>
  • NEW HTML5PAGE STRUCTURE
  • NEW HTML5PAGE STRUCTURE <header> <nav><section><article> <aside><article> <footer>
  • HTML5 FOOTER CODE SAMPLE<!-- begin: science section --><section id=”science”> <article> <header> <h2>Science</h2> </header> <p>Space Matter And Time (SMAT)</p> <footer> <p>Creative Commons License</p> </footer> </article></section><!-- end: science section --> Example: www.essentaste.com
  • HTML5 FOOTER USE CASEAn important point to note is that you are not restrictedto use one <footer> element per site, you can usemultiple footers, each of which will then become the<footer> for that section of the document.You could therefore have a <footer> for a <section> oran <article>. Source: HTML5 Doctor
  • NEW HTML5 ELEMENT<canvas>
  • HTML5 CANVAS CODE SAMPLE<!-- begin: canvas graphic --><canvas id="myCanvas">Browser Not Supported</canvas><script type="text/javascript"> var canvas=document.getElementById(myCanvas); var ctx=canvas.getContext(2d); ctx.fillStyle=#FF0000; ctx.fillRect(0,0,80,100);</script><!-- end: canvas graphic --> Example: w3schooling.com
  • HTML5 CANVAS USE CASEThe <canvas> tag is used to display drawn graphics.The <canvas> tag is only a container for graphics, youmust use a script to actually paint graphics.Any text inside the between <canvas> and </canvas>will be displayed in browsers that does not support thecanvas element.Canvas API Example: w3schooling.com
  • “HAL” SHALL WEPLAY A GAME
  • WHAT’S NEWCSS3
  • CSS3 PROPERTIES :not filter: :lang opacity: :first-child media :first-of-type box-shadow :nth-child text-shadow :nth-of-type background-size:nth-last-of-type background (gradients) :last-child transform :last-of-type transform-orgin hsl & hsla transition
  • CSS3 PROPERTYrgba(0,0,0,0.5)The “a” property-name stands, for :alpha.This new feature allows you to specify anopacity value for a color.
  • CSS3RGBA PROPERTY
  • CSS3RGBA PROPERTY1/100% 0.5/50% 0.8/80%
  • CSS3 PROPERTYborder-radius
  • CSS3ROUNDED CORNERS
  • CSS3ROUNDED CORNERS Round Corners
  • CSS3 CODE SAMPLE.selector { -moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari and chrome */ -khtml-border-radius: 10px; /* Linux browsers */ behavior:url(border-radius.htc) /* IE6+IE7+IE8 */ border-radius: 10px; /* CSS3 */} Source: IE Fix For Curved Corners
  • CSS3 PROPERTYbox-shadow
  • CSS3BOX SHADOW
  • CSS3BOX SHADOW Shadow
  • CSS3 CODE SAMPLE.selector { /* Firefox */ -moz-box-shadow: 1px 1px 3px #292929; /* Safari and chrome */ -webkit-box-shadow: 1px 1px 3px #292929; /* CSS3 */ box-shadow: 1px 1px 3px #292929;}
  • CSS3 PROPERTYtext-shadow
  • CSS3 TEXT SHADOWDrupal
  • CSS3 CODE SAMPLE.shadow { /* CSS3 */ text-shadow: 1px 1px 3px #292929;}
  • CSS3 METHOD@font-face
  • CSS3 CODE SAMPLE@font-face { font-family: "your FontName"; /* IE */ src: url(/location/of/font/FontFileName.eot); /* non-IE */ src: local("real FontName"), url(FontFileName.ttf)format("truetype");}/* THEN use like you would any other font */.element { font-family:"your FontName", helvetica, sans-serif;}
  • CSS3 PROPERTYtransform
  • CSS3 CODE SAMPLE.selector { -webkit-transform: rotate(-9deg) scale(1.05); -moz-transform: rotate(-9deg) scale(1.05); transform: rotate(180deg) scale(1.05);} Example: font-face-guide
  • CSS3 ANIMATION RocketSpace UX
  • CSS3 IE FIXES10 Ways To Make Internet ExplorerAct Like A Modern Browser
  • CSS3 IE FIXES10 Ways To Make Internet ExplorerAct Like A Modern Browser
  • HTML5 & CSS3 WITHDRUPAL 7
  • MAKE A DRUPAL 7 THEMEhtml.tpl.php page.tpl.php node.tpl.php template.phpstyle.css
  • DRUPAL HTML5 THEMEtemplate.php
  • DRUPAL HTML5 THEME CODE SAMPLE// Preprocess variables for html.tpl.php.// template_preprocess_htmlfunction theme_name_preprocess_html(&$vars) { if (module_exists(rdf)) { $vars[doctype] = <!DOCTYPE html PUBLIC "-//W3C//DTD HTML+RDFa 1.1//EN"> . "n"; $vars[rdf]->version = version="HTML+RDFa 1.1"; $vars[rdf]->namespaces = $vars[rdf_namespaces]; $vars[rdf]->profile = profile=" . $vars[grddl_profile] . "; } else { $vars[doctype] = <!DOCTYPE html> . "n"; $vars[rdf]->version = ; $vars[rdf]->namespaces = ; $vars[rdf]->profile = ; }}
  • DRUPAL HTML5 THEMEhtml.tpl.php
  • DRUPAL HTML5 THEME CODE SAMPLE<?php print $doctype; ?><html lang="<?php print $language->language; ?>" dir="<?php print $language->dir; ?>"<?php print $rdf->version . $rdf->namespaces; ?>><head<?php print $rdf->profile; ?>> <?php print $head; ?> <title><?php print $head_title; ?></title> <?php print $styles; ?> <?php print $scripts; ?> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--></head><body class="<?php print $classes; ?>" <?php print $attributes;?>> <?php print $page_top; ?> <?php print $page; ?> <?php print $page_bottom; ?></body></html>
  • DRUPAL HTML5 CONTRIBUTED THEMESOmega By Jake Strawnhttp://drupal.org/project/omegaZentropy By Alex Weberhttp://drupal.org/project/zentropy960gs By Jake Strawnhttp://drupal.org/project/panels_960gsAdaptiveThemes By Jeff Burnzhttp://drupal.org/project/adaptivetheme
  • GOOD RESOURCESIntroductin HTML5 by Burce Lawson & Remy SharpPro HTML5 Programming by Peter Lubbers, Brian Albers & Frank SalimVisual Quickstart Guide CSS3 by Jason Cranford TeaguePro Drupal 7 Development by Tood Tomlinson and John K. VanDyk
  • THANKYOU @thememaster