Learn Drupal

January 18th, 2016

Hey there!

Today we're releasing 20 new videos in the "Front End Development" collection, this time covering the basics of Responsive Design and adding responsive images. This is some fun and mind-bending stuff if you've never seen it before. If you have, you might find some fun tidbits in there you didn't know.

Enjoy!


The pros and cons of using high resolution images New!

Screenshot for The pros and cons of using high resolution images

In this video we create a high resolution image, demonstrate how browsers interpret those extra pixels, and how we can wrangle the image with CSS to get it to display at the size we originally intended.

How to serve both low and high resolution images with Retina.js New!

Screenshot for How to serve both low and high resolution images with Retina.js

In the last couple of videos we explored the pros and cons of serving low or high resolution images to our visitors, but in this video we discuss a simple way to serve both using a JavaScript library.

How to set up a lightweight web server with Node.js to get around local file browser issues New!

Screenshot for How to set up a lightweight web server with Node.js to get around local file browser issues

So far we've simply been opening up a .html file in the browser in order to run our example. However, with the introduction of Retina.js, we're going to need a server of some kind since our browser is limited in the kinds of local files it has access to. Here we quickly install a Node.js extension that can spin up a lightweight server so we can get Retina.js working.

How to avoid 404 errors when using Retina.js New!

Screenshot for How to avoid 404 errors when using Retina.js

In the previous video we fixed some JavaScript errors, but we're still getting some 404 browser errors due to images that Retina.js is looking for and can't find. No worries, it's simple to tell Retina.js to look for images that actually exist.

What a 404 error is and why we should try to avoid them New!

Screenshot for What a 404 error is and why we should try to avoid them

The downside of using Retina.js to serve high density images to high resolution screens New!

Screenshot for The downside of using Retina.js to serve high density images to high resolution screens

The solution of serving a high-resolution image only to browsers that can support it is fantastic, but there are some downsides. Here we talk about what those are and pave the way for an alternative, future-proof solution that's sure to excite and enthrall!

What "responsive design" means and a brief history New!
(This one's FREE!)

Screenshot for What 'responsive design' means and a brief history

If you started watching this series because you wanted to learn more about "responsive design," it probably seems like it's taken a long time to get to this point. But rest assured that everything you've learned so far will help to serve your understanding and mastery of responsive design. In this video we summarize what responsive design is and why it's better than some of the alternatives front end developers have used in the past.

What responsive design implies for the layout of our site New!

Screenshot for What responsive design implies for the layout of our site

Now that we know what responsive design is, we discuss the implications when it comes to the layout and design of our entire site.

What responsive design implies for our images New!

Screenshot for What responsive design implies for our images

While we'll find that it's relatively simple to support responsiveness for a number of HTML elements, one of our biggest challenges is working with images. It's not that they're impossible to work with, it's just that many of us have become used to the idea that images are a simple tag you can slap into the site and be done. Once we realign our expectations to include the diverse possibilities for our images, we'll be set up to enjoy what the following videos illustrate for a solution.

Why the browser can't serve the right images for the right scenario without our help New!
(This one's FREE!)

Screenshot for Why the browser can't serve the right images for the right scenario without our help

Browsers are smart because they know when to be stupid. If a browser makes too many calls to the server, or waits to load a page until it has all the information it could possibly use from the server, us users of the web would revolt because we've come to expect a faster web. Because of this, there are some things a browser can't know unless we tell them, and we explain how that works for images here.

How to use the "srcset" property in the image tag to help the browser fetch the right image New!

Screenshot for How to use the 'srcset' property in the image tag to help the browser fetch the right image

Even though browsers can't know the resolution and density of images on the server, we can tell them before they go fetch the image by using the "srcset" HTML attribute. Though browser support for this attribute is slim at the time of this recording, in the future all major browsers will support it.

How "media queries" work to pull in different CSS based on conditions in the browser New!
(This one's FREE!)

Screenshot for How 'media queries' work to pull in different CSS based on conditions in the browser

Giving the browser information about the resolution and density of images on the server is just part of the solution for building responsive images. The second factor has to do with telling the browser when different sizes of browsers might trigger a different layout, and thus a different image. The way we explain these scenarios to the browser is through something called a "media query."

How the "sizes" image attribute works to provide breakpoint information to the server New!

Screenshot for How the 'sizes' image attribute works to provide breakpoint information to the server

Now that we understand how media queries work, the "sizes" attribute for images will make a lot more sense. With "sizes," we can tell the browser what size the image will be in different browser situations, something the browser usually can't know until it loads the complete CSS from the server.

What a "breakpoint" means in connection to CSS media queries New!

Screenshot for What a 'breakpoint' means in connection to CSS media queries

From this point on, we'll be using the term "breakpoint" to make reference to media queries where the condition has to to the size of the browser. It's a cooler word, but is really more along the lines of slang in the front end world.

How to use the srcset attribute safely until there's bettter browser support with picturefill New!

Screenshot for How to use the srcset attribute safely until there's bettter browser support with picturefill

The "srcset" and "sizes" attributes are a lifesaver when it comes to coding responsive images, and because the attributes are part of the HTML spec now, eventually all browsers will support it. In the meantime, however, we need a way to improve browser support and the way we do that is through a JavaScript polyfill called "picturefill."

Setting up our logo image to match the mockup New!

Screenshot for Setting up our logo image to match the mockup

We've pretty much already created the code we need for our logo image, but here we cinch it up by checking the size of the image in our mockup and making sure our code matches up.

How to use SVG images for scalable vector graphics on the web New!

Screenshot for How to use SVG images for scalable vector graphics on the web

So far we've used a couple kinds of images: We've used a bitmap PNG file for our logo, and vector font icons for our icons. In this video we introduce another vector option that can give you greater versatility than a font icon, but with better scalability than a bitmap. That is, an SVG or "Scalar Vector Graphic" file.

The difference between bitmap and vector graphics, and saving our slideshow background images New!

Screenshot for The difference between bitmap and vector graphics, and saving our slideshow background images

In this video we talk a bit about the advantages and disadvantages of using bitmap versus vector graphics, and go through the process of creating various versions of our slideshow background image.

Adding the HTML and CSS scaffolding for our slideshow background image New!

Screenshot for Adding the HTML and CSS scaffolding for our slideshow background image

To get started building out the image background for our slideshow, we need a place for it to go. In this video we build up the basic HTML and CSS we need to get a working example.

How to set a background image so that it covers an element but does not repeat New!
(This one's FREE!)

Screenshot for How to set a background image so that it covers an element but does not repeat

In this video we explore several CSS properties at our disposal for adjusting the behavior of background images. While it's all good to know, we eventually discover the killer combination that will give us exactly what we want, which is to align the image to the bottom and have the image stretch to fit our entire element. It sounds like a tall order, but CSS has us covered.

January 4th, 2016

Greetings, friends!

So, I'm not able to make it to DrupalCon Asia this year, but with the funds that I would have spent, I'd like to help some locals help get to the Con. So, I'm giving away 6 DrupalCon Asia tickets in a lottery next week. To enter the lottery, I ask the following:

1. That you live in or near India.

2. That you volunteer in some way at the Con (mostly because it's an awesome way to connect with the community).

3. That you plan on using the ticket yourself.

Just reply to this email with your Drupal.org profile page URL and email address and I'll enter you in.

I will be drawing winners next week on Tuesday, January 12th. If you win, I'll be sure to let you know by the 13th.

I'm also releasing 20 new videos in the "Upgrading to Drupal 8" collection this week. Enjoy!

How to rewite the output of a content (node) page using Views New!
(This one's FREE!)

Screenshot for How to rewite the output of a content (node) page using Views

In Drupal 7, Views can be used to rewrite the output of fields. With it, you can add HTML and text to a field as well as merge additional fields into a single field's display. Additional modules like Display Suite and Panels could also adjust your field output for content pages. In core Drupal 8 the only way to customize a field's output is through Views, so here we demonstrate here how to replace a content page entirely with a View so we can customize fields as needed without going through the theming system.

Comparing comment settings in Drupal 8 and Drupal 7 New!

Screenshot for Comparing comment settings in Drupal 8 and Drupal 7

In Drupal 8, comment settings are no longer part of the content type, but instead are associated with a comment field. This a welcome architectural change, and in this video we compare how to adjust comment settings in both 7 and 8.

How "comment types" work in Drupal 8 New!

Screenshot for How 'comment types' work in Drupal 8

Just like content and blocks, there are now comment "types," which allow you to create different groups of fields for multiple types. Here we walk through the interface for adding and manipulating comment types.

How to hide the comment "subject" field in Drupal 8 New!

Screenshot for How to hide the comment 'subject' field in Drupal 8

A common solution that Drupal 7 site builders seek out is a way to hide the "subject" input in the comment form. Doing this in Drupal 8 is fairly trivial, and in this video we walk through how.

Cleaning up our added comment field and how field "storage settings" works New!

Screenshot for Cleaning up our added comment field and how field 'storage settings' works

Here we delete a comment field and explain what the "storage settings" field operation means.

Comparing comment management in Drupal 8 and Drupal 7 New!

Screenshot for Comparing comment management in Drupal 8 and Drupal 7

Comment management in Drupal 7 and Drupal 8 is fairly similar, but we point out some important differences.

How to view a list of managed files in the Drupal 8 interface New!

Screenshot for How to view a list of managed files in the Drupal 8 interface

In this video we demonstrate Drupal 8's built-in listing of managed files - something that you would need a contributed module for in Drupal 7.

Comparing the block layout interface in Drupal 7 and Drupal 8 New!
(This one's FREE!)

Screenshot for Comparing the block layout interface in Drupal 7 and Drupal 8

There have been some huge improvements to the block interface in Drupal 8. Here we discuss some of the shortcomings in Drupal 7's block management page and how those have been resolved in 8.

Comparing workflows for adding or enabling a block in Drupal 8 and Drupal 7 New!

Screenshot for Comparing workflows for adding or enabling a block in Drupal 8 and Drupal 7

In Drupal 8, blocks work more like block factories. In Drupal 7, each block could only be used once, but in Drupal 8 a block can have multiple instances that are displayed in different locations and under different conditions. In this video we compare the workflow in both 7 and 8.

Comparing adding custom blocks and block types in Drupal 8 and Drupal 7 New!

Screenshot for Comparing adding custom blocks and block types in Drupal 8 and Drupal 7

Custom blocks in Drupal 8 have been vastly improved from Drupal 7. In addition to being able to create a new block and use multiple instances of it throughout the layout, we can also create new "block types" which include fields just like content types or comment types. Here we demonstrate how these work.

Reviewing the Drupal 8 form builder and comparing it with the Drupal 7 contact module New!
(This one's FREE!)

Screenshot for Reviewing the Drupal 8 form builder and comparing it with the Drupal 7 contact module

Drupal 8 ships with a form builder in the guise of the "contact" module. With it we can create field-able forms whose content gets emailed to form-specific email addresses. In many ways it mimics the contributed Webform module's toolset, which is a huge improvement over the Drupal 7 version of the "contact" module. In this video we compare the two.

Comparing the Webform module to the Drupal 8 form builder New!

Screenshot for Comparing the Webform module to the Drupal 8 form builder

Even though the Drupal 8 form builder is very useful, it's still missing some important features that come bundled with Webform. Here we demonstrate these features so you can figure out if you really need Webform or can use the core form builder instead.

Comparing the account settings in Drupal 7 and Drupal 8 New!

Screenshot for Comparing the account settings in Drupal 7 and Drupal 8

The "account settings" page is fairly similar in Drupal 8, with a few notable exceptions. In this video we outline the chances since Drupal 7.

Comparing user fields in Drupal 8 and Drupal 7 New!

Screenshot for Comparing user fields in Drupal 8 and Drupal 7

In Drupal 8, the user picture is now a field and we can make some additional adjustments to the user information page. Here we walk through the changes in both the field and display settings.

Where to find "IP address blocking" in Drupal 8 New!

Screenshot for Where to find 'IP address blocking' in Drupal 8

Spoiler alert: It's now hidden in the disabled-by-default Ban module.

How the admin role works in Drupal 8 and updated navigation for permssions and roles New!

Screenshot for How the admin role works in Drupal 8 and updated navigation for permssions and roles

I swear, some of these titles are longer than the actual videos. Just a couple adjustments with the admin role in Drupal 8, and a tiny shift in the menu hierarchy and boom! The video's over.

Overview of permission changes in Drupal 8 New!

Screenshot for Overview of permission changes in Drupal 8

In this video we go down the entire list of core permissions in Drupal 7 and Drupal 8 and point out when a permission has been added, removed or moved.

Comparing user shortcut management in Drupal 7 and 8 New!

Screenshot for Comparing user shortcut management in Drupal 7 and 8

User shortcuts in Drupal may not get you out of bed in the morning, but if you rely on them for your admin workflow, we're covering the Drupal 8 changes here.

Comparing taxonomy management in Drupal 7 and 8 New!

Screenshot for Comparing taxonomy management in Drupal 7 and 8

Not a ton has changed in regards to the taxonomy management page in Drupal 8, but we walk through the few changes there are.

Reviewing differences in the modules listing page and module disabling process New!
(This one's FREE!)

Screenshot for Reviewing differences in the modules listing page and module disabling process

If you're used to the process of disabling and uninstalling a module in Drupal 7, then Drupal 8's interface might be a little confusing. In 8, the disabling and uninstalling process has been merged into a single action, making it more straightforward, but also meaning that there's now no way to just disable a module without losing the data associated with it. Here we talk about this important change as well as a few differences in the modules listing layout.

December 22nd, 2015

Hey All!

Hope you're having some great holidays. I know some of you are taking the time to do some learning, so here's some new videos to work on.

Thanks for being members / lurkers and I look forward to this next year with you! I have some fun stuff planned for y'all.

Cheers!


How using a "button" HTML input instead of a submit input allows for pseudo-elements New!

Screenshot for How using a 'button' HTML input instead of a submit input allows for pseudo-elements

In previous videos we were able to add font icons to elements using the "before" pseudo-element. In this video we're surprised to find that those are not available for our submit input, and discover an alternative in using the "button" element instead.

Refining the CSS of our search form submit button and text input New!

Screenshot for Refining the CSS of our search form submit button and text input

Here we tie up some loose ends in our search form styling.

How to add a custom icon by creating a new icon font with Fontastic New!
(This one's FREE!)

Screenshot for How to add a custom icon by creating a new icon font with Fontastic

Earlier in this series we introduced you to the Fontastic service and explained why you might want to eventually use it. In this video we succumb to an offended sense of aesthetics and create a custom icon font to use for our magnifying glass icon. Just a little foreshadowing: we'll be using this font for other things later.

Refining the styles on our updated magnifying glass icon submit button New!

Screenshot for Refining the styles on our updated magnifying glass icon submit button

With new icons come new style adjustments. Here we tweak our submit icon styles a bit to get it looking more polished.

Testing our search form and moving the HTML to the right place in the template New!

Screenshot for Testing our search form and moving the HTML to the right place in the template

Here we test out some different form states like filling out the text input and submitting the form. Satisfied, we move the form to the div where it belongs.

How to save a transparent image in Photoshop and why images on the web are tricky New!
(This one's FREE!)

Screenshot for How to save a transparent image in Photoshop and why images on the web are tricky

In this video we grab our logo and save it as a PNG file with a transparent background for some testing. We also spend a few moments alluding to the obstacle course which is using images on the web.

Adding our logo image for testing New!

Screenshot for Adding our logo image for testing

Having created our logo, we do the next logical thing and add it to our template.

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

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

If you're just starting out with this series, this video will help you get set up so you don't have to watch every previous video just to get an environment set up.

How images display differently depending on the pixel resolution of the viewing screen New!

Screenshot for How images display differently depending on the pixel resolution of the viewing screen

Images are images, right? Well, there's more to it than that. Here we talk about one variation, which is that images can look pretty different on different screens.

The pros and cons of using lower resolution images New!

Screenshot for The pros and cons of using lower resolution images

Lower resolutions have their advantages. They're smaller, easier to make and require less CSS. But they come at a cost.

Comparing the workflow for adding and editing fields in Drupal 7 and Drupal 8 New!
(This one's FREE!)

Screenshot for Comparing the workflow for adding and editing fields in Drupal 7 and Drupal 8

Instead of using a form embedded in the "manage fields" page of a content type, in Drupal 8 the "add field" form has been moved to a separate page and the process as been cleaned up quite a bit. In this video we walk through the changes.

How responsive tabs work in Drupal 8 New!

Screenshot for How responsive tabs work in Drupal 8

Something you might notice if you work in the Drupal 8 admin area on a mobile device is the convenient way tabs collapse down to a drop-down menu. Here we give you a gander just in case you do most of your management through the desktop.

Comparing content type settings in Drupal 7 and 8 New!

Screenshot for Comparing content type settings in Drupal 7 and 8

Here we step through the configuration of content type settings in Drupal 7 and 8 and point out the differences.

How the "manage form display" content type settings work in Drupal 8 New!

Screenshot for How the 'manage form display' content type settings work in Drupal 8

In this video we explore how the "manage form display" settings work when editing a content type.

Comparing the "manage display" content type settings in Drupal 8 and 7 New!

Screenshot for Comparing the 'manage display' content type settings in Drupal 8 and 7

Here we compare the different settings in the "manage display" page when configuring a content type when working with Drupal 8 versus Drupal 7. There haven't been a whole lot of changes, so we point out some minor differences that are easy to miss.

How view modes work in Drupal 7 and Drupal 8 New!

Screenshot for How view modes work in Drupal 7 and Drupal 8

View modes enable us to configure our content to display differently in different contexts. Through them we can order fields in unique arrangements and reuse them across our site. While view modes were an integral part of Drupal 7, Drupal 8 introduces an interface for adding and managing view modes - something you could previously only do with contributed modules like Display Suite.

How and why to create a new view mode in Drupal 8 New!

Screenshot for How and why to create a new view mode in Drupal 8

Now that we know how view modes work in Drupal 8, we work through the process of creating one and enabling it.

Reviewing additional minor differences in field display settings in Drupal 8 New!

Screenshot for Reviewing additional minor differences in field display settings in Drupal 8

Early we missed a couple of differences in the "manage display" settings, and here we set that right.

How "form modes" work in Drupal 8 and how to add and edit them New!
(This one's FREE!)

Screenshot for How 'form modes' work in Drupal 8 and how to add and edit them

In Drupal 8, the idea of "form modes" was added, as well as a full interface for adding them. Just like we can use view modes to display fields in different arrangements in different contexts, a "form mode" allows us to do the same thing with the add and edit forms for content and configuration. In this video we walk through how to add a form mode and configure it.

Comparing how to add existing fields to content types in Drupal 7 and Drupal 8 New!

Screenshot for Comparing how to add existing fields to content types in Drupal 7 and Drupal 8

Adding existing fields to a Drupal 8 content types works probably the way you'd expect after learning how new fields are added, but we walk through the workflow just in case.

December 7th, 2015

Greetings Drupal Enthusiasts!

(And greetings also to those that aren't enthusiastic but are good sports, anyway)

This week brings with it another infusion in the the two collections, "Upgrading to Drupal 8" and "Front End Development." In the D8 series you'll enjoy a tour of some of the new content authoring features, and in the FED (Front End Development, for those who - like me - have a hard time keeping up with the acronyms) series we cover how to simultaneously rule all CSS and make your project impossible to manage with one single, special keyword.

Enjoy!




Demonstration of in-place editing of content in Drupal 8 New!

Screenshot for Demonstration of in-place editing of content in Drupal 8

It doesn't take long to show how in-place editing works in Drupal 8, but it is super powerful. Instead of having to navigate to a separate edit screen to update content, you can edit specific fields directly in the context that they appear. Here we do a quick demo of how to toggle quick editing and use it to edit a title.

Overview of default text formats in Drupal 8 and Drupal 7 New!

Screenshot for Overview of default text formats in Drupal 8 and Drupal 7

The text formats in Drupal 7 and Drupal 8 are similarly structured, but with a few differences. In this video we briefly explain those differences.

How to configure the Wysiwyg in Drupal 8 New!

Screenshot for How to configure the Wysiwyg in Drupal 8

As we saw earlier in this series, we can now associate particular Wysiwyg layouts with text formats. Here we look at the interface for modifying the buttons that display in the Wysiwyg and how they connect with the HTML filter.

Comparing text format filters in Drupal 7 and 8 New!

Screenshot for Comparing text format filters in Drupal 7 and 8

Both Drupal 7 and Drupal 8 include text format filters for correcting faulty HTML, converting URLs to links, and swapping out new lines with HTML breaks, but in this video we point out the relatively minor adjustments that were made in Drupal 8.

Exploring the minor differences between the Views module in Drupal 7 and 8 New!

Screenshot for Exploring the minor differences between the Views module in Drupal 7 and 8

Views in Drupal 7 and 8 are nearly identical, with a couple small exceptions. In this view we review the few I was able to find.

How responsive tables work in Views in Drupal 8 New!

Screenshot for How responsive tables work in Views in Drupal 8

One addition to the Drupal 8 edition of the Views module is the ability to display a view differently based on the width of the browser viewport. That is, views can now responsively hide or show content to fit the browser window. Here we demonstrate this new ability.

How to use the configuration management in Drupal 8 to backup and restore configuration New!
(This one's FREE!)

Screenshot for How to use the configuration management in Drupal 8 to backup and restore configuration

In the version of Drupal 8 that we're using for this series it is possible to delete important core configuration. While this will likely be fixed in future versions of Drupal 8, it gives us a chance to explore how configuration management works in Drupal 8. In this video we demonstrate exporting the full site's configuration and then importing a single piece of configuration to restore it.

A simple procedure for storing Drupal 8 configuration changes in version control New!

Screenshot for A simple procedure for storing Drupal 8 configuration changes in version control

One of the biggest advantages of centralized configuration management in Drupal 8 is the ability to get configuration under version control. If you're not familiar with version control, don't worry, but this video will be here for you in the future when you decide to introduce it into your workflow.

Why parts of the content type "manage fields" interface has been moved to "manage form display" New!

Screenshot for Why parts of the content type manage fields interface has been moved to manage form display

There was a lot going on in Drupal 7's content type field management page. Through it you could add existing or new fields, re-order the display of the fields in the add and edit form, and manage the widgets that were used in those forms. In Drupal 8, this single interface has been split out across a few different forms, and in this video we describe why this makes sense and how we can translate our field workflow to Drupal 8.

Overview of new field types in Drupal 8 New!
(This one's FREE!)

Screenshot for Overview of new field types in Drupal 8

There's a whole slew of new fields in Drupal 8, including date, content reference, user reference, email and link. Here we compare the fields in Drupal 7 and 8 and how they've been re-organized in the drop-down interface for adding new fields to a content type.

Summary of what we still need to style in our search form and starting the process New!

Screenshot for Summary of what we still need to style in our search form and starting the process

Our select box is looking good, but there's still a ways to go before we're done with our search form. In this video we summarize the steps we have left and dive in.

How the "vertical-align" CSS property works and aligning our elements to the top New!

Screenshot for How the 'vertical-align' CSS property works and aligning our elements to the top

The sometimes disappointing "vertical-align" CSS property has dashed the hopes of many a front end developer in search of a simple solution, but in our case we'll find that it will work perfectly to bring our inputs in line. The trick for us will be to align to the top instead of the middle.

Adjusting the height of our search form inputs to align them New!

Screenshot for Adjusting the height of our search form inputs to align them

All of our search form elements are now aligned along the top, but the variation in the height of our elements brings to mind junior high class photos. In this video we begin the process of bringing the different elements in line.

Discussing why the selectize.js dropdown icon showed up after we hid it with CSS New!

Screenshot for Discussing why the selectize.js dropdown icon showed up after we hid it with CSS

Ba wha? What's that icon doing there, didn't we get rid of it earlier? Indeed, but something changed as we re-organized our CSS and now it's back.

How to override any CSS with the "!important" keyword and why it's so problematic New!
(This one's FREE!)

Screenshot for How to override any CSS with the '!important' keyword and why it's so problematic

The first time a front end developer uses the "!important" keyword, they will assume that they're job just got a whole lot easier. Unfortunately, the technique typically only deepens and delays underlying issues in your CSS. But, it's an important tool for your toolbox, and it's better to have a responsible party introduce you to the idea so you don't find out about it on some disreputable blog.

Finding a solution other than "!important" to solve our reappearing icon issue New!

Screenshot for Finding a solution other than '!important' to solve our reappearing icon issue

Now that we know the problems that come with using "!important", we take a moment to find an alternative solution to our ghost icon issue.

Fixing an issue where our select is a pixel too high by setting height on a different element New!

Screenshot for Fixing an issue where our select is a pixel too high by setting height on a different element

Aren't we done with this form yet?! Almost, my friend. In this video we see how much different a pixel off can make in a horizontally aligned and bordered form, and how setting height on the wrong element might just be the source of our woes.

How to remove horizontal spaces between elements by setting the font size to zero New!
(This one's FREE!)

Screenshot for How to remove horizontal spaces between elements by setting the font size to zero

In this video we explain the inexplicable spaces that appear between inline elements, and more importantly how to get rid of them with kind of a hacky but effect workaround using font-size.

How to remove horizontal space between elements with the "float" CSS property New!

Screenshot for How to remove horizontal space between elements with the 'float' CSS property

In the last video we removed some strange horizontal spaces with a little trick with font-size, and in this video we demonstrate an alternative using the "float" property. We haven't used "float" yet, but you'll be seeing a lot of it once we start layout out our site.

Removing the horizontal space in our search form and adjusting the borders New!

Screenshot for Removing the horizontal space in our search form and adjusting the borders

Here we remove the horizontal space between our elements and style being unifying their borders.

November 23rd, 2015

Hey folks!

I won't bore you with a extensive exposition this week, but just wanted to give you a heads up that this week we're doing something we've never done before: Releasing new videos in 2 collections at once! Super fun. Also, I wanted to make sure to get a solid batch out for the holidays just in case some of you have some extra time on your hands for learning, so this is a pretty big weekly release.

Enjoy!




Comparing Drupal 7 and Drupal 8's installation process New!
(This one's FREE!)

Screenshot for Comparing Drupal 7 and Drupal 8's installation process

There have been several improvements to Drupal's installation process in 8, including selecting a language as the first step, a responsive design for even mobile installations, more straightforward branding and more. Here we compare Drupal 7 and Drupal 8's installation processes side-by-side, step-by-step.

Making minor adjustments to the interface to more accurately compare Drupal 7 and 8 New!
(This one's FREE!)

Screenshot for Making minor adjustments to the interface to more accurately compare Drupal 7 and 8

Here we make a couple of administrative interface adjustments so we can see that on the surface, Drupal 7 and Drupal 8 look an awful lot alike.

Demonstrating Drupal 8's responsive home page New!
(This one's FREE!)

Screenshot for Demonstrating Drupal 8's responsive home page

In this video we walk through the various breakpoints in Drupal 8's responsive design and see what changes in the interface as the browser window gets smaller.

Comparing Drupal 8's responsive administrative toolbar with Drupal 7 New!
(This one's FREE!)

Screenshot for Comparing Drupal 8's responsive administrative toolbar with Drupal 7

Here we look at the much-improved administrative toolbar in Drupal 8, including how it functions at different browser sizes, how it's behavior has been improved from Drupal 7 and how to get it out of the way on smaller browser window sizes.

Reviewing Drupal 8's changes to Bartik's default color scheme and logo New!
(This one's FREE!)

Screenshot for Reviewing Drupal 8's changes to Bartik's default color scheme and logo

The only real visual change to the default Bartik theme in Drupal 8 is the header gradient color and logo color. Here we explain why these were adjusted.

A review of the Drupal 8 home page blocks and views New!
(This one's FREE!)

Screenshot for A review of the Drupal 8 home page blocks and views

In Drupal 8, nearly everything you see is a block, including the header branding and the primary and secondary menus! This means that we can do a lot more to adjust the layout of a site without needing to create a custom theme and learning how to work with template. So cool.

Reviewing IE support changes and CSS and JavaScript aggregation settings in Drupal 8 New!
(This one's FREE!)

Screenshot for Reviewing IE support changes and CSS and JavaScript aggregation settings in Drupal 8

In Drupal 8, support for Internet Explorer (IE) 6 and 7 have been discontinued, and there is only limited support for IE 8. Also, JS and CSS aggregation is now on by default.

Comparing theme settings in Drupal 7 and Drupal 8 New!
(This one's FREE!)

Screenshot for Comparing theme settings in Drupal 7 and Drupal 8

In this video we compare the global theme and Bartik theme settings between Drupal 7 and 8. There's only a few differences, but they can throw you for a loop if you're not familiar with them.

Comparing Drupal 7 and Drupal 8's included themes New!
(This one's FREE!)

Screenshot for Comparing Drupal 7 and Drupal 8's included themes

Drupal 8's base theme structure is quite a bit different than Drupal 7's. Drupal 8 provides two base themes - Classy and Stable - both of which are intended to be extended by additional themes. Bartik is now a sub-theme of Classy, and Stable is basically a copy of Drupal core's base templates and CSS that won't change in future updates to Drupal 8. If that's confusing at all, we walk you through what this means and why the new structure is so useful for front end developers.

Reviewing changes to the "Seven" theme in Drupal 8 and why the overlay was removed New!
(This one's FREE!)

Screenshot for Reviewing changes to the \

The "Seven" theme is Drupal's administration theme, and there have been some major improvements to it in Drupal 8. In this video we explore the updates as well as why the overlay mechanic is no longer employed in 8.

How SASS "placeholders" can be useful for sharing CSS between elements New!

Screenshot for How SASS \

In this video we demonstrate how to use a SASS "placeholder" to pull CSS into multiple elements in an efficient way that doesn't leave any unused styles behind. You'll find placeholders incredibly useful as you progress as a front end developer.

Adding another text input for an email address New!

Screenshot for Adding another text input for an email address

Here we add another text element to match our HTML form to our mockup.

Making the margin between our form elements consistent New!

Screenshot for Making the margin between our form elements consistent

As we've added inputs to our form, we've gotten the styles of the individual elements to look pretty good, but the spacing between them has been atrocious. In this video we wrangle our elements to give them a consistent spacing and heave a heavy sigh of relief.

Options for sharing common styles between our selectize input and our other inputs New!

Screenshot for Options for sharing common styles between our selectize input and our other inputs

We've already use a SASS placeholder to share styles between the different elements in our form, but the selectize.js component throws us for a bit of a loop. The same styles that apply to each of the other inputs would get split between two different elements in the selectize.js version. In this video we discuss ways that we can approach the process of still sharing our styles between all the inputs.

Creating a naming convention for placeholder SASS rules New!

Screenshot for Creating a naming convention for placeholder SASS rules

In the previous video we added another placeholder class, and whenever you have two of something, it's time to start thinking about standards. Here we consider whether naming our placeholder classes should be any different than other classes, and come up with a convention we can use from here on out.

How a radio button input is structured and why not to use the "id" attribute for styling New!

Screenshot for How a radio button input is structured and why not to use the \

In this video we review the complete structure of a radio button and how to connect multiple radios to each other. We also take a few seconds o explain why the "id" attribute is problematic for targeting with CSS.

How to set up HTML scaffolding for a radio button group New!

Screenshot for How to set up HTML scaffolding for a radio button group

Now that we know how a radio button group is structured, we're all set up to build one! Here we do that, building some scaffolding for the radio buttons in our contact form.

A quick overview of how we will approach styling our radio buttons New!

Screenshot for A quick overview of how we will approach styling our radio buttons

Our radio buttons are functional, but there's still a long way to go before they look anything like our mockup. In this video we explain the basic strategy we'll be using to style them before we dive in.

How to customize a radio group, part 1 - adding a font icon to replace the radio New!

Screenshot for How to customize a radio group, part 1 - adding a font icon to replace the radio

Here we begin the process of stylizing our radio buttons by adding a font icon to the radio label. This icon will be the one that becomes visible whenever the radio button is clicked. How will we ensure that the icon is only displayed when the radio button is checked? Watch on for the solution!

How to use the attribute, checked and adjacent sibling CSS selectors to style a checked radio label New!

Screenshot for How to use the attribute, checked and adjacent sibling CSS selectors to style a checked radio label

So far we've used some pretty basic selectors, but to be able to select a label element that is next to a checked radio input, we need to pull out all the stops. In this video we demonstrate how to use three different kinds of selectors - the attribute selector, the "checked" modifier, and the adjacent sibling selector - in order to get what we need. It may sound complicated, but it's also pretty fun to see the power of the right selector.

November 17th, 2015

Upgrading to Drupal 8 Video Series Cover

I'm super excited to release the first videos in a new series aimed at making the transition to Drupal 8 a rapid, enjoyable experience. In this series, we will cover:

  • A walkthrough through nearly every interface change between Drupal 7 and Drupal 8, super useful for site builders and administrators
  • How to migrate data
  • How to upgrade a theme
  • How to update custom modules

In these first videos, I'll introduce you to the series and then give a whirlwind tour of the major improvements that come with Drupal 8.

Start watching "Upgrading to Drupal 8"



A special offer for Drupal 8 Release Parties and Meetups

If your community is organizing a Drupal 8 Release Party or you plan on discussing Drupal 8 at your next meetup, I'd like to offer some FREE month-long memberships to raffle away to attendees. Just respond to this email with the 1) location of the meetup and 2) how many people you plan on attending.

At the party, consider playing the Whirlwind tour of Drupal 8's user experience improvements video. It's only 6 minutes long, it's fun and it covers many of the major user-facing improvements to Drupal 8.

Enjoy the upcoming Drupal 8 release. It's been a long time coming, and it's genuinely awesome.

 

November 2nd, 2015

Greetings, Friends!

This week we're releasing 20 videos, many of which tackle the troublesome task of styling select inputs. In some browsers, select input can look almost tolerable, but across browsers there are a ton of inconsistancies and they're just not easy to fix with simple CSS.

In these videos we start with vanilla CSS to tackle the problem, and then eventually dive into some JavaScript-based options that give us a more consistent interface and more options. Along the way we cover other interesting topics, like using pure CSS to create a an arrow, why to not use aggregated and minified JavaScript when developing yout template and more.

Enjoy!

How to add a name attribute to form inputs to identify form data New!

Screenshot for How to add a name attribute to form inputs to identify form data

In our previous videos we added a couple of inputs to our form, but neglected the one property required for our inputs to pass on a value when the form is submitted. Here we fix that.

How to style a textarea input with CSS New!

Screenshot for How to style a textarea input with CSS

The default textarea HTML element leaves a lot to be desired aesthetically. In this video we begin the process of bringing our actual textarea in line with the imagined textarea from our mockup.

How to use the "placeholder" attribute to add instructions inside a form element New!
(This one's FREE!)

Screenshot for How to use the \

Our textarea is looking pretty good, but we need a way to add default instructional text inside the element that goes away as soon as the user starts to enter their own data. Here we accomplish that goal using the "placeholder" CSS property.

How to create the HTML structure for a select input New!

Screenshot for How to create the HTML structure for a select input

Having knocked out our textarea input, it's time to move on. In this video we look at how a select input is structured and build out some basic select box scaffolding in our template.

How to style a select input and address padding issues with height and the "text-indent" property New!

Screenshot for How to style a select input and address padding issues with height and the \

Now that our HTML structure is in place, it's time to embark on the finicky task of getting our select input looking the way we want it to. Here we run into a problem with our select box not respecting padding, and come up with some workarounds.

How we'll approach changing the text color and icon in our select box New!

Screenshot for How we'll approach changing the text color and icon in our select box

While we're not going to change the icon in our select box just yet, we do address the difference between the default icon and the one in our mockup, as well as work through some experiments in changing the text color to match as well.

Overview of 4 options for styling select inputs consistently across all browsers New!

Screenshot for Overview of 4 options for styling select inputs consistently across all browsers

In our previous videos we did what we could to style our select input with straight-up CSS. But we'll find as we take a tour of browsers across Windows and Mac that our CSS does not render the same way in each one. So, we discuss some other options including forgetting about styling select boxes altogether, using alternative inputs like radio buttons, or using a third party library to get the job done.

Overview of 3rd party libraries for replacing select box inputs with more easily style elements New!

Screenshot for Overview of 3rd party libraries for replacing select box inputs with more easily style elements

To style our select box we've decided that it makes sense to use a third party library. In this video we mention a few options and where you can find out more information about each one.

How to download selectize.js with Bower and set up an example New!

Screenshot for How to download selectize.js with Bower and set up an example

After deciding on using the "selectize.js" library, we use the Bower package manager to get it downloaded and grab an example from the selectize.js documentation to get us started.

Why we're not using aggregated and minified versions of JavaScript and CSS New!
(This one's FREE!)

Screenshot for Why we're not using aggregated and minified versions of JavaScript and CSS

The selectize.js library comes with a few different versions of the library, including a version that bundles most of the dependencies into one file, and another that minifies it down into a much smaller package. Even though each of these has their advantages, we're going to opt for using separate, un-minified files, and in this video we explain why.

How to find and include dependencies for a 3rd party JavaScript library New!

Screenshot for How to find and include dependencies for a 3rd party JavaScript library

When we download a JavaScript library with Bower, it will typically also download any dependancies at the same time. This is great, but sometimes it still takes a little detective work to figure out just what files we're supposed to include. Here we dive into the dependencies and grab what we need to get our example working.

How to check for JavaScript errors in Chrome New!
(This one's FREE!)

Screenshot for How to check for JavaScript errors in Chrome

The first time we run our selectize.js example, it doesn't work. When we're dealing with JavaScript the browser console can usually give us some good ideas about what's going wrong. In this video we demonstrate how Chrome alerts us to errors and how we can find out more about them.

How to style a selectize.js input New!

Screenshot for How to style a selectize.js input

After we verify that our selectize.js input looks pretty consistent across a number of different browsers, we dive into the process of getting it to look like the input we have in our mockup.

Reviewing our selectize.js input in various browsers and operating systems New!

Screenshot for Reviewing our selectize.js input in various browsers and operating systems

As we take a tour of various browsers to see how our selectize.js input is holding up, we find that we're good to go except for a little snag in Internet Explorer 9.

What a JavaScript polyfill is and why we might want to use one New!
(This one's FREE!)

Screenshot for What a JavaScript polyfill is and why we might want to use one

In order to tackle our next issue, we'll need to use JavaScript to simulate what more modern browsers are doing with vanilla CSS. Soon we'll be using a JavaScript polyfill to solve a CSS support issue, so we take a minute to explain what a polyfill actually is.

Finding and installing a polyfill to add placeholders for Internet Explorer 9 New!

Screenshot for Finding and installing a polyfill to add placeholders for Internet Explorer 9

Whenever we find the support of browsers lacking for CSS or HTML, we can often do a Google search for a description of our issue plus the word "polyfill" to turn up some answers. In this video we find a solution to our placeholder issue in IE9.

How to create an arrow with pure CSS using transparent borders New!

Screenshot for How to create an arrow with pure CSS using transparent borders

As we evaluate how extensively we want to modify the default CSS of selectize.js, we dig a little deeper to see how it manages to create a nice looking triangle from pure CSS. You may find this technique handy in the future.

Refining the style of the text in our select input New!

Screenshot for Refining the style of the text in our select input

Our select input is looking good, but there's a couple tweaks we need to get it even closer to the mockup. In this video we get that squared away.

How to style a text input with CSS New!

Screenshot for How to style a text input with CSS

After tackling textareas, select inputs and submit buttons, styling a text input is going to be a breeze. Here we get our text input CSS squared away.

Considering our options for sharing styles between different form inputs New!

Screenshot for Considering our options for sharing styles between different form inputs

Now that we have a variety of inputs in our forms, it's clear that there are some common styles between them all, some sharing more than others. In this video we muse on the relationships between the different styles and what our options are.

October 19th, 2015

Happy Tuesday!

Last week I said thank you to a couple people who helped inspire me and answered a ton of Front End questions. This week I wanted to recognize a couple more of those people:

Micah Godbolt, thank you!


Micah, a multi-talented developer at Phase2, spent a solid chunk of time answering a slew of naive front end questions, and was patient and super enthusiastic throughout. Micah introduced me to the idea of component-based and Atomic design. That was a tough nut for me to crack, and his insights were extremely helpful. Micah is a SASS enthusiast (among other things) and runs a really nice video podcast called SassBites. Definitely check it out if you're wanting to dive deeper into to front end.


Eric Casequin, thank you!


Eric, senior front-end engineer at Y3TI, interviewed with me and helped give  insight into what it's like to be a front end dev in the real world, and how what you do is often highly impacted by the kind of client and budget you have to work with. Front end can be quite the science, and I really appreciated the dose of reality that Eric brought to the table. Eric is also one of the nicest guys you'll ever meet.





Reorganizing the styles for our social icon to apply to all social icons New!

Screenshot for Reorganizing the styles for our social icon to apply to all social icons

Having gotten the styles set for a single social icon, we can distill the styles that will be common across all the icons. Here we do just that.

Creating the HTML and CSS for our other social icons New!

Screenshot for Creating the HTML and CSS for our other social icons

In this video we continue building the HTML and CSS of the circular social icons in our footer.

How to adjust our CSS to allow for easily re-sizable circle icons New!
(This one's FREE!)

Screenshot for How to adjust our CSS to allow for easily re-sizable circle icons

The CSS for our social icons is working great, but there's a couple things we can do to make them even more robust and flexible. Here we look at establishing a relationship between the hight of the element and the font size so we can adjust a single value and create circle icons of any size.

How to add semantics to an icon with a title attribute or hidden element New!

Screenshot for How to add semantics to an icon with a title attribute or hidden element

One thing that our social icons lack so far is meaning. In this video we go over a couple different ways to give some meaning to our icons for screen readers and search engines.

The pros and cons of opening links in a new window, and how to do it New!
(This one's FREE!)

Screenshot for The pros and cons of opening links in a new window, and how to do it

Most of the time, a single browser window is enough to keep our users engaged and on track. However, once we start dealing with external sites it can be helpful to open up new windows. Here we look at how to do that.

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

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

If you want to hop into this video series from here, this video will show you how to get your examples squared away.

A very brief overview of the structure of an HTML form New!

Screenshot for A very brief overview of the structure of an HTML form

In this video we explore the most elemental parts of a form and build some simple form scaffolding for our template.

How to create HTML and CSS form scaffolding and a submit button in HTML New!

Screenshot for How to create HTML and CSS form scaffolding and a submit button in HTML

Here we create our first ever form input, and the only element that can genuinely stand alone in an otherwise empty form - the submit button.

How to style our submit button to match our other buttons New!

Screenshot for How to style our submit button to match our other buttons

Judging from our mockup, there's a whole lot that our submit button has in common with the other buttons. In this video we consider our options for how to carry these styles over between the two different kinds of HTML elements.

How to add a multi-line text input to a form with the "textarea" element New!

Screenshot for How to add a multi-line text input to a form with the \

If you've never built an HTML form before, it may not be intuitive that you need an element that's not an "input" to generate a multiple-lined text input. In this video we use the "textarea" element for the first time to get that effect.

October 13th, 2015

Greetings, fellow learners!

This week and next I want to say thank you to a few people who took time out of their busy schedules to interview with me and answer a virtually endless stream of questions about the front end world. Thank you so much, folks!


Eugen Taracila, thank you!

A big thank you to Eugen, senior front end developer and team lead at FFW (and intimidating ping pong opponent), for answering numerous questions and walking me through the process he goes through to evaluate new front developers at FFW. The test he uses was a big inspiration in helping me figure out what techniques were important, and how to bundle a fairly complete learning experience into a single mockup. He also showed me how to use the sources tab in Chrome to edit SASS directly in the browser, which blew my mind.



John Ferris, thank you!

John, lead front end developer at Aten Design Group (one of my favorite digital agencies of all time), has been a long-time friend in the Drupal community, and he's always way ahead of me when it comes to front end tools and techniques. I've learned a ton from talking to him over the years, and appreciate the time he took to chat with me about breakpoints, SMACSS (and introducing me to SMACSS in the first place), how to break up CSS in a meaningful way and how Drupal fits into the modern front end world. John has given some of my favorite Drupal presentations, including Layout Design Patterns.





How to use FontSquirell to browse free fonts and generate web font packages New!

Screenshot for How to use FontSquirell to browse free fonts and generate web font packages

Even though we've been focusing on using supplemental fonts to generate icons, the same CSS structure can also be used to use different fonts for text. There are two popular services for generating these fonts, and in this video we talk about the first.

How to use Google Fonts to browse free fonts and generate hosted fonts New!

Screenshot for How to use Google Fonts to browse free fonts and generate hosted fonts

Both FontSquirell and Google Fonts allow you to use freely available fonts on your site, but each has a different approach to including the font on your site. With FontSquirell, you'll download the font and install it on your site. Google Fonts, on the other hand, creates a hosted package for you to use. There are some benefits and disadvantages to using this approach, both of which we discuss here.

Creating the HTML and CSS for our header account link with an icon New!

Screenshot for Creating the HTML and CSS for our header account link with an icon

In this video we build out the user-style icon in our header along with the "account" link.

How to inspect pseudo-elements in Chrome and use zoom to compare relative sizes New!

Screenshot for How to inspect pseudo-elements in Chrome and use zoom to compare relative sizes

Here we use Chrome's inspector to take a look at the content of our "before" pseudo-element, and look at one technique for comparing the sizes of our actual elements with those in our mockup.

Discussing how we might use font icons for our slider navigation and contact form radio buttons New!

Screenshot for Discussing how we might use font icons for our slider navigation and contact form radio buttons

Even though we're going to skip it for now, we explain that there's a few places in our mockup that might be ideal candidates for an icon font.

Adding the phone icon to our footer phone number New!

Screenshot for Adding the phone icon to our footer phone number

We already added a phone icon to our header phone number button, but here we get to go through all the steps of adding an icon to an element in rapid succession.

Creating the HTML and CSS for a Facebook social icon in our footer New!

Screenshot for Creating the HTML and CSS for a Facebook social icon in our footer

We're rapidly become experts at creating circular icons, but in the next videos we refine our approach as we build out some circular social icons in the footer.

How to use SASS variables to establish a relationship between different numbers in CSS rules New!
(This one's FREE!)

Screenshot for How to use SASS variables to establish a relationship between different numbers in CSS rules

Often a CSS rule contains a number of values that are all related to one another. In our case, we had width and padding that matched the overall height. For related values, it makes sense to make the relationships clear using SASS variables. In this video we cinch op our SASS with some variables.

How to prevent CSS from adding padding and border to height and width with "box-sizing" New!
(This one's FREE!)

Screenshot for How to prevent CSS from adding padding and border to height and width with \

Most web developers eventually run into issues keeping the relationship between height, width, padding, border and margin straight. That's because it's unintuitive and a pain. However, CSS gives us the safety net of changing the box model a bit using the "box-sizing" property. If you've been burned by unexpected widths and heights, then this will make you so, so happy.

How to use line height to center text vertically New!

Screenshot for How to use line height to center text vertically

There are a number of ways to center an HTML element vertically, but we can use one of the simplest ways as long as our text doesn't spill over into multiple lines. In this video we use the "line height" property to get our social icons aligned right.

September 29th, 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.
September 8th, 2015

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.

August 17th, 2015

Greetings!

This week we're releasing a new batch of videos in the "Front End Development" collection that tackle some of the nuances of SASS and CSS. For example, if you have two elements on a page with the same background color, should they share a class name? Or, what happens if you set a SASS variable in one selector and then use it in a different selector? If you're working towards becoming a front end expert, these are things you need to know.

Enjoy!


How to troubleshoot SASS nesting and prefixing conflicts New!

Screenshot for How to troubleshoot SASS nesting and prefixing conflicts

It's been a while since we've reviewed our template. In this video, we go back to the template and find a little problem with a header that can be traced to an inaccurate assumption how how we can structure our SASS.

Review of the typographic elements we have templated New!

Screenshot for Review of the typographic elements we have templated

Here we look through our mockup for typographical elements we've coded and identify a couple we still have left to tackle.

How to use a footer HTML tag and add a copyright symbol New!

Screenshot for How to use a footer HTML tag and add a copyright symbol

In this video we start coding the site-wide footer for our page. While we could use a div or section HTML tag, we do a bit of quick research to see if there's maybe a different tag that might be better suited to the task. We also explore how to incorporate HTML entities like a copyright or trademark symbol in our HTML code.

Adding SASS scaffolding for the footer New!

Screenshot for Adding SASS scaffolding for the footer

Once we have the HTML code for our footer section, it's time to give it some style. Before we can do that, we have to figure out where our styles go and what selectors to use. Here we do just that.

Setting a default text color for the footer New!

Screenshot for Setting a default text color for the footer

When there are multiple colors competing for dominance in a component, it's tough to figure out what kinds of defaults you should user. In this video we evaluate what might be a good default color for the footer and talk through the process of capturing the hexadecimal value of the color.

Why to avoid creating classes for common CSS property values between elements New!

Screenshot for Why to avoid creating classes for common CSS property values between elements

With CSS, there's a huge amount of freedom when it comes to organizing how properties apply to selectors. One pattern you'll begin to recognize is when multiple elements have the same variation of style. In those cases, does it make more sense to create a unique class name and associate styles with it, or to apply the style individually to the elements with those properties? In this video we explore the options.

Troubleshooting editing SASS partial styles with the browser inspector New!

Screenshot for Troubleshooting editing SASS partial styles with the browser inspector

Here we use the browser inspector to alter some of our CSS code, but find that when we do, something unexpected happens.

How to adjust spacing between paragraphs in CSS New!
(This one's FREE!)

Screenshot for How to adjust spacing between paragraphs in CSS

In this video we cover a staple of CSS problem-solving: How to change the amount of space between paragraphs.

How variable scope works in SASS New!
(This one's FREE!)

Screenshot for How variable scope works in SASS

If you've worked with a programming language before, the idea of variable scope will be familiar to you. If not, then this video will throughly explain the idea. Even if you are familiar with scope, this video might point out some differences between how SASS interprets scope and how you might be used to it working in other languages.

How to use HTML comments and preparing to code the footer menu New!

Screenshot for How to use HTML comments and preparing to code the footer menu

Here we comment out some of our HTML code to give us some visual room to begin building our footer menu.

August 4th, 2015

Greetings!

One of the things that makes working with SASS a challenge is tying the CSS the browser uses with the SASS that we write. Instead of rummaging around your code for clues, you can instead set up something called a 'source map,' and this will allow you to jump directly to the SASS code responsible for the CSS you're viewing in a browser inspector. Super cool!

So we start out this week looking at how source maps work, and then continue on to talk about why there are so many individual pieces of software that go into front end development, and how they connect to one another. This was one of my favorite videos to make and I've made it free as a way for front end developers to explain to the non-initiated why the added complexity of all this software is justified and simplifies things down the road.

Finally, we talk about Bundler and how to use SASS extensions to further increase the power that SASS has out of the box. Good stuff!

Enjoy!


Reassurance that splitting our single SASS files into multiple partials is not over-engineering New!

Screenshot for Reassurance that splitting our single SASS files into multiple partials is not over-engineering

Our project, thus far, is not terribly complicated. It might seem that splitting out our SASS into multiple files is overkill, and if that's what you're thinking, you would be right if our project wasn't destined to become more complicated as we move forward. Most modern web projects, especially at the enterprise level, requires a structure that scales well for multiple front-end contributors and rapid CSS pre-processing, and using partials can help make that happen.

How CSS source maps work and how they allow us to inspect the SASS source of CSS properties New!
(This one's FREE!)

Screenshot for How CSS source maps work and how they allow us to inspect the SASS source of CSS properties

I'm so excited you've made it to the video where I get to show you how you can use the browser inspector to find the exact location in your SASS where a CSS rule is created. This is made possible through the use of CSS source maps, and it's a beautiful, beautiful thing.

How to use CSS source maps in Firefox New!
(This one's FREE!)

Screenshot for How to use CSS source maps in Firefox

While we use Chrome throughout this series, Firefox also supports source maps, so we do a quick demonstration of how to use them here.

How to navigate to SASS variable definitions in the browser New!

Screenshot for How to navigate to SASS variable definitions in the browser

Not only can you delve into your SASS directly in the browser, but you can track down where variables are defined. In this video we show you how.

Why it makes sense to use the SASS Globbing extension for automatically including partials New!

Screenshot for Why it makes sense to use the SASS Globbing extension for automatically including partials

Now that we've separated out our SASS into files that correspond to components, we now have several manual steps we have to take to add a new component in. Luckily, we can automate one part of this with the SASS glowing extension, and in this video we talk about how it works.

How to install a SASS extension and automatically include partials from a folder New!

Screenshot for How to install a SASS extension and automatically include partials from a folder

One of the benefits of SASS is the rich library of extensions developed by the SASS community. Here we walk through installing the 'SASS globbing' extension to automatically pull in all partials in a specific folder.

The benefits and costs of using the SASS Globbing extension New!

Screenshot for The benefits and costs of using the SASS Globbing extension

SASS Globbing is awesome, but it's important to understand how it works so you don't get bit by it later on. In this video we summarize why it's so useful but also in what situations you might want to steer clear and just manually add your partials.

The pros and cons of using local software like SASS and Bower for front end development New!

Screenshot for The pros and cons of using local software like SASS and Bower for front end development

Throughout this series we've introduced a number of pieces of software, including Ruby, Bower, SASS and SASS extensions. Hopefully you're sold on the usefulness of these tools, but you also might get a sinking feeling when you think about how you're going to help a fellow developer set up their local environment. Here we talk about the potential issues of using local software for front-end development, in a large part so we can address how to resolve them in later videos.

Map of local software needed for front end development and how the parts relate to one another New!
(This one's FREE!)

Screenshot for Map of local software needed for front end development and how the parts releate to one another

It may seem like there's an endless chain of software components that we need in order to accomplish what used to be simple HTML and CSS. In this video we explain that there's a limit to the software components that we'll need, and also use a handy visualization to see how the different components connect and support each other.

Why there are so many individual pieces of front end software New!
(This one's FREE!)

Screenshot for Why there are so many individual pieces of front end software

Wouldn't it be nice if there was just one piece of software you could turn on to get all the tools you need for front end development? It would, but there's a good reason that isn't happening right now. Here we discuss briefly why.

How to learn more about SASS with the SASS documentation New!

Screenshot for How to learn more about SASS with the SASS documentation

So far we've talked about how to use variables, partials and includes in SASS, but not about how we learned how to do that. Here we step back for a minute to go to the source and show you where you can learn more about SASS conventions and syntax.

Why we're choosing not to use Compass just yet New!

Screenshot for Why we're choosing not to use Compass just yet

When many front end developers learn how to use SASS, they use it in tandem with a tool called Compass. However, unless your project really needs Compass, there are some compelling reasons to use straight-up SASS. In this video we talk about what those reasons are.

How to install Bundler New!

Screenshot for How to install Bundler

Bundler allows you to install specific versions of gems (like SASS and SASS Globbing) for each project. Here we take the first step and install Bundler.

How to generate a Gemfile with Bundler New!

Screenshot for How to generate a Gemfile with Bundler

Once we have bundler installed, we need to create a Gemfile - which is just a file without an extension called 'Gemfile' - and in this video we use Bundler to do just that.

How to add dependencies to a Bundler Gemfile New!

Screenshot for How to add dependencies to a Bundler Gemfile

Just like we did with Bower, we're going to list out the dependencies our project has and run a command line command to install them. With Bower, it was packages bundled through Packagist. With Bundler, it will be with gems supplied by any online source that makes gems available.

How to use project-specific versions of gems with 'bundle exec' New!

Screenshot for How to use project-specific versions of gems with 'bundle exec'

Bundler doesn't affect the gems installed in your local system, so to use them, you have to prefix your commands with 'bundle exec'. Sounds simple, but we walk through it in this video as well as demonstrating how to test if 'bundle exec' is actually working.

How the Bundler Gemfile.lock file works New!

Screenshot for How the Bundler Gemfile.lock file works

While we can specify version ranges in our Gemfile, our Gemfile.lock file keeps a record of the specific versions being used in a project. Here we talk through the purpose of the lock file and how to work with it.

How to use 'bundle exec' with 'sass watch' and 'sass globbing' New!

Screenshot for How to use 'bundle exec' with 'sass watch' and 'sass globbing'

We know now that the 'bundle exec' command is how to route our commands through bundler, and in this video we demonstrate how that works.

How to specify a version range in Bundler that updates to the latest patch version New!

Screenshot for How to specify a version range in Bundler that updates to the latest patch version

Earlier in this series we used the Bower package manager to manage which versions of third party libraries we were going to use. In Bundler we can do the same thing, but the syntax is a little different. In this video we demonstrate how to set up a version range with a tilde and greater-than symbol.

Setting up a README.md file and how we're automating documentation New!

Screenshot for Setting up a README.md file and how we're automating documentation

Because we're using package managers for our third party libraries, we have a lot less documentation do manually compose in order to ensure that our future selves and fellow teammates can work on the project. However, when we do have something that's not clear from our project's structure, we should add some notes. Here we create a README file to hold these.

July 20th, 2015

Greetings!

First of all, thank you for everyone who stepped up to donate to the Drupal 8 Accelerate fund over the last couple weeks, it was a great turnout and the winner of the 12-month membership has been selected. But you're all winners, because your contributions will help bring about the release of Drupal 8, something we're probably all pretty excited to see.

This week we're releasing 20 new videos that continue our dive into using SASS (Syntactically Awesome Style Sheets) as a way to make our CSS more powerful and sane. This time, we work through the process of converting our SASS into CSS, talk about how to use variables (one of the first 'ah-ha' moments many of us have with CSS preprocessors) and why it makes sense to split out SASS into multiple files.

We're just getting warmed up in the SASS department here, so enjoy and stay tuned for more!


How to install Ruby and SASS on Windows and upgrade RubyGems (the 'gem' tool) to fix SSL issues New!

Screenshot for How to install Ruby and SASS on Windows and upgrade RubyGems (the 'gem' tool) to fix SSL issues

Installing SASS on Windows requires also installing Ruby, so in this video we walk through the steps involved and also discuss how to resolve issues with our installation. You will hopefully not run into the same error, but we outline the steps for resolving command line issues in general, just in case.

What a CSS preprocessor does and why we're using the .scss syntax instead of .sass New!
(This one's FREE!)

Screenshot for What a CSS preprocessor does and why we're using the .scss syntax instead of .sass

Now that we have SASS installed, we take another angle on what a CSS preprocessor actually does, and explain why we're choosing the less laconic but more CSS-like SCSS syntax.

How to convert a .scss file to a .css file New!

Screenshot for How to convert a .scss file to a .css file

Here's where the magic starts. In this video we convert our first .scss file over to a .css file that the browser can understand.

How and why to use variables in SASS New!
(This one's FREE!)

Screenshot for How and why to use variables in SASS

One of the most valuable uses of SASS is to reduce repetition in your code. In this video we discuss one of the most powerful ways of reducing repetition while adding meaning to your code.

How to trigger CSS compiling when a file is changed with the SASS 'watch' command New!

Screenshot for How to trigger CSS compiling when a file is changed with the SASS 'watch' command

Up until this point, we've been compiling our SASS manually on the command line, but it would be a pain to have to re-compile our code this way throughout the entire templating process. Luckily, there's a better way! In this video we demonstrate how SASS can look for changes to files and re-compile CSS automatically.

Why to create a common color palette and converting our SASS to use one New!

Screenshot for Why to create a common color palette and converting our SASS to use one

So far we've used a color picker to figure out what colors are being used for background, text and borders. However, if we had a consistent color palette using SASS variables, we would be able to easily create visual consistency across our template and have easy-to-remember variables to boot! Here, we walk through the process of converting our code to use a color palette instead of hodge-podging it.

How to add comments in CSS and SASS New!

Screenshot for How to add comments in CSS and SASS

With any code, adding comments can be a lifesaver when it comes to understanding what's going on. In this video we demonstrate how to add comments in CSS and an additional syntax that SASS gives us to work with.

How to use TODOs to mark code to change later without interrupting your workflow New!

Screenshot for How to use TODOs to mark code to change later without interrupting your workflow

Sometimes you'll run across issues in your code that you can't tackle right away. To remember, you can use a standard TODO comment and easily find it later on when you have the time. Here we walk through the process of adding one for a bit we don't have time for just yet.

Wrapping up our review of values that could be converted to variables New!

Screenshot for Wrapping up our review of values that could be converted to variables

In this video we complete the process of reviewing our code for any potential values we could pull into variables.

How to use nesting in SASS to reduce selector repetition New!
(This one's FREE!)

Screenshot for How to use nesting in SASS to reduce selector repetition

Nesting is one of the most exciting parts of SASS for many front-end developers. It allows you group styles together in a meaningful way and significantly reduce repetition. Here we adjust our code to use nesting and simplify our styles.

Why it makes sense to use separate SASS files for each component New!

Screenshot for Why it makes sense to use separate SASS files for each component

It may sound like a dramatic leap, but in this video we talk about why it might make sense to split off each of our component's CSS rules into separate files. It's not a trivial shift, but it's one that will be important for the sustainability of our project in the long term.

How to use parent selectors as a prefix with the ampersand in SASS New!

Screenshot for How to use parent selectors as a prefix with the amperstand in SASS

We've managed to reduce repetition quite in our CSS by using SASS variables and nesting. In this video we implement one additional feature of SASS, which is the ability to use a selector as a prefix for the selectors nested inside it's definition. Since we're using SMACSS, this works brilliantly to nearly eliminate the need for repeating our component names in our selectors.

Why it's important to review the CSS that your SASS creates New!
(This one's FREE!)

Screenshot for Why it's important to review the CSS that your SASS creates

SASS provides a rich syntax for organizing your CSS selectors in a meaningful way. However, it's easy to use SASS in a way that creates inefficient and unnecessary CSS. Here we talk about why it's important to review the processed CSS, especially when you're experimenting with new features in SASS.

How to efficiently code an anchor tag with multiple states in SASS New!

Screenshot for How to efficiently code an anchor tag with multiple states in SASS

In our template, our most complicated and verbose selector is for an anchor tag and all of its states. In this video we talk through how to re-code this in SASS, making it far less redundant and easier to read.

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

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

If you want to hop into this video series from here, this video will show you how to get your examples squared away so you can dive right in.

Re-organizing our file structure into folders and how to use SASS watch on folders New!

Screenshot for Re-organizing our file structure into folders and how to use SASS watch on folders

Up until this point, we've used a flat file structure (i.e. no folders) for all of our project files. However, we're getting to a point where it makes sense to break it down. As a bonus, by moving our SASS into a folder, we'll be able to watch all the files in the folder instead of specifically watching a single file.

How to use partials to split SASS into smaller files New!

Screenshot for How to use partials to split SASS into smaller files

We talked earlier about how it might make sense to split out the SASS for our components into separate files. In this video we use the SASS concept of partials to begin this process and explore exactly how partials work.

Moving the rest of our component SASS into separate partials New!

Screenshot for Moving the rest of our component SASS into separate partials

In this video we rapidly finish separating out our component SASS into individual files.

Updating the paths in our HTML to reflect the new file structure New!

Screenshot for Updating the paths in our HTML to reflect the new file structure

After moving our files around, we now need to update the paths in our index.html file to reflect the new location of our CSS and image files. Here we take care of that.

How to split our variables and base styles into meaningful SASS partials New!

Screenshot for How to split our variables and base styles into meaningful SASS partials

At this point our styles.scss file is looking more like a container for partials than a stylesheet itself. In this video we discuss where to put the code that is still living in the styles.scss.

July 6th, 2015

Greetings!

If you've never used Bower before, you're in for a treat. In addition to making life easier for managing third party front front end libraries, learning how to use it will also set the foundation for using other package managers throughout the series. This week we start by empowering you though the exercise of installing Bower and giving it a go.

This week we're also talking about CSS units, including the difference between relative and absolute units and what "pixel" actually means. Good stuff.

One more thing: If you didn't enter to win the drawing for a free 12-month membership to BuildAModule, you still have 6 more days to make a donation to Drupal 8 Accelerate. See last week's newsletter for more info.


How to install Bower and the Normalize.css Bower package New!
(This one's FREE!)

Screenshot for How to install Bower and the Normalize.css Bower package

Now that we've gotten Node.js installed, we can get Bower set up. In this video we install Bower and download our first Bower package. Nice!

What JSON is and exploring our first Bower package New!

Screenshot for What JSON is and exploring our first Bower package

In the last video we installed the Normalize.css Bower package, and here we take a look at where that package was installed and what the file structure looks like.

Overview of Semantic Versioning and using a package manager for version management New!

Screenshot for Overview of Semantic Versioning and using a package manager for version management

We discuss Semantic Versioning (also known as Semver) at length in another video on BuildAModule, but here we do a quick overview and talk about why a package manager is useful for managing semantically-versioned packages.

How to create a bower.json file for private projects New!

Screenshot for How to create a bower.json file for private projects

Bower is used for creating public packages like the Normalize.css package we just downloaded, but we can also use it for a private project. In this video we walk through the process of creating a bower.json file for a project we're not planning on sharing with the world at large.

How to specify Semantic Versioning ranges with a tilde (~) or asterisk (*) New!

Screenshot for How to specify Semantic Versioning ranges with a tilde (~) or asterisk (*)

It would be nice to be able to pull in third party library updates into our project without having to worry about breaking things, right? In this video we talk about how to use version ranges with Bower to pull in just patch updates to our project to minimize the impact of making updates.

How to update bower packages and the benefits of using Bower New!

Screenshot for How to update bower packages and the benefits of using Bower

In this video we demonstrate how to pull in updates to our Bower packages with a single, simple command line command. We also talk briefly about why doing updates this way makes so much sense.

The difference between absolute and relative CSS units and what a pixel unit is New!
(This one's FREE!)

Screenshot for The difference between absolute and relative CSS units and what a pixel unit is

A pixel on your screen isn't the same as a pixel unit, which is something that confuses many a new front end developer. In this video we talk about what a 'pixel' really is, and compare the two kinds of CSS units for measurement: absolute and relative.

How the 'em' relative CSS unit works New!

Screenshot for How the 'em' relative CSS unit works

Up until this point, we've been using pixels to measure our fonts and font properties. In this video we explore a relative measurement called 'em'. Em's are pretty handy in the right contexts, but rather a pain in the wrong ones. Here we talk about how they work.

How using absolute CSS units like 'px' prevents font resizing New!

Screenshot for How using absolute CSS units like 'px' prevents font resizing

One of the main arguments against using pixels as a CSS unit is that it freezes the ability to adjust the size of the font, making sites more difficult to use for those who are visually impaired. For those of us who don't adjust the default font size in our browser, it's good to see how it's done and what our site so far will look like to someone who's adjusted their font size.

How the 'rem' CSS unit works and why it can be hard to use New!

Screenshot for How the 'rem' CSS unit works and why it can be hard to use

Rem to the rescue! If pixels are to rigid and em's are to unpredictable, 'rem' units are the happy medium. In this video we explain how they work and address the one issue that can make them challenging to work with.

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:

Syndicate content

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.