Getting started in web design can be quite difficult. For readers, there are tons of great free tutorials online. However, some people find visual instruction to be more effective for their learning style.
Instructional videos are an incredibly rich learning tool and could be just what you need to finally learn web development properly. We’ve compiled a list of over 30 excellent screencasts for beginners across a number of web technologies and disciplines.
NetTuts
NetTuts is one of the best providers out there for free content related to learning web design. They have a wealth of articles and video tutorials for learners at all levels. Here are a few for beginners in HTML5, CSS3 and JavaScript.
“This screencast will serve as the final entry in a multi-part series across the TUTS sites which demonstrates how to build a beautiful home page for a fictional business. We learned how to create the wireframe on Vectortuts+; we added color, textures, and effects on Psdtuts+; now, we’ll take our completed PSD and convert it into a nicely coded HTML and CSS website.”
“HTML 5 provides some great new features for web designers who want to code readable, semantically-meaningful layouts. However, support for HTML 5 is still evolving, and Internet Explorer is the last to add support. In this tutorial, we’ll create a common layout using some of HTML 5’s new semantic elements, then use JavaScript and CSS to make our design backwards-compatible with Internet Explorer. Yes, even IE 6.”
“One of our readers requested a tutorial on how to build a lava-lamp style menu. Luckily, it’s quite a simple task, especially when using a JavaScript library. We’ll build one from scratch today.”
“This screencast series focuses exclusively on JavaScript, and will take you from your first “Hello, World” alert up to more advanced topics.”
“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.”
“In today’s video tutorial, we’ll be slicing up a PSD, dicing it for the web, and serving it on a warm hot plate. Our design sports a neat “Web 2.0″ feel and comes courtesy of Joefrey from ThemeForest.net. Be sure to visit his profile if you have the chance.”
Doctype TV
The guys at Doctype put out frequent screencasts on subjects ranging all over the web design spectrum. Below you’ll find videos to get you started on Ajax, grid-based design, CSS3 columns and building your first jQuery plugin.
“Nick gives an overview of grid based design and Jim breaks down the basics of AJAX.”
“Nick deconstructs CSS multi-column layouts and Jim shows you step-by-step how to create your very own jQuery plugin.”
TutVid
TutVid is a web design tutorial site that offers free instructional videos. You can also buy a given video to receive a higher resolution downloadable version along with any associated project files. Below we’ll look at a few of the available Dreamweaver tutorials.
“Learn all about styling tags and how to write CSS code in Dreamweaver. By the end of this tutorial you will have a good understanding of how to write CSS, how CSS works, and how you can write your CSS code in Dreamweaver.”
“We will take a look at a whole bunch of the things you want to be sure to know when starting to use Divs. Learn all about placing and using Divs as well as styling them with CSS in Dreamweaver!”
“In this video we will quickly run over XML, what it is, and what it is used for. We will then sit down and write out our very first XML document just a simple list of six people. We will use Dreamweaver, but really any text editor is fine. We will cover creating writing the actual language, adding attributes, as well as how we create our own tags and just some basics to get you going writing your own XML document.”
“In this video we will start with a folder of images and in about 30 minutes construct a very simple 2 column layout using CSS to style our page! We will learn all about using divs, creating CSS rules, targeting divs, creating a background, and so much more! Start learning to harness the raw power of Cascading Style Sheets to create, layout, and style your web pages today!”
Themeforest
Themeforest is an Envato marketplace that sells website templates of various types (HTML, WordPress, Joomla, etc.). The site also has a blog that posts some really helpful content from time to time. Check out the screencasts on PHP and jQuery below.
“Today marks the beginning of a brand new series that will show you EXACTLY how to get started with PHP. Just as with the “jQuery for Absolute Beginners” series, we’ll start from scratch and slowly work our way up to some more advanced topics. ”
“Starting today, 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. So there’s no reason to fight it anymore! Learn this dang thing and start earning more money on ThemeForest.net with your new-found skills.”
CSS Tricks
Chris Coyier over at CSS Tricks pushes out a steady stream of incredibly educational video tutorials. His site currently has 84 free to download screencasts that cover various HTML, CSS and JavaScript techniques and tips. Below we’ll look at six that should be helpful to beginners.
“In this first-ever video podcast, I start the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website. This is pretty rough here folks, I’m sure these will get more focused with time.”
“Being organized and using good formatting in your CSS files can save you lots of time and frustration during your development process and especially during troubleshooting. The multi-line format makes it easy to browse attributes but makes your file vertically very long. The single-line format keeps your file vertically short which is nice for browsing selectors, but it’s harder to browse attributes. You can also choose how you want to group your CSS statements.”
“There has been LOTS of great feedback on the first series of Converting a Photoshop Mockup into HTML/CSS. So let’s do it again! Every website is different will require different conversion technqiues so there will be plenty to learn this time around that will be different from last time.”
“In part one, we will be downloading and installing WordPress. Then we will install the “Starkers” theme by Elliot Jay Stocks to start with a completely fresh slate for our new design. No sense starting with the default theme, it’s more trouble than it’s worth! In part two, we will go over the theory behind designing for WordPress and how it’s much like “working modularly” and actually get started designing. In part three, we will finish up the design and start in with some more advanced functionality.”
“This video is the VERY basics of what HTML and CSS is, for the absolute beginner. HTML and CSS files are, quite literally, just text files. You don’t need any special software to create them, although a nice code editor is helpful. You can create these files on any computer and use your web browser to preview them during development. You can think of HTML as the content of your website: a bunch of text and references to images wrapped in tags. CSS is the design of your website. It targets the tags you wrote in your HTML and applies the style. Keeping these two things separate is key to quality web design.”
“In part 2 of this series, we begin the HTML/CSS conversion of the Photoshop mockup we created in part one. We start with a very skeletal project framework. Then we take a look at the Photoshop file layer organization. Then we start from the bottom up, creating the pieces we need from the Photoshop file and writing the HTML and CSS we need to get the job done. Much of the work isn’t actually “slicing” the Photoshop file, but looking closely at it and trying to mimic what is done there with correct markup and CSS techniques.”
Victoria Web
Victoria web is a sort of online web school currently in beta. They have a small handful of free video tutorials for web developers.
“Looking to begin learning and creating PHP applications? This video demonstrates tools used by industry professionals in order to get their applications up and running quickly and effectively.”
“Introduction to the jQuery JavaScript framework. You will learn how to use CSS selectors in order to modify DOM objects, sliding them in and out of view, fading, and creating custom animations.”
“Learn to create this entire dealership website from start to finish. Covering various techniques such as layer masks, clipping masks, reflections, shadowing, and more.”
ShowMeDo
ShowMeDo is a source for instructional videos on working with open-source technology and software.
“In this video I show the basics of Javascript. The <script> tag begins in between the tag. It could also be in between the <body> tag. That is why we call the message() function from within the onload attribute in the <body> tag (That is, when the page loads). Outputing simple text on the html page and alert boxes, defining a function and an if/else clause, gives us an immediate and general feel of what Javascript is.”
“This series of videos is a very basic approach to python programming for beginners. In the hopes that the audience will stay tunned until the pygame tutorials, which will show how to make simple 2D games with no prior knowledge of computer graphics.”
Other Sources
The videos below are from scattered sources around the web. It’s always good to learn from as many separate sources as possible to make sure you’re getting a thorough education.
“An in-depth three part walk through for creating your first WordPress theme.”
“This is the 3rd video of Advanced WordPress Video Tutorials. This video tutorial is showing how to work with some WordPress theme codes, that is how to add autoresponder code to the blog sidebar, how to put banner in the single post and similar things.”
“A short video tutorial on how to make a wordpress plugin.”
A three part series that takes you from designing a website in Photoshop all the way through coding in HTML and CSS.
“John Resig, creator of jQuery javascript library, has posted an online video about how to make an accordion style menu using jQuery. Pretty basic stuff… but a good intro to jQuery if you’re new to this.”
Conclusion
With all the free resources above, I hope you’re running out of excuses for not being able to code sites by hand. It’s time to jump in a get your feet wet. Merely following along with the videos above will teach you loads and will get you well on your way to becoming a full-fledged web developer.
Know of any more free video tutorials? Leave a link in the comments below.
