30 Days to Learn jQuery

jQuery video tutorials

HTML5 Presentation – in HTML5: HTML5Rocks

Useful reference if you’re working on HMTL5

HTML5 for Web Designers

This will help you get started with HTML5. It’s a fairly quick read at under 90 pages and is available online.

Learning Python

Useful resource for learning Python.

Treehouse – What do you want to learn today?

Treehouse offers paid content covering web design, web development and iOS development. Has anyone used it before?

A Beginners Guide to HTML and CSS

Learn HTML and CSS in one easy to use guide. Still being written at date of post.

PHP Basics

PHP in Plain English.  A useful resource for getting started.

Firefox Add-Ons for Web Designers

Mashable have posted their top 10 Firefox add-ons for web designers.

1. Web Developer (favourite)
2. Firebug (favourite)
3. MeasureIt
4. Colorzilla
5. CSS Usage
6. Page Speed
7. HTML Validator
8. IE Tab 2
9. Screengrab
10. SEO Doctor (never used it)

Others listed in the post comments:

• YSlow - testing page speed
• Dust Me Selectors - finding unused CSS selectors
• Shooter – screenshots
• Fireshot – screenshots

Speckyboy have also posted a similar list titled 20 Essential Firefox 4 Addons/Extensions for Web Developers. (Not too much overlap)

Are there any other relevant and useful addons missing from these lists?

Simple Auto Playing Slideshow

Chris Coyier (@chriscoyier) tweeted some really nice simple code to get a slideshow up and running on your web page.

http://jsfiddle.net/chriscoyier/JTvVn/

I’ve copied his code into this post for future reference.

HTML

</pre>
<div id="slideshow">
<div><img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg" alt="" /></div>
<div><img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg" alt="" /></div>
<div>Pretty cool eh? This slide is proof the content can be anything.</div>
</div>
<pre>

css

#slideshow {
    margin: 50px auto;
    position: relative;
    width: 240px;
    height: 240px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

Javascript

$("#slideshow > div:gt(0)").hide();

setInterval(function() {
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

Big thanks to Chris for this (http://css-tricks.com/)

Face the Real Problem

Great quote:

When you’re forced to be simple, you’re forced to face the real problem. When you can’t deliver ornament, you have to deliver substance.

Paul Graham, computer programmer

Source: Quote Vadis