CSS3 allows us to choose between a few different values for the “background-size” property.  The properties are, length, percentage, cover, and contain.  The value that we’re going to use first is the “cover” value, which will scale an image to a size that will allow it to fill the content area.  I would like to point out that in doing this some parts of the image may be cut off depending on the screen resolution or dimensions of the browser window.  Centro Genesis is a good example.  Look at how the background image displays in a widescreen browser.

Now look at how the image appears in a traditional square browser. The majority of the photo is the same, it just cuts off a piece of it in order to fill the height of the screen.

The code for this is method is really quite simple.  All you have to do is insert these few lines of CSS in your external CSS file or in the head of your page.

html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

That was easy.  Now let’s take a closer look at what we did.  With the first line we’re calling in our background image and applying some style to it, “background: url(images/bg.jpg)” is pulling up our actual image.  Then “no-repeat” is telling the browser to not repeat the image, “center center” is telling the browser to center the image horizontally and vertically, and “fixed” is telling the image to fix itself in that position and not scroll with the rest of the content on the page if there is a need to scroll.  After we’ve called the background image and styled it we target all of the major browsers, webkit covers Safari 5+ and Chrome, Moz is Mozilla Firefox 4+, -o is Opera, and the plain and simple background-size with no prefix takes care if IE9+.

This technique is simple and works, but you’re relying on one image to please all resolution sizes.  How do you decide what dimensions to use for your one background image?  If you have an image that’s 1900px wide and someone’s trying to view your site on their mobile phone, the image may take quite some time to load.  But if you try to shoot the gap and go with an image that’s around 1,000px wide then the image may become pixilated and blurry to anyone viewing your site on a widescreen monitor with the resolution set to 1440px.  And chances are even at 1,000px it’s still going to take that mobile viewer a while to fully load your site because of your large background image.

Before you curse the variables like screen resolution and monitor shapes that can make our jobs so frustrating at times, allow me to give you the answer you’re looking for: media queries.  CSS will allow you to define different attributes for various parameters.  In other words, you can set a media query that tells a browser to load a largeBG.jpg, mediumBG.jpg, or a smallBG.jpg depending on what the browser dimensions of the viewer are.

For example, rather than defining your background image within the HTML of your site let’s say you create a div for your page and assign it the id of “container”.  Pretty standard.  Much like we did in the first method, we’re going to assign our “container” div id with our background image, add some style, then tell it to cover.  I would recommend making your “largeBG.jpg” image somewhere in the ballpark of 1440px wide to 1900px wide.

#container{
background: url(images/largeBG.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Now that we’ve got the big version of our background image set, we can move on to the medium.  This is a little different as we’re going to have to do a media query to tell the browser to load a smaller version of our background image.  I typically set a media query for a screen resolution width of 1024, as this is the resolution of an iPad and the possibility of the viewer relying on a network rather than high speed wifi to load the page.  To set a media query for 1024 you simply add this line in to your CSS.

@media only screen and (max-width: 1024px) and (orientation:landscape) {
#container { background: url(images/mediumBG.jpg) 50% 0 no-repeat fixed; !important; background-size: 100% auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}

The background-size properties are somewhat optional at this point.  You can’t adjust the resolution of your iPad, but you have to remember that this media query is not specifically targeting iPad’s, it’s targeting that screen resolution.  Since there are surely still a large portion of web surfers on older monitors set in the ballpark of 1024×768, it’s an easy enough step to enhance their viewing experience a little more.

After defining the landscape view for iPad’s let’s make a media query for the portrait view.  Depending on your image, you may want to consider putting in a cropped, taller version of your image here so that it display’s full screen without getting too distorted and pixilated.  You’ll also want to adjust the positioning to make sure the image stays aligned properly.

@media only screen and (min-width: 768px) and (max-width: 991px) {
#container { background: url(images/mediumTallBG.jpg) 50% 80% no-repeat fixed !important
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}

Finally, we can set another media query for mobile devices.

@media only screen and (min-width: 0px) and (max-width: 767px) {
#container { background: url(images/smalBG.jpg) 50% 80% no-repeat fixed !important; background-size: auto !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}

I would encourage you to play around with these tricks and leave a link to the page you’ve created in the comments section below so we can all see what you’ve come up with.

About the author: with over ten years in the freelance web design and writing fields, Scott Stanton has had his finger on the beating pulse of the industry’s hottest design trends and bends for the past decade. Scott regularly writes for Wix.com the free website builder. Follow him on Twitter @TheScottStanton.

Responsive web design refers to a site that is developed to degrade nicely across multiple screen sizes and resolutions, from the largest Mac display down to the minutest mobile device. It also works wonders on frame size, square or widescreen, as well as window size, as not everyone prefers their browser to be full screen. There are three key factors to developing a responsive website, flexible layouts, flexible images, and media queries. Let’s take a look at 10 excellent examples of responsive web design.

Sony

Sony is a big brand that has embraced responsive web design. You’ll notice there’s not much of a difference between the widescreen and traditional square screen versions other than everything looks a little more compact on the square screen. But if you start with it out wide and squeeze your browser window in, you’ll notice that the main image actually resizes itself to a smaller version. It resizes itself again once you get down towards mobile device width as well.

Gravitate Design

It’s no surprise that a design studio such as Gravitate Design features a responsive website design on their own site. Whether you are a freelancer or a large design studio, you always want your website to display the full extent of your design prowess and knowledge. I really like Gravitate’s site not only because it’s responsive but because it’s very clean and simple. Their color palette compliments itself nicely and they didn’t go overboard on shadowing, borders or putting all their content in boxes.

Spark Box

Spark Box is another web design studio that knows a good thing when they see it and doesn’t hesitate to implement it on their own site. One thing I really like about their website is how they use the width when they have it, but gracefully adjust when they don’t have it. Their little text blurb to the right of the monitor icons on the home page is a great example. It doesn’t look out of place aligned to the right in widescreen mode, nor does it look out of place centered underneath in square mode and mobile mode.

Food Sense

Food Sense is another great example of responsive web design. They use the width when they have it, but when they don’t they adjust without losing any of the clean look or flow to the site. The only unfortunate thing about the site is that once you leave their widescreen parameters you lose their latest tweet and Facebook plug that’s on the side column under the navigation. They still have links to both social networks in the footer, so it’s not a huge deal. But still would have been nice to see those features appear elsewhere in the skinnier designs.

dConstruct

dConstruct is a stunning example of dynamic images that are resized on the fly. As you drag the window left and right you will see that the padding between images isn’t what’s adjusting in width and size, but the images themselves are. Once you hit a certain parameter all of the images resize to a smaller, or larger depending on if you’re shrinking or expanding the site, version to accommodate the screen size.

Clean Air Challenge

Last week I talked about sites with parallax scrolling and this Clean Air Challenge site just barely missed making my list. The site itself isn’t totally parallax scrolling, just the clouds in the background are. However, the site is an excellent example of responsive web design. Another aspect of this site that I liked was that the only images that you lose once you hit the mobile sized version of the site is the repeat of the main navigation icons that appear in the footer.

Sasquatch Music Festival

Sasquatch is an annual music festival in my neck of the woods featuring some big name artists. When I came across their site and saw that it’s as fun to look at as the bands they book are to listen to, I was quite excited. This site sticks out from a lot of the others for me because of all the colors, images, icons and overall sense of style it has to offer. A lot of the responsive websites I come across seem to be heavy on text, light on imagery, and only two or three colors throughout the site.

Flexslider

It only seems fitting that Flexslider also has a flexible website to promote their handy jQuery image slider. And what better way to get people interested in the slider than to use pictures of cupcakes to show off how it works! One of the best things this site has going for it is that you don’t lose a single thing between widescreen mode and mobile mode, all icons, images, elements, comments, and everything stay there. This way visitor’s don’t feel cheated between missing out on content if they’re browsing the site from their mobile device or desktop computer.

The Cacao Trail

I can only imagine that The Cacao Trail website is almost as enjoyable to navigate as the actual trail is. You lose the main image on this site as soon as you go from widescreen down to a more traditional sized monitor, which I don’t mind as the image doesn’t really do too much for me and it would certainly save you a lot of load time on a mobile device. I do like how the main navigation links enlarge once you hit the mobile sized version, it can get to be a bit of an annoyance trying to touch tiny words to navigate a site on your touch screen mobile device.

Alsacreations

Alsacreations took another interesting approach to their responsive web design. Rather than worrying about keeping all aspects and elements of their site intact between different resolutions, they simply focused on what was important and dropped the bells and whistles. From widescreen to square they dropped their image slider, then from square to mobile they dropped all elements except their “About” blurb and their email form, while including links to everything else.

I like sites that maintain their appearance, at least to some degree, all the way down the resolution latter. But I also understand that specific industries and target audiences come in to play. In some industries a person may only be viewing a site from their mobile device to find that companies contact info. In those instances it’s probably best that’s what they get from your mobile sized home page as soon as it loads, you can always include links at the bottom to everything else. I would encourage you to help your clients figure out what’s best for them, and keep all monitor sizes and internet browsing devices in mind as you’re developing your next project.

About the author: with over ten years in the freelance web design and writing fields, Scott Stanton has had his finger on the beating pulse of the industry’s hottest design trends and bends for the past decade. Scott regularly writes for Wix.com the free website builder. Follow him on Twitter @TheScottStanton.

Let me know what tutorial you like best, and if you know of any other tutorials that have helped you master Ajax, then please by all means drop us a comment. Anyway, enjoy the list!

A simple AJAX website with jQuery

TutorialZine have posted this really great tutorial that teaches people how to create their very own fully functional websites that runs using Ajax. I have to say the finished result does look very nice! View Tutorial

* * * * *

Including An External Page With Ajax

This tutorial will teach you how to include an external page using Ajax Its a very easy to follow tutorial written by the people over at Javascript Kit. View Tutorial

* * * * *

Create A Live Preview Display

Learn how to create a live preview display when filling out a form, much like the one Digg.com use. View Tutorial

* * * * *

Ajax Contact Form

Learn how to create an Ajax contact form that emails the recipient without the page reloading. View Tutorial

* * * * *

Making An Ajax Website

In this tutorial you can learn how to create your very own Ajax website. And the best part is, no Ajax knowledge is required! View Tutorial

* * * * *

Ajax Web Chat Application

In this tutorial, you can create your very own web chat using Ajax. This is pretty cool if you are looking to creating a live chat app for your website. View Tutorial

* * * * *

Ajax 101

Here is a short guide that will teach you the ins and outs of Ajax. View Tutorial

* * * * *

Featured Content Slider

In this tutorial, you can learn how to make standard pieces of HTML glide in, and put them together into a beautiful slideshow. View Tutorial

* * * * *

Validation And Ajax With jQuery

Ever filled out a form and it pops up with you forgot to fill out your email address or something similar? This tutorial will teach you hoe to validate your forms with Ajax. View Tutorial

* * * * *

Ajax RSS Feed Widget

Learn how to grab any RSS feed you like, and display the content in any styled fashion. View Tutorial

* * * * *

Animated Ajax Login [video]

This sweet video will teach you how to spice up your standard login page and make it animated using Ajax.

* * * * *

Ajax File Upload Tutorial

An easy tutorial teaching you how to make a simple Ajax file uploader Some neat graphics in this tutorial. View Tutorial

* * * * *

Ajax Image Loader [video]

Learn how to create an image loader in this nicely put together video tutorial.

* * * * *

Ajax Login Form

This is a sweet Ajax login form tutorial that uses MooTools. Plus the login form has a neat little preloader! View Tutorial

* * * * *

Ajax Username Validation

This tutorial will teach you how to validate a username in a form. You can also customize this to work with all the form fields. Plus this tutorial is available in jQuery and Prototype.

* * * * *

Ajax XML Ticker

This a neat little tutorial that teaches you how to build an Ajax XML ticker. You can link a .txt file up to the ticker to display a slideshow of messages, and it supports rich HTML too! View Tutorial

* * * * *

Use jQuery To Retrieve Data From An XML File

Here is a nice little handy tip that will teach you how to grab data from an XML file and display it on a blank empty page. View Tutorial

* * * * *

Ajax Guestbook [video]

This video tutorial will teach you how to create a fully functional guestbook using Ajax.

* * * * *

The Definitive Guide to Creating a Practical jQuery Plugin

Net Tuts have a really great tutorial on how to create your own practical jQuery plugin. View Tutorial

* * * * *

Ajax Website Slider

This web slider will enhance your website and give it that extra something. This looks great, and is easy to make too! View Tutorial

HTML 5 Cheat Sheet

Smashing Magazine has provided us with an awesome HTML 5 cheat sheet. Download

* * * * *

Ruby Cheat Sheet

eDocr has a brilliant ruby cheat sheet. Download

* * * * *

HTML Cheat Sheet

This is another HTML cheat sheet, that is displayed differently to Smashing Magazine’s. You can download this cheat sheet in .png and also .pdf. Download

* * * * *

Ruby On Rails Cheat Sheet

Added Bytes have an awesome ruby on rails cheat sheet in .pdf and .png. Download

* * * * *

PHP Cheat Sheet

Blue Shoes have provided us with an awesome php cheat sheet (online version). View

* * * * *

CSS Cheat Sheet

Added Bytes CSS Cheat sheet. Will help web designers make pixel perfect web pages. Download

* * * * *

WordPress Cheat Sheet

WordPress Candy has got a downloadable WordPress help sheet in .pdf format. Download

* * * * *

CSS Cheat Sheet

An online version of a CSS cheat sheet. View

* * * * *

PHP Cheat Sheet

Added Bytes have compiled their second version of their PHP cheat sheet. This is really great, and is available for free download in .png and .pdf file formats. Download

* * * * *

jQuery Cheat Sheet

An online version of a jQuery cheat sheet. This will jog your memory when you forget jQuery code. View

* * * * *

MooTools Cheat Sheet

Snook has a downloadable MooTools cheat sheet, that is presented beautifully! Its available for free download in .pdf and .png file formats. Download

* * * * *

Scriptaculous Cheat Sheet

Slash 7 has provided developers with a really nicely presented scriptaculous field guide. Download

* * * * *

MySQL Cheat Sheet

Added Bytes have done it again. This time MySQL. Download

* * * * *

.Net Cheat Sheet

John Sheehan has over at his blog an awesome downloadable .net cheat sheet. Download

* * * * *

Perl Cheat Sheet

Here is a really nice online Perl cheat sheet. View

* * * * *

Python Cheat Sheet

Added Bytes hit us with another cheat sheet. Its avaliable to download in .png and .pdf formats. Download

* * * * *

Java Cheat Sheet

Dream In Code have a really helpful Java cheat sheet (reference sheet). Download

* * * 30 People Who Know Lots About Programming * * *

#1 Tim Berners-Lee
		Tim Berners-Lee’s Websites Wikipedia Page – http://en.wikipedia.org/wiki/Tim_Berners-Lee - About Tim Berners-Lee Tim is the Inventor of HTML (hyper text markup language) and the World Wide Web. - In 2007, he was ranked Joint First, alongside Albert Hofmann, in The Telegraph’s list of 100 greatest living geniuses.
#2 Matt Mullenweg
		Matt Mullenweg’s Websites Matt – http://ma.tt Wordpress – http://www.wordpress.com Wordpress Blog – http://matt.wordpress.com Wikipedia Page – http://en.wikipedia.org/wiki/Matt_Mullenweg - About Matt Mullenweg Matt is the founder and creator of the open source WordPress blogging platform. - In 2005, he founded the company Automattic, the company behind WordPress and Akismet.
#3 Larry Page
		Larry Page’s Websites Google – http://www.google.com Wikipedia Page – http://en.wikipedia.org/wiki/Larry_Page - About Larry Page Larry Page is best known for the co-founder of Google, alongside Sergy Brin. - He is the 6th richest person in America, and the 27th richest billionaire worldwide according to Forbes.
#4 Sergey Brin
		Sergey Brin’s Websites Google – http://www.google.com Wikipedia Page – http://en.wikipedia.org/wiki/Sergey_Brin - About Sergey Brin Sergey was the co-founder of Google alongside Larry Page. - Sergey is ranked the 28th most richest person in the world according to the Forbes top 50 richest billionaires list 2009.
#5 Linus Torvalds
		Linus Torvalds Websites Linux Wikipedia Page – http://en.wikipedia.org/wiki/Linus_Torvalds - About Linus Torvalds Linux is the creator of the extremely popular Linux open source operating system. - Today, there are thousands of variations / distributions of Linux and many web servers run on it. Linus sure did create something ecstatic!
#6 Dennis Ritchie
		Dennis Ritchie’s Websites 1 – http://cm.bell-labs.com/who/dmr/ C Programming Language Book – http://en.wikipedia.org/wiki/The_C_Programming_Language_(book) Wikipedia Page – http://en.wikipedia.org/wiki/Dennis_Ritchie - About Dennis Ritchie Dennis is best known for the creator of C and a huge key developer of the UNIX operating system. - He was born in 1941, and received the Turing Award in 1983 and the National Medal of Technology in 1998
#7 Brian Kernighan
		Brian Kernighan’s Websites Bell Labs – http://cm.bell-labs.com/cm/cs/who/bwk/ C Programming Language Book – http://en.wikipedia.org/wiki/The_C_Programming_Language_(book) Wikipedia Page – http://en.wikipedia.org/wiki/Brian_Kernighan - About Brian Kernighan Kernigham developed the UNIX operating system along side Ritchie and Thompson. - Brian is the author of many UNIX programmes, and is known as the coiner of the expression WYSIWYG (what you see is what you get).
#8 Ken Thompson
		Ken Thompson’s Websites Bell Labs – http://plan9.bell-labs.com/who/ken/ Wikipedia Page – http://en.wikipedia.org/wiki/Ken_Thompson_(programmer) - About Ken Thompson Ken is an American pioneer of computer science, and helped create the B programming language (which is now replaced by the C programming language). - He created UNIX alongside Kerighan and Ritchie, and helped create the Plan 9 operating systems distributed by Bell Labs.
#9 Rasmus Lerdorf
		Rasmus Lerdorf’s Websites Bio – http://lerdorf.com/bio.php Toys – http://toys.lerdorf.com PHP – http://www.php.net Wikipedia – http://en.wikipedia.org/wiki/Rasmus_Lerdorf - About Rasmus Lerdorf Rasmus Lerdorf is the creator of PHP. He authorised the first 2 versions of PHP, and then contributed in the development of later versions of PHP. - PHP runs over 34% of websites online today, so Rasmus created something purely amazing.
#10 Jason Fried
		Jason Fried’s Websites 37 Signals – http://www.37signals.com Twitter – http://twitter.com/jasonfried - About Jason Fried Jason Fried is the founder of 37 signals. 37 Signals have some amazing web apps out that thousands of people use daily. The 37 signals blog is very popular, and their job board gets hundreds of jobs posted. - Did I forget to mention they also invented ruby on rails?
#11 James Gosling
		James Gosling’s Websites James Gosling – http://www.jamesgosling.com Apple Science Profile – http://www.apple.com/science/profiles/gosling/ Wikipedia Page – http://en.wikipedia.org/wiki/James_Gosling - About James Gosling James A. Gosling, is a famous software developer, best known as the father of the Java programming language. - He also has a personal website and a page over at the Apple Science website.
#12 Brendan Eich
		Brendan Eich’s Websites Twitter – http://twitter.com/brendaneich Wikipedia Page – http://en.wikipedia.org/wiki/Brendan_Eich - About Brendan Eich Brendan Eich is a computer programmer and creator of the JavaScript programming language. - He is the Chief Technology Officer at the Mozilla Corporation.
#13 Carl Sassenrath
		Carl Sassenrath’s Websites Official Site – http://www.sassenrath.com Wikipedia Page – http://en.wikipedia.org/wiki/Carl_Sassenrath - About Carl Sassenrath Carl Sassenrath is an architect of operating systems and computer languages. - He brought multitasking to personal computers in 1985 with the creation of the Amiga Computer operating system kernel, and he is currently the designer of the REBOL computer language as well as the CTO of REBOL Technologies.
#14 Bjarne Stroustrup
		Bjarne Stroustrup’s Websites ATT Research – http://www.research.att.com/~bs/ Wikipedia – http://en.wikipedia.org/wiki/Bjarne_Stroustrup - About Bjarne Stroustrup Bjarne Stroustrup is a computer scientist most notable for developing the C++ programming language. - He is currently Professor and holder of the College of Engineering Chair in Computer Science at the Texas A&M University.
#15 Bram Cohen
		Bram Cohen’s Websites Bram Cohen – http://bramcohen.com Wikipedia Page – http://en.wikipedia.org/wiki/Bram_Cohen - About Bram Cohen Bram Cohen is an American computer programmer, best known as the author of the peer-to-peer (P2P) BitTorrent protocol. - He also created the first file sharing program to use the protocol, also known as BitTorrent.
#16 Alan Cooper
		Alan Cooper’s Websites Cooper – http://www.cooper.com/alan/father_of_vb.html Wikipedia Page – http://en.wikipedia.org/wiki/Alan_Cooper - About Alan Cooper Cooper is sometimes called “the father of Visual Basic”, although much of work on Visual Basic was done by Microsoft’s internal development group. - Cooper was the leading force behind VB 1.0 and pioneered the use of an IDE to create a GUI via wrapped calls to system routines in the API.
#17 Larry Wall
		Larry Wall’s Websites Perl – http://www.perl.org Wall – http://www.wall.org/~larry/ Wikipedia Page – http://en.wikipedia.org/wiki/Larry_Wall - About Larry Wall Larry Wall s a programmer and author, most widely known for his creation of the Perl programming language in 1987. - He is the co-author of Programming Perl, which is the definitive resource for Perl programmers.
#18 Edsger Wybe Dijkstra
		Edsger Wybe Dijkstra’s Websites Wikipedia Page – http://en.wikipedia.org/wiki/Edsger_Dijkstra Dijkstra’s Algorithm – http://en.wikipedia.org/wiki/Dijkstra%27s_algorithm - About Edsger Wybe Dijkstra Edsger Wybe Dijkstra was a Dutch computer scientist. - He received the 1972 Turing Award for fundamental contributions to developing programming languages, and was the Schlumberger Centennial Chair of Computer Sciences at The University of Texas at Austin from 1984 until 2000.
#19 John Resig
		John Resig’s Websites eJohn – http://ejohn.org jQuery – http://www.jquery.com Twitter – http://twitter.com/jeresig - About John Resig John is the creator of the very popular javascript library jQuery. He also is a javascript programmer, blogger and author. Oh and did i forget to mention he works for Mozilla? - He is currently working on his second book “Secrets of the javascript ninja”.
#20 Guido van Rossum
		Guido van Rossum’s Websites Python – http://python.org/~guido/ Twitter – http://twitter.com/gvanrossum - About Guido van Rossum Guido is the author the the python programming language. He joined google back in 2005, and he loves the fact he gets to spend half the time there on python. - In June 2003, he was the finalist in the category IT Software (Individual) of the World Technology Network Awards.
#21 Douglas Crockford
		Douglas Crockford’s Websites Crockford – http://www.crockford.com Wikipedia Page – http://en.wikipedia.org/wiki/Douglas_Crockford - About Douglas Crockford Douglas Crockford is a senior JavaScript Architect at the most popular websites in the world, Yahoo! He is well known for his work in introducing JavaScript Object Notation (JSON). - He has also worked for companies such as Atari, Luciasfilm and Paramount.
#22 Miguel de Icaza
		Miguel de Icaza’s Websites Blog – http://tirania.org/blog/ Wikipedia Page – http://en.wikipedia.org/wiki/Miguel_de_Icaza - About Miguel de Icaza Miguel is a Mexican free software programmer, best known for starting the GNOME and Mono projects. - He came from a family of scientists in which his father was a physicist and his mother a biologist. Miguel started to write free software in 1992.
#23 Jeff Atwood
		Jeff Atwood’s Websites Coding Horror – http://www.codinghorror.com/blog/ Twitter – http://twitter.com/codinghorror - About Jeff Atwood Jeff blogs about coding on CodingHorror. The blog is extremely popular, and has to date over 130,000 RSS Subscribers. - The blog features a very simplistic design, but obviously the content is extremely effective.
#24 Kathy Sierra
		Kathy Sierra’s Websites Twitter – http://twitter.com/kathysierra Wikipedia Page – http://en.wikipedia.org/wiki/Kathy_Sierra - About Kathy Sierra Kathy is a programming instructor and game developer. - She co-created the Head first series of books to do with computing.
#25 Scott Hanselman
		Scott Hanselman’s Websites Hanselman – http://www.hanselman.com Twitter – http://twitter.com/shanselman - About Scott Hanselman Scott is the principal program manager at Microsoft’s developer division. He often speaks about software development at many Microsoft events. - He also publishes a blog and a very popular podcast around the technology lines.
#26 Steven Frank
		Steven Frank’s Websites Panic – http://www.panic.com Steven Frank – http://stevenf.tumblr.com Twitter – http://twitter.com/stevenf - About Steven Frank Steven Frank is the co-founder of the extremely popular mac software company, “Panic”. - Panic make many amazing Mac applications. I would recommend buying more a less every one.
#27 Ben Goodger
		Websites Ben Goodger Blog – http://www.bengoodger.com Wikipedia Page – http://en.wikipedia.org/wiki/Ben_Goodger - About Ben Goodger is a former employee of Netscape Communications Corporation and the Mozilla Foundation and former lead developer of the Firefox web browser. - He is currently working for Google Inc., where he leads the Google Chrome project.
#28 Dion Almaer
		Dion Almaer’s Websites Ajaxian – http://ajaxian.com Almaer – http://almaer.com/blog/ Vimeo Profile – http://www.vimeo.com/dion Twitter – http://twitter.com/dalmaer - About Dion Almaer Dion is the co-founder of AjaxIan.com. AjaxIan teaches people about the popular javascript language, Ajax. - There are also many other writers at AjaxIan.com. There are hundreds of articles, and its the ultimate Ajax resource for developers.
#29 Craig Newmark
		Craig Newmark’s Websites Craigslist – http://www.craigslist.org Wikipedia Page – http://en.wikipedia.org/wiki/Craig_Newmark - About Craig Newmark Craig was born in 1952, and is the founder of the popular website Craigslist.com. - Craig developed Craigslist from the ground up, and today is used worldwide by thousands of people. He is an inspiration to all.
#30 John D. Carmack
		John D. Carmack’s Websites Armadillo Aerospace – http://www.armadilloaerospace.com Wikipedia Page – http://en.wikipedia.org/wiki/John_Carmack - About John D. Carmack John D. Carmack is an American game programmer, and the co-founder of id Software. - Carmack was the lead programmer of the id computer games Commander Keen, Wolfenstein 3D, Doom, Quake, and the sequels to Doom, Quake and Wolfenstein.

Now remember my site is only HTML and CSS. So I looked into the Twitter API, and found a way you can display your last tweet using the twitterCallback javascript function. I have summed it up in a few easy to follow steps. And its hardly any code at all! (icon by dryicons)

Step 1:

First, decide where about on your page you want your last tweet to display. Then paste in this line of HTML.

[html]<div id=”twitter_update_list”>
</div>[/html]

Step 2:

Next you need to put these 2 lines of JavaScript below the code in step 1. On the 2nd line of code where it says 12345.json, you need to replace 12345 with your twitter username. So mine would be webdesigndev.json.

[js]<script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”>
</script>
<script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/12345.json?callback=twitterCallback2&count=1″>
</script>[/js]

Now you will have a plain text version of your last tweet being displayed. So simple! Continue reading below to find out how to style your little twitter widget using CSS, and even customize it by playing around with some of the Twitter API Parameters.

(optional styling)

Of course all webdesigners should perform some sort of styling to their last tweet, to jazz it up a little. At the moment your last tweet is displayed as a bullet list. To remove this and make it pure plain text, put this in your CSS Stylesheet.

[css]#twitter_update_list li {
list-style-type: none;
}[/css]

Then, you can change the colour of the main tweet text. If I wanted to make the text orange and then background black, i would put…

[css]#twitter_update_list span {
color: #FFCC00;
background: #000000;
}[/css]

Then you can style the links within your last tweet, and style when happens when you hover over them. An example would be the following.

[css]#twitter_update_list span a {
display: inline;
color: #000000;
}
#twitter_update_list span a:hover {
text-decoration: underline;
color: #666666;
}[/css]

I have styled mine using CSS, and come out with something that looks like this…

You can play around with the CSS, and what you want your widget to look like.

(optional customization)

Twitters API is very big. You can play around with many of the different settings for the twitterCallback function. You can view the api documentation over at this link.

http://apiwiki.twitter.com/Twitter-REST-API-Method%3A-statuses-user_timeline

Enjoy!

Limit Characters From Your Text

In this tutorial you will learn how to limit characters from a sentence without cutting words up. This is a really useful tutorial.

http://www.jooria.com/Limit-Characters-From-Your-Text-a139.html

Create An Advanced Password Recovery Utility

Learn how to create a very advanced password recovery tool using PHP. This can be useful, and you can implement it in to your website login system.

http://net.tutsplus.com/tutorials/php/creating-an-advanced-password-recovery-utility/

Login To Analytics API Using PHP

Great little tip / trick that teaches you how to login to the Google Analytics API using ClientLogin.

http://www.electrictoolbox.com/google-analytics-login-php-curl-username-password/

Error 404 Pages With PHP Auto-Mailer

An awesome tutorial for creating a custom error 404 page.

http://net.tutsplus.com/tutorials/php/404403-website-error-pages-with-php-auto-mailer/

Resession (Session Manager)

Check this out. Its a really nifty session manager that you can integrate with your website.

http://www.milesj.me/resources/script/session-manager

Web Contact Forms With PHP

Learn how to create web radio buttons, and checkboxes using PHP.

Simple And Minimalistic User System

This tutorial will teach you how to create a minimalistic user system for a website from scratch.

http://rmb-scripting.com/tutorials.php?tutorial&tid=371

Simple PHP Class For Parsing Markup

This tutorial will teach you how to make a simple class that wraps PHP’s various regex functions in a fluent interface.

http://www.prodevtips.com/2009/03/26/simple-php-class-for-parsing-markup/

PHP Based Address Book Using MySQL

Learn how to create a PHP address book and store all the addresses in a MySQL database.

http://hubpages.com/hub/Simple-PHP-web-based-address-book-using-MySql

Single Signon Using OpenID, PHP and MySQL

Enable your website / web application to accept OpenID as a way of login.

http://www.webdesignermag.co.uk/tutorials/enabling-single-signon-using-open-id-login-php-and-mysql/

Creating a File & Downloading It Using PHP

In this tutorial, you will learn how to create a file using PHP, and then enable your users to download it.

http://pfmashup.tumblr.com/post/90347622/creatingfiledownloadingitinphp

Creating A Shopping Cart Using PHP

This tutorial will teach you how to create a simple and easy to use shopping cart to use on your website. There are 3 parts, enjoy!
Part 1 / Part 2 / Part 3

Zero Fill a Number

Learn how to make a number a certain amount of characters. Such as 5 you could make to 005.

http://www.wlscripting.com/tutorial/55

Make a Unique Hits Counter

This tutorial will teach you how to create a unique hits counter, and keep the values permanently.

http://designkai.com/unique-hits-counter/

Tutorial Management System

Learn in 5 parts, how to create a fully functional tutorial management system, including comments!
Part 1 / Part 2 / Part 3 / Part 4 / Part 5