April 2016

Hola ladies and gents!

A happy Tuesday to you. This week BuildAModule is gracing your inboxes with yet another installment in Front End Development. This week we continue looking at what the term "Mobile-First" means and then - since we've completed the process of sorting out our content into syntactically correct chunks - we start fine-tuning our CSS to match the look of our mockup AND add responsiveness, starting with the footer.

And why is this exciting? Because if you've been watching this series from the beginning, you've finally reached a level of sophistication in FED that allows us to add responsive design considerations without heads exploding!

Oh, and one of my favorite videos in this series is coming out this week, which discusses the "Fixed Breakpoint" versus "Expand the browser until it looks like s***" approaches to responsive design. For a long time I've been wanting to explain the two approaches and discuss the merits of each. This week I can check that one off my bucket list.

If the front end material has been new to you, I hope you've had a chance to apply some of what you're learning to your work. If you haven't, consider moving forward on an idea you've had for a a web project and incorporate some of these concepts. The quicker you can apply what you're learning, the stronger the techniques and concepts will stick.

For those of you in the northern hemisphere, I hope you're enjoying spring. It's such a beautiful... beautiful ... aAAAA CHO!!!!!

What "mobile first" means in terms of CSS New! (This one's FREE!)

What "mobile first" means in terms of CSS

Even when the constraints of our project mean that we can't take a mobile-first approach to design or strategy, we can still take a mobile-first approach with our CSS. Here we explain exactly what that means (hint: it has something to do with "min-width" vs. "max-width."

Summary of which ways we can approach this project "mobile first" New!

Summary of which ways we can approach this project "mobile first"

Now that we understand what "mobile first" means, we can look at what ways we can use a mobile-first approach in our project.

Comparing fixed breakpoints to the "expand until it looks bad" responsive design approaches New! (This one's FREE!)

Comparing fixed breakpoints to the "expand until it looks bad" responsive design approaches

There are two common approaches to coding a responsive site based on mockups. The first is beginning with mockups for specific breakpoints - most commonly for phones, tablets and desktops - and using those fixed breakpoints throughout your CSS. The next is to code for a single size, and then either expand or contract the browser until things start to look out of place, at which point you add breakpoints for specific elements. Here we walk through these two approaches and the benefits to each.

How our footer will react to differences in browser size New!

How our footer will react to differences in browser size

Before we can start to code the CSS for our site, we have to think about what we want the site to actually do when the browser size is different. Here we explore our options for getting the footer to fit in the browser window regardless of its size.

How we will code our footer CSS desktop-first and then compare with a mobile-first approach New!

How we will code our footer CSS desktop-first and then compare with a mobile-first approach

To begin with, we're going to code our CSS for desktop first, since that's the kind of mockup we have. Later, we'll convert it over to a mobile-first approach.

How to group elements with wrapper div tags for layout styling New!

How to group elements with wrapper div tags for layout styling

In order to lay out groups of elements, we'll need to add some container elements so we can style them separately. In this video we wrap the footer elements that need a container.

Reorganizing our CSS to work with wrapper elements New!

Reorganizing our CSS to work with wrapper elements

When we added our wrapper elements, it changed how one of our CSS child selectors worked. In this video we troubleshoot the issue and re-align our selectors to work with our new wrapper elements.

How to use "float" to align elements to the right and left of the browser in a flexible way New!

How to use "float" to align elements to the right and left of the browser in a flexible way

Floats can be very useful for layout out elements in a flexible way that will adjust to variations in browser size. Here we use the "float" property to get a flexible three-column layout going in our footer.

How moving around markup for layout can be an accessibility issue New! (This one's FREE!)

How moving around markup for layout can be an accessibility issue

Sometimes it seems like it would make sense to adjust the order of elements in our HTML in order to make them easier to lay out, but it's important to consider the implications for accessibility if we re-order our content in a way that doesn't make sense.

Using negative margin to align our footer elements New!

Using negative margin to align our footer elements

Here we adjust some stubborn spacing in our footer with a bit of negative margin.

Adjusting styles to collapse the footer into a single column New!

Adjusting styles to collapse the footer into a single column

In this video we work through the changes that need to be made to our footer CSS to collapse it down to a single column.

Adding breakpoints to collapse our footer into a single column using "max-width" New!

Adding breakpoints to collapse our footer into a single column using "max-width"

Having worked through the CSS needed to get our footer content into a single column, we make the changes permanent and conditional by moving the style changes to breakpoints in our SASS. If this is your first time seeing breakpoints affect your layout, you'll really enjoy seeing this in action.

Adding a breakpoint to collapse our footer navigation New!

Adding a breakpoint to collapse our footer navigation

In previous videos, we added breakpoints to collapse our footer elements into a single column, and in this video we complete the process of making our footer fluid by adding a breakpoint to our navigation that makes it span the browser, whatever width it is.

How to convert desktop-first CSS to mobile-first CSS by switching to "min-width" New!

How to convert desktop-first CSS to mobile-first CSS by switching to "min-width"

When you have a desktop-based mockup, it's conceptually easier to begin coding the desktop version and then add smaller variation breakpoints later. However, there are some benefits in adjusting the CSS code to load mobile CSS first, and then add in the desktop version, and in this video we do just that.

Discussing how the "qualities" section should react responsively New!

Discussing how the "qualities" section should react responsively

Moving onto the next section we want to add responsiveness to, we think about how we'd want the icon boxes in the "qualities" section to adapt to smaller browser sizes.

Adjusting the padding in our stacked hero sections New!

Adjusting the padding in our stacked hero sections

As we work through the changes we need to make to our CSS, we realize that some of the changes we want to make are common for all of the stacked hero sections, so we adjust the CSS accordingly.

How to bump an element out of the container box and center it above the content New!

How to bump an element out of the container box and center it above the content

In the mockup of our icon boxes, the icon rests half-in, half-out of the actual content box. Here we explore a couple of approaches to bumping that icon out of the box and then centering it to whatever the width of the box might be.

Adjusting the text position and layout in our "qualities" boxes New!

Adjusting the text position and layout in our "qualities" boxes

Now that we have the layout of the icons squared away in our icon boxes, we move onto look at the adjustments we need to make to bring the text of the icon boxes in line.

When it makes sense to use relative units for width, and moving our CSS to our SASS files New! (This one's FREE!)

When it makes sense to use relative units for width, and moving our CSS to our SASS files

Earlier in the series we discussed the implication of using relative units for width, and how doing so can sometimes break a layout. In this video we explain how there are exceptions to the rule and how we might code our icon boxes to adjust nicely to a flexible width and height.

Making the relationships of our SASS values explicit with variables and equations New!

Making the relationships of our SASS values explicit with variables and equations

As we built out the CSS for our icon boxes, we were just playing with pixels in the browser to get things to look right. However, the final values we want in our SASS have relationships with other values, and where we can, it makes sense to make these relationships explicit with simple equations.

'Ello!

At the risk of becoming too predictable, this week I'm releasing another 20 videos in the Front End Development collection. This week's videos wrap up our effort to style a Flexslider carousel using CSS and SASS, and then we get to dive into something I've been looking forward to covering for years now...

Responsive design!

Being a little late to hop on the bandwagon of responsive design coverage has its advantages. As we progress through the next videos, you'll get to see how we can use an additional layer of tools including SASS plugins, Bower components and automation tools like Grunt to make it a lot more possible to build something once and progressively refactor it over time as needs change. Learning what I needed to in order to make these videos changed I worked in an essential, really positive way, and I hope many of you will make similar strides.

I also wanted to say thanks to all of you readers / watchers out there who help make the work I do meaningful. Without you, I would be lost.

Have a beautiful week!

 

How to add margin between grouped, floated elements New!

How to add margin between grouped, floated elements

In some recent videos we explored how to create columns of content by using the "float" CSS property. However, when dealing with a set of floated items that are separated into groups, we need to use some particular CSS to adjust how they're positioned in relation to one another.

Why it makes sense to apply CSS changes in the browser before committing them to code New!

Why it makes sense to apply CSS changes in the browser before committing them to code

Throughout this series, we've used a process where we've made changes to CSS code in the browser, and then we copy that code over to our CSS files later. In this video we explain why it's a good idea to start in the browser and then make those changes permanently later.

Reviewing how we added margin between snippets and making the CSS permanent New!

Reviewing how we added margin between snippets and making the CSS permanent

The process of adding margin between our snippet elements was kind of involved, so we take a moment in this video to review what we did before we start duplicating the CSS changes in our code.

The implications using absolute or relative units for content layout New!

The implications using absolute or relative units for content layout

As we go through the process of moving some of our CSS to our SASS files, we have to consider if it makes sense to use relative or absolute units for the elements in our snippets. Earlier we discussed the benefits of using relative units when it comes to accessibility, but now we're starting to also have to take our layout into consideration.

Testing variations in base font size with our layout and making corrections New!

Testing variations in base font size with our layout and making corrections

Because we've consistently been using relative units for many of our elements, we can easily test a change in browser font size by editing the size of our font in the "html" tag selector. This is also a handy way to adjust the size of your entire site for different scenarios with media queries.

When it's better to use absolute units for sizing when dealing with layout New!

When it's better to use absolute units for sizing when dealing with layout

Once we've figured out what CSS properties in our snippet code to make relative, and which to keep absolute, we now have a good example to draw from when later deciding when it makes sense to absolute or relative units for an element.

How to set up Flexslider to work as a carousel New!

How to set up Flexslider to work as a carousel

Now that we've got the basic HTML and CSS structure set up for our second slideshow, we explore how just a couple additional options can turn Flexslider into a versatile carousel.

How to set the width and spacing of our Flexslider carousel to fit the template New!

How to set the width and spacing of our Flexslider carousel to fit the template

Once we add the JavaScript to get Flexslider to work with our snippet components, we can start refining the look. To begin with, we get the spacing right so that two elements fit nicely in the viewport.

How to use Font Awesome for icons in our Flexslider carousel and hide the paging navigation New!

How to use Font Awesome for icons in our Flexslider carousel and hide the paging navigation

Earlier in the series we adjusted the previous and next navigation icons for Flexslider, and in this video we do the same thing, but with the added benefit of being able to leverage Font Awesome for the icons.

Modifying the colors in our carousel previous and next icons New!

Modifying the colors in our carousel previous and next icons

Over the last few videos we've been wrangling our carousel slideshow into a form that matches our mockup. In this video we get the coloring right for our previous and next navigation.

How to move an element outside of its container with the "left" or "right" CSS properties New!

How to move an element outside of its container with the "left" or "right" CSS properties

Earlier we covered how "absolute" positioning works. What we didn't mention was that using absolute positioning unlocks the ability to also use the "left" and "right" CSS properties to move an element around based on where it would normally be. Here we demonstrate how to use those properties.

Moving our carousel CSS from the browser to our SASS New!

Moving our carousel CSS from the browser to our SASS

We've done a lot of CSS work in the browser, and in this video we work through moving that CSS to our SASS files.

How to simulate a hover state in the browser in order to style CSS New!

How to simulate a hover state in the browser in order to style CSS

Styling a hover state in the browser can be a real challenge until you know this trick, since you can't hover over an element and modify it's CSS in the browser at the same time. However, Chrome DevTools (and other browser development tools) lets you turn on the hover state even when you're not hovering, allowing you to easily modify the CSS.

Refining our carousel slideshow CSS to use SASS variables for common values New!

Refining our carousel slideshow CSS to use SASS variables for common values

Here we do some brief refactoring to get common values out of our SASS rules and into variables.

Congratulations for rendering all of the elements in our mockup, and moving onto layout New!

Congratulations for rendering all of the elements in our mockup, and moving onto layout

Hey, if you've been following along with this series from the beginning, you deserve a huge congratulations. We just completed rendering all of the elements on our page into HTML and CSS, and that's huge. Now, we just need to get it all laid out.

How fluid and fixed layouts worked before responsive design became more ubiquitous New! (This one's FREE!)

How fluid and fixed layouts worked before responsive design became more ubiquitous

Before responsive design, there were a couple schools of thought when it came to laying out sites: keep the site the same size regardless of the browser size, or shrink and grow it to fit the browser window. Here we summarize the benefits and downsides to each.

The limitations of maintaining a separate mobile site New! (This one's FREE!)

The limitations of maintaining a separate mobile site

As we mentioned earlier in this series, building and maintaining a separate mobile site to complement a desktop site greatly increases the amount of work you have to do. Here we summarize the problems with this approach.

Variations in how clients will approach a responsive project New! (This one's FREE!)

Variations in how clients will approach a responsive project

With our project, we have a mockup for a desktop-based site and we need to use our front end skill set to translate this to other browser sizes. However, some projects will start with different mockups for different sizes or no mockup at all. Here we discuss the different ways a project might start and why there are these variations.

What "mobile first" means in terms of business strategy New!

What "mobile first" means in terms of business strategy

At some point, you'll run into the term "mobile first." In the next few videos we'll talk about what this means and how it applies to strategy, design and coding the CSS.

What "mobile first" means in terms of design New! (This one's FREE!)

What "mobile first" means in terms of design

When it comes to design, "mobile first" means focusing on the mobile version of a design first, and then scaling up, instead of the other way around. In this video we discuss why this approach makes so much sense.

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.