20+ HTML5 Tutorials, Resources & Tips

Published January 16th, 2013 in Web Development - 7 Comments

HTML5 offers plenty of potential for web designers and developers, especially when combined with CSS3. The possibilities of HTML5 are exciting, and many designers/developers have been creating amazing things that weren’t possible with HTML and CSS in the past.

The life and career of a web designer/developer requires learning new techniques rather frequently due to changes in technology, and HTML5 is no exception. This post will serve as a guide to help you find tutorials and resources that will allow you to improve your own skills with HTML5.

Here’s a collection of HTML5 tutorials, resources & tips to help you understand HTML5.

HTML5 Tutorials:

Design & Code a Cool iPhone App Website in HTML5

Details of 10 E-Commerce Platforms

Published January 14th, 2013 in Web Development - 23 Comments

When it comes to choosing a platform for an e-commerce website there are plenty of options. Having options can be a good thing, but in some cases having too many options can make it difficult to know which one to choose. In this post we’ll take a look at 10 leading options and we’ll provide some details about each. They are actually broken down into 3 categories: hosted, open source, and hosted shopping cart.

Hosted e-commerce platforms will charge a monthly or yearly fee, which will include web hosting, use of the e-commerce system, and support. You’ll have to host your site with them in order to use the system. The downside to this is that you won’t be able to choose your own host, but the upside is that you’ll get support for hosting and the e-commerce system from the same place, and they will know their own system very well. Also, since it is hosted they can take care of most security details.

Open source e-commerce platforms can be downloaded and hosted anywhere. You’re not committed to a particular host, which can be a good thing. The downside is that support is likely limited to a forum or wiki. For designers and developers open source solutions can be a good choice, but end users who are looking to set up their own site will likely face more obstacles with an open source, self-hosted system as compared to a hosted platform.

Hosted shopping carts will allow you to use the CMS and host of your choice, and they will just host the shopping cart and checkout process for you. So they’ll still handle the security details since the payment will be processed through their site, but you won’t host your entire site with them.

So now we’ll take a look at the specific platforms. Certainly there are plenty of other options that could be included, but we have tried to limit the number to a few in each category to avoid overload.

Hosted E-Commerce Platforms:

Shopify 

Recent and Useful Tools for Web Development

Published January 8th, 2013 in Design, Tools, Web Development - 7 Comments

Looking for new ideas for your next project? you stepped into the right place. This post talks about brand new web tools that convert good ideas in excellent pieces of web development. Slowly but constantly, web tools are replacing desktop programs and It is very likely that in the future there will be no need of hard drives since everything will be in the cloud. The greatest developers for desktop applications will need to adapt to this or disappear. We bring you some tools that show the future now. So that you start adapting to it.

We Love Icon Fonts

How To Code a Vertical Accordion Nav Menu with jQuery

Published December 19th, 2012 in Tutorials, Web Development - 29 Comments

Website navigation is an important aspect to any functioning layout. Users will often be looking for methods to traverse over your pages, and sometimes this requires a bit of creativity. I love the idea of vertical navigations especially with sub-menu links.

In this tutorial I will demonstrate how we can build a simple vertical navigation accordion menu using CSS3 and jQuery techniques. We can build custom styles and format the links to slide down & up on each click. Using this method we can also build sub-menu links, splitting up headers by ID or class names. Follow along with the ideas below and feel free to download a copy of my source code.

CSS3 Image Gallery with Dynamic Caption Text

Published November 26th, 2012 in Tutorials, Web Development - 0 Comments

I have run into lots of tutorials on the web focused around creating stunning image galleries. These often include photo boxes or alternate JavaScript-enhanced functionality. Nominally in the modern era of web design there isn’t any problem with dynamic scripting.

For this tutorial I want to show how we can build a standards-compliant HTML5/CSS3 image gallery with fading captions. We will be using CSS3 transitions to create the animated effects. Also I have been working with a number of CSS3-specific properties on this tutorial alone. It leaves room for interpretation if you wanted to implement a JavaScript frontend animation using CSS3 as a fallback.

Coding a Bare-Bones HTML/CSS E-mail Newsletter Template

Published October 22nd, 2012 in Tutorials, Web Development - 13 Comments

There are a lot of tutorials out there explaining the major benefits of building an e-mail newsletter. It definitely draws attention to your website and helps regular readers keep up with new publications. But not everybody has the time or knowledge to build their own newsletter design.

In this tutorial I want to go over the process of building a very basic HTML newsletter. I’ll explain some key steps along the way and you can grab a copy of my source code as well. When you’re building HTML code for e-mail clients the work process is a whole lot different. But once you understand the basics you’ll have an easier time working with more complex layouts.

How To Build a Mobile Detail List Webapp in HTML5/CSS3

Published September 18th, 2012 in Tutorials, Web Development - 6 Comments

There are countless mobile applications which use list views in their UI. Both Android and iOS offer platform-specific designs to make building applications easier. But there is another template you can build with just typical HTML5 and CSS properties.

In this tutorial I want to introduce a method for building clean HTML5 mobile web applications. For the demo below I’ve limited the width at a maximum of 800px but you can theoretically scale to any browser size. This is what makes mobile web development so profitable – the amount of control you have over the user experience. You can follow along with the tutorial code and download a copy of my source files from the link below.

Facebook-Style Inline Profile Edit Fields with Ajax

Published August 20th, 2012 in Tutorials, Web Development - 9 Comments

The standard Facebook layout is well known amongst fans of social media. Many of the dynamic form fields on the website started a huge trend of Ajax-powered backend scripts. Now we can see open source PHP developers offering examples of their code for dozens of platforms such as Wordpress, Drupal, or Joomla!

In this tutorial I’d like to focus on building a simple jQuery inline edit field. We won’t store any data locally, but instead we can update the HTML data directly on the page after each edit. It’s possible to then tie into a MySQL database and store all these values as default. But for now let’s code the mere frontend functionality.

Coding a Pixel-Style Video Game Fansite in HTML5/CSS3

Published August 10th, 2012 in Tutorials, Web Development - 1 Comment

There are not as many newer gaming fansites which utilize the power of HTML5 and CSS3 techniques. Some of the more popular gaming titles such as Final Fantasy and Kingdom Hearts have a devoted following. A large fan base will accompany forums and other online message boards – but this isn’t always the most successful CMS solution.

In this tutorial I want to demonstrate how we can build a simple retro Pokemon fansite layout using some newer CSS3 tricks. To keep the template fairly simple I haven’t included any extra jQuery effects. Although admittedly there is plenty of room for such a system of dropdown menus or sliding panels on the home page. Additionally I’ve included a few sprite resources ripped from the first 2 generation games.

Optimizing Your Mobile Design

Published July 10th, 2012 in Web Development - 4 Comments

With page views from mobile devices on the rise, shifting focus from standard to optimized and responsive design has become even more vital in preventing alienation of your site’s visitors. Some of the obvious elements exist: you have to use responsive design to make sure that your mobile website will fit on any size of screen. You have to design your mobile website so that people can use it with one thumb while they hold their phone with the other four and their dog’s leash with the other.  You have to design a mobile site so that it loads quickly and puts minimal strain on the user’s bandwidth limitations.

But there’s much more to the mobile web experience. Mobile websites are more than just tiny versions of your website, because people interact with mobile devices in different ways than they interact with desktop devices.