21 Best Websites for Teaching Yourself Web Development

by Jake Rocheleau
on May 14, 2012

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

I remember how popular web design was even 5 or 10 years ago. Kids in high school were teaching themselves HTML and building small web pages from scratch. And nowadays this is possible because of the thousands of free tutorials and code online. Open source has dramatically shaped an industry of high-tech and high demand.

But it can still be difficult pinpointing exactly what you want to learn. Beyond straight HTML/CSS there is jQuery for frontend animation, PHP/RoR for backend web apps, and even Java/Objective-C for mobile apps. With this collection you should be able to track down a few tutorials in whatever topic catches your interest. If you notice we’ve missed a resource feel free to share with us in the post discussion area below.

Pixel2Life

Read More

Building an E-mail Request Invite Form with jQuery

by Jake Rocheleau
on April 30, 2012

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

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
on April 1, 2012

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

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
on March 9, 2012

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

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
Page 8 of 25« First...678910...Last »