10 NEW videos on horizontal navigation and SASS functions!

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.

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.