1. Code
  2. Coding Fundamentals

30+ Eye-Opening Web Development Screencasts

Scroll to top
8 min read

We've all felt that haze that forms around your eyes when you're trying to study lines and lines of code from a written tutorial. After an hour or so, your eyes simply become too weakened to continue reading. That's why I'm such a huge fan of video tutorials. You can sit back and learn at your own pace. I've compiled a list of over thirty screencasts that are guaranteed to help you.

EyeEyeEye

jQuery for Designers

  • Coda Slider Effect

    Coda Slider Effect

    "Although Panic didn't really invent the effect, the sliding panels on the Coda is great implementation of this effect. This article will pick apart the pieces required to create the effect, and how to better it."

    View the Demo

    Watch Video

  • Image Cross Fade Transition

    Image Cross Fade Transition

    "A frequent query and request I receive (and have myself) as a developer is: "how can I fade one image in to another?". In particular, Nathan Wrigley of pictureandword.com, needed a method one image into another mouse rolls over, and the slowly fade back once the mouse has left."

    View the Demo

    Watch Video

  • Image Loading

    Image Loading

    "This tutorial will show how to load images in the background, and once loaded handle the event and create your own response."

    View the Demo

    Watch Video

  • jQuery Tabs

    jQuery Tabs

    "For this tutorial I have created two screencasts demonstrating how to quickly apply a dash of jQuery to different layouts of markup, which, if the markup is well designed, it will automatically degrade nicely without JavaScript enabled."

    View the Demo

    Watch Video


EyeEyeEye

CSS-Tricks

  • Designing for WordPress: Part 1

    Designing for WordPress: Part 1

    "WordPress is a hugely popular CMS for blogging. The blog section of CSS-Tricks is run on WordPress and I am very happy with it. By popular request, we are going to walk through designing for WordPress."

    Watch Video

  • Converting a Photoshop Mockup

    Converting a Photoshop Mockup

    In this three-part series, Chris will show you exactly how to convert a psd to html. This series is strongly recommended for those just getting into the field.

    Watch Video

  • Designing a Unique Page for Twitter Updates

    Designing a Unique Page for Twitter Updates

    "I'll take you through the creation of simple webpage to display your recent ‘Tweets’ from Twitter from start to finish. This covers the design in Photoshop, to including the javascript stuff provided by Twitter to the markup, to the CSS to style the page."

    Watch Video

  • Introduction to Google Analytics

    Introduction to Google Analytics

    "Google Analytics is a free service to track all sorts of information about the visitors to your website. I recently had a weird experience with the Analytics on CSS-Tricks, so I thought it would be a good time to introduce it to folks who might not already know much about it and also share that experience."

    Watch Video

  • Google Search for Your Site

    Google Search for Your Site

    "Integrating search on a website can be an incredibly complex subject far beyond my web development skills. Fortunately, Google offers a service called "Custom Search Engine" which you can integrate right into your own site. This leverages Googles awesome search power, and it can all happen directly on your own website!"

    Watch Video


EyeEyeEye

NETTUTS

  • How to Dynamically Create Thumbnails

    How to Dynamically Create Thumbnails

    "In this week's screencast, I'll show you how to upload files and then have PHP dynamically create a thumbnail. Whether you're building an ecommerce site, or just a simply gallery, these techniques will absolutely prove to be useful."

    Watch Video

  • How to Convert a PSD to XHTML

    How to Convert a PSD to XHTML

    "I continue to be amazed by how well Collis's "Build a Sleek Portfolio Site From Scratch" tutorial continues to perform. It's been months, yet it still posts strong numbers every week. Considering that fact, I decided to create a screencast that shows you exactly how to convert a PSD into perfect XHTML/CSS."

    Watch Video

  • Create a Photo Admin Site Using PHP and jQuery

    Create a Photo Admin Site Using PHP and jQuery

    "We'll be retrieving images from a database, creating a simple login form with authentication, and will then allow for our database to be asynchronously updated. Sounds good? If so, let's get into it."

    Watch Video

  • How to Read an RSS Feed With PHP

    How to Read an RSS Feed With PHP

    "In today's video tutorial, I'll show you exactly how to do this using PHP. At roughly forty-five minutes in length, you might want to take a quick "pre-screencast bathroom break."

    Watch Video

  • How to Search a Website Using ASP.NET 3.5

    How to Search a Website Using ASP.NET 3.5

    "In this screencast, I'll show you how to implement a simple search functionality into your personal website. We'll go over many of the new features in ASP.NET 3.5, such as LINQ and many of the AJAX controls that ship with Visual Studio/Web Developer."

    Watch Video


EyeEyeEye

SampsonVideos

  • <br />
Custom PHP Functions

    Custom PHP Functions

    "Functions are small snippets of code that can process information, update databases, email friends, or print data to the screen. PHP comes out of the box with hundreds of great functions to begin with, but in this video we will make some of our own!"

    Watch Video

  • <br />
PHP Conditional Statements

    PHP Conditional Statements

    "In this video we will cover commonly used statements like the if, if else, switch, etc."

    Watch Video

  • <br />
Cookies in PHP

    Cookies in PHP

    "Cookies are used to persist information over long-periods of time. Common uses contain things like "remember me" buttons on often-visited websites, or maybe setting your preferred language on an international website."

    Watch Video


EyeEyeEye

ASP.NET

  • <br />
How Do I: LINQ to SQL: Overview

    How Do I: LINQ to SQL: Overview

    "New language features for C# and VB support data access directly from code, without writing SQL. This video shows the minimum steps to use LINQ (Language Integrated Query) to query, update, add and delete rows from the Northwind database."

    Watch Video

  • <br />
How Do I: Get Started with ASP.NET AJAX?

    How Do I: Get Started with ASP.NET AJAX?

    "Note that ASP.NET AJAX is included as part of .NET 3.5, so the installation part of this video is only relevant if you are using .NET FX 2.0."

    Watch Video

  • <br />
Securing your Web Site with Membership and Login Controls

    Securing your Web Site with Membership and Login Controls

    "In this lesson, you will explore the new membership capabilities of ASP.NET 2.0. In addition, you will learn about role-based security, and how you can use roles to control access to your web site."

    Watch Video

  • <br />
Learn the Tips and Tricks of Experts

    Learn the Tips and Tricks of Experts

    "View tips and tricks including encrypting sensitive information stored in the web.config file, posting content to a different page, simplifying complex URLs using URL remapping, and much, much more."

    Watch Video


EyeEyeEye

ThemeForest.net

  • jQuery for Absolute Beginners - Series

    jQuery for Absolute Beginners - Series

    "I’m launching a daily video series that will teach you PRECISELY how to use the jQuery library in your own projects. We’ll start out by downloading the framework, creating our first function, examining syntax, and more. Every day, I’ll post a five-ten minute “training regimen” that expands on what you’ve already learned."

    Watch Video

  • A Crash-Course in Regular Expressions

    A Crash-Course in Regular Expressions

    "To a novice web developer, regular expressions look like the most scary thing on the planet. Who could possibly dismantle such a block of code and decipher its meaning? Luckily, its bark is much worse than its bite. You’ll quickly find that regular expressions are rather straight-forward and easy to understand - once you learn the syntax. "

    Watch Video

  • How to Create a Contact Form Using PHP and AJAX

    How to Create a Contact Form Using PHP and AJAX

    "I noticed a thread on the forums that discussed exactly how to implement a working contact form into a site template. So I thought to myself, “What better way to demonstrate the process than with a screencast!” "

    Watch Video


EyeEyeEye

Killer Sites

  • <br />
Installing WordPress

    Installing WordPress

    "I’ve put my videos where my mouth is, and created a batch of video tutorials on Wordpress. I hope you’ll find them useful."

    Watch Video

  • <br />
Why learn Object Oriented PHP

    Why learn Object Oriented PHP

    "People run into confusion when programming because of some lack of understanding of the basics. With this in mind, we are going to slowly go over key OOP principles while creating our own PHP objects. With this knowledge, you will be able to explore OOP further."

    Watch Video


EyeEyeEye

Ruby on Rails

  • <br />
Creating a Weblog in 15 Minutes

    Creating a Weblog in 15 Minutes

    "In 15 minutes, we go from scratch to complete weblog engine: with comments and an administrative interface. But since the actual application only took 58 lines to complete, we also have time left over to do unit testing, examine the logs, and play around with the domain model. "

    Watch Video

  • <br />
Putting Flickr on Rails

    Putting Flickr on Rails

    "Ruby on Rails is not just for playing with your local database, it's for taking on the web. So in 5 minutes, we create a web-based search engine for Flickr using their public API with all the fades and glamour of Ajax."

    Watch Video

  • <br />
Evolving your Database Schema Without a Sweat

    Evolving your Database Schema Without a Sweat

    "Before you know it, you'll have data that you care about in your application. Which makes adding, removing, or changing the schema an error-prone, time-consuming, and frustrating process. That is, unless you're using Ruby on Rails. In 20 minutes, you'll learn all about how database migrations can make your schema as flexible as your code with no fear of data loss."

    Watch Video


EyeEyeEye

Django

  • <br />
Django From the Ground Up

    Django From the Ground Up

    "Django From the Ground Up is a series of screencasts that walks through the entire process of building a web application with Django."

    Watch Video

  • <br />
 Setting Up a Django Development Environment

    Setting Up a Django Development Environment

    "In this episode I show a simple way of setting up a Django development environment. It covers installing Django, installing a reusable application, and setting up a personal toolbox of utilities."

    Watch Video

PSDTUTS

  • <br />
Web 2.0 Footer in Photoshop

    Web 2.0 Footer in Photoshop

    "Since Web 2.0 hit the internet, footers have become more important than ever, and there has been some great looking work done downstairs. In this tutorial I'll show you how to produce a sleek looking site footer in Photoshop - Daniel Lopes"

    Watch Video


Any that I missed?

  • Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.


Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.