August 2016

Drupal 8 Site Building

Greetings!

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.

Thank you so much, and enjoy!

Greetings fellow learners!

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.

Thanks as always for watching!

 

About using meaningful images as CSS backgrounds and accessibility New!

About using meaningful images as CSS backgrounds and accessibility

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.

How contrast ratios and WCAG ratings work New! (This one's FREE!)

How contrast ratios and WCAG ratings work

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.

Reviewing links with unclear link text New!

Reviewing links with unclear link text

Our accessibility audit turned up a few links that had potentially unclear text. We review these and describe how we're making these elements more accessible.

How to run an accessibility audit with Firefox's AInspector Sidebar add-on New! (This one's FREE!)

How to run an accessibility audit with Firefox's AInspector Sidebar add-on

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.

What ARIA is, how "landmarks" work and adding a "main" landmark New! (This one's FREE!)

What ARIA is, how "landmarks" work and adding a "main" landmark

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.

How and why to use the "navigation" role on HTML "nav" elements New!

How and why to use the "navigation" role on HTML "nav" elements

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.

Adding container elements with ARIA roles and why to use HTML tags instead of ARIA roles New!

Adding container elements with ARIA roles and why to use HTML tags instead of ARIA roles

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.

How and why to add ARIA landmark labels New! (This one's FREE!)

How and why to add ARIA landmark labels

In order to pass our accessibility audit, we look into adding ARIA labels to distinguish landmark elements on the page with the same ARIA role.

How to add a language code to your web page New!

How to add a language code to your web page

Here we make it explicit that our site's language is English.

Reviewing our other "Styles / Content" accessibility audit checks New!

Reviewing our other "Styles / Content" accessibility audit checks

Having conquered all of the violations for our site in the "Styles / Content" section of our audit, we explain how the "manual check" line items work and move on.

Reviewing our AInspector Sidebar "Links" accessibility violations New!

Reviewing our AInspector Sidebar "Links" accessibility violations

Here we see that an issue that came up in our other accessibility audio with our link text not being descriptive, and again we move on.

How to add text in a link for accessibility but hide it from view New!

How to add text in a link for accessibility but hide it from view

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.

Fixing an accessibility issue with our hidden labels New!

Fixing an accessibility issue with our hidden labels

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.

How to use the "fieldset" and "legend" HTML tags for input groups New!

How to use the "fieldset" and "legend" HTML tags for input groups

Our accessibility audit suggested the use of a "fieldset" tag around our group of radio buttons, so we add one in along with a caption like "legend", and get it styled to match our mockup.

Wrapping up our accessibility audit review New!

Wrapping up our accessibility audit review

In this video we address a few odds and ends from our accessibility audit.

Congratulations on completing "Front End Development!" New!

Congratulations on completing "Front End Development!"

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!

Bonus: How to add a favicon to your site New!

Bonus: How to add a favicon to your site

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!

Add to playlist

Add to , or

Add to new playlist:

Add to playlist
This is a member-only feature
But, it's easy to become a member

Add to cart:


Loading...
Contact us

Below are the supported keyboard shortcuts for our video player.

space
Start / stop video
shift
Go to next video
shift
Go to previous video
Increase or decrease player speed by 20%
Skip ahead or go back by 15 seconds
1...9
Jump to a percentage (2 is 20%, for example)
f
Toggle full screen
Videos Pricing More Search
BuildAModule Logo Icon BuildAModule Logo Icon
Become a member!
$29
1 month
$156
6 months
10% off
$276
12 months
20% off
All memberships come with the following:
24 / 7 access to the entire 1800+ video library
An innovative video player with a rolling transcript
Extensive Drupal and cross-platform training
A thorough and thoughtful training style
Progress tracking
Take notes on specific video sections
Intuitive multi-user management
How many users?
user
Go solo with a single user, or give multiple team members access through one account and get discounts by bundling multiple users into a single membership.