1stwebdesigner

Posted by | Posted on 17:28

1stwebdesigner


30+ Killer Web Development Screencasts to fine tune your skills

Posted: 07 Aug 2010 03:00 AM PDT

A single image helps us to understand the concept better than a description of 1000 words. In a similar manner reading a code of thousand lines wont make us learn a software than a single video demonstration. There comes the purpose of Screen shots which helps us in the form of screen casts to learn our task in a quick and  relaxed manner. So sit back and do your task in an effective manner.Updating the information on the site or developing the site as a whole is Web Development. Targeting the specific users , a website is developed by planning, analyzing, designing and implementing the same. Then comes the promotion of the site which plays a major role and after promoting, thinking of novel ways to sustain in the industry.

A screen cast gives you a much clear idea by its interactive way of explaining as similar to a live version with the help of a clear audio as in the case of Microsoft Office or Photoshop tutorials. These Screen casts on jQuery, AJAX, PHP and CSS takes you to a tour from the scratch to a level of professional growth.

AJAX:

1.AJAX refreshing RSS content

Overcome the hassles of page refreshing by updating the contents without a manual page refresh. This video demonstrates the do’s and how’s to refresh the RSS feeds with the help of AJAX.

If you're doing just one feed, I think it'd be more efficient to roll your own JavaScript code, especially if it's just parsing RSS. From what I remember, SimplePie seemed to be a lot of overhead.

2.Simple-Jquery-spy-effect

The great thing about Realmac's QuickSnapper site is that if JavaScript is turned off, the list of snaps is visible by default. So we'll follow suit.

It's also worth noting that their version only keep pulling in new items until it hits the end. I'll show you how you can keep the list looping, and in a follow up tutorial I'll show you how to hook this in to an Ajax hit that doesn't hammer your server and keeps the effect nice and smooth.

3.Top 25 AJAX video tutorials from youtube

The tutorials presented here gives a beginning from the scratch of how to create a HTML document, adding javascript and also linking an external javascript to that to that,building AJAX chat, adding AJAX elements to a web page using Spy framework,inserting AJAX objects into Adobe Dreamweaver, how to create Mash up applications using AJAX framework,create a Delphi for PHP web  also about AJAX MySql database

Jquery:

4.Sliding headers like iphone

Ever Got frustrated when you cannot find the header while browsing a content and got lost with your subject
when moving on to next page, this screen cast helps the header to remain content and also replaces the next heading simultaneously when you move to next page in a subtle manner.It’s very useful for every web designers who is following the trend.

5.Slidedown animation jump revisited

You would have noticed that your animation jumps towards the end, which could be because of height problems.This screen cast helps you to find a solution by considering the height factors by storing an inline height and setting an an inline height later and proceed accordingly whether we are revealing or hiding the element.We can use this action to show our results or can use this in FAQ’s also.So there’s no need to refresh the page.

6.Slider gallery

Wanna create a gallery with a slide to navigate the items? This screen cast helps you with simple steps to translate the sliders position to slide the products inversely with the help of Markup, slider-widget control, jQueryUI, CSS and certain plug-ins which provides faster scroll and a pause when needed.Using this slider you can display your products and you can roll your images etc.

7.Jquery for absolute beginners

A 15 day Absolute beginner series in Jquery with Theme forest.net as a reference by Jeff Way who has exclusive videos for each day where you could learn all the methods, Jquery style switcher, hover effect and lots more used in Themeforest.net.

This screen cast  series will teach you Jquery clearly and effectively.Each screencasts has the own style and it would be very useful for beginners who needs to learn Jquery in an defective manner.

8.Build Lava lamp style navigation menu

Learn to create a lava-lamp style menu from the beginning which initially demonstrates the same process by using a three level menu and then create a lava-lamp menu by using a Javascript library in this screen cast.

It’s highly professional way to monetize your website and this type of menu will give you a good look to your website.

9.Automatic infinite carousel

Most of the times a scroll action doesn’t stop automatically and we have to control it manually when needed, So to make a scrolling action automatic and pause it when the mouse is over the carousel using Jquery is demonstrated in this screen cast.

We can use this carousel for dynamic purpose too.

10.Jquery look tim van damme

The key effects of Tim the Accordion and Hover effect which work only in Webkit can also work in jQuery when two factors namely animated margin – left and Background rgba crossfade effect is taken into account.

For further details go through the screencast and find it on your own.

11.Popup login window

An authentication is always done with the help of a password.This screen cast will be very useful for authorization purposes.

In this screen cast we create a simple pop up window which verifies the password of an account in an LDAP server and where data is passes from a link to the dynamically created window.

12.Screencasts to build your own jquery plugin

Take the guidance of experts James Padolsey, Jeffery Way and Dan Wellman in this screen cast to create your Jquery plugins and use them in your programs. Lear how to set defaults,pre-load images, create call back methods and create dynamic radio buttons using Jquery, CSS.

To learn the full steps study the complete screen cast.

13.Jquery video series

A more elaborate and precise training regimen of 10 minutes for Themeforest.net and using the same how to use the Jquery library and create your our own projects with the help of video series description for 15 days.

The whole series will bring the beginners as a successful professional in Jquery.They can edit and customize the Jquery applications flexibly.

PHP screencasts:

14.Diving in to PHP

A short tour on various topics in PHP are given as separate tutorials.These self contained tutorials by Jeffery Way teaches you to upload files using PHP with the help of ThemeForest blog which is a complete source on PHP queries.

This screen cast covers the different type of topics for the beginners and intermediate level users.

15.PHP Json Jquery Ajax screencast

To create a communication between PHP and JSON data source using jQuery’s AJAX functionality where we create a script to send the JSON data, then a PHP array  then we load the file and our data source is populated.

To learn the full steps please view the complete screen cast.It’s an advanced screencast for PHP lovers.

16.Photo admin site using PHP and Jquery

This screencast helps you to create a photo site using PHP and jquery where a database is created with collection of photos, and the admin is given the rights of updating the title of the photos as well as maintaining any sub-directories by clicking on the text.

You can administrate the whole photo gallery as per your requirement.The specialty of this screen cast is using Jquery we are accessing the galleries.

CSS screencasts:

17.HTML and CSS the very basics

Help the absolute beginner with the basics of HTML and CSS which are only text files to a level where you can use them as a preview in your website.

This screen cast teach you that HTML is the content and CSS is the design of the website and also how to create a website with good quality.Here you can learn the very basics of both HTML and CSS so you can handle the websites easily when learned the basics well.

18.Editable CSS3 image gallery

We build a pretty typical image gallery design pattern, a grid of images that pop up larger when clicked.This image gallery will give you a highly professional look for your web development.

But this image gallery page makes use of hot semantic HTML5 markup, loads of visual treats with CSS3 and jQuery, and made editable through the CMS PageLime.

19.How to use CSS sprites

CSS Sprites have been a hot topic for a long time now. The fact is that each image on a web page is a separate server request and you can dramatically increase the performance of a page.Reducing the number of HTTP requests improves the load times. To achieve this we use CSS sprites, How to create a CSS sprite and how to those sprites describe here.

This will give you an good idea about CSS sprites and how to use this with your web development side.

20.Detailed look at 960 CSS framework

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

You don’t have to master the code to create a web application .CSS frameworks are there for you to write your code.Spend some time with this screen cast to learn about the frameworks and to efficiently develop your web applications.

21.Image switcher

Image Switcher is a free JavaScript that automatically inserts a series of images into one single hot-swappable view port.This is a pure CSS image switcher that is lightweight and standards-compliant. It could be used for a gallery or any similar function. Any number of list selection options can be used so long as the width can accommodate them.

To change the images as you move across a link is what this screen cast teaches you without the help of JavaScript.You need only z-index switching on hover and a bit of absolute positioning to achieve this.

22.Building a photo gallery

Like many people out there, you may want to create a web site to show off your photos of friends, family, vacation, wedding, etc. Well, this small tutorial will show you how to create a photo gallery and upload it to the Internet.

A photo gallery which automatically builds itself with the images from a directory as well as the sub-directories is possible by CSS . Chris Coyier teaches in this screen cast to build an automatic photo gallery.

23.Embedding audio

How do you embed an MP3 file (like a podcast, song or background music) into a web page or an RSS feed so that visitors can listen to the audio in the browser itself without requiring an external player like QuickTime or Windows Media Player.

Most of the image we either use an image or an audio file. But an image with an audio in the background makes a user quite comfortable to grasp the information. Chris Coyier teaches the same with the help of JavaScript and Flash in this screen cast.

24.Using CSS3

Many exciting new functions and features are being thought up for CSS3. We will try and showcase some of them on this web page.For visual enhancements such as multiple backgrounds, RGB, border image, border radius, @font face, animations / transitions and a lot more for CSS3 is on the move now.

To follow this latest wave catch a glimpse of this screen cast.

25.Introducing firebug

You can get the information about the markup, CSS, layout and DOM of an element in a page with Firebug, an extension of Firefox which has become inevitable for Web designers and developers where you can edit and see the results directly in the browser.

To know more learn this screen cast.

26.Unique page for twitter updates

When designed right, a Twitter feed can improve the aesthetics of a website’s layout.If tweeting is your pastime then you must be eager to display your tweets from start to finish. For e.g. you could cover the design in Photoshop also style your page.

To achieve this task follow this screen cast which guides you from the javascript stuff to CSS to style your page.

Codeigniter:

27.Basic screencasts

Code Igniter is an open source web application for writing PHP programs and also to create full -features web applications.writing code from scratch, by providing a rich set of libraries for commonly needed tasks, as well as a simple interface and logical structure to access these libraries.

In this screencast it gives you introduction about CodeIgniter and also to create a blog in CodeIgniter using PHP by Derek Jones.

28.Easy development with codeigniter

With raw PHP, this can be somewhat time-consuming. However, with CodeIgniter, it's simply a matter of referencing the correct library, and passing in some configuration options! Let's dive in.

Eager to tune PHP skills after learning the introduction , Move on to the next step ,this screencast teaches you to upload an image and save it after initial validation using PHP in CodeIgniter.

29.Killer startup screencasts for codeigniter

Get ready to create your first application with CodeIgniter, create a form using Form builder, build a sample application,create a blog in 20 minutes, create a Pagination, send and receive data via jQuery Post and JSON in this 10 minute screencast by Derek Jones.

We are hoping that you will learn further on CodeIgniter Application Development Framework after watch out screencast.

XML:

30.Build a login and registration system with xml

Building an entire membership system can be a tedious, and time-consuming task. Tim Cooper is going to show us how to build the ENTIRE thing in roughly thirty minutes.

Using XML we could create a login and registration form in much less time than MySQL, Tim Cooper in this screen cast shows us this by reviewing PHP, .htaccess, files, sessions and more.

31.Form builder

It may seem odd to attempt to standardize data types in a system DESIGNED TO BE SO FLEXIBLE, but more than one institution reports that setting reasonable expectations for portfolio deployments across campus and managing your IT resources to leverage some amount of standardization do a lot to the project sustainable.

Learn the basics of building a form using the Form builder tool which could be used to build an XML schema file and also use for many multiple purposes in many forms. Sean Keesler teaches you to build a form in this screen cast.

32.Parametrize test data using XML

Create automation scripts to test web application functionality in Internet Explorer on Windows.

From this Screen cast achieve this task with the help of Pamie – a Python class file which creates a Pamie test script to automate a form, create an XML file, read data and run the test.

It show you:

  • How to create a Pamie test script to Automate a form
  • How to find the names and ID’s of DOM Elements to automate
  • Creating an XML file from scratch using Notepad++
  • How to read the data in an XML file using ElementTree
  • How to run the test

33.Screen casts to get you kicking ass with drupal

Find it difficult to learn Drupal, this screencast makes it easy for practically learning step by step process starting with the installation, node system, block system, content types, theme development and more.

Also you could find resources for Drupal books, Drupal podcasts, Drupal forums, Drupal channels.

34.Drupal roundup

Get all the information you wanted to know about Drupal, this screencast gives you the best of Drupal’s screencasts, best books on Drupal, resources, modules and also the annoyances of Drupal. Get the latest screencasts on Drupal 6, Learn about CSS Injector, Node Convert, open buffet syndrome, creating a backup, about Webform, Login Toboggan, Input filters, Teaser length and lots more about this content management platform – Drupal.

Comments (0)

Post a Comment