Ultimate Collection of HTML5 and CSS3 Resources

Posted on 28. Apr, 2010 by SmashingShare in Resources

HTML is the simple markup language of the World Wide Web used to create hypertext documents and CSS is a stylesheet language which is used to format these hypertext documents.

HTML5 and CSS3 are the next big improvements which are still under development. Many designers and developers have already implemented new features from HTML5 and CSS3, which are supported in most browsers, on their websites and many are still experimenting with them.

In this “Ultimate Collection of HTML5 and CSS3 Resources“, you will find articles and tutorials covered on different websites. Demos and examples are also included in this list. I tried my best to collect all useful and related information to put at one place. Still if you find something missing, kindly share it in the comments below.

Articles

HTML5 Basics

The next iteration of HTML has been met with excitement by some, loathing by others and confusion/fear by everyone else. Love it or hate it, HTML 5 will soon define how you build websites.

Get Ready For HTML 5

With support in Chrome, Firefox 3.5, Opera, and Safari, HTML 5 is coming at you like a runaway train. Here are some suggestions to help you prepare to get on board rather than be left at the platform or tied to the tracks.

Structural Tags In HTML5

The HTML5 specification has added quite a few interesting and useful tags for structuring your markup. For a majority of everyday uses, these tags will replace many of our typical div entries from our code. So let’s dig in.

Power Of HTML5 And CSS3

Web designers can do some pretty cool stuff with HTML 4 and CSS 2.1. We can structure our documents logically and create information-rich sites without relying on archaic, table-based layouts. As we continue to push the boundaries of existing languages, HTML 5 and CSS 3 are quickly gaining popularity, revealing their collective power with some exciting new design possibilities.

My Top 5 HTML Coding Preferences

Every coder has his/her own coding style based on personal preferences. Not all of us markup the document in a same way. Some decide to choose one element while other coders prefer some other solution.

Semantics In HTML 5

HTML 5, the W3C’s recently redoubled effort to shape the next generation of HTML, has, over the last year or so, taken on considerable momentum. It is an enormous project, covering not simply the structure of HTML, but also parsing models, error-handling models, the DOM, algorithms for resource fetching, media content, 2D drawing, data templating, security models, page loading models, client-side data storage, and more.

The Future Of HTML5

The HTML 5 spec was originally called “Web Applications 1.0″. Most of the attention has been on the new markup elements, but in his talk he takes a further look at the applications side of the spec …

Yes, You Can Use HTML 5 Today!

There have been many changes to the HTML 5 landscape since my colleague, Lachlan Hunt’s 2007 article on A List Apart, A Preview of HTML 5. Let’s see what’s happening in the world of HTML 5.

Preparing for HTML5 With Semantic Class Names

This is a brief introduction to the new structural elements in the HTML 5 Working Draft, and how to use semantic class names in HTML 4.01 or XHTML 1.0 markup that correspond to the names of those structural elements. By doing so, you’ll get a head start in understanding how to use the new elements and also go some way towards using plain old semantic HTML if you’re not already.

When Can I Use

Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies. Several features have not yet been fully defined, and thus have only experimental support.

HTML5 Again

If you’re a front-end developer, I want you to do me a favor. I want you to pick a project and mark it up in HTML5. I’m not going to ask you to code a game experience inside the canvas element or replicate a YouTube video player or do anything really, except challenge you to declare semantic information about your content blocks.

Designing A Blog With HTML5

Much of HTML 5′s feature set involves JavaScript APIs that make it easier to develop interactive web pages but there are a slew of new elements that allow you extra semantics in your conventional Web 1.0 pages. In order to investigate these, let’s look at marking up a blog.

5 Techniques To Acquaint You With CSS 3

CSS is a well-known, widely used language to style websites. With version three in the works, many time-saving features will be implemented. Although only the most modern browsers currently support these effects, it’s still fun to see what’s around the corner! In this tutorial I’ll show you five techniques.

Web Designer’s Checklist

Very useful checklist of CSS3 Properties, CSS3 Selectors, HTML5 Web Applications, HTML5 Embedded Content and HTML5 Web Forms

CSS Code Structure For HTML 5: Some Useful Guidelines

In this post I want to illustrate some useful guidelines about how to implement a well organized CSS code structure in view of introduction of HTML 5 markup language. They are not general rules but simple suggestions you can follow in order to improve the readability, manageability, and general organization of CSS code.

How To Get HTML5 Working In IE And Firefox 2

HTML 5 may be the latest and greatest technology, but some browsers don’t have native support for the new semantic elements. Let’s momentarily forget about the really sexy functionality, like full control over the <video> element, and just focus on getting the elements rendered.

Building Web Pages With HTML 5

Depending on who you ask, HTML 5 is either the next important step toward creating a more semantic web or a disaster that’s going to trap the web in yet another set of incomplete tags and markup soup.

Everything You Always Wanted to Know About HTML5

So CSS3 lets you have rounded corners, and HTML5 gives you <header> and <footer> elements. Big whoop. Sometimes it can be hard to get excited about what’s being added to the core web technologies, but Ernest Delgado is here to change that.

Cheat Sheets

HTML 5 Cheat Sheet (PDF)

In the spirit of the upcoming change, Smashing Magazine decided to release a handy printable HTML 5 Cheat Sheet that lists all currently supported tags, their descriptions, their attributes and their support in HTML 4. The cheat sheet was created by Veign.com and released exclusively for the readers of Smashing Magazine.

HTML5 Visual Cheat Sheet

This new HTML5 Visual Cheat Sheet is an update of HTML 5 Visual Cheat Sheet that was published for the first time some months ago on old blog (http://woork.blogspot.com).

HTML5 Id/Class Name Cheat Sheet

Drawn from the fine work of Andy Clarke (Marlarkey) and Jon Tan(gerine), esq.

Tutorials

Introduction to HTML5

Are you interested in HTML 5 and what’s coming down the pipeline but haven’t had time to read any articles yet? I’ve put together an educational “Introduction to HTML 5” video that goes over many of the major aspects of this new standard,

Google’s HTML 5 Work: What’s Next?

Learn about new features in HTML 5 that enhance and enrich the web experience. Learn about new features in HTML 5, how they’ll be supported in Chrome, and our latest plans for new functionality. The web browser is quickly evolving into a rich platform with access to all the capabilities that your computer has to offer.

Features You Want Desperately But Still Can’t Use

As the HTML5 effort reaches its first big milestone — feature completeness — browsers are starting to implement it. It will be years before you can rely on HTML5 support when writing Web pages and applications, but you can start to experiment today to get a feel of what the new standard offers. This talk will explore some of the most recent implementations of HTML5 features.

HTML5 + CSS3 = Awesome

HTML5 is the next version of the web markup standard. New features include new tags, offline dbs, and geolation aware browsers. CSS3 is the next generation styling language. Together, they make will make the web a great experience.

Create Windows 7 Start Menu Using CSS3 Only

Janco is fascinated with how much you can do with so little using CSS3. Many user interface elements that require images in order to have appropriate visual appearance now can be styled only with CSS3. In order to prove that Janco assigned himself a task to create Windows 7 start menu only with CSS3 (and some icons).

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

HTML 5 is the next major version of HTML. It introduces a bunch of new elements that will make our pages more semantic. This will make it a lot easier for search engines and screenreaders to navigate our pages, and improve the web experience for everyone

Coding a CSS3 & HTML5 One-Page Website Template

Changes do not come from nowhere. The early adopters are already using what we are going to use day-to-day a few years from now. One of these technologies is HTML5 – the new version of the fundamental language of the web.

Coding A HTML 5 Layout From Scratch

While it is true HTML5 and CSS3 are both a work in progress and is going to stay that way for some time, there’s no reason not to start using it right now.

CSS3 Exciting Functions and Features: 30+ Useful Tutorials

With version three of CSS, many exciting features will be implemented. CSS3 leads to greater flexibility and makes it much easier to recreate previously complex effects. Many time-saving rules are being thought up for CSS3: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image ,multi-column layout, etc…

Quick Tip: Learning About HTML5 Local Storage

In this video quick tip, we’re going to build a working, though very basic, to-do list in just a minute or two. Thanks to HTML5′s local storage, we can make advanced browsers “remember” what we type, even after the browser is closed or is refreshed.

Have a Field Day with HTML5 Forms

Here we’re going to take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques. I promise you will want to style your own forms after you’ve read this article.

Touch The Future: Create An Elegant Website With HMTL 5 And CSS3

Five macro-steps to build an effective website using brain, pencil, paper, Photoshop, HTML and CSS. But technology doesn’t stop, luckily, and we have other two great allies for the future to design better website: HTML 5 and CSS3.

Design & Code a Cool iPhone App Website in HTML5

HTML5 is definitely the flavor of the month, with everyone in the design community getting excited about its release. In this tutorial we’ll get a taste of what’s to come by building a cool iPhone app website using a HTML5 structure, and visual styling with some CSS3 effects.

CSS3 Gradient Buttons

In this tutorial, nickla show you how to put the CSS gradient feature in a good practical use. The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc.

12 Excellent CSS3 Button And Menu Techniques

HTML5 and CSS3 Demos & Exampels

HTML5 Canvas

HTML5 and CSS3 Experiments

HTML5 Readiness

CSS3 Previews

HTML5 and CSS3 Templates

HTML5 Video Player

Sublime Video – HTML5 Video Player

Projekktor – HTML5 WebTV and Video Player

Video For Everybody

HTML5 Video & Media Javascript Library

HTML5 Media

Tools

• CSS3 Generator
• CSS3 Please
• CSS3 Gradient Generator
• Border Radius
• Cool Tools & Toys For Web Developers
• Widget Pad

Useful Information & Other Resources

• Dev W3C
• The WhatWG Blog
• Wikipedia – HTML5
• HTML5 Gallery
• Less Framework
• HTML5 Sites
• HTML5 Video
• 52 Framework
• 101 Best HTML5 Sites
• Dive Into HTML5
• HTML5 Doctor
• Simon Pieters
• 52 Framework
• Introducing HTML5
• HTML5 Pocketbook
• HTML5 Tutorial

Share With Your Friends

Tags: CSS3, HTML5, Resources