20 NEW BuildAModule videos

Happy Tuesday!

I hope you stateside viewers had a thoughtful and relaxing Memorial Day. For the rest of you, I hope your week started out solid.

This week heralds another batch of Front End Development videos. Some of you are like 'come on, MORE FED videos?! When is this collection going to be done?! I want some D8!' I understand. We're getting there. This series is going to set a solid foundation to refer to when we get to D8 theming, I promise.

This week we tighten up our slideshow controls, embark on our header and begin ordering our content in the way we see it in the mockups. Fun stuff!

Have an excellent rest of the week, friends!

Fixing horizontal scrolling issue created by our "snippet" carousel New!

Fixing horizontal scrolling issue created by our "snippet" carousel

As we make our browser window smaller, we see that the snippet carousel is also causing a little bit of horizontal scrolling. In this video we explore possible solutions to the problem.

Adjusting our carousel to stretch across smaller browser windows New!

Adjusting our carousel to stretch across smaller browser windows

Here we apply a breakpoint to our carousel to have it stretch across the entire browser window whenever the browser gets small enough. This results in some strange behavior with our next and previous buttons, so we'll end up hiding them in an upcoming video.

Converting our carousel's "max-width" breakpoints to "min-width" New!

Converting our carousel's "max-width" breakpoints to "min-width"

As we've done before, we started by coding our CSS with a desktop in mind, but here we convert the CSS to a "mobile-first" approach by swapping our "max-width" media queries with "min-width."

How to hide Flexslider navigation in smaller browser windows New! (This one's FREE!)

How to hide Flexslider navigation in smaller browser windows

Here we hide the Flexslider previous and next navigation on smaller browser windows where the icons become more of an eyesore and less useful.

Adjusting the styles of our alt hero section title to be responsive New!

Adjusting the styles of our alt hero section title to be responsive

Our carousel slideshow is looking pretty good, but we notice an issue in the title of the hero section that contains it that we tackle before moving on.

Adjusting the contact form CSS to be responsive New! (This one's FREE!)

Adjusting the contact form CSS to be responsive

In this video we move onto our contact form and see that with a simple adjustment in a single breakpoint, we can make the entire form responsive.

How to use the CSS "whitespace" property to prevent text from wrapping to another line New! (This one's FREE!)

How to use the CSS "whitespace" property to prevent text from wrapping to another line

When we added a breakpoint to the contact form, we noticed that the labels on our radio buttons could look a bit wonky if they get split into multiple lines. Here we correct that by using the "whitespace" CSS property and setting it to "nowrap," a nice tool to have in your CSS tool belt.

Re-ordering the content in our template to match the mockup New!

Re-ordering the content in our template to match the mockup

Throughout this series, we've been able to focus on each of the components of our site independently, meaning it didn't matter where exactly it appeared in our template. We're getting to the point now, however, where we're finalizing our overall layout and getting the full site matching the mockup. So, we spend a couple minutes reordering the content on our site to set us up for touching up our styles.

Discussion of how we plan to adjust the header for different viewport sizes New!

Discussion of how we plan to adjust the header for different viewport sizes

In this video we think about how the overall header should behave as the viewport gets smaller.

Adding the HTML and CSS scaffolding for our top header section New!

Adding the HTML and CSS scaffolding for our top header section

Before we can add meaningful CSS, we need some HTML scaffolding and some CSS classes to pin our styles on. Here we build those out and get ready to add some styles.

Positioning our top header elements in the browser New!

Positioning our top header elements in the browser

Now that we have our header scaffolding, we're ready to start positioning the logo, search nav and account icon.

Moving our top header CSS from the browser into our stylesheets New!

Moving our top header CSS from the browser into our stylesheets

After adjusting our header top CSS in the browser, we bring the styles into our SASS stylesheets to make them permanent.

How we want our top header to behave as the browser gets smaller New!

How we want our top header to behave as the browser gets smaller

Here we look at how we want the various elements in the header top to react to changes in the viewport size.

Adjusting our header bottom to stretch across the entire browser and center its content New!

Adjusting our header bottom to stretch across the entire browser and center its content

In this video we modify the styles of our header bottom to stretch across the browser, and along the way we adjust the styling of our overall header to accommodate this.

Aligning the elements in the header bottom and adding a border New!

Aligning the elements in the header bottom and adding a border

Here we adjust the positioning of the elements in the header bottom and add a nice, clean border to the top to separate it from the top heading.

Removing extra padding from the header bottom section New!

Removing extra padding from the header bottom section

Earlier we foreshadowed the possible need to remove some padding in our header bottom, and lo and behold, it has come to pass!

Adding responsiveness to our top header by adjusting CSS in the browser New!

Adding responsiveness to our top header by adjusting CSS in the browser

Our top header functions fairly well already as we reduce the size of the browser, but visually it could use some touching up. Here we adjust the CSS of the header in the browser until we get something that looks good.

Moving our responsive header CSS from the browser to our SASS files New!

Moving our responsive header CSS from the browser to our SASS files

Having gotten a set of CSS modifications that make our header look a bit better on smaller browser windows, we commit those changes over to our SASS.

Adding a breakpoint to stretch the logo the full browser width on small screens New!

Adding a breakpoint to stretch the logo the full browser width on small screens

One final thing to do in the header top is get the logo to fit the screen when we bump the browser down below the last breakpoint we set. In this video we do just that.

Why it's important to add extra padding for touch screens New! (This one's FREE!)

Why it's important to add extra padding for touch screens

With touch screens, it's easy to accidentally tap the wrong button or input if they're positioned to close to one another. Here we take a couple of seconds to point out that we can add some padding to items to help alleviate that issue.

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.