20 More New Drupal 8 and Front End Development Videos


Hey-o!

We have some fun videos out this week, including several on styling sliders and one on how the 'position' CSS property works - a tool that many of use use regularly but haven't taken the time to really suss out. We also walk through what some of the new modules in Drupal 8 are for.

Enjoy!


What the "Core (Experimental)" section is for and how Inline Form Errors works New!
(This one's FREE!)

Screenshot for What the 'Core (Experimental)' section is for and how Inline Form Errors works

In Drupal 8 there is a new group of experimental modules that are being worked into Drupal core but still have known bugs or an unstable API. Here we talk about these modules and what one of the experimental modules is for.

What the Migrate and Migrate Drupal modules are for New!

Screenshot for What the Migrate and Migrate Drupal modules are for

The fact that the Migrate module ships with Drupal 8 is a huge win for those who might be looking to upgrade their Drupal 6 and Drupal 7 sites. In this video we explain what both the Migrate and Migrate Drupal modules are for and hopefully get you excited enough to give them a shot. Later on in this series we'll be demonstrating how these work in detail.

How the Datetime, Link and Telephone modules work New!

Screenshot for How the Datetime, Link and Telephone modules work

Formerly contributed modules, the Datetime, Link and Telephone modules supply HTML5 native fields that also get some robust server-side validation right in Drupal 8 core.

What the "Web Services" modules are for New!

Screenshot for What the 'Web Services' modules are for

Here we explain briefly what the "Web Services" group of modules is for and why you might still end up using the contributed Services module if you need to build a robust API for your project.

Comparing the "Site information" and "Cron" admin pages in Drupal 8 and Drupal 7 New!

Screenshot for Comparing the 'Site information' and 'Cron' admin pages in Drupal 8 and Drupal 7

For the most part, the "Site information" and "Cron" configuration pages are the same, but in this video we work through the minor changes.

Merging our "slide" and "slideshow" components and refactoring our classes New!

Screenshot for Merging our 'slide' and 'slideshow' components and refactoring our classes

Earlier in this series we created a "slide" component to house some CSS that didn't belong anywhere else. Now that we've created the "slideshow" component, it's looking like the slide CSS actually belongs in there. In this video we merge two components - something that you will likely find yourself doing again.

How we will approach styling our circular, bordered images New!

Screenshot for How we will approach styling our circular, bordered images

Here we summarize the styles that we'll need to get a nice circular image.

Why we're using a background image for our circular images, and building out the basic CSS New!

Screenshot for Why we're using a background image for our circular images, and building out the basic CSS

In this video we start the process of coding the circular author images that we'll use in our "snippet" component. We also explain the accessibility implications of using a background image for an author image and how we'll address problems with it later in this series.

How to style a circular image with a border and drop shadow New!

Screenshot for How to style a circular image with a border and drop shadow

Here we build on the previous video and add some rounded corners, a border and a nice drop shadow to our author image.

Adding our second image, and moving our snippet HTML to the right place New!

Screenshot for Adding our second image, and moving our snippet HTML to the right place

For completeness sake, we add our second snippet image and move the whole HTML chunk to the component where it will live out it's HTML-y life. Is this starting to feel like a real web site yet?

Reviewing what functionality we need for our slideshow sliders New!

Screenshot for Reviewing what functionality we need for our slideshow sliders

Our mockup doesn't move, but we can tell a lot about the implied functionality in our slideshows just by doing a bit of detective work. In this video we review the mockup and figure out what our requirements are going to be for our slideshows and what makes each slider unique.

Overview of the "Flexslider" feature set and review of examples New!

Screenshot for Overview of the 'Flexslider' feature set and review of examples

We're going to use the "Flexslider" JavaScript library to generate our slideshows, and here we review the examples on the Flexslider site to get a sense of the feature set available to us and to appreciate just how much the library does for us.

How to install Flexslider and add a working example New!
(This one's FREE!)

Screenshot for How to install Flexslider and add a working example

In this video we use Bower to download Flexslider and then get a simple example working in our template. Along the way, we run into an issue with Bower's search functionality not working, and find a workaround using the name of the Github project and the command line.

How to connect Flexslider to existing HTML to convert it to a slider New!

Screenshot for How to connect Flexslider to existing HTML to convert it to a slider

The example that we copied over worked great, and here we re-connect the slider with our own content.

Tracking down why the Flexslider navigation does not appear over the slider New!

Screenshot for Tracking down why the Flexslider navigation does not appear over the slider

After we attach Flexslider to our slideshow, we are able to see it working, but the navigation for the slideshow is in a totally unrelated place on the page. Here we start a drill-down to figure out what's going on.

How the relative, absolute, static and fixed CSS "position" values work for element layout New!
(This one's FREE!)

Screenshot for How the relative, absolute, static and fixed CSS 'position' values work for element layout

As we alluded to in the previous video, the problem with our Flexslider navigation not being positioned properly had to do with the default value of the CSS "position" attribute on our elements. In this video we explore what is often a confounding but absolutely critical CSS property for layout, and how the different values work in relation to one another.

Why adding left padding to slides in our slideshow container doesn't work New!

Screenshot for Why adding left padding to slides in our slideshow container doesn't work

In this video we take a stab at getting the content in our slideshow to visually match the mockup. The first order of business is adding some padding to the left, and for very good reasons we try adding the padding to the slides instead of the slideshow container. By doing this, we witness first hand the difficulty in modifying the CSS of third-party libraries, and move on to another possible solution.

Solving our slideshow left padding issue by applying padding to the slideshow container New!

Screenshot for Solving our slideshow left padding issue by applying padding to the slideshow container

Here we manage to find a solution to our left padding issue by adding the styles to the slideshow container instead of the individual elements. By doing this we lose some flexibility, but it works and that's all we need right now.

Setting the width of our slideshow slides New!

Screenshot for Setting the width of our slideshow slides

Having set the left padding, the next style to add to our slideshow is the width of the content. Here we do just that.

A discussion of options for vertically aligning our slideshow content New!

Screenshot for A discussion of options for vertically aligning our slideshow content

We've had to vertically align numerous elements so far in this series, and in this video we discuss the how the possibilities we're familiar with might help us with the current task of vertically aligning our slides.

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.