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