1stwebdesigner

The Ultimate Roundup of Indispensable and Helpful HTML5 Tutorials

Posted: 07 Jun 2010 02:00 PM PDT

HTML5 is being developed as the next major revision of HTML (Hyper Text Markup Language), the core markup language of the World Wide Web. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML and it aims to reduce the need for proprietary plug-in-based rich internet application technologies such as Adobe Flash and Microsoft Silver light.

In this article we have collected as indispensable and helpful tutorials as we could on HTML5.The volume of tutorials are few on web, but the tutorials we have collected are of a high standards and useful.Please let us know through a comment if you know of any other great HTML5 articles, tutorials or websites.Also thanks to all of the folks who produced all of these great free learning experiences.

HTML5 Basics

1.HTML5 for beginners

Hopefully in this article we'll be able to amalgamate and condense a lot of this information so that anyone with basic HTML knowledge can start using it.

2.Canvas the basics of HTML5

HTML 5 canvas gives you a flexible and easy way to draw graphics using JavaScript. For each canvas element you can use a “context” (think about a page in a drawing pad), into which you can issue JavaScript commands to draw anything you want. Browsers can implement multiple canvas contexts and the different APIs provide the drawing functionality.Creating a canvas context on your page is as simple as adding the <canvas> element to your HTML, Workout this tutorial to find out how to do this.

This article takes you through the basics of implementing a 2D canvas context, and using the basic canvas functions, including lines, shape primitives, images, text, and more. You are assumed to have mastered JavaScript basics already.

3.Why HTML5 is worth your time

In this post, Meyer explains why HTML5, CSS and JavaScript are the “classic three” for developers and designers. He also pushes HTML5 features,What developers and designers need to know about HTML5, HTML5 Vs Flash comparison and Vs mobile applications.

4.When can i use it

This page tells the compatibility tables for features in HTML5, CSS3 and other upcoming web technologies.

5.HTML Presentation

This presentation describes Web development to the next level(HTML5) and other new generation technologies.

HTML5 Layouts and designs

6.Basic HTML5 Layout

You can have a quick look into this basic layout of HTML 5, they have put together a very basic HTML5 page so that you can get a rough idea of starting a HTML5 layout.

7.Designing a HTML5 layout from scratch

At the end of this article you'll learn how to Use Graceful Degradation techniques and technologies to keep things in place for legacy browsers.
Use Progressive Enhancement techniques and technologies to be up to date with the latest trends.Use HTML5 alongside a rising technology: Microformats.Have a clear vision of some of the most exciting new features HTML5 and CSS3 will bring.

8.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, this tutorial look at marking up a blog.

9.Hybrid column layout

Have you done a website with fixed columns? Easy, right? What about one with liquid columns? you know, those that use percentages… easy too. Have you ever mixed them up? If so, Did you have problems? I bet you did…

10.Simple website layout tutorial

The Most prominent additions in HTML 5 are tags like , , , , etc. HTML 5 will also include APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more. Site layout would be easily understandable and in code, tags are easy to understand as well Like the few tags they listed.

11.Building webpages with HTML5

However, for practical reasons (read: browser support issues) we're going to limit this intro to just the structural tags. As cool as Canvas, offline storage, native video or the geolocation APIs are, they aren't supported consistently across all the browsers yet.To help make some sense of what's new in HTML 5. They’re going to dive right in and start using some of the new structural elements.

11.One page website template

HTML5 web template, using some of the new features brought by CSS3 and jQuery, with the scrollTo plug-in. As HTML5 is still a work in progress, you can optionally download a XHTML version of the template here.

12.Create an elegant website with HTML5

In this article on Design Informer titled "Web Design Iterations And Algorithm," Adit Gupta explains how we can approach a web design work and how a website project can be processed in a number of iterations following a main algorithm.

13.Design & code a cool iphone App website

This tutorial covered the process of building an interface just like the awesome apps from Tapbots, so head over and check it out, then we'll be ready to build an accompanying website for our PKE Meter application.

14.Compatible one page portfolio

This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers.

HTML5 techniques

15.HTML5 and CSS3 techniques soon using

In this tutorial, they showed how to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along.

16.How to make a HTML5 iPhone application

You can create a native app that lives with all the other apps, and for the most part, it's going to be a pitch-perfect imitation.You can do this with the skill set you probably already have: HTML(5), CSS, and JavaScript.

17.Field day with HTML5 forms

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.

18.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.

19.Browsers render even IE6

In this tutorial, they showed how to create a common layout using some of HTML 5's new semantic elements, then use JavaScript and CSS to make our design backwards-compatible with Internet Explorer. Yes, even IE 6.

20.Exploring the HTML5 canvas

Series of HTML 5 Canvas for Flash Developers. More than tutorials they are like explorations. Hopefully these will be beneficial in the long run.

21.HTML features at a glance

The information is provided in this page to know that HTML5 is a rapidly evolving specification and this refers only to these specific features in current versions of Web browsers (Chrome 1, Firefox 3, IE8, Opera 9.64, Safari 4.0) unless otherwise noted.

22.Drag and drop

Developers and people in general a much richer experience, we are still just scraping the surface of the new markup, so today we are going to have a look at how to create a HTML 5 page that uses the new drag and drop feature. Note we are displaying this via an iframe so if your having any trouble viewing the demo please let us know, another reason it may not show will be due to your browser, this is working in the latest Firefox browser only at the moment.

23.Websockets interact with proxy servers

How HTML5 Web Sockets interact with proxy servers, load balancing routers, and firewalls. Additionally, they explained here Web Socket Gateway and its Web Socket emulation can add additional value.

24.CSS code structure for HTML5

This post 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. These suggestions are especially useful if you have to work on complex CSS files that otherwise can be difficult to manage.

25.Blowing up HTML5 video

The tutorial is about blowing up HTML5 video and mapping it into 3D space

video Tutorials

26.Comprehensive video tutorial on HTML5

This is an old video put up by a Google Employee called Brad Neuberg as an educational Introduction to HTML5. This is for the people who don't find time to keep up with HTML5 developments by reading up articles.

27.HTML5+CSS3 = Awesome

HTML5 Cheatsheets

Useful resources of HTML5

Modern Element Trends In Minimal Webdesign of 2010

Posted: 07 Jun 2010 02:12 AM PDT

As you may heard, I’ve been working on site redesign for a long time already and now I am deeply researching modern elements in minimal webdesign - I decided to share my research with all of you.

I think this modern&minimal trend will rule for some time, time for loud elements and web 2.0 cheap shiny badges has been long gone – time for subtle emphasis, accents, big and stylish fonts, lightly textured backgrounds,grids, lots of negative space, usage of icons.

We cannot deny also huge technological possibilities with CSS3, HTML5, jQuery allowing you to do things which were impossible like 2–3 years ago. I also read IE6 is finally nearing extinction so we have one pain less from our shoulder and we can focus more on design and clean code!

What’s interesting this trend isn’t even minimal fully – while it has lots of white spice, you will still see some light textures, icons, bold fonts. Usually people called site minimal if it was just plain typographic, almost without any images and styling. While researching new trending I must say plain minimal won’t work anymore if you really want to create modern design. Minimal isn’t just black text on white background anymore, while you still need to reduce design to the most important elements, you will improve design with a little more coloring, minimal icons and very light textures.

You may be confused right now, but don’t worry – read further and I will show what I mean through real examples expressing modern design style in the best way possible! While I may not be so great into describing contents, try to pay attention and focus on important elements I mention and at the end of this article I am sure you will be fully charged with inspiration and understanding how to design your site using modern elements.

However this article isn’t meant for you to just get inspired to copy elements from other sites, but to understand where trending is going now. Maybe you will be the one to start new design trend? – keep experimenting and never stop learning, good luck!

Before we start I would like to drop down the most important features of modern minimal webdesign style:

Lot’s of effective negative space
Grid based web designs
Clear, big typography
Lightly textured backgrounds and patterns
Subtle,minimal icons
Light shading and color transition, letterpress effect
Ribbons, sketches, dashed lines,ruler, transparent like backgrounds
Keypress navigation
Clear shapes
Old-school design combined with HTML5,CSS3 and jQuery
Animated mouseover effects
Colors – usually monochrome with just one bright color to give little emphasis on links and titles.

Roger Burkhard

This is portfolio site of Roger Burhard who is web designer and developer featuring all the works he has been done here!

To describe his design style I have to quote his words:

"Hi, my name is Roger and I call myself a New School Designer which means I set great value on clear shapes, colors and typography. New School because I believe in the mix of design and technology. I love the challenge of simplifying complex information, to visualize and pimp them with the latest technology."

I have to say his own words also describe current trending – with all the tools, technology and information available we now can create designs much easier, you just need to put little thinking in to understand how to simplify our designs and codes even more using latest technologies.

Thomas Maier

I think Thomas Maier site design is excellent example to show minimal simplicity with modern elements. It is portfolio and blog for Thomas with sliding navigation and all content is on single page. Navigating through this site is really easy – use main navigation and right bottom "back to top" button.

All elements are made easy to use, intuitive and design is amazing! Minimal icons, letterpress text effects, light shadowing!

Inspect Element

With huge buzz about new HTML5 and CSS3 collaborating with jQuery there is no surprise new effects have become one of the most popular modern trends! To understand what I mean mouseover to their logo and images – logo is rotating and images has nice shadow, you can learn this effect in this tutorial if you want to recreate something similar.

Besides that Inspect Element blog has implemented few more design elements which are very popular right now – I mean background behind logo, which is very well-recognized by designers who know how transparent background looks in Photoshop, paper boxes in the navigation also gives nice emphasis and clean look associating with clean paper.

Veerle’s Blog

Not long time ago Veerle created new site design (actually created completely new website to start fresh, but it’s another story) and her new design is a huge case of study with subtle beautiful design elements everywhere but in the same time keeping everything simple and clean.

I spent like 10 minutes just playing and researching all the great effects – little 2/3 sec. mouseovers create a feeling that site has something magical in it. What I like the most is effectively used white space and font selection. Icons are minimal, but sometimes bright to bring right emphasis for RSS, Twitter or just making Jobs section more prominent in the middle section.

Check all sections of this site, little design ideas are sparkling everywhere here!

Project Fedena

Project Fedena is the open source school management system based on Ruby on Rails. It was initially developed by a team of developers at Foradian Technologies. The project was made open source by Foradian, and is now maintained by the open source community.

But from design point of view what makes this site stand out is light background resembling light paper and hand-drawn icons and buttons looking very realistic and natural. Only two colors are used – dark red and 2 variations of grey color, pretty impressive. Strong grid system and white space just emphasize right elements – nice alternative to minimal icons, create minimal hand-drawn ones instead!

Kyee

This website is owned by Kyee from England creating beautiful websites which are minimal, beautiful and modern, I checked his portfolio as well and I was impressed, I suggest you to do the same for further inspiration and study how modern design should look in 2010!

What’s impressive in this particular design – it is simple, light without big design element, but it looks so professional!

At first there are just 1 main color (blue) used in different variations and that’s it, what creates that comfortable feeling when we visit Kyee portfolio page? A lot of white space – design is so hard, because it’s so simple – every section gets the space it deserves.

Everything else is minimal – even logo, really small font size, but headings really stand out to deliver the message.

Impressive portfolio and skill!

I just couldn’t stand and exclude this beautiful piece of art! Light noise added, nice separator with subtle logo and input fields also get well deserved space making hard for you not to start typing your contact info automatically!

WPBundle

Liam from WeFunction just finished his design on WPBundle which will be shop for bundle of webdesign candies like 10 Wordpress themes, icon sets and various other useful goodies, but to make this work of course professional site is necessary to prove their skill and create sales.

Since Liam and his team are really experienced they’ve put together amazing site – both from design and functionality point of view. In the screenshot also we can see how light texture is used to resemble with Twitter sky, but really such little elements rule the world now. Watch out for subtle dashed lines, calm buttons and little colors.

Emphasize just what you really need!

They Make Apps

But what if you want to create minimal site, but it is almost impossible because of all the functions and links you need to include in your design?

Create design – black&white, at least almost, using less is more even in colors!

TheyMakeApps website has recently won Webby and SXSV awards – it is online shop for mobile apps and also hanging place for all app makers dying to earn some money for good work.

You will notice here several trends – boxed background, precise logo ( by precise I mean it has been measured, which is popular trend lately too) and of course keep icons minimal using just color.

Simple Bits

SimpleBits web agency designs and builds simple, usable, and attractive interfaces that account for speed, file size, readability and accessibility — using web standards and also it has interesting blog in the meantime.

But now about design – little ribbons are gaining popularity as well, forget about web 2.0 colored badges – use them as naturally as possible. SimpleBits logo sits nicely on red ribbon, where it resembles with real bookmark we used to put in our books. Use natural colors and get resemblances in visitors – create deja-vu with real life.

Beautiful typography is definitely an important element here and notice CSS3 2–3 sec color variation on mouseovers in links!

DelliBarApp

Delibar is a full featured Delicious and Pinboard Mac client. Delibar focuses on giving Mac OS X users an easy and quick tool for searching, managing and sharing their bookmarks.

Looks like there is not any modern and great looking webdesign imaginable without self descriptive icons as one of the main graphic design elements.

Light radial gradient, shadows, 1 px thin lines, strokes and of course beautiful typography with subtle letterpress effect. Even design element behind "Pinboard Flavor" is really calm and almost unnoticeable.

Design Swap

Site has interesting idea to bring community together by redesigning each others website.

By Trent Walton words:

"DesignSwap's sole purpose is to promote collaborations between designers by saying one simple thing – I design on your site, you design on mine".

I am curious how this project will work out and suggest you to join in to create new friendships and grow your experience, but now about design.

All the main elements are in the "above the fold" section showing branding and which artists are now exchanging and doing redesigns. Both circles have nice mouseover effect. Make notice on subtle texture (which is not noise in this case),many subtle letterpress effects on text and icons.

Red ribbons and sketched characters seem nostalgic and odd at the first time, but little CSS3 effects clearly show you designer knows about latest technologies and trends!

Yaron Schoen

This is personal portfolio site of Yaron Schoen, designer based in NewYork. It’s important to create the first impression good and here by quality chemistry icon expression and slogan you get immediately introduced with Yaron’s world. Design shows he is confident about his skills and while browsing his site you will also feel his experience.

But what about modern trends? Logo is minimal, even loud header uses as little graphics and colors as possible. All design is kept clean and grid based, I almost feel the most white space you will be using, the better results in the most cases you will get. Just don’t exaggerate or maybe you need to do exactly that!?

Design Informer

I couldn’t exclude this great design blog from this collection since I consider Jad Limcaco design is pure greatness including simplicity in such complex website.

Navigation and input boxes has nice mouseover effects using CSS3, header has subtle graphic to make it more interesting – there are many little and subtle design elements you will not notice immediately, but it all together feels natural. You just have to notice those elements, use them in your own designs letting visitors enjoy information you want to deliver.

Nice element is that little ruler separating content section from sidebar – small things matter!

Uh and did I mention this valuable art directed post teaching how to use grids to achieve clear separation of content.

Hot Meteor

Hot meteor is web agency which specializes in web, print, and branding. Design is kept really minimal and interesting it has been centered, which is unusual practice. Transparent gradient in the static header also gives nice scrolling experience!

Crush Lovely

Not used a lot just yet, but I am sure keypress navigation will gain huge popularity in future to let visitors switch categories and slide images easier. When I used keypress navigation here with left/right arrows in this single page design it was really great experience to slide through different backgrounds and styling in elegant way.

Usable Efficiency

Very valuable video tutorial site teaching you how to improve and design websites. Author got very clean and professional site designed with him, you an expand extra info – such as comments and description about video just if you choose to.

Arty Papers

Portfolio site by R. Marie Cox, here besides white simplicity I like tiny small logo and navigation – looking great! Just for fun, check his 10 previous site versions in the footer, interesting evolution through years!

Arty-papers-minimal-trendy-webdesign-inspiration

i-Design Studios

iDesign Studios is a web design and development company specializing in creating custom web sites, focusing primarily on custom WordPress theme design and development.

Look how dashed lines do all separation and not a single bright color is used? Check out also interesting feature to switch to dark/light theme – it’s nice to see they think about reader by offering little personalization options

Franzz

Personal portfolio page by Francesco Fonte, nice addition to site is percentage skill graph, where he measures his own skills by percent. I couldn’t avoid to notice subtle background texture and light "more" – such eye candy!

Monty Lounge Industries

This is a portfolio site created by experienced web designer Kevin Fricovsky and huge titles do make an impression!

Dustin Allen Pace

Portfolio website of 23 years old web designer Dustin and this is his showcase site. Play with navigation to enjoy light mouseover sliding.

Pixelumbrella

Pixelumbrella is the online portfolio of Seattle-based web designer and developer Nick Robinson.

5 Squared

Single page portfolio website – definitely saves clicks and some of the expensive time!

Skylar Anderson

Jason Duerr

THG Creative

Einserver

This is personal blog and portfolio site by Florian Pichler from Deutchland. What I liked here was little font size – maybe for bigger resolutions it would be too small, but for my laptop it was just the right way! Interesting – everything is small, but white space is used in the right way and that’s what makes it feel and look so good I think.

Great design element here is animated navigation too with sliding ribbons on mouseovers and active sections.