Posts categorized as: Tutorials

Building an E-mail Request Invite Form with jQuery

by Jake Rocheleau

April 30, 2012 in Tutorials

Using jQuery we can build some incredible web-based applications. The animations and manipulation of DOM elements using jQuery are much more intuitive than coding regular JavaScript. Because the syntax is so minimalist it’s possible to scale a very complex idea within a few hours time.

In this tutorial I’ll demonstrate how we can build an HTML5 invite form and check the results through jQuery. I haven’t gone into any backend PHP as this isn’t always the best solution for an invitation system. You may want to tie into another e-mail campaign such as MailChimp or Campaign Monitor. But with this technique running the frontend you can quickly implement a backend language to manage the e-mail submissions.

jQuery email invite form tutorial - demo screenshot

Read More

Using CSS3 Animations to Build a Sleek Box UI

by Jake Rocheleau

April 1, 2012 in Tutorials

Back just a few years ago it was required for web developers use JavaScript/jQuery to perform animated effects in-browser. CSS3 has dramatically changed the rules of the game where you can animate any standard property of an HTML element. This opens up a whole new room of effects you can put together in just 15-20 minutes of tinkering with code.

My example below uses a few Dribbble shots as a demo of how you can setup animated box effects. The style appears when you hover over each image to display some further information such as the title, description, and publication date. I’ll be explaining how to build a similar effect on your own website using nothing but HTML5 and CSS3 techniques.

CSS3 hover box animation effects demo page

Read More

Tips for Designing a Compact Website Layout

by Jake Rocheleau

March 9, 2012 in Tutorials

It can take a lot of additional effort to build mobile-specific website templates. HTML and CSS have come a long way but there are still plenty of standards and loopholes to jump through. And with the mounting increase of various mobile devices there are more platforms now than ever before.

In this guide I would like to share some of the most common tips when designing for mobile screens. The web is a fluid beast constantly changing with the times. You have to limit your knowledge of building for desktop browsers in exchange for newer compact designs. The learning process is devious but after a bit of practice you’ll pickup mobile design very quickly.

iPhone 4 white model

Read More

16 Must-Read Tutorials for New HTML5/CSS3 Techniques

by Jake Rocheleau

February 20, 2012 in Tutorials

The year 2012 has kicked off with a booming design and web industry. More developers are entering the web than ever before and it’s the perfect time to brush up on your coding. These tutorials I’ve added below are fresh off the presses and will help you catch up on all the latest HTML5 & CSS3 trends. With just a bit of practice you can pickup on all these skills and really improve the quality of your coding standards.

Create A Minimal Single Page Portfolio With HTML5/CSS3

Read More
Page 9 of 23« First...7891011...Last »