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!)
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!
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!
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!
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!
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!
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!
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!
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!)
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!
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!
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!
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!
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!
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!)
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!
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!
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!)
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!)
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!
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!
