October 2015

More Thanks + 10 New Videos

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.

Follow Micah on Twitter

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.

Follow Eric on Twitter

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

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!

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

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!

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

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!

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!

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!

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!

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.

10 New Front End Videos, Plus Some Front End Thank-Yous!

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.

Follow Eugen on Twitter

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.

Follow John on Twitter

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

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!

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!

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!

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!

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!

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!

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

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!

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.