Colorburned

22 HTML5/CSS3/jQuery Tutorials for Frontend Web Developers

Jake Rocheleau — Fri, 04 May 2012 12:50:26 +0000

When discussing web applications you always have to split development into two areas. Unless you are skilled both in the backend coding and frontend design markup, there is a dividing line between these two areas. HTML5/CSS3 are really starting to snowball in popularity. And with the jQuery library already infamous amongst JavaScript developers these 3 languages can streamline the development of any web project.

But the problem is that many designers are put off from starting on the frontend. It truly doesn’t take a lot of difficulty to complete a full web design. But when you add in the code aspect it can amount to a few extra days or even weeks of work. The tutorials I have added below are geared towards designers interested in bulking up their knowledge on coding frontend web layouts. Check out some of these fascinating skills and see if you can replicate the functionality in your own website.

HTML5 Grayscale Image Hover

Useful Links for Learning CSS @Keyframes Animation

Create a Responsive Web Design with Media Queries

Mobile Navigation Design & Tutorial

Using Backgrounds in CSS3

jQuery Timeline Animation

Wrangle Async Tasks With JQuery Promises

CSS Refreshers: Borders

Progressive and Responsive Navigation

Techniques For Overcoming Poor CSS Support In Email

Gridpak: The Responsive Grid Generator

Simple jQuery Filtering using Quicksand

Learn jQuery Faster with Firebug, jQuerify, and SelectorGadget

Smoother Loading Typekit Fonts

Essential Responsive Web Design Testing Tools

Login and Registration Form with HTML5 and CSS3

Responsive Content Navigator with CSS3

Accordion with CSS3

Timeline Portfolio

Apple-like Login Form with CSS 3D Transforms

The Apple.com navigation menu created using only CSS3

Keyframe Animation Syntax

32 Amazing Minimalist Website Layouts

Jake Rocheleau — Wed, 21 Mar 2012 14:10:15 +0000

Minimalism is a commonly adjusted technique for web and mobile design. When you strip a layout of everything except key elements you begin to understand minimalist design patterns. Visitors will often find what they need a lot quicker. Plus your website files are much smaller than average.

Web designers and freelancers look towards minimalism to elegantly showcase their portfolio works. I’ve put together a small gallery of minimalist layouts which you can check out below. Additionally if you have your own thoughts on minimalist web design please share with us in the post discussion area.

Berit Somme

Bärnt & Ärnst

Made By Shape

Image Mechanics

80/20

Built by Buffalo

Claire Coullon

Louise O’Reilly Visual Arts

Makr Carry Goods

Mario Hugo

Corpus

Marlon Medau

ReprintMe

Gifted

Black Box Press

Girlfriend

Tinkering Monkey

Poccuo

Area17

Corporate Risk Watch

Lisi Design

Logartis 2011

Hanzell Vineyards

Fontsmith

Klipp og Lim

Soup Agency

Styiens

Clearleft

Bags of Joy

Resoluut

Alexander Munk

Character Branding

29 Exciting New Business Card Themes

Jake Rocheleau — Thu, 23 Feb 2012 16:53:56 +0000

The corporate world has been rapidly advancing along with numerous design schemes. Individuals are able to network like never before and it has created a heavy demand for local business. Thus business cards are still vitally important for sharing your information and building a respectable client base. Check out these 29 card themes and you may even come up with a fantastic idea of your own. Similarly you can share fresh business cards and concepts in the discussion area below.

Franco Business Card Design

Nurture Athletics

Nurture Athletics – Side View

Interactive Business Card

Mattson Creative

“Where’s My Hippo?” Animal Crackers

Sight for Style Designs

Circlebox Creative

Front Creative

Hidden Creative

bklyn

Paintbrushes

CBS Group

Die-cut Letterpress

Creative Sweet

Jack Hooker Graphic Design

FiveRuns

Elizabeth Maybury

Julia’s Poppies

Hannah Maple

Sarah Green’s tea bag card

Rick Turner Photography

AppWare iPhone Business Card

Greenward Shop in Cambridge, MA

Frosted Plastic

kama graphic designer

breadxmilk

Quality Piano Moving

Fiverr

20 iPad Applications for Freelancers & Webmasters

Jake Rocheleau — Tue, 14 Feb 2012 14:54:58 +0000

Since Apple unveiled the iPad back in 2010 it has been rapidly adopted by western culture. It appears that home computing is advancing into a new realm of mobility. Tablet PCs allow us to accomplish tasks more efficiently with less software and hassle in-between.

The App Store just adds a huge bonus where developers can build and submit their software. Freelancers and web designers alike can benefit from many of these apps. Below I’ve put together a collection of 20 wonderful iPad applications you should check out. These are handy for task management, communication, networking, designs, and a whole lot more!

Freelancer

Gusto – Code Editor and FTP Client

SketchPad HD

Markup for iPad

Things for iPad

Outpost 2

App Cooker

Adobe Ideas

Graphics Designer ToolBox

OmniGraffle

iMockups for iPad

Font Book for iPad

SketchyPad

Analytics HD

WordPress for iPad

PlainText – Dropbox text editing

Freeform – The Vector Drawing App

Penultimate

Color RGB

Artist’s Touch for iPad

Giveaway: Win 250 Die Cut Business Cards From UPrinting

Grant Friedman — Mon, 31 Oct 2011 14:00:51 +0000

Hello everyone! Our friends from UPrinting have decided to sponsor yet another fantastic Colorburned giveaway. UPrinting knows how much you guys love and want Business Cards so they have decided to give away 250 Die Cut Business Cards to 1 lucky reader of this website.

Update: Congratulations to Selena Benally. You have won 250 business cards from UPrinting.

By now, most of you probably recognize UPrinting. UPrinting is an online printer that supports many popular design sites in the community, including this one. I’ve used UPrinting before and can vouch for the quality of their work. If you’re looking to print some business cards quickly and cheaply, you should definitely look into UPrinting’s services.

To win 250 Die Cut Business Cards of your own, leave a comment below and tell us what you would do with some free cards.

Up for Grabs

250 Die Cut Business Cards for 1 reader.

Card Specifications

1.75" x 3.5", 2" x 3.5", or 2" x 2"; 2.5" Diameter (Circle) Rounded Corners, Leaf, Rounded Single-Corner, Half-Circle Side, or Circle.
14pt Cardstock Gloss / Matte / High Gloss (UV), or 13pt Cardstock Uncoated.

Rules

Leave a comment to enter. Tell us what you would do with some free cards.
Only comment once.
Tweet This giveaway to your followers! (Optional)
Like UPrinting on Facebook (Optional)
Please leave a valid email address so that we can contact you.
Entries will be accepted until Friday, November 4, 2011 at 11:59 PM EST.
6 Business Days Turnaround
Limited to US residents 18 years old and above only

This giveaway was sponsored by UPrinting.

Update: Win a Free Business Account From BaseKit (x3)

Grant Friedman — Mon, 19 Sep 2011 20:12:23 +0000

As a designer, you’ll have to create your own website at some point in your career. A website is an important aspect of any business and is something most designers spend quite a bit of time on. Unfortunately, many designers aren’t expert web designers. Some may know code very well; but others may be illustrators, print designers, or photographers; and let’s face it, our time is always limited. That’s why today, our friends from BaseKit have come to the rescue and are giving away a free 1-Year Business Plan ($240 value) to 3 lucky readers of this website.

Update: Congratulations to Esz, Karen Hall, TRY! You have all won a free business account from BaseKit!

BaseKit is a website builder that allows you to create professional websites from within your browser. You don’t need any technical skills and there are loads of templates and widgets that you can use to create your own business website design. Simply choose how you want your site to look, add your content and publish.

Some of you may be wondering what makes BaseKit different from all the other website builders out there. In the past, other website builders relied on flash as a platform to build their sites. Those sites tended to be a bit clunky. BaseKit changes all that and is fully HTML which means they work on all devices – even mobile phones. To learn more about BaseKit, visit their website.

To enter to win a free Business Plan from BaseKit, all you have to do is leave a comment below and tell us what you would use BaseKit for.

Up For Grabs

A Free Business Plan for 3 lucky readers.

Rules

To enter, leave a comment below and tell us what you would use BaseKit for.
You may only enter once.
Make sure to enter a valid email address so that we can contact you.
Entries will be accepted until Friday, September 23, 2011 at 11:59 PM, EST.

Screenshots

You can see some screenshots of BaseKit below.

Connect With Other Designers on UCreative

Grant Friedman — Thu, 04 Aug 2011 19:26:28 +0000

Are you looking for a place to connect to other artists and designers? A place where you can share your ideas, ask for help, give advice, or just showcase your work? If so, then you should check out UCreative. UCreative is a social network from our friends at UPrinting that hopes to bring artists and designers together in one place.

On UCreative you can set up a profile, post things on your wall, add photos and images, browse for inspiration, chat in the forums, and even search for jobs. Basically, anything you’d expect from a design-related social network. To learn more about UCreative, visit their site or just sign up!

Screenshots

Take a look at some of the screenshots of the UCreative site below:

This post was sponsored by UCreative.

10 Seamless Plaid Patterns for Illustrator and Photoshop

Grant Friedman — Tue, 12 Jul 2011 14:00:11 +0000

It’s been a while since I’ve published much of anything around here so today, I’ve put together a set of 10 seamless plaid patterns for Illustrator and Photoshop that you can use in your designs. The patterns are available in both Illustrator and Photoshop format and can be imported as a .PAT file in Photoshop or as an .AI file in Illustrator. When you open the Illustrator file don’t forget to check the swatches palette. Hope you guys enjoy this set! Hopefully, I’ll have some more goodies for you soon.

Win 100 2 x 4 Stickers from Next Day Flyers (x2)

Grant Friedman — Tue, 17 May 2011 16:28:28 +0000

Hey guys! Today, we’ve got another giveaway exclusively for the readers of this website. Our friends at Next Day Flyers are giving away 100 2 x 4 Stickers to 2 lucky Colorburned readers. To enter, all you have to do is leave a comment below and let us know what you would do with your new stickers. Stickers can be used for a variety of marketing purposes, including promoting a band, spreading the word about your favorite political candidate, and branding retail locations. How would you use the stickers if you win?

Next Day Flyers is an online printing company that delivers top-quality printed marketing materials with one of the fastest turnaround times in the industry. They specialize in full color printing of a ton of products including, business cards, rack card printing, and of course, sticker printing. Naturally, all their printing is customized. You can upload your sticker designs directly to their site. They also have a tool where you can design your stickers online. There are a lot of templates you can use, or just have fun and start from scratch. To learn more about Next Day Flyers, visit their website.

Update

Congratulations to David Radovanovic and Andrew Ensley you have each won 100 stickers from Next Day Flyers. Some one should be in touch soon regarding how to redeem your winnings. Thanks everyone who participated.

Up for Grabs

100 2 x 4 Stickers (x2)

Rules

Leave a comment to enter.
Tell us what you would do with some free stickers.
Only comment once.
Tweet This message to your followers! (optional).
Please leave a valid email address so that we can contact you.
This is a 4-day contest. Entries will be accepted until Friday, May 21, 2011 at 11:59 PM EST.
Free shipping to continental U.S. residents only.

Win a $100 Apple Gift Card From Pagelime

Grant Friedman — Mon, 11 Apr 2011 14:00:41 +0000

Have you ever wanted to set up a simple 5 – 6 page website with CMS integration in about 15 minutes? With Pagelime, you can! Pagelime is a sweet, simple CMS system that requires no code knowledge, server configuration, or database setup. Today, our friends at Pagelime would like to spread the word about their CMS product by giving away a $100 gift card to one lucky reader of this website.

Update: Congratulations Sarah Canieso! You have won a $100 Apple Gift Card from Pagelime! Enjoy!

Before we get started with the giveaway, I’m sure you have some questions about how Pagelime works. Integration with Pagelime is easy. All you have to do is add some simple CSS tags that define what on your website is editable. Your website can be hosted on any FTP accessible web host and Pagelime will connect and take care of the rest. When your clients log-in to Pagelime, all the editable areas reveal themselves and they can live-edit, preview, and draft their changes. The presentation is 100% AJAX and pretty slick.

But Pagelime is more than just basic image and text editing. You can use repeating regions, page cloning and templating for creating new pages, document and image libraries, Google analytics, SEO editing, and a full versioning system they call “Content History”. When you reach the Professional level you also get a dynamic navigation editor that allows for drop-in menu publishing. For the power users out there, Pagelime also works with all forms of includes (PHP, SSI, CFM, etc). If you have included content and edit it off of a page, Pagelime just figures everything out and publishes it into the appropriate file. You can also publish your content as XML to feed dynamic image galleries, sliders etc.

Pagelime is free but they also provide a professional, business, and enterprise plan that starts at just $19/month. They also have an iPhone app that will allow you to edit your sites directly from your phone. Pretty cool!

To learn more about Pagelime, visit their website and check out the demo video. Pagelime is very likely the most advanced, client friendly, simply CMS solution out there with a vibrant community of about 17,000 users. Definitely give it a look over and see if it is the right solution for you and your clients.

To help promote their product, our friends at Pagelime are giving away a $100 Apple gift card to 1 lucky Colorburned reader. To win, all you have to do is tell us what you think about Pagelime on Twitter. Feel free to say whatever you like but you must mention @pagelime in the Tweet. Once you’ve sent your tweet, make sure you post a link to the tweet as a comment below. This is important because otherwise your entry will not be counter.

Rules

Tell us what you think of @pagelime on Twitter.
Say whatever you like but you must mention @pagelime in your message.
Post a link to the tweet below as a comment.
You can only enter once.
Please leave a valid email address so that we can contact you.
Entries will be accepted until Friday, April 15, 2011 at 11:59 PM EST

This giveaway and review is sponsored by Pagelime.