Webdevtuts » List

20 Inspirational Flash like websites that uses Javascript

Marcell Purham — Thu, 02 Dec 2010 20:39:12 +0000

Today I have a made a roundup of 20 Inspirational Flash like websites that uses Javascript functionality as it main source of website functional instead of flash. Click on some of the website and check out some of the cool effects. Enjoy!

Popular Front

World of Merix

Loewy Design

Serial Cut

Best Before

Nofrks

Cpeople

Intermission Design

Wearex3

J and K

Dreamerlines

Ormanclark

Enterrodagata

Suiepaparude

Matt Zeilinger

Search Inside Video

Lucino Gene

Rachel Bloch

Peter Pearson

Morphix

20 Creative and well designed myspace layouts that will inspire you

Marcell Purham — Mon, 08 Nov 2010 07:44:17 +0000

I know that Facebook is the new era of social networking but there are still millions of people who use Myspace. So that being said In today’s roundup I like to share with you all 20 well designed and very creative custom Myspace pages that will inspire you.

Trak Invaders – Official Myspace

Sayd Des Mureaux

Deja Drew

D. Folks

The Shoreline

Clark Street Recordings

DJ King Dee

Libo

Detached

Fallen From The Sky

Abraham Blue

The Sunshine Getaway

FU THE CHINESE MAN

junkie and the spider

AUBREY WOOD

Hip Kitty

Still B

ALAINE

OPERATION NICARAGUA

Shine Drums

10 tips that will help you help you become a GREAT web designer by day and night

Marcell Purham — Mon, 16 Aug 2010 20:29:02 +0000

Making yourself a better web designer can seem quite difficult at first but with a little bit of work you will be there in no time. In this article I will list 10 tips that will help YOU become a better web designer by day and night. enjoy!

Join Forums and design communities: Joining forums and design communities will help your communication skills with others and will give you the chance to show off your work while others critique it.
Watch & Follow Tutorials: Constantly learning is always a good thing considering you’re staying up to date with the latest trends and you must admit that it feels great whenever you’ve learn something new for the first time.
Play around with different programs: Mastering a program can be very hard but continuously playing and messing around in that program will help you become a better designer because you’re making yourself familiar with the interface which allows you to be proficient with different tools and techniques.
Enter contest: Entering contest will make you become a better designer because you can see where you stand with others. You might be one of the best or one of the worst but constantly trying and competing will make you a become great at creating websites.
Watch your competition: Watching your competition is must because you want to see what they’re doing. If they’re building HTML5 Themes with CSS3 then you want to be on the same page as them.
Communicate with other web designers Being socially active with other designers, or friends that design is a great way to get honest and great feedback plus it’s always good to have friends on and offline.
Answer design related questions: Many Web designer that just start off designing and coding often have questions, answer their question. It might be a question that you once struggle on back then but now know the answer to it.
Write tutorials for design related blogs: Writing tutorials will help you in many ways since you’re always searching or sharing new ideas with others. I often write tutorials and sometimes even go back and follow my own tutorial so that shows you can teach others and yourself.
Don’t give up, solve it yourself: As a web designer we often run into many bugs or problems that we get very frustrated upon. I think solving the problem yourself makes you a better web designer because you’re learning something new and your getting familiar with bugs and so fort so the next time you run across it you will be able to fix it within no time.
ALWAYS PRACTICE WRITING CODE: That’s write I think this is one of the most important parts of being a web designer, writing code. Always writing code will help you become a very good web designer because you’re making yourself familiar with the HTML, CSS, Javascript and other web related tags. You will also be considered a great worker and fast coder . –

10 Amazing Featured Content & Image sliders That you can use for your next project

Marcell Purham — Wed, 21 Jul 2010 16:23:12 +0000

Finding the right featured image sliders for a project can be very difficult and time consuming. In this roundup I picked 10 of what I think are the best image sliders that you can use on your next project. The image slider can used for featured sliders, and content sliders. enjoy.

Create an Image Rotator with Description (CSS/jQuery)

An image rotator is one great way to display portfolio pieces, eCommerce product images, or even as an image gallery. Although there are many great plugins already, this tutorial will help you understand how the image rotator works and helps you create your own from scratch.

jQuery Image Gallery/News Slider with Caption Tutorial

A really cool News Slider that uses two scrollers to create very slick effect. It uses scrollTo to scroll both description and image items and it comes with previous, next, play, stop and mouseover events.

Create a Slick and Accessible Slideshow Using jQuery

In this in-depth web development tutorial, you’ll learn how to create a usable and web accessible slideshow widget for your site using HTML, CSS, and JavaScript (jQuery). In the process, you’ll see the concept of Progressive Enhancement in action.

Create Beautiful jQuery slider tutorial

This tutorial explains how to develop Create Beautiful jQuery sliders tutorial with image description and name.

Supersized Full Page Image Slider

So, what exactly does Supersized do? Resizes images to fill browser while maintaining image dimension ratio, Cycles Images/backgrounds via with transitions and preloading, and Navigation controls allow for pause/play and forward/back

Jquery Coin Slider

The coin slider is a featured content slider that can be used in many different ways. It’s fancy transitions and unique effects makes this slider worth while.

Jquery Nivo Image Slider

Nivo slider is another awesome jquery plugin that allows you to create a dynamic image slider with style.

GalleryView: A jQuery Content Gallery Plugin

GalleryView aims to provide jQuery users with a flexible, attractive content gallery that is both easy to implement and a snap to customize.

Making a Slideshow with jQuery

I’m going to walk you through how to apply jQuery to an ever more common development scenario, animating a home page slide show.

slideViewerPro

slideViewerPro is a fully customizable jQuery image gallery engine which allows to create outstanding sliding image galleries for your projects and/or interactive galleries within blog posts.

45 Resources & Tutorials for designers and developers

Marcell Purham — Thu, 24 Jun 2010 02:05:44 +0000

With the web constantly changing and technology always improving it can be very difficult to keep up with everything especially if you’re a designer or developer. In this Article I have listed 45 tutorial & Resources for designers and developers that you might find useful. After this post you should have a good start or lead in the web development field. Enjoy

HTML 5

HTML 5 Cheat Sheets

Smashing Magazine has release a great HTML 5 cheat for designers and developers who looking forward to learning more about HMTL 5. This Cheat sheet will help you familiarize the latest HTML 5 tags,and new tags that are being brought into HTML .

HTML 5 Canvas Cheat Sheet Vol 1

Check out this HTML 5 Cheat Sheet via Webmastersucks. Has a great layout and can teach you a ton. Check it out.

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3 – HTML5 is the future of web development but believe it or not you can start using it today…
Coding A HTML 5 Layout From Scratch – HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project….
How to Make an HTML5 iPhone App – You’ve been depressed for like a year now, I know. All the hardcore Objective-C developers have been having a hay-day writing apps for the iPhone. You might have even tried reading a tutorial or two about developing for the iPhone, but its C—or a form of it—and it’s really hard to learn.
Have a Field Day with HTML5 Forms – ere we’re going to take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques.
Designing a blog with html5 – Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages but there are a slew of new elements that allow you extra semantics in your conventional Web 1.0 pages…

Javascript

Creating a Slick Auto-Playing Featured Content Slider

Create a slick auto playing featured content slider with Chris Coyier from Css-Tricks. Slider is great and can be used for many things.

Starbox Rating – Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype javascript framework
Using CSS and Mootools to simulate Flash horizontal navigation effect – I had a new “conversion” from FLASH to HTML when I discovered the CSS beauty. In particular using Flash I loved this kind of layout/effect: follow mouse sliding content.
Coda Slider Effect – Create an amazing coda slider using Jquery. The code slider can be used for many things such as image galleries, content sliders, and much more. Go check it out.
Sliding Top Panel – This tutorial explains how to realize a simple sliding top panel (top/down) using mootools, some line of css code and JavaScript.
Scrollable – The main design goals of this tool are to provide visual customization, ease of use and programmability. The first version of the library was released on January 3, 2008. Since then, this tool has come a long way and it is now a stable and mature product.

WordPress

WordPress Cheat Cheet

The number of WordPress functions can be dauntingly. Why not print a helpful cheat sheet for future reference? This one will do the trick!

How To: Create a Theme Options Page for Your WordPress Theme – Theme Options pages are growing in popularity among quality WordPress themes. They provide the user with greater customization control over their website without having to know a hint of HTML or CSS.
WordPress 2.7+ User Link Feed Submit Form and Widget – In this article tripwire magazine provides a mini-tutorial on how to setup a User Link/News Feed solution in WordPress 2.7+. I really think it is a nice feature as it gives a blog dynamic content and it it may actually drive traffic from bloggers looking for sources to get some easy and free traffic for their own site.
WordPress Multi-Level Drop Down menu using jQuery – As WordPress theme designers, we’re often faced between the choice of going for purely CSS drop-down menu or javascript drop-down menus in our struggle with cross-browser compatibility.
PSD to WordPress Series Part 1 – I know there are many developers and normal people who want to know how to design a wordpress theme from scratch. Well today is your lucky day. In this series, PSD to WordPress we will design a Mockup in Photoshop, then code it for wordpress.
Stylizing Threaded/Nested Comments in WordPress 2.7 – One of the features I love in WordPress 2.7 is the ability to have threaded (nested) comments up to 10 levels deep. While viewing comments on this – or any WordPress 2.7-powered – site, you’ll notice a Reply button (assuming nested discussions are enabled). Clicking that will enable you to reply directly to that comment,

Drupal

Drupal Cheat Sheet

I put together a Drupal Theme Developer’s Cheat Sheet that includes some of the most handy reference information for themers. The cheat sheet is specific to PHPTemplate, the most common theme engine for Drupal. The two page cheat sheet includes information on available variables, file naming conventions, sample code, and more.

Drupal 6 & 7 Theme Guide – This handbook is about customizing the look and feel of a Drupal site. If you are developing a module that outputs presentation data, then please read the module developer’s guide Using the theme layer section.
PSD to Drupal Theme Conversion – This tutorial will show you how to take an existing design in either Photoshop or Illustrator to XHTML to a working Drupal theme.
Building a multi-language site – The following steps are for those who want to have a simple site available in different languages. The goal is to have content translated to two or more languages and the visitor to be able to choose any of them.
Building a Website with Drupal 6 – – I have decided to keep that website in Drupal 5 and create a whole new website in Drupal 6 for these series of tutorials because there is still sufficient interest in using Drupal 5. I will tag the tutorials “Drupal 6″ and “Drupal 5″ so that you can choose which ones you’re interested in
Organizing content with taxonomy – You can set up a taxonomy that allows users to add terms (also known as tags or metadata) to content. The taxonomy for a site contains one or more vocabularies and each vocabulary contains a set of terms.

CSS 3

CSS 3 Cheat Sheet

In this post we present a printable CSS 3 Cheat Sheet (PDF), a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C.

Border-image: using images for your border – Another exciting new border feature of CSS3 is the property border-image. With this feature you can define an image to be used instead of the normal border of an element.
How to achieve cross browser font face support – At the moment, web fonts are all the buzz. Unfortunately, achieving cross browser support is not easy. In this tutorial, I’ll show you how to get custom fonts working in all of the major browsers.
Awesome Buttons with CSS3 and RGBA – I never thought the day would come where you could create nice looking buttons without images. Well in this tutorial CSS3 is put to use to make a dream come true.
Creating a Polaroid Photo Viewer with CSS3 and jQuery – Ever wanted to create a cool image gallery but you didn’t know flash? Well in this tutorial Mark creates a phenomenal tutorial on how to create a Polaroid photo viewer. Javascript is the new flash.
How To Create Depth And Nice 3D Ribbons Only Using CSS3 – CSS3 is great especially when you do not have to use images or css sprites to achieve the depth boxes technique.

PHP

PHP Cheat Sheet (V2)

The second version of the PHP Cheat Sheet, a quick reference guide for PHP, with functions references, a regular expression syntax guide and a reference for PHP’s date formatting functions.

Build a phpBB Forum in 5 Steps – If you’re thinking of setting up a forum for your Website, you need not start from scratch. The open-source script, phpBB, can easily be installed on most Web servers. This article will describe how to do it right, from downloading through to customisation.
PHP Login script tutorial – Learn to create a simple login system with php + mysql script, this tutorial easy to follow, teach you step by step.
Simple PHP Website tutorial – If you ever tried making a simple website with only a handful of pages, you probably noticed that once you need to edit some menu element, you have to edit all of your pages, which can be very irritating.
Creating a Mail Client, Part 1 – This tutorial is Part 1 of a series on creating a Mail Client. In Part 1, I will show you how to send mail. You may download and print this tutorial as necessary.
How to keep your website secure from hackers and attacks – Such as server “which are always on” is designed as a system for security is an important issue. Web servers are the backbone of the Internet. The basic services and functionality across the world billions of websites and therefore everyone’s personal information store that serves as the journey.

Other Resources

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

More and more we see people using horizontal sliding panels on their websites. And they usually look very nice! Some will put a contact or login form in there, others will put some information about them and their website, or even things like a tag cloud or social networking buttons.

CSS3 Dropdown Menu

While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow.

Halftone Navigation Menu With jQuery & CSS3 – Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.
Nice CSS3 Gradient Buttons – There was a time where creating a nice looking, scalable button required heavy use of images, the sliding doors technique and even some javascript.
Creating Modules for Drupal – This tutorial describes how to create a module for Drupal 6. It is an update to the tutorial for Drupal 5.
Delicious Recipes for WordPress Page Menus and Page Listings – There are so many awesome ways to display your WordPress pages. Out of the box, WordPress provides two different template tags for displaying lists of your site’s pages.
Drag and drop HTML 5 – As we have mentioned in some of our previous articles & tutorials HTML 5 offers designers, developers and people in general a much richer experience, we are still just scraping the surface of the new markup, so today we are going to have a look at how to create a HTML 5 page that uses the new drag and drop feature.
Making a Mosaic Slideshow With jQuery & CSS – Today we are making a jQuery & CSS mosaic gallery, which will feature an interesting tile transition effect when moving from one slide to another.

30 Social Networking websites that were created using Drupal

Marcell Purham — Wed, 26 May 2010 14:56:36 +0000

Drupal is a great Content Management System for starting and running social networking websites. In this post I have listed 30 Social Networking websites that are created and ran on Drupal CMS. There are some pretty cool sites that uses Drupal. Enjoy!

Athlete Focus

Babelup

Chris Brown World

Drupalsn

Fast Company

Going On

Grad Spot

Joshua Bell

Kat Deluna

Mothers Click

Grammy

Eric Lapton

Robbie Williams

Francesca Music

Michael Jackson

Virgin radio

ABC Family

Duke

White House

World Food Programme

Avrill Lavigne

Yahoo

Beyonce

Fox Search Light

AOL Corporate

Universal Music Group

My Fine Pix

End Poverty 2015

The Nursery

On Networks

Pop Sugar

30 creative and illustrative mixtape covers that will inspire you

Marcell Purham — Wed, 28 Apr 2010 01:08:04 +0000

Mixtape covers are very inspirational to graphic designers. The hard work and creativity put into them are just outstanding and I think designers should see how creative they can get when creating a mixtape or poster design or even a graphic image. Check out these insane mixtape cover designs by hardworking individuals and companies.

Ray Vicks

The Syndicate & Digital Product: Warriors

Tapemasters Inc: Codeine Hitz 8

DJ Scream & Dolla Boy – Dillon Saks

Jim Jones: Pray For A Hustla

Bigga Rankin & Big Bank Black: The Birth Of Big Bank Black

Lil Wayne: No Ceilings No Walls 2

DJ Quote: Quote TV Pt.6

Title

DJ 2Mello & Miami Kaos: Purple Reign

New York State Of Mind Pt.2

J-Haze: King of da City

Drake: The Drizzy Effect

Kanye West: No Manners

DJ Lux: Southern Supremacy 9

OJ Da Juiceman: Bouldercrest Shawty

Nero: Alive & Vibrant – Relive the Moment

DJ Smallz / Drake: Room For Improvement

Juelz Santana: Santana’s Town

Kid Cudi: Dat Kid From Cleveland

50 Cent: The Undertaker

Gucci Mane: Bird Flu Pt.2

DJ Hitz: The Fabolous Life

DJ Smallz: Best Thing Smokin Vol.6

Cambatta/DJ Nice: The Visionary

Donk Ryders

Southern Royalty: Bun B

Dub Floyd: The Worst Of Screamixxes

Roc n Roll

Chamillionaire: Mixtape Messiah 5

DJ Glew & Rick Ross: The City is Mine

10 amazing websites for finding inspiration

Marcell Purham — Sun, 10 Jan 2010 07:14:13 +0000

Hey guys I know I barley post list/ roundups but I know you guys will enjoy this. In this post I have listed 10 websites that you can find inspiration from. If you’re one of those people who can never come up with in idea then these sites will get your idea started. enjoy