August 2016

Today I'm releasing a new video collection called Drupal 8 Site Building. Not just the first chapter or two, but all 265 videos of it, all at once. This is something I've never done before. If you're interested in hearing what makes this series unique, read on. But if you're ready to dive in now, there are 20 or so free videos to get you started even if you don't have an active membership. Click here to begin watching Drupal 8 Site Building.

The goal of the series is to provide a solid foundation for every new Drupal user and a rapid and thorough review of best practices for veteran Drupalists. It's also thoughtfully categorized into discrete videos that are easily searchable by title, description and transcript in order to make it a valuable reference even for those that aren't going to watch the series from start to finish.

A work of art

I've spent the last three months doing very little besides researching, designing, recording and editing this collection. While it's the Drupal 8 spiritual successor of the Build Your First Drupal 7 Web Site collection with several aspects of Advanced Site Building in Drupal 7, it's more tightly edited and carefully planned than any other collection I've put out. Some additional features include:

Quizzes at the end of each chapter

Challenges at the end of each chapter

Solutions for the quizzes and challenges in step-by-step video format

File and database snapshots of each chapter so you can easily start from anywhere in the series, along with clear and easy to follow instructions for restoring from the backups. I've also included a snapshot of the finished project.

Support for minor Drupal release updates

Sound effects and humor (experimental, let me know what you think)

Practical and complete

Drupal can be complicated, and it's impossible to learn it thoroughly without understanding how each part of Drupal relates to the other parts. To demonstrate these important connections, we focus on building a single project from start to finish. The backstory and ongoing narrative around the project also provides a memorable context to make it easier to remember what was learned later when working on real world projects.

Why all at once?

I really wanted members to be able to view this collection all at once, instead of waiting for months to see it to its end. It will give you more freedom in how you view the series, and as a consumer I know that's something that I appreciate (thank you, Netflix).

Another factor is that Drupal 8 is moving faster than any other major Drupal release. For the first time in Drupal history, minor releases of Drupal can contain new features. Right now Drupal is at version 8.1, and will soon be at 8.2. When that new version is released, it will contain some excellent improvements and a lot of squashed bugs. If I released this collection in smaller batches it would stretch over several minor versions of Drupal, meaning that those who were watching the series as it was released would need to upgrade as they go, and I don't cover upgrading until the last chapter!

So yeah, what about those updates to Drupal?

It's a really, really great thing that Drupal 8 is getting minor releases every several months. It gives core Drupal developers a chance to see their work in action quickly, and gives the project many more opportunities to iterate on ideas. And it means that users of Drupal 8 get to bank on these improvements with minimal risk of breaking existing integrations, something never possible before.

But it sure makes the job of trainers more difficult. In seven weeks, Drupal 8.2 will be out and a number of the videos in this series will need updates. 6 months after that will be another minor release, and I'll need to put together another round of updates.

I mention this not to garner pity (but pity is welcome, too!), but just to illustrate that this new pace of change in Drupal is something that I planned for in this series. I will be making new chapter snapshots with each minor release and will also work hard to keep video updates up-to-date, so any changes in the interface don't get in the way of learning.

From the heart

I poured my heart into this series. That doesn't mean that you have to like it, but I think it means that there's a greater chance you will. After screencasting for the last six years, I've come to embrace it as an art form, and I tried some new things in this series that I hope you like. Learning through videos should feel like a natural, enjoyable and efficient exchange between the trainer and the learner, and everything that gets in the way of that should be set aside. I'm learning more about how that works every time I produce a new series, and I expect I'll keep learning more as I go. This series, though, is my best work so far. Fingers crossed that it works for you, too.

Here it is, the final installment in the "Front End Development" series. In this last batch of videos, we look at what ARIA tags are, how they can improve the accessibility of your site, and how to implement them. We also take a look at a tool for Firefox that scans your site for accessibility issues and offers suggestions for fixing them.

This has been our longest video series by far, and for a good reason. Going from a mockup to a functioning template requires a ton of knowledge and awareness of numerous angles. I hope that if you've been a watcher of the series that you've seen your toolset grow and been able to put some pieces together that might have been difficult to put together on your own.

Chromes Accessibility Developer Tools gives us a warning to check if we're using meaningful images for CSS backgrounds where they're hidden from screen readers. We are, and we discuss some alternatives to make sure our textual browser users get the meaning of these images.

The contrast between the foreground and background color can be a big factor in readability. In this video we use the accessibility audit as a jumping off point for discussing what contrast ratio means, and how it is one factor in seeking a higher WCAG rating.

Chrome's accessibility audit tools are concise and quick, but the "AInspector Sidebar" add-on for Firefox is more complete. We get this installed and open up the sidebar to see what our Chrome audit might have let slip through the cracks.

ARIA (Accessible Rich Internet Applications) is a specification that helps us create rich interfaces for our websites without sacrificing usability for screen readers. Most of what's covered in ARIA's scope is beyond what we need at this point in our site development, but there are a couple techniques we'll end up using, the first being adding landmark roles to our site to more easily identify the role of each element.

Even though the "nav" element pretty clearly has a navigation role, some browsers don't add that role by default. Here we reference a useful web page that lists possible elements and default ARIA roles and explain why sometimes we have to be so explicit.

Many HTML elements have roles built-in, and whenever possible, using a specific HTML tag instead of setting the role of a generic HTML tag makes the HTML more readable and reduces redundancy. In this video we knock out another accessibility violation of our site by adding container elements and discuss the benefits of using HTML tags when we can.

We saw in the Flexslider navigation how it's possible to add text to a link but hide it from view, and here we do the same thing to the empty submit button in our search form. It's a nice trick to know.

An earlier decision we made to hide any labels with the CSS "display" property that weren't supposed to be visible in graphical browsers threw a red flag in our accessibility audit, so we explore another approach to hiding them visibly that gets a pass.

Holy cow! Did you really make it through the entire "Front End Development" series? That's no small feat, and the skills you have now put you in a great position to work on virtually any web based project as a front end developer. Great work!

Even though we've covered an incredible amount of material throughout this series, I thought we should leave the series in a spirit of learning, since you'll find yourself constantly learning more as you further develop your skills. Good luck moving forward!

It looks like there might be an issue playing videos in this browser. We're working on better cross-brower experience, but in the meantime please try the latest Chrome or Firefox browsers. Or, you may be able to watch the video directly without progress tracking or transcript: