October 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.


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.

Add to playlist

Add to , or

Add to new playlist:

Add to playlist
This is a member-only feature
But, it's easy to become a member

Add to cart:


Loading...
Contact us

Below are the supported keyboard shortcuts for our video player.

space
Start / stop video
shift
Go to next video
shift
Go to previous video
Increase or decrease player speed by 20%
Skip ahead or go back by 15 seconds
1...9
Jump to a percentage (2 is 20%, for example)
f
Toggle full screen
Videos Pricing More Search
BuildAModule Logo Icon BuildAModule Logo Icon
Become a member!
$29
1 month
$156
6 months
10% off
$276
12 months
20% off
All memberships come with the following:
24 / 7 access to the entire 1800+ video library
An innovative video player with a rolling transcript
Extensive Drupal and cross-platform training
A thorough and thoughtful training style
Progress tracking
Take notes on specific video sections
Intuitive multi-user management
How many users?
user
Go solo with a single user, or give multiple team members access through one account and get discounts by bundling multiple users into a single membership.