New BuildAModule Videos (20 of them) About Your Front End

Yo peeps!

Happy summer to you. If you have kids in your life - at least in the States - then summer is a magical time where schedules potentially become less complicated and school-age kids have several weeks to discover what they miss about school. If you have young ones, (like I do) consider the opportunity at hand and how few summers might have left to share with them.

For those of you sans-kids, then please enjoy this season as you would any other (you and all your free time!).

This week I'm rolling out another batch of Front End Development videos. We cover some fun CSS stuff, like how z-index layering works, how to to create a beautiful curved drop shadow under any element, and when it makes sense to use a max-width breakpoint instead of min-width.

Enjoy!

Making the menu in our header bottom responsive New!

Making the menu in our header bottom responsive

In this video we begin the process of making our header bottom responsive, starting with the header menu.

How to simulate mobile and desktop devices with Chrome DevTools New! (This one's FREE!)

How to simulate mobile and desktop devices with Chrome DevTools

Browser developer tools have many useful and awe-inspiring features, and the device simulator in Chrome's DevTools is one of those. Here we begin a short walk-through of the simulator's features, starting with how to simulate specific devices like iPhones or Android phones. This is pretty cool stuff, and it gets even better in the following videos.

How to use the "viewport" meta tag to tell the browser a site supports mobile devices New! (This one's FREE!)

How to use the "viewport" meta tag to tell the browser a site supports mobile devices

By default, a mobile browser assumes that a website was built for larger screens, and it zooms out to fit the whole site. However, with the "viewport" tag, we can tell mobile browser that we support whatever size they are, making our site usable without zooming or horizontal scrolling.

How to test a site at different download speeds with Chrome DevTools New!

How to test a site at different download speeds with Chrome DevTools

We haven't gotten to the performance section of this video series yet, but since we're looking at the device simulator's interface, it makes sense to point out a feature where we can adjust the simulated internet speed so we can test how our site might work on slower connections.

How to see how media queries affect a site with the Chrome device simulator New!

How to see how media queries affect a site with the Chrome device simulator

In the last videos we saw how we can use Chrome's DevTools to simulate various devices, and here we demonstrate one additional feature, which is seeing which breakpoints are coming into play with particular viewport sizes. This is really nice if your CSS style changes are subtle and hard to pinpoint.

Styling our header bottom to be responsive New!

Styling our header bottom to be responsive

In this video we put some of what we talked about earlier into action and add the breakpoints needed to get our header bottom looking solid at any browser width.

When it makes sense to use "max-width" and converting header breakpoints to "min-width" New!

When it makes sense to use "max-width" and converting header breakpoints to "min-width"

Even though we've explained the benefits of coding our CSS mobile-first, meaning adding breakpoints with "min-width" instead of "max-width", there are still situations where using "max-width" makes sense. Here we explain one such scenario.

Adjusting our slideshow CSS for smaller viewports New!

Adjusting our slideshow CSS for smaller viewports

The slideshow at the top of our page is the last component we have left to adjust for smaller browser windows, and after having cut our teeth on the previous components, the task is pretty easy.

Converting our slideshow breakpoints to "min-width" New!

Converting our slideshow breakpoints to "min-width"

Just like we've done as we've added breakpoints for other sections of our layout, we're starting with "max-width" breakpoints, and then converting them to "min-width." Here we do the same thing for our slideshow CSS.

Evening out the vertical padding in our slideshow New!

Evening out the vertical padding in our slideshow

A designer's eye might have caught a bit of uneven padding in our slideshow. Here we fix that so you don't have to worry.

Reviewing our template at different browser sizes for possible touch-ups New!

Reviewing our template at different browser sizes for possible touch-ups

Our template is looking really good, and we're at a point where we can give the template as a whole a final look-through to find any stray styling that we might have missed. We test out a few different viewport sizes and find a bit of margin to adjust, but almost everything else looks great.

How the "z-index" property works and how layers are positioned by default New! (This one's FREE!)

How the "z-index" property works and how layers are positioned by default

Throughout this templating process, you may have become aware that there are layers to content. Each element is kind of its own layer, and later layers will overlay earlier layers. However, we can override the default layering of content with the "z-index" property, and we demonstrate how this works here.

Why z-index poses issues as templates get more complex, and how to solve those issues New!

Why z-index poses issues as templates get more complex, and how to solve those issues

The "z-index" CSS property is super useful, but in complex templates with modals and overlays, you may find that the z-index number you're using gets out of hand, and maybe even starts to exceed the browser's ability to support it. In cases like this, it makes sense to create distinct z-index layers, which is a lot easier through SASS variables.

How to test if z-index will solve a layer ordering issue New!

How to test if z-index will solve a layer ordering issue

We started talking about the "z-index" property as a potential way to solve a problem we were seeing with our selectize input. Here, we see if z-index will work by using a really high number.

Fixing the layering issue with our selectize dropdown New!

Fixing the layering issue with our selectize dropdown

After discovering that the "z-index" property wasn't going to help us with our selectize dropdown menu, we look for other answers and turn up a property that will give us what we need to fix the layering issue.

Talking through how to create a rounded drop-shadow under a rectangular element New!

Talking through how to create a rounded drop-shadow under a rectangular element

In this video we talk through the approach we're going to take to adding a rounded drop shadow to our slideshow. If you've never seen this before, it's a pretty slick technique.

How to add a curved drop shadow to an element with CSS New!

How to add a curved drop shadow to an element with CSS

In the previous video we explained our strategy for creating a rounded drop shadow, and here we go through the process of implementing it in the browser. And boy is it pretty!

Moving our curved drop shadow CSS to SASS to make the changes permanent New!

Moving our curved drop shadow CSS to SASS to make the changes permanent

Now that we have a functional rounded drop shadow working in our browser, we take a moment to make the styles permanent by porting the styles to our SASS.

Basic approaches to testing a template in multiple browsers New! (This one's FREE!)

Basic approaches to testing a template in multiple browsers

Congratulations! We've completed the layout of our template, and that's something to celebrate for sure. However, we haven't looked at our site in other browsers for a while, so after we party for a moment, we come back to reality and start the process of opening and reviewing our template in multiple browsers to see if anything is off.

Reviewing our template in the Firefox browser for Mac New!

Reviewing our template in the Firefox browser for Mac

Since we're recording this on a Mac, we tackle checking our site template in Mac Firefox first.

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.