30 Free Video Tutorials for Learning Web Design

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.

The Ultimate Guide to Creating a Design and Converting it to HTML and CSS

“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.”

How to Make All Browsers Render HTML5 Mark-up Correctly: Screencast

“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.”

How to Build a Lava-Lamp Style Navigation Menu

“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.”

JavaScript from Null: Video Series

“This screencast series focuses exclusively on JavaScript, and will take you from your first “Hello, World” alert up to more advanced topics.”

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.”

Slice and Dice that PSD

“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.

Grid Based Design and AJAX 101

“Nick gives an overview of grid based design and Jim breaks down the basics of AJAX.”

CSS3 Columns and jQuery Plugins

“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.

Dreamweaver CS4: Styling Tags with CSS

“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.”

14 Steps: How to Use Divs

“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!”

Create a Basic XML Document

“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.”

Create a Full CSS Website

“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. 

Diving into PHP Video Series (11 Parts)

“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. ”

jQuery for Absolute Beginners

“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. 

Converting a Photoshop Mockup (part 1 of 3)

“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.”

CSS Formatting

“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.”

Converting a Photoshop Mockup: Part Two, Episode One

“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.”

Designing for WordPress: Part One

“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.”

HTML & CSS – The VERY Basics

“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.”

Building a Website: HTML/CSS Conversion

“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. 

Getting Started With PHP

“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.”

jQuery Introduction

“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.”

Entire Web Design

“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. 

The basics of Javascript

“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.”

Python from zero

“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. 

Creating a WordPress Template – Part 1 of 3

“An in-depth three part walk through for creating your first WordPress theme.”

Modify WordPress Theme – Video Tutorial

“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.”

How to make a wordpress plugin

“A short video tutorial on how to make a wordpress plugin.”

Creating a Website: From Start to Finish

A three part series that takes you from designing a website in Photoshop all the way through coding in HTML and CSS.

jQuery Online Movie Tutorial by John Resig

“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.”

Designing the Navigation of a New Website

Other than the visual design, determining how a user will navigate a website is one of the more challenging creative tasks that you’ll face as a web designer. The main goal is to make people feel in control of the site and capable of getting around quickly and efficiently. Nothing is worse than a user feeling lost in your site.

To help people get around and stay oriented, your navigation scheme must be a road map of the entire site, complete with “you are here” signs.

Global navigation for websites

Remember the famous line from the 1970s TV commercial: “How many licks does it take to get to the center of a Tootsie Pop?” With candy, the more licks, the better. On the web, however, the opposite is true: Users won’t find anything tasty about navigating through gobs of pages. Your goal is to get users as quickly as you can to their desired content.

The best way to reduce the number of clicks is to provide your primary, secondary, and tertiary navigation sets on each page of the site. This strategy, called global navigation, enables people to quickly navigate from one main section to the next without needing to retrace any steps. Additionally, it’s important that these navigation sets are always located in the same place and do not change what they offer (swapping navigation options in and out). This consistency provides a mental anchor for the user.

Credit: © Apple, Inc.

Apple’s global navigation system allows users to stay oriented and to quickly traverse from one section to the next.

Section navigation

After users select a category from the primary, secondary, or tertiary navigation group, they’re transported into a section. Assuming that the section has a few levels of content within it, you need a way to navigate through it. A typical practice is to reveal a set of section navigation choices on the page. These choices are unique to their section, but the region you select to display them is the same region used to display section navigation for other areas of the site.

This section navigation design reveals the first level of pages in the Products area of the website.

This section navigation design reveals first- and second-level pages in the Products area.

Alternatively, you can display the section navigation fully opened. The advantage is that users can quickly see all the first- and second-level content with a section. The disadvantage is that the navigation can take up a lot of room and may look cluttered and overwhelming to the user.

Section navigation is often shown as a drop-down menu as well as on the page itself.

Typically, just the first level of pages is shown, but flyout menus can provide quick access to second-level pages. It is okay to have redundant section navigation, showing it both on the page and including it as a drop-down menu in the global navigation system.

Leaving a trail of bread crumbs

If Hansel and Gretel can use a trail of bread crumbs to find their way back through the forest, just think of what a digital version of bread crumbs can do for visitors to your website. Bread crumbs, as they’re actually called in the web-design industry, are text links you leave in a trail that marks your steps as you go deep into a section.

This bread-crumb trail provides a convenient way to retrace your steps in a site.

Bread crumbs are helpful to navigate sites that have navigation that goes more than two levels deep within a section. For example, if you use the section navigation to go down to a page that has even more links on it, you are now diving into a third or fourth level of the section’s hierarchy. It’s just not practical to display third- and fourth-level navigation on the page. So the bread crumbs can simply record your steps and get longer and longer as you dive deeper (hopefully no more than four levels or you’re getting into the catacombs of the site!).

Each bread-crumb link provides a quick way to retrace your steps back up the hierarchy. You don’t have to follow the links in sequence; you can click any link in the trail to jump quickly back to a different level in the hierarchy. The trail also gives you a good idea of where you are in the site. Unlike with a global navigation scheme, however, you cannot jump across to another section; you can only jump back to a level within a section. Think of a bread-crumb system as the browser’s Back button on steroids.

Graphically, the design convention for a bread-crumb interface is to show each previous step as an active text link followed by a character (arrow, colon, or pipe), all in a simple row. The last entry at the end of the trail represents the current page you’re on, so it should not be a link — and it should look different. If it were a link, it would simply reload the page — not the ideal user experience.

Project Wing vs. Prime Air: Google's Drones Soar Above Amazon's

Move over, Amazon. Google has just entered the commercial drone arms race with Project Wing, an until-now secret program to develop "self-flying vehicles" to deliver small packages, similar to Amazon's Prime Air.

Both programs are still years away from coming to fruition, with prototype drones — or, more accurately, unmanned aerial vehicles (UAVs) — completing only the most basic of test flights. However, the drones have been in development for a while, with notably different approaches to drone design. Google has been working on drones for two years; Amazon announced its program in December of last year.

For Project Wing, Google (actually Google X, the company's division in charge of "moonshot" projects) eventually settled on a tail-sitting aircraft design, which combines elements of a helicopter and a fixed-wing airplane. Rotors are mounted toward the front of the plane, which lift the plane from the ground since it sits with its tail pointed downward. Once it's in the air, it can reorient itself to fly like a plane, which lets it fly faster than a typical copter design.

Hybrid theory

Google says the aircraft shown in its test video is one of many iterations and shouldn't be taken as the final design for Project Wing. Nevertheless, Google may have settled on the ideal design for drone delivery: a craft that can take off and land slowly and safely, has the ability to hover so it can take its time when unloading its cargo, and can also fly like a plane so it can travel large distances quickly and efficiently.

"With vertical and horizontal flight, speed and efficiency come into the equation,"Google spokesperson Raymond Gobberg told Mashable. "The fixed wing helps it get there faster, but then when it transitions into hover, we're able to lower the package.But this is only one of vehicles we're testing."

The ability to stop and hover is in no way unique to Project Wing, but it is the key feature for delivering packages, and it's why most drones feature a helicopter or ducted-fan design. After all, most customers won't have room for a runway for a drone to land on, and parachuting packages from above isn't really an option (Google tried it and found that wind affected precise targeting too much, according to The Atlantic, which first reported on Project Wing on Thursday).

In Amazon's teaser video for Prime Air, a drone first lands in front of a house, drops its payload, then flies off a few seconds later. It's very simple, although some people criticized the depiction, saying that anything with rotating blades will be tempting to kids and curious onlookers, which represents a safety risk.

Google apparently agrees, which is why it decided to add a winch to the drone to perform the actual delivery. The tail-sitting design allows the drone to hover over the delivery target, then drop the item, attached to a fishing line, letting gravity pull it down at 10 meters per second (m/s). When it gets close to the ground, it slows things down to 2 m/s.

Once it gets to Earth, it releases the package and retracts the cable, leaving the drone high in the air and away from any potentially meddling hands. Conversely, Amazon's drop-ship approach isn't inherently unsafe, but it does introduce a wild card that Project Wing doesn't.

Google's drone would also theoretically have a longer range than Amazon's Prime Air drone, which uses a typical octocopter design. Amazon CEO Jeff Bezos has said the current range of the company's test drones is 10 miles, although that program is in the early stages as well. Google declined to give any kind of range spec for the Project Wing drones, but a spokesperson did say one of the reasons it picked a tail-sitting design was the increased range.
"Amazon's model was a 10-mile radius — five pounds within 30 minutes — which they estimate that is about 80% of the things they deliver," said Mike Toscano, CEO of the Association of Unmanned Vehicle Systems International. "Now you've got Google saying, 'I'm going to places like the Outback, where you've got 100 miles to deliver something, where it's very costly to deliver a five-pound package.' This is the way to get those long distances."

The human is the error

If tail-sitting aircraft are so beneficial, why hasn't the Air Force — or anyone else, for that matter — deployed one? They have, although almost all designs never flew past the experimental prototype phase. The main reason tail-sitters never caught on is because the continual changes in orientation are hard on the pilot, who could be facing forward one minute and upward the next.
"The reason you couldn't have that technology before is because the human being couldn't handle the vertigo," Toscano said. "The electronics can handle 9-10 G's; a human being can only handle 3-5. These are compelling reasons to go with automated vehicles or self-driving cars. From an engineering standpoint, you eliminate the weak link, and that's us."

If your pilot's a computer, though, that's not a problem. Drones don't suffer from spatial disorientation or brain trauma if they maneuver in ways that would damage a flesh-and-blood pilot. And the craft doesn't require the complexities of rotating sections or jet engines, like other plane designs for vertical takeoff and landing (VToL) that are in use.
With Project Wing, Google has taken an aircraft design from history's junk pile and turned it into a template for the future of drone delivery. We're still years away from getting backscratchers flown right to our front doors, but the armada of flying robots transporting them may end up looking more unusual than we ever thought.

Old Coders: When Programming Is a Second Career

Liz Beigle-Bryant took her first programming class, BASIC, in 1973. At the time, computers were part of the math departments instead of the engineering departments, she recalls. And because she had a background in family art, everyone at her high school discouraged her from doing so.
Beigle-Bryant, now 57, didn't revisit coding again until a couple of years ago, when she signed up for Codecademy's free online tutorials. Though there was no immediate payoff, she found learning the skill helped ease the inevitable discouragement that comes during a job hunt.

"I felt like I was accomplishing something instead of wasting time on Facebook or [playing] phone games," she says. "It helped me feel better about myself so I could project a better image."
In 2011, Beigle-Bryant was part of a round of layoffs at Microsoft, where she had worked as an administrative assistant. That career path was, by her estimate, her fourth one. Others included a job as a costume designer on the short-lived series Hypernauts in 1996, which at least got her a mention on IMBD.

In her mid-50s, Beigle-Bryant decided on a fifth career. During her unemployed period, she spent up to eight hours a day on Codecademy learning HTML and, later, Python. Eventually, she accrued the skills to land a job at the University of Washington (where she has held various roles, including migrating data), though she wound up falling back on her business administration background. Though it wasn't exactly what she had in mind, Beigle-Bryant says she's thankful. "As you get older, you're an expensive commodity [to an employer]."

Faced with similar situations of unemployment, many bemoan their fates and even give up looking for work. Others, like Beigle-Bryant, learn new skills such as programming to make themselves more attractive job candidates. 

The U.S. unemployment rate in July was 6.2%, according to the Bureau of Labor Statistics. The rate for programmers, meanwhile, is 1.3%, and the segment is projected to grow 8% over the next decade or so. Some recruiters believe there are as many as five jobs open for every applicant. As a result, the median salary for a programmer is $76,140, versus a median of $46,440 for all jobs.

The shortage of qualified applicants has led employers to lower their standards. A computer science degree is now a bonus rather than a requirement. Oftentimes, successful hires aren't even college graduates.

"I would say [we're looking for] anybody that can program," says Nicole Tucker, a recruiter for iCIMS, a New Jersey-based SaaS provider. "It's definitely the ability to be a problem solver. They have to be intellectually curious." Tucker adds that iCIMS has hired people who have learned to program via Codecademy or Coursera, another tech company that offers open online courses.
Stephen Babineau opted for something a bit more rigorous. Earlier this year, Babineau, who is a comparatively young 27, was accepted into Code Fellows, a Seattle-based company that provides intense boot camp-like courses that promise programming proficiency — even if you've never coded in your life.

Babineau, a former production assistant on Breaking Bad, among other projects, grew tired of 14-hour workdays. He also envisioned himself having a hard time with the physical demands of the job as he got older, which led him to try out for Code Fellows. Despite a lack of any programming knowledge, he was accepted and moved to Seattle for an eight-week program in the spring.

It was hard work. Babineau says he studied at Code Fellows 12 hours a day, five days a week — and then did homework on nights and weekends.In about the sixth week of the program, I got horrific eye strain," he says. "I talked to the teacher and he said take a night off, your sanity will much improve." Babineau took the advice and made it through the final leg of the program.
But it wasn't all drudgery. "I actually found that I enjoyed programming," he says.
Tucker says she looks for that passion in potential hires. The problem is, mid-career switchers aren't necessarily motivated — at least at first — by a love of coding. Inevitably, the lure of a higher salary and job stability have trumped their initial passion. That's why people are switching in the first place.

A recent study shows that switching careers solely for money and stability is a bad choice. Amy Wrzesniewski, an associate professor of organizational behavior at the Yale School of Management, and Barry Schwartz, a professor of psychology at Swarthmore College, who led the study, looked at 11,320 cadets in nine entering classes at the United States Military Academy at West Point. They found that those with strong internal motives for success did better than those who were highly internally motivated but also strongly influenced by "instrumental" motives like the ability to secure a job later in life.

"Remarkably, cadets with strong internal and strong instrumental motives for attending West Point performed worse on every measure than did those with strong internal motives but weak instrumental ones. They were less likely to graduate, less outstanding as military officers and less committed to staying in the military," the professors wrote in the New York Times.
In other words, if you like fixing things and solving puzzles, you'll probably be a better coder and enjoy work more than someone who is merely doing it for the paycheck. But that goes for many lines of work.

It's not always clear, however, if you'll enjoy coding. So you might try Ryan Hanna's method.
Hanna, now 30, spent his first seven years in the workforce in IT. He had a very limited knowledge of coding, so he started teaching himself via Codecademy in 2012. Starting with HTML, he moved on to CSS and JavaScript. "I've been through every one of their things," he says. Eventually, he was putting in 16 hours a week. "Sometimes I forced myself to do 30 minutes. Other times, I picked my head up and three hours had gone by." After five months of this, Hanna began working on building an app called Sworkit, which generates random exercise routines to meet your schedule.

Hanna thought 100 downloads sounded like an exciting number. But after the website Lifehacker ran a story on Sworkit, he got 10,000 downloads in the first month. This year, Hanna sold Sworkit to Nexercise, which hired him as well. He now has a whole new career.

It doesn't always turn out that way. Zach Sims, cofounder of Codecademy, says a minority of students finish Codecademy course — which is what you might expect since anyone can start one. Either way, since the courses are free, it can't hurt to try. "There is this common misconception that programming involves deep math knowledge, Sims says. "But it's gotten easy and abstract enough for most people."

At the very least, spending a few hours on Codecademy will offer a better understanding of some of the technologies that largely pervade our lives in 2014. "It's never going to hurt to understand or demystify the technology," Tucker, the iCIMS recruiter, says. "Even if you don't ever land a programmer job."

Have something to add to this story? Share it in the comments.

The Firefox OS Smartphone Is Only $33 in India

The inaugural Mozilla Firefox OS smartphone launched in India on Monday and it only costs $33. Dubbed the Cloud FX, the device is the result of a partnership between Mozilla and handset company Intex Technologies.

Mozilla announced at this year's Mobile Asia Expo that it was bringing the Cloud FX to Indian and Indonesian markets. However, the introduction of cheaper smartphones to India was first teased at the Mobile World Congress in February.

"With the launch of Intex Cloud FX, we aim to enable the masses to get smartphone experience at the cost of a feature phone," Intex director of marketing Keshav Bensal said in a statement Monday.

The cost-effective model is intended to help accelerate India's already-rapid rise to the top of the global smartphone market. India now has the the third-highest number of smartphone sales on the planet, according to a 2013 Canalys report, trailing only behind the U.S. and China.

Mozilla isn't the only company interested in tapping the lower-end of India's smartphone market. At Google I/O, Google announced its Android One program that promises to bring a 4.5-inch screen, dual-SIM, FM-radio enabled Android device to India for less than $100.

"The positive consumer feedback from other markets tells us that people like the unique user experience and openness we’re building with Firefox OS," Mozilla president Li Gong said in a statement. "Firefox OS smartphones in the ultra-low-cost category will redefine the entry-level smartphone and create strong momentum in Asia."

The phone packs a 4GB memory capacity and Bluetooth. It also supports Hindi and Tamil, two commonly spoken languages in India. It is available exclusively on SnapDeal.com.

Have something to add to this story? Share it in the comments.