Browsing Posts in HTML

23 Essential HTML 5 Resources

No comments
  1. Yes, You Can Use HTML 5 Today! – A great beginning overview of HTML 5
  2. Wikipedia: HTML 5 – A basic overview from Wikipedia
  3. HTML 5 Cheat Sheet – A great quick guide to HTML 5 as a printable PDF
  4. HTML 5 Demos – A great set of demos. Just view the source to see how they work.
  5. HTML 5 Drag and Drop + Microformats = a whole world of possibilities – An example of how to use Drag-n-Drop in HTML 5
  6. HTML 5 Gallery – See what’s possible with HTML 5
  7. HTML 5 Forms Demo – A powerful demo of how forms work in HTML 5
  8. HTML 5 Doctor – A great general resource on HTML 5
  9. Headers in HTM 5 – A good article from HTML 5 Doctor on the Header element
  10. Video elements – A useful article from HTML 5 Doctor on the Video element
  11. Designing a blog with html5 – A tutorial on how to build a blog in HTML 5
  12. How to get HTML5 working in IE and Firefox 2 – Another great article from HTML 5 Doctor
  13. HTML 5 – Draft Standard – The whole spec, in all it’s scary technical detail
  14. Semantics in HTML 5 – An opinion piece from A List Apart
  15. Thinking About HTML 5 canvas Accessibility – Some quick thoughts on accessibility problems with the Canvas element
  16. HTML 5: nav ambiguity resolved – A post by Zeldman on the HTML 5 Nav element
  17. A Selection of Supported Features in HTML5 – A great list from Molly about which HTML 5 features are supported by which browsers
  18. The WHATWG Blog – The Web Hypertext Application Technology Working Group – the folks working on the HTML 5 spec
  19. HTML 5 canvas – A great in-depth tutorial on how the HTML 5 Canvas element works
  20. Native Drag and Drop – A demo of how the Drag-n-Drop functionality works.
  21. Bespin – A Mozilla Labs experiment on how to build an extensible Web code editor using HTML 5 technology.
  22. When can I use… – Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies
  23. Comparison of layout engines (HTML 5) – A good resource from Wikipedia

People to follow

These are the folks that are at the center of HTML 5 …

  1. Ian Hickson (@hixie) – Editor of HTML 5 Spec. Currently working at Google.
  2. Dave Hyatt – Co-creator of Firefox. Worked with Ian Hixie on HTML 5 spec. Working at Apple on the Safari and WebKit team.
  3. Bruce Lawson (@brucel) – Works for Opera, evangelising open web standards as part of their Developer Relations team. Also a member of the Web Standards Project’sAccessibility Task Force.
  4. Update: The other folks behind HTML 5 Doctor@Rich_Clark@Rem@jackosborne,@akamike and @leads.
  5. Molly Holzschlag – Group Lead for the Web Standards Project (WaSP) and an invited expert to the HTML and GEO working groups at the World Wide Web Consortium (W3C)
  6. We’re probably forgetting others … please make suggestions in the comments

CSS3 and HTML 5 are capable of revolutionizing the way we design websites. Both include so many new features and functions that it can be hard to wrap your head around them at times. The inclusion of native support for things like rounded corners and multi-column layouts are just the tip of the ice berg.

Below are seventy resources, tutorials, and articles to get you started with CSS3 and HTML 5. Many of the techniques discussed are already supported to some extent in some some modern web browsers (Safari and Firefox have the most extensive support), so you can get started right away.

CSS3 Tutorials and Resources

Get Started with CSS 3 – A basic guide to using CSS3.

Cascading Style Sheets Current Work – Details the progress the W3C is making on the CSS3 standard.

Border-image: Using Images for Your Border – A guide to the new CSS3 function for adding image borders.

Overview of CSS3 Structural Pseudo-Classes – A handy reference chart of structural pseudo-classes in CSS3.

Push Your Web Design Into The Future With CSS3 – An introduction to some of the new features in the CSS3 specification.

CSS3 Property Tests – An overview of which properties are currently supported in which browsers.

Rounded Corner Boxes the CSS3 Way – A tutorial for creating rounded corners with a new CSS3 method.

CSS3 Selectors Explained – An overview of some of CSS3 selectors, including selector syntax.

CSS3 Borders Preview – An article that covers some new border types, including rounded corner borders and gradient borders.

Box Shadow – Create a drop shadow behind an element.

RGBA Colors – A guide to alpha transparency with RGB colors.

CSS3 Multiple Columns – A guide to creating multi-column layouts in CSS3, which is way simpler (and better supported) than in previous versions.

@font-face in IE: Making Web Fonts Work – A guide to getting the @font-face property to work with Internet Explorer.

Progressive Enhancement with CSS3: A Better Experience for Modern Browsers– A guide to progressive enhancement (which is basically just graceful degradation in reverse) using CSS3.

CSS3 RGBA – A straight-forward tutorial for using the new RGBA feature to create transparent colors.

CSS3 Opacity – A guide to the transparency/opacity capabilities in CSS3.

Multiple Backgrounds – While currently only supported in Safari, the ability to use multiple background images is a really cool new feature of CSS3.

CSS3 Color Names – CSS3 supports 147 different colors by name (the 17 standard colors plus 130 more). This lists them all, along with their RGB and hexadecimal values.

CSS3 Background Images (Sizing and Multiple Images) – A guide to implementing multiple background images and sizing those images.

CSS Template Layout Module – This module will make more advanced, multi-column CSS layouts much easier.

CSS at Ten: The Next Big Thing – A slightly older article on upcoming features in CSS3, including lots of information on font support.

Fonts Available for @font-face Embedding – A page covering all the fonts currently licensed for @font-face embedding, either specifically or through other licenses, with download links for each.

Introduction to CSS3—Part 5: Multiple Columns – An introduction to the multi-column function in CSS3, including instructions for use and an example.

CSS3 Multiple Columns – Another handy guide to working with the multiple column function.

Word-Wrap – An introduction to CSS3’s word wrap feature.

Liquid Faux Columns with Background-Size – A tutorial for creating fake liquid columns using the background-size property.

Six Questions: Eric Meyer on CSS3 – An interview with Eric A. Meyer about CSS3 and it’s implications for the future of web design.

Semantic Code: Put More In, Get More Out – A quick example of how CSS3 selectors, when used semantically, can add functionality to your site.

The CSS3 ‘Box-Sizing’ Concept – An overview of the new ‘box-sizing’ concept and how it works.

Super Awesome Buttons with CSS3 and RGBA – A tutorial for creating relaly cool buttons using the RGBA feature of CSS3.

A Mock-Up Interface Using CSS3 Color – A tutorial for creating a mock-up of an OSX-like UI using CSS3’s color module.

Enhance Internal Page Links – A tutorial to improve the usability of internal links on your website.

Introduction to CSS3—Part 4: User Interface – A tutorial for manipulating elements, cursors, box layout, and other UI features.

Creating a Polaroid Photo Viewer with CSS3 and jQuery – A tutorial for creating a really cool photo gallery with images styled like Polaroid photos.

Overriding the Default Text Selection Color with CSS – A tutorial for changing the default highlight color compatible with Safari and Firefox only.

Making an Image Gallery with :Target – A tutorial for creating a gallery using the :target pseudo-class.

Styling Forms with Attribute Selectors—Part 1 – A guide to form styling using attribute selectors instead of class selectors.

CSS: Transition Timing Functions – An introduction to the transition-duration and transition-timing-function properties in CSS3.

CSS3 Corporate Fun – A great tutorial on creating a corporate-style navigation bar with dropdowns and rollover effects.

CSS3 and International Text – An overview of some of the international text functions currently in development for CSS3.

CSS Trick: Hidden Messages – A new trick in CSS3 for hiding message inside your text.

The Potential of Web Typography – A comprehensive overview of @font-face and its potential uses.

The Fundamental Problems with CSS3 – An article discussing the current issues with the CSS3 standard.

CSS3 Cheat Sheet – A PDF cheat sheet including the new features in CSS3.

CSS3 and HTML 5 Combination Resources

A Marriage Made in Heaven? HTML 5 and CSS3 – A basic overview of how CSS3 and HTML 5 will work together and what that means for the future of web design.

HTML 5 and CSS3: The Techniques You’ll Soon Be Using – A tutorial for building a blog page using the advanced features of HTML 5 and CSS3.

When Can I Use… – Look up which browsers support CSS3, HTML 5, and other technologies not supported by all browsers.

The Power of HTML 5 and CSS3 – A great overview of the possibilities when combining HTML 5 and CSS3.

HTML 5 Resources

A Preview of HTML 5 – An older article from A List Apart offering some information on the features and advantages of HTML 5.

Yes, You Can Use HTML 5 Today! – A guide to some of the currently-supported HTML 5 features and some who are currently using it.

HTML 5 Cheat Sheet – A downloadable PDF cheat sheet for working with HTML 5’s new features and functions.

Designing a Blog with HTML 5 – A complete tutorial for building a blog website with HTML 5.

Coding an HTML 5 Layout From Scratch – A complete guide to creating an HTML website from the ground up.

HTML 5 Boilerplates – A quick guide to some boilerplates supported right now.

A Selection of Supported Features in HTML5 – A chart showing some of the HTML 5 features currently supported in different browsers.

HTML5 id/class Name Cheatsheet – An online cheatsheet for the new ID and Class names in HTML5.

Preparing for HTML 5 with Semantic Class Names – An overview to the new structural elements in HTML 5 and how to prepare for them by using semantic class names in HTML 4.01 or XHTML 1.0.

HTML 5 Canvas—The Basics – A complete guide to using the canvas element in HTML 5.

HTML 5: Nav Ambiguity Resolved – A clarification of the new nav element in HTML 5.

HTML 5 + XML = XHTML 5 – An overview of how HTML 5 will interact with XML.

The Video Element – An introduction to the new video element in HTML 5.