The facts

First, some facts about the site:

• Each tutorial takes two to three days from start to finish. This is also why you will probably not see more than one per week. But you will see more useful non-tutorial articles, in addition to the tutorials;
• The tuts are usually written in the week they are released. Which, basically, makes it impossible to have a Tutorial Monday like Chris Spooner does. However, I do plan to organize things better from now on, and have up to a month worth of articles ready to be released. This will not only optimize my time, but also add the benefit of a consistent posting schedule;
• The tutorials are mainly targeted at intermediate / advanced users. This means that beginners may find it challenging to follow the steps in the articles. I have considered starting a “beginners” section, but I haven’t observed any demand for it. If you’d like to see something similar on the site, share it in the comment section;
• I receive a fair amount of support request, regarding tutorial code. Although I try to help everybody, the accent is on the newer tutorials;
• A lot of the support questions I get (both as comments and as email), have already been answered in that same comment thread. Hopefully, the new comment section will improve this observation;
• After one year of building a readership and concentrating on the site, Tutorialzine is finally open for advertisement. The first sponsors to back the site are maxcdn, who made the new theme load significantly faster. If you want speed, I can advice you to take a look at their services.

The Giveaway

For the occasion, some fine folks have offered great prizes for Tutorialzine’s readers.

Three Scripts from ZineScripts

ZineScripts - Awesome Web Apps

Three readers will win a script of their choice from ZineScripts.com.

Three Copies of Flexi CSS Layouts

Flexi CSS Layouts Dreamweaver Extension

Flexi CSS Layouts is a Dreamweaver Extension that helps you create browser compliant table-less web pages with ease. Unlike other products that are limited to templated CSS layouts with 1, 2 or 3 columns, with Flexi CSS Layouts for Dreamweaver you can build your own custom layout structure without coding.

Three commenters will win a free copy of Flexi CSS Layouts.

Three WordPress Themes from Viva Themes

Viva Themes

Viva Themes creates quality and professionally designed WordPress themes. They offer themes for your business, blog or personal sites. All of that comes with their excellent lifetime support.

Three of you can have a theme of their choice from Viva’s site.

How to participate?

To participate, just leave a comment with a valid email in the comment section below. The giveaway ends on September 9^th when 9 winners will be chosen at random and announced in a follow-up post.

For bonus points, you can tweet the following message:

Happy Birthday @tutorialzine! http://bit.ly/cSOfyg
( click to tweet )

I have always felt that the previous theme was a bit of a hack. It didn’t use any of WordPress’ internal APIs, and I didn’t take the time to properly acquaint  myself with WordPress’ capabilities. The development process was basically one big snippet search and a lot of needless custom code. The result wasn’t pretty, but sure got the job done.

The new look

Here are some of main features of the new design:

• Community News section – one of the most requested features (along with the redesign itself). You can now submit interesting web development articles that you stumble upon on the web. The section is moderated and only relevant submissions will be added to the site on a (hopefully) daily basis;
• Multilevel Comments – something that should have been part of the site all along. Given that the functionality has always been part of WordPress, it is just now that I implemented it in a theme. Better late than never;
• Deep integration with WordPress APIs. Although not externally visible, the new design incorporates a lot of WordPress’ capabilities. Without it, the new Quiz section wouldn’t have been possible;
• The Quiz section – this can be considered as a fully functional web app built into WordPress. Its main purpose is to complement the learning experience of Tzine’s tutorials. Everyone can create and solve quizzes. You can even choose to connect with Facebook, and set up a simple profile with your stats;
• Bye bye tabs – the new design features a pure CSS multilevel navigation menu;
• An eye on CSS3 – images are kept at a minimum, with CSS3 adding subtlety to the design. Most of the images are organized in a single sprite, which improves loading time;
• Many other little things, such as a better search, a clean 404 page, print stylesheet and typography changes, that will make the experience of browsing the site and reading tutorials a whole lot better.

There is still some work left to be done, but I am happy with how the new theme turned out. Please share your thoughts and suggestions (or noticed bugs) in the comment section below.

The New Featured Carousel (Powered By Nivo Slider)

A Pure CSS Multilevel Navigation

Our Favorite Green Demo / Download Buttons Revamped

The Quiz Creator

Today I decided to take the opportunity for a quick review of the past few months. You can view a dedicated stats page set up for the occasion, and grab the Google Analytics PDF for March from the buttons above.

First, the blog

Tutorialzine is a tutorial blog created and run by me, Martin Angelov. I am 21, in my second year of college, and I used to work as a full-time PHP/MySQL developer.

If you’ve come round before, you probably know what this blog is about – easy to follow, step-by-step web development tutorials.

And if you come round often, you’ve probably learned a lot of interesting techniques. However, you folks are not the only ones who have been learning. Although being primarily a coder, during the course of running this site, I learned a thing or two about design, presenting information, marketing and social media. Those are skills much different from programing but increasingly important in this social age.

You Can Read Over 30 Tutorials at Tutorialzine

The stats

Tutorialzine saw some nice growth in the last couple of months, with 2010 being a great year so far. Undoubtedly, social sharing gave the site a nice boost, along with features in many fellow design blogs. The most popular referring social sites:

• Stumble Upon
• Twitter
• Delicious
• Hacker News
• Dzone
• Facebook

Stumble Upon refers almost twice the traffic of twitter, but this must be taken with a grain of salt, as most twitter traffic does not come directly from twitter.com. I won’t be surprised if twitter is actually first.

Interestingly, Digg is not in this list, maybe because it is not as popular as it once was, or maybe it is due to the nature of Tutorialzine’s content (include more naked women in tutorials, note to self).

As of non-social referring sites, the undisputed leader of traffic is Smashing Magazine. Tzine tuts found their way in three of their latest roundups. Even now, nearly a month after the last of these posts, Tzine still gets around 300 unique visitors per day from them, which clearly speaks about the monstrous amounts of traffic these guys are getting.

Google Analytics PDF

The users

But it isn’t all about the eyeballs. It is how engaged users are with your content. And this is going rather well, actually. The average time spent on the site by users is nearing 5 minutes, which, for an educational site, is a small feat.

If you can rely on Alexa.com stats, the audience of Tutorialzine is primarily men between 18 to 34, which is consistent with the IT industry as a whole. This, as strange as it may sound, means that talking about jQuery will not get you to meet many women.

The readership of the site is also slowly increasing. We recently passed 5,000 readers across all our feeds, and 2,000 twitter followers. A big thanks to each and every one of you!

The question

Some people often ask me “Everything sounds nice, but do you make any money out of it?”. And my reply is always the same: “Not yet, but I am trying mom and dad!”.

Joke aside, the greater things in life like love, friendship and kindness do not actually pay your bills. And facing the risk of having to find a real job, some advertising might eventually find its way into the site.

An advice I would give to those of you just starting out with their own blogs (especially in the design niche) is to concentrate on their site and their content alone. Be prepared to invest some months in creating posts, answering readers’ questions and learning new material without desperately looking to fill up your ad spots. Everything with its time.

Love from Pixel2Life

The future

Some of you might have noticed the ZineScripts banners that have been running on the site. This is a project that I’ve been working on in the last couple of months. It puts into code what I love about web development – creating innovative and practical applications, dedicated to one purpose only – making users happy.

Needless to say, a big giveaway is going to take place once ZineScripts is opened. Till then, be sure to subscribe for the launch to get a 50% discount on all the scripts.

I also have a number of fresh ideas about Tutorialzine (including a redesign) but these will have to wait for another post. Till then, happy learning!

Lets start with a cliche. Internet is immense. It is also filled with countless interesting and talented people, who project some of their creativity on the web sites they design, and thus leave their unique mark for us to see. And today, for search of inspiration, we take a look at 50 of their amazing works.

The showcase

http://www.ilovecolors.com.ar/

Incredible attention to detail, soft, pastel colors. Slight grungy look. A must-see.

http://kriscolvin.com/

A blog design with torn corners, grungy look and nice typefaces.

http://www.ozon3.com/

A clean look, amazing illustrations.

http://www.blind.com/

A great looking header section.

http://www.creativemagasine.com/

Fantastic illustrations.

http://austintownhall.com/

A great wooden texture as a header background. Clean and nicely whitespaced look.

http://www.zinaz.nl/

Fantastic background and use of colors.

http://www.tshirtmogul.net/blog/

An interesting boxed look.

http://douglasmenezes.com/wp/blog/

Personal blog with great artwork.

http://www.dawghousedesignstudio.com/

A grungy, hand drawn design.

http://jsbox.net/

Simple design featuring some nice illustrations.

http://www.gruny.net/blog/

Incredible attention to detail. A deep dark design, with contrasting content.

http://designdisease.com/blog/

A smooth design. Great colors.

http://thinkclay.com/

A nature inspired design. Original logo.

http://www.blogohblog.com/

An example on how a high-contrasting logo and light-colored bold typefaces can improve a design.

http://www.chonchstyle.info/v3/

Fantastic illustrations. Incredible details.

http://twibies.com/

An unusual look at web design. In my opinion a successful one.

http://sunduslive.com/blog/

Notebook inspired design. Subtle colors and a great overall feel.

http://blog.kupferwerk.net/

A perfect harmony of design, illustration and feel.

http://www.littleboxofideas.com/blog/

An example how a dirty background can make the illustrations pop-up. Nice typefaces.

http://www.jrvelasco.com/

A highly detailed grungy design, that by going over the top has acquired an unique character.

http://www.tarekshalaby.com/

Great background and content.

http://www.outlawdesignblog.com/

A great design. Every single detail contributes to the wild west feel.

http://bkwld.com/blog/

A design where less is more.

http://www.mutado.com/

Amazing illustrations and typefaces.

http://www.thecreativitywall.com/

A nice overall feel.

http://www.gayadesign.com/

A remarkable piece of design.

http://www.giselejaquenod.com.ar/blog/

Great detail and illustration work in this fresh design.

http://www.chris-wallace.com/

Amazing typefaces and a clean design.

http://abduzeedo.com/

Clean, eye-on-content design.

http://www.duoh.com/news

A simple design which demonstrates the benefits of leaving the right amount of white space.

http://www.blog.spoongraphics.co.uk/

Fantastic design and details. The old paper texture brings a great feel to the site.

http://www.davidhellmann.com/

Again, an example of how grunge design elements bring a more natural look to a design.

http://vikiworks.com/

Great illustrations and attention to detail.

http://ryanmcmaster.com/web-design-blog/

A great radiating background and textures.

http://www.unblogged.fr/

A great combination of a polished typeface on a dark, detailed background.

http://lucyblackmore.co.uk/

Beautiful illustrations. A remarkable artist’s personal site.

http://www.eyebridge.in/blog/

A DIY hobbyist’s design, complete with the tools of the trade.

http://www.freelenz.at/en/

A fresh, classy look.

http://www.alimartell.com/

A design that helps deliver this blog’s message.

http://www.cult-f.net/

Fantastic colors and illustrations.

http://www.elitistsnob.com/

A great design, elegant heading and nice illustrations.

http://loreleiwebdesign.com/

A great logo and textures.

http://www.narfstuff.co.uk/

A great design with detailed illustrations.

http://www.gomediazine.com/

A showcase of design being brought to every aspect of the site and content.

http://www.imwithsully.com/blog/

An artistic and detail-rich design.

http://www.viget.com/inspire/

A peaceful, subtle design with great typeface work.

http://www.cssdsgn.com/

Clean and to the point design.

http://veerle.duoh.com/

An amazing personal site. Features a great amount of detail. Great colors.

http://www.wearenotfreelancers.co.za/

A hand drawn design that streams personality.

We know that the right icons make the good design great. Here we present you with the finest handpicked icon packs on the net.

This list is constantly updated so feel free to add your suggestions in the comments.

Free for commercial use

The following icon sets are free for both commercial and personal use.

glossy eCommerce icons

Free for private and commercial use, featuring the so needed shopping cart, money signs and credit cards.

FRESH Add-on

Business icon pack featuring some must-have pieces.

Css Globe Icon Set

An amazing minimal design icon set.

Bright! – A free stock vector iconset

Features some great general purpose icons to give your design some flair.

Milky – A free stock vector iconset

A milky sweet icon pack.

On-Stage icon set

This smashing icon set features some nice e-commerce icons.

Web Application Icons Set

Great for web applications & e-commerce sites. Released by WebAppers.

Austerity icon pack

Some smooth icons for your design.

License: Personal / Commercial use not specified. You might want to contact the author for permission before using the pack.

Chalkwork Payments

A collection of payment icons for your needs.

Shopping Cart Icon

A fantastic shopping cart icon for any project.

Weby Icon Set

Fantastic icons. Free for any use.

Cult-Foo 50 free icon set

Features some nice e-commerce icons.

Sienna Icons

A truly amazing collection. Features every kind of e-commerce icon you might need in 5 different colors that will match any design.

Credit Card web icons

5 useful credit card & PayPal icons.

Mini Pixel Icons

An icon pack consisting of 320 icons in various color themes.

90 Vector Icons

A vector icon pack (eps format) featuring some great general purpose icons.

25 Free Vector icons

A small vector icon pack featuring an awesome dollar icon – well worth downloading the whole thing. In addition you get some great general purpose icons for your designs.

Free for personal use only

The following icon packs are free only for personal use. You’ll have to contact the respective authors of each set for use in commercial projects.

Leopard Reflective Icon Set

A fantastic free for personal use icon set. Features some amazing e-commerce icons.

Finance icon set

A full set of financial and e-commerce icons, including shopping carts, money icons, credit cards and charts.

License: You have to put a back link, or a licensing fee has to be paid.

Free Vector Diagram Icons

Some great free for personal use vector diagram icons.

Dragon Soft Icons

Some slick business style icons, free for non-commercial use.

The Robbery Icons Set

A few money stolen robbery icons, free for non-commercial use.

Statistics icon pack

A couple of chart icons for personal use.