September 2015

Hello Friends!

It's been a while, and I'm sorry about that. If you're like me, you probably enjoy a break from a steady newsletter stream sometimes, so hopefully you're refreshed and ready to take a minute to catch up. If you want to just skip to the new videos, do a quick scroll down. Otherwise, here's a few select ditties you might be interested in:


BADCamp (Bay Area Drupal Camp) training is on!

4 years ago at BADCamp 2011, we piloted a new training program called "Mentored Training." Since then, dozens of Drupal camps and events from all around the world have used the training model to get lots of people trained in a way that's super fun and really works. This year, we're continuing the BADCamp tradition and doing 2 solid days of training on Thursday Oct. 22 and Friday Oct 23. A team of volunteer Drupal experts will be at the ready to help to answer questions and guide you through tricky spot. Join us, you won't regret it. And did I mention it's FREE?!



So, why "Front End Development?"

I've been working really hard (not an exaggeration) on "Front End Development," and I appreciate your patience. This is going to be a HUGE collection, twice as big as any I've ever released before. It's been quite the undertaking, but the work is starting to pay off. If you're in the market to learn some front end, I'm really excited for you. If you're not, maybe you should be.

If you're a BuildAModule fan (or critic, for that matter), you might have some questions, like:

"Why are you doing a bunch of videos on the front end, isn't this a Drupal training site?", or:

"I'm more of a site builder, I don't really need to know front end stuff, right?", or:

"SASS, Bower, Grunt, Bundler?! That's too fancy for me, I know my HTML and CSS, leave me be!", or:

"Aren't there already a bunch of front-end-y videos out there?", or:

"More Drupal 8! More Drupal 8!"

Great questions (and comment)! Let me tackle the broad question first of "Why should I be interested in this stuff?"

Reason #1: You do Drupal in some way*. Drupal automates and hides a bunch of the choices and messy mash-ups you would have to make if you were building a web site or application from scratch. Most of the time, this speeds us up and makes us more productive. But, at some point nearly everyone has to dig into the HTML or CSS code behind Drupal and figure out how to do something that Drupal doesn't do out of the box. If you don't know your way around both of those, you're stuck. You need someone else to fix the problem, and that's not always an option. If you get a grip on the front end, you will become much more independent and more valuable to your project or team.

Reason B): Every web site or application has a front end, regardless of the back-end. Back-ends vary tremendously, but nearly all front-ends use a common toolbox. Learning the front end gives you a skill set that's portable and opens you up to a ton of job opportunities or flexibility within your own work. Organizations and digital agencies are hiring front end developers like crazy. It's a good time to learn.

Reason iii. The tools required for front-end work have become much more powerful, but also magnitudes more complicated. On your own, it will take a while to piece together the parts that you need, and you'll end up spinning your wheels on ideas or techniques that aren't going to be that important in the long run. I built "Front End Development" to synthesize a vast amount of material into a cohesive, practical whole. It could be one of the best places to lay your front end foundations.

Okay, good enough? You in? Alright! So, now a little bit about the strategy behind releasing this collection now:

1) Completeness. For years now there's been a big gap in what you could learn on BuildAModule when it comes to the front end. That's okay, but I personally know how important it is to be able to work on the front end if you ever want to create your own business site or online app, and since BuildAModule is a way for people to learn the skills to become more and more independent in their work, that gap has bugged me. In my mind, ideally someone should be able to come to BuildAModule, spend some time learning, and walk away with a complete toolbox that will let them jump into whatever web project they want to make. But without front-end** coverage, BuildAModule has had a big gap. Now I think there's a much better foundation to build on with lots of low-level videos to reference, especially as we get into Drupal 8 theming and services.

2) Style. There's a lot of screencasters out there, many of whom cover front-end topics, and I don't claim to be the best. But from the feedback I've gotten over the years, there's a style to the BuildAModule screencasts that seems to work for a lot of people. Part of that has to do with leaving no steps out of complicated processes (of which there are quite a few in "Front End Development"), and I knew that in order to demonstrate how to create a responsive design, how to use icon fonts or deal with typography, that I had to cover it in context. So, the idea behind the series is to build an entire modern, responsive site straight from a mockup, with no steps skipped. The amount of knowledge required to do that was kind of astonishing to me as I worked my way through the planning and recording process, which makes it even more important to show how it all connects.

3) It stands alone (like the cheese). On BuildAModule, most of the video collections are Drupal-specific, but a couple stand on their own like "PHP Programming Basics" and "Change Management and Version Control." These cross-over collections, I hope, allow the Drupal community to build skills that are useful outside of Drupal***, and also help bring non-Drupalers into BuildAModule from time to time. I think that's good for the community, and it makes sense as an overall strategy for BuildAModule as well.


Drupal 8?

Of course! I'm super excited about Drupal 8, and we've been in a chicken-and-egg situation for a while where I need a few things from Drupal 8 before I can start to cover it in a sustainable way. I was able to release "Drupal 8 Developer Prep," which I hope enables more aspiring Drupal developers to give Drupal 8 a go, but I still can't make a site-building collection that reflects what it would really be like to build a site in D8. There's a ton of amazing stuff in there, site-building-wise, and I'm itching (really itching, I can feel it now) to expose some of that stuff on BuildAModule. It's not time yet, but it will be soon.


Are you reading this?

As I take a breath from a non-stop editing workflow to reach out to you, I have to wonder. Are you reading this? Were you actually curious about the origins and purpose behind Front End Development? Do you care about Mentored Trainings in Berkley, California? Are you excited in any way that there are 60 new videos out? If so, take a minute to send me a quick email that says something like "no" or "yes" or "HECK, YES!"

Thanks for being there, folks, and I look forward to putting more of these FED videos out over the coming weeks.


Creating a SASS function to calculate rem units from pixels New!
(This one's FREE!)

Screenshot for Creating a SASS function to calculate rem units from pixels

We already have a function to calculate em units, and it's a pretty simple step to do the same thing with 'rem' units. In this video we adjust our 'px2em' function to crank out rem units instead.

Why sometimes it's simpler to not use a function for calculating relative units New!

Screenshot for Why sometimes it's simpler to not use a function for calculating relative units

Even though we have a function to perform the pixel-to-em and pixel-to-rem conversions, sometimes it makes sense to use an em or rem value on its own. Here we explore why.

Updating our SASS to use relative instead of absolute units New!

Screenshot for Updating our SASS to use relative instead of absolute units

In earlier videos we began converting most of our absolute units over to relative units. In this video we complete the process by working through all of our component partial files and getting them squared away.

Fixing the text color of our headers by changing the base text color New!

Screenshot for Fixing the text color of our headers by changing the base text color

In an earlier video we ended up adjusting a color in our color palate, but didn't check to see where that color was being used. In this video we figure out a solution.

Styling the primary navigation in the footer New!

Screenshot for Styling the primary navigation in the footer

In this video we work through the additional CSS styling needed to get our footer menus squared away, starting with the first row of navigation.

Styling the secondary navigation in the footer New!

Screenshot for Styling the secondary navigation in the footer

Here we add some additional styling to our second row of footer navigation to bring it inline with the mockup.

How to organize shared styles between two similar elements New!

Screenshot for How to organize shared styles between two similar elements

In previous videos, we worked through the process of styling our two rows of footer navigation and copied a number of styles between them. In this video we review our principles for CSS class naming and come up with a solid approach to sharing CSS styles between multiple elements that have a lot in common.

How to add a border between our two footer menus New!

Screenshot for How to add a border between our two footer menus

Here we wrap up our styling of the footer menus by adding a border between the two rows and discussing where the best place is to put border and margin styling when working in the space between two elements.

How to limit the length of a horizontal border to the contents of an element New!
(This one's FREE!)

Screenshot for How to limit the length of a horizontal border to the contents of an element

There are numerous ways to create a horizontal border in CSS, but in this video we walk through the scenario of needing to constrain the width to match a specific HTML element.

How to center an HTML element by setting horizontal margin to "auto" New!

Screenshot for How to center an HTML element by setting horizontal margin to \

It's pretty satisfying to discover how to center an element on an HTML page for the first time. No longer do you need to be dissatisfied with the lopsided nature of a default left-justification. Wield the power of centering, with just a couple simple lines of CSS!

How to resume from this point (part 1, step 22) New!

Screenshot for How to resume from this point (part 1, step 22)

If you want to hop into this video series from here, this video will show you how to get your examples squared away and tell you what software you need to set up to get it done.

How an HTML header tag works and using one for our site header New!

Screenshot for How an HTML header tag works and using one for our site header

In an earlier video we discussed how to use the footer element as we went through the process of constructing our site footer. In this video we discuss the header element, which has many similarities but one very important distinction.

Setting up the HTML and CSS scaffolding for our header New!

Screenshot for Setting up the HTML and CSS scaffolding for our header

Here we put together the basic HTML and CSS structure that we will be building on until we get our heading looking like our mockup.

Dividing our header into two sections with div tags and setting the background color New!

Screenshot for Dividing our header into two sections with div tags and setting the background color

In this video we talk about the best method for splitting our header into two sections and lay down a nice background color for the lower half.

How to use SMACSS "states" to define CSS for specific situations New!
(This one's FREE!)

Screenshot for How to use SMACSS \

Sometimes you will want a certain CSS style to apply only in certain situations. For example, maybe a button will look different when you hover over it, or when it is disabled. Here we talk about the SMACSS convention for creating CSS classes that apply only in certain scenarios, called "states."

How the CSS "display" property works, and how to fix elements overlapping their container New!

Screenshot for How the CSS \

When you're first getting started with CSS, one common gotcha is running into an element that inexplicably overlaps some other element. What the hay? In this video we discuss what's typically causing this and how to resolve it using the CSS property "display."

Refining the CSS for our header navigation New!

Screenshot for Refining the CSS for our header navigation

Here we clean up the styles around our header navigation, bring our padding styles down to a single line and make some minor adjustments to match up with the mockup.

Evaluating using the "border-radius" property to add rounded corners in our project New!
(This one's FREE!)

Screenshot for Evaluating using the \

It's important to evaluate the level of browser support we can expect for newer CSS properties. In previous videos, we used the "caniuse.com" site to check this support and what percentage of our potential audience might not be seeing exactly what we intended. Here we do the same thing with a new CSS property and ultimately decide that the potential downsides are small.

How CSS vendor prefixes work and why we would use them New!
(This one's FREE!)

Screenshot for How CSS vendor prefixes work and why we would use them

Many CSS properties come with a vendor-prefixed version. In this video we discuss why we might want to employ these prefixes and why they exist in the first place.

Overview of automated tools for adding CSS vendor prefixes New!

Screenshot for Overview of automated tools for adding CSS vendor prefixes

Adding vendor prefixes every time you want to use a newer CSS property can be painful and also increases repetition, making possible mistakes more likely. Here we explain that there are solutions that will take the sting out of vendor prefixes, though we'll wait until later videos to actually use them.


Plus 40 more! Just click one of the videos above to view the full list of newly released vids!

* You do, right? Ha, I knew it! I'm not psychic, but you *did* sign up for a Drupal-ish newsletter, so ... you know. Just putting the pieces together.

** Which looks better to you, "front end" or "front-end?" I standardized on the no-dash version but man, I really want to add that dash in sometimes. Thanks for humoring me.

*** Not because Drupal is going away, but mostly because the specific job landscape around individuals changes rapidly and being able to transition into new work that might not involve Drupal is a great risk-reducer.

Greetings!

This week we walk through the initial steps of creating a horizontal navigation. We start out by blowing away the commonly held belief that navigation should be structured as HTML list elements, and then we move on to optimize our CSS with SASS. We wrap up this week demonstrating how to write a function in SASS. Functions? with CSS? Wild!

Enjoy and have an awesome week!


Why to avoid using HTML lists for navigational elements New!
(This one's FREE!)

Screenshot for Why to avoid using HTML lists for navigational elements

In many tutorials covering HTML and CSS, the suggestion of using lists to organize navigation is put forth. In many ways this makes sense, but those who use screen readers would more likely prefer that you use generic container elements like divs and spans. In this video we explain a bit more.

How to use the nav HTML element New!

Screenshot for How to use the nav HTML element

Now that we're converting our first navigation element over to the template, it's a good time to look at what our options are in terms of a container element. Here we do a quick search and turn up the 'nav' element.

How to space links in horizontal navigation New!

Screenshot for How to space links in horizontal navigation

There are few different ways to skin the cat of horizontal navigation spacing. In this video we discuss the various options and why we end up using the strategy we do.

The difference between how horizontal and vertical margin work New!

Screenshot for The difference between how horizontal and vertical margin work

Margin should be margin, right? Well, the rules are a bit different for the top / bottom and right / left. Here we explain the difference.

How to convert a pixel measurement to a relative 'em' unit New!

Screenshot for How to convert a pixel measurement to a relative 'em' unit

In this video we begin the process of converting many of our absolute pixel units over to relative units. Specifically, we look at whether it makes sense to use an 'em' or 'rem' unit for our footer navigation margin and what calculation we can use to get what we need.

How to perform mathematical operations and string concatenation in SASS New!

Screenshot for How to perform mathematical operations and string concatenation in SASS

Much of what you can do with a programming language like JavaScript or PHP you can also do in SASS. In this video we demonstrate how to calculate 'em' units with an operation, and then pull multiple strings together into a single value with a concatenation operator.

The difference between a SASS function and a mixin New!

Screenshot for The difference between a SASS function and a mixin

Here we explore two ways to automate repetitive operations in SASS and why you might use one over the other in different situations.

How to write a function in SASS New!
(This one's FREE!)

Screenshot for How to write a function in SASS

In this video we write a function in SASS to calculate 'em' units based off of a pixel unit value. Once we have this squared away, we'll be able to use the function instead of writing out the calculations by hand.

How to set the default value for a function argument in SASS New!

Screenshot for How to set the default value for a function argument in SASS

A common use case when using functions in any programming language is to supply an optional parameter. Here we demonstrate how to accomplish this in SASS.

Converting absolute values and creating a SASS partial for functions New!

Screenshot for Converting absolute values and creating a SASS partial for functions

Here we're beginning the process of converting the absolute units in our SASS over to relative units. We also create a partial to hold our SASS functions.

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.